ln-20-lib-components 0.0.23 → 0.0.25

package/fesm2022/{ln-20-lib-components-ln-20-lib-components-Cc5ecdIV.mjs → ln-20-lib-components-ln-20-lib-components-Cj5QaynJ.mjs}

@@ -332,12 +332,16 @@ class HttpMessageComponent {
         const message = this.httpMessage();
         return message?.type === 'success';
     }
+    get isWarning() {
+        const message = this.httpMessage();
+        return message?.type === 'warning';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HttpMessageComponent, isStandalone: true, selector: "lib-http-message", inputs: { httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { httpMessage: "httpMessageChange" }, ngImport: i0, template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: HttpMessageComponent, isStandalone: true, selector: "lib-http-message", inputs: { httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { httpMessage: "httpMessageChange" }, ngImport: i0, template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isWarning) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-amber-500 dark:text-amber-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-amber-700 dark:text-amber-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-amber-500 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-200 p-1 rounded hover:bg-amber-100 dark:hover:bg-amber-800/30\"\r\n          aria-label=\"Cerrar mensaje de advertencia\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: HttpMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-http-message', imports: [], template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n" }]
+            args: [{ selector: 'lib-http-message', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (httpMessage()) {\r\n  @if (isError) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-red-700 dark:text-red-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-200 p-1 rounded hover:bg-red-100 dark:hover:bg-red-800/30\"\r\n          aria-label=\"Cerrar mensaje de error\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isSuccess) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-green-500 dark:text-green-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-green-700 dark:text-green-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-green-500 dark:text-green-400 hover:text-green-700 dark:hover:text-green-200 p-1 rounded hover:bg-green-100 dark:hover:bg-green-800/30\"\r\n          aria-label=\"Cerrar mensaje de \u00E9xito\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (isWarning) {\r\n    <div class=\"group relative mt-3 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 transition-all duration-200 hover:shadow-md\">\r\n      <div class=\"flex items-start gap-2\">\r\n        <svg class=\"w-5 h-5 text-amber-500 dark:text-amber-400 flex-shrink-0 mt-0.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n          <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\" />\r\n        </svg>\r\n        <p class=\"flex-1 text-amber-700 dark:text-amber-300 text-sm font-medium leading-relaxed\">\r\n          {{ httpMessage()?.message }}\r\n        </p>\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"clearMessage()\"\r\n          class=\"opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-amber-500 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-200 p-1 rounded hover:bg-amber-100 dark:hover:bg-amber-800/30\"\r\n          aria-label=\"Cerrar mensaje de advertencia\"\r\n        >\r\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n" }]
         }] });
 
 class FormComponent {
@@ -724,7 +728,7 @@ class InlineInputComponent {
                 useExisting: forwardRef(() => InlineInputComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n  [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n  @for (template of templates; track $index) {\r\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n  <div\r\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n    [class.border-red-500]=\"showDuplicateMessage\">\r\n    @for (chip of chips; track $index) {\r\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n    }\r\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n  </div>\r\n  @if (showDuplicateMessage) {\r\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n    <span>\r\n      @if (duplicateChips.length === 1) {\r\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n      } @else {\r\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n      }\r\n    </span>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n@case (ETypeInput.SWITCH) {\r\n<div class=\"flex justify-center items-center p-2\">\r\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n    class=\"w-full\" [disabled]=\"isDisabled\" />\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KnobModule }, { kind: "component", type: i9$1.Knob, selector: "p-knob", inputs: ["styleClass", "style", "ariaLabel", "ariaLabelledBy", "tabindex", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "disabled", "showValue", "readonly"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i11.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i8.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputOtpModule }, { kind: "component", type: i6.InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: KnobModule }, { kind: "component", type: i9$1.Knob, selector: "p-knob", inputs: ["styleClass", "style", "ariaLabel", "ariaLabelledBy", "tabindex", "valueColor", "rangeColor", "textColor", "valueTemplate", "name", "size", "step", "min", "max", "strokeWidth", "disabled", "showValue", "readonly"], outputs: ["onChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i9.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i11.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InlineInputComponent, decorators: [{
             type: Component,
@@ -748,12 +752,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             useExisting: forwardRef(() => InlineInputComponent),
                             multi: true
                         }
-                    ], template: "@let valueInput = value();\r\n@let isDisabled = config().isDisabled ?? false;\r\n@let knobConfig = config().knobConfig;\r\n@let textareaConfig = config().textareaConfig;\r\n@let dateConfig = config().dateConfig;\r\n\r\n@switch (type) {\r\n@case (ETypeInput.CURRENCY) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\r\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\r\n  [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DECIMAL) {\r\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\r\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.DATE) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\r\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.DATETIME_LOCAL) {\r\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\r\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\r\n}\r\n@case (ETypeInput.SELECT) {\r\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\r\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\r\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\r\n  @for (template of templates; track $index) {\r\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\r\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</p-select>\r\n}\r\n@case (ETypeInput.MULTISELECT) {\r\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\r\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\r\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.OTP) {\r\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\r\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\r\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n@case (ETypeInput.KNOB) {\r\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\r\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\r\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\r\n}\r\n@case (ETypeInput.TEXTAREA) {\r\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\r\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\r\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\r\n  (keydown)=\"onKeyDown($event)\"></textarea>\r\n}\r\n@case (ETypeInput.CHIPS) {\r\n<div class=\"chips-input-wrapper\">\r\n  <div\r\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\r\n    [class.border-red-500]=\"showDuplicateMessage\">\r\n    @for (chip of chips; track $index) {\r\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\r\n    }\r\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\r\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\r\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\r\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\r\n  </div>\r\n  @if (showDuplicateMessage) {\r\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\r\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\r\n    <span>\r\n      @if (duplicateChips.length === 1) {\r\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\r\n      } @else {\r\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\r\n      }\r\n    </span>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n@case (ETypeInput.SWITCH) {\r\n<div class=\"flex justify-center items-center p-2\">\r\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\r\n    class=\"w-full\" [disabled]=\"isDisabled\" />\r\n</div>\r\n}\r\n@default {\r\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\r\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\r\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\r\n}\r\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"] }]
+                    ], template: "@let valueInput = value();\n@let isDisabled = config().isDisabled ?? false;\n@let knobConfig = config().knobConfig;\n@let textareaConfig = config().textareaConfig;\n@let dateConfig = config().dateConfig;\n\n@switch (type) {\n@case (ETypeInput.CURRENCY) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"currency\" [currency]=\"currency\" [locale]=\"locale\"\n  [minFractionDigits]=\"minFractionDigits\" [maxFractionDigits]=\"maxFractionDigits\" class=\"w-full\"\n  [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DECIMAL) {\n<p-inputnumber [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" mode=\"decimal\" [locale]=\"locale\" [minFractionDigits]=\"2\" [maxFractionDigits]=\"2\"\n  [useGrouping]=\"true\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.DATE) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [disabled]=\"isDisabled\" [maxDate]=\"dateConfig?.maxDate || null\"\n  [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.DATETIME_LOCAL) {\n<p-datepicker [ngModel]=\"valueInput\" appendTo=\"body\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\" class=\"w-full\" [showTime]=\"true\" [hourFormat]=\"'24'\" [disabled]=\"isDisabled\"\n  [maxDate]=\"dateConfig?.maxDate || null\" [minDate]=\"dateConfig?.minDate || null\" [selectionMode]=\"dateConfig?.selectionMode || 'single'\" />\n}\n@case (ETypeInput.SELECT) {\n<p-select [options]=\"config().selectConfig?.options ?? []\" [optionLabel]=\"config().selectConfig?.optionLabel ?? 'name'\"\n  [(ngModel)]=\"valueSelect\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\"\n  appendTo=\"body\" class=\"w-full inline-input-select\" [disabled]=\"config().isDisabled ?? false\" >\n  @for (template of templates; track $index) {\n    <ng-template [pTemplate]=\"template.getType()\" let-item>\n      <ng-container *ngTemplateOutlet=\"template.template; context: { $implicit: item }\"></ng-container>\n    </ng-template>\n  }\n</p-select>\n}\n@case (ETypeInput.MULTISELECT) {\n<p-multiselect [options]=\"config().multiSelectConfig?.options ?? []\"\n  [optionLabel]=\"config().multiSelectConfig?.optionLabel ?? 'name'\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [filter]=\"true\"\n  appendTo=\"body\" class=\"w-full\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.OTP) {\n<p-inputotp class=\"w-full\" [mask]=\"config().otpConfig?.mask ?? false\" [length]=\"config().otpConfig?.length ?? 6\"\n  [integerOnly]=\"config().otpConfig?.integerOnly ?? false\" [ngModel]=\"valueInput\"\n  (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n@case (ETypeInput.KNOB) {\n<p-knob [ngModel]=\"knobValueInput()\" (ngModelChange)=\"onChangeValue($event)\" class=\"w-full\" [min]=\"knobConfig?.min ?? 0\"\n  [max]=\"knobConfig?.max ?? 100\" [step]=\"knobConfig?.step ?? 1\" [disabled]=\"isDisabled\" [readonly]=\"true\"\n  [valueTemplate]=\"knobValueTemplate()\" [size]=\"knobConfig?.size ?? 100\" />\n}\n@case (ETypeInput.TEXTAREA) {\n<textarea class=\"w-full h-full p-2 border border-gray-300 rounded-md\" pTextarea [rows]=\"textareaConfig?.rows ?? 3\"\n  [cols]=\"textareaConfig?.cols ?? 30\" [autoResize]=\"true\" [variant]=\"textareaConfig?.variant ?? 'outlined'\"\n  [disabled]=\"isDisabled\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (blur)=\"onBlur()\"\n  (keydown)=\"onKeyDown($event)\"></textarea>\n}\n@case (ETypeInput.CHIPS) {\n<div class=\"chips-input-wrapper\">\n  <div\n    class=\"chips-container w-full p-2 border border-gray-300 rounded-md min-h-[40px] flex flex-wrap items-center gap-2\"\n    [class.border-red-500]=\"showDuplicateMessage\">\n    @for (chip of chips; track $index) {\n    <p-chip [label]=\"chip\" [removable]=\"!isDisabled\" (onRemove)=\"removeChip($index)\" class=\"chip-item\" />\n    }\n    <input type=\"text\" class=\"chip-input flex-1 border-0 outline-0 bg-transparent min-w-[100px]\" [value]=\"currentInput\"\n      (input)=\"onChipInputChange($event)\" (keydown)=\"onChipKeydown($event); onKeyDown($event)\"\n      (paste)=\"onChipPaste($event)\" [disabled]=\"isDisabled\"\n      placeholder=\"Escribe o pega elementos separados por espacios...\" />\n  </div>\n  @if (showDuplicateMessage) {\n  <div class=\"duplicate-message text-red-500 text-sm mt-1 flex items-center gap-1\">\n    <i class=\"pi pi-exclamation-triangle text-red-500\"></i>\n    <span>\n      @if (duplicateChips.length === 1) {\n      El elemento \"<strong>{{ duplicatesText }}</strong>\" ya existe en la lista\n      } @else {\n      Los elementos \"<strong>{{ duplicatesText }}</strong>\" ya existen en la lista\n      }\n    </span>\n  </div>\n  }\n</div>\n}\n@case (ETypeInput.SWITCH) {\n<div class=\"flex justify-center items-center p-2\">\n  <p-toggleswitch [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\" (onBlur)=\"onBlur()\"\n    class=\"w-full\" [disabled]=\"isDisabled\" />\n</div>\n}\n@default {\n<input pInputText class=\"w-full h-full p-2 border border-gray-300 rounded-md\" [type]=\"type\"\n  [readOnly]=\"config().readonly ?? false\" [ngModel]=\"valueInput\" (ngModelChange)=\"onChangeValue($event)\"\n  (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" [disabled]=\"isDisabled\" />\n}\n}", styles: [":host{width:100%;height:100%}.chips-input-wrapper{width:100%}.chips-input-wrapper .chips-container{cursor:text;transition:border-color .2s ease,box-shadow .2s ease}.chips-input-wrapper .chips-container:focus-within{border-color:#007ad9;box-shadow:0 0 0 1px #007ad9}.chips-input-wrapper .chips-container.border-red-500{border-color:#ef4444!important;box-shadow:0 0 0 1px #ef4444!important}.chips-input-wrapper .chips-container .chip-item{margin:0}.chips-input-wrapper .chips-container .chip-input:focus{outline:none}.chips-input-wrapper .chips-container .chip-input::placeholder{color:#6b7280;font-style:italic}.chips-input-wrapper .duplicate-message{animation:slideDown .3s ease-out}.chips-input-wrapper .duplicate-message i{font-size:14px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}::ng-deep p-select.inline-input-select{border:1px solid #d1d5db!important;background:transparent;color:#111827;height:44px;width:100%;border-radius:.5rem;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:space-between}::ng-deep p-select.inline-input-select .p-select-label{border:none}::ng-deep p-select.inline-input-select .p-select-trigger{border:none}::ng-deep .my-app-dark p-select.inline-input-select{border:1px solid transparent!important;background:transparent;color:#f3f4f6}::ng-deep .my-app-dark p-inputnumber .p-inputnumber-input{background-color:#374151;color:#f3f4f6;border-color:transparent}::ng-deep .my-app-dark p-datepicker .p-inputtext{background-color:#374151;color:#f3f4f6}::ng-deep .my-app-dark p-multiselect .p-multiselect-label{background-color:#374151;color:#f3f4f6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
             }] } });
 
