ln-20-lib-components 0.0.21 → 0.0.22

package/fesm2022/ln-20-lib-components-ln-20-lib-components-BUXK0MSP.mjs

@@ -1,3214 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, Component, model, input, computed, output, forwardRef, ChangeDetectionStrategy, effect, signal, ContentChildren, inject, Pipe, viewChild, ContentChild, ViewChild } from '@angular/core';
-import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, NonNullableFormBuilder, FormGroup } from '@angular/forms';
-import { switchMap, debounceTime, filter, map, distinctUntilChanged, Subject } from 'rxjs';
-import * as i1$1 from '@angular/common';
-import { NgClass, CommonModule } from '@angular/common';
-import { CheckboxModule } from 'primeng/checkbox';
-import * as i2 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
-import { IftaLabelModule } from 'primeng/iftalabel';
-import * as i6 from 'primeng/inputotp';
-import { InputOtpModule } from 'primeng/inputotp';
-import * as i3 from 'primeng/multiselect';
-import { MultiSelectModule } from 'primeng/multiselect';
-import * as i4 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
-import * as i5 from 'primeng/togglebutton';
-import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i7 from 'primeng/toggleswitch';
-import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import * as i10 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import * as i8 from 'primeng/inputnumber';
-import { InputNumberModule } from 'primeng/inputnumber';
-import * as i9 from 'primeng/textarea';
-import { TextareaModule } from 'primeng/textarea';
-import * as i2$1 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import { InputMaskModule } from 'primeng/inputmask';
-import * as i9$1 from 'primeng/knob';
-import { KnobModule } from 'primeng/knob';
-import * as i11 from 'primeng/chip';
-import { ChipModule } from 'primeng/chip';
-import * as i4$1 from 'primeng/api';
-import { PrimeTemplate, FilterService } from 'primeng/api';
-import * as i1$2 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import jsPDF from 'jspdf';
-import autoTable from 'jspdf-autotable';
-import * as i2$2 from 'primeng/table';
-import { TableModule } from 'primeng/table';
-import * as XLSX from 'xlsx';
-import * as i1$3 from 'primeng/badge';
-import { BadgeModule } from 'primeng/badge';
-import * as i1$4 from 'primeng/toolbar';
-import { ToolbarModule } from 'primeng/toolbar';
-import { DialogService, DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
-
-class LibComponentsService {
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class LibComponentsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: LibComponentsComponent, isStandalone: true, selector: "lib-lib-components", ngImport: i0, template: `
-    <p>
-      lib-components works!
-    </p>
-  `, isInline: true, styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LibComponentsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-lib-components', imports: [], template: `
-    <p>
-      lib-components works!
-    </p>
-  ` }]
-        }] });
-
-var ETypeInput;
-(function (ETypeInput) {
-    ETypeInput["TEXT"] = "text";
-    ETypeInput["PASSWORD"] = "password";
-    ETypeInput["EMAIL"] = "email";
-    ETypeInput["EMAIL_PASSWORD"] = "email-password";
-    ETypeInput["NUMBER"] = "number";
-    ETypeInput["DATE"] = "date";
-    ETypeInput["TIME"] = "time";
-    ETypeInput["DATETIME_LOCAL"] = "datetime-local";
-    ETypeInput["SEARCH"] = "search";
-    ETypeInput["TEL"] = "tel";
-    ETypeInput["URL"] = "url";
-    ETypeInput["COLOR"] = "color";
-    ETypeInput["MONTH"] = "month";
-    ETypeInput["WEEK"] = "week";
-    ETypeInput["FILE"] = "file";
-    ETypeInput["CHECKBOX"] = "checkbox";
-    ETypeInput["RADIO"] = "radio";
-    ETypeInput["RANGE"] = "range";
-    ETypeInput["HIDDEN"] = "hidden";
-    ETypeInput["TEXTAREA"] = "textarea";
-    ETypeInput["SELECT"] = "select";
-    ETypeInput["MULTISELECT"] = "multiselect";
-    ETypeInput["AUTOCOMPLETE"] = "autocomplete";
-    ETypeInput["SWITCH"] = "switch";
-    ETypeInput["CALENDAR"] = "calendar";
-    ETypeInput["DROPDOWN"] = "dropdown";
-    ETypeInput["CHIPS"] = "chips";
-    ETypeInput["TOGGLE"] = "toggle";
-    ETypeInput["OTP"] = "otp";
-    ETypeInput["CURRENCY"] = "currency";
-    ETypeInput["KNOB"] = "knob";
-    ETypeInput["BADGE"] = "badge";
-    ETypeInput["DECIMAL"] = "decimal";
-    ETypeInput["IMAGE"] = "image";
-    ETypeInput["COMPONENT"] = "component";
-})(ETypeInput || (ETypeInput = {}));
-
-class DisabledContainerComponent {
-    disabled = model(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DisabledContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: DisabledContainerComponent, isStandalone: true, selector: "lib-disabled-container", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, ngImport: i0, template: "<fieldset [disabled]=\"disabled()\" class=\"disabled-container\">\r\n  <ng-content></ng-content>\r\n</fieldset>\r\n", styles: [".disabled-container{border:none;margin:0;padding:0;min-width:0}.disabled-container:disabled{opacity:.6;cursor:not-allowed}.disabled-container:disabled *{pointer-events:none}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DisabledContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-disabled-container', imports: [], template: "<fieldset [disabled]=\"disabled()\" class=\"disabled-container\">\r\n  <ng-content></ng-content>\r\n</fieldset>\r\n", styles: [".disabled-container{border:none;margin:0;padding:0;min-width:0}.disabled-container:disabled{opacity:.6;cursor:not-allowed}.disabled-container:disabled *{pointer-events:none}\n"] }]
-        }] });
-
-class CustomInputComponent {
-    controlData = input.required();
-    controlUpperName = computed(() => this.controlData().controlName.toLocaleUpperCase());
-    showPassword = false;
-    output = output();
-    onTouched = () => { };
-    onChange = (_value) => { };
-    constructor() { }
-    writeValue(value) {
-        if (value !== this.controlData().control.value) {
-            this.controlData().control.setValue(value, { emitEvent: false });
-        }
-    }
-    get showLabel() {
-        return !this.controlData().hideLabel;
-    }
-    get inputTypesEnum() {
-        return ETypeInput;
-    }
-    onCheckboxChange(event, control) {
-        const input = event.target;
-        const isChecked = input.checked;
-        control.setValue(isChecked);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    // setDisabledState(isDisabled: boolean): void {
-    //   if (isDisabled) {
-    //     this.controlData().control.disable()
-    //   } else {
-    //     this.controlData().control.enable()
-    //   }
-    // }
-    generateUniqueId(baseString) {
-        const timestamp = new Date().getTime();
-        const random = Math.random().toString(36).substring(2, 8);
-        return `${baseString}-${timestamp}-${random}`;
-    }
-    togglePasswordVisibility() {
-        this.showPassword = !this.showPassword;
-    }
-    onSelectChange() {
-        this.output.emit(this.controlData());
-    }
-    /**
-     * Sincroniza el valor del input visible con el input oculto de password
-     * para mantener ambos actualizados
-     */
-    syncPasswordAutofill(event) {
-        const visibleInput = event.target;
-        const currentComponent = visibleInput.closest('lib-custom-input');
-        if (!currentComponent)
-            return;
-        const hiddenInput = currentComponent.querySelector('input[type="password"][id^="password-autofill-hidden-"]');
-        if (hiddenInput && hiddenInput.value !== visibleInput.value) {
-            hiddenInput.value = visibleInput.value;
-        }
-    }
-    /**
-     * Maneja el autocompletado cuando el navegador llena el input oculto de password.
-     * Actualiza el input visible y el FormControl.
-     */
-    onPasswordAutofillHidden(event) {
-        const hiddenInput = event.target;
-        const passwordValue = hiddenInput.value;
-        if (!passwordValue)
-            return;
-        // Buscar el input visible de password en el mismo componente
-        const currentComponent = hiddenInput.closest('lib-custom-input');
-        if (!currentComponent)
-            return;
-        const visibleInput = currentComponent.querySelector('input[type="password"]:not([id^="password-autofill-hidden-"]), input[type="text"][class*="custom-password"]');
-        if (visibleInput && visibleInput.value !== passwordValue) {
-            // Actualizar el input visible
-            visibleInput.value = passwordValue;
-            // Actualizar el FormControl
-            this.controlData().control.setValue(passwordValue, { emitEvent: true });
-            // Disparar eventos para que Angular Forms lo detecte
-            visibleInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-            visibleInput.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-        }
-    }
-    /**
-     * Maneja el autocompletado del password cuando el navegador llena automáticamente
-     * el campo de password oculto en EMAIL_PASSWORD. Busca el siguiente campo de password
-     * en el formulario y actualiza su FormControl directamente.
-     */
-    onPasswordAutofill(event) {
-        const passwordInput = event.target;
-        const passwordValue = passwordInput.value;
-        if (!passwordValue)
-            return;
-        // Buscar el formulario padre
-        let parent = passwordInput.parentElement;
-        let formElement = null;
-        for (let i = 0; i < 6 && parent; i++) {
-            if (parent.tagName === 'FORM') {
-                formElement = parent;
-                break;
-            }
-            parent = parent.parentElement;
-        }
-        if (!formElement)
-            return;
-        // Buscar el componente lib-custom-input actual (EMAIL_PASSWORD)
-        const currentComponent = passwordInput.closest('lib-custom-input');
-        if (!currentComponent)
-            return;
-        // Buscar todos los componentes lib-custom-input en el formulario
-        const allCustomInputs = formElement.querySelectorAll('lib-custom-input');
-        const currentIndex = Array.from(allCustomInputs).indexOf(currentComponent);
-        // Buscar el siguiente componente después del actual que tenga un campo de password
-        for (let i = currentIndex + 1; i < allCustomInputs.length; i++) {
-            const nextComponent = allCustomInputs[i];
-            // Buscar el input de password dentro del componente siguiente
-            const passwordField = nextComponent.querySelector('input[type="password"]:not([id="password-autofill-helper"])');
-            if (passwordField) {
-                // Actualizar el valor directamente en el input
-                // y disparar eventos para que Angular Forms lo detecte
-                passwordField.value = passwordValue;
-                passwordField.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-                passwordField.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-                // Forzar la actualización después de un breve delay
-                // para asegurar que Angular Forms procese el cambio
-                setTimeout(() => {
-                    if (passwordField.value !== passwordValue) {
-                        passwordField.value = passwordValue;
-                        passwordField.dispatchEvent(new Event('input', { bubbles: true }));
-                    }
-                }, 50);
-                break;
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: CustomInputComponent, isStandalone: true, selector: "lib-custom-input", inputs: { controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { output: "output" }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CustomInputComponent),
-                multi: true
-            }], ngImport: i0, template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\"\r\n      [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: CheckboxModule }, { 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: 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: ToggleButtonModule }, { kind: "component", type: i5.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { 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: 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: 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: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: DisabledContainerComponent, selector: "lib-disabled-container", inputs: ["disabled"], outputs: ["disabledChange"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-custom-input', imports: [
-                        ReactiveFormsModule,
-                        IftaLabelModule,
-                        NgClass,
-                        DatePickerModule,
-                        CheckboxModule,
-                        MultiSelectModule,
-                        SelectModule,
-                        ToggleButtonModule,
-                        InputOtpModule,
-                        ToggleSwitchModule,
-                        InputNumberModule,
-                        TextareaModule,
-                        DisabledContainerComponent,
-                        TooltipModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CustomInputComponent),
-                            multi: true
-                        }], template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\"\r\n      [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"] }]
-        }], ctorParameters: () => [] });
-
-class FormChildComponent {
-    controlsData = input.required();
-    formGroup = input.required();
-    formSubmit = output();
-    constructor() {
-    }
-    submit() {
-        this.formSubmit.emit(this.formGroup());
-    }
-    onSelectChange(controlConfig) {
-        controlConfig.selectConfig?.change?.(controlConfig);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormChildComponent, isStandalone: true, selector: "lib-form-child", inputs: { controlsData: { classPropertyName: "controlsData", publicName: "controlsData", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "@let controls = controlsData();\r\n\r\n<form\r\n  [formGroup]=\"formGroup()\"\r\n  (submit)=\"submit()\"\r\n  autocomplete=\"off\"\r\n  class=\"grid grid-cols-12 gap-3\"\r\n>\r\n  @for (controlData of controls; track controlData.controlName) {\r\n    <div\r\n      class=\"flex flex-col w-full\"\r\n      [ngClass]=\"{\r\n        'col-span-1': !controlData.colSpan,\r\n        'col-span-2': controlData.colSpan === 2,\r\n        'col-span-3': controlData.colSpan === 3,\r\n        'col-span-4': controlData.colSpan === 4,\r\n        'col-span-5': controlData.colSpan === 5,\r\n        'col-span-6': controlData.colSpan === 6,\r\n        'col-span-7': controlData.colSpan === 7,\r\n        'col-span-8': controlData.colSpan === 8,\r\n        'col-span-9': controlData.colSpan === 9,\r\n        'col-span-10': controlData.colSpan === 10,\r\n        'col-span-11': controlData.colSpan === 11,\r\n        'col-span-12': controlData.colSpan === 12,\r\n      }\"\r\n    >\r\n      <lib-custom-input\r\n        [id]=\"controlData.controlName\"\r\n        [controlData]=\"controlData\"\r\n        [formControlName]=\"controlData.controlName\"\r\n        class=\"w-full\"\r\n        (output)=\"onSelectChange($event)\"\r\n      >\r\n      </lib-custom-input>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CustomInputComponent, selector: "lib-custom-input", inputs: ["controlData"], outputs: ["output"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormChildComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-form-child', imports: [
-                        ReactiveFormsModule,
-                        CommonModule,
-                        CustomInputComponent
-                    ], template: "@let controls = controlsData();\r\n\r\n<form\r\n  [formGroup]=\"formGroup()\"\r\n  (submit)=\"submit()\"\r\n  autocomplete=\"off\"\r\n  class=\"grid grid-cols-12 gap-3\"\r\n>\r\n  @for (controlData of controls; track controlData.controlName) {\r\n    <div\r\n      class=\"flex flex-col w-full\"\r\n      [ngClass]=\"{\r\n        'col-span-1': !controlData.colSpan,\r\n        'col-span-2': controlData.colSpan === 2,\r\n        'col-span-3': controlData.colSpan === 3,\r\n        'col-span-4': controlData.colSpan === 4,\r\n        'col-span-5': controlData.colSpan === 5,\r\n        'col-span-6': controlData.colSpan === 6,\r\n        'col-span-7': controlData.colSpan === 7,\r\n        'col-span-8': controlData.colSpan === 8,\r\n        'col-span-9': controlData.colSpan === 9,\r\n        'col-span-10': controlData.colSpan === 10,\r\n        'col-span-11': controlData.colSpan === 11,\r\n        'col-span-12': controlData.colSpan === 12,\r\n      }\"\r\n    >\r\n      <lib-custom-input\r\n        [id]=\"controlData.controlName\"\r\n        [controlData]=\"controlData\"\r\n        [formControlName]=\"controlData.controlName\"\r\n        class=\"w-full\"\r\n        (output)=\"onSelectChange($event)\"\r\n      >\r\n      </lib-custom-input>\r\n    </div>\r\n  }\r\n</form>\r\n" }]
-        }], ctorParameters: () => [] });
-
-class HttpMessageComponent {
-    httpMessage = model();
-    clearMessage() {
-        this.httpMessage.set(undefined);
-    }
-    get isError() {
-        const message = this.httpMessage();
-        return message?.type === 'error';
-    }
-    get isSuccess() {
-        const message = this.httpMessage();
-        return message?.type === 'success';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HttpMessageComponent, isStandalone: true, selector: "lib-http-message", inputs: { httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { httpMessage: "httpMessageChange" }, ngImport: i0, template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-http-message', imports: [], template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n" }]
-        }] });
-
-class FormComponent {
-    formGroup = model.required();
-    controls = input.required();
-    formConfig = input();
-    httpMessage = model();
-    formSubmit = output();
-    formChanges = output();
-    formChangesDebounced = output();
-    constructor() {
-        effect(() => {
-            const controls = this.controls();
-            const controlsNames = this.controls().map((controlConfig) => controlConfig.controlName);
-            const controlsToDelete = Object.keys(this.formGroup().controls).filter(control => !controlsNames.includes(control));
-            controls.forEach((controlData) => {
-                this.formGroup.update((formGroup) => {
-                    if (formGroup.contains(controlData.controlName)) {
-                        formGroup.setControl(controlData.controlName, controlData.control);
-                    }
-                    else {
-                        formGroup.addControl(controlData.controlName, controlData.control);
-                    }
-                    controlsToDelete.forEach(controlName => {
-                        formGroup.removeControl(controlName);
-                    });
-                    return formGroup;
-                });
-            });
-        });
-        effect(() => {
-            const controlsDataTypeSelect = this.controls().filter((controlData) => controlData.typeInput === ETypeInput.SELECT);
-            controlsDataTypeSelect.forEach((controlData) => {
-                const control = this.formGroup().get(controlData.controlName);
-                const controlValue = control?.value;
-                if (controlValue) {
-                    const options = controlData.selectConfig?.options ?? [];
-                    const optionSelected = options.find((option) => {
-                        return option.code === controlValue.code;
-                    });
-                    if (optionSelected) {
-                        control?.setValue(optionSelected);
-                    }
-                }
-            });
-        });
-        effect(() => {
-            this.formGroup().valueChanges.subscribe(() => {
-                this.formChanges.emit(this.formGroup());
-            });
-        });
-        const fg$ = toObservable(this.formGroup);
-        fg$.pipe(switchMap((fg) => fg.valueChanges.pipe(debounceTime(650), filter(() => this.anyInteracted(fg)), map(() => fg))), takeUntilDestroyed())
-            .subscribe(() => this.formChangesDebounced.emit(this.formGroup()));
-    }
-    anyInteracted(formGroup) {
-        return Object.values(formGroup.controls).some(control => control.touched || control.dirty);
-    }
-    submit(formGroup) {
-        this.formSubmit.emit(formGroup);
-    }
-    clearHttpMessage() {
-        this.httpMessage.set(undefined);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormComponent, isStandalone: true, selector: "lib-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange", httpMessage: "httpMessageChange", formSubmit: "formSubmit", formChanges: "formChanges", formChangesDebounced: "formChangesDebounced" }, ngImport: i0, 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>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormChildComponent, selector: "lib-form-child", inputs: ["controlsData", "formGroup"], outputs: ["formSubmit"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-form', imports: [
-                        ReactiveFormsModule,
-                        FormChildComponent,
-                        HttpMessageComponent
-                    ], 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() {
-    }
-    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) {
-        this.value.set(value);
-        this.onChange(value);
-    }
-    onBlur() {
-        this.onTouched();
-        this.outputBlur.emit(this.value());
-    }
-    /**
-     * Maneja eventos de teclado para prevenir la navegación de PrimeNG Table
-     * cuando se usan las flechas izquierda/derecha dentro del input
-     */
-    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 !!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;
-        }
-        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: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InlineInputComponent),
-                multi: true
-            }
-        ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n  [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n  @for (template of templates; track $index) {\r\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n  <div\r\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n    [class.border-red-500]=\"showDuplicateMessage\">\r\n    @for (chip of chips; track $index) {\r\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n    }\r\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n  </div>\r\n  @if (showDuplicateMessage) {\r\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n    <span>\r\n      @if (duplicateChips.length === 1) {\r\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n      } @else {\r\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n      }\r\n    </span>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\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: 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,
-            args: [{ selector: 'lib-inline-input', standalone: true, imports: [
-                        FormsModule,
-                        InputTextModule,
-                        DatePickerModule,
-                        SelectModule,
-                        MultiSelectModule,
-                        InputMaskModule,
-                        InputNumberModule,
-                        InputOtpModule,
-                        KnobModule,
-                        TextareaModule,
-                        ChipModule,
-                        CommonModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InlineInputComponent),
-                            multi: true
-                        }
-                    ], template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n  [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n  @for (template of templates; track $index) {\r\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n  <div\r\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n    [class.border-red-500]=\"showDuplicateMessage\">\r\n    @for (chip of chips; track $index) {\r\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n    }\r\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n  </div>\r\n  @if (showDuplicateMessage) {\r\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n    <span>\r\n      @if (duplicateChips.length === 1) {\r\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n      } @else {\r\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n      }\r\n    </span>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\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]
-            }] } });
-
-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 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));
-};
-
-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 BadgeNgComponent {
-    config = model.required();
-    get value() {
-        return this.config().value;
-    }
-    get severity() {
-        return this.config().severity;
-    }
-    get badgeSize() {
-        return this.config().badgeSize ?? 'small';
-    }
-    get fullWidth() {
-        return this.config().fullWidth ?? true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: BadgeNgComponent, isStandalone: true, selector: "lib-badge-ng", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { config: "configChange" }, ngImport: i0, template: "<p-badge\r\n  [style]=\"{\r\n    textAlign: 'center',\r\n    width: fullWidth ? '100%' : 'auto'\r\n  }\"\r\n  [value]=\"value\"\r\n  [severity]=\"severity\"\r\n  [badgeSize]=\"badgeSize\"\r\n/>\r\n", dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1$3.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BadgeNgComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-badge-ng', imports: [BadgeModule], template: "<p-badge\r\n  [style]=\"{\r\n    textAlign: 'center',\r\n    width: fullWidth ? '100%' : 'auto'\r\n  }\"\r\n  [value]=\"value\"\r\n  [severity]=\"severity\"\r\n  [badgeSize]=\"badgeSize\"\r\n/>\r\n" }]
-        }] });
-
-class ToolbarNgComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToolbarNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ToolbarNgComponent, isStandalone: true, selector: "lib-toolbar-ng", ngImport: i0, template: "<p-toolbar class=\"border-0 bg-transparent\">\r\n  <ng-template pTemplate=\"start\">\r\n    <ng-content select=\"[toolbarStart]\"></ng-content>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"center\">\r\n    <ng-content select=\"[toolbarCenter]\"></ng-content>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"end\">\r\n    <ng-content select=\"[toolbarEnd]\"></ng-content>\r\n  </ng-template>\r\n</p-toolbar>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i1$4.Toolbar, selector: "p-toolbar", inputs: ["style", "styleClass", "ariaLabelledBy"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ToolbarNgComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-toolbar-ng', imports: [
-                        ToolbarModule
-                    ], template: "<p-toolbar class=\"border-0 bg-transparent\">\r\n  <ng-template pTemplate=\"start\">\r\n    <ng-content select=\"[toolbarStart]\"></ng-content>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"center\">\r\n    <ng-content select=\"[toolbarCenter]\"></ng-content>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"end\">\r\n    <ng-content select=\"[toolbarEnd]\"></ng-content>\r\n  </ng-template>\r\n</p-toolbar>\r\n" }]
-        }] });
-
-class TableNgEditService {
-    editConfig = signal(undefined);
-    keysNames = signal({});
-    constructor() { }
-    setEditConfig(editConfig) {
-        this.editConfig.set(editConfig);
-    }
-    setKeysNames(keysNames) {
-        this.keysNames.set(keysNames);
-    }
-    fb = inject(NonNullableFormBuilder);
-    controls = computed(() => {
-        const formValues = this.searchFormGroup().value;
-        const controls = [
-            {
-                controlName: 'search',
-                control: this.fb.control(formValues.search, { validators: [] }),
-                typeInput: ETypeInput.TEXT,
-                colSpan: 12,
-                label: '-'
-            }
-        ];
-        return controls;
-    });
-    searchFormGroup = signal(new FormGroup({}));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class TableNgGeneralService {
-    constructor() { }
-    MOCK_EMPTY_DATE = new Date(1900, 0, 1);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-// services/dialog.service.ts
-class CustomDialogService {
-    dialogRef;
-    dialogService = inject(DialogService);
-    constructor() { }
-    open(component, options = {}) {
-        const defaultConfig = {
-            closable: true,
-            header: options.header || '',
-            width: options.width || '50%',
-            height: options.height || 'auto',
-            closeOnEscape: options.closeOnEscape ?? true,
-            baseZIndex: options.baseZIndex || 10000,
-            maximizable: options.maximizable ?? true,
-            data: options.data || {},
-            style: {
-                borderRadius: '8px',
-                ...options.style
-            },
-            modal: true
-        };
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        this.dialogRef = this.dialogService.open(component, defaultConfig);
-        return this.dialogRef;
-    }
-    close(result) {
-        if (this.dialogRef) {
-            this.dialogRef.close(result);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class TableNgService {
-    tableNgGeneralService = inject(TableNgGeneralService);
-    filterService = inject(FilterService);
-    dialogService = inject(CustomDialogService);
-    initialValue;
-    constructor() {
-        this.filterService.register('globalCustomFilter', (rowData, filter) => {
-            if (!filter || filter.trim() === '')
-                return true;
-            const searchTerm = filter.toLowerCase();
-            // Si es string
-            if (typeof rowData === 'string') {
-                return rowData.toLowerCase().includes(searchTerm);
-            }
-            // Si es array de botones
-            if (Array.isArray(rowData)) {
-                return rowData.some((button) => {
-                    const label = button.label || '';
-                    return label.toLowerCase().includes(searchTerm);
-                });
-            }
-            return false;
-        });
-        /**
-         * Filtro para arrays de strings que verifica si el valor contiene alguno de los strings del filtro.
-         * Uso: dt.filter(['valor1', 'valor2'], 'nombreColumna', 'arrayStringFilter')
-         * @param rowData - Puede ser un string o array de strings
-         * @param filter - Array de strings para filtrar
-         * @returns true si encuentra coincidencias parciales (case-insensitive)
-         */
-        this.filterService.register('arrayStringFilter', (rowData, filter) => {
-            // Si no hay filtro o el filtro está vacío, mostrar todos los elementos
-            if (!filter || !Array.isArray(filter) || filter.length === 0)
-                return true;
-            // Si rowData es null, undefined o vacío, no mostrar el elemento
-            if (rowData == null || rowData === '')
-                return false;
-            // Si rowData es un string
-            if (typeof rowData === 'string') {
-                return filter.some(filterValue => rowData.toLowerCase().includes(filterValue.toLowerCase()));
-            }
-            // Si rowData es un array de strings
-            if (Array.isArray(rowData)) {
-                return rowData.some(dataValue => filter.some(filterValue => typeof dataValue === 'string' &&
-                    dataValue.toLowerCase().includes(filterValue.toLowerCase())));
-            }
-            // Para otros tipos de datos, convertir a string si es posible
-            const stringValue = String(rowData);
-            if (stringValue && stringValue !== 'undefined' && stringValue !== 'null') {
-                return filter.some(filterValue => stringValue.toLowerCase().includes(filterValue.toLowerCase()));
-            }
-            return false;
-        });
-        /**
-         * Filtro exacto para arrays de strings que verifica coincidencias exactas.
-         * Uso: dt.filter(['valor1', 'valor2'], 'nombreColumna', 'arrayStringExactFilter')
-         * @param rowData - Puede ser un string o array de strings
-         * @param filter - Array de strings para filtrar
-         * @returns true si encuentra coincidencias exactas (case-sensitive)
-         */
-        this.filterService.register('arrayStringExactFilter', (rowData, filter) => {
-            if (!filter || !Array.isArray(filter) || filter.length === 0)
-                return true;
-            // Si rowData es null, undefined o vacío, no mostrar el elemento
-            if (rowData == null || rowData === '')
-                return false;
-            // Si rowData es un string
-            if (typeof rowData === 'string') {
-                return filter.includes(rowData);
-            }
-            // Si rowData es un array de strings
-            if (Array.isArray(rowData)) {
-                return rowData.some(dataValue => filter.includes(dataValue));
-            }
-            // Para otros tipos de datos, convertir a string si es posible
-            const stringValue = String(rowData);
-            if (stringValue && stringValue !== 'undefined' && stringValue !== 'null') {
-                return filter.includes(stringValue);
-            }
-            return false;
-        });
-        this.filterService.register('customIn', (rowData, filter) => {
-            if (!filter || !Array.isArray(filter) || filter.length === 0)
-                return true;
-            // Si rowData es null, undefined o vacío, no mostrar el elemento
-            if (rowData == null || rowData === '')
-                return false;
-            if (typeof rowData === 'string') {
-                return filter.includes(rowData);
-            }
-            // Para otros tipos de datos, convertir a string si es posible
-            const stringValue = String(rowData);
-            if (stringValue && stringValue !== 'undefined' && stringValue !== 'null') {
-                return filter.includes(stringValue);
-            }
-            return false;
-        });
-    }
-    get MOCK_EMPTY_DATE() {
-        return this.tableNgGeneralService.MOCK_EMPTY_DATE;
-    }
-    setInitialValue(data) {
-        this.initialValue = data;
-    }
-    //#region SORT
-    customSort(event) {
-        let field = undefined;
-        let order = undefined;
-        switch (event.mode) {
-            case 'single':
-                field = event.field;
-                order = event.order;
-                break;
-            case 'multiple': {
-                const multiSortMeta = event.multiSortMeta ?? [];
-                const sortMeta = multiSortMeta[0];
-                field = sortMeta?.field ?? undefined;
-                order = sortMeta?.order ?? undefined;
-                break;
-            }
-            default:
-                break;
-        }
-        if (!field || order === undefined)
-            return;
-        const data = event.data ?? [];
-        if (order === 0) {
-            // Sin sorting - restaurar orden original
-            data.splice(0, data.length, ...this.initialValue);
-        }
-        else {
-            // Aplicar sorting
-            data.sort((a, b) => {
-                const valueA = this.getFieldValue(a, field);
-                const valueB = this.getFieldValue(b, field);
-                const result = this.compareValues(valueA, valueB);
-                return order * result; // 1 para ASC, -1 para DESC
-            });
-        }
-    }
-    getFieldValue(item, field) {
-        const rawValue = item.rowData[field];
-        // Si es un array (probablemente IButtonConfig[])
-        if (Array.isArray(rawValue) && rawValue.length > 0) {
-            // Verificar si tenemos configuración de sorting para este campo
-            const buttonKeyToSort = item.sortConfig?.buttonKeyToSort?.[field];
-            if (buttonKeyToSort) {
-                // Usar la primera configuración de botón del array
-                const firstButton = rawValue[0];
-                return firstButton[buttonKeyToSort];
-            }
-            // Si no hay configuración, intentar usar 'label' por defecto
-            const firstButton = rawValue[0];
-            return firstButton.label || '';
-        }
-        // Si es un string o cualquier otro tipo
-        return rawValue;
-    }
-    compareValues(a, b) {
-        // Manejar valores null/undefined
-        if (a == null && b == null)
-            return 0;
-        if (a == null)
-            return -1;
-        if (b == null)
-            return 1;
-        // Si ambos son strings, usar localeCompare para mejor sorting
-        if (typeof a === 'string' && typeof b === 'string') {
-            return a.toLowerCase().localeCompare(b.toLowerCase());
-        }
-        // Si ambos son números
-        if (typeof a === 'number' && typeof b === 'number') {
-            return a - b;
-        }
-        // Si ambos son booleanos
-        if (typeof a === 'boolean' && typeof b === 'boolean') {
-            return a === b ? 0 : a ? 1 : -1;
-        }
-        // Si son fechas
-        if (a instanceof Date && b instanceof Date) {
-            return a.getTime() - b.getTime();
-        }
-        // Para otros tipos, convertir a string y comparar
-        const strA = String(a).toLowerCase();
-        const strB = String(b).toLowerCase();
-        return strA.localeCompare(strB);
-    }
-    //#endregion
-    //#region Global Filter
-    fb = inject(NonNullableFormBuilder);
-    controls = computed(() => {
-        const formValues = this.searchFormGroup().value;
-        const controls = [
-            {
-                controlName: 'search',
-                control: this.fb.control(formValues.search, { validators: [] }),
-                typeInput: ETypeInput.TEXT,
-                colSpan: 12,
-                label: 'Buscar'
-            }
-        ];
-        return controls;
-    });
-    searchFormGroup = signal(new FormGroup({}));
-    values = toSignal(this.searchFormGroup().valueChanges);
-    submitGlobalSearch(formGroup, dt) {
-        const search = formGroup.value.search ?? '';
-        dt.filterGlobal(search, 'globalCustomFilter');
-    }
-    clearSearchInput() {
-        this.searchFormGroup().get('search')?.setValue('');
-    }
-    //#endregion
-    //#region Selection
-    async openModalManagementSelectedItems(selectedItems, config) {
-        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-tLy_XEg2.mjs');
-        let configSelectedItems = config;
-        if (config) {
-            configSelectedItems = structuredClone(config);
-            const selectionTableConfig = {
-                ...(configSelectedItems.selectionTableConfig ?? {}),
-                showManagementConfig: false
-            };
-            delete configSelectedItems.lazyLoadingConfig;
-            configSelectedItems.selectionTableConfig = selectionTableConfig;
-        }
-        const ref = this.dialogService?.open(SelectedItemsManagementComponent, {
-            header: 'Gestionar Seleccionados',
-            data: {
-                selectedItems: selectedItems(),
-                config: configSelectedItems
-            },
-            width: '90%',
-            height: '90%',
-            styleClass: 'overflow-hidden'
-        });
-        ref.onClose.subscribe((selectedReturnItems) => {
-            if (selectedReturnItems) {
-                selectedItems.set(selectedReturnItems);
-            }
-        });
-    }
-    //#endregion
-    //#region Custom Filter
-    //#endregion
-    excelButton = computed(() => {
-        return {
-            label: '',
-            icon: 'fa-solid fa-file-excel',
-            variant: 'text',
-            severity: 'success',
-            raised: true,
-            size: 'large',
-            tooltipConfig: {
-                pTooltip: 'Exportar a Excel',
-                tooltipPosition: 'top'
-            }
-        };
-    });
-    pdfButton = computed(() => {
-        return {
-            label: '',
-            icon: 'fa-solid fa-file-pdf',
-            variant: 'text',
-            severity: 'danger',
-            raised: true,
-            size: 'large',
-            tooltipConfig: {
-                pTooltip: 'Exportar a PDF',
-                tooltipPosition: 'top'
-            }
-        };
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class BaseDialogComponent {
-    destroy$ = new Subject();
-    data;
-    ref = inject(DynamicDialogRef);
-    config = inject(DynamicDialogConfig);
-    constructor() {
-        this.data = this.config.data;
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    close(result) {
-        this.ref.close(result);
-    }
-    dismiss() {
-        this.ref.close({ success: false });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: BaseDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    template: ''
-                }]
-        }], ctorParameters: () => [] });
-
-const pickListConstant = (e, element) => {
-    if (e.id === element?.id) {
-        e.isSelected = !e.isSelected;
-        if (e.isSelected) {
-            delete e.buttonConfig.variant;
-            delete e.buttonConfig.raised;
-        }
-        else {
-            e.buttonConfig.variant = 'outlined';
-            e.buttonConfig.raised = true;
-        }
-    }
-};
-
-class ContainerElementsComponent {
-    cols = input(3);
-    elements = model([]);
-    severityButton = input('contrast');
-    outputElements = output();
-    constructor() {
-    }
-    ngOnInit() {
-        this.elements.update((elements) => {
-            elements.forEach((e) => {
-                // Si e.isSelected es true, se elimina el variant y raised
-                if (e.isSelected) {
-                    delete e.buttonConfig.variant;
-                    delete e.buttonConfig.raised;
-                }
-                else {
-                    e.buttonConfig.variant = 'outlined';
-                    e.buttonConfig.raised = true;
-                }
-                e.buttonConfig = {
-                    ...e.buttonConfig,
-                    fullWidth: true,
-                    fullHeight: true,
-                    hasStaticClick: true,
-                    severity: this.severityButton()
-                };
-            });
-            return [...elements];
-        });
-    }
-    containerClass = computed(() => 'w-[45%] flex flex-col shadow-md bg-white dark:bg-gray-800 rounded-xl h-full overflow-y-auto');
-    titleClass = computed(() => 'text-lg font-bold self-center text-center');
-    containerElementsClass = computed(() => `grid grid-cols-${this.cols() ?? 3} gap-2 p-2`);
-    getButtonConfig(buttonConfig) {
-        return { ...buttonConfig, fullWidth: true, severity: this.severityButton(), hasStaticClick: true };
-    }
-    onButtonClick(element) {
-        this.elements.update((elements) => {
-            elements.forEach((e) => {
-                pickListConstant(e, element);
-            });
-            return [...elements];
-        });
-        this.outputElements.emit([...this.elements()]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContainerElementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ContainerElementsComponent, isStandalone: true, selector: "lib-container-elements", inputs: { cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, severityButton: { classPropertyName: "severityButton", publicName: "severityButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { elements: "elementsChange", outputElements: "outputElements" }, ngImport: i0, template: "<div class=\"h-full w-full\" [class]=\"containerClass()\">\r\n    <div class=\"dynamic-grid\" [style.--grid-cols]=\"cols()\">\r\n      @for (element of elements(); track element.id) {\r\n        <div class=\"grid-item\">\r\n          @if (element.buttonConfig) {\r\n            <lib-button-ng [(buttonConfig)]=\"element.buttonConfig\" (onClick)=\"onButtonClick(element)\"></lib-button-ng>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n</div>", styles: [".dynamic-grid{display:grid;gap:.5rem;padding:.5rem;grid-template-columns:repeat(var(--grid-cols, 3),1fr)}.grid-item{border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}\n"], dependencies: [{ kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContainerElementsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-container-elements', imports: [ButtonNgComponent, CommonModule], template: "<div class=\"h-full w-full\" [class]=\"containerClass()\">\r\n    <div class=\"dynamic-grid\" [style.--grid-cols]=\"cols()\">\r\n      @for (element of elements(); track element.id) {\r\n        <div class=\"grid-item\">\r\n          @if (element.buttonConfig) {\r\n            <lib-button-ng [(buttonConfig)]=\"element.buttonConfig\" (onClick)=\"onButtonClick(element)\"></lib-button-ng>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n</div>", styles: [".dynamic-grid{display:grid;gap:.5rem;padding:.5rem;grid-template-columns:repeat(var(--grid-cols, 3),1fr)}.grid-item{border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}\n"] }]
-        }], ctorParameters: () => [] });
-
-class PickListComponent {
-    constructor() {
-    }
-    ngOnInit() { }
-    sourceElements = model([]);
-    hasAnySourceElementSelected = computed(() => this.sourceElements().some(element => element.isSelected));
-    targetElements = model([]);
-    hasAnyTargetElementSelected = computed(() => this.targetElements().some(element => element.isSelected));
-    config = input();
-    outputElements = output();
-    sourceSeverityButton = computed(() => this.config()?.sourceSeverityButton ?? 'secondary');
-    targetSeverityButton = computed(() => this.config()?.targetSeverityButton ?? 'contrast');
-    controlButtons = computed(() => [
-        {
-            label: '',
-            icon: 'pi pi-angle-double-right',
-            severity: this.sourceSeverityButton(),
-            disabled: this.sourceElements().length === 0,
-            tooltipConfig: {
-                pTooltip: this.sourceElements().length === 0 ? 'No hay elementos' : 'Mover todos hacia la derecha',
-                tooltipPosition: 'top'
-            },
-            onClick: () => {
-                this.moveAllSourceToTarget();
-            }
-        },
-        {
-            label: '',
-            icon: 'pi pi-angle-right',
-            severity: this.sourceSeverityButton(),
-            disabled: !this.hasAnySourceElementSelected(),
-            tooltipConfig: {
-                pTooltip: !this.hasAnySourceElementSelected() ? 'No hay elementos seleccionados' : 'Mover los elementos seleccionados hacia la derecha',
-                tooltipPosition: 'top'
-            },
-            onClick: () => {
-                this.moveSelectedSourceToTarget();
-            }
-        },
-        {
-            label: '',
-            icon: 'pi pi-angle-double-left',
-            severity: this.targetSeverityButton(),
-            disabled: this.targetElements().length === 0,
-            tooltipConfig: {
-                pTooltip: this.targetElements().length === 0 ? 'No hay elementos' : 'Mover todos hacia la izquierda',
-                tooltipPosition: 'top'
-            },
-            onClick: () => {
-                this.moveAllTargetToSource();
-            }
-        },
-        {
-            label: '',
-            icon: 'pi pi-angle-left',
-            severity: this.targetSeverityButton(),
-            disabled: !this.hasAnyTargetElementSelected(),
-            tooltipConfig: {
-                pTooltip: !this.hasAnyTargetElementSelected() ? 'No hay elementos seleccionados' : 'Mover los elementos seleccionados hacia la izquierda',
-                tooltipPosition: 'top'
-            },
-            onClick: () => {
-                this.moveSelectedTargetToSource();
-            }
-        }
-    ]);
-    /**
-     * Mueve todos los elementos del sourceElements al targetElements,
-     * convirtiendo su severidad para que coincida con targetSeverityButton
-     */
-    moveAllSourceToTarget() {
-        const sourceElementsCopy = [...this.sourceElements()];
-        if (sourceElementsCopy.length === 0) {
-            return;
-        }
-        // Convertir los elementos para usar targetSeverityButton
-        const convertedElements = sourceElementsCopy.map(element => {
-            const convertedElement = {
-                ...element,
-                isSelected: false, // Limpiar selección
-                buttonConfig: {
-                    ...element.buttonConfig,
-                    severity: this.targetSeverityButton(),
-                    variant: 'outlined',
-                    raised: true
-                }
-            };
-            return convertedElement;
-        });
-        // Agregar elementos convertidos al target
-        this.targetElements.update(currentTarget => [
-            ...currentTarget,
-            ...convertedElements
-        ]);
-        // Limpiar sourceElements
-        this.sourceElements.set([]);
-        this.handleOutputElements();
-    }
-    /**
-     * Mueve todos los elementos del targetElements al sourceElements,
-     * convirtiendo su severidad para que coincida con sourceSeverityButton
-     */
-    moveAllTargetToSource() {
-        const targetElementsCopy = [...this.targetElements()];
-        if (targetElementsCopy.length === 0) {
-            return;
-        }
-        // Convertir los elementos para usar sourceSeverityButton
-        const convertedElements = targetElementsCopy.map(element => {
-            const convertedElement = {
-                ...element,
-                isSelected: false, // Limpiar selección
-                buttonConfig: {
-                    ...element.buttonConfig,
-                    severity: this.sourceSeverityButton(),
-                    variant: 'outlined',
-                    raised: true
-                }
-            };
-            return convertedElement;
-        });
-        // Agregar elementos convertidos al source
-        this.sourceElements.update(currentSource => [
-            ...currentSource,
-            ...convertedElements
-        ]);
-        // Limpiar targetElements
-        this.targetElements.set([]);
-        this.handleOutputElements();
-    }
-    /**
-     * Mueve los elementos seleccionados del sourceElements al targetElements,
-     * ubicándolos en la primera posición y convirtiendo su severidad
-     */
-    moveSelectedSourceToTarget() {
-        const selectedElements = this.sourceElements().filter(element => element.isSelected);
-        const remainingElements = this.sourceElements().filter(element => !element.isSelected);
-        if (selectedElements.length === 0) {
-            return;
-        }
-        // Convertir los elementos seleccionados para usar targetSeverityButton
-        const convertedElements = selectedElements.map(element => {
-            const convertedElement = {
-                ...element,
-                isSelected: false, // Limpiar selección
-                buttonConfig: {
-                    ...element.buttonConfig,
-                    severity: this.targetSeverityButton(),
-                    variant: 'outlined',
-                    raised: true
-                }
-            };
-            return convertedElement;
-        });
-        // Agregar elementos convertidos al inicio de targetElements
-        this.targetElements.update(currentTarget => [
-            ...convertedElements,
-            ...currentTarget
-        ]);
-        // Actualizar sourceElements sin los elementos seleccionados
-        this.sourceElements.set(remainingElements);
-        this.handleOutputElements();
-    }
-    /**
-     * Mueve los elementos seleccionados del targetElements al sourceElements,
-     * ubicándolos en la primera posición y convirtiendo su severidad
-     */
-    moveSelectedTargetToSource() {
-        const selectedElements = this.targetElements().filter(element => element.isSelected);
-        const remainingElements = this.targetElements().filter(element => !element.isSelected);
-        if (selectedElements.length === 0) {
-            return;
-        }
-        // Convertir los elementos seleccionados para usar sourceSeverityButton
-        const convertedElements = selectedElements.map(element => {
-            const convertedElement = {
-                ...element,
-                isSelected: false, // Limpiar selección
-                buttonConfig: {
-                    ...element.buttonConfig,
-                    severity: this.sourceSeverityButton(),
-                    variant: 'outlined',
-                    raised: true
-                }
-            };
-            return convertedElement;
-        });
-        // Agregar elementos convertidos al inicio de sourceElements
-        this.sourceElements.update(currentSource => [
-            ...convertedElements,
-            ...currentSource
-        ]);
-        // Actualizar targetElements sin los elementos seleccionados
-        this.targetElements.set(remainingElements);
-        this.handleOutputElements();
-    }
-    handleOutputElements() {
-        this.outputElements.emit({ sourceElements: this.sourceElements(), targetElements: this.targetElements() });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PickListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: PickListComponent, isStandalone: true, selector: "lib-pick-list", inputs: { sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", outputElements: "outputElements" }, ngImport: i0, template: "@let cols = config()?.cols ?? 3;\r\n@let sourceSeverityButton = config()?.sourceSeverityButton ?? 'secondary';\r\n@let targetSeverityButton = config()?.targetSeverityButton ?? 'contrast';\r\n<div class=\"flex gap-4 h-80 w-full bg-gray-100 dark:bg-gray-800 rounded-xl p-3\">\r\n  <lib-container-elements id=\"source-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"sourceElements\"\r\n    #sourceContainer [severityButton]=\"sourceSeverityButton\"\r\n    (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n  <div class=\"w-[10%] flex flex-col items-center justify-center gap-6 rounded-xl bg-gray-200 dark:bg-gray-800\">\r\n    @for (button of controlButtons(); track $index) {\r\n    <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n    }\r\n  </div>\r\n\r\n  <lib-container-elements id=\"target-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"targetElements\"\r\n    #targetContainer [severityButton]=\"targetSeverityButton\"\r\n    (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ContainerElementsComponent, selector: "lib-container-elements", inputs: ["cols", "elements", "severityButton"], outputs: ["elementsChange", "outputElements"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PickListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-pick-list', imports: [ButtonNgComponent, ContainerElementsComponent], template: "@let cols = config()?.cols ?? 3;\r\n@let sourceSeverityButton = config()?.sourceSeverityButton ?? 'secondary';\r\n@let targetSeverityButton = config()?.targetSeverityButton ?? 'contrast';\r\n<div class=\"flex gap-4 h-80 w-full bg-gray-100 dark:bg-gray-800 rounded-xl p-3\">\r\n  <lib-container-elements id=\"source-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"sourceElements\"\r\n    #sourceContainer [severityButton]=\"sourceSeverityButton\"\r\n    (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n  <div class=\"w-[10%] flex flex-col items-center justify-center gap-6 rounded-xl bg-gray-200 dark:bg-gray-800\">\r\n    @for (button of controlButtons(); track $index) {\r\n    <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n    }\r\n  </div>\r\n\r\n  <lib-container-elements id=\"target-container\" [cols]=\"cols\" class=\"w-full h-full\" [(elements)]=\"targetElements\"\r\n    #targetContainer [severityButton]=\"targetSeverityButton\"\r\n    (outputElements)=\"handleOutputElements()\"></lib-container-elements>\r\n\r\n</div>" }]
-        }], ctorParameters: () => [] });
-
-class AdvancedFilterService {
-    constructor() {
-        // Effect para actualizar isSelected basado en los chips
-        effect(() => {
-            const chips = [...this.searchChips()];
-            this.updateElementSelection(chips);
-        });
-    }
-    configInlineInput = computed(() => ({
-        typeInput: ETypeInput.CHIPS
-    }));
-    _searchChips = signal([]);
-    searchChips = this._searchChips.asReadonly();
-    setSearchChips(searchChips) {
-        this._searchChips.set(searchChips);
-    }
-    setStringToArrayChips(searchValue) {
-        this._searchChips.set(searchValue.split(' ').filter(chip => chip.trim() !== ''));
-    }
-    _sourceElements = signal([]);
-    sourceElements = this._sourceElements.asReadonly();
-    setSourceElements(sourceElements) {
-        this._sourceElements.set(sourceElements);
-    }
-    configPickList = computed(() => ({
-        cols: 3,
-        sourceSeverityButton: 'contrast',
-        targetSeverityButton: 'success'
-    }));
-    /**
-     * Actualiza la selección de elementos basándose en los chips del input
-     * @param chips Array de strings que representan los chips actuales
-     */
-    updateElementSelection(chips) {
-        this._sourceElements.update(currentElements => {
-            return currentElements.map((element) => {
-                // Verificar si el label del elemento está en el array de chips
-                const shouldBeSelected = chips.includes(element.buttonConfig?.label || '');
-                if (shouldBeSelected) {
-                    delete element.buttonConfig.variant;
-                    delete element.buttonConfig.raised;
-                }
-                else {
-                    element.buttonConfig.variant = 'outlined';
-                    element.buttonConfig.raised = true;
-                }
-                return {
-                    ...element,
-                    isSelected: shouldBeSelected
-                };
-            });
-        });
-    }
-    outputElements(event) {
-        const { sourceElements } = event;
-        this.setSourceElements(sourceElements);
-        this.validateAndSyncChipsWithElements(sourceElements);
-    }
-    /**
-     * Valida y sincroniza los chips con los elementos de sourceElements
-     * @param sourceElements Array de elementos fuente
-     */
-    validateAndSyncChipsWithElements(sourceElements) {
-        const currentChips = this._searchChips();
-        if (sourceElements.length === 0) {
-            this.setSearchChips([]);
-            return;
-        }
-        const validChips = [];
-        // Iterar sobre cada chip actual
-        currentChips.forEach(chip => {
-            // Buscar el elemento correspondiente en sourceElements
-            const element = sourceElements.find(el => el.buttonConfig?.label === chip);
-            if (element) {
-                // Si la chip existe en sourceElements
-                if (element.isSelected === false) {
-                    // Si la chip está en isSelected false, NO la incluimos en validChips (la eliminamos)
-                    return;
-                }
-                else {
-                    // Si la chip está seleccionada, la mantenemos
-                    validChips.push(chip);
-                }
-            }
-            else {
-                // Si la chip no está en sourceElements, NO la incluimos en validChips (la eliminamos)
-                return;
-            }
-        });
-        // Verificar si hay elementos seleccionados que no tienen chip correspondiente
-        sourceElements.forEach(element => {
-            if (element.isSelected && element.buttonConfig?.label) {
-                const chipExists = currentChips.includes(element.buttonConfig.label);
-                if (!chipExists) {
-                    // Si el elemento está seleccionado pero no tiene chip, agregamos la chip
-                    validChips.push(element.buttonConfig.label);
-                }
-            }
-        });
-        // Actualizar los chips solo si hay cambios
-        if (JSON.stringify(validChips.sort()) !== JSON.stringify(currentChips.sort())) {
-            this._searchChips.set(validChips);
-        }
-    }
-    /**
-     * Método público para establecer chips desde un array externo
-     * Útil para gestionar las chips programáticamente
-     * @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 las chips
-        this._searchChips.set(validChips);
-    }
-    /**
-     * Método público para limpiar todas las chips
-     */
-    clearAllChips() {
-        this._searchChips.set([]);
-    }
-    /**
-     * Método público para agregar chips desde un array
-     * Evita duplicados
-     * @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;
-        }
-        const currentChips = this._searchChips();
-        // Filtrar elementos válidos y únicos
-        const validChips = chipsArray
-            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
-            .map(chip => chip.trim())
-            .filter(chip => !currentChips.includes(chip));
-        // Agregar las nuevas chips
-        if (validChips.length > 0) {
-            this._searchChips.set([...currentChips, ...validChips]);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class AdvancedFilterComponent {
-    advancedFilterService = inject(AdvancedFilterService);
-    sourceElements = model([]);
-    targetElements = model([]);
-    // Referencia al componente de inline input para gestionar las chips
-    inlineInputComponent = viewChild('inlineInputRef');
-    constructor() {
-        // Sincronizar el service con el model del componente
-        effect(() => {
-            this.sourceElements.set(this.advancedFilterService.sourceElements());
-        });
-        // Efecto para sincronizar chips con el inline input
-        effect(() => {
-            const chips = this.advancedFilterService.searchChips();
-            const inlineInput = this.inlineInputComponent();
-            if (inlineInput && Array.isArray(chips)) {
-                // Usar el nuevo método para establecer las chips
-                inlineInput.setChipsFromArray(chips);
-            }
-        });
-    }
-    ngOnInit() {
-        this.initializeChipsWhitSourceElementsSelected();
-        this.advancedFilterService.setSourceElements(this.sourceElements());
-    }
-    initializeChipsWhitSourceElementsSelected() {
-        this.advancedFilterService.setSearchChips(this.sourceElements()
-            .filter((element) => element.isSelected)
-            .map((element) => element.buttonConfig?.label?.toString() ?? ''));
-    }
-    get configInlineInput() {
-        return this.advancedFilterService.configInlineInput();
-    }
-    valueChangeInlineInput(value) {
-        this.advancedFilterService.setStringToArrayChips(value);
-    }
-    get configPickList() {
-        return this.advancedFilterService.configPickList();
-    }
-    outputElements(event) {
-        this.advancedFilterService.outputElements(event);
-    }
-    /**
-     * Método público para establecer chips desde un array externo
-     * @param chipsArray Array de strings que representan las chips
-     */
-    setChipsFromArray(chipsArray) {
-        this.advancedFilterService.setChipsFromArray(chipsArray);
-    }
-    /**
-     * Método público para limpiar todas las chips
-     */
-    clearAllChips() {
-        this.advancedFilterService.clearAllChips();
-    }
-    /**
-     * Método público para agregar chips desde un array
-     * @param chipsArray Array de strings a agregar
-     */
-    addChipsFromArray(chipsArray) {
-        this.advancedFilterService.addChipsFromArray(chipsArray);
-    }
-    /**
-     * Método público para obtener las chips actuales como array
-     * @returns Array de strings con las chips actuales
-     */
-    getChipsAsArray() {
-        return this.advancedFilterService.searchChips();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: AdvancedFilterComponent, isStandalone: true, selector: "lib-advanced-filter", inputs: { sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourceElements: "sourceElementsChange", targetElements: "targetElementsChange" }, providers: [AdvancedFilterService], viewQueries: [{ propertyName: "inlineInputComponent", first: true, predicate: ["inlineInputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\r\n  <lib-inline-input #inlineInputRef [config]=\"configInlineInput\" (valueChange)=\"valueChangeInlineInput($event)\">\r\n  </lib-inline-input>\r\n  <lib-pick-list [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"\r\n    (outputElements)=\"outputElements($event)\" [config]=\"configPickList\"></lib-pick-list>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: PickListComponent, selector: "lib-pick-list", inputs: ["sourceElements", "targetElements", "config"], outputs: ["sourceElementsChange", "targetElementsChange", "outputElements"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AdvancedFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-advanced-filter', imports: [InlineInputComponent, PickListComponent], providers: [AdvancedFilterService], template: "<div class=\"flex flex-col gap-4\">\r\n  <lib-inline-input #inlineInputRef [config]=\"configInlineInput\" (valueChange)=\"valueChangeInlineInput($event)\">\r\n  </lib-inline-input>\r\n  <lib-pick-list [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"\r\n    (outputElements)=\"outputElements($event)\" [config]=\"configPickList\"></lib-pick-list>\r\n</div>" }]
-        }], ctorParameters: () => [] });
-
-class ModalAdvancedFilterComponent extends BaseDialogComponent {
-    constructor() {
-        super();
-    }
-    sourceElements = signal([]);
-    targetElements = signal([]);
-    ngOnInit() {
-        if (this.data) {
-            this.sourceElements.set(this.data.sourceElements ?? []);
-            this.targetElements.set(this.data.targetElements ?? []);
-        }
-    }
-    applyFiltersButton = computed(() => {
-        return {
-            label: 'Aplicar Filtros',
-            severity: 'info',
-            onClick: () => {
-                this.close({ success: true, data: { sourceElements: this.sourceElements(), targetElements: this.targetElements() } });
-            },
-            disabled: this.targetElements().length === 0
-        };
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalAdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ModalAdvancedFilterComponent, isStandalone: true, selector: "lib-modal-advanced-filter", usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\r\n  <lib-advanced-filter [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"></lib-advanced-filter>\r\n  <div class=\"flex justify-end\">\r\n    <lib-button-ng [buttonConfig]=\"applyFiltersButton()\"></lib-button-ng>\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: AdvancedFilterComponent, selector: "lib-advanced-filter", inputs: ["sourceElements", "targetElements"], outputs: ["sourceElementsChange", "targetElementsChange"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ModalAdvancedFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-modal-advanced-filter', imports: [AdvancedFilterComponent, ButtonNgComponent], template: "<div class=\"flex flex-col gap-4\">\r\n  <lib-advanced-filter [(sourceElements)]=\"sourceElements\" [(targetElements)]=\"targetElements\"></lib-advanced-filter>\r\n  <div class=\"flex justify-end\">\r\n    <lib-button-ng [buttonConfig]=\"applyFiltersButton()\"></lib-button-ng>\r\n  </div>\r\n</div>" }]
-        }], ctorParameters: () => [] });
-
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-class TableNgComponent {
-    tableNgService = inject(TableNgService);
-    tableNgEditService = inject(TableNgEditService);
-    dialogService = inject(CustomDialogService);
-    data = model.required();
-    // Loading state management
-    loadingTimeout = null;
-    isLoading = signal(false);
-    timeoutExpired = signal(false);
-    config = model();
-    editConfig = model();
-    footerConfig = model();
-    toolbarButtons = model([]);
-    sourceElements = model([]);
-    targetElements = model([]);
-    httpMessage = model();
-    lazyLoading = output();
-    outputChangeData = output();
-    outputHandleEditInitButton = output();
-    outputAddRow = output();
-    outputDeleteRow = output();
-    outputRowInlineChange = output();
-    outputRowDataChange = output();
-    outputEditData = output();
-    outputIsEditing = output();
-    resetData() {
-        this.data.set([]);
-    }
-    advancedFiltersPerformed = [];
-    advancedFiltersValues = signal({});
-    dt;
-    fb = inject(NonNullableFormBuilder);
-    //#region Labels Configuration
-    /** Get pagination report template with default English value */
-    getCustomPageReport() {
-        return this.config()?.labelsConfig?.customPageReport ?? 'Showing {first} to {last} of {totalRecords} entries';
-    }
-    /** Get selected items label with default English value */
-    getSelectedItemsLabel() {
-        return this.config()?.labelsConfig?.selectedItemsLabel ?? 'You have selected';
-    }
-    /** Get records label with default English value */
-    getRecordsLabel() {
-        return this.config()?.labelsConfig?.recordsLabel ?? 'records';
-    }
-    /** Get loading message with default English value */
-    getLoadingMessage() {
-        return this.config()?.labelsConfig?.loadingMessage ?? 'Loading...';
-    }
-    /** Get no data message with default English value */
-    getNoDataMessage() {
-        return this.config()?.labelsConfig?.noDataMessage ?? 'No information available';
-    }
-    //#endregion
-    constructor() {
-        this.tableNgEditService.setEditConfig(this.editConfig());
-        this.tableNgEditService.setKeysNames(this.config()?.keysNames ?? {});
-        effect(() => {
-            this.outputChangeData.emit([...this.data()]);
-        });
-        // Effect para gestionar el loading basado en el estado de data
-        effect(() => {
-            const currentData = this.data();
-            // Limpiar el timeout anterior si existe
-            if (this.loadingTimeout) {
-                clearTimeout(this.loadingTimeout);
-                this.loadingTimeout = null;
-            }
-            if (currentData.length === 0) {
-                // Si data está vacío, activar loading
-                this.isLoading.set(true);
-                this.loadingTimeout = setTimeout(() => {
-                    if (this.data().length === 0) {
-                        this.isLoading.set(false);
-                        this.timeoutExpired.set(true);
-                    }
-                }, 0);
-            }
-            else {
-                // Si hay data, desactivar loading y resetear timeout
-                this.isLoading.set(false);
-                this.timeoutExpired.set(false);
-            }
-        });
-    }
-    ngOnInit() {
-        this.tableNgService.setInitialValue([...this.data()]);
-    }
-    ngOnDestroy() {
-        // Limpiar el timeout al destruir el componente
-        if (this.loadingTimeout) {
-            clearTimeout(this.loadingTimeout);
-            this.loadingTimeout = null;
-        }
-    }
-    get hideToolbar() { return this.config()?.hideToolbar ?? false; }
-    /**
-     * Calcula el número total de columnas para el colspan del mensaje vacío
-     */
-    totalColumns = computed(() => {
-        const selectedColumns = this.config()?.selectedColumns ?? [];
-        const baseColumns = selectedColumns.length > 0 ? selectedColumns.length : this.keys().length;
-        const selectionColumn = this.config()?.selectionTableConfig?.isEnabled ? 1 : 0;
-        const expansionColumn = this.config()?.rowExpansionConfig?.isEnabled ? 1 : 0;
-        const editColumn = (this.editConfig()?.type === 'row' || this.editConfig()?.type === 'cell') && this.editConfig()?.isEnabled ? 1 : 0;
-        return baseColumns + selectionColumn + expansionColumn + editColumn;
-    });
-    isPrimeNgSelection(value) {
-        return PrimeNgUtil.isPrimeNgSelection(value);
-    }
-    hasErrorValues(object) {
-        return Object.keys(object).length > 0;
-    }
-    rowFieldsValue = signal({});
-    rowFieldsHasValue = computed(() => {
-        return Object.keys(this.rowFieldsValue()).reduce((acc, key) => {
-            acc[key] = !!this.rowFieldsValue()[key];
-            return acc;
-        }, {});
-    });
-    inlineChange(value, key) {
-        this.rowFieldsValue.update((prev) => {
-            return { ...prev, [key]: value };
-        });
-        this.outputRowInlineChange.emit({ ...this.rowFieldsValue() });
-    }
-    trackById(index, item) {
-        return item.id;
-    }
-    frozenHandle(value) {
-        return value ? value : false;
-    }
-    isDate(value) {
-        return value instanceof Date;
-    }
-    onFilter(event) {
-        const filters = event.filters;
-        if (!filters)
-            return;
-        const global = filters['global'];
-        if (!global?.['value']) {
-            this.handleAdvancedFiltersPerformed(filters);
-        }
-    }
-    resetRowDatas() {
-        this.data.update((data) => {
-            return data.map((item) => {
-                return {
-                    ...item,
-                    rowData: {}
-                };
-            });
-        });
-    }
-    get ETypeInput() {
-        return ETypeInput;
-    }
-    handleAdvancedFiltersPerformed(filters) {
-        if (!filters)
-            return;
-        const entriesFilters = Object.entries(filters);
-        const keysColumn = this.config()?.keys ?? [];
-        entriesFilters.forEach(([key, value]) => {
-            const valueArray = value;
-            const hasValue = !!valueArray[0]?.value;
-            const keyColumn = key.split('.')[1];
-            if (keysColumn.includes(keyColumn)) {
-                const index = this.advancedFiltersPerformed.indexOf(keyColumn);
-                if (hasValue && index === -1) {
-                    // Agregar si no existe
-                    this.advancedFiltersPerformed.push(keyColumn);
-                }
-                else if (!hasValue && index !== -1) {
-                    // Quitar si ya no tiene valor
-                    this.advancedFiltersPerformed.splice(index, 1);
-                }
-            }
-        });
-    }
-    numberOfRecords = computed(() => {
-        return this.data().length ?? 0;
-    });
-    hasRecords = computed(() => {
-        return this.numberOfRecords() > 0;
-    });
-    /**
-     * Computed que valida si al menos una fila tiene datos válidos en rowData.
-     * Retorna true si al menos una fila tiene un valor que no sea '', null o undefined.
-     * Retorna false si todas las filas tienen valores vacíos, null o undefined.
-     */
-    hasValidRowData = computed(() => {
-        const data = this.data();
-        return data.some(item => {
-            if (!item?.rowData || typeof item.rowData !== 'object') {
-                return false;
-            }
-            const values = Object.values(item.rowData);
-            // Verificar si al menos un valor es válido (no vacío, null o undefined)
-            return values.some(value => {
-                if (value === null || value === undefined || value === '') {
-                    return false;
-                }
-                // Si es string, verificar que no esté vacío después de trim
-                if (typeof value === 'string') {
-                    return value.trim() !== '';
-                }
-                // Para otros tipos (números, fechas, booleanos, etc.)
-                return true;
-            });
-        });
-    });
-    keys = computed(() => {
-        return this.config()?.keys ?? [];
-    });
-    onRowClick(item) {
-        item.onClick();
-    }
-    //#region Scroll Config
-    scrollHeight = computed(() => {
-        const scrollHeightInitial = this.config()?.scrollConfig?.scrollHeight ?? '58vh';
-        let res = scrollHeightInitial;
-        if (this.showBottomToolbar()) {
-            const { number: size, unit } = this.parseValue(scrollHeightInitial);
-            res = `${size - 7.6}${unit}`;
-        }
-        return res;
-    });
-    parseValue(str) {
-        const match = str.match(/^(-?\d+\.?\d*)(.*)$/);
-        if (match) {
-            return {
-                number: parseFloat(match[1]),
-                unit: match[2]
-            };
-        }
-        return { number: 0, unit: '' };
-    }
-    //#endregion
-    //#region Paginator Config
-    paginatorStyleClass = computed(() => {
-        if (this.showBottomToolbar()) {
-            return 'p-datatable-paginator p-datatable-paginator-bottom sticky bottom-18 z-10';
-        }
-        return 'p-datatable-paginator p-datatable-paginator-bottom sticky bottom-2 z-10';
-    });
-    //#endregion
-    //#region toolbar config
-    showBottomToolbar = computed(() => {
-        return this.showManagementSelectionConfig();
-    });
-    //#endregion
-    //#region Clear Filters
-    clearFilters() {
-        this.tableNgService.clearSearchInput();
-        this.advancedFiltersPerformed = [];
-        this.advancedFiltersValues.set({});
-        this.dt.clear();
-        this.targetElements.set([]);
-        this.handleTableValueToSourceElements();
-        this.selectedItems.set([]);
-    }
-    get filteredValue() {
-        return !!this.dt?.filteredValue && this.dt.filteredValue.length > 0;
-    }
-    clearFiltersButton = computed(() => {
-        return {
-            icon: 'fa-solid fa-filter-circle-xmark',
-            rounded: true,
-            raised: true,
-            severity: 'contrast',
-            tooltipConfig: {
-                pTooltip: 'Limpiar filtros'
-            },
-            onClick: () => {
-                this.clearFilters();
-            }
-        };
-    });
-    //#endregion
-    //#region Global Filter
-    get controlsGlobalFilter() {
-        return this.tableNgService.controls();
-    }
-    get searchFormGroupGlobalFilter() {
-        return this.tableNgService.searchFormGroup();
-    }
-    submitGlobalSearch(formGroup) {
-        this.dt.globalFilterFields = this.config()?.globalFilterConfig?.globalFilterFields ?? [];
-        this.tableNgService.submitGlobalSearch(formGroup, this.dt);
-    }
-    //#endregion
-    //#region SORT
-    customSort(event) {
-        this.tableNgService.customSort(event);
-    }
-    //#endregion
-    //#region Selection
-    selectedItems = model([]);
-    totalItemsSelected = computed(() => this.selectedItems().length);
-    showManagementSelectionConfig = computed(() => this.totalItemsSelected() > 0 && (this.config()?.selectionTableConfig?.showManagementConfig ?? false));
-    buttonTotalItemsSelected = computed(() => {
-        return {
-            label: this.totalItemsSelected().toLocaleString(),
-            variant: 'text',
-            rounded: true
-        };
-    });
-    showSelectedItemsManagementButton = computed(() => {
-        return {
-            icon: 'fa-solid fa-eye',
-            rounded: true,
-            variant: 'text',
-            severity: 'secondary',
-            onClick: () => {
-                this.openModalManagementSelectedItems();
-            }
-        };
-    });
-    openModalManagementSelectedItems() {
-        this.tableNgService.openModalManagementSelectedItems(this.selectedItems, this.config())
-            .then(() => { })
-            .catch(() => { });
-    }
-    //#endregion
-    //#region Custom Filter
-    inlineFormChanges(inlineValue, filter, typeInput, key) {
-        const lazyLoadingConfig = this.config()?.lazyLoadingConfig;
-        if (typeInput === ETypeInput.MULTISELECT) {
-            const options = inlineValue ? inlineValue : undefined;
-            const arrayValue = options ? options.map((data) => lazyLoadingConfig?.isEnabled ? data.code : data.name) : undefined;
-            if (Array.isArray(arrayValue) && arrayValue.length === 0) {
-                if (key) {
-                    this.advancedFiltersValues.update((prev) => {
-                        const { [key]: _value, ...rest } = prev;
-                        return { ...rest };
-                    });
-                }
-            }
-            if (inlineValue && (Array.isArray(arrayValue) && arrayValue.length > 0)) {
-                filter(arrayValue);
-            }
-        }
-    }
-    formChanges(formValue, filter, key) {
-        if (Array.isArray(formValue['multiSelect'])) {
-            this.advancedFiltersValues.update((prev) => {
-                return { ...prev, [key]: formValue };
-            });
-        }
-        if (!Array.isArray(formValue['multiSelect']) && this.advancedFiltersValues()?.[key]) {
-            this.advancedFiltersValues.update((prev) => {
-                const { [key]: _value, ...rest } = prev;
-                return { ...rest };
-            });
-        }
-        const arrayValue = Array.isArray(formValue['multiSelect'])
-            ? formValue['multiSelect'].map((data) => data.code)
-            : [];
-        if (arrayValue.length > 0) {
-            filter(arrayValue);
-        }
-    }
-    rowDataKey(key) {
-        return `rowData.${key}`;
-    }
-    //#endregion
-    //#region Lazy Loading
-    onLazyLoad(event) {
-        const filters = event.filters ?? {};
-        const filtersWithValue = this.getFiltersWithValue(filters);
-        const metaPagination = {
-            limit: event.rows ?? undefined,
-            skip: event.first ?? undefined
-        };
-        if (event.sortOrder) {
-            metaPagination.sortOrder = event.sortOrder === 1 ? 'ASC' : 'DESC';
-        }
-        if (event.sortField) {
-            metaPagination.sortBy = event.sortField;
-        }
-        const lazyLoadResponse = {
-            filters: filtersWithValue,
-            metaPagination
-        };
-        this.lazyLoading.emit(lazyLoadResponse);
-    }
-    getFiltersWithValue(filters) {
-        const result = {};
-        Object.entries(filters).forEach(([key, filter]) => {
-            const keyColumn = key.split('.')[1];
-            if (!filter)
-                return;
-            if (Array.isArray(filter)) {
-                // Si es un array, filtrar solo los elementos que tienen value
-                const filtersWithValue = filter.filter(f => f.value !== undefined && f.value !== null && f.value !== '');
-                if (filtersWithValue.length > 0) {
-                    result[keyColumn] = filtersWithValue;
-                }
-            }
-            else {
-                // Si es un objeto único, verificar si tiene value
-                if (filter.value !== undefined && filter.value !== null && filter.value !== '') {
-                    result[keyColumn] = filter;
-                }
-            }
-        });
-        return result;
-    }
-    //#endregion
-    //#region Edit
-    onCellValueChange() {
-        this.updateDataWithTableValue();
-    }
-    onRowDataChange(_data) {
-    }
-    onEditData() {
-        this.updateDataWithTableValue();
-        this.outputEditData.emit([...this.data()]);
-    }
-    get controlsEdit() {
-        return this.tableNgEditService.controls();
-    }
-    get searchFormGroupEdit() {
-        return this.tableNgEditService.searchFormGroup();
-    }
-    customControlConfig(key, value) {
-        return {
-            controlName: key,
-            control: this.fb.control(value),
-            typeInput: ETypeInput.TEXT
-        };
-    }
-    cellFormGroup = this.fb.group({});
-    //#region Row
-    addRowButton = computed(() => {
-        const editConfig = this.editConfig();
-        const isDisabled = editConfig?.type === 'cell'
-            ? (editConfig?.cellEditConfig?.isDisabledAddButton ?? false)
-            : (editConfig?.rowEditConfig?.isDisabledAddButton ?? false) || this.hasRowInEdit;
-        const button = {
-            icon: 'fa-solid fa-plus',
-            rounded: true,
-            severity: 'success',
-            tooltipConfig: {
-                pTooltip: 'Agregar registro',
-                tooltipPosition: 'top'
-            },
-            onClick: () => {
-                this.addRow();
-            },
-            disabled: isDisabled
-        };
-        return button;
-    });
-    addRow() {
-        const editConfig = this.editConfig();
-        // Si es modo cell y hay defaultTableNgData configurado, agregar la fila directamente
-        if (editConfig?.type === 'cell' && editConfig?.cellEditConfig?.defaultTableNgData) {
-            const newRow = this.editConfig()?.cellEditConfig?.defaultTableNgData;
-            if (newRow) {
-                this.data.update(currentData => [...currentData, newRow]);
-                this.outputChangeData.emit(this.data());
-                return;
-            }
-        }
-        // Comportamiento original para modo row o cuando no hay defaultTableNgData
-        this.outputAddRow.emit(this.data());
-        this.setEditingRowId(null);
-    }
-    defaultTableNgData = computed(() => {
-        const editConfig = this.editConfig();
-        let defaultData;
-        // Usar la configuración apropiada según el tipo de edición
-        if (editConfig?.type === 'cell' && editConfig?.cellEditConfig?.defaultTableNgData) {
-            defaultData = editConfig.cellEditConfig.defaultTableNgData;
-        }
-        else if (editConfig?.type === 'row' && editConfig?.rowEditConfig?.defaultTableNgData) {
-            defaultData = editConfig.rowEditConfig.defaultTableNgData;
-        }
-        const res = { ...defaultData };
-        return {
-            ...res,
-            id: generateId()
-        };
-    });
-    clonedRowData = null;
-    editingRowId = signal(null);
-    /**
-     * Verifica si una fila específica está siendo editada
-     */
-    isRowEditing(id) {
-        return this.editingRowId() === id;
-    }
-    /**
-     * Verifica si hay alguna fila siendo editada actualmente
-     */
-    get hasRowInEdit() {
-        return this.editingRowId() !== null;
-    }
-    onRowEditInit(data) {
-        // Verificar si ya hay una fila en edición
-        this.clonedRowData = structuredClone(data.rowData);
-        this.setEditingRowId(data.id);
-        this.outputHandleEditInitButton.emit(data);
-    }
-    setEditingRowId(id) {
-        this.editingRowId.set(id);
-        this.outputIsEditing.emit(true);
-    }
-    onRowEditSave(_data) {
-        this.clonedRowData = null;
-        this.editingRowId.set(null);
-        this.updateDataWithTableValue();
-        this.setEnableErrors(false);
-        this.outputIsEditing.emit(false);
-        this.outputRowDataChange.emit(_data);
-    }
-    onRowEditCancel(data, index) {
-        if (this.clonedRowData && this.editingRowId() === data.id) {
-            const items = [...this.data()];
-            items[index] = { ...items[index], rowData: this.clonedRowData };
-            this.data.set(items);
-        }
-        this.clonedRowData = null;
-        this.setEditingRowId(null);
-        this.setEnableErrors(false);
-        this.outputIsEditing.emit(false);
-    }
-    updateDataWithTableValue() {
-        const tableValue = (this.dt.value ?? []);
-        this.data.set([...tableValue]);
-    }
-    editInitButton = computed(() => {
-        return {
-            icon: 'fa-solid fa-pencil',
-            rounded: true,
-            variant: 'text',
-            severity: 'secondary'
-        };
-    });
-    getEditInitButton(productId) {
-        return {
-            ...this.editInitButton(),
-            disabled: this.hasRowInEdit && !this.isRowEditing(productId)
-        };
-    }
-    editSaveButton = computed(() => {
-        return {
-            icon: 'fa-solid fa-check',
-            rounded: true,
-            variant: 'text',
-            severity: 'secondary'
-        };
-    });
-    editSaveButtonWithErrors = computed(() => {
-        return {
-            icon: 'fa-solid fa-check',
-            rounded: true,
-            variant: 'text',
-            severity: 'secondary'
-        };
-    });
-    enableErrors = false;
-    setEnableErrors(value) {
-        this.enableErrors = value;
-    }
-    onEditSaveWithErrors() {
-        this.setEnableErrors(true);
-    }
-    editCancelButton = computed(() => {
-        return {
-            icon: 'fa-solid fa-times',
-            rounded: true,
-            variant: 'text',
-            severity: 'secondary'
-        };
-    });
-    deleteRowButton = computed(() => {
-        return {
-            icon: 'fa-solid fa-trash',
-            rounded: true,
-            variant: 'text',
-            severity: 'danger'
-        };
-    });
-    getDeleteRowButton() {
-        return {
-            ...this.deleteRowButton(),
-            disabled: this.hasRowInEdit
-        };
-    }
-    removeRowFromData(data) {
-        const { id } = data;
-        const items = [...this.data()];
-        items.splice(items.findIndex(item => item.id === id), 1);
-        this.data.set(items);
-        this.outputDeleteRow.emit(data);
-    }
-    deleteRow(data) {
-        this.removeRowFromData(data);
-        this.outputEditData.emit(this.data());
-    }
-    //#endregion Row
-    get footerRows() {
-        return this.footerConfig()?.footerRows || [];
-    }
-    applyPipe(value, pipeConfig) {
-        if (!pipeConfig || !pipeConfig.pipe) {
-            return value?.toString() || '';
-        }
-        switch (pipeConfig.pipe) {
-            case 'currency': {
-                const currencyCode = pipeConfig.args?.[0] || 'COP';
-                return new Intl.NumberFormat('es-CO', {
-                    style: 'currency',
-                    currency: currencyCode
-                }).format(value);
-            }
-            case 'number': {
-                const digits = pipeConfig.args?.[0] || '1.2-2';
-                const [minInteger, fractional] = digits.split('.');
-                const [minFractional, maxFractional] = fractional ? fractional.split('-') : ['0', '0'];
-                return new Intl.NumberFormat('es-CO', {
-                    minimumIntegerDigits: parseInt(minInteger),
-                    minimumFractionDigits: parseInt(minFractional),
-                    maximumFractionDigits: parseInt(maxFractional || minFractional)
-                }).format(value);
-            }
-            case 'date': {
-                if (value instanceof Date) {
-                    return value.toLocaleDateString('es-CO');
-                }
-                return value?.toString() || '';
-            }
-            default:
-                return value?.toString() || '';
-        }
-    }
-    // #endregion
-    //#region Row Expansion
-    rowExpansionButton(isRowExpanded) {
-        return computed(() => {
-            return {
-                icon: isRowExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right',
-                rounded: true,
-                variant: 'text',
-                severity: 'contrast'
-            };
-        });
-    }
-    //#endregion
-    itemTemplateInput = input(null);
-    itemTemplate;
-    get currentItemTemplate() {
-        return this.itemTemplateInput() || this.itemTemplate || null;
-    }
-    isThatItemInTheProductSelection(field) {
-        const selectedColumns = this.config()?.selectedColumns ?? [];
-        if (!selectedColumns.length) {
-            return true;
-        }
-        return selectedColumns.some((column) => column.field === field);
-    }
-    //#region Advanced Identifier Filters
-    advancedIdentifierFiltersButton = computed(() => {
-        return {
-            icon: 'pi pi-filter',
-            rounded: true,
-            severity: 'warn',
-            raised: true,
-            tooltipConfig: {
-                pTooltip: this.data().length === 0 ? 'No hay datos para filtrar' : 'Filtros avanzados',
-                tooltipPosition: 'top'
-            },
-            onClick: () => {
-                this.openAdvancedIdentifierFilters();
-            },
-            disabled: this.data().length === 0
-        };
-    });
-    openAdvancedIdentifierFilters() {
-        if (this.sourceElements().length === 0) {
-            this.handleTableValueToSourceElements();
-        }
-        this.handleSelectedItemsToSourceElements();
-        if (this.data().length === 0) {
-            return;
-        }
-        const ref = this.dialogService.open(ModalAdvancedFilterComponent, {
-            header: 'Filtros Avanzados',
-            width: '70%',
-            height: '70%',
-            styleClass: 'overflow-hidden',
-            data: {
-                sourceElements: this.sourceElements(),
-                targetElements: this.targetElements()
-            }
-        });
-        ref.onClose.subscribe((result) => {
-            const { sourceElements, targetElements } = result?.data ?? {};
-            if (!result?.success) {
-                return;
-            }
-            if (result?.data?.targetElements?.length === 0) {
-                return;
-            }
-            if (sourceElements.length === 0) {
-                return;
-            }
-            this.sourceElements.set(sourceElements ?? []);
-            this.targetElements.set(targetElements ?? []);
-            this.identifiersSelected.set((this.targetElements() ?? []).filter((element) => element.buttonConfig?.label).map((element) => element.buttonConfig?.label) ?? []);
-            this.dt.filter(this.identifiersSelected(), 'rowData.identifier', 'arrayStringFilter');
-        });
-    }
-    handleTableValueToSourceElements() {
-        const value = this.data();
-        if (!value.some((item) => item.rowData['identifier'])) {
-            return;
-        }
-        const sourceElements = value.map((item) => ({
-            id: item.id,
-            buttonConfig: {
-                label: item.rowData['identifier'],
-                fullWidth: true,
-                fullHeight: true
-            },
-            isSelected: false
-        }));
-        this.sourceElements.set(sourceElements);
-    }
-    handleSelectedItemsToSourceElements() {
-        const selectedItems = this.selectedItems();
-        if (!selectedItems.some((item) => item.rowData['identifier'])) {
-            return;
-        }
-        const identifiers = selectedItems.map((item) => item.rowData['identifier']);
-        const sourceElements = this.sourceElements().map((item) => ({
-            ...item,
-            isSelected: identifiers.includes(item.buttonConfig?.label)
-        }));
-        this.sourceElements.set(sourceElements);
-    }
-    identifiersSelected = signal([]);
-    //#endregion
-    get excelButton() {
-        return this.tableNgService.excelButton();
-    }
-    get pdfButton() {
-        return this.tableNgService.pdfButton();
-    }
-    lazyLoadingConfig = computed(() => {
-        return this.config()?.lazyLoadingConfig ?? undefined;
-    });
-    isEnabledLazyLoading = computed(() => {
-        return this.lazyLoadingConfig()?.isEnabled ?? false;
-    });
-    prepareDataForExport(dataToExport) {
-        const keys = this.config()?.keys ?? [];
-        const keysNames = this.config()?.keysNames ?? {};
-        return dataToExport.map((item) => {
-            const row = {};
-            const rowData = item.rowData;
-            keys.forEach((key) => {
-                const keyName = keysNames[key] ?? key;
-                if (rowData[key]) {
-                    let value = rowData[key];
-                    switch (typeof value) {
-                        case 'number':
-                            value = formatNumber(value);
-                            break;
-                        default:
-                            break;
-                    }
-                    row[keyName] = value;
-                }
-            });
-            return row;
-        });
-    }
-    exportCSV(data) {
-        // Create a new workbook
-        const workbook = XLSX.utils.book_new();
-        const worksheet = XLSX.utils.json_to_sheet(data);
-        // Get title from config or use default
-        const name = this.config()?.excelConfig?.name ?? 'Report';
-        const fileName = name || 'table-export';
-        // Excel sheet names cannot exceed 31 characters
-        const sheetName = name.substring(0, 31);
-        // Add the worksheet to the workbook
-        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
-        // Generate Excel file and trigger download
-        XLSX.writeFile(workbook, `${fileName}.xlsx`);
-    }
-    exportData(dt, endpoint) {
-        if (this.isEnabledLazyLoading()) {
-            const filters = dt.filters ?? {};
-            const filterQuery = {};
-            Object.entries(filters).forEach(([key, value]) => {
-                const keyName = key.split('.')[1];
-                const valueFilter = value[0]?.value;
-                filterQuery[keyName] = valueFilter;
-            });
-            this.lazyLoadingConfig()?.excelLazyLoadingConfig?.callback(removeNullUndefined(filterQuery))
-                .subscribe((response) => {
-                const data = this.prepareDataForExport(response);
-                if (endpoint === 'excel') {
-                    this.exportCSV(data);
-                }
-                else {
-                    this.exportPDF(data);
-                }
-            });
-        }
-        else {
-            const value = dt.value ?? this.data();
-            const filteredValue = dt.filteredValue ?? [];
-            let dataToExport = [];
-            if (filteredValue.length > 0) {
-                dataToExport = filteredValue;
-            }
-            else {
-                dataToExport = value;
-            }
-            const data = this.prepareDataForExport(dataToExport);
-            if (endpoint === 'excel') {
-                this.exportCSV(data);
-            }
-            else {
-                this.exportPDF(data);
-            }
-        }
-    }
-    exportPDF(data) {
-        // Get title from config or use default
-        const name = this.config()?.pdfConfig?.name ?? this.config()?.excelConfig?.name ?? 'Report';
-        const fileName = name || 'table-export';
-        // Get keys and column names
-        const keys = this.config()?.keys ?? [];
-        const keysNames = this.config()?.keysNames ?? {};
-        // Prepare headers
-        const headers = keys.map((key) => keysNames[key] ?? key);
-        // Prepare rows data
-        const rows = data.map((row) => {
-            return keys.map((key) => {
-                const keyName = keysNames[key] ?? key;
-                return row[keyName] ?? '';
-            });
-        });
-        // Create PDF document
-        const doc = new jsPDF({
-            orientation: 'landscape',
-            unit: 'mm',
-            format: 'a4'
-        });
-        // Add title
-        doc.setFontSize(16);
-        doc.text(name, 14, 15);
-        // Add table
-        autoTable(doc, {
-            head: [headers],
-            body: rows,
-            startY: 20,
-            styles: {
-                fontSize: 8,
-                cellPadding: 2
-            },
-            headStyles: {
-                fillColor: [66, 139, 202],
-                textColor: 255,
-                fontStyle: 'bold'
-            },
-            alternateRowStyles: {
-                fillColor: [245, 245, 245]
-            },
-            margin: { top: 20 }
-        });
-        // Save PDF
-        doc.save(`${fileName}.pdf`);
-    }
-    enableExcelButton = computed(() => {
-        return this.config()?.excelConfig?.isEnabled ?? false;
-    });
-    enablePdfButton = computed(() => {
-        return this.config()?.pdfConfig?.isEnabled ?? false;
-    });
-    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 }, 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 }, 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", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", 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\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    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\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    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\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(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [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]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n              @if (\r\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></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          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [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]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (\r\n              filterConfigByKey?.[key]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></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                {{ 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 {\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        </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              {{ item.rowData[key] }}\r\n            </ng-template>\r\n          </p-cellEditor>\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 {\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?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{\r\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n              '' }}</span>\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 {\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?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n              '' }}</span>\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          @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            {{ item.rowData[key] | number: '1.2-2' }}\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=\"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\">{{ 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\">{{\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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-table-ng', imports: [
-                        CommonModule,
-                        TableModule,
-                        ButtonNgComponent,
-                        ToolbarNgComponent,
-                        FormComponent,
-                        KeyToDisplayNamePipe,
-                        FormsModule,
-                        InlineInputComponent,
-                        BadgeNgComponent,
-                        HttpMessageComponent
-                    ], 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\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    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\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    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\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(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [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]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n              @if (\r\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></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          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [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]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (\r\n              filterConfigByKey?.[key]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></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                {{ 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 {\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        </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              {{ item.rowData[key] }}\r\n            </ng-template>\r\n          </p-cellEditor>\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 {\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?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{\r\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n              '' }}</span>\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 {\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?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n              '' }}</span>\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          @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            {{ item.rowData[key] | number: '1.2-2' }}\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=\"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\">{{ 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\">{{\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']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: ['item', { static: true }]
-            }] } });
-
-/*
- * Public API Surface of lib-components
-
-NPM TOKEN:
-4f5f941cb6703a2bea326507bd5098aa7dd8224ef4d9b434f6209c73855bf7ac
-8b61ac2dab0cf90c13878339c755b09f868b34906ad196a1138433f76f41feb4
-37b8f0500846352a33a9d1e2a8504e8a4332cd035a3819d9dc4b2dcdf557c3f0
-31f1ccdf0a47736bd3851647d485385323328542c49de9d95498d875e3977f5e
-de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BaseDialogComponent as B, ETypeInput as E, FormComponent as F, InlineInputComponent as I, LibComponentsService as L, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b };
-//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-BUXK0MSP.mjs.map