ln-20-lib-components 0.0.47 → 0.0.50

package/fesm2022/{ln-20-lib-components-ln-20-lib-components-DW6-ezai.mjs → ln-20-lib-components-ln-20-lib-components-B1RfAxdW.mjs}

@@ -274,7 +274,7 @@ class CustomInputComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CustomInputComponent),
                 multi: true
-            }], ngImport: i0, template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && !hasControlValue()) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i5.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: DisabledContainerComponent, selector: "lib-disabled-container", inputs: ["disabled"], outputs: ["disabledChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            }], ngImport: i0, template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\" [readonly]=\"readonly\" [disabled]=\"readonly\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && !hasControlValue()) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: IftaLabelModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i5.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "size", "iconPos", "autofocus", "allowEmpty"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: DisabledContainerComponent, selector: "lib-disabled-container", inputs: ["disabled"], outputs: ["disabledChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CustomInputComponent, decorators: [{
             type: Component,
@@ -297,7 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CustomInputComponent),
                             multi: true
-                        }], template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && !hasControlValue()) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"] }]
+                        }], template: "@let localControl = controlData().control;\r\n@let placeholder = controlData().label || controlUpperName();\r\n@let name = controlData().controlName;\r\n@let typeInput = controlData().typeInput;\r\n@let readonly = controlData().readonly || false;\r\n@let dateConfig = controlData().dateConfig;\r\n@let multiSelectConfig = controlData().multiSelectConfig;\r\n@let selectConfig = controlData().selectConfig;\r\n@let toggleConfig = controlData().toggleConfig;\r\n@let textareaConfig = controlData().textareaConfig;\r\n@let currencyConfig = controlData().currencyConfig;\r\n@let decimalConfig = controlData().decimalConfig;\r\n@let autoFocus = controlData().autoFocus ?? false;\r\n<div class=\"flex flex-col gap-1 \">\r\n  <lib-disabled-container [disabled]=\"readonly\">\r\n\r\n    <p style=\"font-size: 12px; letter-spacing: 0.5px;\" class=\"text-sm text-gray-600 dark:text-gray-300 truncate\"\r\n      [pTooltip]=\"placeholder\" tooltipPosition=\"top\" [showDelay]=\"300\">\r\n      {{ placeholder }}\r\n    </p>\r\n    @switch (typeInput) {\r\n    @case (inputTypesEnum.EMAIL_PASSWORD) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      type=\"email\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\"\r\n      spellcheck=\"true\" [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    <input type=\"password\" name=\"password\" id=\"password-autofill-helper\" autocomplete=\"current-password\" tabindex=\"-1\"\r\n      style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n      aria-hidden=\"true\"\r\n      (input)=\"onPasswordAutofill($event)\" />\r\n    }\r\n    @case (inputTypesEnum.PASSWORD) {\r\n      <!-- Input oculto siempre de tipo password para el autocompletado del navegador -->\r\n      <input \r\n        type=\"password\" \r\n        name=\"password-autofill\"\r\n        [id]=\"'password-autofill-hidden-' + generateUniqueId(name)\"\r\n        autocomplete=\"current-password\" \r\n        tabindex=\"-1\"\r\n        style=\"position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"localControl.value || ''\"\r\n        (input)=\"onPasswordAutofillHidden($event)\" />\r\n      <div class=\"relative\">\r\n        <input [readOnly]=\"readonly || false\" [id]=\"generateUniqueId(name)\" [type]=\"showPassword ? 'text' : 'password'\"\r\n          autocomplete=\"password\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n          class=\"custom-password w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition-all duration-200\"\r\n          aria-describedby=\"password-help\" [formControl]=\"localControl\" \r\n          (input)=\"syncPasswordAutofill($event)\" />\r\n        <button type=\"button\"\r\n          class=\"custom-password-toggle absolute inset-y-0 right-0 flex items-center justify-center w-12 h-full text-gray-400 transition-colors duration-200 ease-in-out hover:text-gray-600 focus:outline-none focus:text-gray-600 active:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 dark:focus:text-gray-300\"\r\n          (click)=\"togglePasswordVisibility()\" [attr.aria-label]=\"\r\n                        showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\r\n                      \">\r\n          <i class=\"fas text-lg transition-all duration-200 ease-in-out\" [ngClass]=\"{\r\n                          'fa-solid fa-eye': !showPassword,\r\n                          'fa-solid fa-eye-slash': showPassword,\r\n                        }\"></i>\r\n        </button>\r\n      </div>\r\n    }\r\n    @case (inputTypesEnum.EMAIL) {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [name]=\"name\"\r\n      [type]=\"typeInput\" [readOnly]=\"readonly\" autocomplete=\"email\" autocorrect=\"on\" autocapitalize=\"on\" spellcheck=\"true\"\r\n      [ngClass]=\"{\r\n                  'border-red-500 focus:ring-red-500':\r\n                    localControl.invalid &&\r\n                    (localControl.dirty || localControl.touched),\r\n                  'bg-gray-100 cursor-not-allowed': readonly,\r\n                }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    @case (inputTypesEnum.CURRENCY) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onFocus)=\"onFocus()\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"currency\"\r\n      [currency]=\"currencyConfig?.currency ?? 'USD'\" [locale]=\"currencyConfig?.locale ?? 'es-CO'\" [minFractionDigits]=\"currencyConfig?.minFractionDigits ?? 2\"\r\n      [maxFractionDigits]=\"currencyConfig?.maxFractionDigits ?? 2\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.DATE) {\r\n    <lib-disabled-container [disabled]=\"readonly\">\r\n      <p-datepicker [formControl]=\"localControl\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\"\r\n        [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" class=\"custom-datepicker\"\r\n        appendTo=\"body\" />\r\n    </lib-disabled-container>\r\n    }\r\n    @case (inputTypesEnum.TOGGLE) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-togglebutton [formControl]=\"localControl\" [onLabel]=\"toggleConfig?.onLabel || 'Si'\"\r\n        [offLabel]=\"toggleConfig?.offLabel || 'No'\" class=\"custom-toggle\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.MULTISELECT) {\r\n    <p-multiselect [filter]=\"true\" [options]=\"multiSelectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"multiSelectConfig?.optionLabel ?? 'name'\" placeholder=\"\" [maxSelectedLabels]=\"3\"\r\n      class=\"custom-multiselect\" appendTo=\"body\" />\r\n    }\r\n    @case (inputTypesEnum.SELECT) {\r\n    <p-select [filter]=\"true\" [options]=\"selectConfig?.options\" [formControl]=\"localControl\"\r\n      [optionLabel]=\"selectConfig?.optionLabel ?? 'name'\" placeholder=\"\" class=\"custom-select\"\r\n      (onChange)=\"onSelectChange()\" appendTo=\"body\" [disabled]=\"readonly\" [readonly]=\"readonly\" [styleClass]=\"\r\n      (localControl.invalid && (localControl.dirty || localControl.touched) ? 'border-red-500 focus:ring-red-500 ' : '') +\r\n      (readonly ? 'bg-gray-100 cursor-not-allowed' : '')\r\n    \" />\r\n    }\r\n    \r\n    @case (inputTypesEnum.CHECKBOX) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <input [id]=\"generateUniqueId(name)\" [readOnly]=\"readonly\" [type]=\"typeInput\" [checked]=\"localControl.value\"\r\n        (change)=\"onCheckboxChange($event, localControl)\"\r\n        class=\"custom-checkbox h-5 w-5 border-2 border-gray-300 dark:border-transparent rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.OTP) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-inputotp [id]=\"generateUniqueId(name)\" (onBlur)=\"onTouched()\" [mask]=\"controlData().otpConfig?.mask ?? false\"\r\n        [length]=\"controlData().otpConfig?.length ?? 6\" [integerOnly]=\"controlData().otpConfig?.integerOnly ?? false\"\r\n        class=\"custom-otp border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        [formControl]=\"localControl\" />\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.SWITCH) {\r\n    <div class=\"flex justify-center items-center p-4\">\r\n      <p-toggleswitch [id]=\"generateUniqueId(name)\" [formControl]=\"localControl\" [readonly]=\"readonly\" [disabled]=\"readonly\"\r\n        class=\"custom-switch border-2 border-gray-300 dark:border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 transition-all duration-200\"\r\n        (change)=\"onCheckboxChange($event, localControl)\">\r\n        <ng-template #handle let-checked=\"checked\">\r\n          <span class=\"text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-full px-1\">\r\n            @if (checked) {\r\n            Si\r\n            }\r\n            @else {\r\n            No\r\n            }\r\n          </span>\r\n        </ng-template>\r\n      </p-toggleswitch>\r\n    </div>\r\n    }\r\n    @case (inputTypesEnum.DECIMAL) {\r\n    <p-inputnumber [autofocus]=\"autoFocus ?? false\" [formControl]=\"localControl\" (onBlur)=\"onBlur()\" (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" mode=\"decimal\"\r\n      (onFocus)=\"onFocus()\"\r\n      [locale]=\"'es-CO'\" [minFractionDigits]=\"decimalConfig?.minFractionDigits ?? 2\" [maxFractionDigits]=\"decimalConfig?.maxFractionDigits ?? 2\" [useGrouping]=\"decimalConfig?.useGrouping ?? true\" [readonly]=\"readonly\" [disabled]=\"readonly\" />\r\n    }\r\n    @case (inputTypesEnum.TEXTAREA) {\r\n    <textarea pTextarea [formControl]=\"localControl\" [rows]=\"textareaConfig?.rows ?? 3\"\r\n      [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n      (blur)=\"onTouched()\" [id]=\"generateUniqueId(name)\" [readonly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\"\r\n      autocapitalize=\"off\" spellcheck=\"false\"\r\n      class=\"custom-textarea w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\"></textarea>\r\n    }\r\n    @default {\r\n    <input [formControl]=\"localControl\" (blur)=\"onTouched()\" pInputText [id]=\"generateUniqueId(name)\" [type]=\"typeInput\"\r\n      [readOnly]=\"readonly\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [ngClass]=\"{\r\n            'border-red-500 focus:ring-red-500':\r\n              localControl.invalid &&\r\n              (localControl.dirty || localControl.touched),\r\n            'bg-gray-100 cursor-not-allowed': readonly,\r\n          }\"\r\n      class=\"custom-input h-12 w-full px-3 py-2 border border-gray-300 dark:border-transparent rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100\" />\r\n    }\r\n    }\r\n  </lib-disabled-container>\r\n\r\n</div>\r\n\r\n@if (localControl.invalid && !hasControlValue()) {\r\n<div class=\"custom-error mt-1 text-sm text-red-600 dark:text-red-400\">\r\n  @if (localControl.errors?.[\"required\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El campo es requerido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"min\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00EDnimo es de ' +\r\n    localControl.errors?.[\"min\"].min.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"max\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{ 'El valor m\u00E1ximo es de ' +\r\n    localControl.errors?.[\"max\"].max.toFixed(2) }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"minlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00EDnimo es de ' + localControl.errors?.[\"minlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"maxlength\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El largo m\u00E1ximo es de ' + localControl.errors?.[\"maxlength\"].requiredLength\r\n    }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"email\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El correo electr\u00F3nico no es v\u00E1lido' }}</span>\r\n  }\r\n  @if (localControl.errors?.[\"pattern\"]) {\r\n  <span style=\"font-size: 0.675rem; font-style: italic; letter-spacing: 0.02em;\">{{\r\n    'El formato no es v\u00E1lido' }}</span>\r\n  }\r\n</div>\r\n}", styles: ["@charset \"UTF-8\";:host ::ng-deep p-datepicker>span>.p-inputtext{width:100%;border-radius:.5rem;outline:none;background-color:#f9fafb;height:44px;padding-right:2.5rem;color:#111827;transition:all .2s ease-in-out}:host ::ng-deep p-datepicker>.p-datepicker>.p-inputtext{background:transparent;color:#111827;height:44px;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-datepicker>.p-datepicker>.p-inputtext{background:transparent;background-color:#374151;color:#f3f4f6}:host ::ng-deep p-datepicker>span{width:100%;position:relative;display:inline-flex}:host ::ng-deep p-datepicker .p-datepicker-trigger{position:absolute!important;right:0!important;top:0!important;height:44px!important;width:2.5rem!important;background:transparent!important;border:none!important;box-shadow:none!important;color:#6b7280!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:1!important}:host ::ng-deep .my-app-dark p-datepicker .p-datepicker-trigger{color:#9ca3af!important}:host ::ng-deep p-datepicker .p-datepicker-trigger .p-button-icon{font-size:.875rem}:host ::ng-deep p-multiselect{border:1px solid #d1d5db;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-multiselect{background:transparent;color:#f3f4f6}:host ::ng-deep p-select{background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-select{background:transparent;color:#f3f4f6}:host ::ng-deep p-select>.p-select-label{font-size:small;position:relative}:host ::ng-deep p-inputnumber{background:transparent;color:#111827;height:44px;width:100%;border:1px solid #d1d5db;border-radius:.5rem;transition:all .2s ease-in-out}:host ::ng-deep .my-app-dark p-inputnumber{background:transparent;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .custom-datepicker>.p-inputwrapper>.p-inputtext{color:#f3f4f6;background-color:#374151}:host-context(.my-app-dark) ::ng-deep p-datepicker>span>.p-inputtext{background-color:#374151;color:#f3f4f6}:host-context(.my-app-dark) ::ng-deep .p-inputtext{background-color:#374151;color:#f3f4f6;border-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}\n"] }]
         }], ctorParameters: () => [] });
 
 class FormChildComponent {
@@ -2442,7 +2442,7 @@ class TableNgService {
     //#endregion
     //#region Selection
     async openModalManagementSelectedItems(selectedItems, config) {
-        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-e-1UUM5O.mjs');
+        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-Cp7g7mPX.mjs');
         let configSelectedItems = config;
         if (config) {
             configSelectedItems = structuredClone(config);
@@ -2583,6 +2583,7 @@ class TableNgComponent {
     outputRowDataChange = output();
     outputEditData = output();
     outputIsEditing = output();
+    outputCheckAll = output();
     resetData() {
         this.data.set([]);
     }
@@ -2590,11 +2591,26 @@ class TableNgComponent {
     advancedFiltersValues = signal({});
     dt;
     fb = inject(NonNullableFormBuilder);
-    inlineConfigCheckHeader(typeInput) {
+    /**
+     * Config del control booleano en el header por columna.
+     * Si todas las celdas checkeables (INPUT + CHECKBOX|SWITCH) de esa columna son readonly,
+     * el control del header también debe ser readonly.
+     */
+    inlineConfigCheckHeader(columnKey, typeInput) {
         return {
-            typeInput
+            typeInput,
+            readonly: this.isColumnBulkReadonly(columnKey)
         };
     }
+    /**
+     * True si hay al menos una celda checkeable en la columna y todas son readonly.
+     */
+    isColumnBulkReadonly(columnKey) {
+        const rows = this.data().filter((row) => this.isInputCheckboxOrSwitchCell(row, columnKey));
+        if (rows.length === 0)
+            return false;
+        return rows.every((row) => row.rowDataInput?.[columnKey]?.readonly === true);
+    }
     inlineConfigCheckHeaderCheckAll = {
         typeInput: ETypeInput.SWITCH
     };
@@ -2645,6 +2661,7 @@ class TableNgComponent {
             return { ...row, rowData: nextRowData };
         }));
         this.outputChangeData.emit([...this.data()]);
+        this.outputCheckAll.emit(value);
     }
     //#region Labels Configuration
     /** Get pagination report template with default English value */
@@ -3557,7 +3574,7 @@ class TableNgComponent {
         return this.tableNgService.refreshButton();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarSpeedDialButtons: { classPropertyName: "toolbarSpeedDialButtons", publicName: "toolbarSpeedDialButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", toolbarSpeedDialButtons: "toolbarSpeedDialButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", 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;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n@let inputConfig = config()?.inputConfig;\n@let hasCheckRows = config()?.hasCheckRows ?? false;\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n      @if (hasCheckRows) {\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n        <lib-inline-input\n          [ngModel]=\"checkAllHeaderReflectValue()\"\n          (ngModelChange)=\"checkAll($event)\"\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\n        </lib-inline-input>\n    </div>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarSpeedDialButtons().length > 0) {\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\n      }\n      }\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[column.field]?.isEnabled) {\n              @if (inputConfig?.[column.field]?.type === ETypeInput.SWITCH || inputConfig?.[column.field]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\n                    [config]=\"inlineConfigCheckHeader(inputConfig![column.field]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n            \n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[key]?.isEnabled) {\n              @if (inputConfig?.[key]?.type === ETypeInput.SWITCH || inputConfig?.[key]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\n                    [config]=\"inlineConfigCheckHeader(inputConfig![key]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\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,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\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,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @case (ETypeInput.INPUT) {\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\n            (outputValue)=\"handleCheckValue()\"\n            >\n          </lib-inline-input>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }, { kind: "component", type: SpeedDialComponent, selector: "lib-speed-dial", inputs: ["speedDialConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarSpeedDialButtons: { classPropertyName: "toolbarSpeedDialButtons", publicName: "toolbarSpeedDialButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", toolbarSpeedDialButtons: "toolbarSpeedDialButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", outputCheckAll: "outputCheckAll", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n@let inputConfig = config()?.inputConfig;\n@let hasCheckRows = config()?.hasCheckRows ?? false;\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n      @if (hasCheckRows) {\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n        <lib-inline-input\n          [ngModel]=\"checkAllHeaderReflectValue()\"\n          (ngModelChange)=\"checkAll($event)\"\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\n        </lib-inline-input>\n    </div>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarSpeedDialButtons().length > 0) {\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\n      }\n      }\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[column.field]?.isEnabled) {\n              @if (inputConfig?.[column.field]?.type === ETypeInput.SWITCH || inputConfig?.[column.field]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\n                    [config]=\"inlineConfigCheckHeader(column.field, inputConfig![column.field]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n            \n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[key]?.isEnabled) {\n              @if (inputConfig?.[key]?.type === ETypeInput.SWITCH || inputConfig?.[key]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\n                    [config]=\"inlineConfigCheckHeader(key, inputConfig![key]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field].value }}\n              </div>\n              }\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\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,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\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,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @case (ETypeInput.INPUT) {\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\n            (outputValue)=\"handleCheckValue()\"\n            >\n          </lib-inline-input>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }, { kind: "component", type: SpeedDialComponent, selector: "lib-speed-dial", inputs: ["speedDialConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
             type: Component,
@@ -3573,7 +3590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         BadgeNgComponent,
                         HttpMessageComponent,
                         SpeedDialComponent
-                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n@let inputConfig = config()?.inputConfig;\n@let hasCheckRows = config()?.hasCheckRows ?? false;\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n      @if (hasCheckRows) {\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n        <lib-inline-input\n          [ngModel]=\"checkAllHeaderReflectValue()\"\n          (ngModelChange)=\"checkAll($event)\"\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\n        </lib-inline-input>\n    </div>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarSpeedDialButtons().length > 0) {\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\n      }\n      }\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[column.field]?.isEnabled) {\n              @if (inputConfig?.[column.field]?.type === ETypeInput.SWITCH || inputConfig?.[column.field]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\n                    [config]=\"inlineConfigCheckHeader(inputConfig![column.field]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n            \n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[key]?.isEnabled) {\n              @if (inputConfig?.[key]?.type === ETypeInput.SWITCH || inputConfig?.[key]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\n                    [config]=\"inlineConfigCheckHeader(inputConfig![key]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\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,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\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,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @case (ETypeInput.INPUT) {\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\n            (outputValue)=\"handleCheckValue()\"\n            >\n          </lib-inline-input>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\n@let globalFilterConfig = config()?.globalFilterConfig;\n@let selectionTableConfig = config()?.selectionTableConfig;\n@let filterConfigByKey = config()?.filterConfigByKey;\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\n@let scrollConfig = config()?.scrollConfig;\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\n@let keysNames = config()?.keysNames;\n@let columnConfig = config()?.columnConfig;\n@let editEnabled = editConfig()?.isEnabled ?? false;\n@let editType = editConfig()?.type ?? 'cell';\n@let inlineControls = editConfig()?.inlineControls;\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\n@let footerRows = footerConfig()?.footerRows;\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\n@let titleConfig = config()?.titleConfig;\n@let selectedColumns = config()?.selectedColumns;\n@let rowExpansionConfig = config()?.rowExpansionConfig;\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\n@let inputConfig = config()?.inputConfig;\n@let hasCheckRows = config()?.hasCheckRows ?? false;\n<div class=\"p-datatable-wrapper\">\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\n  <div class=\"table-title-container\">\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\n  </div>\n  }\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\n    <div class=\"flex gap-2\" toolbarStart>\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\n      }\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\n      }\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\n      }\n      @if (hasCheckRows) {\n      <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n        <lib-inline-input\n          [ngModel]=\"checkAllHeaderReflectValue()\"\n          (ngModelChange)=\"checkAll($event)\"\n          [config]=\"inlineConfigCheckHeaderCheckAll\">\n        </lib-inline-input>\n    </div>\n      }\n    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\n      @if (toolbarSpeedDialButtons().length > 0) {\n      @for (speedDial of toolbarSpeedDialButtons(); track $index) {\n      <lib-speed-dial [speedDialConfig]=\"speedDial\"></lib-speed-dial>\n      }\n      }\n      @if (toolbarButtons().length > 0) {\n      @for (button of toolbarButtons(); track $index) {\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\n      }\n      }\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\n      }\n      @if (enableExcelButton()) {\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\n      }\n      @if (enablePdfButton()) {\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\n      }\n      @if (enableRefreshButton) {\n      <lib-button-ng [buttonConfig]=\"refreshButton\"></lib-button-ng>\n      }\n    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" tableStyleClass=\"table table-xs\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\n    [editMode]=\"editType\" [totalRecords]=\"\n        lazyLoadingConfig?.isEnabled\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\n          : data().length\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\n    <ng-template #header let-columns>\n      <tr>\n        @if (rowExpansionConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n\n        </th>\n        }\n        @if (selectionTableConfig?.isEnabled) {\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\n          <p-tableHeaderCheckbox />\n        </th>\n        }\n\n        @if (selectedColumns) {\n        @for (column of columns; track $index) {\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\n                          'p-frozen-column': frozenHandle(\n                            frozenColumnConfigByKey?.[column.field]\n                          ),\n                        }\">\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ column.field | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[column.field]?.isEnabled) {\n              @if (inputConfig?.[column.field]?.type === ETypeInput.SWITCH || inputConfig?.[column.field]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(column.field)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, column.field)\"\n                    [config]=\"inlineConfigCheckHeader(column.field, inputConfig![column.field]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"column.field\" />\n            }\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(column.field),\n                }\" [type]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\n                  'text'\n                \" [matchMode]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.matchMode\n                \" [showMatchModes]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showMatchModes ?? false\n                \" [showOperator]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showOperator ?? false\n                \" [showAddButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showAddButton ?? false\n                \" [showApplyButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showApplyButton ?? false\n                \" [showClearButton]=\"\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\n                    ?.showClearButton ?? false\n                \">\n              @if (\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }@else {\n        @for (key of keys(); track $index) {\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n            }\">\n            \n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\n            @if (inputConfig?.[key]?.isEnabled) {\n              @if (inputConfig?.[key]?.type === ETypeInput.SWITCH || inputConfig?.[key]?.type === ETypeInput.CHECKBOX) {\n                <div class=\"inline-flex\" (click)=\"$event.stopPropagation()\">\n                  <lib-inline-input\n                    [ngModel]=\"booleanColumnHeaderReflectValue(key)\"\n                    (ngModelChange)=\"applyBulkBooleanToColumn($event, key)\"\n                    [config]=\"inlineConfigCheckHeader(key, inputConfig![key]!.type)\">\n                  </lib-inline-input>\n                </div>\n              }\n            }\n            @if(!editEnabled){\n            <p-sortIcon [field]=\"key\" />\n            }\n            @if (filterConfigByKey?.[key]?.isEnabled) {\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\n                    advancedFiltersPerformed.includes(key),\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\n              @if (\n              filterConfigByKey?.[key]?.customColumnFilterConfig\n              ?.isEnabled ?? false\n              ) {\n              <ng-template #filter let-value let-filter=\"filterCallback\">\n                <div style=\"min-width: 20rem\" class=\"\">\n                  <!-- <app-custom-advanced-filter filter\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\n                      (formChanges)=\"formChanges($event, filter, key)\"\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\n                  <lib-inline-input\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\n                </div>\n              </ng-template>\n              }\n            </p-columnFilter>\n            }\n          </div>\n        </th>\n        }\n        }\n\n        @if (editType === 'cell' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n        @if (editType === 'row' && editEnabled) {\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\n        </th>\n        }\n\n      </tr>\n    </ng-template>\n\n    <ng-template #emptymessage>\n      <tr>\n        <td [attr.colspan]=\"totalColumns()\">\n          @if (isLoading()) {\n          <!-- Loading state -->\n          <div class=\"p-8 text-center\">\n            <div class=\"flex flex-col items-center justify-center gap-4\">\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\n            </div>\n          </div>\n          } @else if (timeoutExpired()) {\n          <!-- No data available -->\n          <div class=\"p-8 text-center text-gray-500\">\n            <div class=\"flex flex-col items-center justify-center gap-3\">\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\n            </div>\n          </div>\n          }\n        </td>\n      </tr>\n    </ng-template>\n\n    @if (hasRecords()) {\n    @if (editEnabled) {\n    @switch (editType) {\n    @case ('cell') {\n    <ng-template #body let-item let-editing=\"editing\">\n      <tr class=\"p-datatable-row p-selectable-row\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | number: '1.2-2' }}\n\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n              <div class=\"text-right\">\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n              </div>\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n              </div>\n              }@else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SELECT) {\n              <div class=\"text-left\">\n                {{ item.rowData[column.field].value }}\n              </div>\n              }\n              @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[column.field]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              @if (item.rowData[column.field]?.name) {\n              {{ item.rowData[column.field]?.name }}\n              } @else {\n              {{ item.rowData[column.field] }}\n              }\n              }\n\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\n          <p-cellEditor>\n            <ng-template #input>\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n              </lib-inline-input>\n            </ng-template>\n            <ng-template #output>\n              @if (inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n              <div class=\"text-center\">\n                @if (item.rowData[key]) {\n                <i class=\"fa-solid fa-check text-green-500\"></i>\n                } @else {\n                <i class=\"fa-solid fa-times text-red-500\"></i>\n                }\n              </div>\n              } @else {\n              {{ item.rowData[key] }}\n              }\n            </ng-template>\n          </p-cellEditor>\n        </td>\n        }\n        }\n        @if (editType === 'cell' && editEnabled) {\n        <td class=\"px-2 py-1 text-center\">\n          <div class=\"flex justify-center items-center gap-2\">\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n          </div>\n        </td>\n        }\n      </tr>\n    </ng-template>\n    }\n    @case ('row') {\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\n        @if (selectedColumns) {\n        @for (column of selectedColumns; track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\n\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\n                'USD' }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\n                <div class=\"text-left\">\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\n                </div>\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[column.field]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[column.field]?.name) {\n                {{ item.rowData[column.field]?.name }}\n                } @else {\n                {{ item.rowData[column.field] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\n            <span class=\"text-red-500 italic text-xs\">{{\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        } @else {\n        @for (key of keys(); track $index){\n        <td>\n          <div class=\"flex flex-col gap-2\">\n            <p-cellEditor>\n              <ng-template #input>\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\n                </lib-inline-input>\n              </ng-template>\n              <ng-template #output>\n\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | number: '1.2-2' }}\n\n                </div>\n                }\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\n                <div class=\"text-right\">\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n                </div>\n                } @else if(inlineControls?.[key]?.typeInput === ETypeInput.SWITCH) {\n                <div class=\"text-center\">\n                  @if (item.rowData[key]) {\n                  <i class=\"fa-solid fa-check text-green-500\"></i>\n                  } @else {\n                  <i class=\"fa-solid fa-times text-red-500\"></i>\n                  }\n                </div>\n                } @else {\n                @if (item.rowData[key]?.name) {\n                {{ item.rowData[key]?.name }}\n                } @else {\n                {{ item.rowData[key] }}\n                }\n                }\n\n\n              </ng-template>\n            </p-cellEditor>\n\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\n              '' }}</span>\n            }\n          </div>\n        </td>\n        }\n        }\n        <td>\n          <div class=\"flex justify-center items-center gap-2\">\n            @if(!editing){\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\n            }\n            }\n            @if(editing){\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\n            }\n            @else {\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\n            }\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\n            }\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n    }\n    }\n    } @else {\n\n    <ng-template #body let-item let-expanded=\"expanded\">\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\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,\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\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,\n            'skeleton-row': item.isLoading\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\n\n        @if (rowExpansionConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\n            [pRowToggler]=\"item\"></lib-button-ng>\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @if (selectionTableConfig?.isEnabled) {\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\n          @if (!item.isLoading) {\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\n          } @else {\n          <div class=\"skeleton-content\"></div>\n          }\n        </td>\n        }\n\n        @for (key of keys(); track $index) {\n        @if (isThatItemInTheProductSelection(key)) {\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\n                'skeleton-cell': item.isLoading\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\n          @if (item.isLoading) {\n          <div class=\"skeleton-content\"></div>\n          } @else {\n          @if (item.rowDataButtons?.[key]) {\n          <div class=\"flex gap-4 w-full justify-center items-center\">\n            @for (btn of item.rowDataButtons[key]; track $index) {\n            @if (btn) {\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\n            }\n            }\n          </div>\n          } @else {\n          @switch (item.typeCell?.[key]) {\n          @case (ETypeInput.IMAGE) {\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\n          }\n          @case (ETypeInput.DATE) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          }\n          @case (ETypeInput.DATETIME_LOCAL) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\n          }\n          @case (ETypeInput.CURRENCY) {\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\n          }\n          @case (ETypeInput.BADGE) {\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\n          }\n          @case (ETypeInput.COMPONENT) {\n          <ng-container\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\n          }\n          @case (ETypeInput.INPUT) {\n          <lib-inline-input [(ngModel)]=\"item.rowData[key]\"\n            [config]=\"item.rowDataInput?.[key] ?? {typeInput: ETypeInput.TEXT}\"\n            (outputValue)=\"handleCheckValue()\"\n            >\n          </lib-inline-input>\n          }\n          @default {\n          @if (isDate(item.rowData[key])) {\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\n          } @else if (typeof item.rowData[key] === \"string\") {\n          {{ item.rowData[key] }}\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\n          {{ item.rowData[key].name }}\n          } @else if(typeof item.rowData[key] === \"number\") {\n          <p class=\"text-right\">\n            {{ item.rowData[key] | number: '1.2-2' }}\n          </p>\n          }\n          }\n          }\n          }\n          }\n        </td>\n        }\n        }\n      </tr>\n    </ng-template>\n    }\n    }\n\n    <ng-template #footer>\n      @if (footerEnabled) {\n      @for (row of footerRows; track $index) {\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\n        @for (cell of row; track $index) {\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\n          applyPipe(cell.value,\n          cell.pipeConfig) }}</td>\n\n        }\n      </tr>\n      }\n\n      }\n    </ng-template>\n    <ng-template #expandedrow let-item>\n      <tr>\n        <td colspan=\"100%\">\n          <div class=\"p-datatable-row-expansion\">\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\n\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  @if (showBottomToolbar()) {\n  <div class=\"mt-6 p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\n    <lib-toolbar-ng>\n      @if (showManagementSelectionConfig()) {\n      <div toolbarStart\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\n        <span class=\"font-medium text-gray-700 dark:text-gray-300\">{{ getSelectedItemsLabel() }}</span>\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\n          <span class=\"font-semibold text-gray-900 dark:text-gray-100\">{{\n            totalItemsSelected().toLocaleString()\n            }}</span>\n        </div>\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\n      </div>\n      }\n      </lib-toolbar-ng>\n  </div>\n  }\n</div>\n@if (httpMessage()) {\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -3654,4 +3671,4 @@ de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
  */
 
 export { AminatedContainerComponent as A, BaseDialogComponent as B, DisabledContainerComponent as D, ETypeInput as E, FormComponent as F, HttpMessageComponent as H, InlineInputComponent as I, LibComponentsService as L, SpeedDialComponent as S, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b, SpeedDialService as c, SpeedDialNgComponent as d };
-//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-DW6-ezai.mjs.map
+//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-B1RfAxdW.mjs.map