+class AminatedContainerComponent {
+    isLoading = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AminatedContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AminatedContainerComponent, isStandalone: true, selector: "lib-aminated-container", ngImport: i0, template: "<div class=\"fade-in-container\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-container{animation:fadeIn .8s ease-out forwards;opacity:0;transform:translateY(10px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AminatedContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-aminated-container', imports: [CommonModule], template: "<div class=\"fade-in-container\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in-container{animation:fadeIn .8s ease-out forwards;opacity:0;transform:translateY(10px)}\n"] }]
+        }] });
+
 class AppButtonNgService {
     buttonConfig = signal({});
     constructor() {
@@ -1648,7 +1662,7 @@ class TableNgService {
     //#endregion
     //#region Selection
     async openModalManagementSelectedItems(selectedItems, config) {
-        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-BjEQgQFR.mjs');
+        const { SelectedItemsManagementComponent } = await import('./ln-20-lib-components-selected-items-management.component-D_kb1iLY.mjs');
         let configSelectedItems = config;
         if (config) {
             configSelectedItems = structuredClone(config);
@@ -3175,7 +3189,7 @@ class TableNgComponent {
         return this.config()?.pdfConfig?.isEnabled ?? false;
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n              @if (\r\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (\r\n              filterConfigByKey?.[key]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              {{ item.rowData[key] }}\r\n            </ng-template>\r\n          </p-cellEditor>\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{\r\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{ item.rowData[key] | number: '1.2-2' }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i2$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i2$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i2$2.EditableColumn, selector: "[pEditableColumn]", inputs: ["pEditableColumn", "pEditableColumnField", "pEditableColumnRowIndex", "pEditableColumnDisabled", "pFocusCellSelector"] }, { kind: "component", type: i2$2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i2$2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2$2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2$2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2$2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2$2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "component", type: ButtonNgComponent, selector: "lib-button-ng", inputs: ["buttonConfig"], outputs: ["buttonConfigChange", "onClick"] }, { kind: "component", type: ToolbarNgComponent, selector: "lib-toolbar-ng" }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["formGroup", "controls", "formConfig", "httpMessage"], outputs: ["formGroupChange", "httpMessageChange", "formSubmit", "formChanges", "formChangesDebounced"] }, { kind: "pipe", type: KeyToDisplayNamePipe, name: "keyToDisplayName" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InlineInputComponent, selector: "lib-inline-input", inputs: ["config", "value"], outputs: ["valueChange", "outputValue", "outputBlur", "outputDebounced"] }, { kind: "component", type: BadgeNgComponent, selector: "lib-badge-ng", inputs: ["config"], outputs: ["configChange"] }, { kind: "component", type: HttpMessageComponent, selector: "lib-http-message", inputs: ["httpMessage"], outputs: ["httpMessageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TableNgComponent, isStandalone: true, selector: "lib-table-ng", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, editConfig: { classPropertyName: "editConfig", publicName: "editConfig", isSignal: true, isRequired: false, transformFunction: null }, footerConfig: { classPropertyName: "footerConfig", publicName: "footerConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, sourceElements: { classPropertyName: "sourceElements", publicName: "sourceElements", isSignal: true, isRequired: false, transformFunction: null }, targetElements: { classPropertyName: "targetElements", publicName: "targetElements", isSignal: true, isRequired: false, transformFunction: null }, httpMessage: { classPropertyName: "httpMessage", publicName: "httpMessage", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplateInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", config: "configChange", editConfig: "editConfigChange", footerConfig: "footerConfigChange", toolbarButtons: "toolbarButtonsChange", sourceElements: "sourceElementsChange", targetElements: "targetElementsChange", httpMessage: "httpMessageChange", lazyLoading: "lazyLoading", outputChangeData: "outputChangeData", outputHandleEditInitButton: "outputHandleEditInitButton", outputAddRow: "outputAddRow", outputDeleteRow: "outputDeleteRow", outputRowInlineChange: "outputRowInlineChange", outputRowDataChange: "outputRowDataChange", outputEditData: "outputEditData", outputIsEditing: "outputIsEditing", selectedItems: "selectedItemsChange" }, providers: [TableNgService, TableNgEditService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }], viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "@let paginationConfig = config()?.paginationConfig;\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\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    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\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    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" [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(!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          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\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          @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=\"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\">{{ 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\">{{\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TableNgComponent, decorators: [{
             type: Component,
@@ -3190,7 +3204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         InlineInputComponent,
                         BadgeNgComponent,
                         HttpMessageComponent
-                    ], providers: [TableNgService, TableNgEditService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let paginationConfig = config()?.paginationConfig;\r\n@let globalFilterConfig = config()?.globalFilterConfig;\r\n@let selectionTableConfig = config()?.selectionTableConfig;\r\n@let filterConfigByKey = config()?.filterConfigByKey;\r\n@let frozenColumnConfigByKey = config()?.frozenColumnConfigByKey;\r\n@let scrollConfig = config()?.scrollConfig;\r\n@let lazyLoadingConfig = config()?.lazyLoadingConfig;\r\n@let keysNames = config()?.keysNames;\r\n@let columnConfig = config()?.columnConfig;\r\n@let editEnabled = editConfig()?.isEnabled ?? false;\r\n@let editType = editConfig()?.type ?? 'cell';\r\n@let inlineControls = editConfig()?.inlineControls;\r\n@let rowErrorConfig = editConfig()?.rowEditConfig?.rowErrorConfig;\r\n@let footerRows = footerConfig()?.footerRows;\r\n@let footerEnabled = footerConfig()?.isEnabled ?? false;\r\n@let titleConfig = config()?.titleConfig;\r\n@let selectedColumns = config()?.selectedColumns;\r\n@let rowExpansionConfig = config()?.rowExpansionConfig;\r\n@let advancedIdentifierFiltersConfig = config()?.globalFilterConfig?.advancedIdentifierFiltersConfig;\r\n\r\n<div class=\"p-datatable-wrapper\">\r\n  @if (titleConfig?.isEnabled && titleConfig?.title) {\r\n  <div class=\"table-title-container\">\r\n    <h2 class=\"table-title\">{{ titleConfig!.title }}</h2>\r\n  </div>\r\n  }\r\n  @if (!hideToolbar || (filteredValue || advancedFiltersPerformed.length > 0)) {\r\n  <lib-toolbar-ng class=\"p-toolbar-header sticky top-0 z-30 dark:bg-gray-800\">\r\n    <div class=\"flex gap-2\" toolbarStart>\r\n      @if (globalFilterConfig?.isEnabled && !lazyLoadingConfig?.isEnabled) {\r\n      <lib-form [controls]=\"controlsGlobalFilter\" [(formGroup)]=\"searchFormGroupGlobalFilter\"\r\n        (formSubmit)=\"submitGlobalSearch($event)\"></lib-form>\r\n      }\r\n      @if (advancedIdentifierFiltersConfig?.isEnabled) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\"\r\n        [buttonConfig]=\"advancedIdentifierFiltersButton()\"></lib-button-ng>\r\n      }\r\n      @if (filteredValue || advancedFiltersPerformed.length > 0) {\r\n      <lib-button-ng class=\"animate__animated animate__fadeIn\" [buttonConfig]=\"clearFiltersButton()\"></lib-button-ng>\r\n      }\r\n    </div>\r\n    <div class=\"flex gap-2\" toolbarEnd>\r\n      @if (toolbarButtons().length > 0) {\r\n      @for (button of toolbarButtons(); track $index) {\r\n      <lib-button-ng [buttonConfig]=\"button\"></lib-button-ng>\r\n      }\r\n      }\r\n      @if ((editType === 'row' || editType === 'cell') && editEnabled) {\r\n      <lib-button-ng [buttonConfig]=\"addRowButton()\"></lib-button-ng>\r\n      }\r\n      @if (enableExcelButton()) {\r\n      <lib-button-ng [buttonConfig]=\"excelButton\" (onClick)=\"exportData(dt,'excel')\"></lib-button-ng>\r\n      }\r\n      @if (enablePdfButton()) {\r\n      <lib-button-ng [buttonConfig]=\"pdfButton\" (onClick)=\"exportData(dt,'pdf')\"></lib-button-ng>\r\n      }\r\n    </div>\r\n      </lib-toolbar-ng>\r\n  }\r\n  <p-table #dt styleClass=\"p-datatable-sm\" [value]=\"data()\" [lazy]=\"lazyLoadingConfig?.isEnabled ?? false\"\r\n    [editMode]=\"editType\" [totalRecords]=\"\r\n        lazyLoadingConfig?.isEnabled\r\n          ? (lazyLoadingConfig?.totalRecords ?? 0)\r\n          : data().length\r\n      \" [customSort]=\"true\" [paginator]=\"paginationConfig?.paginator ?? true\" [showCurrentPageReport]=\"true\"\r\n    [rows]=\"paginationConfig?.rows ?? 5\" [rowsPerPageOptions]=\"paginationConfig?.rowsPerPageOptions ?? [5, 10, 20]\"\r\n    [paginatorStyleClass]=\"paginatorStyleClass()\" [resizableColumns]=\"true\" [rowTrackBy]=\"trackById\"\r\n    [columns]=\"selectedColumns\" [scrollable]=\"scrollConfig?.isEnabled ?? false\"\r\n    [scrollHeight]=\"scrollConfig?.isEnabled ? scrollHeight() : undefined\" (onLazyLoad)=\"onLazyLoad($event)\"\r\n    (sortFunction)=\"customSort($event)\" (onFilter)=\"onFilter($event)\" [(selection)]=\"selectedItems\"\r\n    [currentPageReportTemplate]=\"getCustomPageReport()\" selectionPageOnly=\"true\" dataKey=\"id\" class=\"w-full\">\r\n    <ng-template #header let-columns>\r\n      <tr>\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n\r\n        </th>\r\n        }\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <th alignFrozen=\"left\" pFrozenColumn style=\"width: 2rem\" class=\"p-datatable-header-cell p-frozen-column\">\r\n          <p-tableHeaderCheckbox />\r\n        </th>\r\n        }\r\n\r\n        @if (selectedColumns) {\r\n        @for (column of columns; track $index) {\r\n        <th pResizableColumn [id]=\"column.field\" alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[column.field])\" [pSortableColumn]=\"column.field\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[column.field] ?? null\" [ngClass]=\"{\r\n                          'p-frozen-column': frozenHandle(\r\n                            frozenColumnConfigByKey?.[column.field]\r\n                          ),\r\n                        }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ column.field | keyToDisplayName: keysNames }}\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"column.field\" />\r\n            }\r\n            @if (filterConfigByKey?.[column.field]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${column.field}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(column.field),\r\n                }\" [type]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig?.type ??\r\n                  'text'\r\n                \" [matchMode]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.matchMode\r\n                \" [showMatchModes]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showMatchModes ?? false\r\n                \" [showOperator]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showOperator ?? false\r\n                \" [showAddButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showAddButton ?? false\r\n                \" [showApplyButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showApplyButton ?? false\r\n                \" [showClearButton]=\"\r\n                  filterConfigByKey?.[column.field]?.primeNgColumnFilterConfig\r\n                    ?.showClearButton ?? false\r\n                \">\r\n              @if (\r\n              filterConfigByKey?.[column.field]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, column.field)\"\r\n                    (outputDebounced)=\"onFilter($event)\" [(ngModel)]=\"advancedFiltersValues()[column.field]\"\r\n                    [config]=\"filterConfigByKey?.[column.field]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }@else {\r\n        @for (key of keys(); track $index) {\r\n        <th [id]=\"key\" pResizableColumn alignFrozen=\"right\" pFrozenColumn\r\n          [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\" [pSortableColumn]=\"key\"\r\n          class=\"p-datatable-header-cell\" [style.width.%]=\"columnConfig?.sizeByKey?.[key] ?? null\" [ngClass]=\"{\r\n              'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n            }\">\r\n          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\r\n            {{ key | keyToDisplayName: keysNames }}\r\n            @if(!editEnabled){\r\n            <p-sortIcon [field]=\"key\" />\r\n            }\r\n            @if (filterConfigByKey?.[key]?.isEnabled) {\r\n            <p-columnFilter type=\"text\" [field]=\"`rowData.${key}`\" display=\"menu\" [ngClass]=\"{\r\n                  'bg-green-200 rounded-full p-1 shadow-sm text-green-500 transition-all duration-300 ease-in-out':\r\n                    advancedFiltersPerformed.includes(key),\r\n                }\" [type]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.type ?? 'text'\"\r\n              [matchMode]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.matchMode\"\r\n              [showMatchModes]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showMatchModes ?? false\"\r\n              [showOperator]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showOperator ?? false\"\r\n              [showAddButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showAddButton ?? false\"\r\n              [showApplyButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showApplyButton ?? false\"\r\n              [showClearButton]=\"filterConfigByKey?.[key]?.primeNgColumnFilterConfig?.showClearButton ?? false\">\r\n              @if (\r\n              filterConfigByKey?.[key]?.customColumnFilterConfig\r\n              ?.isEnabled ?? false\r\n              ) {\r\n              <ng-template #filter let-value let-filter=\"filterCallback\">\r\n                <div style=\"min-width: 20rem\" class=\"\">\r\n                  <!-- <app-custom-advanced-filter filter\r\n                      [customColumnFilterConfig]=\"filterConfigByKey![key]!.customColumnFilterConfig!\"\r\n                      (formChanges)=\"formChanges($event, filter, key)\"\r\n                      [initialValue]=\"advancedFiltersValues[key]\"></app-custom-advanced-filter> -->\r\n                  <lib-inline-input\r\n                    (outputValue)=\"inlineFormChanges($event, filter, filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig?.typeInput, key)\"\r\n                    [(ngModel)]=\"advancedFiltersValues()[key]\"\r\n                    [config]=\"filterConfigByKey?.[key]?.customColumnFilterConfig?.inlineControlConfig ?? {typeInput: ETypeInput.TEXT}\"></lib-inline-input>\r\n                </div>\r\n              </ng-template>\r\n              }\r\n            </p-columnFilter>\r\n            }\r\n          </div>\r\n        </th>\r\n        }\r\n        }\r\n\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n        @if (editType === 'row' && editEnabled) {\r\n        <th class=\"p-datatable-header-cell\" style=\"width: 100px\">\r\n        </th>\r\n        }\r\n\r\n      </tr>\r\n    </ng-template>\r\n\r\n    <ng-template #emptymessage>\r\n      <tr>\r\n        <td [attr.colspan]=\"totalColumns()\">\r\n          @if (isLoading()) {\r\n          <!-- Loading state -->\r\n          <div class=\"p-8 text-center\">\r\n            <div class=\"flex flex-col items-center justify-center gap-4\">\r\n              <i class=\"pi pi-spin pi-spinner text-4xl text-blue-500\"></i>\r\n              <p class=\"text-gray-600 text-lg\">{{ getLoadingMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          } @else if (timeoutExpired()) {\r\n          <!-- No data available -->\r\n          <div class=\"p-8 text-center text-gray-500\">\r\n            <div class=\"flex flex-col items-center justify-center gap-3\">\r\n              <i class=\"pi pi-info-circle text-4xl text-gray-400\"></i>\r\n              <p class=\"text-lg\">{{ getNoDataMessage() }}</p>\r\n            </div>\r\n          </div>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n\r\n    @if (hasRecords()) {\r\n    @if (editEnabled) {\r\n    @switch (editType) {\r\n    @case ('cell') {\r\n    <ng-template #body let-item let-editing=\"editing\">\r\n      <tr class=\"p-datatable-row p-selectable-row\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td [pEditableColumn]=\"column.field\" pEditableColumnField=\"rowData.{{column.field}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n              <div class=\"text-right\">\r\n                {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n              </div>\r\n              } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n              <div class=\"text-left\">\r\n                {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n              </div>\r\n              } @else {\r\n              @if (item.rowData[column.field]?.name) {\r\n              {{ item.rowData[column.field]?.name }}\r\n              } @else {\r\n              {{ item.rowData[column.field] }}\r\n              }\r\n              }\r\n\r\n            </ng-template>\r\n          </p-cellEditor>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td [pEditableColumn]=\"key\" pEditableColumnField=\"rowData.{{key}}\">\r\n          <p-cellEditor>\r\n            <ng-template #input>\r\n              <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputDebounced)=\"onEditData()\"\r\n                [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n              </lib-inline-input>\r\n            </ng-template>\r\n            <ng-template #output>\r\n              {{ item.rowData[key] }}\r\n            </ng-template>\r\n          </p-cellEditor>\r\n        </td>\r\n        }\r\n        }\r\n        @if (editType === 'cell' && editEnabled) {\r\n        <td class=\"px-2 py-1 text-center\">\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n          </div>\r\n        </td>\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    @case ('row') {\r\n    <ng-template #body let-item let-editing=\"editing\" let-ri=\"rowIndex\">\r\n      <tr [pEditableRow]=\"item\" class=\"cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 border-b\">\r\n        @if (selectedColumns) {\r\n        @for (column of selectedColumns; track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[column.field]\"\r\n                  (outputValue)=\"inlineChange($event, column.field)\" (outputDebounced)=\"onEditData()\"\r\n                  [config]=\"inlineControls?.[column.field] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[column.field]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[column.field] | currency: item?.currencyTypeCellConfig?.[column.field]?.currency ??\r\n                'USD' }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATE) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy\" }}\r\n                </div>\r\n                } @else if(inlineControls?.[column.field]?.typeInput === ETypeInput.DATETIME_LOCAL) {\r\n                <div class=\"text-left\">\r\n                  {{ item.rowData[column.field] | date: \"dd/MM/yyyy HH:mm\" }}\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[column.field]?.name) {\r\n                {{ item.rowData[column.field]?.name }}\r\n                } @else {\r\n                {{ item.rowData[column.field] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[column.field]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{\r\n              rowErrorConfig?.fieldErrors?.[item.id]?.[column.field]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        } @else {\r\n        @for (key of keys(); track $index){\r\n        <td>\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-cellEditor>\r\n              <ng-template #input>\r\n                <lib-inline-input [(ngModel)]=\"item.rowData[key]\" (outputValue)=\"inlineChange($event, key)\"\r\n                  (outputDebounced)=\"onEditData()\" [config]=\"inlineControls?.[key] ?? {typeInput: ETypeInput.TEXT}\">\r\n                </lib-inline-input>\r\n              </ng-template>\r\n              <ng-template #output>\r\n\r\n                @if (inlineControls?.[key]?.typeInput === ETypeInput.NUMBER) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | number: '1.2-2' }}\r\n\r\n                </div>\r\n                }\r\n                @else if(inlineControls?.[key]?.typeInput === ETypeInput.CURRENCY) {\r\n                <div class=\"text-right\">\r\n                  {{ item.rowData[key] | currency: item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n                </div>\r\n                } @else {\r\n                @if (item.rowData[key]?.name) {\r\n                {{ item.rowData[key]?.name }}\r\n                } @else {\r\n                {{ item.rowData[key] }}\r\n                }\r\n                }\r\n\r\n\r\n              </ng-template>\r\n            </p-cellEditor>\r\n\r\n            @if (rowErrorConfig?.isEnabled && enableErrors && !rowFieldsHasValue()[key]) {\r\n            <span class=\"text-red-500 italic text-xs\">{{ rowErrorConfig?.fieldErrors?.[item.id]?.[key]?.message ??\r\n              '' }}</span>\r\n            }\r\n          </div>\r\n        </td>\r\n        }\r\n        }\r\n        <td>\r\n          <div class=\"flex justify-center items-center gap-2\">\r\n            @if(!editing){\r\n            <lib-button-ng pButton pRipple pInitEditableRow [buttonConfig]=\"getEditInitButton(item.id)\"\r\n              (onClick)=\"onRowEditInit(item)\"></lib-button-ng>\r\n            @if(!editConfig()?.rowEditConfig?.isDisabledDeleteButton){\r\n            <lib-button-ng [buttonConfig]=\"getDeleteRowButton()\" (onClick)=\"deleteRow(item)\"></lib-button-ng>\r\n            }\r\n            }\r\n            @if(editing){\r\n            @if (hasErrorValues(rowErrorConfig?.fieldErrors?.[item.id] ?? {})) {\r\n            <lib-button-ng [buttonConfig]=\"editSaveButtonWithErrors()\"\r\n              (onClick)=\"onEditSaveWithErrors()\"></lib-button-ng>\r\n            }\r\n            @else {\r\n            <lib-button-ng pButton pRipple pSaveEditableRow [buttonConfig]=\"editSaveButton()\"\r\n              (onClick)=\"onRowEditSave(item)\"></lib-button-ng>\r\n            }\r\n            <lib-button-ng pButton pRipple pCancelEditableRow [buttonConfig]=\"editCancelButton()\"\r\n              (onClick)=\"onRowEditCancel(item, ri)\"></lib-button-ng>\r\n            }\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n    } @else {\r\n\r\n    <ng-template #body let-item let-expanded=\"expanded\">\r\n      <tr class=\"p-datatable-row p-selectable-row\" [ngClass]=\"{\r\n            'bg-gray-50 dark:bg-gray-800 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700': item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600': !item.onClick && !item.isSelected && !item.isLoading,\r\n            'bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 hover:bg-blue-200 dark:hover:bg-blue-800': item.isSelected && !item.isLoading,\r\n            'skeleton-row': item.isLoading\r\n          }\" (click)=\"item?.isLoading ? null : onRowClick(item)\">\r\n\r\n        @if (rowExpansionConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" [class.skeleton-cell]=\"item.isLoading\"\r\n          [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <lib-button-ng [buttonConfig]=\"rowExpansionButton(expanded)()\" type=\"button\" pRipple\r\n            [pRowToggler]=\"item\"></lib-button-ng>\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @if (selectionTableConfig?.isEnabled) {\r\n        <td (click)=\"$event.stopPropagation()\" alignFrozen=\"left\" pFrozenColumn class=\"shadow-lg\"\r\n          [class.skeleton-cell]=\"item.isLoading\" [style.height]=\"item.isLoading ? '3rem' : 'auto'\">\r\n          @if (!item.isLoading) {\r\n          <p-tableCheckbox [id]=\"item\" [value]=\"item\" />\r\n          } @else {\r\n          <div class=\"skeleton-content\"></div>\r\n          }\r\n        </td>\r\n        }\r\n\r\n        @for (key of keys(); track $index) {\r\n        @if (isThatItemInTheProductSelection(key)) {\r\n        <td [id]=\"key\" class=\"p-datatable-cell\" [style.height]=\"item.isLoading ? '3rem' : 'min-content'\"\r\n          alignFrozen=\"right\" pFrozenColumn [ngClass]=\"{\r\n                'p-frozen-column': frozenHandle(frozenColumnConfigByKey?.[key]),\r\n                'text-center': item.rowDataButtons?.[key] || item.typeCell?.[key] === ETypeInput.BADGE,\r\n                'skeleton-cell': item.isLoading\r\n              }\" [frozen]=\"frozenHandle(frozenColumnConfigByKey?.[key])\">\r\n          @if (item.isLoading) {\r\n          <div class=\"skeleton-content\"></div>\r\n          } @else {\r\n          @if (item.rowDataButtons?.[key]) {\r\n          <div class=\"flex gap-4 w-full justify-center items-center\">\r\n            @for (btn of item.rowDataButtons[key]; track $index) {\r\n            @if (btn) {\r\n            <lib-button-ng class=\"w-full\" (click)=\"$event.stopPropagation()\" [buttonConfig]=\"btn\"></lib-button-ng>\r\n            }\r\n            }\r\n          </div>\r\n          } @else {\r\n          @switch (item.typeCell?.[key]) {\r\n          @case (ETypeInput.IMAGE) {\r\n          <img [src]=\"item.rowData[key]\" alt=\"Image\" class=\"w-10 h-10 mx-auto\">\r\n          }\r\n          @case (ETypeInput.DATE) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          }\r\n          @case (ETypeInput.DATETIME_LOCAL) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy HH:mm\" }}\r\n          }\r\n          @case (ETypeInput.CURRENCY) {\r\n          {{item?.currencyTypeCellConfig?.[key]?.currency}} {{ item.rowData[key] | currency:\r\n          item?.currencyTypeCellConfig?.[key]?.currency ?? 'USD' }}\r\n          }\r\n          @case (ETypeInput.BADGE) {\r\n          <lib-badge-ng [config]=\"item.rowData[key]\"></lib-badge-ng>\r\n          }\r\n          @case (ETypeInput.COMPONENT) {\r\n          <ng-container\r\n            *ngTemplateOutlet=\"item.rowDataComponents?.[key]; context: { $implicit: item.raw }\"></ng-container>\r\n          }\r\n          @default {\r\n          @if (isDate(item.rowData[key])) {\r\n          {{ item.rowData[key] | date: \"dd/MM/yyyy\" }}\r\n          } @else if (typeof item.rowData[key] === \"string\") {\r\n          {{ item.rowData[key] }}\r\n          } @else if (isPrimeNgSelection(item.rowData[key])) {\r\n          {{ item.rowData[key].name }}\r\n          } @else if(typeof item.rowData[key] === \"number\") {\r\n          <p class=\"text-right\">\r\n            {{ item.rowData[key] | number: '1.2-2' }}\r\n          </p>\r\n          }\r\n          }\r\n          }\r\n          }\r\n          }\r\n        </td>\r\n        }\r\n        }\r\n      </tr>\r\n    </ng-template>\r\n    }\r\n    }\r\n\r\n    <ng-template #footer>\r\n      @if (footerEnabled) {\r\n      @for (row of footerRows; track $index) {\r\n      <tr class=\"p-datatable-row p-datatable-footer-row\">\r\n        @for (cell of row; track $index) {\r\n        <td colSpan=\"{{ cell.colSpan }}\" class=\"{{ cell.class }} text-right font-bold p-3 pb-0\">{{\r\n          applyPipe(cell.value,\r\n          cell.pipeConfig) }}</td>\r\n\r\n        }\r\n      </tr>\r\n      }\r\n\r\n      }\r\n    </ng-template>\r\n    <ng-template #expandedrow let-item>\r\n      <tr>\r\n        <td colspan=\"100%\">\r\n          <div class=\"p-datatable-row-expansion\">\r\n            <ng-container *ngTemplateOutlet=\"currentItemTemplate; context: { $implicit: item }\"></ng-container>\r\n\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n  @if (showBottomToolbar()) {\r\n  <div class=\"p-datatable-footer sticky bottom-2 z-9 animate__animated animate__fadeIn\">\r\n    <lib-toolbar-ng>\r\n      @if (showManagementSelectionConfig()) {\r\n      <div toolbarStart\r\n        class=\"p-datatable-footer-content flex items-center gap-3 px-4 rounded-lg animate__animated animate__fadeIn\">\r\n        <span class=\"font-medium text-gray-700\">{{ getSelectedItemsLabel() }}</span>\r\n        <div class=\"p-datatable-footer-badge flex items-center justify-center min-w-[28px] h-7 px-2 rounded-md\">\r\n          <span class=\"font-semibold text-gray-900\">{{\r\n            totalItemsSelected().toLocaleString()\r\n            }}</span>\r\n        </div>\r\n        <span class=\"text-sm text-gray-600\">{{ getRecordsLabel() }}</span>\r\n        <lib-button-ng [buttonConfig]=\"showSelectedItemsManagementButton()\"></lib-button-ng>\r\n      </div>\r\n      }\r\n      </lib-toolbar-ng>\r\n  </div>\r\n  }\r\n</div>\r\n@if (httpMessage()) {\r\n<lib-http-message [(httpMessage)]=\"httpMessage\"></lib-http-message>\r\n}", styles: [".cursor-pointer{cursor:pointer}.empty-data-message{text-align:center;padding:2rem;color:#6c757d;font-style:italic}.table-title-container{background:var(--p-surface-50);border-bottom:1px solid var(--p-surface-200);padding:1.25rem 2rem;position:relative}.table-title{color:var(--p-text-color);font-size:1.5rem;font-weight:600;text-align:center;margin:0;letter-spacing:-.025em;text-shadow:0 1px 2px rgba(0,0,0,.05);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}.table-title:after{content:\"\";position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%);width:60px;height:2px;background:linear-gradient(90deg,var(--p-primary-color),var(--p-primary-600));border-radius:1px}:host ::ng-deep .p-datatable-paginator{background:var(--p-surface-100);border-top:1px solid var(--p-surface-300);padding:1rem}:host ::ng-deep .p-datatable-paginator .p-paginator{background:transparent;border:none;padding:0}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-300);border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-100);border-color:var(--p-surface-300);color:var(--p-text-muted-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color);font-weight:500}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-200);border:1px solid var(--p-surface-300);color:var(--p-text-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.skeleton-row{pointer-events:none;-webkit-user-select:none;user-select:none;min-height:3rem}.skeleton-cell{position:relative;overflow:hidden;min-height:3rem;padding:.75rem .5rem!important}.skeleton-cell .skeleton-content{position:absolute;inset:.5rem;min-height:1.5rem;background:linear-gradient(90deg,#d1d5db33,#d1d5db66,#d1d5db33);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}:host-context(.my-app-dark) .skeleton-cell .skeleton-content{background:linear-gradient(90deg,#4b556333,#4b556366,#4b556333);background-size:200% 100%}:host ::ng-deep .p-datatable .p-datatable-tbody .skeleton-row .skeleton-cell{width:auto;min-width:fit-content}:host-context(.my-app-dark) .table-title-container{background:var(--p-surface-800);border-bottom-color:var(--p-surface-700)}:host-context(.my-app-dark) .table-title{color:var(--p-text-color);background:linear-gradient(135deg,var(--p-text-color) 0%,var(--p-text-muted-color) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator{background:var(--p-surface-900);border-top-color:var(--p-surface-800)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--p-primary-color);border-color:var(--p-primary-color);color:var(--p-primary-contrast-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:hover,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:hover{background:var(--p-surface-700);border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-first:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-prev:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-next:disabled,:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-last:disabled{background:var(--p-surface-900);border-color:var(--p-surface-800);color:var(--p-text-muted-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-paginator-current{color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown{background:var(--p-surface-800);border-color:var(--p-surface-700);color:var(--p-text-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:hover{border-color:var(--p-primary-color)}:host-context(.my-app-dark) ::ng-deep .p-datatable-paginator .p-paginator .p-dropdown:focus{border-color:var(--p-primary-color);box-shadow:0 0 0 2px var(--p-primary-color-100)}.flex{display:flex}.flex-col{flex-direction:column}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.justify-center{justify-content:center}.items-center{align-items:center}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-900{color:#111827}.text-blue-500{color:#3b82f6}.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.italic{font-style:italic}.w-full{width:100%}.w-10{width:2.5rem}.h-10{height:2.5rem}.h-7{height:1.75rem}.min-w-28{min-width:28px}.mx-auto{margin-left:auto;margin-right:auto}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pb-0{padding-bottom:0}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-600{background-color:#4b5563}.bg-gray-700{background-color:#374151}.bg-gray-800{background-color:#1f2937}.bg-blue-100{background-color:#dbeafe}.bg-blue-200{background-color:#bfdbfe}.bg-blue-800{background-color:#1e40af}.bg-blue-900{background-color:#1e3a8a}.bg-green-200{background-color:#bbf7d0}.border-b{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--p-surface-300)}.border-l-4{border-left-width:4px;border-left-style:solid}.border-blue-500{border-color:#3b82f6}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.sticky{position:sticky}.top-0{top:0}.bottom-2{bottom:.5rem}.bottom-18{bottom:4.5rem}.z-9{z-index:9}.z-10{z-index:10}.z-30{z-index:30}.hover\\:bg-gray-50:hover{background-color:#f9fafb}.hover\\:bg-gray-100:hover{background-color:#f3f4f6}.hover\\:bg-gray-200:hover{background-color:#e5e7eb}.hover\\:bg-blue-200:hover{background-color:#bfdbfe}.hover\\:bg-blue-800:hover{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:bg-gray-800{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:bg-gray-700{background-color:#374151}:host-context(.my-app-dark) .dark\\:bg-gray-600{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:bg-blue-900{background-color:#1e3a8a}:host-context(.my-app-dark) .dark\\:bg-blue-800{background-color:#1e40af}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-800:hover{background-color:#1f2937}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-700:hover{background-color:#374151}:host-context(.my-app-dark) .dark\\:hover\\:bg-gray-600:hover{background-color:#4b5563}:host-context(.my-app-dark) .dark\\:hover\\:bg-blue-800:hover{background-color:#1e40af}.animate__animated{animation-duration:1s;animation-fill-mode:both}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], 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\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    </div>\n    <div class=\"flex gap-2\" toolbarEnd>\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    </div>\n      </lib-toolbar-ng>\n  }\n  <p-table #dt styleClass=\"p-datatable-sm\" [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(!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          <div class=\"flex gap-2 justify-center items-center py-0 px-0\">\n            {{ key | keyToDisplayName: keysNames }}\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          @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=\"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\">{{ 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\">{{\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']
@@ -3214,5 +3228,5 @@ de13d65e8a0357ce9f2e18c899c8e7f6f728181baa031761ecdd7ef5cb166eb2
  * Generated bundle index. Do not edit.
  */
 
-export { BaseDialogComponent as B, ETypeInput as E, FormComponent as F, InlineInputComponent as I, LibComponentsService as L, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b };
-//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-Cc5ecdIV.mjs.map
+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, TableNgComponent as T, ButtonNgComponent as a, LibComponentsComponent as b };
+//# sourceMappingURL=ln-20-lib-components-ln-20-lib-components-Cj5QaynJ.mjs.map