ln-20-lib-components 0.0.11 → 0.0.12

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

@@ -1,11 +1,51 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Output, Input, input, signal, effect, computed, inject, model, output } from '@angular/core';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i2 from 'primeng/tooltip';
+import { Injectable, Component, model, input, computed, output, forwardRef, ChangeDetectionStrategy, effect, signal, ContentChildren, inject, Pipe, ContentChild, ViewChild } from '@angular/core';
+import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, NonNullableFormBuilder, FormGroup } from '@angular/forms';
+import { switchMap, debounceTime, filter, map, distinctUntilChanged } 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';
 
 class LibComponentsService {
     constructor() { }
@@ -36,62 +76,591 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
   ` }]
         }] });
 
-class ButtonComponent {
-    variant = 'primary';
-    disabled = false;
-    onClick = new EventEmitter();
+var ETypeInput;
+(function (ETypeInput) {
+    ETypeInput["TEXT"] = "text";
+    ETypeInput["PASSWORD"] = "password";
+    ETypeInput["EMAIL"] = "email";
+    ETypeInput["NUMBER"] = "number";
+    ETypeInput["DATE"] = "date";
+    ETypeInput["TIME"] = "time";
+    ETypeInput["DATETIME_LOCAL"] = "datetime-local";
+    ETypeInput["SEARCH"] = "search";
+    ETypeInput["TEL"] = "tel";
+    ETypeInput["URL"] = "url";
+    ETypeInput["COLOR"] = "color";
+    ETypeInput["MONTH"] = "month";
+    ETypeInput["WEEK"] = "week";
+    ETypeInput["FILE"] = "file";
+    ETypeInput["CHECKBOX"] = "checkbox";
+    ETypeInput["RADIO"] = "radio";
+    ETypeInput["RANGE"] = "range";
+    ETypeInput["HIDDEN"] = "hidden";
+    ETypeInput["TEXTAREA"] = "textarea";
+    ETypeInput["SELECT"] = "select";
+    ETypeInput["MULTISELECT"] = "multiselect";
+    ETypeInput["AUTOCOMPLETE"] = "autocomplete";
+    ETypeInput["SWITCH"] = "switch";
+    ETypeInput["CALENDAR"] = "calendar";
+    ETypeInput["DROPDOWN"] = "dropdown";
+    ETypeInput["CHIPS"] = "chips";
+    ETypeInput["TOGGLE"] = "toggle";
+    ETypeInput["OTP"] = "otp";
+    ETypeInput["CURRENCY"] = "currency";
+    ETypeInput["KNOB"] = "knob";
+    ETypeInput["BADGE"] = "badge";
+    ETypeInput["DECIMAL"] = "decimal";
+    ETypeInput["IMAGE"] = "image";
+    ETypeInput["COMPONENT"] = "component";
+})(ETypeInput || (ETypeInput = {}));
+
+class DisabledContainerComponent {
+    disabled = model(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DisabledContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: DisabledContainerComponent, isStandalone: true, selector: "app-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: 'app-disabled-container', imports: [], template: "<fieldset [disabled]=\"disabled()\" class=\"disabled-container\">\r\n  <ng-content></ng-content>\r\n</fieldset>\r\n", styles: [".disabled-container{border:none;margin:0;padding:0;min-width:0}.disabled-container:disabled{opacity:.6;cursor:not-allowed}.disabled-container:disabled *{pointer-events:none}\n"] }]
+        }] });
+
+class CustomInputComponent {
+    controlData = input.required();
+    controlUpperName = computed(() => this.controlData().controlName.toLocaleUpperCase());
+    showPassword = false;
+    output = output();
+    onTouched = () => { };
+    onChange = (_value) => { };
+    constructor() { }
+    writeValue(value) {
+        if (value !== this.controlData().control.value) {
+            this.controlData().control.setValue(value, { emitEvent: false });
+        }
+    }
+    get showLabel() {
+        return !this.controlData().hideLabel;
+    }
+    get inputTypesEnum() {
+        return ETypeInput;
+    }
+    onCheckboxChange(event, control) {
+        const input = event.target;
+        const isChecked = input.checked;
+        control.setValue(isChecked);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // setDisabledState(isDisabled: boolean): void {
+    //   if (isDisabled) {
+    //     this.controlData().control.disable()
+    //   } else {
+    //     this.controlData().control.enable()
+    //   }
+    // }
+    generateUniqueId(baseString) {
+        const timestamp = new Date().getTime();
+        const random = Math.random().toString(36).substring(2, 8);
+        return `${baseString}-${timestamp}-${random}`;
+    }
+    togglePasswordVisibility() {
+        this.showPassword = !this.showPassword;
+    }
+    onSelectChange() {
+        this.output.emit(this.controlData());
+    }
+    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: "app-custom-input", inputs: { controlData: { classPropertyName: "controlData", publicName: "controlData", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { output: "output" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CustomInputComponent),
+                multi: true
+            }], ngImport: i0, template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <app-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) {\r\n    <input \r\n    [formControl]=\"localControl\" \r\n    (blur)=\"onTouched()\" \r\n    pInputText \r\n    [id]=\"generateUniqueId(name)\" \r\n    [name]=\"name\"\r\n    [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" \r\n      autocomplete=\"email\" \r\n      autocorrect=\"on\" \r\n      autocapitalize=\"on\" \r\n      spellcheck=\"true\" \r\n      [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <app-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </app-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    @case (inputTypesEnum.PASSWORD) {\r\n    <div class=\"relative\">\r\n      <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n        autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\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      <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.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </app-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' + 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 ' + 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 .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 .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 .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 .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 .dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext,:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6}\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: "app-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: 'app-custom-input', imports: [
+                        ReactiveFormsModule,
+                        IftaLabelModule,
+                        NgClass,
+                        DatePickerModule,
+                        CheckboxModule,
+                        MultiSelectModule,
+                        SelectModule,
+                        ToggleButtonModule,
+                        InputOtpModule,
+                        ToggleSwitchModule,
+                        InputNumberModule,
+                        TextareaModule,
+                        DisabledContainerComponent,
+                        TooltipModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CustomInputComponent),
+                            multi: true
+                        }], template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <app-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) {\r\n    <input \r\n    [formControl]=\"localControl\" \r\n    (blur)=\"onTouched()\" \r\n    pInputText \r\n    [id]=\"generateUniqueId(name)\" \r\n    [name]=\"name\"\r\n    [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" \r\n      autocomplete=\"email\" \r\n      autocorrect=\"on\" \r\n      autocapitalize=\"on\" \r\n      spellcheck=\"true\" \r\n      [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <app-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </app-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    @case (inputTypesEnum.PASSWORD) {\r\n    <div class=\"relative\">\r\n      <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n        autocomplete=\"new-password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"\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      <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.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [formControl]=\"localControl\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </app-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && (localControl.dirty || localControl.touched)) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' + 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 ' + 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 .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 .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 .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 .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 .dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext,:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6}\n"] }]
+        }], ctorParameters: () => [] });
+
+class FormChildComponent {
+    controlsData = input.required();
+    formGroup = input.required();
+    formSubmit = output();
     constructor() {
-        console.log('ButtonComponent constructor');
     }
-    ngOnInit() {
-        console.log('ButtonComponent ngOnInit');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { variant: "variant", disabled: "disabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <button 
-      [class]="'lib-button ' + (variant || 'primary')" 
-      [disabled]="disabled" 
-      (click)="onClick.emit()">
-      <ng-content></ng-content>
-    </button>
-  `, isInline: true, styles: [".lib-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:opacity .2s ease}.lib-button.primary{background-color:#007bff;color:#fff}.lib-button.primary:hover:not(:disabled){background-color:#0056b3}.lib-button.secondary{background-color:#6c757d;color:#fff}.lib-button.secondary:hover:not(:disabled){background-color:#545b62}.lib-button:disabled{opacity:.6;cursor:not-allowed}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ButtonComponent, decorators: [{
+    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: "app-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      <app-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      </app-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: "app-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-button', standalone: true, imports: [], template: `
-    <button 
-      [class]="'lib-button ' + (variant || 'primary')" 
-      [disabled]="disabled" 
-      (click)="onClick.emit()">
-      <ng-content></ng-content>
-    </button>
-  `, styles: [".lib-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:opacity .2s ease}.lib-button.primary{background-color:#007bff;color:#fff}.lib-button.primary:hover:not(:disabled){background-color:#0056b3}.lib-button.secondary{background-color:#6c757d;color:#fff}.lib-button.secondary:hover:not(:disabled){background-color:#545b62}.lib-button:disabled{opacity:.6;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], onClick: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'app-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      <app-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      </app-custom-input>\r\n    </div>\r\n  }\r\n</form>\r\n" }]
+        }], ctorParameters: () => [] });
 
-class EmptyMessageComponent {
-    message = input('NO DATA AVAILABLE');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: EmptyMessageComponent, isStandalone: true, selector: "lib-empty-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="empty-message">
-      <p class="empty-message-text">{{ message() }}</p>
-    </div>
-  `, isInline: true, styles: [".empty-message{display:flex;align-items:center;justify-content:center;padding:2rem}.empty-message-text{text-align:center;color:#6c757d;margin:0;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+class HttpMessageComponent {
+    httpMessage = model();
+    clearMessage() {
+        this.httpMessage.set(undefined);
+    }
+    get isError() {
+        const message = this.httpMessage();
+        return message?.type === 'error';
+    }
+    get isSuccess() {
+        const message = this.httpMessage();
+        return message?.type === 'success';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HttpMessageComponent, isStandalone: true, selector: "app-http-message", inputs: { httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { httpMessage: "httpMessageChange" }, ngImport: i0, template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EmptyMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-empty-message', standalone: true, imports: [CommonModule], template: `
-    <div class="empty-message">
-      <p class="empty-message-text">{{ message() }}</p>
-    </div>
-  `, styles: [".empty-message{display:flex;align-items:center;justify-content:center;padding:2rem}.empty-message-text{text-align:center;color:#6c757d;margin:0;font-size:1rem}\n"] }]
+            args: [{ selector: 'app-http-message', imports: [], template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n" }]
         }] });
 
+class FormComponent {
+    formGroup = model.required();
+    controls = input.required();
+    formConfig = input();
+    httpMessage = model();
+    formSubmit = output();
+    formChanges = output();
+    formChangesDebounced = output();
+    constructor() {
+        effect(() => {
+            const controls = this.controls();
+            const controlsNames = this.controls().map((controlConfig) => controlConfig.controlName);
+            const controlsToDelete = Object.keys(this.formGroup().controls).filter(control => !controlsNames.includes(control));
+            controls.forEach((controlData) => {
+                this.formGroup.update((formGroup) => {
+                    if (formGroup.contains(controlData.controlName)) {
+                        formGroup.setControl(controlData.controlName, controlData.control);
+                    }
+                    else {
+                        formGroup.addControl(controlData.controlName, controlData.control);
+                    }
+                    controlsToDelete.forEach(controlName => {
+                        formGroup.removeControl(controlName);
+                    });
+                    return formGroup;
+                });
+            });
+        });
+        effect(() => {
+            const controlsDataTypeSelect = this.controls().filter((controlData) => controlData.typeInput === ETypeInput.SELECT);
+            controlsDataTypeSelect.forEach((controlData) => {
+                const control = this.formGroup().get(controlData.controlName);
+                const controlValue = control?.value;
+                if (controlValue) {
+                    const options = controlData.selectConfig?.options ?? [];
+                    const optionSelected = options.find((option) => {
+                        return option.code === controlValue.code;
+                    });
+                    if (optionSelected) {
+                        control?.setValue(optionSelected);
+                    }
+                }
+            });
+        });
+        effect(() => {
+            this.formGroup().valueChanges.subscribe(() => {
+                this.formChanges.emit(this.formGroup());
+            });
+        });
+        const fg$ = toObservable(this.formGroup);
+        fg$.pipe(switchMap((fg) => fg.valueChanges.pipe(debounceTime(650), filter(() => this.anyInteracted(fg)), map(() => fg))), takeUntilDestroyed())
+            .subscribe(() => this.formChangesDebounced.emit(this.formGroup()));
+    }
+    anyInteracted(formGroup) {
+        return Object.values(formGroup.controls).some(control => control.touched || control.dirty);
+    }
+    submit(formGroup) {
+        this.formSubmit.emit(formGroup);
+    }
+    clearHttpMessage() {
+        this.httpMessage.set(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: FormComponent, isStandalone: true, selector: "app-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  <app-form-child [controlsData]=\"controls()\" [formGroup]=\"formGroup()\" (formSubmit)=\"submit($event)\">\r\n  </app-form-child>\r\n  @if (httpMessage()) {\r\n  <app-http-message [(httpMessage)]=\"httpMessage\"></app-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: "app-form-child", inputs: ["controlsData", "formGroup"], outputs: ["formSubmit"] }, { kind: "component", type: HttpMessageComponent, selector: "app-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: 'app-form', imports: [
+                        ReactiveFormsModule,
+                        FormChildComponent,
+                        HttpMessageComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full p-2 rounded-lg\" [style.backgroundColor]=\"formConfig()?.backgroundColor || 'transparent'\">\r\n  <app-form-child [controlsData]=\"controls()\" [formGroup]=\"formGroup()\" (formSubmit)=\"submit($event)\">\r\n  </app-form-child>\r\n  @if (httpMessage()) {\r\n  <app-http-message [(httpMessage)]=\"httpMessage\"></app-http-message>\r\n  }\r\n</div>" }]
+        }], ctorParameters: () => [] });
+
+class InlineInputComponent {
+    config = input({ typeInput: ETypeInput.TEXT });
+    value = model(null);
+    outputValue = output();
+    outputBlur = output();
+    outputDebounced = output();
+    // Capturar templates proyectados desde el componente padre
+    templates;
+    // Para el manejo de chips
+    chips = [];
+    currentInput = '';
+    showDuplicateMessage = false;
+    duplicateChips = [];
+    duplicateMessageTimer = null;
+    constructor() {
+        effect(() => {
+            this.outputValue.emit(this.value());
+        });
+        const value$ = toObservable(this.value);
+        value$
+            .pipe(debounceTime(300), // <- adjust ms here
+        distinctUntilChanged(), // avoid repeats for same value
+        takeUntilDestroyed() // auto-cleanup on destroy
+        )
+            .subscribe(v => this.outputDebounced.emit(v));
+        effect(() => {
+            this.valueSelect.update((_prev) => {
+                const options = this.config()?.selectConfig?.options;
+                const currentValue = this.value();
+                if (this.isSelection(currentValue))
+                    return currentValue;
+                if (currentValue === null || currentValue === undefined)
+                    return undefined;
+                return options?.find(option => option.code === currentValue);
+            });
+        });
+    }
+    ngOnInit() {
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value);
+        // Si es tipo CHIPS, inicializar los chips desde el valor
+        if (this.type === ETypeInput.CHIPS && typeof value === 'string') {
+            this.chips = value ? value.split(' ').filter(chip => chip.trim() !== '') : [];
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onChangeValue(value) {
+        this.value.set(value);
+        this.onChange(value);
+    }
+    onBlur() {
+        this.onTouched();
+        this.outputBlur.emit(this.value());
+    }
+    /**
+     * Maneja eventos de teclado para prevenir la navegación de PrimeNG Table
+     * cuando se usan las flechas izquierda/derecha dentro del input
+     */
+    onKeyDown(event) {
+        // Verificar si son teclas de flecha izquierda o derecha
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            // Detener la propagación del evento hacia el table
+            event.stopPropagation();
+        }
+    }
+    isSelection(value) {
+        return !!value && typeof value === 'object' && 'code' in value && 'name' in value;
+    }
+    valueSelect = signal(undefined);
+    setValueSelect(value) {
+        this.valueSelect.set(value);
+    }
+    get type() {
+        return this.config()?.typeInput ?? ETypeInput.TEXT;
+    }
+    get ETypeInput() {
+        return ETypeInput;
+    }
+    get duplicatesText() {
+        return this.duplicateChips.join(', ');
+    }
+    get currency() {
+        return this.config()?.currencyConfig?.currency ?? 'COP';
+    }
+    get locale() {
+        return this.config()?.currencyConfig?.locale ?? 'es-CO';
+    }
+    get minFractionDigits() {
+        return this.config()?.currencyConfig?.minFractionDigits ?? 2;
+    }
+    get maxFractionDigits() {
+        return this.config()?.currencyConfig?.maxFractionDigits ?? 2;
+    }
+    knobValueInput = computed(() => {
+        let response = this.value();
+        const knobConfig = this.config()?.knobConfig ?? { min: 0, max: 100, step: 1 };
+        response = parseInt(this.value()) ?? 0;
+        if (response < (knobConfig?.min ?? 0)) {
+            response = knobConfig.min ?? 0;
+        }
+        if (response > (knobConfig?.max ?? 100)) {
+            response = knobConfig.max ?? 100;
+        }
+        return response;
+    });
+    knobValueTemplate = computed(() => {
+        return this.config()?.knobConfig?.valueTemplate ?? '';
+    });
+    // Métodos para manejo de chips
+    onChipInputChange(event) {
+        const target = event.target;
+        this.currentInput = target.value;
+    }
+    onChipKeydown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.addChip();
+        }
+        else if (event.key === 'Backspace' && this.currentInput === '' && this.chips.length > 0) {
+            // Si no hay texto y hay chips, eliminar el último chip
+            this.removeChip(this.chips.length - 1);
+        }
+        // No interceptar las flechas aquí ya que se maneja en onKeyDown
+    }
+    onChipPaste(event) {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        this.processPastedText(pastedText);
+    }
+    addChip() {
+        const trimmedValue = this.currentInput.trim();
+        if (trimmedValue) {
+            if (this.chips.includes(trimmedValue)) {
+                // Mostrar mensaje de duplicado con el chip específico
+                this.duplicateChips = [trimmedValue];
+                this.showDuplicateAlert();
+            }
+            else {
+                this.chips.push(trimmedValue);
+                this.currentInput = '';
+                this.updateChipsValue();
+                this.hideDuplicateAlert();
+            }
+        }
+    }
+    removeChip(index) {
+        this.chips.splice(index, 1);
+        this.updateChipsValue();
+    }
+    updateChipsValue() {
+        const chipsValue = this.chips.join(' ');
+        this.value.set(chipsValue);
+        this.onChange(chipsValue);
+    }
+    showDuplicateAlert() {
+        this.showDuplicateMessage = true;
+        // Limpiar timer anterior si existe
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+        }
+        // Ocultar mensaje después de 3 segundos
+        this.duplicateMessageTimer = setTimeout(() => {
+            this.hideDuplicateAlert();
+        }, 3000);
+    }
+    hideDuplicateAlert() {
+        this.showDuplicateMessage = false;
+        this.duplicateChips = [];
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+            this.duplicateMessageTimer = null;
+        }
+    }
+    processPastedText(text) {
+        // Dividir el texto por espacios y filtrar elementos vacíos
+        const newChips = text
+            .split(/\s+/) // Dividir por uno o más espacios
+            .map(chip => chip.trim()) // Limpiar espacios en cada elemento
+            .filter(chip => chip !== ''); // Filtrar elementos vacíos
+        const foundDuplicates = [];
+        let addedChips = 0;
+        // Agregar cada chip nuevo y recopilar duplicados
+        newChips.forEach(chipText => {
+            if (!this.chips.includes(chipText)) {
+                this.chips.push(chipText);
+                addedChips++;
+            }
+            else {
+                // Solo agregar a duplicados si no está ya en la lista
+                if (!foundDuplicates.includes(chipText)) {
+                    foundDuplicates.push(chipText);
+                }
+            }
+        });
+        // Limpiar el input actual
+        this.currentInput = '';
+        // Actualizar el valor si se agregaron chips
+        if (addedChips > 0) {
+            this.updateChipsValue();
+        }
+        // Mostrar alerta si hubo duplicados
+        if (foundDuplicates.length > 0) {
+            this.duplicateChips = foundDuplicates;
+            this.showDuplicateAlert();
+        }
+        else {
+            this.hideDuplicateAlert();
+        }
+    }
+    /**
+     * Método público para establecer chips desde un array externo
+     * @param chipsArray Array de strings que representan las chips
+     */
+    setChipsFromArray(chipsArray) {
+        if (!Array.isArray(chipsArray)) {
+            console.warn('setChipsFromArray: El parámetro debe ser un array de strings');
+            return;
+        }
+        // Filtrar elementos válidos (strings no vacíos)
+        const validChips = chipsArray
+            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
+            .map(chip => chip.trim());
+        // Actualizar el array de chips
+        this.chips = [...validChips];
+        // Limpiar el input actual
+        this.currentInput = '';
+        // Actualizar el valor del componente
+        this.updateChipsValue();
+        // Ocultar cualquier mensaje de duplicado
+        this.hideDuplicateAlert();
+    }
+    /**
+     * Método público para obtener las chips actuales como array
+     * @returns Array de strings con las chips actuales
+     */
+    getChipsAsArray() {
+        return [...this.chips];
+    }
+    /**
+     * Método público para limpiar todas las chips
+     */
+    clearAllChips() {
+        this.chips = [];
+        this.currentInput = '';
+        this.updateChipsValue();
+        this.hideDuplicateAlert();
+    }
+    /**
+     * Método público para agregar múltiples chips desde un array
+     * Evita duplicados y muestra mensajes de alerta si es necesario
+     * @param chipsArray Array de strings a agregar
+     */
+    addChipsFromArray(chipsArray) {
+        if (!Array.isArray(chipsArray)) {
+            console.warn('addChipsFromArray: El parámetro debe ser un array de strings');
+            return;
+        }
+        // Filtrar elementos válidos
+        const validChips = chipsArray
+            .filter(chip => typeof chip === 'string' && chip.trim() !== '')
+            .map(chip => chip.trim());
+        const foundDuplicates = [];
+        let addedChips = 0;
+        // Agregar cada chip nuevo y recopilar duplicados
+        validChips.forEach(chipText => {
+            if (!this.chips.includes(chipText)) {
+                this.chips.push(chipText);
+                addedChips++;
+            }
+            else {
+                // Solo agregar a duplicados si no está ya en la lista
+                if (!foundDuplicates.includes(chipText)) {
+                    foundDuplicates.push(chipText);
+                }
+            }
+        });
+        // Actualizar el valor si se agregaron chips
+        if (addedChips > 0) {
+            this.updateChipsValue();
+        }
+        // Mostrar alerta si hubo duplicados
+        if (foundDuplicates.length > 0) {
+            this.duplicateChips = foundDuplicates;
+            this.showDuplicateAlert();
+        }
+        else {
+            this.hideDuplicateAlert();
+        }
+    }
+    // Limpiar timer al destruir el componente
+    ngOnDestroy() {
+        if (this.duplicateMessageTimer) {
+            clearTimeout(this.duplicateMessageTimer);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InlineInputComponent, isStandalone: true, selector: "app-inline-input", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", outputValue: "outputValue", outputBlur: "outputBlur", outputDebounced: "outputDebounced" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InlineInputComponent),
+                multi: true
+            }
+        ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n  [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n  @for (template of templates; track $index) {\r\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n  <div\r\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n    [class.border-red-500]=\"showDuplicateMessage\">\r\n    @for (chip of chips; track $index) {\r\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n    }\r\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n  </div>\r\n  @if (showDuplicateMessage) {\r\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n    <span>\r\n      @if (duplicateChips.length === 1) {\r\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n      } @else {\r\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n      }\r\n    </span>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;border:none;display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KnobModule }, { kind: "component", type: i9$1.Knob, selector: "p-knob", inputs: ["styleClass", "style", "ariaLabel", "ariaLabelledBy", "tabindex", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "disabled", "showValue", "readonly"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i11.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-inline-input', standalone: true, imports: [
+                        FormsModule,
+                        InputTextModule,
+                        DatePickerModule,
+                        SelectModule,
+                        MultiSelectModule,
+                        InputMaskModule,
+                        InputNumberModule,
+                        InputOtpModule,
+                        KnobModule,
+                        TextareaModule,
+                        ChipModule,
+                        CommonModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InlineInputComponent),
+                            multi: true
+                        }
+                    ], template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n  [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n  @for (template of templates; track $index) {\r\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n  <div\r\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n    [class.border-red-500]=\"showDuplicateMessage\">\r\n    @for (chip of chips; track $index) {\r\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n    }\r\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n  </div>\r\n  @if (showDuplicateMessage) {\r\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n    <span>\r\n      @if (duplicateChips.length === 1) {\r\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n      } @else {\r\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n      }\r\n    </span>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;border:none;display:flex;align-items:center;justify-content:space-between}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
+
 class AppButtonNgService {
     buttonConfig = signal({});
     constructor() {
@@ -167,17 +736,1755 @@ class ButtonNgComponent {
         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.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: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ButtonNgComponent, isStandalone: true, selector: "app-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: [
+            args: [{ selector: 'app-button-ng', imports: [
                         ButtonModule,
                         TooltipModule,
                         CommonModule
                     ], providers: [AppButtonNgService], template: "@let config = buttonConfig(); @let tooltipConfig = buttonConfig().tooltipConfig;\r\n@if (!config.hideButton) {\r\n  <div\r\n    [ngClass]=\"{\r\n      'full-width-button': config.fullWidth,\r\n      'full-height-button': config.fullHeight,\r\n      'cursor-pointer': this.onClick\r\n    }\"\r\n    [class]=\"config.class ?? ''\"\r\n  >\r\n    <p-button\r\n      [label]=\"config.hasTemplate ? undefined : label\"\r\n      [icon]=\"config.hasTemplate ? undefined : config.icon\"\r\n      [severity]=\"config.hasTemplate ? 'secondary' : config.severity\"\r\n      [loading]=\"config.loading || false\"\r\n      [disabled]=\"config.disabled || false\"\r\n      [rounded]=\"config.rounded || false\"\r\n      [raised]=\"config.raised || false\"\r\n      [variant]=\"config.hasTemplate ? 'text' : config.variant\"\r\n      [badge]=\"config.badge\"\r\n      (onClick)=\"config?.onClick?.() ?? onClickButton()\"\r\n      [size]=\"config?.size\"\r\n      pTooltip=\"{{ tooltipConfig?.pTooltip }}\"\r\n      [tooltipPosition]=\"tooltipConfig?.tooltipPosition ?? 'top'\"\r\n      [iconPos]=\"config?.iconPos ?? 'left'\"\r\n      [ngClass]=\"{\r\n        'cursor-pointer': (config.onClick || config.hasStaticClick) && !config.disabled,\r\n        'cursor-auto': !((config.onClick || config.hasStaticClick) && !config.disabled),\r\n        'no-hover-template': config.hasTemplate\r\n      }\"\r\n      [outlined]=\"config.outlined || false\"\r\n      [text]=\"config.text || false\"\r\n    >\r\n      @if (config.hasTemplate) {\r\n        <ng-content></ng-content>\r\n      }\r\n    </p-button>\r\n  </div>\r\n}\r\n", styles: [".full-width-button ::ng-deep p-button button{width:100%}.full-height-button ::ng-deep p-button button{height:100%}::ng-deep .cursor-auto button{cursor:auto!important}::ng-deep .cursor-pointer button{cursor:pointer!important}::ng-deep .no-hover-template button{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}::ng-deep .no-hover-template button:hover,::ng-deep .no-hover-template button:focus,::ng-deep .no-hover-template button:active{background:transparent!important;border:none!important;box-shadow:none!important}\n"] }]
         }], ctorParameters: () => [] });
 
+class KeyToDisplayNamePipe {
+    transform(key, keysNames) {
+        return keysNames?.[key] ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, isStandalone: true, name: "keyToDisplayName" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KeyToDisplayNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'keyToDisplayName'
+                }]
+        }] });
+
+/**
+ * Utilidades para manejar errores de API según la interfaz IApiError
+ */
+class ApiErrorUtil {
+    /**
+     * Procesa errores de API y extrae el mensaje según la interfaz IApiError
+     * @param error - El error HTTP recibido
+     * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
+     * @returns El mensaje de error procesado
+     */
+    static handleApiError(error, fallbackMessage) {
+        const apiError = error.error;
+        const errorMessage = Array.isArray(apiError?.message)
+            ? apiError.message.join(', ')
+            : apiError?.message ?? fallbackMessage;
+        return errorMessage;
+    }
+    /**
+     * Procesa errores de API con información detallada de campos
+     * y muestra tanto el mensaje general como los errores específicos de campo
+     * @param error - El error HTTP recibido
+     * @param fallbackMessage - Mensaje por defecto si no se puede extraer el mensaje del error
+     * @returns El mensaje de error procesado con información de campos si está disponible
+     */
+    static handleApiErrorWithFields(error, fallbackMessage) {
+        const apiError = error.error;
+        let errorMessage = Array.isArray(apiError?.message)
+            ? apiError.message.join(', ')
+            : apiError?.message ?? fallbackMessage;
+        // Si hay errores de campo específicos, los agregamos al mensaje
+        if (apiError?.errors && apiError.errors.length > 0) {
+            const fieldErrors = apiError.errors
+                .map(fieldError => `${fieldError.field}: ${fieldError.message}`)
+                .join(', ');
+            errorMessage = `${errorMessage}. Errores de campos: ${fieldErrors}`;
+        }
+        return errorMessage;
+    }
+    /**
+     * Obtiene solo los errores de campo específicos
+     * @param error - El error HTTP recibido
+     * @returns Array de errores de campo o array vacío si no hay errores
+     */
+    static getFieldErrors(error) {
+        const apiError = error.error;
+        return apiError?.errors ?? [];
+    }
+    /**
+     * Verifica si el error tiene errores de campo específicos
+     * @param error - El error HTTP recibido
+     * @returns true si hay errores de campo, false en caso contrario
+     */
+    static hasFieldErrors(error) {
+        const apiError = error.error;
+        return apiError?.errors && apiError.errors.length > 0;
+    }
+    /**
+     * Obtiene el código de error específico
+     * @param error - El error HTTP recibido
+     * @returns El código de error o undefined si no está disponible
+     */
+    static getErrorCode(error) {
+        const apiError = error.error;
+        return apiError?.errorCode;
+    }
+    /**
+     * Obtiene el timestamp del error
+     * @param error - El error HTTP recibido
+     * @returns El timestamp del error o undefined si no está disponible
+     */
+    static getErrorTimestamp(error) {
+        const apiError = error.error;
+        return apiError?.timestamp;
+    }
+}
+
+class CookieUtil {
+    /**
+     * Obtiene el valor de una cookie por su nombre
+     * @param name - Nombre de la cookie
+     * @returns El valor de la cookie o null si no existe
+     */
+    static getCookie(name) {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        const nameEQ = name + '=';
+        const ca = document.cookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) === ' ') {
+                c = c.substring(1, c.length);
+            }
+            if (c.indexOf(nameEQ) === 0) {
+                return c.substring(nameEQ.length, c.length);
+            }
+        }
+        return null;
+    }
+    /**
+     * Establece una cookie
+     * @param name - Nombre de la cookie
+     * @param value - Valor de la cookie
+     * @param days - Días hasta que expire (por defecto 365)
+     * @param path - Ruta de la cookie (por defecto '/')
+     */
+    static setCookie(name, value, days = 365, path = '/') {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        let expires = '';
+        if (days) {
+            const date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = '; expires=' + date.toUTCString();
+        }
+        document.cookie = name + '=' + (value || '') + expires + '; path=' + path;
+    }
+    /**
+     * Elimina una cookie
+     * @param name - Nombre de la cookie a eliminar
+     * @param path - Ruta de la cookie (por defecto '/')
+     */
+    static eraseCookie(name, path = '/') {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        document.cookie = name + '=; Path=' + path + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    }
+    /**
+     * Obtiene un valor booleano desde una cookie
+     * @param name - Nombre de la cookie
+     * @param defaultValue - Valor por defecto si la cookie no existe
+     * @returns El valor booleano
+     */
+    static getBooleanCookie(name, defaultValue = false) {
+        const value = this.getCookie(name);
+        if (value === null) {
+            return defaultValue;
+        }
+        return value === 'true';
+    }
+    /**
+     * Establece un valor booleano en una cookie
+     * @param name - Nombre de la cookie
+     * @param value - Valor booleano
+     * @param days - Días hasta que expire (por defecto 365)
+     * @param path - Ruta de la cookie (por defecto '/')
+     */
+    static setBooleanCookie(name, value, days = 365, path = '/') {
+        this.setCookie(name, value.toString(), days, path);
+    }
+}
+
+const formatCurrency = (amount, currency) => {
+    return new Intl.NumberFormat('es-CO', {
+        style: 'currency',
+        currency: currency || 'COP'
+    }).format(amount);
+};
+
+const isSameDay = (date1, date2) => {
+    const date1Copy = new Date(date1.setHours(0, 0, 0, 0));
+    const date2Copy = new Date(date2.setHours(0, 0, 0, 0));
+    return date1Copy.getTime() === date2Copy.getTime();
+};
+const formatDateDMA = (date) => {
+    return new Date(date).toLocaleDateString('es-CO', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    });
+};
+// Crea una funcion que tambien muestre la hora
+const formatDateDMAWithTime = (date) => {
+    return new Date(date).toLocaleDateString('es-CO', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+/**
+ * Enum con los tipos de archivos más relevantes para la aplicación
+ */
+var EFileType;
+(function (EFileType) {
+    // Documentos
+    EFileType["PDF"] = "application/pdf";
+    EFileType["DOC"] = "application/msword";
+    EFileType["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    EFileType["XLS"] = "application/vnd.ms-excel";
+    EFileType["XLSX"] = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    EFileType["PPT"] = "application/vnd.ms-powerpoint";
+    EFileType["PPTX"] = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    EFileType["TXT"] = "text/plain";
+    EFileType["RTF"] = "application/rtf";
+    // Imágenes
+    EFileType["JPG"] = "image/jpeg";
+    EFileType["PNG"] = "image/png";
+    EFileType["GIF"] = "image/gif";
+    EFileType["BMP"] = "image/bmp";
+    EFileType["SVG"] = "image/svg+xml";
+    EFileType["WEBP"] = "image/webp";
+    // Archivos comprimidos
+    EFileType["ZIP"] = "application/zip";
+    EFileType["RAR"] = "application/vnd.rar";
+    EFileType["TAR"] = "application/x-tar";
+    EFileType["GZ"] = "application/gzip";
+    // Archivos de datos
+    EFileType["CSV"] = "text/csv";
+    EFileType["JSON"] = "application/json";
+    EFileType["XML"] = "application/xml";
+    // Archivos de audio
+    EFileType["MP3"] = "audio/mpeg";
+    EFileType["WAV"] = "audio/wav";
+    EFileType["OGG"] = "audio/ogg";
+    // Archivos de video
+    EFileType["MP4"] = "video/mp4";
+    EFileType["AVI"] = "video/x-msvideo";
+    EFileType["MOV"] = "video/quicktime";
+    EFileType["WMV"] = "video/x-ms-wmv";
+    // Todos los tipos de imagen
+    EFileType["ALL_IMAGES"] = "image/*";
+    // Todos los tipos de documento
+    EFileType["ALL_DOCUMENTS"] = "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,application/rtf";
+    // Todos los tipos de archivo
+    EFileType["ALL_FILES"] = "*/*";
+})(EFileType || (EFileType = {}));
+/**
+ * Método mejorado para abrir el selector de archivos
+ * @param options - Opciones para configurar el input de archivo
+ */
+const triggerFileInput = (options = {}) => {
+    const { accept = EFileType.ALL_FILES, multiple = false, onFileSelected } = options;
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = accept;
+    input.multiple = multiple;
+    input.style.display = 'none';
+    input.onchange = (event) => {
+        const target = event.target;
+        const files = target.files;
+        if (files && files.length > 0 && onFileSelected) {
+            if (multiple) {
+                // Si es múltiple, llamar al callback con todos los archivos
+                Array.from(files).forEach(file => {
+                    onFileSelected(file);
+                });
+            }
+            else {
+                // Si es único, llamar al callback con el primer archivo
+                const file = files[0];
+                onFileSelected(file);
+            }
+        }
+        document.body.removeChild(input);
+    };
+    document.body.appendChild(input);
+    input.click();
+};
+/**
+ * Función para capturar una foto usando la cámara
+ */
+const capturePhotoFromCamera = async (options = {}) => {
+    const { quality = 0.9, facingMode = 'environment', onPhotoTaken, onError } = options;
+    try {
+        if (!navigator.mediaDevices?.getUserMedia) {
+            throw new Error('Cámara no soportada en este navegador');
+        }
+        const stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode }
+        });
+        const video = document.createElement('video');
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        // Crear modal
+        const modal = document.createElement('div');
+        modal.style.cssText = `
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.9); display: flex; flex-direction: column;
+      align-items: center; justify-content: center; z-index: 10000;
+    `;
+        video.style.cssText = 'width: 80%; max-width: 500px; border-radius: 8px;';
+        video.srcObject = stream;
+        video.autoplay = true;
+        video.playsInline = true;
+        const buttonsDiv = document.createElement('div');
+        buttonsDiv.style.cssText = 'display: flex; gap: 20px; margin-top: 20px;';
+        const captureBtn = document.createElement('button');
+        captureBtn.textContent = 'Tomar Foto';
+        captureBtn.style.cssText = `
+      padding: 12px 24px; background: #007bff; color: white;
+      border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
+    `;
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = 'Cancelar';
+        cancelBtn.style.cssText = `
+      padding: 12px 24px; background: #6c757d; color: white;
+      border: none; border-radius: 6px; cursor: pointer; font-size: 16px;
+    `;
+        const cleanup = () => {
+            stream.getTracks().forEach(track => track.stop());
+            modal.remove();
+        };
+        captureBtn.onclick = () => {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            context.drawImage(video, 0, 0);
+            canvas.toBlob((blob) => {
+                if (blob && onPhotoTaken) {
+                    const file = new File([blob], `photo-${Date.now()}.jpg`, { type: 'image/jpeg' });
+                    onPhotoTaken(file);
+                }
+                cleanup();
+            }, 'image/jpeg', quality);
+        };
+        cancelBtn.onclick = cleanup;
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape')
+                cleanup();
+        });
+        buttonsDiv.append(captureBtn, cancelBtn);
+        modal.append(video, buttonsDiv);
+        document.body.appendChild(modal);
+    }
+    catch (error) {
+        if (onError)
+            onError(error);
+    }
+};
+var EFileIcons;
+(function (EFileIcons) {
+    EFileIcons["FILE"] = "file";
+    EFileIcons["IMAGE"] = "image";
+    EFileIcons["VIDEO"] = "video";
+    EFileIcons["FOLDER"] = "folder";
+    EFileIcons["EXCEL"] = "excel";
+    EFileIcons["SIGNATURE"] = "signature";
+    EFileIcons["CONTRACT"] = "contract";
+    EFileIcons["FINGERPRINT"] = "fingerprint";
+    EFileIcons["ID_CARD"] = "id_card";
+    EFileIcons["FILE_BOX"] = "file_box";
+    EFileIcons["SECURE_BUILDING"] = "secure_building";
+    EFileIcons["POLICE"] = "police";
+})(EFileIcons || (EFileIcons = {}));
+const DocumentIcon = {
+    [EFileIcons.FILE]: 'fa-solid fa-file-lines',
+    [EFileIcons.IMAGE]: 'fa-solid fa-file-image',
+    [EFileIcons.VIDEO]: 'fa-solid fa-file-video',
+    [EFileIcons.FOLDER]: 'fa-solid fa-folder',
+    [EFileIcons.EXCEL]: 'fa-solid fa-file-excel',
+    [EFileIcons.SIGNATURE]: 'fa-solid fa-signature',
+    [EFileIcons.CONTRACT]: 'fa-solid fa-file-contract',
+    [EFileIcons.FINGERPRINT]: 'fa-solid fa-fingerprint',
+    [EFileIcons.ID_CARD]: 'fa-solid fa-id-card',
+    [EFileIcons.SECURE_BUILDING]: 'fa-solid fa-building-shield',
+    [EFileIcons.POLICE]: 'fa-solid fa-hand-middle-finger',
+    [EFileIcons.FILE_BOX]: 'fa-solid fa-box-archive'
+};
+const downloadFile = (blob, fileName) => {
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+};
+
+//sin uuid, codigo propio
+const generateId = () => {
+    return Date.now().toString(36) + Math.random().toString(36).substring(2, 15);
+};
+
+const formatNumber = (number) => {
+    return new Intl.NumberFormat('es-CO', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    }).format(number);
+};
+const fixedNumber = (number) => {
+    return Number(number.toFixed(2));
+};
+
+const hasValues = (obj) => {
+    return Object.values(obj).some(value => value !== null && value !== undefined);
+};
+/**
+ * Elimina las propiedades de un objeto que tengan valores null o undefined.
+ * Retorna un nuevo objeto sin mutar el original.
+ * @param obj - Objeto del cual se eliminarán las propiedades null/undefined
+ * @returns Nuevo objeto sin las propiedades con valores null o undefined
+ */
+const removeNullUndefined = (obj) => {
+    const result = {};
+    Object.keys(obj).forEach(key => {
+        const value = obj[key];
+        if (value !== null && value !== undefined) {
+            result[key] = value;
+        }
+    });
+    return result;
+};
+/**
+ * Realiza un upsert en un array de strings. Si el string ya existe, no hace nada.
+ * Si no existe, lo agrega al array.
+ * @param targetArray - Array de strings donde se realizará el upsert
+ * @param value - String o array de strings a insertar
+ * @returns Array actualizado con los nuevos valores
+ */
+const upsertArrayStrings = (targetArray, value) => {
+    // Crear una copia del array original para evitar mutaciones
+    const result = [...targetArray];
+    // Convertir el valor a array para procesamiento uniforme
+    const valuesToInsert = Array.isArray(value) ? value : [value];
+    // Procesar cada valor
+    valuesToInsert.forEach(stringValue => {
+        // Solo agregar si no existe en el array
+        if (!result.includes(stringValue)) {
+            result.push(stringValue);
+        }
+    });
+    return result;
+};
+const sameArray = (arr1, arr2) => {
+    if (arr1.length !== arr2.length)
+        return false;
+    const sorted1 = Array.from(arr1).sort();
+    const sorted2 = Array.from(arr2).sort();
+    return sorted1.every((item, index) => item === sorted2[index]);
+};
+const getOptionByCode = (options, code) => {
+    if (!code)
+        return undefined;
+    return options.find((item) => item.code === code);
+};
+const createEnumeratedList = (items) => {
+    if (items.length === 0) {
+        return '';
+    }
+    if (items.length === 1) {
+        return `1. ${items[0]}`;
+    }
+    return items
+        .map((item, index) => `${index + 1}. ${item}`)
+        .join('\n');
+};
+
+class PrimeNgUtil {
+    static isPrimeNgSelection(value) {
+        return typeof value === 'object' && value !== null && 'name' in value && 'code' in value;
+    }
+}
+
+class 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: "app-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: 'app-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 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: "app-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: 'app-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: "app-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: 'app-toolbar-ng', imports: [
+                        ToolbarModule
+                    ], template: "<p-toolbar class=\"border-0 bg-transparent\">\r\n  <ng-template pTemplate=\"start\">\r\n    <ng-content select=\"[toolbarStart]\"></ng-content>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"center\">\r\n    <ng-content select=\"[toolbarCenter]\"></ng-content>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"end\">\r\n    <ng-content select=\"[toolbarEnd]\"></ng-content>\r\n  </ng-template>\r\n</p-toolbar>\r\n" }]
+        }] });
+
+class TableNgEditService {
+    editConfig = signal(undefined);
+    keysNames = signal({});
+    constructor() { }
+    setEditConfig(editConfig) {
+        this.editConfig.set(editConfig);
+    }
+    setKeysNames(keysNames) {
+        this.keysNames.set(keysNames);
+    }
+    fb = inject(NonNullableFormBuilder);
+    controls = computed(() => {
+        const formValues = this.searchFormGroup().value;
+        const controls = [
+            {
+                controlName: 'search',
+                control: this.fb.control(formValues.search, { validators: [] }),
+                typeInput: ETypeInput.TEXT,
+                colSpan: 12,
+                label: '-'
+            }
+        ];
+        return controls;
+    });
+    searchFormGroup = signal(new FormGroup({}));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgEditService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class TableNgGeneralService {
+    constructor() { }
+    MOCK_EMPTY_DATE = new Date(1900, 0, 1);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgGeneralService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+// import { CustomDialogService } from '../../dynamic-dialog/services/custom-dialog.service'
+class TableNgService {
+    tableNgGeneralService = inject(TableNgGeneralService);
+    filterService = inject(FilterService);
+    // private readonly 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-xRoZB_NZ.mjs');
+        let configSelectedItems = config;
+        if (config) {
+            configSelectedItems = structuredClone(config);
+            const selectionTableConfig = {
+                ...(configSelectedItems.selectionTableConfig ?? {}),
+                showManagementConfig: false
+            };
+            delete configSelectedItems.lazyLoadingConfig;
+            configSelectedItems.selectionTableConfig = selectionTableConfig;
+        }
+        // const ref = this.dialogService?.open(SelectedItemsManagementComponent, {
+        //   header: 'Gestionar Seleccionados',
+        //   data: {
+        //     selectedItems: selectedItems(),
+        //     config: configSelectedItems
+        //   },
+        //   width: '90%',
+        //   height: '90%',
+        //   styleClass: 'overflow-hidden'
+        // })
+        // ref.onClose.subscribe((selectedReturnItems: ITableNgData[] | undefined) => {
+        //   if (selectedReturnItems) {
+        //     selectedItems.set(selectedReturnItems)
+        //   }
+        // })
+    }
+    //#endregion
+    //#region Custom Filter
+    //#endregion
+    excelButton = computed(() => {
+        return {
+            label: '',
+            icon: 'fa-solid fa-file-excel',
+            variant: 'text',
+            severity: 'success',
+            raised: true,
+            size: 'large',
+            tooltipConfig: {
+                pTooltip: 'Exportar a Excel',
+                tooltipPosition: 'top'
+            }
+        };
+    });
+    pdfButton = computed(() => {
+        return {
+            label: '',
+            icon: 'fa-solid fa-file-pdf',
+            variant: 'text',
+            severity: 'danger',
+            raised: true,
+            size: 'large',
+            tooltipConfig: {
+                pTooltip: 'Exportar a PDF',
+                tooltipPosition: 'top'
+            }
+        };
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+class TableNgComponent {
+    tableNgService = inject(TableNgService);
+    tableNgEditService = inject(TableNgEditService);
+    // private readonly dialogService = inject(CustomDialogService)
+    data = model.required();
+    // Loading state management
+    loadingTimeout = null;
+    isLoading = signal(false);
+    timeoutExpired = signal(false);
+    config = model();
+    editConfig = model();
+    footerConfig = model();
+    toolbarButtons = model([]);
+    sourceElements = model([]);
+    targetElements = model([]);
+    httpMessage = model();
+    lazyLoading = output();
+    outputChangeData = output();
+    outputHandleEditInitButton = output();
+    outputAddRow = output();
+    outputDeleteRow = output();
+    outputRowInlineChange = output();
+    outputRowDataChange = output();
+    outputEditData = output();
+    outputIsEditing = output();
+    resetData() {
+        this.data.set([]);
+    }
+    advancedFiltersPerformed = [];
+    advancedFiltersValues = signal({});
+    dt;
+    fb = inject(NonNullableFormBuilder);
+    constructor() {
+        this.tableNgEditService.setEditConfig(this.editConfig());
+        this.tableNgEditService.setKeysNames(this.config()?.keysNames ?? {});
+        effect(() => {
+            this.outputChangeData.emit([...this.data()]);
+        });
+        // Effect para gestionar el loading basado en el estado de data
+        effect(() => {
+            const currentData = this.data();
+            // Limpiar el timeout anterior si existe
+            if (this.loadingTimeout) {
+                clearTimeout(this.loadingTimeout);
+                this.loadingTimeout = null;
+            }
+            if (currentData.length === 0) {
+                // Si data está vacío, activar loading
+                this.isLoading.set(true);
+                this.loadingTimeout = setTimeout(() => {
+                    if (this.data().length === 0) {
+                        this.isLoading.set(false);
+                        this.timeoutExpired.set(true);
+                    }
+                }, 0);
+            }
+            else {
+                // Si hay data, desactivar loading y resetear timeout
+                this.isLoading.set(false);
+                this.timeoutExpired.set(false);
+            }
+        });
+    }
+    ngOnInit() {
+        this.tableNgService.setInitialValue([...this.data()]);
+    }
+    ngOnDestroy() {
+        // Limpiar el timeout al destruir el componente
+        if (this.loadingTimeout) {
+            clearTimeout(this.loadingTimeout);
+            this.loadingTimeout = null;
+        }
+    }
+    get hideToolbar() { return this.config()?.hideToolbar ?? false; }
+    /**
+     * Calcula el número total de columnas para el colspan del mensaje vacío
+     */
+    totalColumns = computed(() => {
+        const selectedColumns = this.config()?.selectedColumns ?? [];
+        const baseColumns = selectedColumns.length > 0 ? selectedColumns.length : this.keys().length;
+        const selectionColumn = this.config()?.selectionTableConfig?.isEnabled ? 1 : 0;
+        const expansionColumn = this.config()?.rowExpansionConfig?.isEnabled ? 1 : 0;
+        const editColumn = (this.editConfig()?.type === 'row' || this.editConfig()?.type === 'cell') && this.editConfig()?.isEnabled ? 1 : 0;
+        return baseColumns + selectionColumn + expansionColumn + editColumn;
+    });
+    isPrimeNgSelection(value) {
+        return PrimeNgUtil.isPrimeNgSelection(value);
+    }
+    hasErrorValues(object) {
+        return Object.keys(object).length > 0;
+    }
+    rowFieldsValue = signal({});
+    rowFieldsHasValue = computed(() => {
+        return Object.keys(this.rowFieldsValue()).reduce((acc, key) => {
+            acc[key] = !!this.rowFieldsValue()[key];
+            return acc;
+        }, {});
+    });
+    inlineChange(value, key) {
+        this.rowFieldsValue.update((prev) => {
+            return { ...prev, [key]: value };
+        });
+        this.outputRowInlineChange.emit({ ...this.rowFieldsValue() });
+    }
+    trackById(index, item) {
+        return item.id;
+    }
+    frozenHandle(value) {
+        return value ? value : false;
+    }
+    isDate(value) {
+        return value instanceof Date;
+    }
+    onFilter(event) {
+        const filters = event.filters;
+        if (!filters)
+            return;
+        const global = filters['global'];
+        if (!global?.['value']) {
+            this.handleAdvancedFiltersPerformed(filters);
+        }
+    }
+    resetRowDatas() {
+        this.data.update((data) => {
+            return data.map((item) => {
+                return {
+                    ...item,
+                    rowData: {}
+                };
+            });
+        });
+    }
+    get ETypeInput() {
+        return ETypeInput;
+    }
+    handleAdvancedFiltersPerformed(filters) {
+        if (!filters)
+            return;
+        const entriesFilters = Object.entries(filters);
+        const keysColumn = this.config()?.keys ?? [];
+        entriesFilters.forEach(([key, value]) => {
+            const valueArray = value;
+            const hasValue = !!valueArray[0]?.value;
+            const keyColumn = key.split('.')[1];
+            if (keysColumn.includes(keyColumn)) {
+                const index = this.advancedFiltersPerformed.indexOf(keyColumn);
+                if (hasValue && index === -1) {
+                    // Agregar si no existe
+                    this.advancedFiltersPerformed.push(keyColumn);
+                }
+                else if (!hasValue && index !== -1) {
+                    // Quitar si ya no tiene valor
+                    this.advancedFiltersPerformed.splice(index, 1);
+                }
+            }
+        });
+    }
+    numberOfRecords = computed(() => {
+        return this.data().length ?? 0;
+    });
+    hasRecords = computed(() => {
+        return this.numberOfRecords() > 0;
+    });
+    /**
+     * Computed que valida si al menos una fila tiene datos válidos en rowData.
+     * Retorna true si al menos una fila tiene un valor que no sea '', null o undefined.
+     * Retorna false si todas las filas tienen valores vacíos, null o undefined.
+     */
+    hasValidRowData = computed(() => {
+        const data = this.data();
+        return data.some(item => {
+            if (!item?.rowData || typeof item.rowData !== 'object') {
+                return false;
+            }
+            const values = Object.values(item.rowData);
+            // Verificar si al menos un valor es válido (no vacío, null o undefined)
+            return values.some(value => {
+                if (value === null || value === undefined || value === '') {
+                    return false;
+                }
+                // Si es string, verificar que no esté vacío después de trim
+                if (typeof value === 'string') {
+                    return value.trim() !== '';
+                }
+                // Para otros tipos (números, fechas, booleanos, etc.)
+                return true;
+            });
+        });
+    });
+    keys = computed(() => {
+        return this.config()?.keys ?? [];
+    });
+    onRowClick(item) {
+        item.onClick();
+    }
+    //#region Scroll Config
+    scrollHeight = computed(() => {
+        const scrollHeightInitial = this.config()?.scrollConfig?.scrollHeight ?? '58vh';
+        let res = scrollHeightInitial;
+        if (this.showBottomToolbar()) {
+            const { number: size, unit } = this.parseValue(scrollHeightInitial);
+            res = `${size - 7.6}${unit}`;
+        }
+        return res;
+    });
+    parseValue(str) {
+        const match = str.match(/^(-?\d+\.?\d*)(.*)$/);
+        if (match) {
+            return {
+                number: parseFloat(match[1]),
+                unit: match[2]
+            };
+        }
+        return { number: 0, unit: '' };
+    }
+    //#endregion
+    //#region Paginator Config
+    paginatorStyleClass = computed(() => {
+        if (this.showBottomToolbar()) {
+            return 'p-datatable-paginator p-datatable-paginator-bottom sticky bottom-18 z-10';
+        }
+        return 'p-datatable-paginator p-datatable-paginator-bottom sticky bottom-2 z-10';
+    });
+    //#endregion
+    //#region toolbar config
+    showBottomToolbar = computed(() => {
+        return this.showManagementSelectionConfig();
+    });
+    //#endregion
+    //#region Clear Filters
+    clearFilters() {
+        this.tableNgService.clearSearchInput();
+        this.advancedFiltersPerformed = [];
+        this.advancedFiltersValues.set({});
+        this.dt.clear();
+        this.targetElements.set([]);
+        this.handleTableValueToSourceElements();
+        this.selectedItems.set([]);
+    }
+    get filteredValue() {
+        return !!this.dt?.filteredValue && this.dt.filteredValue.length > 0;
+    }
+    clearFiltersButton = computed(() => {
+        return {
+            icon: 'fa-solid fa-filter-circle-xmark',
+            rounded: true,
+            raised: true,
+            severity: 'contrast',
+            tooltipConfig: {
+                pTooltip: 'Limpiar filtros'
+            },
+            onClick: () => {
+                this.clearFilters();
+            }
+        };
+    });
+    //#endregion
+    //#region Global Filter
+    get controlsGlobalFilter() {
+        return this.tableNgService.controls();
+    }
+    get searchFormGroupGlobalFilter() {
+        return this.tableNgService.searchFormGroup();
+    }
+    submitGlobalSearch(formGroup) {
+        this.dt.globalFilterFields = this.config()?.globalFilterConfig?.globalFilterFields ?? [];
+        this.tableNgService.submitGlobalSearch(formGroup, this.dt);
+    }
+    //#endregion
+    //#region SORT
+    customSort(event) {
+        this.tableNgService.customSort(event);
+    }
+    //#endregion
+    //#region Selection
+    selectedItems = model([]);
+    totalItemsSelected = computed(() => this.selectedItems().length);
+    showManagementSelectionConfig = computed(() => this.totalItemsSelected() > 0 && (this.config()?.selectionTableConfig?.showManagementConfig ?? false));
+    buttonTotalItemsSelected = computed(() => {
+        return {
+            label: this.totalItemsSelected().toLocaleString(),
+            variant: 'text',
+            rounded: true
+        };
+    });
+    showSelectedItemsManagementButton = computed(() => {
+        return {
+            icon: 'fa-solid fa-eye',
+            rounded: true,
+            variant: 'text',
+            severity: 'secondary',
+            onClick: () => {
+                this.openModalManagementSelectedItems();
+            }
+        };
+    });
+    openModalManagementSelectedItems() {
+        this.tableNgService.openModalManagementSelectedItems(this.selectedItems, this.config())
+            .then(() => { })
+            .catch(() => { });
+    }
+    //#endregion
+    //#region Custom Filter
+    inlineFormChanges(inlineValue, filter, typeInput, key) {
+        const lazyLoadingConfig = this.config()?.lazyLoadingConfig;
+        if (typeInput === ETypeInput.MULTISELECT) {
+            const options = inlineValue ? inlineValue : undefined;
+            const arrayValue = options ? options.map((data) => lazyLoadingConfig?.isEnabled ? data.code : data.name) : undefined;
+            if (Array.isArray(arrayValue) && arrayValue.length === 0) {
+                if (key) {
+                    this.advancedFiltersValues.update((prev) => {
+                        const { [key]: _value, ...rest } = prev;
+                        return { ...rest };
+                    });
+                }
+            }
+            if (inlineValue && (Array.isArray(arrayValue) && arrayValue.length > 0)) {
+                filter(arrayValue);
+            }
+        }
+    }
+    formChanges(formValue, filter, key) {
+        if (Array.isArray(formValue['multiSelect'])) {
+            this.advancedFiltersValues.update((prev) => {
+                return { ...prev, [key]: formValue };
+            });
+        }
+        if (!Array.isArray(formValue['multiSelect']) && this.advancedFiltersValues()?.[key]) {
+            this.advancedFiltersValues.update((prev) => {
+                const { [key]: _value, ...rest } = prev;
+                return { ...rest };
+            });
+        }
+        const arrayValue = Array.isArray(formValue['multiSelect'])
+            ? formValue['multiSelect'].map((data) => data.code)
+            : [];
+        if (arrayValue.length > 0) {
+            filter(arrayValue);
+        }
+    }
+    rowDataKey(key) {
+        return `rowData.${key}`;
+    }
+    //#endregion
+    //#region Lazy Loading
+    onLazyLoad(event) {
+        const filters = event.filters ?? {};
+        const filtersWithValue = this.getFiltersWithValue(filters);
+        const metaPagination = {
+            limit: event.rows ?? undefined,
+            skip: event.first ?? undefined
+        };
+        if (event.sortOrder) {
+            metaPagination.sortOrder = event.sortOrder === 1 ? 'ASC' : 'DESC';
+        }
+        if (event.sortField) {
+            metaPagination.sortBy = event.sortField;
+        }
+        const lazyLoadResponse = {
+            filters: filtersWithValue,
+            metaPagination
+        };
+        this.lazyLoading.emit(lazyLoadResponse);
+    }
+    getFiltersWithValue(filters) {
+        const result = {};
+        Object.entries(filters).forEach(([key, filter]) => {
+            const keyColumn = key.split('.')[1];
+            if (!filter)
+                return;
+            if (Array.isArray(filter)) {
+                // Si es un array, filtrar solo los elementos que tienen value
+                const filtersWithValue = filter.filter(f => f.value !== undefined && f.value !== null && f.value !== '');
+                if (filtersWithValue.length > 0) {
+                    result[keyColumn] = filtersWithValue;
+                }
+            }
+            else {
+                // Si es un objeto único, verificar si tiene value
+                if (filter.value !== undefined && filter.value !== null && filter.value !== '') {
+                    result[keyColumn] = filter;
+                }
+            }
+        });
+        return result;
+    }
+    //#endregion
+    //#region Edit
+    onCellValueChange() {
+        this.updateDataWithTableValue();
+    }
+    onRowDataChange(_data) {
+    }
+    onEditData() {
+        this.updateDataWithTableValue();
+        this.outputEditData.emit([...this.data()]);
+    }
+    get controlsEdit() {
+        return this.tableNgEditService.controls();
+    }
+    get searchFormGroupEdit() {
+        return this.tableNgEditService.searchFormGroup();
+    }
+    customControlConfig(key, value) {
+        return {
+            controlName: key,
+            control: this.fb.control(value),
+            typeInput: ETypeInput.TEXT
+        };
+    }
+    cellFormGroup = this.fb.group({});
+    //#region Row
+    addRowButton = computed(() => {
+        const editConfig = this.editConfig();
+        const isDisabled = editConfig?.type === 'cell'
+            ? (editConfig?.cellEditConfig?.isDisabledAddButton ?? false)
+            : (editConfig?.rowEditConfig?.isDisabledAddButton ?? false) || this.hasRowInEdit;
+        const button = {
+            icon: 'fa-solid fa-plus',
+            rounded: true,
+            severity: 'success',
+            tooltipConfig: {
+                pTooltip: 'Agregar registro',
+                tooltipPosition: 'top'
+            },
+            onClick: () => {
+                this.addRow();
+            },
+            disabled: isDisabled
+        };
+        return button;
+    });
+    addRow() {
+        const editConfig = this.editConfig();
+        // Si es modo cell y hay defaultTableNgData configurado, agregar la fila directamente
+        if (editConfig?.type === 'cell' && editConfig?.cellEditConfig?.defaultTableNgData) {
+            const newRow = this.editConfig()?.cellEditConfig?.defaultTableNgData;
+            if (newRow) {
+                this.data.update(currentData => [...currentData, newRow]);
+                this.outputChangeData.emit(this.data());
+                return;
+            }
+        }
+        // Comportamiento original para modo row o cuando no hay defaultTableNgData
+        this.outputAddRow.emit(this.data());
+        this.setEditingRowId(null);
+    }
+    defaultTableNgData = computed(() => {
+        const editConfig = this.editConfig();
+        let defaultData;
+        // Usar la configuración apropiada según el tipo de edición
+        if (editConfig?.type === 'cell' && editConfig?.cellEditConfig?.defaultTableNgData) {
+            defaultData = editConfig.cellEditConfig.defaultTableNgData;
+        }
+        else if (editConfig?.type === 'row' && editConfig?.rowEditConfig?.defaultTableNgData) {
+            defaultData = editConfig.rowEditConfig.defaultTableNgData;
+        }
+        const res = { ...defaultData };
+        return {
+            ...res,
+            id: generateId()
+        };
+    });
+    clonedRowData = null;
+    editingRowId = signal(null);
+    /**
+     * Verifica si una fila específica está siendo editada
+     */
+    isRowEditing(id) {
+        return this.editingRowId() === id;
+    }
+    /**
+     * Verifica si hay alguna fila siendo editada actualmente
+     */
+    get hasRowInEdit() {
+        return this.editingRowId() !== null;
+    }
+    onRowEditInit(data) {
+        // Verificar si ya hay una fila en edición
+        this.clonedRowData = structuredClone(data.rowData);
+        this.setEditingRowId(data.id);
+        this.outputHandleEditInitButton.emit(data);
+    }
+    setEditingRowId(id) {
+        this.editingRowId.set(id);
+        this.outputIsEditing.emit(true);
+    }
+    onRowEditSave(_data) {
+        this.clonedRowData = null;
+        this.editingRowId.set(null);
+        this.updateDataWithTableValue();
+        this.setEnableErrors(false);
+        this.outputIsEditing.emit(false);
+        this.outputRowDataChange.emit(_data);
+    }
+    onRowEditCancel(data, index) {
+        if (this.clonedRowData && this.editingRowId() === data.id) {
+            const items = [...this.data()];
+            items[index] = { ...items[index], rowData: this.clonedRowData };
+            this.data.set(items);
+        }
+        this.clonedRowData = null;
+        this.setEditingRowId(null);
+        this.setEnableErrors(false);
+        this.outputIsEditing.emit(false);
+    }
+    updateDataWithTableValue() {
+        const tableValue = (this.dt.value ?? []);
+        this.data.set([...tableValue]);
+    }
+    editInitButton = computed(() => {
+        return {
+            icon: 'fa-solid fa-pencil',
+            rounded: true,
+            variant: 'text',
+            severity: 'secondary'
+        };
+    });
+    getEditInitButton(productId) {
+        return {
+            ...this.editInitButton(),
+            disabled: this.hasRowInEdit && !this.isRowEditing(productId)
+        };
+    }
+    editSaveButton = computed(() => {
+        return {
+            icon: 'fa-solid fa-check',
+            rounded: true,
+            variant: 'text',
+            severity: 'secondary'
+        };
+    });
+    editSaveButtonWithErrors = computed(() => {
+        return {
+            icon: 'fa-solid fa-check',
+            rounded: true,
+            variant: 'text',
+            severity: 'secondary'
+        };
+    });
+    enableErrors = false;
+    setEnableErrors(value) {
+        this.enableErrors = value;
+    }
+    onEditSaveWithErrors() {
+        this.setEnableErrors(true);
+    }
+    editCancelButton = computed(() => {
+        return {
+            icon: 'fa-solid fa-times',
+            rounded: true,
+            variant: 'text',
+            severity: 'secondary'
+        };
+    });
+    deleteRowButton = computed(() => {
+        return {
+            icon: 'fa-solid fa-trash',
+            rounded: true,
+            variant: 'text',
+            severity: 'danger'
+        };
+    });
+    getDeleteRowButton() {
+        return {
+            ...this.deleteRowButton(),
+            disabled: this.hasRowInEdit
+        };
+    }
+    removeRowFromData(data) {
+        const { id } = data;
+        const items = [...this.data()];
+        items.splice(items.findIndex(item => item.id === id), 1);
+        this.data.set(items);
+        this.outputDeleteRow.emit(data);
+    }
+    deleteRow(data) {
+        this.removeRowFromData(data);
+        this.outputEditData.emit(this.data());
+    }
+    //#endregion Row
+    get footerRows() {
+        return this.footerConfig()?.footerRows || [];
+    }
+    applyPipe(value, pipeConfig) {
+        if (!pipeConfig || !pipeConfig.pipe) {
+            return value?.toString() || '';
+        }
+        switch (pipeConfig.pipe) {
+            case 'currency': {
+                const currencyCode = pipeConfig.args?.[0] || 'COP';
+                return new Intl.NumberFormat('es-CO', {
+                    style: 'currency',
+                    currency: currencyCode
+                }).format(value);
+            }
+            case 'number': {
+                const digits = pipeConfig.args?.[0] || '1.2-2';
+                const [minInteger, fractional] = digits.split('.');
+                const [minFractional, maxFractional] = fractional ? fractional.split('-') : ['0', '0'];
+                return new Intl.NumberFormat('es-CO', {
+                    minimumIntegerDigits: parseInt(minInteger),
+                    minimumFractionDigits: parseInt(minFractional),
+                    maximumFractionDigits: parseInt(maxFractional || minFractional)
+                }).format(value);
+            }
+            case 'date': {
+                if (value instanceof Date) {
+                    return value.toLocaleDateString('es-CO');
+                }
+                return value?.toString() || '';
+            }
+            default:
+                return value?.toString() || '';
+        }
+    }
+    // #endregion
+    //#region Row Expansion
+    rowExpansionButton(isRowExpanded) {
+        return computed(() => {
+            return {
+                icon: isRowExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right',
+                rounded: true,
+                variant: 'text',
+                severity: 'contrast'
+            };
+        });
+    }
+    //#endregion
+    itemTemplateInput = input(null);
+    itemTemplate;
+    get currentItemTemplate() {
+        return this.itemTemplateInput() || this.itemTemplate || null;
+    }
+    isThatItemInTheProductSelection(field) {
+        const selectedColumns = this.config()?.selectedColumns ?? [];
+        if (!selectedColumns.length) {
+            return true;
+        }
+        return selectedColumns.some((column) => column.field === field);
+    }
+    //#region Advanced Identifier Filters
+    advancedIdentifierFiltersButton = computed(() => {
+        return {
+            icon: 'pi pi-filter',
+            rounded: true,
+            severity: 'warn',
+            raised: true,
+            tooltipConfig: {
+                pTooltip: this.data().length === 0 ? 'No hay datos para filtrar' : 'Filtros avanzados',
+                tooltipPosition: 'top'
+            },
+            onClick: () => {
+                this.openAdvancedIdentifierFilters();
+            },
+            disabled: this.data().length === 0
+        };
+    });
+    openAdvancedIdentifierFilters() {
+        if (this.sourceElements().length === 0) {
+            this.handleTableValueToSourceElements();
+        }
+        this.handleSelectedItemsToSourceElements();
+        if (this.data().length === 0) {
+            return;
+        }
+        // const ref = this.dialogService.open(ModalAdvancedFilterComponent, {
+        //   header: 'Filtros Avanzados',
+        //   width: '70%',
+        //   height: '70%',
+        //   styleClass: 'overflow-hidden',
+        //   data: {
+        //     sourceElements: this.sourceElements(),
+        //     targetElements: this.targetElements()
+        //   }
+        // })
+        // ref.onClose.subscribe((result: { success: boolean, data: { sourceElements: IPickListElement[], targetElements: IPickListElement[] } }) => {
+        //   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: IPickListElement) => element.buttonConfig?.label).map((element: IPickListElement) => element.buttonConfig?.label as string) ?? [])
+        //   this.dt.filter(this.identifiersSelected(), 'rowData.identifier', 'arrayStringFilter')
+        // })
+    }
+    handleTableValueToSourceElements() {
+        const value = this.data();
+        if (!value.some((item) => item.rowData['identifier'])) {
+            return;
+        }
+        const sourceElements = value.map((item) => ({
+            id: item.id,
+            buttonConfig: {
+                label: item.rowData['identifier'],
+                fullWidth: true,
+                fullHeight: true
+            },
+            isSelected: false
+        }));
+        this.sourceElements.set(sourceElements);
+    }
+    handleSelectedItemsToSourceElements() {
+        const selectedItems = this.selectedItems();
+        if (!selectedItems.some((item) => item.rowData['identifier'])) {
+            return;
+        }
+        const identifiers = selectedItems.map((item) => item.rowData['identifier']);
+        const sourceElements = this.sourceElements().map((item) => ({
+            ...item,
+            isSelected: identifiers.includes(item.buttonConfig?.label)
+        }));
+        this.sourceElements.set(sourceElements);
+    }
+    identifiersSelected = signal([]);
+    //#endregion
+    get excelButton() {
+        return this.tableNgService.excelButton();
+    }
+    get pdfButton() {
+        return this.tableNgService.pdfButton();
+    }
+    lazyLoadingConfig = computed(() => {
+        return this.config()?.lazyLoadingConfig ?? undefined;
+    });
+    isEnabledLazyLoading = computed(() => {
+        return this.lazyLoadingConfig()?.isEnabled ?? false;
+    });
+    prepareDataForExport(dataToExport) {
+        const keys = this.config()?.keys ?? [];
+        const keysNames = this.config()?.keysNames ?? {};
+        return dataToExport.map((item) => {
+            const row = {};
+            const rowData = item.rowData;
+            keys.forEach((key) => {
+                const keyName = keysNames[key] ?? key;
+                if (rowData[key]) {
+                    let value = rowData[key];
+                    switch (typeof value) {
+                        case 'number':
+                            value = formatNumber(value);
+                            break;
+                        default:
+                            break;
+                    }
+                    row[keyName] = value;
+                }
+            });
+            return row;
+        });
+    }
+    exportCSV(data) {
+        // Create a new workbook
+        const workbook = XLSX.utils.book_new();
+        const worksheet = XLSX.utils.json_to_sheet(data);
+        // Get title from config or use default
+        const name = this.config()?.excelConfig?.name ?? 'Report';
+        const fileName = name || 'table-export';
+        // Excel sheet names cannot exceed 31 characters
+        const sheetName = name.substring(0, 31);
+        // Add the worksheet to the workbook
+        XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+        // Generate Excel file and trigger download
+        XLSX.writeFile(workbook, `${fileName}.xlsx`);
+    }
+    exportData(dt, endpoint) {
+        if (this.isEnabledLazyLoading()) {
+            const filters = dt.filters ?? {};
+            const filterQuery = {};
+            Object.entries(filters).forEach(([key, value]) => {
+                const keyName = key.split('.')[1];
+                const valueFilter = value[0]?.value;
+                filterQuery[keyName] = valueFilter;
+            });
+            this.lazyLoadingConfig()?.excelLazyLoadingConfig?.callback(removeNullUndefined(filterQuery))
+                .subscribe((response) => {
+                const data = this.prepareDataForExport(response);
+                if (endpoint === 'excel') {
+                    this.exportCSV(data);
+                }
+                else {
+                    this.exportPDF(data);
+                }
+            });
+        }
+        else {
+            const value = dt.value ?? this.data();
+            const filteredValue = dt.filteredValue ?? [];
+            let dataToExport = [];
+            if (filteredValue.length > 0) {
+                dataToExport = filteredValue;
+            }
+            else {
+                dataToExport = value;
+            }
+            const data = this.prepareDataForExport(dataToExport);
+            if (endpoint === 'excel') {
+                this.exportCSV(data);
+            }
+            else {
+                this.exportPDF(data);
+            }
+        }
+    }
+    exportPDF(data) {
+        // Get title from config or use default
+        const name = this.config()?.pdfConfig?.name ?? this.config()?.excelConfig?.name ?? 'Report';
+        const fileName = name || 'table-export';
+        // Get keys and column names
+        const keys = this.config()?.keys ?? [];
+        const keysNames = this.config()?.keysNames ?? {};
+        // Prepare headers
+        const headers = keys.map((key) => keysNames[key] ?? key);
+        // Prepare rows data
+        const rows = data.map((row) => {
+            return keys.map((key) => {
+                const keyName = keysNames[key] ?? key;
+                return row[keyName] ?? '';
+            });
+        });
+        // Create PDF document
+        const doc = new jsPDF({
+            orientation: 'landscape',
+            unit: 'mm',
+            format: 'a4'
+        });
+        // Add title
+        doc.setFontSize(16);
+        doc.text(name, 14, 15);
+        // Add table
+        autoTable(doc, {
+            head: [headers],
+            body: rows,
+            startY: 20,
+            styles: {
+                fontSize: 8,
+                cellPadding: 2
+            },
+            headStyles: {
+                fillColor: [66, 139, 202],
+                textColor: 255,
+                fontStyle: 'bold'
+            },
+            alternateRowStyles: {
+                fillColor: [245, 245, 245]
+            },
+            margin: { top: 20 }
+        });
+        // Save PDF
+        doc.save(`${fileName}.pdf`);
+    }
+    enableExcelButton = computed(() => {
+        return this.config()?.excelConfig?.isEnabled ?? false;
+    });
+    enablePdfButton = computed(() => {
+        return this.config()?.pdfConfig?.isEnabled ?? false;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "app-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<app-aminated-container>\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    <app-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        <app-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n          (formSubmit)=\"submitGlobalSearch($event)\"></app-form>\r\n        }\r\n        @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n        <app-button-ng class=\"animate__animated animate__fadeIn\"\r\n          [buttonConfig]=\"advancedIdentifierFiltersButton()\"></app-button-ng>\r\n        }\r\n        @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n        <app-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></app-button-ng>\r\n        }\r\n      </div>\r\n      <div class=\"flex gap-2\" toolbarEnd>\r\n        @if (toolbarButtons().length > 0) {\r\n        @for (button of toolbarButtons(); track $index) {\r\n        <app-button-ng [buttonConfig]=\"button\"></app-button-ng>\r\n        }\r\n        }\r\n        @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n        <app-button-ng [buttonConfig]=\"addRowButton()\"></app-button-ng>\r\n        }\r\n        @if (enableExcelButton()) {\r\n        <app-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></app-button-ng>\r\n        }\r\n        @if (enablePdfButton()) {\r\n        <app-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></app-button-ng>\r\n        }\r\n      </div>\r\n    </app-toolbar-ng>\r\n    }\r\n    <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n      [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n      [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n      [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n      [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n      [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n      (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n      [currentPageReportTemplate]=\"'custom-page-report'\" selectionPageOnly=\"true\"\r\n      dataKey=\"id\" class=\"w-full\">\r\n      <ng-template #header let-columns>\r\n        <tr>\r\n          @if (rowExpansionConfig?.isEnabled) {\r\n          <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n          </th>\r\n          }\r\n          @if (selectionTableConfig?.isEnabled) {\r\n          <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n            <p-tableHeaderCheckbox />\r\n          </th>\r\n          }\r\n\r\n          @if (selectedColumns) {\r\n          @for (column of columns; track $index) {\r\n          <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n            [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n            class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n            <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n              {{ column.field | keyToDisplayName: keysNames }}\r\n              @if(!editEnabled){\r\n              <p-sortIcon [field]=\"column.field\" />\r\n              }\r\n              @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n              <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n                @if (\r\n                filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n                ?.isEnabled ?? false\r\n                ) {\r\n                <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                  <div style=\"min-width: 20rem\" class=\"\">\r\n                      <app-inline-input \r\n                      (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\" \r\n                      (outputDebounced)=\"onFilter($event)\"\r\n                      [(ngModel)]=\"advancedFiltersValues()[column.field]\" \r\n                      [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-inline-input>\r\n                  </div>\r\n                </ng-template>\r\n                }\r\n              </p-columnFilter>\r\n              }\r\n            </div>\r\n          </th>\r\n          }\r\n          }@else {\r\n          @for (key of keys(); track $index) {\r\n          <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n            [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n            class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n              {{ key | keyToDisplayName: keysNames }}\r\n              @if(!editEnabled){\r\n              <p-sortIcon [field]=\"key\" />\r\n              }\r\n              @if (filterConfigByKey?.[key]?.isEnabled) {\r\n              <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n                [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n                [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n                [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n                [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n                [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n                [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n                @if (\r\n                filterConfigByKey?.[key]?.customColumnFilterConfig\r\n                ?.isEnabled ?? false\r\n                ) {\r\n                <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                  <div style=\"min-width: 20rem\" class=\"\">\r\n                    <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                      <app-inline-input (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\" [(ngModel)]=\"advancedFiltersValues()[key]\" [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-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            <!-- Estado de carga -->\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\">{{ '' }}</p>\r\n              </div>\r\n            </div>\r\n            } @else if (timeoutExpired()) {\r\n            <!-- Timeout expirado sin datos -->\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\">{{ '' }}</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                <app-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </app-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n          </td>\r\n          }\r\n          } @else {\r\n          @for (key of keys(); track $index){\r\n          <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </app-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n                {{ item.rowData[key] }}\r\n              </ng-template>\r\n            </p-cellEditor>\r\n          </td>\r\n          }\r\n          }\r\n          @if (editType === 'cell' && editEnabled) {\r\n          <td class=\"px-2 py-1 text-center\">\r\n            <div class=\"flex justify-center items-center gap-2\">\r\n              <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-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                  <app-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                  </app-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 ?? 'USD' : item?.currencyTypeCellConfig?.[column.field]?.locale ?? 'es-CO' }} \r\n                  </div>\r\n                  } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                  <div class=\"text-left\">\r\n                    {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                  </div>\r\n                  } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                  <div class=\"text-left\">\r\n                    {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                  </div>\r\n                  } @else {\r\n                  @if (item.rowData[column.field]?.name) {\r\n                  {{ item.rowData[column.field]?.name }}\r\n                  } @else {\r\n                  {{ item.rowData[column.field] }}\r\n                  }\r\n                  }\r\n\r\n\r\n                </ng-template>\r\n              </p-cellEditor>\r\n\r\n              @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n              <span class=\"text-red-500 italic text-xs\">{{\r\n                rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n                '' }}</span>\r\n              }\r\n            </div>\r\n          </td>\r\n          }\r\n          } @else {\r\n          @for (key of keys(); track $index){\r\n          <td>\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-cellEditor>\r\n                <ng-template #input>\r\n                  <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                    (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </app-inline-input>\r\n                </ng-template>\r\n                <ng-template #output>\r\n\r\n                  @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                  <div class=\"text-right\">\r\n                    {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                  </div>\r\n                  }\r\n                  @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                  <div class=\"text-right\">\r\n                    {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                  </div>\r\n                  } @else {\r\n                  @if (item.rowData[key]?.name) {\r\n                  {{ item.rowData[key]?.name }}\r\n                  } @else {\r\n                  {{ item.rowData[key] }}\r\n                  }\r\n                  }\r\n\r\n\r\n                </ng-template>\r\n              </p-cellEditor>\r\n\r\n              @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n              <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n                '' }}</span>\r\n              }\r\n            </div>\r\n          </td>\r\n          }\r\n          }\r\n          <td>\r\n            <div class=\"flex justify-center items-center gap-2\">\r\n              @if(!editing){\r\n              <app-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n                (onClick)=\"onRowEditInit(item)\"></app-button-ng>\r\n                @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n                <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-button-ng>\r\n                }\r\n              }\r\n              @if(editing){\r\n              @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n              <app-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n                (onClick)=\"onEditSaveWithErrors()\"></app-button-ng>\r\n              }\r\n              @else {\r\n              <app-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n                (onClick)=\"onRowEditSave(item)\"></app-button-ng>\r\n              }\r\n              <app-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n                (onClick)=\"onRowEditCancel(item, ri)\"></app-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\"\r\n          [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          }\"\r\n          (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n          @if (rowExpansionConfig?.isEnabled) {\r\n          <td (click)=\"$event.stopPropagation()\" \r\n            [class.skeleton-cell]=\"item.isLoading\"\r\n            [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n            @if (!item.isLoading) {\r\n            <app-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n              [pRowToggler]=\"item\"></app-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()\" \r\n            alignFrozen=\"left\" \r\n            pFrozenColumn \r\n            class=\"shadow-lg\" \r\n            [class.skeleton-cell]=\"item.isLoading\"\r\n            [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\" \r\n            [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n            alignFrozen=\"right\" pFrozenColumn\r\n            [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              <app-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></app-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: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n            }\r\n            @case (ETypeInput.BADGE) {\r\n            <app-badge-ng [config]=\"item.rowData[key]\"></app-badge-ng>\r\n            }\r\n            @case (ETypeInput.COMPONENT) {\r\n            <ng-container *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n            }\r\n            @default {\r\n            @if (isDate(item.rowData[key])) {\r\n            {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n            } @else if (typeof item.rowData[key] === \"string\") {\r\n            {{ item.rowData[key] }}\r\n            } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n            {{ item.rowData[key].name }}\r\n            } @else if(typeof item.rowData[key] === \"number\") {\r\n            <p class=\"text-right\">\r\n              {{ item.rowData[key] | number: '1.2-2' }}\r\n            </p>\r\n            }\r\n            }\r\n            }\r\n            }\r\n            }\r\n          </td>\r\n          }\r\n          }\r\n        </tr>\r\n      </ng-template>\r\n      }\r\n      }\r\n\r\n      <ng-template #footer>\r\n        @if (footerEnabled) {\r\n        @for (row of footerRows; track $index) {\r\n        <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n          @for (cell of row; track $index) {\r\n          <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n            applyPipe(cell.value,\r\n            cell.pipeConfig) }}</td>\r\n\r\n          }\r\n        </tr>\r\n        }\r\n\r\n        }\r\n      </ng-template>\r\n      <ng-template #expandedrow let-item>\r\n        <tr>\r\n          <td colspan=\"100%\">\r\n            <div class=\"p-datatable-row-expansion\">\r\n              <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n    </p-table>\r\n    @if (showBottomToolbar()) {\r\n    <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n      <app-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\">Has seleccionado</span>\r\n          <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n            <span class=\"font-semibold text-gray-900\">{{\r\n              totalItemsSelected().toLocaleString()\r\n              }}</span>\r\n          </div>\r\n          <span class=\"text-sm text-gray-600\">registros</span>\r\n          <app-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></app-button-ng>\r\n        </div>\r\n        }\r\n      </app-toolbar-ng>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (httpMessage()) {\r\n    <app-http-message [(httpMessage)]=\"httpMessage\"></app-http-message>\r\n  }\r\n</app-aminated-container>", 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(.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(.dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "app-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "app-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "app-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: "app-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: AminatedContainerComponent, selector: "app-aminated-container" }, { kind: "component", type: BadgeNgComponent, selector: "app-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "app-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-ng', imports: [
+                        CommonModule,
+                        TableModule,
+                        ButtonNgComponent,
+                        ToolbarNgComponent,
+                        FormComponent,
+                        KeyToDisplayNamePipe,
+                        FormsModule,
+                        InlineInputComponent,
+                        AminatedContainerComponent,
+                        BadgeNgComponent,
+                        HttpMessageComponent
+                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<app-aminated-container>\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    <app-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        <app-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n          (formSubmit)=\"submitGlobalSearch($event)\"></app-form>\r\n        }\r\n        @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n        <app-button-ng class=\"animate__animated animate__fadeIn\"\r\n          [buttonConfig]=\"advancedIdentifierFiltersButton()\"></app-button-ng>\r\n        }\r\n        @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n        <app-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></app-button-ng>\r\n        }\r\n      </div>\r\n      <div class=\"flex gap-2\" toolbarEnd>\r\n        @if (toolbarButtons().length > 0) {\r\n        @for (button of toolbarButtons(); track $index) {\r\n        <app-button-ng [buttonConfig]=\"button\"></app-button-ng>\r\n        }\r\n        }\r\n        @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n        <app-button-ng [buttonConfig]=\"addRowButton()\"></app-button-ng>\r\n        }\r\n        @if (enableExcelButton()) {\r\n        <app-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></app-button-ng>\r\n        }\r\n        @if (enablePdfButton()) {\r\n        <app-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></app-button-ng>\r\n        }\r\n      </div>\r\n    </app-toolbar-ng>\r\n    }\r\n    <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n      [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n      [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n      [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n      [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n      [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n      (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n      [currentPageReportTemplate]=\"'custom-page-report'\" selectionPageOnly=\"true\"\r\n      dataKey=\"id\" class=\"w-full\">\r\n      <ng-template #header let-columns>\r\n        <tr>\r\n          @if (rowExpansionConfig?.isEnabled) {\r\n          <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n          </th>\r\n          }\r\n          @if (selectionTableConfig?.isEnabled) {\r\n          <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n            <p-tableHeaderCheckbox />\r\n          </th>\r\n          }\r\n\r\n          @if (selectedColumns) {\r\n          @for (column of columns; track $index) {\r\n          <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n            [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n            class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n            <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n              {{ column.field | keyToDisplayName: keysNames }}\r\n              @if(!editEnabled){\r\n              <p-sortIcon [field]=\"column.field\" />\r\n              }\r\n              @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n              <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n                @if (\r\n                filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n                ?.isEnabled ?? false\r\n                ) {\r\n                <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                  <div style=\"min-width: 20rem\" class=\"\">\r\n                      <app-inline-input \r\n                      (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\" \r\n                      (outputDebounced)=\"onFilter($event)\"\r\n                      [(ngModel)]=\"advancedFiltersValues()[column.field]\" \r\n                      [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-inline-input>\r\n                  </div>\r\n                </ng-template>\r\n                }\r\n              </p-columnFilter>\r\n              }\r\n            </div>\r\n          </th>\r\n          }\r\n          }@else {\r\n          @for (key of keys(); track $index) {\r\n          <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n            [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n            class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n            <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n              {{ key | keyToDisplayName: keysNames }}\r\n              @if(!editEnabled){\r\n              <p-sortIcon [field]=\"key\" />\r\n              }\r\n              @if (filterConfigByKey?.[key]?.isEnabled) {\r\n              <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n                [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n                [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n                [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n                [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n                [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n                [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n                @if (\r\n                filterConfigByKey?.[key]?.customColumnFilterConfig\r\n                ?.isEnabled ?? false\r\n                ) {\r\n                <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                  <div style=\"min-width: 20rem\" class=\"\">\r\n                    <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                      <app-inline-input (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\" [(ngModel)]=\"advancedFiltersValues()[key]\" [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></app-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            <!-- Estado de carga -->\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\">{{ '' }}</p>\r\n              </div>\r\n            </div>\r\n            } @else if (timeoutExpired()) {\r\n            <!-- Timeout expirado sin datos -->\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\">{{ '' }}</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                <app-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </app-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n          </td>\r\n          }\r\n          } @else {\r\n          @for (key of keys(); track $index){\r\n          <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </app-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n                {{ item.rowData[key] }}\r\n              </ng-template>\r\n            </p-cellEditor>\r\n          </td>\r\n          }\r\n          }\r\n          @if (editType === 'cell' && editEnabled) {\r\n          <td class=\"px-2 py-1 text-center\">\r\n            <div class=\"flex justify-center items-center gap-2\">\r\n              <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-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                  <app-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                  </app-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 ?? 'USD' : item?.currencyTypeCellConfig?.[column.field]?.locale ?? 'es-CO' }} \r\n                  </div>\r\n                  } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                  <div class=\"text-left\">\r\n                    {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                  </div>\r\n                  } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                  <div class=\"text-left\">\r\n                    {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                  </div>\r\n                  } @else {\r\n                  @if (item.rowData[column.field]?.name) {\r\n                  {{ item.rowData[column.field]?.name }}\r\n                  } @else {\r\n                  {{ item.rowData[column.field] }}\r\n                  }\r\n                  }\r\n\r\n\r\n                </ng-template>\r\n              </p-cellEditor>\r\n\r\n              @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n              <span class=\"text-red-500 italic text-xs\">{{\r\n                rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n                '' }}</span>\r\n              }\r\n            </div>\r\n          </td>\r\n          }\r\n          } @else {\r\n          @for (key of keys(); track $index){\r\n          <td>\r\n            <div class=\"flex flex-col gap-2\">\r\n              <p-cellEditor>\r\n                <ng-template #input>\r\n                  <app-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                    (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                  </app-inline-input>\r\n                </ng-template>\r\n                <ng-template #output>\r\n\r\n                  @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                  <div class=\"text-right\">\r\n                    {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                  </div>\r\n                  }\r\n                  @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                  <div class=\"text-right\">\r\n                    {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                  </div>\r\n                  } @else {\r\n                  @if (item.rowData[key]?.name) {\r\n                  {{ item.rowData[key]?.name }}\r\n                  } @else {\r\n                  {{ item.rowData[key] }}\r\n                  }\r\n                  }\r\n\r\n\r\n                </ng-template>\r\n              </p-cellEditor>\r\n\r\n              @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n              <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n                '' }}</span>\r\n              }\r\n            </div>\r\n          </td>\r\n          }\r\n          }\r\n          <td>\r\n            <div class=\"flex justify-center items-center gap-2\">\r\n              @if(!editing){\r\n              <app-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n                (onClick)=\"onRowEditInit(item)\"></app-button-ng>\r\n                @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n                <app-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></app-button-ng>\r\n                }\r\n              }\r\n              @if(editing){\r\n              @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n              <app-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n                (onClick)=\"onEditSaveWithErrors()\"></app-button-ng>\r\n              }\r\n              @else {\r\n              <app-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n                (onClick)=\"onRowEditSave(item)\"></app-button-ng>\r\n              }\r\n              <app-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n                (onClick)=\"onRowEditCancel(item, ri)\"></app-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\"\r\n          [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          }\"\r\n          (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n          @if (rowExpansionConfig?.isEnabled) {\r\n          <td (click)=\"$event.stopPropagation()\" \r\n            [class.skeleton-cell]=\"item.isLoading\"\r\n            [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n            @if (!item.isLoading) {\r\n            <app-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n              [pRowToggler]=\"item\"></app-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()\" \r\n            alignFrozen=\"left\" \r\n            pFrozenColumn \r\n            class=\"shadow-lg\" \r\n            [class.skeleton-cell]=\"item.isLoading\"\r\n            [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\" \r\n            [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n            alignFrozen=\"right\" pFrozenColumn\r\n            [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              <app-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></app-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: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n            }\r\n            @case (ETypeInput.BADGE) {\r\n            <app-badge-ng [config]=\"item.rowData[key]\"></app-badge-ng>\r\n            }\r\n            @case (ETypeInput.COMPONENT) {\r\n            <ng-container *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n            }\r\n            @default {\r\n            @if (isDate(item.rowData[key])) {\r\n            {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n            } @else if (typeof item.rowData[key] === \"string\") {\r\n            {{ item.rowData[key] }}\r\n            } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n            {{ item.rowData[key].name }}\r\n            } @else if(typeof item.rowData[key] === \"number\") {\r\n            <p class=\"text-right\">\r\n              {{ item.rowData[key] | number: '1.2-2' }}\r\n            </p>\r\n            }\r\n            }\r\n            }\r\n            }\r\n            }\r\n          </td>\r\n          }\r\n          }\r\n        </tr>\r\n      </ng-template>\r\n      }\r\n      }\r\n\r\n      <ng-template #footer>\r\n        @if (footerEnabled) {\r\n        @for (row of footerRows; track $index) {\r\n        <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n          @for (cell of row; track $index) {\r\n          <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n            applyPipe(cell.value,\r\n            cell.pipeConfig) }}</td>\r\n\r\n          }\r\n        </tr>\r\n        }\r\n\r\n        }\r\n      </ng-template>\r\n      <ng-template #expandedrow let-item>\r\n        <tr>\r\n          <td colspan=\"100%\">\r\n            <div class=\"p-datatable-row-expansion\">\r\n              <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n            </div>\r\n          </td>\r\n        </tr>\r\n      </ng-template>\r\n    </p-table>\r\n    @if (showBottomToolbar()) {\r\n    <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n      <app-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\">Has seleccionado</span>\r\n          <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n            <span class=\"font-semibold text-gray-900\">{{\r\n              totalItemsSelected().toLocaleString()\r\n              }}</span>\r\n          </div>\r\n          <span class=\"text-sm text-gray-600\">registros</span>\r\n          <app-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></app-button-ng>\r\n        </div>\r\n        }\r\n      </app-toolbar-ng>\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (httpMessage()) {\r\n    <app-http-message [(httpMessage)]=\"httpMessage\"></app-http-message>\r\n  }\r\n</app-aminated-container>", 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(.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(.dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dt: [{
+                type: ViewChild,
+                args: ['dt']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item', { static: true }]
+            }] } });
+
 /*
  * Public API Surface of lib-components
 
@@ -193,5 +2500,5 @@ de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, ButtonNgComponent, EmptyMessageComponent, LibComponentsComponent, LibComponentsService };
+export { ButtonNgComponent, ETypeInput, FormComponent, InlineInputComponent, LibComponentsComponent, LibComponentsService, TableNgComponent };
 //# sourceMappingURL=ln-20-lib-components.mjs.map