ln-20-lib-components 0.0.63 → 0.0.64

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

@@ -0,0 +1,3748 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, model, input, computed, output, forwardRef, ChangeDetectionStrategy, effect, signal, ContentChildren, inject, ViewChild, Pipe, viewChild, ContentChild } 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';
+import * as i1$5 from 'primeng/speeddial';
+import { SpeedDialModule } from 'primeng/speeddial';
+
+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["INPUT"] = "input";
+})(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();
+    onChange = (_value) => { };
+    constructor() { }
+    control = computed(() => this.controlData().control);
+    controlValue = computed(() => this.control().value);
+    hasControlValue = computed(() => this.controlValue() !== null && this.controlValue() !== undefined);
+    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;
+    }
+    onBlur() {
+        this.controlData().onBlur?.();
+    }
+    onFocus() {
+        this.controlData().onFocus?.();
+    }
+    onTouched = () => { };
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    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@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\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 [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.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\" dateFormat=\"dd/mm/yy\"\r\n        class=\"custom-datepicker\" 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\" [readonly]=\"readonly\" [disabled]=\"readonly\"\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 [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [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 && !hasControlValue()) {\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@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\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 [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.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\" dateFormat=\"dd/mm/yy\"\r\n        class=\"custom-datepicker\" 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\" [readonly]=\"readonly\" [disabled]=\"readonly\"\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 [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [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 && !hasControlValue()) {\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';
+    }
+    get isWarning() {
+        const message = this.httpMessage();
+        return message?.type === 'warning';
+    }
+    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  @if (isWarning) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-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-amber-500 dark:text-amber-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-amber-700 dark:text-amber-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-amber-500 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-200 p-1 rounded hover:bg-amber-100 dark:hover:bg-amber-800/30\"\r\n          aria-label=\"Cerrar mensaje de advertencia\"\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: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-http-message', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, 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  @if (isWarning) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-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-amber-500 dark:text-amber-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-amber-700 dark:text-amber-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-amber-500 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-200 p-1 rounded hover:bg-amber-100 dark:hover:bg-amber-800/30\"\r\n          aria-label=\"Cerrar mensaje de advertencia\"\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: () => [] });
+
+/**
+ * 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 InlineInputComponent {
+    config = input({ typeInput: ETypeInput.TEXT });
+    value = model(null);
+    outputValue = output();
+    outputBlur = output();
+    outputDebounced = output();
+    // Capturar templates proyectados desde el componente padre
+    templates;
+    // Para el manejo de chips
+    chips = [];
+    currentInput = '';
+    showDuplicateMessage = false;
+    duplicateChips = [];
+    duplicateMessageTimer = null;
+    constructor() {
+        effect(() => {
+            this.outputValue.emit(this.value());
+        });
+        const value$ = toObservable(this.value);
+        value$
+            .pipe(debounceTime(300), // <- adjust ms here
+        distinctUntilChanged(), // avoid repeats for same value
+        takeUntilDestroyed() // auto-cleanup on destroy
+        )
+            .subscribe(v => this.outputDebounced.emit(v));
+        effect(() => {
+            this.valueSelect.update((_prev) => {
+                const options = this.config()?.selectConfig?.options;
+                const currentValue = this.value();
+                if (this.isSelection(currentValue))
+                    return currentValue;
+                if (currentValue === null || currentValue === undefined)
+                    return undefined;
+                return options?.find(option => option.code === currentValue);
+            });
+        });
+    }
+    ngOnInit() {
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
+        // Si es tipo CHIPS, inicializar los chips desde el valor
+        if (this.type === ETypeInput.CHIPS && typeof value === 'string') {
+            this.chips = value ? value.split(' ').filter(chip => chip.trim() !== '') : [];
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onChangeValue(value) {
+        let nextValue = value;
+        if (this.type === ETypeInput.MULTISELECT && Array.isArray(value)) {
+            nextValue = value.filter((item) => item != null && this.isSelection(item));
+        }
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+    }
+    onBlur() {
+        this.onTouched();
+        this.outputBlur.emit(this.value());
+    }
+    /**
+     * 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 PrimeNgUtil.isPrimeNgSelection(value);
+    }
+    /**
+     * Normaliza el valor del multiselect: PrimeNG ColumnFilter devuelve string[] (name/code)
+     * pero p-multiselect espera IPrimeNgSelection[] cuando las options son objetos.
+     */
+    multiSelectValue = computed(() => {
+        return this.normalizeMultiSelectValue(this.value());
+    });
+    normalizeMultiSelectValue(value) {
+        if (value == null) {
+            return [];
+        }
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        const options = this.config()?.multiSelectConfig?.options ?? [];
+        return value
+            .filter((item) => item != null && item !== '')
+            .map((item) => {
+            if (this.isSelection(item)) {
+                return item;
+            }
+            if (typeof item === 'string') {
+                return options.find((option) => option.code === item || option.name === item);
+            }
+            return undefined;
+        })
+            .filter((item) => !!item);
+    }
+    valueSelect = signal(undefined);
+    setValueSelect(value) {
+        this.valueSelect.set(value);
+    }
+    get type() {
+        return this.config()?.typeInput ?? ETypeInput.TEXT;
+    }
+    get ETypeInput() {
+        return ETypeInput;
+    }
+    get duplicatesText() {
+        return this.duplicateChips.join(', ');
+    }
+    get currency() {
+        return this.config()?.currencyConfig?.currency ?? 'COP';
+    }
+    get locale() {
+        return this.config()?.currencyConfig?.locale ?? 'es-CO';
+    }
+    get minFractionDigits() {
+        return this.config()?.currencyConfig?.minFractionDigits ?? 2;
+    }
+    get maxFractionDigits() {
+        return this.config()?.currencyConfig?.maxFractionDigits ?? 2;
+    }
+    knobValueInput = computed(() => {
+        let response = this.value();
+        const knobConfig = this.config()?.knobConfig ?? { min: 0, max: 100, step: 1 };
+        response = parseInt(this.value()) ?? 0;
+        if (response < (knobConfig?.min ?? 0)) {
+            response = knobConfig.min ?? 0;
+        }
+        if (response > (knobConfig?.max ?? 100)) {
+            response = knobConfig.max ?? 100;
+        }
+        return response;
+    });
+    knobValueTemplate = computed(() => {
+        return this.config()?.knobConfig?.valueTemplate ?? '';
+    });
+    // Métodos para manejo de chips
+    onChipInputChange(event) {
+        const target = event.target;
+        this.currentInput = target.value;
+    }
+    onChipKeydown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.addChip();
+        }
+        else if (event.key === 'Backspace' && this.currentInput === '' && this.chips.length > 0) {
+            // Si no hay texto y hay chips, eliminar el último chip
+            this.removeChip(this.chips.length - 1);
+        }
+        // No interceptar las flechas aquí ya que se maneja en onKeyDown
+    }
+    onChipPaste(event) {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        this.processPastedText(pastedText);
+    }
+    addChip() {
+        const trimmedValue = this.currentInput.trim();
+        if (trimmedValue) {
+            if (this.chips.includes(trimmedValue)) {
+                // Mostrar mensaje de duplicado con el chip específico
+                this.duplicateChips = [trimmedValue];
+                this.showDuplicateAlert();
+            }
+            else {
+                this.chips.push(trimmedValue);
+                this.currentInput = '';
+                this.updateChipsValue();
+                this.hideDuplicateAlert();
+            }
+        }
+    }
+    removeChip(index) {
+        this.chips.splice(index, 1);
+        this.updateChipsValue();
+    }
+    updateChipsValue() {
+        const chipsValue = this.chips.join(' ');
+        this.value.set(chipsValue);
+        this.onChange(chipsValue);
+    }
+    showDuplicateAlert() {
+        this.showDuplicateMessage = true;
+        // Limpiar timer anterior si existe
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+        }
+        // Ocultar mensaje después de 3 segundos
+        this.duplicateMessageTimer = setTimeout(() => {
+            this.hideDuplicateAlert();
+        }, 3000);
+    }
+    hideDuplicateAlert() {
+        this.showDuplicateMessage = false;
+        this.duplicateChips = [];
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+            this.duplicateMessageTimer = null;
+        }
+    }
+    processPastedText(text) {
+        // Dividir el texto por espacios y filtrar elementos vacíos
+        const newChips = text
+            .split(/\s+/) // Dividir por uno o más espacios
+            .map(chip => chip.trim()) // Limpiar espacios en cada elemento
+            .filter(chip => chip !== ''); // Filtrar elementos vacíos
+        const foundDuplicates = [];
+        let addedChips = 0;
+        // Agregar cada chip nuevo y recopilar duplicados
+        newChips.forEach(chipText => {
+            if (!this.chips.includes(chipText)) {
+                this.chips.push(chipText);
+                addedChips++;
+            }
+            else {
+                // Solo agregar a duplicados si no está ya en la lista
+                if (!foundDuplicates.includes(chipText)) {
+                    foundDuplicates.push(chipText);
+                }
+            }
+        });
+        // Limpiar el input actual
+        this.currentInput = '';
+        // Actualizar el valor si se agregaron chips
+        if (addedChips > 0) {
+            this.updateChipsValue();
+        }
+        // Mostrar alerta si hubo duplicados
+        if (foundDuplicates.length > 0) {
+            this.duplicateChips = foundDuplicates;
+            this.showDuplicateAlert();
+        }
+        else {
+            this.hideDuplicateAlert();
+        }
+    }
+    /**
+     * Método público para establecer chips desde un array externo
+     * @param chipsArray Array de strings que representan las chips
+     */
+    setChipsFromArray(chipsArray) {
+        if (!Array.isArray(chipsArray)) {
+            console.warn('setChipsFromArray: El parámetro debe ser un array de strings');
+            return;
+        }
+        // Filtrar elementos válidos (strings no vacíos)
+        const validChips = chipsArray
+            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
+            .map(chip => chip.trim());
+        // Actualizar el array de chips
+        this.chips = [...validChips];
+        // Limpiar el input actual
+        this.currentInput = '';
+        // Actualizar el valor del componente
+        this.updateChipsValue();
+        // Ocultar cualquier mensaje de duplicado
+        this.hideDuplicateAlert();
+    }
+    /**
+     * Método público para obtener las chips actuales como array
+     * @returns Array de strings con las chips actuales
+     */
+    getChipsAsArray() {
+        return [...this.chips];
+    }
+    /**
+     * Método público para limpiar todas las chips
+     */
+    clearAllChips() {
+        this.chips = [];
+        this.currentInput = '';
+        this.updateChipsValue();
+        this.hideDuplicateAlert();
+    }
+    /**
+     * Método público para agregar múltiples chips desde un array
+     * Evita duplicados y muestra mensajes de alerta si es necesario
+     * @param chipsArray Array de strings a agregar
+     */
+    addChipsFromArray(chipsArray) {
+        if (!Array.isArray(chipsArray)) {
+            console.warn('addChipsFromArray: El parámetro debe ser un array de strings');
+            return;
+        }
+        // Filtrar elementos válidos
+        const validChips = chipsArray
+            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
+            .map(chip => chip.trim());
+        const foundDuplicates = [];
+        let addedChips = 0;
+        // Agregar cada chip nuevo y recopilar duplicados
+        validChips.forEach(chipText => {
+            if (!this.chips.includes(chipText)) {
+                this.chips.push(chipText);
+                addedChips++;
+            }
+            else {
+                // Solo agregar a duplicados si no está ya en la lista
+                if (!foundDuplicates.includes(chipText)) {
+                    foundDuplicates.push(chipText);
+                }
+            }
+        });
+        // Actualizar el valor si se agregaron chips
+        if (addedChips > 0) {
+            this.updateChipsValue();
+        }
+        // Mostrar alerta si hubo duplicados
+        if (foundDuplicates.length > 0) {
+            this.duplicateChips = foundDuplicates;
+            this.showDuplicateAlert();
+        }
+        else {
+            this.hideDuplicateAlert();
+        }
+    }
+    // Limpiar timer al destruir el componente
+    ngOnDestroy() {
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InlineInputComponent, isStandalone: true, selector: "lib-inline-input", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outputValue: "outputValue", outputBlur: "outputBlur", outputDebounced: "outputDebounced" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InlineInputComponent),
+                multi: true
+            }
+        ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" dateFormat=\"dd/mm/yy\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\n  dateFormat=\"dd/mm/yy\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"multiSelectValue()\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KnobModule }, { kind: "component", type: i9$1.Knob, selector: "p-knob", inputs: ["styleClass", "style", "ariaLabel", "ariaLabelledBy", "tabindex", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "disabled", "showValue", "readonly"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i11.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-inline-input', standalone: true, imports: [
+                        FormsModule,
+                        InputTextModule,
+                        DatePickerModule,
+                        SelectModule,
+                        MultiSelectModule,
+                        InputMaskModule,
+                        InputNumberModule,
+                        InputOtpModule,
+                        KnobModule,
+                        TextareaModule,
+                        ChipModule,
+                        ToggleSwitchModule,
+                        CommonModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InlineInputComponent),
+                            multi: true
+                        }
+                    ], template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" dateFormat=\"dd/mm/yy\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\n  dateFormat=\"dd/mm/yy\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"multiSelectValue()\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
+
+class AminatedContainerComponent {
+    isLoading = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AminatedContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AminatedContainerComponent, isStandalone: true, selector: "lib-aminated-container", ngImport: i0, template: "<div class=\"fade-in-container\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-container{animation:fadeIn .8s ease-out forwards;opacity:0;transform:translateY(10px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AminatedContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-aminated-container', imports: [CommonModule], template: "<div class=\"fade-in-container\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-container{animation:fadeIn .8s ease-out forwards;opacity:0;transform:translateY(10px)}\n"] }]
+        }] });
+
+class SpeedDialService {
+    panelOffset = 10;
+    mainButtonHost;
+    activeAnchor;
+    _isMenuOpen = signal(false);
+    _panelTop = signal('0px');
+    _panelLeft = signal('0px');
+    constructor() { }
+    _speedDialConfig = signal({});
+    speedDialConfig = this._speedDialConfig.asReadonly();
+    isMenuOpen = this._isMenuOpen.asReadonly();
+    panelTop = this._panelTop.asReadonly();
+    panelLeft = this._panelLeft.asReadonly();
+    setSpeedDialConfig(config) {
+        this._speedDialConfig.set(config);
+        if (this.isMenuOpen())
+            this.updatePanelPosition();
+    }
+    setMainButtonHost(host) {
+        this.mainButtonHost = host;
+        if (this.isMenuOpen())
+            this.updatePanelPosition();
+    }
+    buttons = computed(() => {
+        return this.speedDialConfig().buttons;
+    });
+    overlayButtons = computed(() => {
+        return this.buttons().map((button) => {
+            return {
+                ...button,
+                onClick: (data) => {
+                    this.closeMenu();
+                    button.onClick?.(data);
+                }
+            };
+        });
+    });
+    mainButton = computed(() => {
+        const rawMainButton = this.speedDialConfig().mainButton;
+        return {
+            ...rawMainButton,
+            icon: this.isMenuOpen() ? 'fa-solid fa-xmark' : rawMainButton.icon,
+            severity: this.isMenuOpen() ? 'danger' : rawMainButton.severity,
+            onClick: (data) => {
+                rawMainButton.onClick?.(data);
+            }
+        };
+    });
+    direction = computed(() => {
+        return this.speedDialConfig().direction;
+    });
+    toggleMenu(anchor) {
+        const nextState = !this.isMenuOpen();
+        this._isMenuOpen.set(nextState);
+        this.activeAnchor = anchor ?? this.mainButtonHost;
+        if (!nextState)
+            return;
+        this.updatePanelPosition();
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    closeMenu() {
+        if (!this.isMenuOpen())
+            return;
+        this._isMenuOpen.set(false);
+        this.activeAnchor = undefined;
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    destroy() {
+        this.closeMenu();
+        this.mainButtonHost = undefined;
+    }
+    handleViewportChange = () => {
+        if (!this.isMenuOpen())
+            return;
+        this.updatePanelPosition();
+    };
+    updatePanelPosition() {
+        const anchor = this.activeAnchor ?? this.mainButtonHost;
+        if (!anchor)
+            return;
+        const rect = anchor.getBoundingClientRect();
+        const fixedContainingBlock = this.getFixedContainingBlock(anchor);
+        const containingBlockRect = fixedContainingBlock?.getBoundingClientRect();
+        const offsetTop = containingBlockRect?.top ?? 0;
+        const offsetLeft = containingBlockRect?.left ?? 0;
+        switch (this.direction()) {
+            case 'top':
+                this._panelTop.set(`${rect.top - offsetTop - this.panelOffset}px`);
+                this._panelLeft.set(`${rect.left - offsetLeft}px`);
+                break;
+            case 'bottom':
+                this._panelTop.set(`${rect.bottom - offsetTop + this.panelOffset}px`);
+                this._panelLeft.set(`${rect.left - offsetLeft}px`);
+                break;
+            case 'left':
+                this._panelTop.set(`${rect.top - offsetTop}px`);
+                this._panelLeft.set(`${rect.left - offsetLeft - this.panelOffset}px`);
+                break;
+            case 'right':
+                this._panelTop.set(`${rect.top - offsetTop}px`);
+                this._panelLeft.set(`${rect.right - offsetLeft + this.panelOffset}px`);
+                break;
+        }
+    }
+    /**
+     * Detecta el ancestro que actúa como containing block para elementos fixed.
+     * Si existe (por transform/filter/contain/etc), el panel debe posicionarse
+     * relativo a ese contenedor y no al viewport.
+     */
+    getFixedContainingBlock(element) {
+        let current = element.parentElement;
+        while (current) {
+            const styles = window.getComputedStyle(current);
+            const hasTransformContext = styles.transform !== 'none' ||
+                styles.perspective !== 'none' ||
+                styles.filter !== 'none' ||
+                (styles.backdropFilter && styles.backdropFilter !== 'none') ||
+                styles.contain.includes('paint') ||
+                styles.contain.includes('layout') ||
+                styles.willChange.includes('transform') ||
+                styles.willChange.includes('filter') ||
+                styles.willChange.includes('perspective');
+            if (hasTransformContext) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class AppButtonNgService {
+    buttonConfig = signal({});
+    constructor() {
+        // Effect para manejar automáticamente la rotación de mensajes
+        effect(() => {
+            const config = this.buttonConfig();
+            if (config.loading && config.loadingMessages && config.loadingMessages.length > 1) {
+                this.startMessageRotation();
+            }
+            else {
+                this.stopMessageRotation();
+            }
+        });
+    }
+    setButtonConfig(buttonConfig) {
+        this.buttonConfig.set(buttonConfig);
+    }
+    // Computed público para acceder al label dinámico
+    label = computed(() => {
+        const config = this.buttonConfig();
+        // Si está cargando y tiene mensajes de carga, rotar entre ellos
+        if (config.loading && config.loadingMessages && config.loadingMessages.length > 0) {
+            const messages = config.loadingMessages;
+            const index = this.messageIndex() % messages.length; // Wrap around
+            return messages[index];
+        }
+        // Si no está cargando, retornar el label normal
+        return config.label ? config.label : '';
+    });
+    //#region Loading Messages
+    messageIndex = signal(0);
+    intervalId;
+    startMessageRotation() {
+        if (this.intervalId)
+            return;
+        this.intervalId = setInterval(() => {
+            this.messageIndex.update(index => index + 1);
+        }, 6000);
+    }
+    stopMessageRotation() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = undefined;
+            this.messageIndex.set(0);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AppButtonNgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ButtonNgComponent {
+    appButtonNgService = inject(AppButtonNgService);
+    buttonConfig = model.required();
+    onClick = output();
+    constructor() {
+        effect(() => {
+            this.appButtonNgService.setButtonConfig(this.buttonConfig());
+        });
+    }
+    get label() {
+        return this.appButtonNgService.label();
+    }
+    onClickButton() {
+        if (this.buttonConfig().onClick) {
+            return;
+        }
+        this.onClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonNgComponent, isStandalone: true, selector: "lib-button-ng", inputs: { buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonConfig: "buttonConfigChange", onClick: "onClick" }, providers: [AppButtonNgService], ngImport: i0, template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'full-width-button': config.fullWidth,\r\n      'full-height-button': config.fullHeight,\r\n      'cursor-pointer': this.onClick\r\n    }\"\r\n    [class]=\"config.class ?? ''\"\r\n  >\r\n    <p-button\r\n      [label]=\"config.hasTemplate ? undefined : label\"\r\n      [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n      [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n      [loading]=\"config.loading || false\"\r\n      [disabled]=\"config.disabled || false\"\r\n      [rounded]=\"config.rounded || false\"\r\n      [raised]=\"config.raised || false\"\r\n      [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n      [badge]=\"config.badge\"\r\n      (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n      [size]=\"config?.size\"\r\n      pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n      [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n      [iconPos]=\"config?.iconPos ?? 'left'\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n        'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n        'no-hover-template': config.hasTemplate\r\n      }\"\r\n      [outlined]=\"config.outlined || false\"\r\n      [text]=\"config.text || false\"\r\n    >\r\n      @if (config.hasTemplate) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </p-button>\r\n  </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonNgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button-ng', imports: [
+                        ButtonModule,
+                        TooltipModule,
+                        CommonModule
+                    ], providers: [AppButtonNgService], template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'full-width-button': config.fullWidth,\r\n      'full-height-button': config.fullHeight,\r\n      'cursor-pointer': this.onClick\r\n    }\"\r\n    [class]=\"config.class ?? ''\"\r\n  >\r\n    <p-button\r\n      [label]=\"config.hasTemplate ? undefined : label\"\r\n      [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n      [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n      [loading]=\"config.loading || false\"\r\n      [disabled]=\"config.disabled || false\"\r\n      [rounded]=\"config.rounded || false\"\r\n      [raised]=\"config.raised || false\"\r\n      [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n      [badge]=\"config.badge\"\r\n      (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n      [size]=\"config?.size\"\r\n      pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n      [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n      [iconPos]=\"config?.iconPos ?? 'left'\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n        'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n        'no-hover-template': config.hasTemplate\r\n      }\"\r\n      [outlined]=\"config.outlined || false\"\r\n      [text]=\"config.text || false\"\r\n    >\r\n      @if (config.hasTemplate) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </p-button>\r\n  </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SpeedDialComponent {
+    mainButtonContainer;
+    speedDialConfig = input.required();
+    speedDialService = inject(SpeedDialService);
+    constructor() {
+        effect(() => {
+            this.speedDialService.setSpeedDialConfig(this.speedDialConfig());
+        });
+    }
+    get buttons() {
+        return this.speedDialService.buttons();
+    }
+    get overlayButtons() {
+        return this.speedDialService.overlayButtons();
+    }
+    get mainButton() {
+        return this.speedDialService.mainButton();
+    }
+    get isMenuOpen() {
+        return this.speedDialService.isMenuOpen();
+    }
+    get panelTop() {
+        return this.speedDialService.panelTop();
+    }
+    get panelLeft() {
+        return this.speedDialService.panelLeft();
+    }
+    get direction() {
+        return this.speedDialService.direction();
+    }
+    ngAfterViewInit() {
+        const hostElement = this.mainButtonContainer?.nativeElement;
+        if (!hostElement)
+            return;
+        this.speedDialService.setMainButtonHost(hostElement);
+    }
+    ngOnDestroy() {
+        this.speedDialService.destroy();
+    }
+    closeMenu() {
+        this.speedDialService.closeMenu();
+    }
+    onMainButtonClick(event) {
+        const target = event.target;
+        const anchor = target?.closest('button,[role="button"]');
+        this.speedDialService.toggleMenu(anchor ?? this.mainButtonContainer?.nativeElement);
+    }
+    stopPropagation(event) {
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SpeedDialComponent, isStandalone: true, selector: "lib-speed-dial", inputs: { speedDialConfig: { classPropertyName: "speedDialConfig", publicName: "speedDialConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [SpeedDialService], viewQueries: [{ propertyName: "mainButtonContainer", first: true, predicate: ["mainButtonContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #mainButtonContainer\r\n  class=\"speed-dial-main-button\"\r\n  [class.speed-dial-main-button--open]=\"isMenuOpen\"\r\n  (click)=\"onMainButtonClick($event)\"\r\n>\r\n  <lib-button-ng [buttonConfig]=\"mainButton\"></lib-button-ng>\r\n</div>\r\n\r\n@if (isMenuOpen) {\r\n  <div class=\"speed-dial-overlay\" (click)=\"closeMenu()\">\r\n    <div\r\n      class=\"speed-dial-panel bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg\"\r\n      [style.top]=\"panelTop\"\r\n      [style.left]=\"panelLeft\"\r\n      (click)=\"stopPropagation($event)\"\r\n      [ngClass]=\"{\r\n        'speed-dial-panel--top': direction === 'top',\r\n        'speed-dial-panel--bottom': direction === 'bottom',\r\n        'speed-dial-panel--left': direction === 'left',\r\n        'speed-dial-panel--right': direction === 'right'\r\n      }\"\r\n    >\r\n      @for (button of overlayButtons; track $index) {\r\n        <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".speed-dial-main-button{display:inline-flex}.speed-dial-main-button--open{position:relative;z-index:2147483647}.speed-dial-overlay{position:fixed;inset:0;z-index:2147483645}.speed-dial-panel{position:fixed;z-index:2147483646;display:flex;gap:.5rem;overflow:auto;padding:.75rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 30px #0f172a40}.speed-dial-panel--top{flex-direction:column;max-width:22rem;max-height:30rem;transform:translateY(-100%)}.speed-dial-panel--bottom{flex-direction:column;max-width:22rem;max-height:30rem}.speed-dial-panel--left{flex-direction:row;max-width:40rem;max-height:8rem;transform:translate(-100%)}.speed-dial-panel--right{flex-direction:row;max-width:40rem;max-height:8rem}:host-context(.dark) .speed-dial-panel{background:#111827}\n"], dependencies: [{ kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-speed-dial', imports: [ButtonNgComponent, CommonModule], providers: [SpeedDialService], template: "<div\r\n  #mainButtonContainer\r\n  class=\"speed-dial-main-button\"\r\n  [class.speed-dial-main-button--open]=\"isMenuOpen\"\r\n  (click)=\"onMainButtonClick($event)\"\r\n>\r\n  <lib-button-ng [buttonConfig]=\"mainButton\"></lib-button-ng>\r\n</div>\r\n\r\n@if (isMenuOpen) {\r\n  <div class=\"speed-dial-overlay\" (click)=\"closeMenu()\">\r\n    <div\r\n      class=\"speed-dial-panel bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg\"\r\n      [style.top]=\"panelTop\"\r\n      [style.left]=\"panelLeft\"\r\n      (click)=\"stopPropagation($event)\"\r\n      [ngClass]=\"{\r\n        'speed-dial-panel--top': direction === 'top',\r\n        'speed-dial-panel--bottom': direction === 'bottom',\r\n        'speed-dial-panel--left': direction === 'left',\r\n        'speed-dial-panel--right': direction === 'right'\r\n      }\"\r\n    >\r\n      @for (button of overlayButtons; track $index) {\r\n        <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".speed-dial-main-button{display:inline-flex}.speed-dial-main-button--open{position:relative;z-index:2147483647}.speed-dial-overlay{position:fixed;inset:0;z-index:2147483645}.speed-dial-panel{position:fixed;z-index:2147483646;display:flex;gap:.5rem;overflow:auto;padding:.75rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 30px #0f172a40}.speed-dial-panel--top{flex-direction:column;max-width:22rem;max-height:30rem;transform:translateY(-100%)}.speed-dial-panel--bottom{flex-direction:column;max-width:22rem;max-height:30rem}.speed-dial-panel--left{flex-direction:row;max-width:40rem;max-height:8rem;transform:translate(-100%)}.speed-dial-panel--right{flex-direction:row;max-width:40rem;max-height:8rem}:host-context(.dark) .speed-dial-panel{background:#111827}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mainButtonContainer: [{
+                type: ViewChild,
+                args: ['mainButtonContainer']
+            }] } });
+
+class KeyToDisplayNamePipe {
+    transform(key, keysNames) {
+        return keysNames?.[key] ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, isStandalone: true, name: "keyToDisplayName" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'keyToDisplayName'
+                }]
+        }] });
+
+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" }]
+        }] });
+
+// 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 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: () => [] });
+
+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({}));
+    _cellTableNgData = signal(undefined);
+    cellTableNgData = this._cellTableNgData.asReadonly();
+    setCellTableNgData(cellTableNgData) {
+        this._cellTableNgData.set(cellTableNgData);
+    }
+    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: () => [] });
+
+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-CQe3kn_e.mjs');
+        let configSelectedItems = config;
+        if (config) {
+            configSelectedItems = structuredClone(config);
+            delete configSelectedItems.lazyLoadingConfig;
+            const selectionTableConfig = {
+                ...(configSelectedItems.selectionTableConfig ?? {}),
+                showManagementConfig: false
+            };
+            const globalFilterConfig = {
+                ...(configSelectedItems.globalFilterConfig ?? {}),
+                advancedIdentifierFiltersConfig: {
+                    isEnabled: false
+                }
+            };
+            configSelectedItems.globalFilterConfig = globalFilterConfig;
+            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: this.config()?.labelsConfig?.exportExcelTooltip ?? '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: this.config()?.labelsConfig?.exportPdfTooltip ?? 'Exportar a PDF',
+                tooltipPosition: 'top'
+            }
+        };
+    });
+    refreshButton = computed(() => {
+        return {
+            label: '',
+            icon: 'fa-solid fa-refresh',
+            variant: 'text',
+            severity: 'info',
+            raised: true,
+            size: 'large',
+            onClick: () => {
+                this.refreshTable();
+            },
+            tooltipConfig: {
+                pTooltip: this.config()?.labelsConfig?.refreshTooltip ?? 'Refrescar',
+                tooltipPosition: 'top'
+            },
+            loading: this.isLoadingRefreshButton(),
+            disabled: this.isLoadingRefreshButton(),
+        };
+    });
+    refreshTable() {
+        if (this.refreshConfig()) {
+            this.refreshConfig()?.callback();
+        }
+    }
+    _config = signal(undefined);
+    config = this._config.asReadonly();
+    setConfig(value) {
+        this._config.set(value);
+    }
+    refreshConfig = computed(() => {
+        return this.config()?.refreshConfig;
+    });
+    enableRefreshButton = computed(() => {
+        return this.refreshConfig()?.isEnabled ?? false;
+    });
+    isLoadingRefreshButton = computed(() => {
+        return this.refreshConfig()?.isLoading ?? false;
+    });
+    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: () => [] });
+
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+class TableNgComponent {
+    tableNgService = inject(TableNgService);
+    tableNgEditService = inject(TableNgEditService);
+    dialogService = inject(CustomDialogService);
+    data = model.required();
+    totalRows = computed(() => this.data().length);
+    // Loading state management
+    loadingTimeout = null;
+    isLoading = model(false);
+    timeoutExpired = signal(false);
+    config = model();
+    editConfig = model();
+    footerConfig = model();
+    toolbarButtons = model([]);
+    toolbarSpeedDialButtons = 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();
+    outputCheckAll = output();
+    resetData() {
+        this.data.set([]);
+    }
+    advancedFiltersPerformed = [];
+    advancedFiltersValues = signal({});
+    dt;
+    fb = inject(NonNullableFormBuilder);
+    /**
+     * Config del control booleano en el header por columna.
+     * Si todas las celdas checkeables (INPUT + CHECKBOX|SWITCH) de esa columna son readonly,
+     * el control del header también debe ser readonly.
+     */
+    inlineConfigCheckHeader(columnKey, typeInput) {
+        return {
+            typeInput,
+            readonly: this.isColumnBulkReadonly(columnKey)
+        };
+    }
+    /**
+     * True si hay al menos una celda checkeable en la columna y todas son readonly.
+     */
+    isColumnBulkReadonly(columnKey) {
+        const rows = this.data().filter((row) => this.isInputCheckboxOrSwitchCell(row, columnKey));
+        if (rows.length === 0)
+            return false;
+        return rows.every((row) => row.rowDataInput?.[columnKey]?.readonly === true);
+    }
+    inlineConfigCheckHeaderCheckAll = {
+        typeInput: ETypeInput.SWITCH
+    };
+    /**
+     * Celda editable como `INPUT` cuyo control es CHECKBOX o SWITCH (según `rowDataInput`).
+     */
+    isInputCheckboxOrSwitchCell(item, columnKey) {
+        if (item.typeCell?.[columnKey] !== ETypeInput.INPUT)
+            return false;
+        const t = item.rowDataInput?.[columnKey]?.typeInput;
+        return t === ETypeInput.CHECKBOX || t === ETypeInput.SWITCH;
+    }
+    /**
+     * Estado del check "todos" del toolbar: true solo si hay al menos una celda
+     * INPUT + (CHECKBOX | SWITCH) y todas esas celdas (todas las columnas y filas) son truthy.
+     */
+    checkAllHeaderReflectValue() {
+        const columnKeys = this.config()?.keys ?? [];
+        let hasAnyCheckable = false;
+        for (const row of this.data()) {
+            for (const key of columnKeys) {
+                if (this.isInputCheckboxOrSwitchCell(row, key)) {
+                    hasAnyCheckable = true;
+                    if (!row.rowData?.[key]) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return hasAnyCheckable;
+    }
+    /**
+     * Toolbar: pone `value` en todas las celdas que cumplan INPUT + (CHECKBOX | SWITCH), en todas las columnas de `config.keys`.
+     */
+    checkAll(value) {
+        const columnKeys = this.config()?.keys ?? [];
+        this.data.update((rows) => rows.map((row) => {
+            let nextRowData = { ...row.rowData };
+            let changed = false;
+            for (const key of columnKeys) {
+                if (this.isInputCheckboxOrSwitchCell(row, key)) {
+                    nextRowData = { ...nextRowData, [key]: value };
+                    changed = true;
+                }
+            }
+            if (!changed)
+                return row;
+            return { ...row, rowData: nextRowData };
+        }));
+        this.outputChangeData.emit([...this.data()]);
+        this.outputCheckAll.emit(value);
+    }
+    //#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 ?? {});
+        // Si hay configuración de errores y estamos en modo edición por celda,
+        // mostramos las validaciones de inmediato.
+        effect(() => {
+            const editConfig = this.editConfig();
+            const rowErrorConfig = editConfig?.rowEditConfig?.rowErrorConfig;
+            if (editConfig?.isEnabled && editConfig?.type === 'cell' && (rowErrorConfig?.isEnabled ?? false)) {
+                this.setEnableErrors(true);
+            }
+        });
+        // Effect para sincronizar el config con el servicio cuando cambie
+        effect(() => {
+            const configValue = this.config();
+            if (configValue) {
+                this.tableNgService.setConfig(configValue);
+            }
+        });
+        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()]);
+        const cellTableNgData = this.editConfig()?.cellEditConfig?.defaultTableNgData;
+        if (cellTableNgData) {
+            this.tableNgEditService.setCellTableNgData(cellTableNgData);
+        }
+    }
+    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;
+    }
+    /**
+     * Refleja en el header si todas las filas tienen `true` en esa columna (solo lectura visual).
+     * Si hay mezcla o todo es false, devuelve false.
+     */
+    booleanColumnHeaderReflectValue(columnKey) {
+        const rows = this.data().filter((row) => this.isInputCheckboxOrSwitchCell(row, columnKey));
+        if (rows.length === 0)
+            return false;
+        return rows.every((row) => !!row.rowData?.[columnKey]);
+    }
+    /**
+     * Asigna el mismo booleano solo a filas cuya celda en esa columna sea INPUT + (CHECKBOX | SWITCH).
+     */
+    applyBulkBooleanToColumn(value, columnKey) {
+        this.data.update((rows) => rows.map((row) => {
+            if (!this.isInputCheckboxOrSwitchCell(row, columnKey))
+                return row;
+            return {
+                ...row,
+                rowData: {
+                    ...row.rowData,
+                    [columnKey]: value
+                }
+            };
+        }));
+    }
+    handleCheckValue() {
+        this.outputChangeData.emit([...this.data()]);
+    }
+    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
+    isCustomColumnFilterEnabled(filterConfig) {
+        return filterConfig?.customColumnFilterConfig?.isEnabled ?? false;
+    }
+    inlineFormChanges(inlineValue, filter, typeInput, key) {
+        const lazyLoadingConfig = this.config()?.lazyLoadingConfig;
+        if (typeInput === ETypeInput.MULTISELECT) {
+            const options = Array.isArray(inlineValue)
+                ? inlineValue.filter((item) => PrimeNgUtil.isPrimeNgSelection(item))
+                : [];
+            const arrayValue = options.length > 0
+                ? options.map((data) => lazyLoadingConfig?.isEnabled ? data.code : data.name)
+                : undefined;
+            if (Array.isArray(arrayValue) && arrayValue.length === 0) {
+                if (key) {
+                    this.advancedFiltersValues.update((prev) => {
+                        const { [key]: _value, ...rest } = prev;
+                        return { ...rest };
+                    });
+                }
+                filter(null);
+                return;
+            }
+            if (options.length > 0) {
+                if (key) {
+                    this.advancedFiltersValues.update((prev) => ({ ...prev, [key]: options }));
+                }
+                filter(arrayValue);
+            }
+            return;
+        }
+        let filterValue = inlineValue;
+        if (typeInput === ETypeInput.SELECT &&
+            inlineValue &&
+            typeof inlineValue === 'object' &&
+            'code' in inlineValue) {
+            filterValue = inlineValue.code;
+        }
+        const isEmpty = filterValue === '' || filterValue === null || filterValue === undefined;
+        if (key) {
+            if (isEmpty) {
+                this.advancedFiltersValues.update((prev) => {
+                    const { [key]: _value, ...rest } = prev;
+                    return { ...rest };
+                });
+            }
+            else {
+                this.advancedFiltersValues.update((prev) => ({ ...prev, [key]: filterValue }));
+            }
+        }
+        filter(isEmpty ? null : filterValue);
+    }
+    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 = {};
+        if (event.first) {
+            metaPagination.skip = event.first;
+        }
+        if (event.rows) {
+            metaPagination.limit = event.rows;
+        }
+        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: isDisabled ? 'No hay datos para agregar' : 'Agregar registro',
+                tooltipPosition: 'top'
+            },
+            onClick: () => {
+                this.addRow();
+            },
+            disabled: isDisabled
+        };
+        return button;
+    });
+    addRow() {
+        const editConfig = this.editConfig();
+        const templateRow = this.tableNgEditService.cellTableNgData();
+        // Si es modo cell y hay defaultTableNgData configurado, agregar la fila directamente
+        if (editConfig?.type === 'cell' && templateRow) {
+            const id = `${(this.totalRows() + 1).toString()}-${generateId()}`;
+            const rowDataId = `${id}-${generateId()}`;
+            // templateRow es siempre la misma referencia (defaultTableNgData): hay que clonar para que
+            // cada fila nueva sea independiente y no comparta el mismo objeto con las demás.
+            const newRow = {
+                ...templateRow,
+                id,
+                rowData: { ...structuredClone(templateRow.rowData), id: rowDataId }
+            };
+            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;
+    });
+    get enableRefreshButton() {
+        return this.tableNgService.enableRefreshButton();
+    }
+    get refreshButton() {
+        return this.tableNgService.refreshButton();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarSpeedDialButtons: { classPropertyName: "toolbarSpeedDialButtons", publicName: "toolbarSpeedDialButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", isLoading: "isLoadingChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", toolbarSpeedDialButtons: "toolbarSpeedDialButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", outputCheckAll: "outputCheckAll", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? lazyLoadingConfig!.totalRecords\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @let columnInputConfig = inputConfig![column.field]!;\r\n              @if (columnInputConfig.type === ETypeInput.SWITCH || columnInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, columnInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![column.field]!;\r\n            <p-columnFilter [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @let keyInputConfig = inputConfig![key]!;\r\n              @if (keyInputConfig.type === ETypeInput.SWITCH || keyInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, keyInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![key]!;\r\n            <p-columnFilter [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ columnFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ keyFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[column.field] && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ columnFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[key] && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ keyFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-10 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }, { kind: "component", type: SpeedDialComponent, selector: "lib-speed-dial", inputs: ["speedDialConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-table-ng', imports: [
+                        CommonModule,
+                        TableModule,
+                        ButtonNgComponent,
+                        ToolbarNgComponent,
+                        FormComponent,
+                        KeyToDisplayNamePipe,
+                        FormsModule,
+                        InlineInputComponent,
+                        BadgeNgComponent,
+                        HttpMessageComponent,
+                        SpeedDialComponent
+                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n@let inputConfig = config()?.inputConfig;\r\n@let hasCheckRows = config()?.hasCheckRows ?? false;\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (hasCheckRows) {\r\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n        <lib-inline-input\r\n          [ngModel]=\"checkAllHeaderReflectValue()\"\r\n          (ngModelChange)=\"checkAll($event)\"\r\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\r\n        </lib-inline-input>\r\n    </div>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarSpeedDialButtons().length > 0) {\r\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\r\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\r\n      }\r\n      }\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n      @if (enableRefreshButton) {\r\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? lazyLoadingConfig!.totalRecords\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[column.field]?.isEnabled) {\r\n              @let columnInputConfig = inputConfig![column.field]!;\r\n              @if (columnInputConfig.type === ETypeInput.SWITCH || columnInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\r\n                    [config]=\"inlineConfigCheckHeader(column.field, columnInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![column.field]!;\r\n            <p-columnFilter [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            \r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if (inputConfig?.[key]?.isEnabled) {\r\n              @let keyInputConfig = inputConfig![key]!;\r\n              @if (keyInputConfig.type === ETypeInput.SWITCH || keyInputConfig.type === ETypeInput.CHECKBOX) {\r\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\r\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\r\n                    [config]=\"inlineConfigCheckHeader(key, keyInputConfig.type)\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              }\r\n            }\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            @let columnFilterConfig = filterConfigByKey![key]!;\r\n            <p-columnFilter [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"columnFilterConfig.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"columnFilterConfig.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"columnFilterConfig.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"columnFilterConfig.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"columnFilterConfig.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (isCustomColumnFilterEnabled(columnFilterConfig)) {\r\n              <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\">\r\n                  <lib-inline-input\r\n                    [ngModel]=\"value\"\r\n                    (outputValue)=\"inlineFormChanges($event, filter, columnFilterConfig.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [config]=\"columnFilterConfig.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[column.field]\r\n                  | number: (\r\n                    inlineControls?.[column.field]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[column.field]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field]?.name ?? item.rowData[column.field]?.value ?? '' }}\r\n              </div>\r\n              }\r\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[column.field]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ columnFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{\r\n                  item.rowData[key]\r\n                  | number: (\r\n                    inlineControls?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                    inlineControls?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                      ? '1.0-0'\r\n                      : '1.2-2'\r\n                  )\r\n                }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SELECT) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[key]?.name ?? item.rowData[key]?.value ?? '' }}\r\n              </div>\r\n              } @else if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n              <div class=\"text-center\">\r\n                @if (item.rowData[key]) {\r\n                <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                } @else {\r\n                <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                }\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[key]?.name) {\r\n              {{ item.rowData[key]?.name }}\r\n              } @else {\r\n              {{ item.rowData[key] }}\r\n              }\r\n              }\r\n            </ng-template>\r\n          </p-cellEditor>\r\n\r\n          @if (rowErrorConfig; as errorConfig) {\r\n          @if (errorConfig.isEnabled && enableErrors && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n          <span class=\"text-red-500 italic text-xs\">\r\n            {{ keyFieldError.message }}\r\n          </span>\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[column.field]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[column.field] && errorConfig.fieldErrors[item.id]?.[column.field]; as columnFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ columnFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\r\n                <div class=\"text-center\">\r\n                  @if (item.rowData[key]) {\r\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\r\n                  } @else {\r\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\r\n                  }\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig; as errorConfig) {\r\n            @if (errorConfig.isEnabled && enableErrors && !rowFieldsHasValue()[key] && errorConfig.fieldErrors[item.id]?.[key]; as keyFieldError) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ keyFieldError.message }}</span>\r\n            }\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @case (ETypeInput.INPUT) {\r\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\r\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\r\n            (outputValue)=\"handleCheckValue()\"\r\n            >\r\n          </lib-inline-input>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{\r\n              item.rowData[key]\r\n              | number: (\r\n                item.rowDataInput?.[key]?.numberConfig?.minFractionDigits === 0 &&\r\n                item.rowDataInput?.[key]?.numberConfig?.maxFractionDigits === 0\r\n                  ? '1.0-0'\r\n                  : '1.2-2'\r\n              )\r\n            }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"mt-10 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dt: [{
+                type: ViewChild,
+                args: ['dt']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { static: true }]
+            }] } });
+
+class SpeedDialNgService {
+    constructor() { }
+    _config = signal({});
+    config = this._config.asReadonly();
+    items = computed(() => this.config().items);
+    buttonProps = computed(() => this.config().buttonProps ?? { severity: 'primary', rounded: true });
+    tooltipOptions = computed(() => this.config().tooltipOptions ?? { tooltipPosition: 'top' });
+    style = computed(() => this.config().style ?? {});
+    direction = computed(() => this.config().direction ?? 'down');
+    setConfig(value) {
+        this._config.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class SpeedDialNgComponent {
+    speedDialNgService = inject(SpeedDialNgService);
+    configInput = input.required();
+    constructor() {
+    }
+    ngOnInit() {
+        this.speedDialNgService.setConfig(this.configInput());
+    }
+    get config() {
+        return this.speedDialNgService.config();
+    }
+    get items() {
+        return this.speedDialNgService.items();
+    }
+    get buttonProps() {
+        return this.speedDialNgService.buttonProps();
+    }
+    get tooltipOptions() {
+        return this.speedDialNgService.tooltipOptions();
+    }
+    get style() {
+        return this.speedDialNgService.style();
+    }
+    get direction() {
+        return this.speedDialNgService.direction();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: SpeedDialNgComponent, isStandalone: true, selector: "lib-speed-dial-ng", inputs: { configInput: { classPropertyName: "configInput", publicName: "configInput", isSignal: true, isRequired: true, transformFunction: null } }, providers: [SpeedDialNgService], ngImport: i0, template: "\r\n<p-speeddial \r\n[model]=\"items\" \r\ndirection=\"up\" \r\n[style]=\"style\" \r\n[buttonProps]=\"buttonProps\" \r\n[tooltipOptions]=\"tooltipOptions\" \r\n[direction]=\"direction\"\r\n/>", styles: [""], dependencies: [{ kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i1$5.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SpeedDialNgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-speed-dial-ng', imports: [SpeedDialModule], providers: [SpeedDialNgService], template: "\r\n<p-speeddial \r\n[model]=\"items\" \r\ndirection=\"up\" \r\n[style]=\"style\" \r\n[buttonProps]=\"buttonProps\" \r\n[tooltipOptions]=\"tooltipOptions\" \r\n[direction]=\"direction\"\r\n/>" }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of lib-components
+
+NPM TOKEN:
+4f5f941cb6703a2bea326507bd5098aa7dd8224ef4d9b434f6209c73855bf7ac
+8b61ac2dab0cf90c13878339c755b09f868b34906ad196a1138433f76f41feb4
+37b8f0500846352a33a9d1e2a8504e8a4332cd035a3819d9dc4b2dcdf557c3f0
+31f1ccdf0a47736bd3851647d485385323328542c49de9d95498d875e3977f5e
+de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AminatedContainerComponent as A, BaseDialogComponent as B, DisabledContainerComponent as D, ETypeInput as E, FormComponent as F, HttpMessageComponent as H, InlineInputComponent as I, LibComponentsService as L, SpeedDialComponent as S, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b, SpeedDialService as c, SpeedDialNgComponent as d };
+//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-B540TRU7.mjs.map