ln-20-lib-components 0.0.61 → 0.0.63

package/fesm2022/{ln-20-lib-components-ln-20-lib-components-CpOVbJ0r.mjs → ln-20-lib-components-ln-20-lib-components-CYlSQ3zg.mjs}

@@ -423,308 +423,798 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full p-2 rounded-lg\" [style.backgroundColor]=\"formConfig()?.backgroundColor || 'transparent'\">\r\n  <lib-form-child [controlsData]=\"controls()\" [formGroup]=\"formGroup()\" (formSubmit)=\"submit($event)\">\r\n  </lib-form-child>\r\n  @if (httpMessage()) {\r\n  <lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n  }\r\n</div>" }]
         }], ctorParameters: () => [] });
 
-class InlineInputComponent {
-    config = input({ typeInput: ETypeInput.TEXT });
-    value = model(null);
-    outputValue = output();
-    outputBlur = output();
-    outputDebounced = output();
-    // Capturar templates proyectados desde el componente padre
-    templates;
-    // Para el manejo de chips
-    chips = [];
-    currentInput = '';
-    showDuplicateMessage = false;
-    duplicateChips = [];
-    duplicateMessageTimer = null;
-    constructor() {
-        effect(() => {
-            this.outputValue.emit(this.value());
-        });
-        const value$ = toObservable(this.value);
-        value$
-            .pipe(debounceTime(300), // <- adjust ms here
-        distinctUntilChanged(), // avoid repeats for same value
-        takeUntilDestroyed() // auto-cleanup on destroy
-        )
-            .subscribe(v => this.outputDebounced.emit(v));
-        effect(() => {
-            this.valueSelect.update((_prev) => {
-                const options = this.config()?.selectConfig?.options;
-                const currentValue = this.value();
-                if (this.isSelection(currentValue))
-                    return currentValue;
-                if (currentValue === null || currentValue === undefined)
-                    return undefined;
-                return options?.find(option => option.code === currentValue);
-            });
-        });
-    }
-    ngOnInit() {
+/**
+ * Utilidades para manejar errores de API según la interfaz IApiError
+ */
+class ApiErrorUtil {
+    /**
+     * Procesa errores de API y extrae el mensaje según la interfaz IApiError
+     * @param error - El error HTTP recibido
+     * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
+     * @returns El mensaje de error procesado
+     */
+    static handleApiError(error, fallbackMessage) {
+        const apiError = error.error;
+        const errorMessage = Array.isArray(apiError?.message)
+            ? apiError.message.join(', ')
+            : apiError?.message ?? fallbackMessage;
+        return errorMessage;
     }
-    onChange = () => { };
-    onTouched = () => { };
-    writeValue(value) {
-        this.value.set(value);
-        // Si es tipo CHIPS, inicializar los chips desde el valor
-        if (this.type === ETypeInput.CHIPS && typeof value === 'string') {
-            this.chips = value ? value.split(' ').filter(chip => chip.trim() !== '') : [];
+    /**
+     * Procesa errores de API con información detallada de campos
+     * y muestra tanto el mensaje general como los errores específicos de campo
+     * @param error - El error HTTP recibido
+     * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
+     * @returns El mensaje de error procesado con información de campos si está disponible
+     */
+    static handleApiErrorWithFields(error, fallbackMessage) {
+        const apiError = error.error;
+        let errorMessage = Array.isArray(apiError?.message)
+            ? apiError.message.join(', ')
+            : apiError?.message ?? fallbackMessage;
+        // Si hay errores de campo específicos, los agregamos al mensaje
+        if (apiError?.errors && apiError.errors.length > 0) {
+            const fieldErrors = apiError.errors
+                .map(fieldError => `${fieldError.field}: ${fieldError.message}`)
+                .join(', ');
+            errorMessage = `${errorMessage}. Errores de campos: ${fieldErrors}`;
         }
+        return errorMessage;
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    /**
+     * Obtiene solo los errores de campo específicos
+     * @param error - El error HTTP recibido
+     * @returns Array de errores de campo o array vacío si no hay errores
+     */
+    static getFieldErrors(error) {
+        const apiError = error.error;
+        return apiError?.errors ?? [];
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    /**
+     * Verifica si el error tiene errores de campo específicos
+     * @param error - El error HTTP recibido
+     * @returns true si hay errores de campo, false en caso contrario
+     */
+    static hasFieldErrors(error) {
+        const apiError = error.error;
+        return apiError?.errors && apiError.errors.length > 0;
     }
-    onChangeValue(value) {
-        this.value.set(value);
-        this.onChange(value);
+    /**
+     * Obtiene el código de error específico
+     * @param error - El error HTTP recibido
+     * @returns El código de error o undefined si no está disponible
+     */
+    static getErrorCode(error) {
+        const apiError = error.error;
+        return apiError?.errorCode;
     }
-    onBlur() {
-        this.onTouched();
-        this.outputBlur.emit(this.value());
+    /**
+     * Obtiene el timestamp del error
+     * @param error - El error HTTP recibido
+     * @returns El timestamp del error o undefined si no está disponible
+     */
+    static getErrorTimestamp(error) {
+        const apiError = error.error;
+        return apiError?.timestamp;
     }
+}
+
+class CookieUtil {
     /**
-     * Maneja eventos de teclado para prevenir la navegación de PrimeNG Table
-     * cuando se usan las flechas izquierda/derecha dentro del input
+     * Obtiene el valor de una cookie por su nombre
+     * @param name - Nombre de la cookie
+     * @returns El valor de la cookie o null si no existe
      */
-    onKeyDown(event) {
-        // Verificar si son teclas de flecha izquierda o derecha
-        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-            // Detener la propagación del evento hacia el table
-            event.stopPropagation();
+    static getCookie(name) {
+        if (typeof document === 'undefined') {
+            return null;
         }
+        const nameEQ = name + '=';
+        const ca = document.cookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) === ' ') {
+                c = c.substring(1, c.length);
+            }
+            if (c.indexOf(nameEQ) === 0) {
+                return c.substring(nameEQ.length, c.length);
+            }
+        }
+        return null;
     }
-    isSelection(value) {
-        return !!value && typeof value === 'object' && 'code' in value && 'name' in value;
-    }
-    valueSelect = signal(undefined);
-    setValueSelect(value) {
-        this.valueSelect.set(value);
-    }
-    get type() {
-        return this.config()?.typeInput ?? ETypeInput.TEXT;
-    }
-    get ETypeInput() {
-        return ETypeInput;
-    }
-    get duplicatesText() {
-        return this.duplicateChips.join(', ');
-    }
-    get currency() {
-        return this.config()?.currencyConfig?.currency ?? 'COP';
-    }
-    get locale() {
-        return this.config()?.currencyConfig?.locale ?? 'es-CO';
-    }
-    get minFractionDigits() {
-        return this.config()?.currencyConfig?.minFractionDigits ?? 2;
-    }
-    get maxFractionDigits() {
-        return this.config()?.currencyConfig?.maxFractionDigits ?? 2;
-    }
-    knobValueInput = computed(() => {
-        let response = this.value();
-        const knobConfig = this.config()?.knobConfig ?? { min: 0, max: 100, step: 1 };
-        response = parseInt(this.value()) ?? 0;
-        if (response < (knobConfig?.min ?? 0)) {
-            response = knobConfig.min ?? 0;
+    /**
+     * Establece una cookie
+     * @param name - Nombre de la cookie
+     * @param value - Valor de la cookie
+     * @param days - Días hasta que expire (por defecto 365)
+     * @param path - Ruta de la cookie (por defecto '/')
+     */
+    static setCookie(name, value, days = 365, path = '/') {
+        if (typeof document === 'undefined') {
+            return;
         }
-        if (response > (knobConfig?.max ?? 100)) {
-            response = knobConfig.max ?? 100;
+        let expires = '';
+        if (days) {
+            const date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = '; expires=' + date.toUTCString();
         }
-        return response;
-    });
-    knobValueTemplate = computed(() => {
-        return this.config()?.knobConfig?.valueTemplate ?? '';
-    });
-    // Métodos para manejo de chips
-    onChipInputChange(event) {
-        const target = event.target;
-        this.currentInput = target.value;
+        document.cookie = name + '=' + (value || '') + expires + '; path=' + path;
     }
-    onChipKeydown(event) {
-        if (event.key === ' ' || event.key === 'Enter') {
-            event.preventDefault();
-            this.addChip();
+    /**
+     * Elimina una cookie
+     * @param name - Nombre de la cookie a eliminar
+     * @param path - Ruta de la cookie (por defecto '/')
+     */
+    static eraseCookie(name, path = '/') {
+        if (typeof document === 'undefined') {
+            return;
         }
-        else if (event.key === 'Backspace' && this.currentInput === '' && this.chips.length > 0) {
-            // Si no hay texto y hay chips, eliminar el último chip
-            this.removeChip(this.chips.length - 1);
+        document.cookie = name + '=; Path=' + path + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    }
+    /**
+     * Obtiene un valor booleano desde una cookie
+     * @param name - Nombre de la cookie
+     * @param defaultValue - Valor por defecto si la cookie no existe
+     * @returns El valor booleano
+     */
+    static getBooleanCookie(name, defaultValue = false) {
+        const value = this.getCookie(name);
+        if (value === null) {
+            return defaultValue;
         }
-        // No interceptar las flechas aquí ya que se maneja en onKeyDown
+        return value === 'true';
     }
-    onChipPaste(event) {
-        event.preventDefault();
-        const pastedText = event.clipboardData?.getData('text') || '';
-        this.processPastedText(pastedText);
+    /**
+     * Establece un valor booleano en una cookie
+     * @param name - Nombre de la cookie
+     * @param value - Valor booleano
+     * @param days - Días hasta que expire (por defecto 365)
+     * @param path - Ruta de la cookie (por defecto '/')
+     */
+    static setBooleanCookie(name, value, days = 365, path = '/') {
+        this.setCookie(name, value.toString(), days, path);
     }
-    addChip() {
-        const trimmedValue = this.currentInput.trim();
-        if (trimmedValue) {
-            if (this.chips.includes(trimmedValue)) {
-                // Mostrar mensaje de duplicado con el chip específico
-                this.duplicateChips = [trimmedValue];
-                this.showDuplicateAlert();
+}
+
+const formatCurrency = (amount, currency) => {
+    return new Intl.NumberFormat('es-CO', {
+        style: 'currency',
+        currency: currency || 'COP'
+    }).format(amount);
+};
+
+const isSameDay = (date1, date2) => {
+    const date1Copy = new Date(date1.setHours(0, 0, 0, 0));
+    const date2Copy = new Date(date2.setHours(0, 0, 0, 0));
+    return date1Copy.getTime() === date2Copy.getTime();
+};
+const formatDateDMA = (date) => {
+    return new Date(date).toLocaleDateString('es-CO', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    });
+};
+// Crea una funcion que tambien muestre la hora
+const formatDateDMAWithTime = (date) => {
+    return new Date(date).toLocaleDateString('es-CO', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+/**
+ * Enum con los tipos de archivos más relevantes para la aplicación
+ */
+var EFileType;
+(function (EFileType) {
+    // Documentos
+    EFileType["PDF"] = "application/pdf";
+    EFileType["DOC"] = "application/msword";
+    EFileType["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    EFileType["XLS"] = "application/vnd.ms-excel";
+    EFileType["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    EFileType["PPT"] = "application/vnd.ms-powerpoint";
+    EFileType["PPTX"] = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    EFileType["TXT"] = "text/plain";
+    EFileType["RTF"] = "application/rtf";
+    // Imágenes
+    EFileType["JPG"] = "image/jpeg";
+    EFileType["PNG"] = "image/png";
+    EFileType["GIF"] = "image/gif";
+    EFileType["BMP"] = "image/bmp";
+    EFileType["SVG"] = "image/svg+xml";
+    EFileType["WEBP"] = "image/webp";
+    // Archivos comprimidos
+    EFileType["ZIP"] = "application/zip";
+    EFileType["RAR"] = "application/vnd.rar";
+    EFileType["TAR"] = "application/x-tar";
+    EFileType["GZ"] = "application/gzip";
+    // Archivos de datos
+    EFileType["CSV"] = "text/csv";
+    EFileType["JSON"] = "application/json";
+    EFileType["XML"] = "application/xml";
+    // Archivos de audio
+    EFileType["MP3"] = "audio/mpeg";
+    EFileType["WAV"] = "audio/wav";
+    EFileType["OGG"] = "audio/ogg";
+    // Archivos de video
+    EFileType["MP4"] = "video/mp4";
+    EFileType["AVI"] = "video/x-msvideo";
+    EFileType["MOV"] = "video/quicktime";
+    EFileType["WMV"] = "video/x-ms-wmv";
+    // Todos los tipos de imagen
+    EFileType["ALL_IMAGES"] = "image/*";
+    // Todos los tipos de documento
+    EFileType["ALL_DOCUMENTS"] = "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,application/rtf";
+    // Todos los tipos de archivo
+    EFileType["ALL_FILES"] = "*/*";
+})(EFileType || (EFileType = {}));
+/**
+ * Método mejorado para abrir el selector de archivos
+ * @param options - Opciones para configurar el input de archivo
+ */
+const triggerFileInput = (options = {}) => {
+    const { accept = EFileType.ALL_FILES, multiple = false, onFileSelected } = options;
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = accept;
+    input.multiple = multiple;
+    input.style.display = 'none';
+    input.onchange = (event) => {
+        const target = event.target;
+        const files = target.files;
+        if (files && files.length > 0 && onFileSelected) {
+            if (multiple) {
+                // Si es múltiple, llamar al callback con todos los archivos
+                Array.from(files).forEach(file => {
+                    onFileSelected(file);
+                });
             }
             else {
-                this.chips.push(trimmedValue);
-                this.currentInput = '';
-                this.updateChipsValue();
-                this.hideDuplicateAlert();
+                // Si es único, llamar al callback con el primer archivo
+                const file = files[0];
+                onFileSelected(file);
             }
         }
-    }
-    removeChip(index) {
-        this.chips.splice(index, 1);
-        this.updateChipsValue();
-    }
-    updateChipsValue() {
-        const chipsValue = this.chips.join(' ');
-        this.value.set(chipsValue);
-        this.onChange(chipsValue);
-    }
-    showDuplicateAlert() {
-        this.showDuplicateMessage = true;
-        // Limpiar timer anterior si existe
-        if (this.duplicateMessageTimer) {
-            clearTimeout(this.duplicateMessageTimer);
-        }
-        // Ocultar mensaje después de 3 segundos
-        this.duplicateMessageTimer = setTimeout(() => {
-            this.hideDuplicateAlert();
-        }, 3000);
-    }
-    hideDuplicateAlert() {
-        this.showDuplicateMessage = false;
-        this.duplicateChips = [];
-        if (this.duplicateMessageTimer) {
-            clearTimeout(this.duplicateMessageTimer);
-            this.duplicateMessageTimer = null;
+        document.body.removeChild(input);
+    };
+    document.body.appendChild(input);
+    input.click();
+};
+/**
+ * Función para capturar una foto usando la cámara
+ */
+const capturePhotoFromCamera = async (options = {}) => {
+    const { quality = 0.9, facingMode = 'environment', onPhotoTaken, onError } = options;
+    try {
+        if (!navigator.mediaDevices?.getUserMedia) {
+            throw new Error('Cámara no soportada en este navegador');
         }
-    }
-    processPastedText(text) {
-        // Dividir el texto por espacios y filtrar elementos vacíos
-        const newChips = text
-            .split(/\s+/) // Dividir por uno o más espacios
-            .map(chip => chip.trim()) // Limpiar espacios en cada elemento
-            .filter(chip => chip !== ''); // Filtrar elementos vacíos
-        const foundDuplicates = [];
-        let addedChips = 0;
-        // Agregar cada chip nuevo y recopilar duplicados
-        newChips.forEach(chipText => {
-            if (!this.chips.includes(chipText)) {
-                this.chips.push(chipText);
-                addedChips++;
-            }
-            else {
-                // Solo agregar a duplicados si no está ya en la lista
-                if (!foundDuplicates.includes(chipText)) {
-                    foundDuplicates.push(chipText);
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode }
+        });
+        const video = document.createElement('video');
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        // Crear modal
+        const modal = document.createElement('div');
+        modal.style.cssText = `
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.9); display: flex; flex-direction: column;
+      align-items: center; justify-content: center; z-index: 10000;
+    `;
+        video.style.cssText = 'width: 80%; max-width: 500px; border-radius: 8px;';
+        video.srcObject = stream;
+        video.autoplay = true;
+        video.playsInline = true;
+        const buttonsDiv = document.createElement('div');
+        buttonsDiv.style.cssText = 'display: flex; gap: 20px; margin-top: 20px;';
+        const captureBtn = document.createElement('button');
+        captureBtn.textContent = 'Tomar Foto';
+        captureBtn.style.cssText = `
+      padding: 12px 24px; background: #007bff; color: white;
+      border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
+    `;
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = 'Cancelar';
+        cancelBtn.style.cssText = `
+      padding: 12px 24px; background: #6c757d; color: white;
+      border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
+    `;
+        const cleanup = () => {
+            stream.getTracks().forEach(track => track.stop());
+            modal.remove();
+        };
+        captureBtn.onclick = () => {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            context.drawImage(video, 0, 0);
+            canvas.toBlob((blob) => {
+                if (blob && onPhotoTaken) {
+                    const file = new File([blob], `photo-${Date.now()}.jpg`, { type: 'image/jpeg' });
+                    onPhotoTaken(file);
                 }
-            }
+                cleanup();
+            }, 'image/jpeg', quality);
+        };
+        cancelBtn.onclick = cleanup;
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape')
+                cleanup();
         });
-        // Limpiar el input actual
-        this.currentInput = '';
-        // Actualizar el valor si se agregaron chips
-        if (addedChips > 0) {
-            this.updateChipsValue();
-        }
-        // Mostrar alerta si hubo duplicados
-        if (foundDuplicates.length > 0) {
-            this.duplicateChips = foundDuplicates;
-            this.showDuplicateAlert();
-        }
-        else {
-            this.hideDuplicateAlert();
-        }
+        buttonsDiv.append(captureBtn, cancelBtn);
+        modal.append(video, buttonsDiv);
+        document.body.appendChild(modal);
     }
-    /**
-     * Método público para establecer chips desde un array externo
-     * @param chipsArray Array de strings que representan las chips
-     */
-    setChipsFromArray(chipsArray) {
-        if (!Array.isArray(chipsArray)) {
-            console.warn('setChipsFromArray: El parámetro debe ser un array de strings');
-            return;
-        }
-        // Filtrar elementos válidos (strings no vacíos)
-        const validChips = chipsArray
-            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
-            .map(chip => chip.trim());
-        // Actualizar el array de chips
-        this.chips = [...validChips];
-        // Limpiar el input actual
-        this.currentInput = '';
-        // Actualizar el valor del componente
-        this.updateChipsValue();
-        // Ocultar cualquier mensaje de duplicado
-        this.hideDuplicateAlert();
+    catch (error) {
+        if (onError)
+            onError(error);
     }
-    /**
-     * Método público para obtener las chips actuales como array
-     * @returns Array de strings con las chips actuales
-     */
-    getChipsAsArray() {
-        return [...this.chips];
+};
+var EFileIcons;
+(function (EFileIcons) {
+    EFileIcons["FILE"] = "file";
+    EFileIcons["IMAGE"] = "image";
+    EFileIcons["VIDEO"] = "video";
+    EFileIcons["FOLDER"] = "folder";
+    EFileIcons["EXCEL"] = "excel";
+    EFileIcons["SIGNATURE"] = "signature";
+    EFileIcons["CONTRACT"] = "contract";
+    EFileIcons["FINGERPRINT"] = "fingerprint";
+    EFileIcons["ID_CARD"] = "id_card";
+    EFileIcons["FILE_BOX"] = "file_box";
+    EFileIcons["SECURE_BUILDING"] = "secure_building";
+    EFileIcons["POLICE"] = "police";
+})(EFileIcons || (EFileIcons = {}));
+const DocumentIcon = {
+    [EFileIcons.FILE]: 'fa-solid fa-file-lines',
+    [EFileIcons.IMAGE]: 'fa-solid fa-file-image',
+    [EFileIcons.VIDEO]: 'fa-solid fa-file-video',
+    [EFileIcons.FOLDER]: 'fa-solid fa-folder',
+    [EFileIcons.EXCEL]: 'fa-solid fa-file-excel',
+    [EFileIcons.SIGNATURE]: 'fa-solid fa-signature',
+    [EFileIcons.CONTRACT]: 'fa-solid fa-file-contract',
+    [EFileIcons.FINGERPRINT]: 'fa-solid fa-fingerprint',
+    [EFileIcons.ID_CARD]: 'fa-solid fa-id-card',
+    [EFileIcons.SECURE_BUILDING]: 'fa-solid fa-building-shield',
+    [EFileIcons.POLICE]: 'fa-solid fa-hand-middle-finger',
+    [EFileIcons.FILE_BOX]: 'fa-solid fa-box-archive'
+};
+const downloadFile = (blob, fileName) => {
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+};
+
+//sin uuid, codigo propio
+const generateId = () => {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2, 15);
+};
+
+const formatNumber = (number) => {
+    return new Intl.NumberFormat('es-CO', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    }).format(number);
+};
+const fixedNumber = (number) => {
+    return Number(number.toFixed(2));
+};
+
+const hasValues = (obj) => {
+    return Object.values(obj).some(value => value !== null && value !== undefined);
+};
+/**
+ * Elimina las propiedades de un objeto que tengan valores null o undefined.
+ * Retorna un nuevo objeto sin mutar el original.
+ * @param obj - Objeto del cual se eliminarán las propiedades null/undefined
+ * @returns Nuevo objeto sin las propiedades con valores null o undefined
+ */
+const removeNullUndefined = (obj) => {
+    const result = {};
+    Object.keys(obj).forEach(key => {
+        const value = obj[key];
+        if (value !== null && value !== undefined) {
+            result[key] = value;
+        }
+    });
+    return result;
+};
+/**
+ * Realiza un upsert en un array de strings. Si el string ya existe, no hace nada.
+ * Si no existe, lo agrega al array.
+ * @param targetArray - Array de strings donde se realizará el upsert
+ * @param value - String o array de strings a insertar
+ * @returns Array actualizado con los nuevos valores
+ */
+const upsertArrayStrings = (targetArray, value) => {
+    // Crear una copia del array original para evitar mutaciones
+    const result = [...targetArray];
+    // Convertir el valor a array para procesamiento uniforme
+    const valuesToInsert = Array.isArray(value) ? value : [value];
+    // Procesar cada valor
+    valuesToInsert.forEach(stringValue => {
+        // Solo agregar si no existe en el array
+        if (!result.includes(stringValue)) {
+            result.push(stringValue);
+        }
+    });
+    return result;
+};
+const sameArray = (arr1, arr2) => {
+    if (arr1.length !== arr2.length)
+        return false;
+    const sorted1 = Array.from(arr1).sort();
+    const sorted2 = Array.from(arr2).sort();
+    return sorted1.every((item, index) => item === sorted2[index]);
+};
+const getOptionByCode = (options, code) => {
+    if (!code)
+        return undefined;
+    return options.find((item) => item.code === code);
+};
+const createEnumeratedList = (items) => {
+    if (items.length === 0) {
+        return '';
+    }
+    if (items.length === 1) {
+        return `1. ${items[0]}`;
+    }
+    return items
+        .map((item, index) => `${index + 1}. ${item}`)
+        .join('\n');
+};
+
+class PrimeNgUtil {
+    static isPrimeNgSelection(value) {
+        return typeof value === 'object' && value !== null && 'name' in value && 'code' in value;
+    }
+}
+
+class InlineInputComponent {
+    config = input({ typeInput: ETypeInput.TEXT });
+    value = model(null);
+    outputValue = output();
+    outputBlur = output();
+    outputDebounced = output();
+    // Capturar templates proyectados desde el componente padre
+    templates;
+    // Para el manejo de chips
+    chips = [];
+    currentInput = '';
+    showDuplicateMessage = false;
+    duplicateChips = [];
+    duplicateMessageTimer = null;
+    constructor() {
+        effect(() => {
+            this.outputValue.emit(this.value());
+        });
+        const value$ = toObservable(this.value);
+        value$
+            .pipe(debounceTime(300), // <- adjust ms here
+        distinctUntilChanged(), // avoid repeats for same value
+        takeUntilDestroyed() // auto-cleanup on destroy
+        )
+            .subscribe(v => this.outputDebounced.emit(v));
+        effect(() => {
+            this.valueSelect.update((_prev) => {
+                const options = this.config()?.selectConfig?.options;
+                const currentValue = this.value();
+                if (this.isSelection(currentValue))
+                    return currentValue;
+                if (currentValue === null || currentValue === undefined)
+                    return undefined;
+                return options?.find(option => option.code === currentValue);
+            });
+        });
+    }
+    ngOnInit() {
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
+        // Si es tipo CHIPS, inicializar los chips desde el valor
+        if (this.type === ETypeInput.CHIPS && typeof value === 'string') {
+            this.chips = value ? value.split(' ').filter(chip => chip.trim() !== '') : [];
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onChangeValue(value) {
+        let nextValue = value;
+        if (this.type === ETypeInput.MULTISELECT && Array.isArray(value)) {
+            nextValue = value.filter((item) => item != null && this.isSelection(item));
+        }
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+    }
+    onBlur() {
+        this.onTouched();
+        this.outputBlur.emit(this.value());
     }
     /**
-     * Método público para limpiar todas las chips
+     * Maneja eventos de teclado para prevenir la navegación de PrimeNG Table
+     * cuando se usan las flechas izquierda/derecha dentro del input
      */
-    clearAllChips() {
-        this.chips = [];
-        this.currentInput = '';
-        this.updateChipsValue();
-        this.hideDuplicateAlert();
+    onKeyDown(event) {
+        // Verificar si son teclas de flecha izquierda o derecha
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            // Detener la propagación del evento hacia el table
+            event.stopPropagation();
+        }
+    }
+    isSelection(value) {
+        return PrimeNgUtil.isPrimeNgSelection(value);
     }
     /**
-     * Método público para agregar múltiples chips desde un array
-     * Evita duplicados y muestra mensajes de alerta si es necesario
-     * @param chipsArray Array de strings a agregar
+     * Normaliza el valor del multiselect: PrimeNG ColumnFilter devuelve string[] (name/code)
+     * pero p-multiselect espera IPrimeNgSelection[] cuando las options son objetos.
      */
-    addChipsFromArray(chipsArray) {
-        if (!Array.isArray(chipsArray)) {
-            console.warn('addChipsFromArray: El parámetro debe ser un array de strings');
-            return;
+    multiSelectValue = computed(() => {
+        return this.normalizeMultiSelectValue(this.value());
+    });
+    normalizeMultiSelectValue(value) {
+        if (value == null) {
+            return [];
         }
-        // Filtrar elementos válidos
-        const validChips = chipsArray
-            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
-            .map(chip => chip.trim());
-        const foundDuplicates = [];
-        let addedChips = 0;
-        // Agregar cada chip nuevo y recopilar duplicados
-        validChips.forEach(chipText => {
-            if (!this.chips.includes(chipText)) {
-                this.chips.push(chipText);
-                addedChips++;
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        const options = this.config()?.multiSelectConfig?.options ?? [];
+        return value
+            .filter((item) => item != null && item !== '')
+            .map((item) => {
+            if (this.isSelection(item)) {
+                return item;
             }
-            else {
-                // Solo agregar a duplicados si no está ya en la lista
-                if (!foundDuplicates.includes(chipText)) {
-                    foundDuplicates.push(chipText);
-                }
+            if (typeof item === 'string') {
+                return options.find((option) => option.code === item || option.name === item);
             }
-        });
-        // Actualizar el valor si se agregaron chips
-        if (addedChips > 0) {
-            this.updateChipsValue();
-        }
-        // Mostrar alerta si hubo duplicados
-        if (foundDuplicates.length > 0) {
-            this.duplicateChips = foundDuplicates;
-            this.showDuplicateAlert();
-        }
-        else {
-            this.hideDuplicateAlert();
-        }
-    }
-    // Limpiar timer al destruir el componente
-    ngOnDestroy() {
-        if (this.duplicateMessageTimer) {
-            clearTimeout(this.duplicateMessageTimer);
-        }
+            return undefined;
+        })
+            .filter((item) => !!item);
+    }
+    valueSelect = signal(undefined);
+    setValueSelect(value) {
+        this.valueSelect.set(value);
+    }
+    get type() {
+        return this.config()?.typeInput ?? ETypeInput.TEXT;
+    }
+    get ETypeInput() {
+        return ETypeInput;
+    }
+    get duplicatesText() {
+        return this.duplicateChips.join(', ');
+    }
+    get currency() {
+        return this.config()?.currencyConfig?.currency ?? 'COP';
+    }
+    get locale() {
+        return this.config()?.currencyConfig?.locale ?? 'es-CO';
+    }
+    get minFractionDigits() {
+        return this.config()?.currencyConfig?.minFractionDigits ?? 2;
+    }
+    get maxFractionDigits() {
+        return this.config()?.currencyConfig?.maxFractionDigits ?? 2;
+    }
+    knobValueInput = computed(() => {
+        let response = this.value();
+        const knobConfig = this.config()?.knobConfig ?? { min: 0, max: 100, step: 1 };
+        response = parseInt(this.value()) ?? 0;
+        if (response < (knobConfig?.min ?? 0)) {
+            response = knobConfig.min ?? 0;
+        }
+        if (response > (knobConfig?.max ?? 100)) {
+            response = knobConfig.max ?? 100;
+        }
+        return response;
+    });
+    knobValueTemplate = computed(() => {
+        return this.config()?.knobConfig?.valueTemplate ?? '';
+    });
+    // Métodos para manejo de chips
+    onChipInputChange(event) {
+        const target = event.target;
+        this.currentInput = target.value;
+    }
+    onChipKeydown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.addChip();
+        }
+        else if (event.key === 'Backspace' && this.currentInput === '' && this.chips.length > 0) {
+            // Si no hay texto y hay chips, eliminar el último chip
+            this.removeChip(this.chips.length - 1);
+        }
+        // No interceptar las flechas aquí ya que se maneja en onKeyDown
+    }
+    onChipPaste(event) {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        this.processPastedText(pastedText);
+    }
+    addChip() {
+        const trimmedValue = this.currentInput.trim();
+        if (trimmedValue) {
+            if (this.chips.includes(trimmedValue)) {
+                // Mostrar mensaje de duplicado con el chip específico
+                this.duplicateChips = [trimmedValue];
+                this.showDuplicateAlert();
+            }
+            else {
+                this.chips.push(trimmedValue);
+                this.currentInput = '';
+                this.updateChipsValue();
+                this.hideDuplicateAlert();
+            }
+        }
+    }
+    removeChip(index) {
+        this.chips.splice(index, 1);
+        this.updateChipsValue();
+    }
+    updateChipsValue() {
+        const chipsValue = this.chips.join(' ');
+        this.value.set(chipsValue);
+        this.onChange(chipsValue);
+    }
+    showDuplicateAlert() {
+        this.showDuplicateMessage = true;
+        // Limpiar timer anterior si existe
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+        }
+        // Ocultar mensaje después de 3 segundos
+        this.duplicateMessageTimer = setTimeout(() => {
+            this.hideDuplicateAlert();
+        }, 3000);
+    }
+    hideDuplicateAlert() {
+        this.showDuplicateMessage = false;
+        this.duplicateChips = [];
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+            this.duplicateMessageTimer = null;
+        }
+    }
+    processPastedText(text) {
+        // Dividir el texto por espacios y filtrar elementos vacíos
+        const newChips = text
+            .split(/\s+/) // Dividir por uno o más espacios
+            .map(chip => chip.trim()) // Limpiar espacios en cada elemento
+            .filter(chip => chip !== ''); // Filtrar elementos vacíos
+        const foundDuplicates = [];
+        let addedChips = 0;
+        // Agregar cada chip nuevo y recopilar duplicados
+        newChips.forEach(chipText => {
+            if (!this.chips.includes(chipText)) {
+                this.chips.push(chipText);
+                addedChips++;
+            }
+            else {
+                // Solo agregar a duplicados si no está ya en la lista
+                if (!foundDuplicates.includes(chipText)) {
+                    foundDuplicates.push(chipText);
+                }
+            }
+        });
+        // Limpiar el input actual
+        this.currentInput = '';
+        // Actualizar el valor si se agregaron chips
+        if (addedChips > 0) {
+            this.updateChipsValue();
+        }
+        // Mostrar alerta si hubo duplicados
+        if (foundDuplicates.length > 0) {
+            this.duplicateChips = foundDuplicates;
+            this.showDuplicateAlert();
+        }
+        else {
+            this.hideDuplicateAlert();
+        }
+    }
+    /**
+     * Método público para establecer chips desde un array externo
+     * @param chipsArray Array de strings que representan las chips
+     */
+    setChipsFromArray(chipsArray) {
+        if (!Array.isArray(chipsArray)) {
+            console.warn('setChipsFromArray: El parámetro debe ser un array de strings');
+            return;
+        }
+        // Filtrar elementos válidos (strings no vacíos)
+        const validChips = chipsArray
+            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
+            .map(chip => chip.trim());
+        // Actualizar el array de chips
+        this.chips = [...validChips];
+        // Limpiar el input actual
+        this.currentInput = '';
+        // Actualizar el valor del componente
+        this.updateChipsValue();
+        // Ocultar cualquier mensaje de duplicado
+        this.hideDuplicateAlert();
+    }
+    /**
+     * Método público para obtener las chips actuales como array
+     * @returns Array de strings con las chips actuales
+     */
+    getChipsAsArray() {
+        return [...this.chips];
+    }
+    /**
+     * Método público para limpiar todas las chips
+     */
+    clearAllChips() {
+        this.chips = [];
+        this.currentInput = '';
+        this.updateChipsValue();
+        this.hideDuplicateAlert();
+    }
+    /**
+     * Método público para agregar múltiples chips desde un array
+     * Evita duplicados y muestra mensajes de alerta si es necesario
+     * @param chipsArray Array de strings a agregar
+     */
+    addChipsFromArray(chipsArray) {
+        if (!Array.isArray(chipsArray)) {
+            console.warn('addChipsFromArray: El parámetro debe ser un array de strings');
+            return;
+        }
+        // Filtrar elementos válidos
+        const validChips = chipsArray
+            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
+            .map(chip => chip.trim());
+        const foundDuplicates = [];
+        let addedChips = 0;
+        // Agregar cada chip nuevo y recopilar duplicados
+        validChips.forEach(chipText => {
+            if (!this.chips.includes(chipText)) {
+                this.chips.push(chipText);
+                addedChips++;
+            }
+            else {
+                // Solo agregar a duplicados si no está ya en la lista
+                if (!foundDuplicates.includes(chipText)) {
+                    foundDuplicates.push(chipText);
+                }
+            }
+        });
+        // Actualizar el valor si se agregaron chips
+        if (addedChips > 0) {
+            this.updateChipsValue();
+        }
+        // Mostrar alerta si hubo duplicados
+        if (foundDuplicates.length > 0) {
+            this.duplicateChips = foundDuplicates;
+            this.showDuplicateAlert();
+        }
+        else {
+            this.hideDuplicateAlert();
+        }
+    }
+    // Limpiar timer al destruir el componente
+    ngOnDestroy() {
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InlineInputComponent, isStandalone: true, selector: "lib-inline-input", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outputValue: "outputValue", outputBlur: "outputBlur", outputDebounced: "outputDebounced" }, providers: [
@@ -733,7 +1223,7 @@ class InlineInputComponent {
                 useExisting: forwardRef(() => InlineInputComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KnobModule }, { kind: "component", type: i9$1.Knob, selector: "p-knob", inputs: ["styleClass", "style", "ariaLabel", "ariaLabelledBy", "tabindex", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "disabled", "showValue", "readonly"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i11.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"multiSelectValue()\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KnobModule }, { kind: "component", type: i9$1.Knob, selector: "p-knob", inputs: ["styleClass", "style", "ariaLabel", "ariaLabelledBy", "tabindex", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "disabled", "showValue", "readonly"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i11.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, decorators: [{
             type: Component,
@@ -757,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             useExisting: forwardRef(() => InlineInputComponent),
                             multi: true
                         }
-                    ], template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"] }]
+                    ], template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"multiSelectValue()\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -870,668 +1360,210 @@ class SpeedDialService {
                 this._panelLeft.set(`${rect.left - offsetLeft}px`);
                 break;
             case 'left':
-                this._panelTop.set(`${rect.top - offsetTop}px`);
-                this._panelLeft.set(`${rect.left - offsetLeft - this.panelOffset}px`);
-                break;
-            case 'right':
-                this._panelTop.set(`${rect.top - offsetTop}px`);
-                this._panelLeft.set(`${rect.right - offsetLeft + this.panelOffset}px`);
-                break;
-        }
-    }
-    /**
-     * Detecta el ancestro que actúa como containing block para elementos fixed.
-     * Si existe (por transform/filter/contain/etc), el panel debe posicionarse
-     * relativo a ese contenedor y no al viewport.
-     */
-    getFixedContainingBlock(element) {
-        let current = element.parentElement;
-        while (current) {
-            const styles = window.getComputedStyle(current);
-            const hasTransformContext = styles.transform !== 'none' ||
-                styles.perspective !== 'none' ||
-                styles.filter !== 'none' ||
-                (styles.backdropFilter && styles.backdropFilter !== 'none') ||
-                styles.contain.includes('paint') ||
-                styles.contain.includes('layout') ||
-                styles.willChange.includes('transform') ||
-                styles.willChange.includes('filter') ||
-                styles.willChange.includes('perspective');
-            if (hasTransformContext) {
-                return current;
-            }
-            current = current.parentElement;
-        }
-        return null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class AppButtonNgService {
-    buttonConfig = signal({});
-    constructor() {
-        // Effect para manejar automáticamente la rotación de mensajes
-        effect(() => {
-            const config = this.buttonConfig();
-            if (config.loading && config.loadingMessages && config.loadingMessages.length > 1) {
-                this.startMessageRotation();
-            }
-            else {
-                this.stopMessageRotation();
-            }
-        });
-    }
-    setButtonConfig(buttonConfig) {
-        this.buttonConfig.set(buttonConfig);
-    }
-    // Computed público para acceder al label dinámico
-    label = computed(() => {
-        const config = this.buttonConfig();
-        // Si está cargando y tiene mensajes de carga, rotar entre ellos
-        if (config.loading && config.loadingMessages && config.loadingMessages.length > 0) {
-            const messages = config.loadingMessages;
-            const index = this.messageIndex() % messages.length; // Wrap around
-            return messages[index];
-        }
-        // Si no está cargando, retornar el label normal
-        return config.label ? config.label : '';
-    });
-    //#region Loading Messages
-    messageIndex = signal(0);
-    intervalId;
-    startMessageRotation() {
-        if (this.intervalId)
-            return;
-        this.intervalId = setInterval(() => {
-            this.messageIndex.update(index => index + 1);
-        }, 6000);
-    }
-    stopMessageRotation() {
-        if (this.intervalId) {
-            clearInterval(this.intervalId);
-            this.intervalId = undefined;
-            this.messageIndex.set(0);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class ButtonNgComponent {
-    appButtonNgService = inject(AppButtonNgService);
-    buttonConfig = model.required();
-    onClick = output();
-    constructor() {
-        effect(() => {
-            this.appButtonNgService.setButtonConfig(this.buttonConfig());
-        });
-    }
-    get label() {
-        return this.appButtonNgService.label();
-    }
-    onClickButton() {
-        if (this.buttonConfig().onClick) {
-            return;
-        }
-        this.onClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonNgComponent, isStandalone: true, selector: "lib-button-ng", inputs: { buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonConfig: "buttonConfigChange", onClick: "onClick" }, providers: [AppButtonNgService], ngImport: i0, template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'full-width-button': config.fullWidth,\r\n      'full-height-button': config.fullHeight,\r\n      'cursor-pointer': this.onClick\r\n    }\"\r\n    [class]=\"config.class ?? ''\"\r\n  >\r\n    <p-button\r\n      [label]=\"config.hasTemplate ? undefined : label\"\r\n      [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n      [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n      [loading]=\"config.loading || false\"\r\n      [disabled]=\"config.disabled || false\"\r\n      [rounded]=\"config.rounded || false\"\r\n      [raised]=\"config.raised || false\"\r\n      [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n      [badge]=\"config.badge\"\r\n      (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n      [size]=\"config?.size\"\r\n      pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n      [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n      [iconPos]=\"config?.iconPos ?? 'left'\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n        'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n        'no-hover-template': config.hasTemplate\r\n      }\"\r\n      [outlined]=\"config.outlined || false\"\r\n      [text]=\"config.text || false\"\r\n    >\r\n      @if (config.hasTemplate) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </p-button>\r\n  </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-button-ng', imports: [
-                        ButtonModule,
-                        TooltipModule,
-                        CommonModule
-                    ], providers: [AppButtonNgService], template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'full-width-button': config.fullWidth,\r\n      'full-height-button': config.fullHeight,\r\n      'cursor-pointer': this.onClick\r\n    }\"\r\n    [class]=\"config.class ?? ''\"\r\n  >\r\n    <p-button\r\n      [label]=\"config.hasTemplate ? undefined : label\"\r\n      [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n      [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n      [loading]=\"config.loading || false\"\r\n      [disabled]=\"config.disabled || false\"\r\n      [rounded]=\"config.rounded || false\"\r\n      [raised]=\"config.raised || false\"\r\n      [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n      [badge]=\"config.badge\"\r\n      (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n      [size]=\"config?.size\"\r\n      pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n      [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n      [iconPos]=\"config?.iconPos ?? 'left'\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n        'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n        'no-hover-template': config.hasTemplate\r\n      }\"\r\n      [outlined]=\"config.outlined || false\"\r\n      [text]=\"config.text || false\"\r\n    >\r\n      @if (config.hasTemplate) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </p-button>\r\n  </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"] }]
-        }], ctorParameters: () => [] });
-
-class SpeedDialComponent {
-    mainButtonContainer;
-    speedDialConfig = input.required();
-    speedDialService = inject(SpeedDialService);
-    constructor() {
-        effect(() => {
-            this.speedDialService.setSpeedDialConfig(this.speedDialConfig());
-        });
-    }
-    get buttons() {
-        return this.speedDialService.buttons();
-    }
-    get overlayButtons() {
-        return this.speedDialService.overlayButtons();
-    }
-    get mainButton() {
-        return this.speedDialService.mainButton();
-    }
-    get isMenuOpen() {
-        return this.speedDialService.isMenuOpen();
-    }
-    get panelTop() {
-        return this.speedDialService.panelTop();
-    }
-    get panelLeft() {
-        return this.speedDialService.panelLeft();
-    }
-    get direction() {
-        return this.speedDialService.direction();
-    }
-    ngAfterViewInit() {
-        const hostElement = this.mainButtonContainer?.nativeElement;
-        if (!hostElement)
-            return;
-        this.speedDialService.setMainButtonHost(hostElement);
-    }
-    ngOnDestroy() {
-        this.speedDialService.destroy();
-    }
-    closeMenu() {
-        this.speedDialService.closeMenu();
-    }
-    onMainButtonClick(event) {
-        const target = event.target;
-        const anchor = target?.closest('button,[role="button"]');
-        this.speedDialService.toggleMenu(anchor ?? this.mainButtonContainer?.nativeElement);
-    }
-    stopPropagation(event) {
-        event.stopPropagation();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SpeedDialComponent, isStandalone: true, selector: "lib-speed-dial", inputs: { speedDialConfig: { classPropertyName: "speedDialConfig", publicName: "speedDialConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [SpeedDialService], viewQueries: [{ propertyName: "mainButtonContainer", first: true, predicate: ["mainButtonContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #mainButtonContainer\r\n  class=\"speed-dial-main-button\"\r\n  [class.speed-dial-main-button--open]=\"isMenuOpen\"\r\n  (click)=\"onMainButtonClick($event)\"\r\n>\r\n  <lib-button-ng [buttonConfig]=\"mainButton\"></lib-button-ng>\r\n</div>\r\n\r\n@if (isMenuOpen) {\r\n  <div class=\"speed-dial-overlay\" (click)=\"closeMenu()\">\r\n    <div\r\n      class=\"speed-dial-panel bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg\"\r\n      [style.top]=\"panelTop\"\r\n      [style.left]=\"panelLeft\"\r\n      (click)=\"stopPropagation($event)\"\r\n      [ngClass]=\"{\r\n        'speed-dial-panel--top': direction === 'top',\r\n        'speed-dial-panel--bottom': direction === 'bottom',\r\n        'speed-dial-panel--left': direction === 'left',\r\n        'speed-dial-panel--right': direction === 'right'\r\n      }\"\r\n    >\r\n      @for (button of overlayButtons; track $index) {\r\n        <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".speed-dial-main-button{display:inline-flex}.speed-dial-main-button--open{position:relative;z-index:2147483647}.speed-dial-overlay{position:fixed;inset:0;z-index:2147483645}.speed-dial-panel{position:fixed;z-index:2147483646;display:flex;gap:.5rem;overflow:auto;padding:.75rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 30px #0f172a40}.speed-dial-panel--top{flex-direction:column;max-width:22rem;max-height:30rem;transform:translateY(-100%)}.speed-dial-panel--bottom{flex-direction:column;max-width:22rem;max-height:30rem}.speed-dial-panel--left{flex-direction:row;max-width:40rem;max-height:8rem;transform:translate(-100%)}.speed-dial-panel--right{flex-direction:row;max-width:40rem;max-height:8rem}:host-context(.dark) .speed-dial-panel{background:#111827}\n"], dependencies: [{ kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-speed-dial', imports: [ButtonNgComponent, CommonModule], providers: [SpeedDialService], template: "<div\r\n  #mainButtonContainer\r\n  class=\"speed-dial-main-button\"\r\n  [class.speed-dial-main-button--open]=\"isMenuOpen\"\r\n  (click)=\"onMainButtonClick($event)\"\r\n>\r\n  <lib-button-ng [buttonConfig]=\"mainButton\"></lib-button-ng>\r\n</div>\r\n\r\n@if (isMenuOpen) {\r\n  <div class=\"speed-dial-overlay\" (click)=\"closeMenu()\">\r\n    <div\r\n      class=\"speed-dial-panel bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg\"\r\n      [style.top]=\"panelTop\"\r\n      [style.left]=\"panelLeft\"\r\n      (click)=\"stopPropagation($event)\"\r\n      [ngClass]=\"{\r\n        'speed-dial-panel--top': direction === 'top',\r\n        'speed-dial-panel--bottom': direction === 'bottom',\r\n        'speed-dial-panel--left': direction === 'left',\r\n        'speed-dial-panel--right': direction === 'right'\r\n      }\"\r\n    >\r\n      @for (button of overlayButtons; track $index) {\r\n        <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".speed-dial-main-button{display:inline-flex}.speed-dial-main-button--open{position:relative;z-index:2147483647}.speed-dial-overlay{position:fixed;inset:0;z-index:2147483645}.speed-dial-panel{position:fixed;z-index:2147483646;display:flex;gap:.5rem;overflow:auto;padding:.75rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 30px #0f172a40}.speed-dial-panel--top{flex-direction:column;max-width:22rem;max-height:30rem;transform:translateY(-100%)}.speed-dial-panel--bottom{flex-direction:column;max-width:22rem;max-height:30rem}.speed-dial-panel--left{flex-direction:row;max-width:40rem;max-height:8rem;transform:translate(-100%)}.speed-dial-panel--right{flex-direction:row;max-width:40rem;max-height:8rem}:host-context(.dark) .speed-dial-panel{background:#111827}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { mainButtonContainer: [{
-                type: ViewChild,
-                args: ['mainButtonContainer']
-            }] } });
-
-class KeyToDisplayNamePipe {
-    transform(key, keysNames) {
-        return keysNames?.[key] ?? key;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, isStandalone: true, name: "keyToDisplayName" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'keyToDisplayName'
-                }]
-        }] });
-
-/**
- * Utilidades para manejar errores de API según la interfaz IApiError
- */
-class ApiErrorUtil {
-    /**
-     * Procesa errores de API y extrae el mensaje según la interfaz IApiError
-     * @param error - El error HTTP recibido
-     * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
-     * @returns El mensaje de error procesado
-     */
-    static handleApiError(error, fallbackMessage) {
-        const apiError = error.error;
-        const errorMessage = Array.isArray(apiError?.message)
-            ? apiError.message.join(', ')
-            : apiError?.message ?? fallbackMessage;
-        return errorMessage;
-    }
-    /**
-     * Procesa errores de API con información detallada de campos
-     * y muestra tanto el mensaje general como los errores específicos de campo
-     * @param error - El error HTTP recibido
-     * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
-     * @returns El mensaje de error procesado con información de campos si está disponible
-     */
-    static handleApiErrorWithFields(error, fallbackMessage) {
-        const apiError = error.error;
-        let errorMessage = Array.isArray(apiError?.message)
-            ? apiError.message.join(', ')
-            : apiError?.message ?? fallbackMessage;
-        // Si hay errores de campo específicos, los agregamos al mensaje
-        if (apiError?.errors && apiError.errors.length > 0) {
-            const fieldErrors = apiError.errors
-                .map(fieldError => `${fieldError.field}: ${fieldError.message}`)
-                .join(', ');
-            errorMessage = `${errorMessage}. Errores de campos: ${fieldErrors}`;
-        }
-        return errorMessage;
-    }
-    /**
-     * Obtiene solo los errores de campo específicos
-     * @param error - El error HTTP recibido
-     * @returns Array de errores de campo o array vacío si no hay errores
-     */
-    static getFieldErrors(error) {
-        const apiError = error.error;
-        return apiError?.errors ?? [];
-    }
-    /**
-     * Verifica si el error tiene errores de campo específicos
-     * @param error - El error HTTP recibido
-     * @returns true si hay errores de campo, false en caso contrario
-     */
-    static hasFieldErrors(error) {
-        const apiError = error.error;
-        return apiError?.errors && apiError.errors.length > 0;
-    }
-    /**
-     * Obtiene el código de error específico
-     * @param error - El error HTTP recibido
-     * @returns El código de error o undefined si no está disponible
-     */
-    static getErrorCode(error) {
-        const apiError = error.error;
-        return apiError?.errorCode;
-    }
-    /**
-     * Obtiene el timestamp del error
-     * @param error - El error HTTP recibido
-     * @returns El timestamp del error o undefined si no está disponible
-     */
-    static getErrorTimestamp(error) {
-        const apiError = error.error;
-        return apiError?.timestamp;
-    }
-}
-
-class CookieUtil {
-    /**
-     * Obtiene el valor de una cookie por su nombre
-     * @param name - Nombre de la cookie
-     * @returns El valor de la cookie o null si no existe
-     */
-    static getCookie(name) {
-        if (typeof document === 'undefined') {
-            return null;
-        }
-        const nameEQ = name + '=';
-        const ca = document.cookie.split(';');
-        for (let i = 0; i < ca.length; i++) {
-            let c = ca[i];
-            while (c.charAt(0) === ' ') {
-                c = c.substring(1, c.length);
-            }
-            if (c.indexOf(nameEQ) === 0) {
-                return c.substring(nameEQ.length, c.length);
-            }
-        }
-        return null;
-    }
-    /**
-     * Establece una cookie
-     * @param name - Nombre de la cookie
-     * @param value - Valor de la cookie
-     * @param days - Días hasta que expire (por defecto 365)
-     * @param path - Ruta de la cookie (por defecto '/')
-     */
-    static setCookie(name, value, days = 365, path = '/') {
-        if (typeof document === 'undefined') {
-            return;
-        }
-        let expires = '';
-        if (days) {
-            const date = new Date();
-            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-            expires = '; expires=' + date.toUTCString();
-        }
-        document.cookie = name + '=' + (value || '') + expires + '; path=' + path;
-    }
-    /**
-     * Elimina una cookie
-     * @param name - Nombre de la cookie a eliminar
-     * @param path - Ruta de la cookie (por defecto '/')
-     */
-    static eraseCookie(name, path = '/') {
-        if (typeof document === 'undefined') {
-            return;
-        }
-        document.cookie = name + '=; Path=' + path + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-    }
-    /**
-     * Obtiene un valor booleano desde una cookie
-     * @param name - Nombre de la cookie
-     * @param defaultValue - Valor por defecto si la cookie no existe
-     * @returns El valor booleano
-     */
-    static getBooleanCookie(name, defaultValue = false) {
-        const value = this.getCookie(name);
-        if (value === null) {
-            return defaultValue;
-        }
-        return value === 'true';
-    }
-    /**
-     * Establece un valor booleano en una cookie
-     * @param name - Nombre de la cookie
-     * @param value - Valor booleano
-     * @param days - Días hasta que expire (por defecto 365)
-     * @param path - Ruta de la cookie (por defecto '/')
-     */
-    static setBooleanCookie(name, value, days = 365, path = '/') {
-        this.setCookie(name, value.toString(), days, path);
-    }
-}
-
-const formatCurrency = (amount, currency) => {
-    return new Intl.NumberFormat('es-CO', {
-        style: 'currency',
-        currency: currency || 'COP'
-    }).format(amount);
-};
-
-const isSameDay = (date1, date2) => {
-    const date1Copy = new Date(date1.setHours(0, 0, 0, 0));
-    const date2Copy = new Date(date2.setHours(0, 0, 0, 0));
-    return date1Copy.getTime() === date2Copy.getTime();
-};
-const formatDateDMA = (date) => {
-    return new Date(date).toLocaleDateString('es-CO', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-    });
-};
-// Crea una funcion que tambien muestre la hora
-const formatDateDMAWithTime = (date) => {
-    return new Date(date).toLocaleDateString('es-CO', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit'
-    });
-};
-
-/**
- * Enum con los tipos de archivos más relevantes para la aplicación
- */
-var EFileType;
-(function (EFileType) {
-    // Documentos
-    EFileType["PDF"] = "application/pdf";
-    EFileType["DOC"] = "application/msword";
-    EFileType["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
-    EFileType["XLS"] = "application/vnd.ms-excel";
-    EFileType["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-    EFileType["PPT"] = "application/vnd.ms-powerpoint";
-    EFileType["PPTX"] = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
-    EFileType["TXT"] = "text/plain";
-    EFileType["RTF"] = "application/rtf";
-    // Imágenes
-    EFileType["JPG"] = "image/jpeg";
-    EFileType["PNG"] = "image/png";
-    EFileType["GIF"] = "image/gif";
-    EFileType["BMP"] = "image/bmp";
-    EFileType["SVG"] = "image/svg+xml";
-    EFileType["WEBP"] = "image/webp";
-    // Archivos comprimidos
-    EFileType["ZIP"] = "application/zip";
-    EFileType["RAR"] = "application/vnd.rar";
-    EFileType["TAR"] = "application/x-tar";
-    EFileType["GZ"] = "application/gzip";
-    // Archivos de datos
-    EFileType["CSV"] = "text/csv";
-    EFileType["JSON"] = "application/json";
-    EFileType["XML"] = "application/xml";
-    // Archivos de audio
-    EFileType["MP3"] = "audio/mpeg";
-    EFileType["WAV"] = "audio/wav";
-    EFileType["OGG"] = "audio/ogg";
-    // Archivos de video
-    EFileType["MP4"] = "video/mp4";
-    EFileType["AVI"] = "video/x-msvideo";
-    EFileType["MOV"] = "video/quicktime";
-    EFileType["WMV"] = "video/x-ms-wmv";
-    // Todos los tipos de imagen
-    EFileType["ALL_IMAGES"] = "image/*";
-    // Todos los tipos de documento
-    EFileType["ALL_DOCUMENTS"] = "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,application/rtf";
-    // Todos los tipos de archivo
-    EFileType["ALL_FILES"] = "*/*";
-})(EFileType || (EFileType = {}));
-/**
- * Método mejorado para abrir el selector de archivos
- * @param options - Opciones para configurar el input de archivo
- */
-const triggerFileInput = (options = {}) => {
-    const { accept = EFileType.ALL_FILES, multiple = false, onFileSelected } = options;
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = accept;
-    input.multiple = multiple;
-    input.style.display = 'none';
-    input.onchange = (event) => {
-        const target = event.target;
-        const files = target.files;
-        if (files && files.length > 0 && onFileSelected) {
-            if (multiple) {
-                // Si es múltiple, llamar al callback con todos los archivos
-                Array.from(files).forEach(file => {
-                    onFileSelected(file);
-                });
-            }
-            else {
-                // Si es único, llamar al callback con el primer archivo
-                const file = files[0];
-                onFileSelected(file);
-            }
-        }
-        document.body.removeChild(input);
-    };
-    document.body.appendChild(input);
-    input.click();
-};
-/**
- * Función para capturar una foto usando la cámara
- */
-const capturePhotoFromCamera = async (options = {}) => {
-    const { quality = 0.9, facingMode = 'environment', onPhotoTaken, onError } = options;
-    try {
-        if (!navigator.mediaDevices?.getUserMedia) {
-            throw new Error('Cámara no soportada en este navegador');
-        }
-        const stream = await navigator.mediaDevices.getUserMedia({
-            video: { facingMode }
-        });
-        const video = document.createElement('video');
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        // Crear modal
-        const modal = document.createElement('div');
-        modal.style.cssText = `
-      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-      background: rgba(0,0,0,0.9); display: flex; flex-direction: column;
-      align-items: center; justify-content: center; z-index: 10000;
-    `;
-        video.style.cssText = 'width: 80%; max-width: 500px; border-radius: 8px;';
-        video.srcObject = stream;
-        video.autoplay = true;
-        video.playsInline = true;
-        const buttonsDiv = document.createElement('div');
-        buttonsDiv.style.cssText = 'display: flex; gap: 20px; margin-top: 20px;';
-        const captureBtn = document.createElement('button');
-        captureBtn.textContent = 'Tomar Foto';
-        captureBtn.style.cssText = `
-      padding: 12px 24px; background: #007bff; color: white;
-      border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
-    `;
-        const cancelBtn = document.createElement('button');
-        cancelBtn.textContent = 'Cancelar';
-        cancelBtn.style.cssText = `
-      padding: 12px 24px; background: #6c757d; color: white;
-      border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
-    `;
-        const cleanup = () => {
-            stream.getTracks().forEach(track => track.stop());
-            modal.remove();
-        };
-        captureBtn.onclick = () => {
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            context.drawImage(video, 0, 0);
-            canvas.toBlob((blob) => {
-                if (blob && onPhotoTaken) {
-                    const file = new File([blob], `photo-${Date.now()}.jpg`, { type: 'image/jpeg' });
-                    onPhotoTaken(file);
-                }
-                cleanup();
-            }, 'image/jpeg', quality);
-        };
-        cancelBtn.onclick = cleanup;
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape')
-                cleanup();
-        });
-        buttonsDiv.append(captureBtn, cancelBtn);
-        modal.append(video, buttonsDiv);
-        document.body.appendChild(modal);
-    }
-    catch (error) {
-        if (onError)
-            onError(error);
-    }
-};
-var EFileIcons;
-(function (EFileIcons) {
-    EFileIcons["FILE"] = "file";
-    EFileIcons["IMAGE"] = "image";
-    EFileIcons["VIDEO"] = "video";
-    EFileIcons["FOLDER"] = "folder";
-    EFileIcons["EXCEL"] = "excel";
-    EFileIcons["SIGNATURE"] = "signature";
-    EFileIcons["CONTRACT"] = "contract";
-    EFileIcons["FINGERPRINT"] = "fingerprint";
-    EFileIcons["ID_CARD"] = "id_card";
-    EFileIcons["FILE_BOX"] = "file_box";
-    EFileIcons["SECURE_BUILDING"] = "secure_building";
-    EFileIcons["POLICE"] = "police";
-})(EFileIcons || (EFileIcons = {}));
-const DocumentIcon = {
-    [EFileIcons.FILE]: 'fa-solid fa-file-lines',
-    [EFileIcons.IMAGE]: 'fa-solid fa-file-image',
-    [EFileIcons.VIDEO]: 'fa-solid fa-file-video',
-    [EFileIcons.FOLDER]: 'fa-solid fa-folder',
-    [EFileIcons.EXCEL]: 'fa-solid fa-file-excel',
-    [EFileIcons.SIGNATURE]: 'fa-solid fa-signature',
-    [EFileIcons.CONTRACT]: 'fa-solid fa-file-contract',
-    [EFileIcons.FINGERPRINT]: 'fa-solid fa-fingerprint',
-    [EFileIcons.ID_CARD]: 'fa-solid fa-id-card',
-    [EFileIcons.SECURE_BUILDING]: 'fa-solid fa-building-shield',
-    [EFileIcons.POLICE]: 'fa-solid fa-hand-middle-finger',
-    [EFileIcons.FILE_BOX]: 'fa-solid fa-box-archive'
-};
-const downloadFile = (blob, fileName) => {
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = fileName;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    window.URL.revokeObjectURL(url);
-};
-
-//sin uuid, codigo propio
-const generateId = () => {
-    return Date.now().toString(36) + Math.random().toString(36).substring(2, 15);
-};
-
-const formatNumber = (number) => {
-    return new Intl.NumberFormat('es-CO', {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-    }).format(number);
-};
-const fixedNumber = (number) => {
-    return Number(number.toFixed(2));
-};
+                this._panelTop.set(`${rect.top - offsetTop}px`);
+                this._panelLeft.set(`${rect.left - offsetLeft - this.panelOffset}px`);
+                break;
+            case 'right':
+                this._panelTop.set(`${rect.top - offsetTop}px`);
+                this._panelLeft.set(`${rect.right - offsetLeft + this.panelOffset}px`);
+                break;
+        }
+    }
+    /**
+     * Detecta el ancestro que actúa como containing block para elementos fixed.
+     * Si existe (por transform/filter/contain/etc), el panel debe posicionarse
+     * relativo a ese contenedor y no al viewport.
+     */
+    getFixedContainingBlock(element) {
+        let current = element.parentElement;
+        while (current) {
+            const styles = window.getComputedStyle(current);
+            const hasTransformContext = styles.transform !== 'none' ||
+                styles.perspective !== 'none' ||
+                styles.filter !== 'none' ||
+                (styles.backdropFilter && styles.backdropFilter !== 'none') ||
+                styles.contain.includes('paint') ||
+                styles.contain.includes('layout') ||
+                styles.willChange.includes('transform') ||
+                styles.willChange.includes('filter') ||
+                styles.willChange.includes('perspective');
+            if (hasTransformContext) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
 
-const hasValues = (obj) => {
-    return Object.values(obj).some(value => value !== null && value !== undefined);
-};
-/**
- * Elimina las propiedades de un objeto que tengan valores null o undefined.
- * Retorna un nuevo objeto sin mutar el original.
- * @param obj - Objeto del cual se eliminarán las propiedades null/undefined
- * @returns Nuevo objeto sin las propiedades con valores null o undefined
- */
-const removeNullUndefined = (obj) => {
-    const result = {};
-    Object.keys(obj).forEach(key => {
-        const value = obj[key];
-        if (value !== null && value !== undefined) {
-            result[key] = value;
+class AppButtonNgService {
+    buttonConfig = signal({});
+    constructor() {
+        // Effect para manejar automáticamente la rotación de mensajes
+        effect(() => {
+            const config = this.buttonConfig();
+            if (config.loading && config.loadingMessages && config.loadingMessages.length > 1) {
+                this.startMessageRotation();
+            }
+            else {
+                this.stopMessageRotation();
+            }
+        });
+    }
+    setButtonConfig(buttonConfig) {
+        this.buttonConfig.set(buttonConfig);
+    }
+    // Computed público para acceder al label dinámico
+    label = computed(() => {
+        const config = this.buttonConfig();
+        // Si está cargando y tiene mensajes de carga, rotar entre ellos
+        if (config.loading && config.loadingMessages && config.loadingMessages.length > 0) {
+            const messages = config.loadingMessages;
+            const index = this.messageIndex() % messages.length; // Wrap around
+            return messages[index];
         }
+        // Si no está cargando, retornar el label normal
+        return config.label ? config.label : '';
     });
-    return result;
-};
-/**
- * Realiza un upsert en un array de strings. Si el string ya existe, no hace nada.
- * Si no existe, lo agrega al array.
- * @param targetArray - Array de strings donde se realizará el upsert
- * @param value - String o array de strings a insertar
- * @returns Array actualizado con los nuevos valores
- */
-const upsertArrayStrings = (targetArray, value) => {
-    // Crear una copia del array original para evitar mutaciones
-    const result = [...targetArray];
-    // Convertir el valor a array para procesamiento uniforme
-    const valuesToInsert = Array.isArray(value) ? value : [value];
-    // Procesar cada valor
-    valuesToInsert.forEach(stringValue => {
-        // Solo agregar si no existe en el array
-        if (!result.includes(stringValue)) {
-            result.push(stringValue);
+    //#region Loading Messages
+    messageIndex = signal(0);
+    intervalId;
+    startMessageRotation() {
+        if (this.intervalId)
+            return;
+        this.intervalId = setInterval(() => {
+            this.messageIndex.update(index => index + 1);
+        }, 6000);
+    }
+    stopMessageRotation() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = undefined;
+            this.messageIndex.set(0);
         }
-    });
-    return result;
-};
-const sameArray = (arr1, arr2) => {
-    if (arr1.length !== arr2.length)
-        return false;
-    const sorted1 = Array.from(arr1).sort();
-    const sorted2 = Array.from(arr2).sort();
-    return sorted1.every((item, index) => item === sorted2[index]);
-};
-const getOptionByCode = (options, code) => {
-    if (!code)
-        return undefined;
-    return options.find((item) => item.code === code);
-};
-const createEnumeratedList = (items) => {
-    if (items.length === 0) {
-        return '';
     }
-    if (items.length === 1) {
-        return `1. ${items[0]}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ButtonNgComponent {
+    appButtonNgService = inject(AppButtonNgService);
+    buttonConfig = model.required();
+    onClick = output();
+    constructor() {
+        effect(() => {
+            this.appButtonNgService.setButtonConfig(this.buttonConfig());
+        });
     }
-    return items
-        .map((item, index) => `${index + 1}. ${item}`)
-        .join('\n');
-};
+    get label() {
+        return this.appButtonNgService.label();
+    }
+    onClickButton() {
+        if (this.buttonConfig().onClick) {
+            return;
+        }
+        this.onClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonNgComponent, isStandalone: true, selector: "lib-button-ng", inputs: { buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonConfig: "buttonConfigChange", onClick: "onClick" }, providers: [AppButtonNgService], ngImport: i0, template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'full-width-button': config.fullWidth,\r\n      'full-height-button': config.fullHeight,\r\n      'cursor-pointer': this.onClick\r\n    }\"\r\n    [class]=\"config.class ?? ''\"\r\n  >\r\n    <p-button\r\n      [label]=\"config.hasTemplate ? undefined : label\"\r\n      [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n      [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n      [loading]=\"config.loading || false\"\r\n      [disabled]=\"config.disabled || false\"\r\n      [rounded]=\"config.rounded || false\"\r\n      [raised]=\"config.raised || false\"\r\n      [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n      [badge]=\"config.badge\"\r\n      (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n      [size]=\"config?.size\"\r\n      pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n      [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n      [iconPos]=\"config?.iconPos ?? 'left'\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n        'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n        'no-hover-template': config.hasTemplate\r\n      }\"\r\n      [outlined]=\"config.outlined || false\"\r\n      [text]=\"config.text || false\"\r\n    >\r\n      @if (config.hasTemplate) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </p-button>\r\n  </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button-ng', imports: [
+                        ButtonModule,
+                        TooltipModule,
+                        CommonModule
+                    ], providers: [AppButtonNgService], template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'full-width-button': config.fullWidth,\r\n      'full-height-button': config.fullHeight,\r\n      'cursor-pointer': this.onClick\r\n    }\"\r\n    [class]=\"config.class ?? ''\"\r\n  >\r\n    <p-button\r\n      [label]=\"config.hasTemplate ? undefined : label\"\r\n      [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n      [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n      [loading]=\"config.loading || false\"\r\n      [disabled]=\"config.disabled || false\"\r\n      [rounded]=\"config.rounded || false\"\r\n      [raised]=\"config.raised || false\"\r\n      [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n      [badge]=\"config.badge\"\r\n      (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n      [size]=\"config?.size\"\r\n      pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n      [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n      [iconPos]=\"config?.iconPos ?? 'left'\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n        'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n        'no-hover-template': config.hasTemplate\r\n      }\"\r\n      [outlined]=\"config.outlined || false\"\r\n      [text]=\"config.text || false\"\r\n    >\r\n      @if (config.hasTemplate) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </p-button>\r\n  </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"] }]
+        }], ctorParameters: () => [] });
 
-class PrimeNgUtil {
-    static isPrimeNgSelection(value) {
-        return typeof value === 'object' && value !== null && 'name' in value && 'code' in value;
+class SpeedDialComponent {
+    mainButtonContainer;
+    speedDialConfig = input.required();
+    speedDialService = inject(SpeedDialService);
+    constructor() {
+        effect(() => {
+            this.speedDialService.setSpeedDialConfig(this.speedDialConfig());
+        });
     }
+    get buttons() {
+        return this.speedDialService.buttons();
+    }
+    get overlayButtons() {
+        return this.speedDialService.overlayButtons();
+    }
+    get mainButton() {
+        return this.speedDialService.mainButton();
+    }
+    get isMenuOpen() {
+        return this.speedDialService.isMenuOpen();
+    }
+    get panelTop() {
+        return this.speedDialService.panelTop();
+    }
+    get panelLeft() {
+        return this.speedDialService.panelLeft();
+    }
+    get direction() {
+        return this.speedDialService.direction();
+    }
+    ngAfterViewInit() {
+        const hostElement = this.mainButtonContainer?.nativeElement;
+        if (!hostElement)
+            return;
+        this.speedDialService.setMainButtonHost(hostElement);
+    }
+    ngOnDestroy() {
+        this.speedDialService.destroy();
+    }
+    closeMenu() {
+        this.speedDialService.closeMenu();
+    }
+    onMainButtonClick(event) {
+        const target = event.target;
+        const anchor = target?.closest('button,[role="button"]');
+        this.speedDialService.toggleMenu(anchor ?? this.mainButtonContainer?.nativeElement);
+    }
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SpeedDialComponent, isStandalone: true, selector: "lib-speed-dial", inputs: { speedDialConfig: { classPropertyName: "speedDialConfig", publicName: "speedDialConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [SpeedDialService], viewQueries: [{ propertyName: "mainButtonContainer", first: true, predicate: ["mainButtonContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #mainButtonContainer\r\n  class=\"speed-dial-main-button\"\r\n  [class.speed-dial-main-button--open]=\"isMenuOpen\"\r\n  (click)=\"onMainButtonClick($event)\"\r\n>\r\n  <lib-button-ng [buttonConfig]=\"mainButton\"></lib-button-ng>\r\n</div>\r\n\r\n@if (isMenuOpen) {\r\n  <div class=\"speed-dial-overlay\" (click)=\"closeMenu()\">\r\n    <div\r\n      class=\"speed-dial-panel bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg\"\r\n      [style.top]=\"panelTop\"\r\n      [style.left]=\"panelLeft\"\r\n      (click)=\"stopPropagation($event)\"\r\n      [ngClass]=\"{\r\n        'speed-dial-panel--top': direction === 'top',\r\n        'speed-dial-panel--bottom': direction === 'bottom',\r\n        'speed-dial-panel--left': direction === 'left',\r\n        'speed-dial-panel--right': direction === 'right'\r\n      }\"\r\n    >\r\n      @for (button of overlayButtons; track $index) {\r\n        <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".speed-dial-main-button{display:inline-flex}.speed-dial-main-button--open{position:relative;z-index:2147483647}.speed-dial-overlay{position:fixed;inset:0;z-index:2147483645}.speed-dial-panel{position:fixed;z-index:2147483646;display:flex;gap:.5rem;overflow:auto;padding:.75rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 30px #0f172a40}.speed-dial-panel--top{flex-direction:column;max-width:22rem;max-height:30rem;transform:translateY(-100%)}.speed-dial-panel--bottom{flex-direction:column;max-width:22rem;max-height:30rem}.speed-dial-panel--left{flex-direction:row;max-width:40rem;max-height:8rem;transform:translate(-100%)}.speed-dial-panel--right{flex-direction:row;max-width:40rem;max-height:8rem}:host-context(.dark) .speed-dial-panel{background:#111827}\n"], dependencies: [{ kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-speed-dial', imports: [ButtonNgComponent, CommonModule], providers: [SpeedDialService], template: "<div\r\n  #mainButtonContainer\r\n  class=\"speed-dial-main-button\"\r\n  [class.speed-dial-main-button--open]=\"isMenuOpen\"\r\n  (click)=\"onMainButtonClick($event)\"\r\n>\r\n  <lib-button-ng [buttonConfig]=\"mainButton\"></lib-button-ng>\r\n</div>\r\n\r\n@if (isMenuOpen) {\r\n  <div class=\"speed-dial-overlay\" (click)=\"closeMenu()\">\r\n    <div\r\n      class=\"speed-dial-panel bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg\"\r\n      [style.top]=\"panelTop\"\r\n      [style.left]=\"panelLeft\"\r\n      (click)=\"stopPropagation($event)\"\r\n      [ngClass]=\"{\r\n        'speed-dial-panel--top': direction === 'top',\r\n        'speed-dial-panel--bottom': direction === 'bottom',\r\n        'speed-dial-panel--left': direction === 'left',\r\n        'speed-dial-panel--right': direction === 'right'\r\n      }\"\r\n    >\r\n      @for (button of overlayButtons; track $index) {\r\n        <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".speed-dial-main-button{display:inline-flex}.speed-dial-main-button--open{position:relative;z-index:2147483647}.speed-dial-overlay{position:fixed;inset:0;z-index:2147483645}.speed-dial-panel{position:fixed;z-index:2147483646;display:flex;gap:.5rem;overflow:auto;padding:.75rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 30px #0f172a40}.speed-dial-panel--top{flex-direction:column;max-width:22rem;max-height:30rem;transform:translateY(-100%)}.speed-dial-panel--bottom{flex-direction:column;max-width:22rem;max-height:30rem}.speed-dial-panel--left{flex-direction:row;max-width:40rem;max-height:8rem;transform:translate(-100%)}.speed-dial-panel--right{flex-direction:row;max-width:40rem;max-height:8rem}:host-context(.dark) .speed-dial-panel{background:#111827}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mainButtonContainer: [{
+                type: ViewChild,
+                args: ['mainButtonContainer']
+            }] } });
+
+class KeyToDisplayNamePipe {
+    transform(key, keysNames) {
+        return keysNames?.[key] ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, isStandalone: true, name: "keyToDisplayName" });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'keyToDisplayName'
+                }]
+        }] });
 
 class BadgeNgComponent {
     config = model.required();
@@ -2442,7 +2474,7 @@ class TableNgService {
     //#endregion
     //#region Selection
     async openModalManagementSelectedItems(selectedItems, config) {
-        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-BGm_5OVT.mjs');
+        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-Cn5xvixS.mjs');
         let configSelectedItems = config;
         if (config) {
             configSelectedItems = structuredClone(config);
@@ -3011,8 +3043,10 @@ class TableNgComponent {
     inlineFormChanges(inlineValue, filter, typeInput, key) {
         const lazyLoadingConfig = this.config()?.lazyLoadingConfig;
         if (typeInput === ETypeInput.MULTISELECT) {
-            const options = inlineValue ? inlineValue : undefined;
-            const arrayValue = options
+            const options = Array.isArray(inlineValue)
+                ? inlineValue.filter((item) => PrimeNgUtil.isPrimeNgSelection(item))
+                : [];
+            const arrayValue = options.length > 0
                 ? options.map((data) => lazyLoadingConfig?.isEnabled ? data.code : data.name)
                 : undefined;
             if (Array.isArray(arrayValue) && arrayValue.length === 0) {
@@ -3438,13 +3472,13 @@ class TableNgComponent {
     }
     handleTableValueToSourceElements() {
         const value = this.data();
-        if (!value.some((item) => item.rowData['identifier'])) {
+        if (!value.some((item) => item.rowData?.['identifier'])) {
             return;
         }
         const sourceElements = value.map((item) => ({
             id: item.id,
             buttonConfig: {
-                label: item.rowData['identifier'],
+                label: item.rowData?.['identifier'],
                 fullWidth: true,
                 fullHeight: true
             },
@@ -3454,10 +3488,10 @@ class TableNgComponent {
     }
     handleSelectedItemsToSourceElements() {
         const selectedItems = this.selectedItems();
-        if (!selectedItems.some((item) => item.rowData['identifier'])) {
+        if (!selectedItems.some((item) => item.rowData?.['identifier'])) {
             return;
         }
-        const identifiers = selectedItems.map((item) => item.rowData['identifier']);
+        const identifiers = selectedItems.map((item) => item.rowData?.['identifier']);
         const sourceElements = this.sourceElements().map((item) => ({
             ...item,
             isSelected: identifiers.includes(item.buttonConfig?.label)
@@ -3614,7 +3648,7 @@ class TableNgComponent {
         return this.tableNgService.refreshButton();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarSpeedDialButtons: { classPropertyName: "toolbarSpeedDialButtons", publicName: "toolbarSpeedDialButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", isLoading: "isLoadingChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", toolbarSpeedDialButtons: "toolbarSpeedDialButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", outputCheckAll: "outputCheckAll", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? lazyLoadingConfig!.totalRecords\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @let columnInputConfig = inputConfig![column.field]!;\r\n              @if (columnInputConfig.type === ETypeInput.SWITCH || columnInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, columnInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![column.field]!;\r\n            <p-columnFilter [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @let keyInputConfig = inputConfig![key]!;\r\n              @if (keyInputConfig.type === ETypeInput.SWITCH || keyInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, keyInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![key]!;\r\n            <p-columnFilter [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id][column.field]; as columnFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ columnFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id][key]; as keyFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ keyFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[column.field] && errorConfig.fieldErrors[item.id][column.field]; as columnFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ columnFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[key] && errorConfig.fieldErrors[item.id][key]; as keyFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ keyFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }, { kind: "component", type: SpeedDialComponent, selector: "lib-speed-dial", inputs: ["speedDialConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarSpeedDialButtons: { classPropertyName: "toolbarSpeedDialButtons", publicName: "toolbarSpeedDialButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", isLoading: "isLoadingChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", toolbarSpeedDialButtons: "toolbarSpeedDialButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", outputCheckAll: "outputCheckAll", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? lazyLoadingConfig!.totalRecords\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @let columnInputConfig = inputConfig![column.field]!;\r\n              @if (columnInputConfig.type === ETypeInput.SWITCH || columnInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, columnInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![column.field]!;\r\n            <p-columnFilter [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @let keyInputConfig = inputConfig![key]!;\r\n              @if (keyInputConfig.type === ETypeInput.SWITCH || keyInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, keyInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![key]!;\r\n            <p-columnFilter [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ columnFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ keyFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[column.field] && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ columnFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[key] && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ keyFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }, { kind: "component", type: SpeedDialComponent, selector: "lib-speed-dial", inputs: ["speedDialConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
             type: Component,
@@ -3630,7 +3664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         BadgeNgComponent,
                         HttpMessageComponent,
                         SpeedDialComponent
-                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? lazyLoadingConfig!.totalRecords\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @let columnInputConfig = inputConfig![column.field]!;\r\n              @if (columnInputConfig.type === ETypeInput.SWITCH || columnInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, columnInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![column.field]!;\r\n            <p-columnFilter [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @let keyInputConfig = inputConfig![key]!;\r\n              @if (keyInputConfig.type === ETypeInput.SWITCH || keyInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, keyInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![key]!;\r\n            <p-columnFilter [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id][column.field]; as columnFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ columnFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id][key]; as keyFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ keyFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[column.field] && errorConfig.fieldErrors[item.id][column.field]; as columnFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ columnFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[key] && errorConfig.fieldErrors[item.id][key]; as keyFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ keyFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? lazyLoadingConfig!.totalRecords\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @let columnInputConfig = inputConfig![column.field]!;\r\n              @if (columnInputConfig.type === ETypeInput.SWITCH || columnInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, columnInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![column.field]!;\r\n            <p-columnFilter [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @let keyInputConfig = inputConfig![key]!;\r\n              @if (keyInputConfig.type === ETypeInput.SWITCH || keyInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, keyInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![key]!;\r\n            <p-columnFilter [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ columnFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ keyFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[column.field] && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ columnFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[key] && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ keyFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -3711,4 +3745,4 @@ de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
  */
 
 export { AminatedContainerComponent as A, BaseDialogComponent as B, DisabledContainerComponent as D, ETypeInput as E, FormComponent as F, HttpMessageComponent as H, InlineInputComponent as I, LibComponentsService as L, SpeedDialComponent as S, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b, SpeedDialService as c, SpeedDialNgComponent as d };
-//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-CpOVbJ0r.mjs.map
+//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-CYlSQ3zg.mjs.map