@dropi/ui-components 1.0.15 → 1.0.16

package/dist/fesm2022/dropi-ui-components.mjs

@@ -3,16 +3,18 @@ import * as i0 from '@angular/core';
 import { Component, Input, EventEmitter, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, Inject, Directive, ViewContainerRef, NO_ERRORS_SCHEMA, ViewChild, Pipe, ContentChild, ViewChildren, ViewEncapsulation, HostListener, TemplateRef, ChangeDetectionStrategy, ElementRef, NgZone, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgIf, DatePipe, TitleCasePipe } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
+import { of, Subject, Subscription } from 'rxjs';
 import { createCustomElement } from '@angular/elements';
 import * as i1$1 from '@angular/platform-browser';
 import { createApplication } from '@angular/platform-browser';
-import * as i2 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl, FormArray, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import * as i2$1 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i2$2 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import { Subject, Subscription } from 'rxjs';
 import { takeUntil, debounceTime } from 'rxjs/operators';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
@@ -153,22 +155,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Este módulo proporciona funciones auxiliares para convertir
  * componentes Angular en Web Components
  */
-/**
- * Módulo auxiliar de Angular Elements
- *
- * Este es un módulo vacío que sirve como punto de entrada
- * La conversión a Web Components se hace mediante la función
- * registerDropiElements
- */
+// Custom Loader that returns empty translations to avoid HTTP requests by default
+class CustomTranslateLoader {
+    getTranslation(lang) {
+        return of({});
+    }
+}
+// Mock services to prevent NullInjectorError
+const MockService = {
+    get: () => of(null),
+    post: () => of(null),
+    put: () => of(null),
+    delete: () => of(null),
+    getBrandInfo: () => ({ name: "Dropi" }),
+};
 class DropiElementsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, imports: [BrowserAnimationsModule,
+            HttpClientModule, i2.TranslateModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, providers: [
+            { provide: "UserService", useValue: MockService },
+            { provide: "SettingsService", useValue: MockService },
+            { provide: "ApiService", useValue: MockService },
+        ], imports: [BrowserAnimationsModule,
+            HttpClientModule,
+            TranslateModule.forRoot({
+                loader: { provide: TranslateLoader, useClass: CustomTranslateLoader },
+            })] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiElementsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [],
+                    imports: [
+                        BrowserAnimationsModule,
+                        HttpClientModule,
+                        TranslateModule.forRoot({
+                            loader: { provide: TranslateLoader, useClass: CustomTranslateLoader },
+                        }),
+                    ],
+                    providers: [
+                        { provide: "UserService", useValue: MockService },
+                        { provide: "SettingsService", useValue: MockService },
+                        { provide: "ApiService", useValue: MockService },
+                    ],
                     declarations: [],
                     exports: [],
                 }]
@@ -208,7 +237,7 @@ class DatePickerRangeComponent {
         this.onSelect(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerRangeComponent, isStandalone: true, selector: "app-date-picker-range", inputs: { setRight: "setRight", loading: "loading", showLabel: "showLabel", placeholder: "placeholder", appendTo: "appendTo", maxDate: "maxDate", minDate: "minDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"setRight ? '' : 'calendar-left'\"\n  class=\"date-picker-range\"\n  *ngIf=\"!loading\"\n>\n  <div *ngIf=\"showLabel\" class=\"label\">{{ \"date range\" | translate }}</div>\n  <p-calendar\n    #calendarInputRef\n    class=\"date-picker-input\"\n    [panelStyleClass]=\"\n      setRight ? 'dropi-custom-calendar' : 'dropi-custom-calendar calendar-left'\n    \"\n    [ngClass]=\"{ 'date-picker-input--open': loading }\"\n    [(ngModel)]=\"dateRange\"\n    selectionMode=\"range\"\n    [readonlyInput]=\"true\"\n    dateFormat=\"dd/mm/yy\"\n    [style]=\"{ width: '100%' }\"\n    inputId=\"date-range\"\n    (onSelect)=\"onSelect($event)\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [placeholder]=\"placeholder\"\n    ([CalendarTypeView])=\"(CalendarTypeView)\"\n    showOtherMonths=\"false\"\n    responsiveOptions=\"true\"\n    [disabled]=\"loading\"\n    (onClick)=\"checkCalendarView(calendar)\"\n    [appendTo]=\"appendTo\"\n  >\n    <ng-template *ngIf=\"CalendarTypeView === null\" pTemplate=\"header\">\n      <div class=\"custom-header\">\n        <button\n          *ngFor=\"let range of ranges; let i = index\"\n          (click)=\"selectRange(range, i)\"\n          class=\"p-button-text\"\n          [ngClass]=\"{ active: i === activeRangeIndex }\"\n        >\n          {{ range.label | translate }}\n        </button>\n        <div *ngIf=\"viewRangeWarning\" class=\"warning-box\">\n          <span class=\"warning-message\"\n            >Solo puedes filtrar en un rango m\u00E1ximo de 90 d\u00EDas.</span\n          >\n        </div>\n      </div>\n    </ng-template>\n  </p-calendar>\n</div>\n\n<div class=\"loading\" *ngIf=\"loading\">\n  <div class=\"skeleton dp\"></div>\n</div>\n", styles: [":host ::ng-deep .calendar-left ::ng-deep .p-datepicker{right:0!important}:host ::ng-deep .date-picker-range{width:100%;max-width:300px}:host ::ng-deep h3{margin-bottom:.5rem;font-size:1rem;font-weight:500}:host ::ng-deep .label{font-family:Inter;font-size:11px;font-weight:500;line-height:16px;text-align:left;color:#7b8190;margin-bottom:8px}:host ::ng-deep .p-calendar{width:100%}:host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-datepicker table td>span.p-highlight{color:#f49a3d;background:#fef5ec}:host ::ng-deep .p-datepicker table td.p-datepicker-today>span{background:#fff;font-weight:600;color:#f49a3d;border:1px solid rgba(244,154,61,.2705882353)}:host ::ng-deep .custom-header{display:flex;flex-direction:column;border-left:1px solid #dde5eb;padding:10px}@media screen and (max-width: 480px){:host ::ng-deep .custom-header{flex-direction:row;gap:0 10px;border-left:none;flex-wrap:wrap;padding:10px 0 0;margin-bottom:-14px}}:host ::ng-deep .custom-header .p-button{margin-bottom:.5rem;justify-content:flex-start;color:#1f2937;padding:4px 6px}:host ::ng-deep .custom-header .p-button span.p-button-label{font-family:Inter;font-size:13px;font-weight:400;line-height:14px;text-align:left;min-width:max-content}:host ::ng-deep .custom-header .active{background:#f5f6f8;border-radius:5px}:host ::ng-deep .custom-header .active span{font-weight:600!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)){display:flex!important;flex-direction:column!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)) .custom-header{display:none}:host ::ng-deep .p-datepicker{min-width:320px;display:flex;flex-direction:row-reverse;left:unset!important;padding:8px 16px!important;gap:10px}@media screen and (max-width: 480px){:host ::ng-deep .p-datepicker{width:100%;flex-direction:column;padding:0;left:0!important;right:unset!important}}:host ::ng-deep .p-datepicker-header{padding:.5rem}:host ::ng-deep .p-datepicker-calendar th{font-weight:600}:host ::ng-deep .date-picker-input--open .p-datepicker{display:none!important}:host ::ng-deep input#date-range{width:100%;border-radius:8px!important;border:1px solid var(--Light-Light-3, #d3d7da);background:var(--Light-Light-2, #ffffff);height:40px;color:var(--Dark-Dark-2, #74788d);text-overflow:ellipsis;font-size:13px;display:flex;align-items:center}:host ::ng-deep .p-datepicker table td{padding:2px!important;font-size:14px!important}:host ::ng-deep .p-datepicker table td>span{width:34px;height:34px}:host ::ng-deep .p-datepicker-calendar th{font-size:13px!important}:host ::ng-deep .p-datepicker-header{padding:0!important}:host ::ng-deep .p-icon-wrapper{width:12px!important;color:#a0a8b8}:host ::ng-deep span.p-disabled{color:#9fb4c3;font-weight:200}:host ::ng-deep .p-datepicker-title{font-size:14px!important}:host ::ng-deep .p-datepicker-title button{font-weight:400!important}:host ::ng-deep .dp{height:40px;width:100%;min-width:180px;margin-top:18px}:host ::ng-deep .warning-box{width:100%;margin:0;padding:4px 8px;gap:4px;border-radius:4px;border:1px 0px 0px 0px;border:1px solid #f4c370;background:#fef8ed;display:flex;flex-direction:row;align-items:center}:host ::ng-deep .warning-box .warning-message{color:#495057;font-family:Inter;font-size:10px;font-weight:400;line-height:16px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}@keyframes placeHolderShimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#f5f6f8 8%,#e3e7efbf 28%,#f5f6f8 77%);background-size:800px 104px;position:relative;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerRangeComponent, isStandalone: true, selector: "app-date-picker-range", inputs: { setRight: "setRight", loading: "loading", showLabel: "showLabel", placeholder: "placeholder", appendTo: "appendTo", maxDate: "maxDate", minDate: "minDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"setRight ? '' : 'calendar-left'\"\n  class=\"date-picker-range\"\n  *ngIf=\"!loading\"\n>\n  <div *ngIf=\"showLabel\" class=\"label\">{{ \"date range\" | translate }}</div>\n  <p-calendar\n    #calendarInputRef\n    class=\"date-picker-input\"\n    [panelStyleClass]=\"\n      setRight ? 'dropi-custom-calendar' : 'dropi-custom-calendar calendar-left'\n    \"\n    [ngClass]=\"{ 'date-picker-input--open': loading }\"\n    [(ngModel)]=\"dateRange\"\n    selectionMode=\"range\"\n    [readonlyInput]=\"true\"\n    dateFormat=\"dd/mm/yy\"\n    [style]=\"{ width: '100%' }\"\n    inputId=\"date-range\"\n    (onSelect)=\"onSelect($event)\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [placeholder]=\"placeholder\"\n    ([CalendarTypeView])=\"(CalendarTypeView)\"\n    showOtherMonths=\"false\"\n    responsiveOptions=\"true\"\n    [disabled]=\"loading\"\n    (onClick)=\"checkCalendarView(calendar)\"\n    [appendTo]=\"appendTo\"\n  >\n    <ng-template *ngIf=\"CalendarTypeView === null\" pTemplate=\"header\">\n      <div class=\"custom-header\">\n        <button\n          *ngFor=\"let range of ranges; let i = index\"\n          (click)=\"selectRange(range, i)\"\n          class=\"p-button-text\"\n          [ngClass]=\"{ active: i === activeRangeIndex }\"\n        >\n          {{ range.label | translate }}\n        </button>\n        <div *ngIf=\"viewRangeWarning\" class=\"warning-box\">\n          <span class=\"warning-message\"\n            >Solo puedes filtrar en un rango m\u00E1ximo de 90 d\u00EDas.</span\n          >\n        </div>\n      </div>\n    </ng-template>\n  </p-calendar>\n</div>\n\n<div class=\"loading\" *ngIf=\"loading\">\n  <div class=\"skeleton dp\"></div>\n</div>\n", styles: [":host ::ng-deep .calendar-left ::ng-deep .p-datepicker{right:0!important}:host ::ng-deep .date-picker-range{width:100%;max-width:300px}:host ::ng-deep h3{margin-bottom:.5rem;font-size:1rem;font-weight:500}:host ::ng-deep .label{font-family:Inter;font-size:11px;font-weight:500;line-height:16px;text-align:left;color:#7b8190;margin-bottom:8px}:host ::ng-deep .p-calendar{width:100%}:host ::ng-deep .p-calendar .p-inputtext{width:100%}:host ::ng-deep .p-datepicker table td>span.p-highlight{color:#f49a3d;background:#fef5ec}:host ::ng-deep .p-datepicker table td.p-datepicker-today>span{background:#fff;font-weight:600;color:#f49a3d;border:1px solid rgba(244,154,61,.2705882353)}:host ::ng-deep .custom-header{display:flex;flex-direction:column;border-left:1px solid #dde5eb;padding:10px}@media screen and (max-width: 480px){:host ::ng-deep .custom-header{flex-direction:row;gap:0 10px;border-left:none;flex-wrap:wrap;padding:10px 0 0;margin-bottom:-14px}}:host ::ng-deep .custom-header .p-button{margin-bottom:.5rem;justify-content:flex-start;color:#1f2937;padding:4px 6px}:host ::ng-deep .custom-header .p-button span.p-button-label{font-family:Inter;font-size:13px;font-weight:400;line-height:14px;text-align:left;min-width:max-content}:host ::ng-deep .custom-header .active{background:#f5f6f8;border-radius:5px}:host ::ng-deep .custom-header .active span{font-weight:600!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)){display:flex!important;flex-direction:column!important}:host ::ng-deep .p-datepicker:has(>*:nth-child(3)) .custom-header{display:none}:host ::ng-deep .p-datepicker{min-width:320px;display:flex;flex-direction:row-reverse;left:unset!important;padding:8px 16px!important;gap:10px}@media screen and (max-width: 480px){:host ::ng-deep .p-datepicker{width:100%;flex-direction:column;padding:0;left:0!important;right:unset!important}}:host ::ng-deep .p-datepicker-header{padding:.5rem}:host ::ng-deep .p-datepicker-calendar th{font-weight:600}:host ::ng-deep .date-picker-input--open .p-datepicker{display:none!important}:host ::ng-deep input#date-range{width:100%;border-radius:8px!important;border:1px solid var(--Light-Light-3, #d3d7da);background:var(--Light-Light-2, #ffffff);height:40px;color:var(--Dark-Dark-2, #74788d);text-overflow:ellipsis;font-size:13px;display:flex;align-items:center}:host ::ng-deep .p-datepicker table td{padding:2px!important;font-size:14px!important}:host ::ng-deep .p-datepicker table td>span{width:34px;height:34px}:host ::ng-deep .p-datepicker-calendar th{font-size:13px!important}:host ::ng-deep .p-datepicker-header{padding:0!important}:host ::ng-deep .p-icon-wrapper{width:12px!important;color:#a0a8b8}:host ::ng-deep span.p-disabled{color:#9fb4c3;font-weight:200}:host ::ng-deep .p-datepicker-title{font-size:14px!important}:host ::ng-deep .p-datepicker-title button{font-weight:400!important}:host ::ng-deep .dp{height:40px;width:100%;min-width:180px;margin-top:18px}:host ::ng-deep .warning-box{width:100%;margin:0;padding:4px 8px;gap:4px;border-radius:4px;border:1px 0px 0px 0px;border:1px solid #f4c370;background:#fef8ed;display:flex;flex-direction:row;align-items:center}:host ::ng-deep .warning-box .warning-message{color:#495057;font-family:Inter;font-size:10px;font-weight:400;line-height:16px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}@keyframes placeHolderShimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#f5f6f8 8%,#e3e7efbf 28%,#f5f6f8 77%);background-size:800px 104px;position:relative;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerRangeComponent, decorators: [{
             type: Component,
@@ -260,7 +289,7 @@ class DatePickerComponent {
     }
     onCalendarOpen(event) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { label: "label", required: "required", selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate", showIcon: "showIcon", showTime: "showTime", loading: "loading", isInvalid: "isInvalid", placeholder: "placeholder", disabled: "disabled", selectionMode: "selectionMode", setRight: "setRight", filters: "filters" }, outputs: { onChangeDate: "onChangeDate", onClosePanel: "onClosePanel" }, ngImport: i0, template: "<div [ngClass]=\"setRight ? '' : 'calendar-left'\" class=\"date-picker-range\" *ngIf=\"!loading\">\n  <div class=\"label\" *ngIf=\"label\">{{ label }}</div>\n  <p-calendar\n    class=\"date-picker-input dropi-date-picker\"\n    [ngClass]=\"{ 'date-picker-input--open': loading }\"\n    [ngClass]=\"{ 'date-is-invalid': isInvalid }\"\n    [required]=\"required\"\n    [(ngModel)]=\"selectedDate\"\n    [selectionMode]=\"selectionMode\"\n    [readonlyInput]=\"true\"\n    dateFormat=\"dd/mm/yy\"\n    [placeholder]=\"placeholder\"\n    [style]=\"{ width: '100%' }\"\n    inputId=\"date-range\"\n    (onSelect)=\"onSelect($event)\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    showOtherMonths=\"false\"\n    responsiveOptions=\"true\"\n    [disabled]=\"loading || disabled\"\n    (onClose)=\"onClose($event)\"\n    [showIcon]=\"showIcon\"\n    [showTime]=\"showTime\"\n    (onShow)=\"onCalendarOpen($event)\"\n  >\n    <ng-template pTemplate=\"triggericon\" let-clickCallBack=\"clickCallBack\">\n      <app-icon name=\"Calendar\" width=\"18px\" height=\"18px\" color=\"Gray-Gray-400\" />\n      <!-- <i class=\"pi pi-user pointer-events-none\" (click)=\"clickCallBack($event)\"></i> -->\n    </ng-template>\n  </p-calendar>\n\n  <div class=\"loading\" *ngIf=\"loading\">\n    <div class=\"skeleton dp\"></div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.calendar-left ::ng-deep .p-datepicker{right:0!important;left:unset!important}.date-picker-range{background:var(--White, #fff);width:100%}.date-picker-range span{background:var(--White, #fff)}.date-picker-range h3{margin-bottom:.5rem;font-size:1rem;font-weight:500}.date-picker-range .label{font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px;text-align:left;color:var(--Gray-600);margin-bottom:8px}.date-picker-range ::ng-deep .p-calendar{padding:0 5px;width:100%;border-radius:var(--Border-2, 8px);background:var(--White, #fff);border:1px solid var(--Gray-Gray-200);height:40px;color:var(--Gray-500, #69738c);font-style:normal;font-weight:400;line-height:150%;text-overflow:ellipsis;font-size:14px;display:flex;flex-direction:row-reverse;align-items:center;cursor:pointer}.date-picker-range ::ng-deep .p-calendar .p-inputtext{width:100%;border:none;padding:0;cursor:pointer}.date-picker-range ::ng-deep .p-calendar.p-calendar-disabled{border:1px solid var(--Gray-200, #c3c9d9)!important;color:var(--Gray-400, #858ea6)!important;background:var(--Gray-50, #f7f8fa)!important}.date-picker-range ::ng-deep .p-calendar.p-calendar-disabled .p-inputtext{background:var(--Gray-50, #f7f8fa)!important;color:var(--Gray-400, #858ea6)}.date-picker-range ::ng-deep .p-datepicker table td>span.p-highlight{color:#f49a3d;background:#fef5ec}.date-picker-range ::ng-deep .p-datepicker table td.p-datepicker-today>span{color:var(--White, #fff);background-color:var(--Primary-Primary-500)}.date-picker-range ::ng-deep .custom-header{display:flex;flex-direction:column;border-left:1px solid #dde5eb;padding:10px}.date-picker-range ::ng-deep .custom-header .p-button{margin-bottom:.5rem;justify-content:flex-start;color:#1f2937;padding:4px 6px}.date-picker-range ::ng-deep .custom-header .p-button span.p-button-label{font-family:Inter,sans-serif;font-size:13px;font-weight:400;line-height:14px;text-align:left;min-width:max-content}.date-picker-range ::ng-deep .custom-header .active{background:#f5f6f8;border-radius:5px}.date-picker-range ::ng-deep .custom-header .active span{font-weight:600!important}.date-picker-range ::ng-deep .p-datepicker:has(>*:nth-child(3)){display:flex!important;flex-direction:column!important}.date-picker-range ::ng-deep .p-datepicker:has(>*:nth-child(3)) .custom-header{display:none}.date-picker-range ::ng-deep .p-datepicker{display:flex;gap:10px;flex-direction:column;padding:0;width:280px;right:unset!important;z-index:9999!important}.date-picker-range ::ng-deep .p-element span{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.date-picker-range ::ng-deep .p-datepicker-other-month{color:var(--Gray-Gray-400)}.date-picker-range ::ng-deep .p-button.p-button-icon-only{background-color:transparent;border:none;width:40px;height:40px}::ng-deep .date-picker-input--open .p-datepicker{display:none!important}::ng-deep .p-datepicker table td{padding:2px!important;font-size:14px!important}::ng-deep .p-datepicker table td>span{width:34px;height:34px}::ng-deep .p-datepicker-calendar th{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple);text-align:center}::ng-deep .p-datepicker-header{padding:var(--Size-3) var(--Size-5)}::ng-deep .p-datepicker-next,::ng-deep .p-datepicker-prev{color:var(--Gray-Gray-400)!important}::ng-deep .p-datepicker-next:hover,::ng-deep .p-datepicker-prev:hover{border-radius:50%}::ng-deep .p-datepicker-group-container{padding:var(--Size-4, 16px)}::ng-deep .p-icon-wrapper{width:12px!important;color:#a0a8b8}::ng-deep span.p-disabled{color:#9fb4c3;font-weight:200}::ng-deep .p-datepicker-title{font-size:14px!important}::ng-deep .p-datepicker-title button{color:var(--Gray-400, #858ea6);font-size:14px;font-style:normal;font-weight:700!important;line-height:110%}::ng-deep .ng-invalid.ng-touched>.p-calendar,::ng-deep .date-is-invalid>.p-calendar{border:1px solid var(--Dager-danger-500, #f46a6b)!important}.dp{height:40px;width:100%;min-width:180px;margin-top:18px}.custom-filters{background:#fff;padding:var(--Size-3) var(--Size-3) var(--Size-3) var(--Size-4);border-radius:6px;box-shadow:4px 3px 13px -6px #0000002e;-webkit-box-shadow:4px 3px 13px -6px rgba(0,0,0,.18);-moz-box-shadow:4px 3px 13px -6px rgba(0,0,0,.18);width:max-content!important;display:flex;width:100%;flex:0 0 auto;height:100%}.custom-filters .filtros{flex-direction:column;gap:4px;display:flex}.custom-filters .filtros .title-header{padding:var(--Size-2)}.custom-filters .filtros button{border:none;background:transparent;font-weight:500;color:var(--Gray-Gray-600);transition:box-shadow .2s ease;border:1px solid transparent;border-radius:var(--Size-2);padding:var(--Size-2)}.custom-filters .filtros button:hover{border:1px solid var(--Secondary-Secondary-500);border-radius:var(--Size-2)}::ng-deep .dropi-date-picker .p-datepicker .custom-filters{display:flex;background:#fff;padding:var(--Size-3) var(--Size-3) var(--Size-3) var(--Size-4);border-radius:6px;min-width:max-content;width:max-content;height:100%;flex:0 0 auto;flex-direction:column}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros{display:flex;flex-direction:column;gap:4px}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros .title-header{padding:var(--Size-2)}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros button{border:none;background:transparent;font-weight:500;color:var(--Gray-Gray-600);transition:box-shadow .2s ease;border:1px solid transparent;border-radius:var(--Size-2);padding:var(--Size-2);text-align:start}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros button:hover{border:1px solid var(--Secondary-Secondary-500);border-radius:var(--Size-2)}::ng-deep .dropi-date-picker .p-datepicker-group-container{width:100%}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filter-btn.selected{border:1px solid var(--Secondary-Secondary-500)}:host ::ng-deep .dropi-date-picker .p-datepicker.p-component{font-size:14px;font-weight:600;width:auto!important}@keyframes placeHolderShimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#f5f6f8 8%,#e3e7efbf 28%,#f5f6f8 77%);background-size:800px 104px;position:relative;border-radius:6px}.warning-box{width:100%;margin:0;padding:4px 8px;gap:4px;border-radius:4px;border:1px 0px 0px 0px;border:1px solid #f4c370;background:#fef8ed;display:flex;flex-direction:row;align-items:center}.warning-box .warning-message{color:#495057;font-family:Inter,sans-serif;font-size:10px;font-weight:400;line-height:16px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}:host ::ng-deep app-icon{display:flex}::ng-deep .p-datepicker{z-index:9999!important;position:absolute!important}::ng-deep .p-calendar-overlay{z-index:9999!important}::ng-deep .p-overlay{z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DatePickerComponent, isStandalone: true, selector: "app-date-picker", inputs: { label: "label", required: "required", selectedDate: "selectedDate", minDate: "minDate", maxDate: "maxDate", showIcon: "showIcon", showTime: "showTime", loading: "loading", isInvalid: "isInvalid", placeholder: "placeholder", disabled: "disabled", selectionMode: "selectionMode", setRight: "setRight", filters: "filters" }, outputs: { onChangeDate: "onChangeDate", onClosePanel: "onClosePanel" }, ngImport: i0, template: "<div [ngClass]=\"setRight ? '' : 'calendar-left'\" class=\"date-picker-range\" *ngIf=\"!loading\">\n  <div class=\"label\" *ngIf=\"label\">{{ label }}</div>\n  <p-calendar\n    class=\"date-picker-input dropi-date-picker\"\n    [ngClass]=\"{ 'date-picker-input--open': loading }\"\n    [ngClass]=\"{ 'date-is-invalid': isInvalid }\"\n    [required]=\"required\"\n    [(ngModel)]=\"selectedDate\"\n    [selectionMode]=\"selectionMode\"\n    [readonlyInput]=\"true\"\n    dateFormat=\"dd/mm/yy\"\n    [placeholder]=\"placeholder\"\n    [style]=\"{ width: '100%' }\"\n    inputId=\"date-range\"\n    (onSelect)=\"onSelect($event)\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    showOtherMonths=\"false\"\n    responsiveOptions=\"true\"\n    [disabled]=\"loading || disabled\"\n    (onClose)=\"onClose($event)\"\n    [showIcon]=\"showIcon\"\n    [showTime]=\"showTime\"\n    (onShow)=\"onCalendarOpen($event)\"\n  >\n    <ng-template pTemplate=\"triggericon\" let-clickCallBack=\"clickCallBack\">\n      <app-icon name=\"Calendar\" width=\"18px\" height=\"18px\" color=\"Gray-Gray-400\" />\n      <!-- <i class=\"pi pi-user pointer-events-none\" (click)=\"clickCallBack($event)\"></i> -->\n    </ng-template>\n  </p-calendar>\n\n  <div class=\"loading\" *ngIf=\"loading\">\n    <div class=\"skeleton dp\"></div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.calendar-left ::ng-deep .p-datepicker{right:0!important;left:unset!important}.date-picker-range{background:var(--White, #fff);width:100%}.date-picker-range span{background:var(--White, #fff)}.date-picker-range h3{margin-bottom:.5rem;font-size:1rem;font-weight:500}.date-picker-range .label{font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px;text-align:left;color:var(--Gray-600);margin-bottom:8px}.date-picker-range ::ng-deep .p-calendar{padding:0 5px;width:100%;border-radius:var(--Border-2, 8px);background:var(--White, #fff);border:1px solid var(--Gray-Gray-200);height:40px;color:var(--Gray-500, #69738c);font-style:normal;font-weight:400;line-height:150%;text-overflow:ellipsis;font-size:14px;display:flex;flex-direction:row-reverse;align-items:center;cursor:pointer}.date-picker-range ::ng-deep .p-calendar .p-inputtext{width:100%;border:none;padding:0;cursor:pointer}.date-picker-range ::ng-deep .p-calendar.p-calendar-disabled{border:1px solid var(--Gray-200, #c3c9d9)!important;color:var(--Gray-400, #858ea6)!important;background:var(--Gray-50, #f7f8fa)!important}.date-picker-range ::ng-deep .p-calendar.p-calendar-disabled .p-inputtext{background:var(--Gray-50, #f7f8fa)!important;color:var(--Gray-400, #858ea6)}.date-picker-range ::ng-deep .p-datepicker table td>span.p-highlight{color:#f49a3d;background:#fef5ec}.date-picker-range ::ng-deep .p-datepicker table td.p-datepicker-today>span{color:var(--White, #fff);background-color:var(--Primary-Primary-500)}.date-picker-range ::ng-deep .custom-header{display:flex;flex-direction:column;border-left:1px solid #dde5eb;padding:10px}.date-picker-range ::ng-deep .custom-header .p-button{margin-bottom:.5rem;justify-content:flex-start;color:#1f2937;padding:4px 6px}.date-picker-range ::ng-deep .custom-header .p-button span.p-button-label{font-family:Inter,sans-serif;font-size:13px;font-weight:400;line-height:14px;text-align:left;min-width:max-content}.date-picker-range ::ng-deep .custom-header .active{background:#f5f6f8;border-radius:5px}.date-picker-range ::ng-deep .custom-header .active span{font-weight:600!important}.date-picker-range ::ng-deep .p-datepicker:has(>*:nth-child(3)){display:flex!important;flex-direction:column!important}.date-picker-range ::ng-deep .p-datepicker:has(>*:nth-child(3)) .custom-header{display:none}.date-picker-range ::ng-deep .p-datepicker{display:flex;gap:10px;flex-direction:column;padding:0;width:280px;right:unset!important;z-index:9999!important}.date-picker-range ::ng-deep .p-element span{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.date-picker-range ::ng-deep .p-datepicker-other-month{color:var(--Gray-Gray-400)}.date-picker-range ::ng-deep .p-button.p-button-icon-only{background-color:transparent;border:none;width:40px;height:40px}::ng-deep .date-picker-input--open .p-datepicker{display:none!important}::ng-deep .p-datepicker table td{padding:2px!important;font-size:14px!important}::ng-deep .p-datepicker table td>span{width:34px;height:34px}::ng-deep .p-datepicker-calendar th{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple);text-align:center}::ng-deep .p-datepicker-header{padding:var(--Size-3) var(--Size-5)}::ng-deep .p-datepicker-next,::ng-deep .p-datepicker-prev{color:var(--Gray-Gray-400)!important}::ng-deep .p-datepicker-next:hover,::ng-deep .p-datepicker-prev:hover{border-radius:50%}::ng-deep .p-datepicker-group-container{padding:var(--Size-4, 16px)}::ng-deep .p-icon-wrapper{width:12px!important;color:#a0a8b8}::ng-deep span.p-disabled{color:#9fb4c3;font-weight:200}::ng-deep .p-datepicker-title{font-size:14px!important}::ng-deep .p-datepicker-title button{color:var(--Gray-400, #858ea6);font-size:14px;font-style:normal;font-weight:700!important;line-height:110%}::ng-deep .ng-invalid.ng-touched>.p-calendar,::ng-deep .date-is-invalid>.p-calendar{border:1px solid var(--Dager-danger-500, #f46a6b)!important}.dp{height:40px;width:100%;min-width:180px;margin-top:18px}.custom-filters{background:#fff;padding:var(--Size-3) var(--Size-3) var(--Size-3) var(--Size-4);border-radius:6px;box-shadow:4px 3px 13px -6px #0000002e;-webkit-box-shadow:4px 3px 13px -6px rgba(0,0,0,.18);-moz-box-shadow:4px 3px 13px -6px rgba(0,0,0,.18);width:max-content!important;display:flex;width:100%;flex:0 0 auto;height:100%}.custom-filters .filtros{flex-direction:column;gap:4px;display:flex}.custom-filters .filtros .title-header{padding:var(--Size-2)}.custom-filters .filtros button{border:none;background:transparent;font-weight:500;color:var(--Gray-Gray-600);transition:box-shadow .2s ease;border:1px solid transparent;border-radius:var(--Size-2);padding:var(--Size-2)}.custom-filters .filtros button:hover{border:1px solid var(--Secondary-Secondary-500);border-radius:var(--Size-2)}::ng-deep .dropi-date-picker .p-datepicker .custom-filters{display:flex;background:#fff;padding:var(--Size-3) var(--Size-3) var(--Size-3) var(--Size-4);border-radius:6px;min-width:max-content;width:max-content;height:100%;flex:0 0 auto;flex-direction:column}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros{display:flex;flex-direction:column;gap:4px}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros .title-header{padding:var(--Size-2)}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros button{border:none;background:transparent;font-weight:500;color:var(--Gray-Gray-600);transition:box-shadow .2s ease;border:1px solid transparent;border-radius:var(--Size-2);padding:var(--Size-2);text-align:start}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filtros button:hover{border:1px solid var(--Secondary-Secondary-500);border-radius:var(--Size-2)}::ng-deep .dropi-date-picker .p-datepicker-group-container{width:100%}::ng-deep .dropi-date-picker .p-datepicker .custom-filters .filter-btn.selected{border:1px solid var(--Secondary-Secondary-500)}:host ::ng-deep .dropi-date-picker .p-datepicker.p-component{font-size:14px;font-weight:600;width:auto!important}@keyframes placeHolderShimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#f5f6f8 8%,#e3e7efbf 28%,#f5f6f8 77%);background-size:800px 104px;position:relative;border-radius:6px}.warning-box{width:100%;margin:0;padding:4px 8px;gap:4px;border-radius:4px;border:1px 0px 0px 0px;border:1px solid #f4c370;background:#fef8ed;display:flex;flex-direction:row;align-items:center}.warning-box .warning-message{color:#495057;font-family:Inter,sans-serif;font-size:10px;font-weight:400;line-height:16px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}:host ::ng-deep app-icon{display:flex}::ng-deep .p-datepicker{z-index:9999!important;position:absolute!important}::ng-deep .p-calendar-overlay{z-index:9999!important}::ng-deep .p-overlay{z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -868,7 +897,7 @@ class AlertModalComponent {
         return Array.isArray(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertModalComponent, deps: [{ token: "TemplateAlertModalService" }, { token: "SettingsService" }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AlertModalComponent, isStandalone: true, selector: "app-alert-modal", inputs: { visible: "visible", params: "params", loading: "loading", isStep: "isStep", contentTemplate: "contentTemplate", baseZIndex: "baseZIndex" }, outputs: { modalOpenChange: "modalOpenChange", primaryButtonEvent: "primaryButtonEvent", secondaryButtonEvent: "secondaryButtonEvent", onHide: "onHide" }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<dropi-modal\n  styleClass=\"dropi-alert-modal\"\n  [(visible)]=\"visible\"\n  [modal]=\"true\"\n  [closable]=\"params?.closable ? true : false\"\n  [dismissableMask]=\"false\"\n  [closeOnEscape]=\"false\"\n  [showHeader]=\"false\"\n  transitionOptions=\"300ms\"\n  [showHeader]=\"params?.closable ? true : false\"\n  [autoZIndex]=\"true\"\n  [baseZIndex]=\"baseZIndex\"\n  (onHide)=\"onHideModal()\"\n>\n  <ng-template pTemplate=\"content\">\n    <div class=\"body-alert\" *ngIf=\"!loading\">\n      <div class=\"header-alert\">\n        <div class=\"lottie-img\" *ngIf=\"visible && brandName === 'dropi'\">\n          <dotlottie-player\n            [src]=\"sourceAnimation\"\n            background=\"transparent\"\n            speed=\"1\"\n            style=\"width: 100%; height: auto\"\n            loop\n            autoplay\n          ></dotlottie-player>\n        </div>\n        <div class=\"wb-img\" *ngIf=\"visible && brandName !== 'dropi'\">\n          <img [src]=\"imageWhiteBrand\" alt=\"logo\" />\n        </div>\n      </div>\n      <div class=\"content-alert\">\n        <h2>{{ tittle | translate }}</h2>\n        <ng-container *ngIf=\"isArray(message)\">\n          <p *ngFor=\"let m of message\">{{ m | translate }}</p>\n        </ng-container>\n\n        <p *ngIf=\"!isArray(message)\">\n          {{ message | translate }}\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"alertTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"alertTemplate; context: { $implicit: contextTemplate }\"\n        ></ng-container>\n      </ng-container>\n\n      <div class=\"actions\" *ngIf=\"displayButtons\">\n        <dropi-button\n          *ngIf=\"secondaryButton\"\n          [text]=\"secondaryButton | translate\"\n          severity=\"secondary\"\n          (onClick)=\"secondaryButtonAction()\"\n        ></dropi-button>\n        <dropi-button\n          [text]=\"primaryButton | translate\"\n          (onClick)=\"primaryButtonAction()\"\n        ></dropi-button>\n      </div>\n\n      <!-- <div class=\"actions\" *ngIf=\"displayButtons\">\n      <button\n        *ngIf=\"secondaryButton\"\n        class=\"btn btn-secondary\"\n        (click)=\"secondaryButtonAction()\"\n        data-cy=\"alert-modal-secondary-button\"\n      >\n        {{ secondaryButton | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        (click)=\"primaryButtonAction()\"\n        data-cy=\"alert-modal-primary-button\"\n      >\n        {{ primaryButton | translate }}\n      </button>\n    </div> -->\n    </div>\n\n    <div class=\"body-alert-loading\" *ngIf=\"loading\">\n      <div class=\"header-alert\" [style]=\"{ 'margin-bottom': loadingAnimation.marginBottom }\">\n        <div class=\"lottie-img\" *ngIf=\"visible && loading\">\n          <dotlottie-player\n            *ngIf=\"loading && brandName === 'dropi'\"\n            [src]=\"loadingAnimation.path\"\n            background=\"transparent\"\n            speed=\"1\"\n            [style]=\"{\n              width: loadingAnimation.width,\n              height: loadingAnimation.height,\n            }\"\n            loop\n            autoplay\n          ></dotlottie-player>\n          <dotlottie-player\n            *ngIf=\"loading && brandName !== 'dropi' && params.type == 'loading'\"\n            [src]=\"'/assets/lottie-files/loading-mb.json'\"\n            background=\"transparent\"\n            speed=\"1\"\n            style=\"width: 300px; height: auto\"\n            loop\n            autoplay\n          ></dotlottie-player>\n        </div>\n        <div class=\"wb-img\" *ngIf=\"visible && brandName !== 'dropi' && params.type !== 'loading'\">\n          <img [src]=\"imageWhiteBrand\" alt=\"logo\" />\n        </div>\n      </div>\n      <div class=\"content-alert\">\n        <p-progressBar *ngIf=\"withLoadingProgressBar\" mode=\"indeterminate\" color=\"#F49A3D\" />\n        <h2>\n          {{ loadingTitle | translate }}\n        </h2>\n        <p>\n          {{ loadingMessage | translate }}\n        </p>\n        <h5 *ngIf=\"params.applyCountRegresive\">\n          {{ 'in' | translate }} {{ countRegresive }} {{ 'seconds' | translate }}\n        </h5>\n      </div>\n    </div>\n  </ng-template>\n</dropi-modal>\n", styles: ["@media screen and (max-width: 768px){::ng-deep .dropi-modal-root.dropi-modal-root--open .dropi-modal__panel.dropi-alert-modal{transform:translateY(0)!important}}@media screen and (max-width: 768px){::ng-deep .dropi-modal-root.dropi-modal-root--closing .dropi-modal__panel.dropi-alert-modal{transform:translateY(100%)!important;opacity:1!important}}@media screen and (max-width: 768px){::ng-deep .dropi-modal-root.dropi-modal-root--open.dropi-modal-root--closing .dropi-modal__panel.dropi-alert-modal{transform:translateY(100%)!important;opacity:1!important}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal{width:440px!important;min-height:280px!important;overflow:hidden!important}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal__content{overflow:hidden!important;display:flex;justify-content:center;align-items:center}@media screen and (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal{width:100%!important;max-width:100%!important;height:auto!important;padding-bottom:30px!important;position:absolute!important;bottom:0!important;border-radius:10px 10px 0 0!important;transform:translateY(100%)!important;transition:transform .3s cubic-bezier(0,0,.2,1)!important;opacity:1!important}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal-container{width:460px;max-width:460px;height:auto!important}@media (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal-container{width:calc(100% - 32px);max-width:calc(100% - 32px);height:auto!important;margin:16px;top:50%!important;transform:translateY(-50%)!important}}@media (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal-content{max-height:calc(100vh - 32px);overflow-y:auto}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog{background-color:#fff!important;box-shadow:0 20px 25px #0000001a;border-radius:8px!important;max-width:460px;width:100%;box-sizing:border-box;padding:32px;margin:0 20px;transition:all .3s ease-in-out;height:auto}@media (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog{padding:24px;margin:0;border-radius:12px!important}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog-content{padding:0;overflow:hidden}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog-header{position:absolute;right:-10px;top:-10px;background:transparent}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-progressbar{height:6px;border-radius:4px;margin-bottom:25px}.lottie-img{margin-top:-8px;margin-bottom:8px;min-height:100px}.wb-img{display:flex;justify-content:center;margin-top:4px!important}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;overflow:hidden}.header-alert{width:120px}.content-alert{text-align:center}.content-alert h2{color:var(--Gray-Gray-1, #1f2937);font-size:19px;font-weight:600}.content-alert p{color:var(--Gray-Gray-2, #74798d);font-size:14px;margin-bottom:8px;overflow-wrap:anywhere;max-height:100px;overflow:auto}.actions{display:flex;gap:10px;width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}.actions dropi-button ::ng-deep .btn{width:100%}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}.body-alert-loading .header-alert{width:100%;display:flex;align-items:center;justify-content:center;height:160px}button{flex:1;outline:none;border-radius:8px;display:flex;align-items:center;gap:8px;justify-content:center}button.btn-primary{background:var(--Primary-Naranja, #ff9333);border:navajowhite;height:40px;padding:8px 20px 8px 16px;font-weight:600}button.btn-secondary{background:#fff;color:var(--Primary-Naranja, #ff9333);border:1px solid;font-weight:500}\n"], dependencies: [{ kind: "component", type: DropiModalComponent, selector: "dropi-modal", inputs: ["visible", "modal", "dismissableMask", "closeOnEscape", "showCloseIcon", "showHeader", "header", "styleClass", "maxWidth", "position", "transitionOptions"], outputs: ["visibleChange", "onHide", "onShow", "onClose"] }, { kind: "directive", type: PTemplateDirective, selector: "ng-template[pTemplate]", inputs: ["pTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$2.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AlertModalComponent, isStandalone: true, selector: "app-alert-modal", inputs: { visible: "visible", params: "params", loading: "loading", isStep: "isStep", contentTemplate: "contentTemplate", baseZIndex: "baseZIndex" }, outputs: { modalOpenChange: "modalOpenChange", primaryButtonEvent: "primaryButtonEvent", secondaryButtonEvent: "secondaryButtonEvent", onHide: "onHide" }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<dropi-modal\n  styleClass=\"dropi-alert-modal\"\n  [(visible)]=\"visible\"\n  [modal]=\"true\"\n  [closable]=\"params?.closable ? true : false\"\n  [dismissableMask]=\"false\"\n  [closeOnEscape]=\"false\"\n  [showHeader]=\"false\"\n  transitionOptions=\"300ms\"\n  [showHeader]=\"params?.closable ? true : false\"\n  [autoZIndex]=\"true\"\n  [baseZIndex]=\"baseZIndex\"\n  (onHide)=\"onHideModal()\"\n>\n  <ng-template pTemplate=\"content\">\n    <div class=\"body-alert\" *ngIf=\"!loading\">\n      <div class=\"header-alert\">\n        <div class=\"lottie-img\" *ngIf=\"visible && brandName === 'dropi'\">\n          <dotlottie-player\n            [src]=\"sourceAnimation\"\n            background=\"transparent\"\n            speed=\"1\"\n            style=\"width: 100%; height: auto\"\n            loop\n            autoplay\n          ></dotlottie-player>\n        </div>\n        <div class=\"wb-img\" *ngIf=\"visible && brandName !== 'dropi'\">\n          <img [src]=\"imageWhiteBrand\" alt=\"logo\" />\n        </div>\n      </div>\n      <div class=\"content-alert\">\n        <h2>{{ tittle | translate }}</h2>\n        <ng-container *ngIf=\"isArray(message)\">\n          <p *ngFor=\"let m of message\">{{ m | translate }}</p>\n        </ng-container>\n\n        <p *ngIf=\"!isArray(message)\">\n          {{ message | translate }}\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"alertTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"alertTemplate; context: { $implicit: contextTemplate }\"\n        ></ng-container>\n      </ng-container>\n\n      <div class=\"actions\" *ngIf=\"displayButtons\">\n        <dropi-button\n          *ngIf=\"secondaryButton\"\n          [text]=\"secondaryButton | translate\"\n          severity=\"secondary\"\n          (onClick)=\"secondaryButtonAction()\"\n        ></dropi-button>\n        <dropi-button\n          [text]=\"primaryButton | translate\"\n          (onClick)=\"primaryButtonAction()\"\n        ></dropi-button>\n      </div>\n\n      <!-- <div class=\"actions\" *ngIf=\"displayButtons\">\n      <button\n        *ngIf=\"secondaryButton\"\n        class=\"btn btn-secondary\"\n        (click)=\"secondaryButtonAction()\"\n        data-cy=\"alert-modal-secondary-button\"\n      >\n        {{ secondaryButton | translate }}\n      </button>\n      <button\n        class=\"btn btn-primary\"\n        (click)=\"primaryButtonAction()\"\n        data-cy=\"alert-modal-primary-button\"\n      >\n        {{ primaryButton | translate }}\n      </button>\n    </div> -->\n    </div>\n\n    <div class=\"body-alert-loading\" *ngIf=\"loading\">\n      <div class=\"header-alert\" [style]=\"{ 'margin-bottom': loadingAnimation.marginBottom }\">\n        <div class=\"lottie-img\" *ngIf=\"visible && loading\">\n          <dotlottie-player\n            *ngIf=\"loading && brandName === 'dropi'\"\n            [src]=\"loadingAnimation.path\"\n            background=\"transparent\"\n            speed=\"1\"\n            [style]=\"{\n              width: loadingAnimation.width,\n              height: loadingAnimation.height,\n            }\"\n            loop\n            autoplay\n          ></dotlottie-player>\n          <dotlottie-player\n            *ngIf=\"loading && brandName !== 'dropi' && params.type == 'loading'\"\n            [src]=\"'/assets/lottie-files/loading-mb.json'\"\n            background=\"transparent\"\n            speed=\"1\"\n            style=\"width: 300px; height: auto\"\n            loop\n            autoplay\n          ></dotlottie-player>\n        </div>\n        <div class=\"wb-img\" *ngIf=\"visible && brandName !== 'dropi' && params.type !== 'loading'\">\n          <img [src]=\"imageWhiteBrand\" alt=\"logo\" />\n        </div>\n      </div>\n      <div class=\"content-alert\">\n        <p-progressBar *ngIf=\"withLoadingProgressBar\" mode=\"indeterminate\" color=\"#F49A3D\" />\n        <h2>\n          {{ loadingTitle | translate }}\n        </h2>\n        <p>\n          {{ loadingMessage | translate }}\n        </p>\n        <h5 *ngIf=\"params.applyCountRegresive\">\n          {{ 'in' | translate }} {{ countRegresive }} {{ 'seconds' | translate }}\n        </h5>\n      </div>\n    </div>\n  </ng-template>\n</dropi-modal>\n", styles: ["@media screen and (max-width: 768px){::ng-deep .dropi-modal-root.dropi-modal-root--open .dropi-modal__panel.dropi-alert-modal{transform:translateY(0)!important}}@media screen and (max-width: 768px){::ng-deep .dropi-modal-root.dropi-modal-root--closing .dropi-modal__panel.dropi-alert-modal{transform:translateY(100%)!important;opacity:1!important}}@media screen and (max-width: 768px){::ng-deep .dropi-modal-root.dropi-modal-root--open.dropi-modal-root--closing .dropi-modal__panel.dropi-alert-modal{transform:translateY(100%)!important;opacity:1!important}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal{width:440px!important;min-height:280px!important;overflow:hidden!important}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal__content{overflow:hidden!important;display:flex;justify-content:center;align-items:center}@media screen and (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal{width:100%!important;max-width:100%!important;height:auto!important;padding-bottom:30px!important;position:absolute!important;bottom:0!important;border-radius:10px 10px 0 0!important;transform:translateY(100%)!important;transition:transform .3s cubic-bezier(0,0,.2,1)!important;opacity:1!important}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal-container{width:460px;max-width:460px;height:auto!important}@media (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal-container{width:calc(100% - 32px);max-width:calc(100% - 32px);height:auto!important;margin:16px;top:50%!important;transform:translateY(-50%)!important}}@media (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .dropi-modal-content{max-height:calc(100vh - 32px);overflow-y:auto}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog{background-color:#fff!important;box-shadow:0 20px 25px #0000001a;border-radius:8px!important;max-width:460px;width:100%;box-sizing:border-box;padding:32px;margin:0 20px;transition:all .3s ease-in-out;height:auto}@media (max-width: 768px){::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog{padding:24px;margin:0;border-radius:12px!important}}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog-content{padding:0;overflow:hidden}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-dialog-header{position:absolute;right:-10px;top:-10px;background:transparent}::ng-deep .dropi-modal-root .dropi-modal__panel.dropi-alert-modal .p-progressbar{height:6px;border-radius:4px;margin-bottom:25px}.lottie-img{margin-top:-8px;margin-bottom:8px;min-height:100px}.wb-img{display:flex;justify-content:center;margin-top:4px!important}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;overflow:hidden}.header-alert{width:120px}.content-alert{text-align:center}.content-alert h2{color:var(--Gray-Gray-1, #1f2937);font-size:19px;font-weight:600}.content-alert p{color:var(--Gray-Gray-2, #74798d);font-size:14px;margin-bottom:8px;overflow-wrap:anywhere;max-height:100px;overflow:auto}.actions{display:flex;gap:10px;width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}.actions dropi-button ::ng-deep .btn{width:100%}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}.body-alert-loading .header-alert{width:100%;display:flex;align-items:center;justify-content:center;height:160px}button{flex:1;outline:none;border-radius:8px;display:flex;align-items:center;gap:8px;justify-content:center}button.btn-primary{background:var(--Primary-Naranja, #ff9333);border:navajowhite;height:40px;padding:8px 20px 8px 16px;font-weight:600}button.btn-secondary{background:#fff;color:var(--Primary-Naranja, #ff9333);border:1px solid;font-weight:500}\n"], dependencies: [{ kind: "component", type: DropiModalComponent, selector: "dropi-modal", inputs: ["visible", "modal", "dismissableMask", "closeOnEscape", "showCloseIcon", "showHeader", "header", "styleClass", "maxWidth", "position", "transitionOptions"], outputs: ["visibleChange", "onHide", "onShow", "onClose"] }, { kind: "directive", type: PTemplateDirective, selector: "ng-template[pTemplate]", inputs: ["pTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i2$2.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertModalComponent, decorators: [{
             type: Component,
@@ -886,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ["SettingsService"]
-                }] }, { type: i2$1.TranslateService, decorators: [{
+                }] }, { type: i2.TranslateService, decorators: [{
                     type: Inject,
                     args: [TranslateService]
                 }] }], propDecorators: { visible: [{
@@ -1034,7 +1063,7 @@ class ConfirmDialogComponent {
         this.dialogRef.close({ type: type });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"wrapper text-center\">\n  <div class=\"header text-center\">\n    <!-- <mat-icon class=\"notranslate warn-500-fg s-64\">error_outline</mat-icon> -->\n    <img\n      src=\"../../../assets/img/theme/interrogation.png\"\n      class=\"md-avatar\"\n      style=\"width: 90px; height: 90px; border-radius: 100%\"\n    />\n  </div>\n  <div mat-dialog-content>{{ data.message }}</div>\n  <div class=\"actions\">\n    <button class=\"btn btn-primary\" (click)=\"close('yes')\">{{ 'Yes' | translate }}</button>\n    <button class=\"btn btn-secondary\" (click)=\"close('no')\">{{ 'No' | translate }}</button>\n  </div>\n  <!-- <div mat-dialog-actions class=\"pt-24\" class=\"d-flex justify-content-center\">\n    <button mat-raised-button class=\"mat-accent mr-16\" (click)=\"close('yes')\">\n      {{ 'Yes' | translate }}\n    </button>\n    <button mat-raised-button class=\"mat-accent mr-16\" (click)=\"close('no')\">\n      {{ 'No' | translate }}\n    </button>\n    <button mat-raised-button class=\"mat-accent mr-16\" (click)=\"close('cancel')\" *ngIf=\"data.show\">\n      {{ 'Cancel' | translate }}\n    </button>\n  </div> -->\n</div>\n", styles: [".wrapper{padding:20px;overflow:hidden!important;height:25%}.icono{font-size:60px!important}.mat-icon{background-repeat:no-repeat!important;display:inline-block!important;fill:currentColor!important;height:50px!important;width:40px!important}.mat-flat-button.mat-accent,.mat-raised-button.mat-accent,.mat-fab.mat-accent,.mat-mini-fab.mat-accent{background-color:#198cf0}.actions{display:flex;gap:10px;width:100%;margin-top:1.5rem}button{flex:1;outline:none;border-radius:8px;display:flex;align-items:center;gap:8px;justify-content:center}button.btn-primary{background:var(--Primary-Naranja, #ff9333);border:navajowhite;height:40px;padding:8px 20px 8px 16px;font-weight:600}button.btn-secondary{background:#fff;color:var(--Primary-Naranja, #ff9333);border:1px solid;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"wrapper text-center\">\n  <div class=\"header text-center\">\n    <!-- <mat-icon class=\"notranslate warn-500-fg s-64\">error_outline</mat-icon> -->\n    <img\n      src=\"../../../assets/img/theme/interrogation.png\"\n      class=\"md-avatar\"\n      style=\"width: 90px; height: 90px; border-radius: 100%\"\n    />\n  </div>\n  <div mat-dialog-content>{{ data.message }}</div>\n  <div class=\"actions\">\n    <button class=\"btn btn-primary\" (click)=\"close('yes')\">{{ 'Yes' | translate }}</button>\n    <button class=\"btn btn-secondary\" (click)=\"close('no')\">{{ 'No' | translate }}</button>\n  </div>\n  <!-- <div mat-dialog-actions class=\"pt-24\" class=\"d-flex justify-content-center\">\n    <button mat-raised-button class=\"mat-accent mr-16\" (click)=\"close('yes')\">\n      {{ 'Yes' | translate }}\n    </button>\n    <button mat-raised-button class=\"mat-accent mr-16\" (click)=\"close('no')\">\n      {{ 'No' | translate }}\n    </button>\n    <button mat-raised-button class=\"mat-accent mr-16\" (click)=\"close('cancel')\" *ngIf=\"data.show\">\n      {{ 'Cancel' | translate }}\n    </button>\n  </div> -->\n</div>\n", styles: [".wrapper{padding:20px;overflow:hidden!important;height:25%}.icono{font-size:60px!important}.mat-icon{background-repeat:no-repeat!important;display:inline-block!important;fill:currentColor!important;height:50px!important;width:40px!important}.mat-flat-button.mat-accent,.mat-raised-button.mat-accent,.mat-fab.mat-accent,.mat-mini-fab.mat-accent{background-color:#198cf0}.actions{display:flex;gap:10px;width:100%;margin-top:1.5rem}button{flex:1;outline:none;border-radius:8px;display:flex;align-items:center;gap:8px;justify-content:center}button.btn-primary{background:var(--Primary-Naranja, #ff9333);border:navajowhite;height:40px;padding:8px 20px 8px 16px;font-weight:600}button.btn-secondary{background:#fff;color:var(--Primary-Naranja, #ff9333);border:1px solid;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -1217,7 +1246,7 @@ class TabsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [{ token: "Router" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabsComponent, isStandalone: true, selector: "app-tabs", inputs: { configuration: "configuration", showIcon: "showIcon", activeTab: "activeTab", stopAction: "stopAction" }, outputs: { onIndexChanged: "onIndexChanged" }, ngImport: i0, template: "<div class=\"tabs-container\">\n  <div\n    class=\"custom-tab\"\n    *ngFor=\"let tab of configuration\"\n    [ngClass]=\"{\n      'active-tab': tab.id === activeTab && !tab.disabled,\n      'disabled-tab': tab.disabled\n    }\"\n    [class.disabled-tab]=\"tab.disabled\"\n    (click)=\"!tab.disabled && onTabClick(tab)\"\n  >\n    <span>\n      <p>{{ tab.label | translate }}</p>\n      <dropi-badge\n        *ngIf=\"tab?.counter || tab?.counter === 0\"\n        type=\"counter\"\n        [count]=\"tab.counter\"\n        [variant]=\"tab.id === activeTab ? 'primary' : 'tertiary'\"\n      />\n    </span>\n\n    <ng-container *ngIf=\"showIcon\">\n      <dropi-badge type=\"state\" [state]=\"tab.completed ? 'check' : 'pending'\" />\n    </ng-container>\n  </div>\n</div>\n", styles: [".tabs-container{display:flex;flex-wrap:nowrap;overflow:scroll;width:100%;height:52px}.tabs-container .custom-tab{padding-inline:var(--Size-5);padding-block:var(--Size-4);background-color:var(--Neutral-White);border-bottom:2px solid var(--Gray-Gray-100);cursor:pointer;display:flex;gap:var(--Size-4);align-items:center}.tabs-container .custom-tab span{display:flex;align-items:center;gap:var(--Size-2, 8px)}.tabs-container .custom-tab p{margin:0;font-size:14px;color:var(--Gray-Gray-400);font-weight:var(--font-weight-bold);line-height:20px;text-align:left;white-space:nowrap}.tabs-container .custom-tab.active-tab{background-color:var(--Neutral-White);border-bottom:2px solid var(--Primary-Primary-500)}.tabs-container .custom-tab.active-tab p{color:var(--Gray-Gray-600);font-weight:var(--font-weight-bold)}.tabs-container .custom-tab.disabled-tab{background:#dfe4ed38!important;cursor:not-allowed!important;opacity:.7;pointer-events:none}.tabs-container .custom-tab.disabled-tab p{font-weight:200!important;color:var(--Gray-Gray-300)!important}::-webkit-scrollbar{width:0px;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: DropiBadgeComponent, selector: "dropi-badge", inputs: ["type", "state", "variant", "count"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabsComponent, isStandalone: true, selector: "app-tabs", inputs: { configuration: "configuration", showIcon: "showIcon", activeTab: "activeTab", stopAction: "stopAction" }, outputs: { onIndexChanged: "onIndexChanged" }, ngImport: i0, template: "<div class=\"tabs-container\">\n  <div\n    class=\"custom-tab\"\n    *ngFor=\"let tab of configuration\"\n    [ngClass]=\"{\n      'active-tab': tab.id === activeTab && !tab.disabled,\n      'disabled-tab': tab.disabled\n    }\"\n    [class.disabled-tab]=\"tab.disabled\"\n    (click)=\"!tab.disabled && onTabClick(tab)\"\n  >\n    <span>\n      <p>{{ tab.label | translate }}</p>\n      <dropi-badge\n        *ngIf=\"tab?.counter || tab?.counter === 0\"\n        type=\"counter\"\n        [count]=\"tab.counter\"\n        [variant]=\"tab.id === activeTab ? 'primary' : 'tertiary'\"\n      />\n    </span>\n\n    <ng-container *ngIf=\"showIcon\">\n      <dropi-badge type=\"state\" [state]=\"tab.completed ? 'check' : 'pending'\" />\n    </ng-container>\n  </div>\n</div>\n", styles: [".tabs-container{display:flex;flex-wrap:nowrap;overflow:scroll;width:100%;height:52px}.tabs-container .custom-tab{padding-inline:var(--Size-5);padding-block:var(--Size-4);background-color:var(--Neutral-White);border-bottom:2px solid var(--Gray-Gray-100);cursor:pointer;display:flex;gap:var(--Size-4);align-items:center}.tabs-container .custom-tab span{display:flex;align-items:center;gap:var(--Size-2, 8px)}.tabs-container .custom-tab p{margin:0;font-size:14px;color:var(--Gray-Gray-400);font-weight:var(--font-weight-bold);line-height:20px;text-align:left;white-space:nowrap}.tabs-container .custom-tab.active-tab{background-color:var(--Neutral-White);border-bottom:2px solid var(--Primary-Primary-500)}.tabs-container .custom-tab.active-tab p{color:var(--Gray-Gray-600);font-weight:var(--font-weight-bold)}.tabs-container .custom-tab.disabled-tab{background:#dfe4ed38!important;cursor:not-allowed!important;opacity:.7;pointer-events:none}.tabs-container .custom-tab.disabled-tab p{font-weight:200!important;color:var(--Gray-Gray-300)!important}::-webkit-scrollbar{width:0px;height:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DropiBadgeComponent, selector: "dropi-badge", inputs: ["type", "state", "variant", "count"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
@@ -1311,7 +1340,7 @@ class DropiStepsComponent {
         return 'pending';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiStepsComponent, isStandalone: true, selector: "dropi-steps", inputs: { stepsCount: "stepsCount", showNumberOfStep: "showNumberOfStep", currentStep: "currentStep", stepLabels: "stepLabels", state: "state" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"stepper-container\">\n  <ng-container *ngFor=\"let step of steps; let i = index\">\n    <div\n      class=\"step\"\n      [ngClass]=\"getStepState(i)\"\n      [ngStyle]=\"{ flex: i > 0 && i < steps.length - 1 ? 2 : 1 }\"\n    >\n      <div class=\"line\" *ngIf=\"i !== 0\"></div>\n      <div class=\"circle-container\">\n        <div class=\"circle\">\n          <span class=\"Label-S\" *ngIf=\"showNumberOfStep\">\n            {{ i + 1 }}\n          </span>\n        </div>\n\n        <div class=\"steps-container\">\n          <p class=\"Label-M\" *ngIf=\"step.title\">\n            {{ step.title | translate }}\n          </p>\n\n          <p class=\"Body-S-Regular\" *ngIf=\"step.description\">\n            {{ step.description | translate }}\n          </p>\n        </div>\n      </div>\n      <div class=\"line\" *ngIf=\"i !== steps.length - 1\"></div>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:block;width:100%}.stepper-container{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-bottom:var(--Size-4)}.step{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.step.focus .circle{border-color:var(--Primary-Primary-500, #f49a3d)}.step.focus .circle span{color:var(--Primary-Primary-500, #f49a3d)}.step.focus .line{background-color:var(--Primary-Primary-500, #f49a3d)}.step.focus .step-label{color:var(--Gray-Gray-700, #32394d)}.step.completed .circle{background-color:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.step.completed .circle span{color:var(--Neutral-White, #fff)}.step.completed .line{background-color:var(--Primary-Primary-500, #f49a3d)}.step.completed .step-label{color:var(--Gray-Gray-700, #32394d)}.line{width:100%;flex:1;height:2px;background-color:var(--Gray-Gray-200, #c3c9d9)}.circle-container{position:relative;display:inline-flex;flex-direction:column;justify-content:center;align-items:center}.circle{width:24px;height:24px;border-radius:50%;border:2px solid var(--Gray-Gray-200);background-color:transparent;display:grid;place-items:center}.circle span{color:var(--Gray-Gray-200, #c3c9d9);text-align:center;line-height:1;pointer-events:none}.steps-container{position:absolute;top:calc(100% + var(--Size-1));display:flex;flex-direction:column;gap:var(--Size-2);width:max-content;width:12vw;min-width:100px;max-width:180px;text-align:center}.steps-container p{margin:0!important}.line.invisible{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiStepsComponent, isStandalone: true, selector: "dropi-steps", inputs: { stepsCount: "stepsCount", showNumberOfStep: "showNumberOfStep", currentStep: "currentStep", stepLabels: "stepLabels", state: "state" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"stepper-container\">\n  <ng-container *ngFor=\"let step of steps; let i = index\">\n    <div\n      class=\"step\"\n      [ngClass]=\"getStepState(i)\"\n      [ngStyle]=\"{ flex: i > 0 && i < steps.length - 1 ? 2 : 1 }\"\n    >\n      <div class=\"line\" *ngIf=\"i !== 0\"></div>\n      <div class=\"circle-container\">\n        <div class=\"circle\">\n          <span class=\"Label-S\" *ngIf=\"showNumberOfStep\">\n            {{ i + 1 }}\n          </span>\n        </div>\n\n        <div class=\"steps-container\">\n          <p class=\"Label-M\" *ngIf=\"step.title\">\n            {{ step.title | translate }}\n          </p>\n\n          <p class=\"Body-S-Regular\" *ngIf=\"step.description\">\n            {{ step.description | translate }}\n          </p>\n        </div>\n      </div>\n      <div class=\"line\" *ngIf=\"i !== steps.length - 1\"></div>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{display:block;width:100%}.stepper-container{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-bottom:var(--Size-4)}.step{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.step.focus .circle{border-color:var(--Primary-Primary-500, #f49a3d)}.step.focus .circle span{color:var(--Primary-Primary-500, #f49a3d)}.step.focus .line{background-color:var(--Primary-Primary-500, #f49a3d)}.step.focus .step-label{color:var(--Gray-Gray-700, #32394d)}.step.completed .circle{background-color:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.step.completed .circle span{color:var(--Neutral-White, #fff)}.step.completed .line{background-color:var(--Primary-Primary-500, #f49a3d)}.step.completed .step-label{color:var(--Gray-Gray-700, #32394d)}.line{width:100%;flex:1;height:2px;background-color:var(--Gray-Gray-200, #c3c9d9)}.circle-container{position:relative;display:inline-flex;flex-direction:column;justify-content:center;align-items:center}.circle{width:24px;height:24px;border-radius:50%;border:2px solid var(--Gray-Gray-200);background-color:transparent;display:grid;place-items:center}.circle span{color:var(--Gray-Gray-200, #c3c9d9);text-align:center;line-height:1;pointer-events:none}.steps-container{position:absolute;top:calc(100% + var(--Size-1));display:flex;flex-direction:column;gap:var(--Size-2);width:max-content;width:12vw;min-width:100px;max-width:180px;text-align:center}.steps-container p{margin:0!important}.line.invisible{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiStepsComponent, decorators: [{
             type: Component,
@@ -1380,7 +1409,7 @@ class VerticalStepsComponent {
         return index === this.processedSteps.length - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: VerticalStepsComponent, isStandalone: true, selector: "vertical-steps", inputs: { steps: "steps", currentStep: "currentStep", clickable: "clickable", showCheckIcon: "showCheckIcon" }, outputs: { stepClick: "stepClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"vertical-steps\">\n  @for (step of processedSteps; track step.number; let i = $index) {\n    <div\n      class=\"step-item\"\n      [class.completed]=\"step.calculatedState === 'completed'\"\n      [class.current]=\"step.calculatedState === 'current'\"\n      [class.pending]=\"step.calculatedState === 'pending'\"\n      [class.clickable]=\"isStepClickable(step.number)\"\n      (click)=\"onStepClick(step.number)\"\n    >\n      <!-- Indicador del paso (c\u00EDrculo + l\u00EDnea) -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          @if (step.calculatedState === 'completed' && showCheckIcon) {\n            <app-icon name=\"Check-small\" width=\"14px\" height=\"14px\"></app-icon>\n          } @else {\n            <span class=\"step-number\">{{ step.number }}</span>\n          }\n        </div>\n        @if (!isLastStep(i)) {\n          <div class=\"step-line\"></div>\n        }\n      </div>\n\n      <!-- Etiqueta del paso -->\n      <div class=\"step-label\">\n        @if (step.labelKey) {\n          <span>{{ step.labelKey | translate }}</span>\n        } @else {\n          <span>{{ step.label }}</span>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.vertical-steps{display:flex;flex-direction:column;align-items:flex-start}.step-item{display:flex;gap:4px;height:50px;width:100%}.step-item.clickable{cursor:pointer}.step-item .step-indicator{display:flex;flex-direction:column;align-items:center;padding-bottom:1px}.step-item .step-circle{width:24px;height:24px;border-radius:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:-1px}.step-item .step-number{font-family:Inter,sans-serif;font-weight:700;font-size:12px;line-height:1.1;text-align:center}.step-item .step-line{flex:1;width:2px;margin-top:-1px;margin-bottom:-1px}.step-item .step-label{display:flex;align-items:center;height:24px;margin-left:6px}.step-item .step-label span{font-family:Inter,sans-serif;font-weight:400;font-size:12px;line-height:1.5;white-space:nowrap}.step-item.completed .step-circle{background-color:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.step-item.completed .step-circle app-icon{color:var(--white, #ffffff)!important}.step-item.completed .step-circle .step-number{color:var(--white, #ffffff)!important}.step-item.completed .step-line{background-color:var(--Primary-Primary-500, #f49a3d)}.step-item.completed .step-label span{color:var(--Gray-Gray-700, #32394d)}.step-item.current .step-circle{background-color:transparent;border:2px solid var(--Primary-Primary-500, #f49a3d)}.step-item.current .step-circle .step-number{color:var(--Primary-Primary-500, #f49a3d)}.step-item.current .step-line{background-color:var(--Primary-Primary-500, #f49a3d)}.step-item.current .step-label span{color:var(--Gray-Gray-700, #32394d)}.step-item.pending .step-circle{background-color:transparent;border:2px solid var(--Gray-Gray-200, #c3c9d9)}.step-item.pending .step-circle .step-number{color:var(--Gray-Gray-200, #c3c9d9)}.step-item.pending .step-line{background-color:var(--Gray-Gray-200, #c3c9d9)}.step-item.pending .step-label span{color:var(--Gray-Gray-500, #69738c)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: VerticalStepsComponent, isStandalone: true, selector: "vertical-steps", inputs: { steps: "steps", currentStep: "currentStep", clickable: "clickable", showCheckIcon: "showCheckIcon" }, outputs: { stepClick: "stepClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"vertical-steps\">\n  @for (step of processedSteps; track step.number; let i = $index) {\n    <div\n      class=\"step-item\"\n      [class.completed]=\"step.calculatedState === 'completed'\"\n      [class.current]=\"step.calculatedState === 'current'\"\n      [class.pending]=\"step.calculatedState === 'pending'\"\n      [class.clickable]=\"isStepClickable(step.number)\"\n      (click)=\"onStepClick(step.number)\"\n    >\n      <!-- Indicador del paso (c\u00EDrculo + l\u00EDnea) -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          @if (step.calculatedState === 'completed' && showCheckIcon) {\n            <app-icon name=\"Check-small\" width=\"14px\" height=\"14px\"></app-icon>\n          } @else {\n            <span class=\"step-number\">{{ step.number }}</span>\n          }\n        </div>\n        @if (!isLastStep(i)) {\n          <div class=\"step-line\"></div>\n        }\n      </div>\n\n      <!-- Etiqueta del paso -->\n      <div class=\"step-label\">\n        @if (step.labelKey) {\n          <span>{{ step.labelKey | translate }}</span>\n        } @else {\n          <span>{{ step.label }}</span>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.vertical-steps{display:flex;flex-direction:column;align-items:flex-start}.step-item{display:flex;gap:4px;height:50px;width:100%}.step-item.clickable{cursor:pointer}.step-item .step-indicator{display:flex;flex-direction:column;align-items:center;padding-bottom:1px}.step-item .step-circle{width:24px;height:24px;border-radius:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:-1px}.step-item .step-number{font-family:Inter,sans-serif;font-weight:700;font-size:12px;line-height:1.1;text-align:center}.step-item .step-line{flex:1;width:2px;margin-top:-1px;margin-bottom:-1px}.step-item .step-label{display:flex;align-items:center;height:24px;margin-left:6px}.step-item .step-label span{font-family:Inter,sans-serif;font-weight:400;font-size:12px;line-height:1.5;white-space:nowrap}.step-item.completed .step-circle{background-color:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.step-item.completed .step-circle app-icon{color:var(--white, #ffffff)!important}.step-item.completed .step-circle .step-number{color:var(--white, #ffffff)!important}.step-item.completed .step-line{background-color:var(--Primary-Primary-500, #f49a3d)}.step-item.completed .step-label span{color:var(--Gray-Gray-700, #32394d)}.step-item.current .step-circle{background-color:transparent;border:2px solid var(--Primary-Primary-500, #f49a3d)}.step-item.current .step-circle .step-number{color:var(--Primary-Primary-500, #f49a3d)}.step-item.current .step-line{background-color:var(--Primary-Primary-500, #f49a3d)}.step-item.current .step-label span{color:var(--Gray-Gray-700, #32394d)}.step-item.pending .step-circle{background-color:transparent;border:2px solid var(--Gray-Gray-200, #c3c9d9)}.step-item.pending .step-circle .step-number{color:var(--Gray-Gray-200, #c3c9d9)}.step-item.pending .step-line{background-color:var(--Gray-Gray-200, #c3c9d9)}.step-item.pending .step-label span{color:var(--Gray-Gray-500, #69738c)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VerticalStepsComponent, decorators: [{
             type: Component,
@@ -1460,7 +1489,7 @@ class DropiPaginatorComponent {
         this.pageChange.emit(this.totalPages);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiPaginatorComponent, isStandalone: true, selector: "app-dropi-paginator", inputs: { totalPages: "totalPages", currentPage: "currentPage", disabled: "disabled", isNotTotalPages: "isNotTotalPages", maxVisiblePages: "maxVisiblePages" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"selector-quantity\"></div>\n\n<div class=\"dropi-paginator\">\n  <button\n    *ngIf=\"currentPage !== 1 && !isNotTotalPages\"\n    class=\"page-item prev\"\n    [disabled]=\"disabled || currentPage === 1\"\n    (click)=\"goToFirstPage()\"\n    aria-label=\"Anterior\"\n  >\n    <app-icon\n      [name]=\"'Arrow-double-small-left'\"\n      [width]=\"'16'\"\n      [height]=\"'16'\"\n    />\n  </button>\n  <button\n    *ngIf=\"currentPage !== 1\"\n    class=\"page-item prev\"\n    [ngClass]=\"{ prevCursor: isNotTotalPages }\"\n    [disabled]=\"disabled || currentPage === 1\"\n    (click)=\"prevPage()\"\n    aria-label=\"Anterior\"\n  >\n    <app-icon [name]=\"'Dropdown-left'\" [width]=\"'16'\" [height]=\"'16'\" />\n    {{ \"Previous\" | translate }}\n  </button>\n\n  <ng-container *ngIf=\"!isNotTotalPages\">\n    <ng-container *ngFor=\"let page of pages\">\n      <ng-container *ngIf=\"page === '...'; else pageNumber\">\n        <button class=\"page-item ellipsis\" disabled tabindex=\"-1\">...</button>\n      </ng-container>\n      <ng-template #pageNumber>\n        <button\n          class=\"page-item\"\n          [ngClass]=\"{ active: page === currentPage }\"\n          [disabled]=\"disabled || page === currentPage\"\n          (click)=\"goToPage(page)\"\n        >\n          {{ page }}\n        </button>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <button\n    *ngIf=\"\n      currentPage !== totalPages ||\n      (isNotTotalPages && currentPage < totalPages)\n    \"\n    class=\"page-item next\"\n    [ngClass]=\"{ nextCursor: isNotTotalPages }\"\n    [disabled]=\"disabled || currentPage === totalPages\"\n    (click)=\"nextPage()\"\n    aria-label=\"Siguiente\"\n  >\n    {{ \"Next\" | translate }}\n    <app-icon [name]=\"'Dropdown-Right'\" [width]=\"'16'\" [height]=\"'16'\" />\n  </button>\n\n  <button\n    *ngIf=\"currentPage !== totalPages && !isNotTotalPages\"\n    class=\"page-item next\"\n    [disabled]=\"disabled || currentPage === totalPages\"\n    (click)=\"goToLastPage()\"\n    aria-label=\"Siguiente\"\n  >\n    <app-icon\n      [name]=\"'Arrow-double-small-right'\"\n      [width]=\"'16'\"\n      [height]=\"'16'\"\n    />\n  </button>\n</div>\n", styles: [".dropi-paginator{display:flex;justify-content:flex-end;align-items:center;gap:2px}.page-item{display:flex;width:32px;height:32px;padding:12px;justify-content:center;align-items:center;gap:10px;flex-shrink:0;border-radius:24px;transition:background-color .2s ease-in-out;border:none!important;background-color:transparent;color:var(--Gray-600, #475066)}.page-item:hover{background-color:#fff}.page-item.active{background-color:var(--Primary-Primary-500);color:#fff}.nextCursor,.prevCursor{height:auto;width:auto;gap:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiPaginatorComponent, isStandalone: true, selector: "app-dropi-paginator", inputs: { totalPages: "totalPages", currentPage: "currentPage", disabled: "disabled", isNotTotalPages: "isNotTotalPages", maxVisiblePages: "maxVisiblePages" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"selector-quantity\"></div>\n\n<div class=\"dropi-paginator\">\n  <button\n    *ngIf=\"currentPage !== 1 && !isNotTotalPages\"\n    class=\"page-item prev\"\n    [disabled]=\"disabled || currentPage === 1\"\n    (click)=\"goToFirstPage()\"\n    aria-label=\"Anterior\"\n  >\n    <app-icon\n      [name]=\"'Arrow-double-small-left'\"\n      [width]=\"'16'\"\n      [height]=\"'16'\"\n    />\n  </button>\n  <button\n    *ngIf=\"currentPage !== 1\"\n    class=\"page-item prev\"\n    [ngClass]=\"{ prevCursor: isNotTotalPages }\"\n    [disabled]=\"disabled || currentPage === 1\"\n    (click)=\"prevPage()\"\n    aria-label=\"Anterior\"\n  >\n    <app-icon [name]=\"'Dropdown-left'\" [width]=\"'16'\" [height]=\"'16'\" />\n    {{ \"Previous\" | translate }}\n  </button>\n\n  <ng-container *ngIf=\"!isNotTotalPages\">\n    <ng-container *ngFor=\"let page of pages\">\n      <ng-container *ngIf=\"page === '...'; else pageNumber\">\n        <button class=\"page-item ellipsis\" disabled tabindex=\"-1\">...</button>\n      </ng-container>\n      <ng-template #pageNumber>\n        <button\n          class=\"page-item\"\n          [ngClass]=\"{ active: page === currentPage }\"\n          [disabled]=\"disabled || page === currentPage\"\n          (click)=\"goToPage(page)\"\n        >\n          {{ page }}\n        </button>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <button\n    *ngIf=\"\n      currentPage !== totalPages ||\n      (isNotTotalPages && currentPage < totalPages)\n    \"\n    class=\"page-item next\"\n    [ngClass]=\"{ nextCursor: isNotTotalPages }\"\n    [disabled]=\"disabled || currentPage === totalPages\"\n    (click)=\"nextPage()\"\n    aria-label=\"Siguiente\"\n  >\n    {{ \"Next\" | translate }}\n    <app-icon [name]=\"'Dropdown-Right'\" [width]=\"'16'\" [height]=\"'16'\" />\n  </button>\n\n  <button\n    *ngIf=\"currentPage !== totalPages && !isNotTotalPages\"\n    class=\"page-item next\"\n    [disabled]=\"disabled || currentPage === totalPages\"\n    (click)=\"goToLastPage()\"\n    aria-label=\"Siguiente\"\n  >\n    <app-icon\n      [name]=\"'Arrow-double-small-right'\"\n      [width]=\"'16'\"\n      [height]=\"'16'\"\n    />\n  </button>\n</div>\n", styles: [".dropi-paginator{display:flex;justify-content:flex-end;align-items:center;gap:2px}.page-item{display:flex;width:32px;height:32px;padding:12px;justify-content:center;align-items:center;gap:10px;flex-shrink:0;border-radius:24px;transition:background-color .2s ease-in-out;border:none!important;background-color:transparent;color:var(--Gray-600, #475066)}.page-item:hover{background-color:#fff}.page-item.active{background-color:var(--Primary-Primary-500);color:#fff}.nextCursor,.prevCursor{height:auto;width:auto;gap:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiPaginatorComponent, decorators: [{
             type: Component,
@@ -1500,7 +1529,7 @@ class DropiBreadcrumbComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiBreadcrumbComponent, isStandalone: true, selector: "app-dropi-breadcrumb", inputs: { items: "items", ariaLabel: "ariaLabel", homeIconName: "homeIconName", lastItemClickable: "lastItemClickable" }, outputs: { onNavigate: "onNavigate" }, ngImport: i0, template: "<nav class=\"breadcrumb\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"crumb-list\">\n    <!-- HOME: solo \u00EDcono -->\n    <div class=\"crumb-home\">\n      <a\n        (click)=\"navigate(null, true)\"\n        class=\"home-link\"\n        aria-label=\"Inicio\"\n        style=\"cursor: pointer\"\n      >\n        <app-icon\n          [name]=\"homeIconName\"\n          width=\"16px\"\n          color=\"Gray-Gray-500\"\n        ></app-icon>\n      </a>\n\n      <app-icon\n        *ngIf=\"items?.length\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <!-- ITEMS en l\u00EDnea, sin colapsar -->\n    <div *ngFor=\"let it of items; let last = last\" class=\"crumb\">\n      <!-- Si NO es el \u00FAltimo (o s\u00ED, pero queremos que sea clicable) -->\n      <ng-container *ngIf=\"!last || lastItemClickable; else current\">\n        <!-- Interno con Navegaci\u00F3n -->\n        <a\n          *ngIf=\"it.command || it.url; else plain\"\n          (click)=\"navigate(it)\"\n          [class.disabled]=\"it.disabled\"\n          class=\"crumb-link Body-S-Regular\"\n          style=\"cursor: pointer\"\n        >\n          {{ it.label | translate }}\n        </a>\n\n        <!-- Sin destino / deshabilitado -->\n        <ng-template #plain>\n          <span class=\"disabled Body-S-Regular\">{{\n            it.label | translate\n          }}</span>\n        </ng-template>\n      </ng-container>\n\n      <!-- \u00DAltimo como \u201Cactual\u201D por defecto -->\n      <ng-template #current>\n        <span class=\"current Body-S-Regular\" aria-current=\"page\">{{\n          it.label | translate\n        }}</span>\n      </ng-template>\n\n      <app-icon\n        *ngIf=\"!last\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        height=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n  </div>\n</nav>\n", styles: [".crumb-list{display:flex;align-items:center;gap:4px}.crumb-list .crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.crumb-list.disabled{pointer-events:none;opacity:.6}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb.disabled{pointer-events:none}.crumb.disabled .crumb-link{color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;transition:color .2s ease}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8)!important;cursor:not-allowed!important;text-decoration:none!important}.current{color:var(--Gray-Gray-700, #32394d);cursor:default}.current:hover{text-decoration:none}.breadcrumb{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiBreadcrumbComponent, isStandalone: true, selector: "app-dropi-breadcrumb", inputs: { items: "items", ariaLabel: "ariaLabel", homeIconName: "homeIconName", lastItemClickable: "lastItemClickable" }, outputs: { onNavigate: "onNavigate" }, ngImport: i0, template: "<nav class=\"breadcrumb\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"crumb-list\">\n    <!-- HOME: solo \u00EDcono -->\n    <div class=\"crumb-home\">\n      <a\n        (click)=\"navigate(null, true)\"\n        class=\"home-link\"\n        aria-label=\"Inicio\"\n        style=\"cursor: pointer\"\n      >\n        <app-icon\n          [name]=\"homeIconName\"\n          width=\"16px\"\n          color=\"Gray-Gray-500\"\n        ></app-icon>\n      </a>\n\n      <app-icon\n        *ngIf=\"items?.length\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <!-- ITEMS en l\u00EDnea, sin colapsar -->\n    <div *ngFor=\"let it of items; let last = last\" class=\"crumb\">\n      <!-- Si NO es el \u00FAltimo (o s\u00ED, pero queremos que sea clicable) -->\n      <ng-container *ngIf=\"!last || lastItemClickable; else current\">\n        <!-- Interno con Navegaci\u00F3n -->\n        <a\n          *ngIf=\"it.command || it.url; else plain\"\n          (click)=\"navigate(it)\"\n          [class.disabled]=\"it.disabled\"\n          class=\"crumb-link Body-S-Regular\"\n          style=\"cursor: pointer\"\n        >\n          {{ it.label | translate }}\n        </a>\n\n        <!-- Sin destino / deshabilitado -->\n        <ng-template #plain>\n          <span class=\"disabled Body-S-Regular\">{{\n            it.label | translate\n          }}</span>\n        </ng-template>\n      </ng-container>\n\n      <!-- \u00DAltimo como \u201Cactual\u201D por defecto -->\n      <ng-template #current>\n        <span class=\"current Body-S-Regular\" aria-current=\"page\">{{\n          it.label | translate\n        }}</span>\n      </ng-template>\n\n      <app-icon\n        *ngIf=\"!last\"\n        name=\"Dropdown-Right\"\n        width=\"16px\"\n        height=\"16px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n  </div>\n</nav>\n", styles: [".crumb-list{display:flex;align-items:center;gap:4px}.crumb-list .crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.crumb-list.disabled{pointer-events:none;opacity:.6}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb.disabled{pointer-events:none}.crumb.disabled .crumb-link{color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;transition:color .2s ease}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8)!important;cursor:not-allowed!important;text-decoration:none!important}.current{color:var(--Gray-Gray-700, #32394d);cursor:default}.current:hover{text-decoration:none}.breadcrumb{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiBreadcrumbComponent, decorators: [{
             type: Component,
@@ -1627,7 +1656,7 @@ class DropiSearchComponent {
         return {};
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiSearchComponent, isStandalone: true, selector: "app-dropi-search", inputs: { type: "type", typeInput: "typeInput", placeholder: "placeholder", textDropButton: "textDropButton", textInput: "textInput", showIcon: "showIcon", label: "label", colorSearch: "colorSearch", overlaySelected: "overlaySelected", backgroundInput: "backgroundInput", maxLength: "maxLength" }, outputs: { textInputChange: "textInputChange", onClick: "onClick", onSearch: "onSearch", onInput: "onInput", onKeyEnter: "onKeyEnter", onClear: "onClear" }, ngImport: i0, template: "<div [style.--color-back]=\"backgroundInput\" #containerRef class=\"container-search\">\n  <input\n    (focus)=\"onFocus()\"\n    (input)=\"changeText($event)\"\n    (change)=\"onChangHandler($event)\"\n    (keyup.enter)=\"onEnter($event)\"\n    [(ngModel)]=\"textInput\"\n    [ngClass]=\"{\n      'Body-M-Regular': true,\n      'custom-input': true,\n      'input-drop-class': type === 'dropdown-button'\n    }\"\n    [type]=\"typeInput\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder | translate\"\n  />\n  <svg\n    [style.color]=\"colorSearch\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20px\"\n    height=\"20px\"\n    viewBox=\"0 0 18 18\"\n    fill=\"none\"\n  >\n    <g clip-path=\"url(#clip0_3021_2)\">\n      <path\n        d=\"M17.1297 16.1484L12.9846 12.0032C14.1142 10.6217 14.6695 8.85886 14.5358 7.07932C14.4021 5.29979 13.5896 3.63972 12.2662 2.44249C10.9429 1.24526 9.20997 0.602467 7.42598 0.647073C5.64199 0.691678 3.94338 1.42027 2.68152 2.68213C1.41965 3.944 0.69106 5.64261 0.646455 7.4266C0.601849 9.21059 1.24464 10.9435 2.44187 12.2668C3.6391 13.5902 5.29917 14.4028 7.0787 14.5365C8.85824 14.6702 10.6211 14.1148 12.0026 12.9852L16.1478 17.1303C16.2787 17.2568 16.4542 17.3268 16.6362 17.3252C16.8183 17.3237 16.9925 17.2506 17.1212 17.1219C17.25 16.9931 17.323 16.8189 17.3246 16.6368C17.3262 16.4548 17.2562 16.2794 17.1297 16.1484ZM7.61095 13.1671C6.51217 13.1671 5.43806 12.8413 4.52445 12.2308C3.61084 11.6204 2.89877 10.7527 2.47829 9.73759C2.0578 8.72244 1.94778 7.60541 2.16214 6.52773C2.37651 5.45006 2.90562 4.46016 3.68258 3.6832C4.45954 2.90624 5.44944 2.37713 6.52712 2.16276C7.60479 1.9484 8.72183 2.05842 9.73697 2.47891C10.7521 2.89939 11.6198 3.61146 12.2302 4.52507C12.8407 5.43868 13.1665 6.51278 13.1665 7.61157C13.1649 9.08449 12.579 10.4966 11.5375 11.5381C10.496 12.5796 9.08387 13.1655 7.61095 13.1671Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_3021_2\">\n        <rect\n          width=\"16.6667\"\n          height=\"16.6667\"\n          fill=\"white\"\n          transform=\"translate(0.666664 0.666626)\"\n        />\n      </clipPath>\n    </defs>\n  </svg>\n\n  <div class=\"container-close-drop\">\n    <app-icon\n      *ngIf=\"textInput?.length > 0 && showIcon\"\n      (click)=\"clearText()\"\n      [class]=\"label ? 'icon-close-input-label' : 'icon-close-input'\"\n      name=\"Close-small\"\n      width=\"20px\"\n      height=\"20px\"\n      color=\"Gray-Gray-600\"\n    ></app-icon>\n\n    <div class=\"label-custom\" *ngIf=\"label && isFocus && type == 'dropdown'\">\n      <span class=\"label-custom-icon Body-M-Regular\">\n        {{ label || 'Label' }}\n      </span>\n      <app-icon name=\"Dropdown-down\" width=\"24px\" height=\"24px\" color=\"Gray-Gray-500\"></app-icon>\n    </div>\n    <dropi-button\n      *ngIf=\"type == 'dropdown-button'\"\n      [type]=\"'dropdown'\"\n      [severity]=\"'tertiary'\"\n      [state]=\"'default'\"\n      [text]=\"textDropButton\"\n      (onClick)=\"handleClickDropButton($event)\"\n    ></dropi-button>\n  </div>\n\n  <div\n    #overlay\n    (click)=\"$event.stopPropagation()\"\n    [class]=\"'overlay-search-input ' + overlaySelected\"\n    *ngIf=\"(isFocus && type == 'dropdown') || (isClickedDropButton && type == 'dropdown-button')\"\n    [ngStyle]=\"getOverlayStyles()\"\n    @fade\n  >\n    <div\n      class=\"container-content\"\n      *ngIf=\"\n        (isVisibleContent && type == 'dropdown') ||\n        (isClickedDropButton && type == 'dropdown-button')\n      \"\n      @fade\n    >\n      <div class=\"content-no-found\" *ngIf=\"dataToSearchCache?.length == 0\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"21\"\n          height=\"20\"\n          viewBox=\"0 0 21 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.5 1.66663C8.85185 1.66663 7.24068 2.15537 5.87027 3.07105C4.49986 3.98672 3.43176 5.28821 2.80103 6.81093C2.1703 8.33365 2.00527 10.0092 2.32681 11.6257C2.64836 13.2422 3.44203 14.7271 4.60747 15.8925C5.77291 17.058 7.25776 17.8516 8.87427 18.1732C10.4908 18.4947 12.1663 18.3297 13.6891 17.699C15.2118 17.0682 16.5133 16.0001 17.4289 14.6297C18.3446 13.2593 18.8334 11.6481 18.8334 9.99996C18.831 7.79056 17.9522 5.67233 16.3899 4.11004C14.8277 2.54776 12.7094 1.66902 10.5 1.66663ZM10.5 16.9444C9.12654 16.9444 7.78391 16.5371 6.6419 15.7741C5.49989 15.011 4.6098 13.9264 4.08419 12.6575C3.55859 11.3886 3.42106 9.99226 3.68902 8.64517C3.95697 7.29808 4.61836 6.06069 5.58956 5.0895C6.56076 4.1183 7.79814 3.4569 9.14523 3.18895C10.4923 2.921 11.8886 3.05852 13.1575 3.58413C14.4265 4.10974 15.5111 4.99983 16.2741 6.14183C17.0372 7.28384 17.4445 8.62648 17.4445 9.99996C17.4424 11.8411 16.7102 13.6063 15.4083 14.9082C14.1064 16.2101 12.3412 16.9424 10.5 16.9444Z\"\n            fill=\"var(--Gray-Gray-600)\"\n          />\n          <path\n            d=\"M10.5 5.13895C10.3158 5.13895 10.1392 5.21212 10.009 5.34235C9.87875 5.47259 9.80558 5.64922 9.80558 5.8334V11.389C9.80558 11.5731 9.87875 11.7498 10.009 11.88C10.1392 12.0102 10.3158 12.0834 10.5 12.0834C10.6842 12.0834 10.8608 12.0102 10.9911 11.88C11.1213 11.7498 11.1945 11.5731 11.1945 11.389V5.8334C11.1945 5.64922 11.1213 5.47259 10.9911 5.34235C10.8608 5.21212 10.6842 5.13895 10.5 5.13895Z\"\n            fill=\"#475066\"\n          />\n          <path\n            d=\"M11.1945 14.1667C11.1945 13.7832 10.8836 13.4723 10.5 13.4723C10.1165 13.4723 9.80558 13.7832 9.80558 14.1667C9.80558 14.5503 10.1165 14.8612 10.5 14.8612C10.8836 14.8612 11.1945 14.5503 11.1945 14.1667Z\"\n            fill=\"#475066\"\n          />\n        </svg>\n\n        <div class=\"Body-S-Regular text-no-found\">\n          No encontramos resultados, por favor intenta con otra b\u00FAsqueda.\n        </div>\n      </div>\n\n      <div *ngIf=\"dataToSearchCache?.length > 0\">\n        <div class=\"container-array\" *ngFor=\"let data of dataToSearchCache; let i = index\">\n          <app-dropi-checkbox\n            [checked]=\"data.isChecked\"\n            (onChange)=\"checkingList($event, data)\"\n          ></app-dropi-checkbox>\n          {{ data[dataName] }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".container-search{width:100%;min-width:150px;height:40px;background-color:var(--color-back);border:1px solid var(--Gray-Gray-100);border-radius:var(--Size-2);padding:var(--Size-3);position:relative;display:flex;justify-content:flex-start;align-items:center}.container-search>input{position:relative;right:0;left:0;top:0;height:100%;background-color:transparent;border:none;position:absolute;font-style:14px!important;padding:0 38px;width:100%}input::placeholder{color:var(--Gray-Gray-500)!important}.icon-close-input,.icon-close-input-label{cursor:pointer}.container-close-drop{display:flex;position:absolute;align-items:center;right:13px;gap:.25rem}.overlay-search-input{width:100%;box-shadow:.5px 4px 8px #00000014;background-color:var(--Neutral-White);position:absolute;left:0;border-radius:var(--Size-2);align-self:stretch;z-index:100}.text-no-found{margin-top:var(--Size-2);text-align:center;padding:0 var(--Size-4)}.content-no-found{display:flex;justify-content:center;align-items:center;height:180px;flex-direction:column}.container-array{padding:var(--Size-3) var(--Size-4);display:flex;align-items:center}.content-found{overflow-y:auto;z-index:99999}.container-search-input{width:385px}.container-array>app-dropi-checkbox{margin-right:var(--Size-3)}.label-custom{cursor:pointer}.label-custom-icon{color:var(--Gray-Gray-500)}.input-drop-class{padding-right:10rem!important}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiSearchComponent, isStandalone: true, selector: "app-dropi-search", inputs: { type: "type", typeInput: "typeInput", placeholder: "placeholder", textDropButton: "textDropButton", textInput: "textInput", showIcon: "showIcon", label: "label", colorSearch: "colorSearch", overlaySelected: "overlaySelected", backgroundInput: "backgroundInput", maxLength: "maxLength" }, outputs: { textInputChange: "textInputChange", onClick: "onClick", onSearch: "onSearch", onInput: "onInput", onKeyEnter: "onKeyEnter", onClear: "onClear" }, ngImport: i0, template: "<div [style.--color-back]=\"backgroundInput\" #containerRef class=\"container-search\">\n  <input\n    (focus)=\"onFocus()\"\n    (input)=\"changeText($event)\"\n    (change)=\"onChangHandler($event)\"\n    (keyup.enter)=\"onEnter($event)\"\n    [(ngModel)]=\"textInput\"\n    [ngClass]=\"{\n      'Body-M-Regular': true,\n      'custom-input': true,\n      'input-drop-class': type === 'dropdown-button'\n    }\"\n    [type]=\"typeInput\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder | translate\"\n  />\n  <svg\n    [style.color]=\"colorSearch\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20px\"\n    height=\"20px\"\n    viewBox=\"0 0 18 18\"\n    fill=\"none\"\n  >\n    <g clip-path=\"url(#clip0_3021_2)\">\n      <path\n        d=\"M17.1297 16.1484L12.9846 12.0032C14.1142 10.6217 14.6695 8.85886 14.5358 7.07932C14.4021 5.29979 13.5896 3.63972 12.2662 2.44249C10.9429 1.24526 9.20997 0.602467 7.42598 0.647073C5.64199 0.691678 3.94338 1.42027 2.68152 2.68213C1.41965 3.944 0.69106 5.64261 0.646455 7.4266C0.601849 9.21059 1.24464 10.9435 2.44187 12.2668C3.6391 13.5902 5.29917 14.4028 7.0787 14.5365C8.85824 14.6702 10.6211 14.1148 12.0026 12.9852L16.1478 17.1303C16.2787 17.2568 16.4542 17.3268 16.6362 17.3252C16.8183 17.3237 16.9925 17.2506 17.1212 17.1219C17.25 16.9931 17.323 16.8189 17.3246 16.6368C17.3262 16.4548 17.2562 16.2794 17.1297 16.1484ZM7.61095 13.1671C6.51217 13.1671 5.43806 12.8413 4.52445 12.2308C3.61084 11.6204 2.89877 10.7527 2.47829 9.73759C2.0578 8.72244 1.94778 7.60541 2.16214 6.52773C2.37651 5.45006 2.90562 4.46016 3.68258 3.6832C4.45954 2.90624 5.44944 2.37713 6.52712 2.16276C7.60479 1.9484 8.72183 2.05842 9.73697 2.47891C10.7521 2.89939 11.6198 3.61146 12.2302 4.52507C12.8407 5.43868 13.1665 6.51278 13.1665 7.61157C13.1649 9.08449 12.579 10.4966 11.5375 11.5381C10.496 12.5796 9.08387 13.1655 7.61095 13.1671Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_3021_2\">\n        <rect\n          width=\"16.6667\"\n          height=\"16.6667\"\n          fill=\"white\"\n          transform=\"translate(0.666664 0.666626)\"\n        />\n      </clipPath>\n    </defs>\n  </svg>\n\n  <div class=\"container-close-drop\">\n    <app-icon\n      *ngIf=\"textInput?.length > 0 && showIcon\"\n      (click)=\"clearText()\"\n      [class]=\"label ? 'icon-close-input-label' : 'icon-close-input'\"\n      name=\"Close-small\"\n      width=\"20px\"\n      height=\"20px\"\n      color=\"Gray-Gray-600\"\n    ></app-icon>\n\n    <div class=\"label-custom\" *ngIf=\"label && isFocus && type == 'dropdown'\">\n      <span class=\"label-custom-icon Body-M-Regular\">\n        {{ label || 'Label' }}\n      </span>\n      <app-icon name=\"Dropdown-down\" width=\"24px\" height=\"24px\" color=\"Gray-Gray-500\"></app-icon>\n    </div>\n    <dropi-button\n      *ngIf=\"type == 'dropdown-button'\"\n      [type]=\"'dropdown'\"\n      [severity]=\"'tertiary'\"\n      [state]=\"'default'\"\n      [text]=\"textDropButton\"\n      (onClick)=\"handleClickDropButton($event)\"\n    ></dropi-button>\n  </div>\n\n  <div\n    #overlay\n    (click)=\"$event.stopPropagation()\"\n    [class]=\"'overlay-search-input ' + overlaySelected\"\n    *ngIf=\"(isFocus && type == 'dropdown') || (isClickedDropButton && type == 'dropdown-button')\"\n    [ngStyle]=\"getOverlayStyles()\"\n    @fade\n  >\n    <div\n      class=\"container-content\"\n      *ngIf=\"\n        (isVisibleContent && type == 'dropdown') ||\n        (isClickedDropButton && type == 'dropdown-button')\n      \"\n      @fade\n    >\n      <div class=\"content-no-found\" *ngIf=\"dataToSearchCache?.length == 0\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"21\"\n          height=\"20\"\n          viewBox=\"0 0 21 20\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M10.5 1.66663C8.85185 1.66663 7.24068 2.15537 5.87027 3.07105C4.49986 3.98672 3.43176 5.28821 2.80103 6.81093C2.1703 8.33365 2.00527 10.0092 2.32681 11.6257C2.64836 13.2422 3.44203 14.7271 4.60747 15.8925C5.77291 17.058 7.25776 17.8516 8.87427 18.1732C10.4908 18.4947 12.1663 18.3297 13.6891 17.699C15.2118 17.0682 16.5133 16.0001 17.4289 14.6297C18.3446 13.2593 18.8334 11.6481 18.8334 9.99996C18.831 7.79056 17.9522 5.67233 16.3899 4.11004C14.8277 2.54776 12.7094 1.66902 10.5 1.66663ZM10.5 16.9444C9.12654 16.9444 7.78391 16.5371 6.6419 15.7741C5.49989 15.011 4.6098 13.9264 4.08419 12.6575C3.55859 11.3886 3.42106 9.99226 3.68902 8.64517C3.95697 7.29808 4.61836 6.06069 5.58956 5.0895C6.56076 4.1183 7.79814 3.4569 9.14523 3.18895C10.4923 2.921 11.8886 3.05852 13.1575 3.58413C14.4265 4.10974 15.5111 4.99983 16.2741 6.14183C17.0372 7.28384 17.4445 8.62648 17.4445 9.99996C17.4424 11.8411 16.7102 13.6063 15.4083 14.9082C14.1064 16.2101 12.3412 16.9424 10.5 16.9444Z\"\n            fill=\"var(--Gray-Gray-600)\"\n          />\n          <path\n            d=\"M10.5 5.13895C10.3158 5.13895 10.1392 5.21212 10.009 5.34235C9.87875 5.47259 9.80558 5.64922 9.80558 5.8334V11.389C9.80558 11.5731 9.87875 11.7498 10.009 11.88C10.1392 12.0102 10.3158 12.0834 10.5 12.0834C10.6842 12.0834 10.8608 12.0102 10.9911 11.88C11.1213 11.7498 11.1945 11.5731 11.1945 11.389V5.8334C11.1945 5.64922 11.1213 5.47259 10.9911 5.34235C10.8608 5.21212 10.6842 5.13895 10.5 5.13895Z\"\n            fill=\"#475066\"\n          />\n          <path\n            d=\"M11.1945 14.1667C11.1945 13.7832 10.8836 13.4723 10.5 13.4723C10.1165 13.4723 9.80558 13.7832 9.80558 14.1667C9.80558 14.5503 10.1165 14.8612 10.5 14.8612C10.8836 14.8612 11.1945 14.5503 11.1945 14.1667Z\"\n            fill=\"#475066\"\n          />\n        </svg>\n\n        <div class=\"Body-S-Regular text-no-found\">\n          No encontramos resultados, por favor intenta con otra b\u00FAsqueda.\n        </div>\n      </div>\n\n      <div *ngIf=\"dataToSearchCache?.length > 0\">\n        <div class=\"container-array\" *ngFor=\"let data of dataToSearchCache; let i = index\">\n          <app-dropi-checkbox\n            [checked]=\"data.isChecked\"\n            (onChange)=\"checkingList($event, data)\"\n          ></app-dropi-checkbox>\n          {{ data[dataName] }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".container-search{width:100%;min-width:150px;height:40px;background-color:var(--color-back);border:1px solid var(--Gray-Gray-100);border-radius:var(--Size-2);padding:var(--Size-3);position:relative;display:flex;justify-content:flex-start;align-items:center}.container-search>input{position:relative;right:0;left:0;top:0;height:100%;background-color:transparent;border:none;position:absolute;font-style:14px!important;padding:0 38px;width:100%}input::placeholder{color:var(--Gray-Gray-500)!important}.icon-close-input,.icon-close-input-label{cursor:pointer}.container-close-drop{display:flex;position:absolute;align-items:center;right:13px;gap:.25rem}.overlay-search-input{width:100%;box-shadow:.5px 4px 8px #00000014;background-color:var(--Neutral-White);position:absolute;left:0;border-radius:var(--Size-2);align-self:stretch;z-index:100}.text-no-found{margin-top:var(--Size-2);text-align:center;padding:0 var(--Size-4)}.content-no-found{display:flex;justify-content:center;align-items:center;height:180px;flex-direction:column}.container-array{padding:var(--Size-3) var(--Size-4);display:flex;align-items:center}.content-found{overflow-y:auto;z-index:99999}.container-search-input{width:385px}.container-array>app-dropi-checkbox{margin-right:var(--Size-3)}.label-custom{cursor:pointer}.label-custom-icon{color:var(--Gray-Gray-500)}.input-drop-class{padding-right:10rem!important}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiSearchComponent, decorators: [{
             type: Component,
@@ -1833,7 +1862,7 @@ class DropiSelectComponent {
     getValueDrop(event) { }
     onScroll(event) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiSelectComponent, isStandalone: true, selector: "app-dropi-select", inputs: { label: "label", options: "options", selectProperties: "selectProperties", labelDrop: "labelDrop", disabled: "disabled" }, ngImport: i0, template: "<div class=\"dropi-select-container\">\n  <label *ngIf=\"label\" class=\"select-label\">{{ label | translate }}</label>\n\n  <div\n    class=\"select-trigger\"\n    [ngClass]=\"{ 'is-open': isOpen, 'has-error': selectProperties?.hasError }\"\n    (click)=\"toggleDropdown()\"\n  >\n    <div class=\"selected-value\">\n      <ng-container *ngIf=\"selectedOption; else placeholderTpl\">\n        <app-icon\n          *ngIf=\"showCountryFlags && selectedOption.countryCode\"\n          [name]=\"selectedOption.countryCode\"\n        ></app-icon>\n        <span>{{\n          selectedOption.label || selectedOption.name | translate\n        }}</span>\n      </ng-container>\n      <ng-template #placeholderTpl>\n        <span class=\"placeholder\">\n          {{\n            (labelDrop ? labelDrop : selectProperties?.placeholder) | translate\n          }}\n        </span>\n      </ng-template>\n    </div>\n\n    <div class=\"icons\">\n      <app-icon\n        [name]=\"isExpanded ? 'Dropdown-up' : 'Dropdown-down'\"\n        [width]=\"selectProperties?.dropdownType ? '24px' : '20px'\"\n        [height]=\"selectProperties?.dropdownType ? '24px' : '20px'\"\n      ></app-icon>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectProperties?.textHelper\" class=\"select-helper\">\n    <span>{{ selectProperties.textHelper | translate }}</span>\n  </div>\n\n  <div *ngIf=\"selectProperties?.hasError\" class=\"select-helper-error\">\n    <span>{{ selectProperties.errorText | translate }}</span>\n  </div>\n\n  <div\n    class=\"select-dropdown-overlay\"\n    *ngIf=\"isOpen\"\n    (scroll)=\"onScroll($event)\"\n  >\n    <div class=\"search-container\" *ngIf=\"searchEnabled\">\n      <app-dropi-search\n        [placeholder]=\"selectProperties?.placeHolderSearch || 'Buscar'\"\n        [(ngModel)]=\"searchTerm\"\n        (onInput)=\"filterOptions($event)\"\n        (onKeyEnter)=\"onKeyPress($event)\"\n        (onClear)=\"onClearHanddle()\"\n      ></app-dropi-search>\n    </div>\n\n    <ul class=\"options-list\">\n      <ng-container *ngIf=\"isGrouped\">\n        <li *ngFor=\"let group of filteredOptions\" class=\"option-group\">\n          <span class=\"group-label\">{{ group.label | translate }}</span>\n          <ul>\n            <li\n              *ngFor=\"let option of group.items\"\n              (click)=\"selectOption(option)\"\n              class=\"option-item\"\n            >\n              {{ option.label | translate }}\n            </li>\n          </ul>\n        </li>\n      </ng-container>\n\n      <ng-container *ngIf=\"!isGrouped && !multiSelect\">\n        <li\n          *ngFor=\"let option of filteredOptions\"\n          class=\"option-item\"\n          [ngClass]=\"{\n            'option-with-flag': showCountryFlags && option.countryCode,\n          }\"\n          (click)=\"selectOption(option)\"\n        >\n          <app-country-flags\n            *ngIf=\"showCountryFlags && option.countryCode\"\n            [country]=\"option.countryCode\"\n          ></app-country-flags>\n          <span>\n            {{\n              (showCountryFlags && option.shortLabel\n                ? option.shortLabel\n                : option.label || option.name\n              ) | translate\n            }}\n          </span>\n        </li>\n      </ng-container>\n\n      <ng-container *ngIf=\"multiSelect\">\n        <app-dropi-dropdown\n          [options]=\"multiSelecOptions\"\n          [parameters]=\"parametersDrop\"\n          (modelChange)=\"getValueDrop($event)\"\n        ></app-dropi-dropdown>\n      </ng-container>\n    </ul>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.custom-select{position:relative;width:100%}.custom-select label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.custom-select label span{color:var(--Error-Error-500)}.custom-select .disabled-label{color:var(--Gray-Gray-500)}.select-button{width:100%;height:40px;padding:.47rem .75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);color:var(--Gray-Gray-500);font-size:var(--font-size-s);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0;border:1px solid transparent;border-radius:var(--Border-2);overflow-y:scroll;z-index:1300}.select-dropdown-overlay{width:100%;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4);padding-bottom:var(--Size-3);margin:0;border:1px solid transparent;border-radius:var(--Border-2);background:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:9999}.select-dropdown-overlay.padding-dropdown,.padding-dropdown{padding:var(--Size-4)}.option{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s);cursor:pointer}.option:hover{background:var(--Gray-Gray-50)}.expanded-select{max-height:250px;background:var(--Neutral-White);box-shadow:var(--Shadow-medium);transition:max-height .2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;padding:0;transition:max-height .2s ease-out,background .3s ease-out,box-shadow .3s ease-out,padding .3s}.select-button:focus{border-color:var(--Info-Info-500)}.select-button-error{border-color:var(--Error-Error-500)!important}.select-button:disabled,.option:disabled{border-color:var(--Gray-Gray-200);color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);cursor:unset}.select-completed{border-color:var(--Gray-Gray-400);color:var(--Gray-Gray-600);background:var(--Neutral-White)}.select-helper{display:flex;gap:var(--Size-1);align-items:baseline}.select-helper span{display:block;margin-top:var(--Size-2);color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.select-helper-error{display:flex;gap:var(--Size-1);align-items:baseline}.select-helper-error span{display:block;margin-top:var(--Size-2);color:var(--Error-Error-500);font-size:var(--font-size-xs)}.invalid-color{color:var(--Error-Error-500)!important}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-group-title{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s)}.option-group{padding-left:var(--Size-6)}.sticky-search{position:sticky;top:0;background:var(--Neutral-White);z-index:10}::ng-deep .custom-select .select-dropdown .sticky-search .container-search{background-color:var(--Neutral-White)!important}.no-border{border:none!important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);gap:var(--Size-2, 8px);background-color:transparent!important}.no-border:disabled{background-color:transparent!important}.select-button:disabled{color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50)}.dropdown-container{display:flex;align-items:center;gap:4px}.dropdown-container .left-label{color:var(--Gray-600, #475066);white-space:nowrap}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.select-button.with-flag .button-content app-country-flags{flex-shrink:0}.select-button.with-flag .button-content app-country-flags ::ng-deep .rectangle{max-width:24px!important;max-height:17px!important;border-radius:var(--Border-1)}.option-with-flag{display:flex;align-items:center;gap:8px}.option-with-flag app-country-flags{flex-shrink:0}.option-with-flag app-country-flags ::ng-deep .rectangle{max-width:24px!important;max-height:17px!important;border-radius:var(--Border-1)}.option-with-flag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: DropiSearchComponent, selector: "app-dropi-search", inputs: ["type", "typeInput", "placeholder", "textDropButton", "textInput", "showIcon", "label", "colorSearch", "overlaySelected", "backgroundInput", "maxLength"], outputs: ["textInputChange", "onClick", "onSearch", "onInput", "onKeyEnter", "onClear"] }, { kind: "component", type: DropiDropdownComponent, selector: "app-dropi-dropdown", inputs: ["options", "parameters", "isInSelect", "height", "valueModel"], outputs: ["onSelectionChange", "modelChange"] }, { kind: "component", type: CountryFlagsComponent, selector: "app-country-flags", inputs: ["country", "width", "height", "style"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiSelectComponent, isStandalone: true, selector: "app-dropi-select", inputs: { label: "label", options: "options", selectProperties: "selectProperties", labelDrop: "labelDrop", disabled: "disabled" }, ngImport: i0, template: "<div class=\"dropi-select-container\">\n  <label *ngIf=\"label\" class=\"select-label\">{{ label | translate }}</label>\n\n  <div\n    class=\"select-trigger\"\n    [ngClass]=\"{ 'is-open': isOpen, 'has-error': selectProperties?.hasError }\"\n    (click)=\"toggleDropdown()\"\n  >\n    <div class=\"selected-value\">\n      <ng-container *ngIf=\"selectedOption; else placeholderTpl\">\n        <app-icon\n          *ngIf=\"showCountryFlags && selectedOption.countryCode\"\n          [name]=\"selectedOption.countryCode\"\n        ></app-icon>\n        <span>{{\n          selectedOption.label || selectedOption.name | translate\n        }}</span>\n      </ng-container>\n      <ng-template #placeholderTpl>\n        <span class=\"placeholder\">\n          {{\n            (labelDrop ? labelDrop : selectProperties?.placeholder) | translate\n          }}\n        </span>\n      </ng-template>\n    </div>\n\n    <div class=\"icons\">\n      <app-icon\n        [name]=\"isExpanded ? 'Dropdown-up' : 'Dropdown-down'\"\n        [width]=\"selectProperties?.dropdownType ? '24px' : '20px'\"\n        [height]=\"selectProperties?.dropdownType ? '24px' : '20px'\"\n      ></app-icon>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectProperties?.textHelper\" class=\"select-helper\">\n    <span>{{ selectProperties.textHelper | translate }}</span>\n  </div>\n\n  <div *ngIf=\"selectProperties?.hasError\" class=\"select-helper-error\">\n    <span>{{ selectProperties.errorText | translate }}</span>\n  </div>\n\n  <div\n    class=\"select-dropdown-overlay\"\n    *ngIf=\"isOpen\"\n    (scroll)=\"onScroll($event)\"\n  >\n    <div class=\"search-container\" *ngIf=\"searchEnabled\">\n      <app-dropi-search\n        [placeholder]=\"selectProperties?.placeHolderSearch || 'Buscar'\"\n        [(ngModel)]=\"searchTerm\"\n        (onInput)=\"filterOptions($event)\"\n        (onKeyEnter)=\"onKeyPress($event)\"\n        (onClear)=\"onClearHanddle()\"\n      ></app-dropi-search>\n    </div>\n\n    <ul class=\"options-list\">\n      <ng-container *ngIf=\"isGrouped\">\n        <li *ngFor=\"let group of filteredOptions\" class=\"option-group\">\n          <span class=\"group-label\">{{ group.label | translate }}</span>\n          <ul>\n            <li\n              *ngFor=\"let option of group.items\"\n              (click)=\"selectOption(option)\"\n              class=\"option-item\"\n            >\n              {{ option.label | translate }}\n            </li>\n          </ul>\n        </li>\n      </ng-container>\n\n      <ng-container *ngIf=\"!isGrouped && !multiSelect\">\n        <li\n          *ngFor=\"let option of filteredOptions\"\n          class=\"option-item\"\n          [ngClass]=\"{\n            'option-with-flag': showCountryFlags && option.countryCode,\n          }\"\n          (click)=\"selectOption(option)\"\n        >\n          <app-country-flags\n            *ngIf=\"showCountryFlags && option.countryCode\"\n            [country]=\"option.countryCode\"\n          ></app-country-flags>\n          <span>\n            {{\n              (showCountryFlags && option.shortLabel\n                ? option.shortLabel\n                : option.label || option.name\n              ) | translate\n            }}\n          </span>\n        </li>\n      </ng-container>\n\n      <ng-container *ngIf=\"multiSelect\">\n        <app-dropi-dropdown\n          [options]=\"multiSelecOptions\"\n          [parameters]=\"parametersDrop\"\n          (modelChange)=\"getValueDrop($event)\"\n        ></app-dropi-dropdown>\n      </ng-container>\n    </ul>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.custom-select{position:relative;width:100%}.custom-select label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.custom-select label span{color:var(--Error-Error-500)}.custom-select .disabled-label{color:var(--Gray-Gray-500)}.select-button{width:100%;height:40px;padding:.47rem .75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);color:var(--Gray-Gray-500);font-size:var(--font-size-s);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0;border:1px solid transparent;border-radius:var(--Border-2);overflow-y:scroll;z-index:1300}.select-dropdown-overlay{width:100%;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4);padding-bottom:var(--Size-3);margin:0;border:1px solid transparent;border-radius:var(--Border-2);background:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:9999}.select-dropdown-overlay.padding-dropdown,.padding-dropdown{padding:var(--Size-4)}.option{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s);cursor:pointer}.option:hover{background:var(--Gray-Gray-50)}.expanded-select{max-height:250px;background:var(--Neutral-White);box-shadow:var(--Shadow-medium);transition:max-height .2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;padding:0;transition:max-height .2s ease-out,background .3s ease-out,box-shadow .3s ease-out,padding .3s}.select-button:focus{border-color:var(--Info-Info-500)}.select-button-error{border-color:var(--Error-Error-500)!important}.select-button:disabled,.option:disabled{border-color:var(--Gray-Gray-200);color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);cursor:unset}.select-completed{border-color:var(--Gray-Gray-400);color:var(--Gray-Gray-600);background:var(--Neutral-White)}.select-helper{display:flex;gap:var(--Size-1);align-items:baseline}.select-helper span{display:block;margin-top:var(--Size-2);color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.select-helper-error{display:flex;gap:var(--Size-1);align-items:baseline}.select-helper-error span{display:block;margin-top:var(--Size-2);color:var(--Error-Error-500);font-size:var(--font-size-xs)}.invalid-color{color:var(--Error-Error-500)!important}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-group-title{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s)}.option-group{padding-left:var(--Size-6)}.sticky-search{position:sticky;top:0;background:var(--Neutral-White);z-index:10}::ng-deep .custom-select .select-dropdown .sticky-search .container-search{background-color:var(--Neutral-White)!important}.no-border{border:none!important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);gap:var(--Size-2, 8px);background-color:transparent!important}.no-border:disabled{background-color:transparent!important}.select-button:disabled{color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50)}.dropdown-container{display:flex;align-items:center;gap:4px}.dropdown-container .left-label{color:var(--Gray-600, #475066);white-space:nowrap}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.select-button.with-flag .button-content app-country-flags{flex-shrink:0}.select-button.with-flag .button-content app-country-flags ::ng-deep .rectangle{max-width:24px!important;max-height:17px!important;border-radius:var(--Border-1)}.option-with-flag{display:flex;align-items:center;gap:8px}.option-with-flag app-country-flags{flex-shrink:0}.option-with-flag app-country-flags ::ng-deep .rectangle{max-width:24px!important;max-height:17px!important;border-radius:var(--Border-1)}.option-with-flag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: DropiSearchComponent, selector: "app-dropi-search", inputs: ["type", "typeInput", "placeholder", "textDropButton", "textInput", "showIcon", "label", "colorSearch", "overlaySelected", "backgroundInput", "maxLength"], outputs: ["textInputChange", "onClick", "onSearch", "onInput", "onKeyEnter", "onClear"] }, { kind: "component", type: DropiDropdownComponent, selector: "app-dropi-dropdown", inputs: ["options", "parameters", "isInSelect", "height", "valueModel"], outputs: ["onSelectionChange", "modelChange"] }, { kind: "component", type: CountryFlagsComponent, selector: "app-country-flags", inputs: ["country", "width", "height", "style"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiSelectComponent, decorators: [{
             type: Component,
@@ -1877,7 +1906,7 @@ class CitySelectorComponent {
     }
     loadCities(event) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CitySelectorComponent, deps: [{ token: "CityService" }, { token: "SettingsService" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CitySelectorComponent, isStandalone: true, selector: "app-city-selector", inputs: { formControlCity: "formControlCity", disabled: "disabled" }, outputs: { onCityChange: "onCityChange" }, ngImport: i0, template: "<div class=\"city-selector\">\n  <p-multiSelect\n    [options]=\"groupedCities\"\n    [group]=\"true\"\n    [(ngModel)]=\"selectedCities\"\n    [placeholder]=\"'select a city' | translate\"\n    display=\"chip\"\n    [showClear]=\"false\"\n    [showHeader]=\"true\"\n    (ngModelChange)=\"onSelectCityChange($event)\"\n    [itemSize]=\"10\"\n    [disabled]=\"disabled\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"loadCities($event)\"\n  >\n    <ng-template let-group pTemplate=\"group\">\n      <div class=\"flex item-state\">\n        <span>{{ group.label }}</span>\n      </div>\n    </ng-template>\n  </p-multiSelect>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CitySelectorComponent, isStandalone: true, selector: "app-city-selector", inputs: { formControlCity: "formControlCity", disabled: "disabled" }, outputs: { onCityChange: "onCityChange" }, ngImport: i0, template: "<div class=\"city-selector\">\n  <p-multiSelect\n    [options]=\"groupedCities\"\n    [group]=\"true\"\n    [(ngModel)]=\"selectedCities\"\n    [placeholder]=\"'select a city' | translate\"\n    display=\"chip\"\n    [showClear]=\"false\"\n    [showHeader]=\"true\"\n    (ngModelChange)=\"onSelectCityChange($event)\"\n    [itemSize]=\"10\"\n    [disabled]=\"disabled\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"loadCities($event)\"\n  >\n    <ng-template let-group pTemplate=\"group\">\n      <div class=\"flex item-state\">\n        <span>{{ group.label }}</span>\n      </div>\n    </ng-template>\n  </p-multiSelect>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CitySelectorComponent, decorators: [{
             type: Component,
@@ -1950,12 +1979,12 @@ class RadioSelectionListComponent {
         this.searchControl.setValue("");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioSelectionListComponent, deps: [{ token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadioSelectionListComponent, isStandalone: true, selector: "app-radio-selection-list", inputs: { extraContent: "extraContent", withExtraContentId: "withExtraContentId", options: "options", typeLayout: "typeLayout", alwaysShowDescription: "alwaysShowDescription", selectedOption: "selectedOption", showFilter: "showFilter", filterPlaceholder: "filterPlaceholder", searchDelay: "searchDelay" }, outputs: { valueChange: "valueChange", onSearch: "onSearch" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"options-container\">\n  <div class=\"search-container\" *ngIf=\"showFilter\">\n    <span class=\"input-icon\">\n      <i class=\"pi pi-search\"></i>\n      <input\n        type=\"text\"\n        pInputText\n        [formControl]=\"searchControl\"\n        [placeholder]=\"filterPlaceholder\"\n      />\n    </span>\n  </div>\n\n  <div class=\"options\">\n    <ng-container *ngFor=\"let option of filteredOptions\">\n      <div\n        (click)=\"selectOption(option.id)\"\n        (keyup)=\"selectOption(option.id)\"\n        [ngClass]=\"{\n          selected: selectedOption === option.id,\n          'half-width': option.halfWidth!,\n          'full-width': !option.halfWidth,\n          disabled: option?.disabled\n        }\"\n        [id]=\"'option-' + option.id\"\n        class=\"option-container\"\n      >\n        <div class=\"option\">\n          <div class=\"selection\" [ngClass]=\"{ box: typeLayout === 'description' }\">\n            <div class=\"radio\" [ngClass]=\"{ selected: selectedOption === option.id }\">\n              <div class=\"circle\" *ngIf=\"selectedOption === option.id\"></div>\n            </div>\n            <div *ngIf=\"typeLayout !== 'description'\" class=\"data-container\">\n              <p *ngIf=\"typeLayout === 'default'\" class=\"option-name\">{{ option.name }}</p>\n              <div\n                class=\"description\"\n                *ngIf=\"\n                  option.description && (selectedOption === option.id || alwaysShowDescription)\n                \"\n              >\n                <p *ngIf=\"typeLayout !== 'description'\" [innerHTML]=\"option.description\"></p>\n              </div>\n            </div>\n\n            <ng-container *ngIf=\"typeLayout === 'description'\">\n              <img [src]=\"option.iconImages[0].url\" alt=\"img\" class=\"img\" />\n              <div class=\"Body-M-Regular\">\n                <div class=\"Body-M-Regular\">{{ option.name }}</div>\n                <div\n                  class=\"description-wrapper\"\n                  [ngClass]=\"{ 'has-icons': option.descriptionIcons?.length > 0 }\"\n                >\n                  <p class=\"description Body-S-Regular\" [innerHTML]=\"option.description\"></p>\n                  <div class=\"description-icons\" *ngIf=\"option.descriptionIcons?.length > 0\">\n                    <img\n                      *ngFor=\"let icon of option.descriptionIcons\"\n                      [src]=\"icon.url\"\n                      [alt]=\"icon.alt\"\n                    />\n                  </div>\n                </div>\n                <!-- <div\n                  class=\"description\"\n                  *ngIf=\"\n                    option.description && (selectedOption === option.id || alwaysShowDescription)\n                  \"\n                ></div> -->\n              </div>\n            </ng-container>\n          </div>\n          <div\n            class=\"icons-container\"\n            *ngIf=\"option?.iconImages?.length > 0 && typeLayout === 'default'\"\n          >\n            <div class=\"icon\" *ngFor=\"let icon of option.iconImages\">\n              <img [src]=\"icon.url\" [alt]=\"icon.alt\" />\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"table-contents description\"\n          *ngIf=\"\n            option.table?.length > 0 && (selectedOption === option.id || alwaysShowDescription)\n          \"\n        >\n          <div class=\"item-table\" *ngFor=\"let item of option.table\">\n            <div class=\"item-table-name\">{{ item.name }}</div>\n            <div class=\"item-table-value\">\n              {{ item.value }}\n              <!-- <currency\n            [value]=\"item.value\"\n            ></currency> -->\n            </div>\n          </div>\n        </div>\n\n        <div class=\"tag\" *ngIf=\"option.tag\">\n          {{ option.tag }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"option.id === withExtraContentId && extraContent\">\n        <ng-container *ngTemplateOutlet=\"extraContent\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".options-container{display:flex;flex-direction:column;gap:10px;color:var(--Text-text-paragraph, #7b8190);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.option-container{display:flex;border:1px solid var(--Gray-200, #c3c9d9);border-radius:8px;flex-direction:column;padding:var(--Size-4, 16px);cursor:pointer;transition:.4s all ease;position:relative;box-sizing:border-box;width:100%}.option-container.half-width{width:calc(50% - 8px)}.option-container.selected{border:1px solid var(--Primary-Primary-500, #f49a3d);background-color:var(--Primary-Primary-50, #fef8f1)}.option-container:hover{border:1px solid var(--Primary-Primary-500, #f49a3d);transition:.4s all ease}.option-container .tag{padding:1px 8px;position:absolute;right:16px;top:13px;border-radius:var(--Border-5, 32px);background:var(--Success-Success-500, #0abb87);color:var(--White, #fff);font-size:12px;font-weight:500;line-height:16px;display:flex;justify-content:center;align-items:center}.options{display:flex;flex-wrap:wrap;gap:16px}.option{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.selection{display:flex;flex-direction:row;align-items:center}.radio{width:20px;height:20px;min-width:20px;min-height:20px;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:50%;border:2px solid var(--Gray-200, #c3c9d9);margin-right:var(--Size-3)}.radio .circle{border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);width:12px;height:12px}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.radio i{font-size:9px;font-weight:700}.img{width:48px;height:48px;border-radius:32px}.option-name{margin:0;color:var(--Gray-Gray-700)}.icons-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.icon{width:30px;height:30px;border-radius:50%;background-color:#f5f6f8;margin-left:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}.icon img{max-width:100%}.description{margin-bottom:0}.description p{margin:0;color:#525252;font-size:12px;line-height:16px}.item-table{display:flex;align-items:center;justify-content:space-between;padding-right:20px}.item-table div{margin:0;color:#495057;font-size:14px;line-height:20px}.item-table .item-table-value{font-weight:700}.search-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-100, #e6eaf2);background:var(--Gray-50, #f7f8fa);padding-left:var(--Size-3, 12px);margin-bottom:var(--Size-4, 16px)}.search-container .input-icon{display:flex;flex-direction:row;width:100%}.search-container .input-icon i{display:flex;justify-content:center;align-items:center}::ng-deep .search-container .p-inputtext{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent;margin-left:8px}::ng-deep .search-container .p-inputtext::placeholder{color:var(--Gray-500, #69738c);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}@media (max-width: 500px){.option{flex-direction:column;align-items:flex-start}.icons-container{margin-top:10px}.icon{margin-left:0;margin-right:5px}.description{padding-left:0}.option-container.half-width{width:100%}}.box{display:flex;align-items:center;gap:var(--Size-3, 12px);width:100%}.data-container{display:flex;flex-direction:column}.disabled{pointer-events:none;opacity:.5}.description-wrapper{display:flex;align-items:center;gap:8px}.description-wrapper.has-icons{margin-top:8px}.description-icons{display:flex;align-items:center;gap:4px}.description-icons img{width:auto;height:28px;object-fit:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RadioSelectionListComponent, isStandalone: true, selector: "app-radio-selection-list", inputs: { extraContent: "extraContent", withExtraContentId: "withExtraContentId", options: "options", typeLayout: "typeLayout", alwaysShowDescription: "alwaysShowDescription", selectedOption: "selectedOption", showFilter: "showFilter", filterPlaceholder: "filterPlaceholder", searchDelay: "searchDelay" }, outputs: { valueChange: "valueChange", onSearch: "onSearch" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"options-container\">\n  <div class=\"search-container\" *ngIf=\"showFilter\">\n    <span class=\"input-icon\">\n      <i class=\"pi pi-search\"></i>\n      <input\n        type=\"text\"\n        pInputText\n        [formControl]=\"searchControl\"\n        [placeholder]=\"filterPlaceholder\"\n      />\n    </span>\n  </div>\n\n  <div class=\"options\">\n    <ng-container *ngFor=\"let option of filteredOptions\">\n      <div\n        (click)=\"selectOption(option.id)\"\n        (keyup)=\"selectOption(option.id)\"\n        [ngClass]=\"{\n          selected: selectedOption === option.id,\n          'half-width': option.halfWidth!,\n          'full-width': !option.halfWidth,\n          disabled: option?.disabled\n        }\"\n        [id]=\"'option-' + option.id\"\n        class=\"option-container\"\n      >\n        <div class=\"option\">\n          <div class=\"selection\" [ngClass]=\"{ box: typeLayout === 'description' }\">\n            <div class=\"radio\" [ngClass]=\"{ selected: selectedOption === option.id }\">\n              <div class=\"circle\" *ngIf=\"selectedOption === option.id\"></div>\n            </div>\n            <div *ngIf=\"typeLayout !== 'description'\" class=\"data-container\">\n              <p *ngIf=\"typeLayout === 'default'\" class=\"option-name\">{{ option.name }}</p>\n              <div\n                class=\"description\"\n                *ngIf=\"\n                  option.description && (selectedOption === option.id || alwaysShowDescription)\n                \"\n              >\n                <p *ngIf=\"typeLayout !== 'description'\" [innerHTML]=\"option.description\"></p>\n              </div>\n            </div>\n\n            <ng-container *ngIf=\"typeLayout === 'description'\">\n              <img [src]=\"option.iconImages[0].url\" alt=\"img\" class=\"img\" />\n              <div class=\"Body-M-Regular\">\n                <div class=\"Body-M-Regular\">{{ option.name }}</div>\n                <div\n                  class=\"description-wrapper\"\n                  [ngClass]=\"{ 'has-icons': option.descriptionIcons?.length > 0 }\"\n                >\n                  <p class=\"description Body-S-Regular\" [innerHTML]=\"option.description\"></p>\n                  <div class=\"description-icons\" *ngIf=\"option.descriptionIcons?.length > 0\">\n                    <img\n                      *ngFor=\"let icon of option.descriptionIcons\"\n                      [src]=\"icon.url\"\n                      [alt]=\"icon.alt\"\n                    />\n                  </div>\n                </div>\n                <!-- <div\n                  class=\"description\"\n                  *ngIf=\"\n                    option.description && (selectedOption === option.id || alwaysShowDescription)\n                  \"\n                ></div> -->\n              </div>\n            </ng-container>\n          </div>\n          <div\n            class=\"icons-container\"\n            *ngIf=\"option?.iconImages?.length > 0 && typeLayout === 'default'\"\n          >\n            <div class=\"icon\" *ngFor=\"let icon of option.iconImages\">\n              <img [src]=\"icon.url\" [alt]=\"icon.alt\" />\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"table-contents description\"\n          *ngIf=\"\n            option.table?.length > 0 && (selectedOption === option.id || alwaysShowDescription)\n          \"\n        >\n          <div class=\"item-table\" *ngFor=\"let item of option.table\">\n            <div class=\"item-table-name\">{{ item.name }}</div>\n            <div class=\"item-table-value\">\n              {{ item.value }}\n              <!-- <currency\n            [value]=\"item.value\"\n            ></currency> -->\n            </div>\n          </div>\n        </div>\n\n        <div class=\"tag\" *ngIf=\"option.tag\">\n          {{ option.tag }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"option.id === withExtraContentId && extraContent\">\n        <ng-container *ngTemplateOutlet=\"extraContent\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".options-container{display:flex;flex-direction:column;gap:10px;color:var(--Text-text-paragraph, #7b8190);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.option-container{display:flex;border:1px solid var(--Gray-200, #c3c9d9);border-radius:8px;flex-direction:column;padding:var(--Size-4, 16px);cursor:pointer;transition:.4s all ease;position:relative;box-sizing:border-box;width:100%}.option-container.half-width{width:calc(50% - 8px)}.option-container.selected{border:1px solid var(--Primary-Primary-500, #f49a3d);background-color:var(--Primary-Primary-50, #fef8f1)}.option-container:hover{border:1px solid var(--Primary-Primary-500, #f49a3d);transition:.4s all ease}.option-container .tag{padding:1px 8px;position:absolute;right:16px;top:13px;border-radius:var(--Border-5, 32px);background:var(--Success-Success-500, #0abb87);color:var(--White, #fff);font-size:12px;font-weight:500;line-height:16px;display:flex;justify-content:center;align-items:center}.options{display:flex;flex-wrap:wrap;gap:16px}.option{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.selection{display:flex;flex-direction:row;align-items:center}.radio{width:20px;height:20px;min-width:20px;min-height:20px;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:50%;border:2px solid var(--Gray-200, #c3c9d9);margin-right:var(--Size-3)}.radio .circle{border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);width:12px;height:12px}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.radio i{font-size:9px;font-weight:700}.img{width:48px;height:48px;border-radius:32px}.option-name{margin:0;color:var(--Gray-Gray-700)}.icons-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.icon{width:30px;height:30px;border-radius:50%;background-color:#f5f6f8;margin-left:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}.icon img{max-width:100%}.description{margin-bottom:0}.description p{margin:0;color:#525252;font-size:12px;line-height:16px}.item-table{display:flex;align-items:center;justify-content:space-between;padding-right:20px}.item-table div{margin:0;color:#495057;font-size:14px;line-height:20px}.item-table .item-table-value{font-weight:700}.search-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-100, #e6eaf2);background:var(--Gray-50, #f7f8fa);padding-left:var(--Size-3, 12px);margin-bottom:var(--Size-4, 16px)}.search-container .input-icon{display:flex;flex-direction:row;width:100%}.search-container .input-icon i{display:flex;justify-content:center;align-items:center}::ng-deep .search-container .p-inputtext{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent;margin-left:8px}::ng-deep .search-container .p-inputtext::placeholder{color:var(--Gray-500, #69738c);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}@media (max-width: 500px){.option{flex-direction:column;align-items:flex-start}.icons-container{margin-top:10px}.icon{margin-left:0;margin-right:5px}.description{padding-left:0}.option-container.half-width{width:100%}}.box{display:flex;align-items:center;gap:var(--Size-3, 12px);width:100%}.data-container{display:flex;flex-direction:column}.disabled{pointer-events:none;opacity:.5}.description-wrapper{display:flex;align-items:center;gap:8px}.description-wrapper.has-icons{margin-top:8px}.description-icons{display:flex;align-items:center;gap:4px}.description-icons img{width:auto;height:28px;object-fit:contain}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-radio-selection-list", standalone: true, imports: [CommonModule, TranslateModule, ReactiveFormsModule], template: "<div class=\"options-container\">\n  <div class=\"search-container\" *ngIf=\"showFilter\">\n    <span class=\"input-icon\">\n      <i class=\"pi pi-search\"></i>\n      <input\n        type=\"text\"\n        pInputText\n        [formControl]=\"searchControl\"\n        [placeholder]=\"filterPlaceholder\"\n      />\n    </span>\n  </div>\n\n  <div class=\"options\">\n    <ng-container *ngFor=\"let option of filteredOptions\">\n      <div\n        (click)=\"selectOption(option.id)\"\n        (keyup)=\"selectOption(option.id)\"\n        [ngClass]=\"{\n          selected: selectedOption === option.id,\n          'half-width': option.halfWidth!,\n          'full-width': !option.halfWidth,\n          disabled: option?.disabled\n        }\"\n        [id]=\"'option-' + option.id\"\n        class=\"option-container\"\n      >\n        <div class=\"option\">\n          <div class=\"selection\" [ngClass]=\"{ box: typeLayout === 'description' }\">\n            <div class=\"radio\" [ngClass]=\"{ selected: selectedOption === option.id }\">\n              <div class=\"circle\" *ngIf=\"selectedOption === option.id\"></div>\n            </div>\n            <div *ngIf=\"typeLayout !== 'description'\" class=\"data-container\">\n              <p *ngIf=\"typeLayout === 'default'\" class=\"option-name\">{{ option.name }}</p>\n              <div\n                class=\"description\"\n                *ngIf=\"\n                  option.description && (selectedOption === option.id || alwaysShowDescription)\n                \"\n              >\n                <p *ngIf=\"typeLayout !== 'description'\" [innerHTML]=\"option.description\"></p>\n              </div>\n            </div>\n\n            <ng-container *ngIf=\"typeLayout === 'description'\">\n              <img [src]=\"option.iconImages[0].url\" alt=\"img\" class=\"img\" />\n              <div class=\"Body-M-Regular\">\n                <div class=\"Body-M-Regular\">{{ option.name }}</div>\n                <div\n                  class=\"description-wrapper\"\n                  [ngClass]=\"{ 'has-icons': option.descriptionIcons?.length > 0 }\"\n                >\n                  <p class=\"description Body-S-Regular\" [innerHTML]=\"option.description\"></p>\n                  <div class=\"description-icons\" *ngIf=\"option.descriptionIcons?.length > 0\">\n                    <img\n                      *ngFor=\"let icon of option.descriptionIcons\"\n                      [src]=\"icon.url\"\n                      [alt]=\"icon.alt\"\n                    />\n                  </div>\n                </div>\n                <!-- <div\n                  class=\"description\"\n                  *ngIf=\"\n                    option.description && (selectedOption === option.id || alwaysShowDescription)\n                  \"\n                ></div> -->\n              </div>\n            </ng-container>\n          </div>\n          <div\n            class=\"icons-container\"\n            *ngIf=\"option?.iconImages?.length > 0 && typeLayout === 'default'\"\n          >\n            <div class=\"icon\" *ngFor=\"let icon of option.iconImages\">\n              <img [src]=\"icon.url\" [alt]=\"icon.alt\" />\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"table-contents description\"\n          *ngIf=\"\n            option.table?.length > 0 && (selectedOption === option.id || alwaysShowDescription)\n          \"\n        >\n          <div class=\"item-table\" *ngFor=\"let item of option.table\">\n            <div class=\"item-table-name\">{{ item.name }}</div>\n            <div class=\"item-table-value\">\n              {{ item.value }}\n              <!-- <currency\n            [value]=\"item.value\"\n            ></currency> -->\n            </div>\n          </div>\n        </div>\n\n        <div class=\"tag\" *ngIf=\"option.tag\">\n          {{ option.tag }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"option.id === withExtraContentId && extraContent\">\n        <ng-container *ngTemplateOutlet=\"extraContent\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".options-container{display:flex;flex-direction:column;gap:10px;color:var(--Text-text-paragraph, #7b8190);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.option-container{display:flex;border:1px solid var(--Gray-200, #c3c9d9);border-radius:8px;flex-direction:column;padding:var(--Size-4, 16px);cursor:pointer;transition:.4s all ease;position:relative;box-sizing:border-box;width:100%}.option-container.half-width{width:calc(50% - 8px)}.option-container.selected{border:1px solid var(--Primary-Primary-500, #f49a3d);background-color:var(--Primary-Primary-50, #fef8f1)}.option-container:hover{border:1px solid var(--Primary-Primary-500, #f49a3d);transition:.4s all ease}.option-container .tag{padding:1px 8px;position:absolute;right:16px;top:13px;border-radius:var(--Border-5, 32px);background:var(--Success-Success-500, #0abb87);color:var(--White, #fff);font-size:12px;font-weight:500;line-height:16px;display:flex;justify-content:center;align-items:center}.options{display:flex;flex-wrap:wrap;gap:16px}.option{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.selection{display:flex;flex-direction:row;align-items:center}.radio{width:20px;height:20px;min-width:20px;min-height:20px;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:50%;border:2px solid var(--Gray-200, #c3c9d9);margin-right:var(--Size-3)}.radio .circle{border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);width:12px;height:12px}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.radio i{font-size:9px;font-weight:700}.img{width:48px;height:48px;border-radius:32px}.option-name{margin:0;color:var(--Gray-Gray-700)}.icons-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.icon{width:30px;height:30px;border-radius:50%;background-color:#f5f6f8;margin-left:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}.icon img{max-width:100%}.description{margin-bottom:0}.description p{margin:0;color:#525252;font-size:12px;line-height:16px}.item-table{display:flex;align-items:center;justify-content:space-between;padding-right:20px}.item-table div{margin:0;color:#495057;font-size:14px;line-height:20px}.item-table .item-table-value{font-weight:700}.search-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;border-radius:8px;border:1px solid var(--Gray-100, #e6eaf2);background:var(--Gray-50, #f7f8fa);padding-left:var(--Size-3, 12px);margin-bottom:var(--Size-4, 16px)}.search-container .input-icon{display:flex;flex-direction:row;width:100%}.search-container .input-icon i{display:flex;justify-content:center;align-items:center}::ng-deep .search-container .p-inputtext{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent;margin-left:8px}::ng-deep .search-container .p-inputtext::placeholder{color:var(--Gray-500, #69738c);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}@media (max-width: 500px){.option{flex-direction:column;align-items:flex-start}.icons-container{margin-top:10px}.icon{margin-left:0;margin-right:5px}.description{padding-left:0}.option-container.half-width{width:100%}}.box{display:flex;align-items:center;gap:var(--Size-3, 12px);width:100%}.data-container{display:flex;flex-direction:column}.disabled{pointer-events:none;opacity:.5}.description-wrapper{display:flex;align-items:center;gap:8px}.description-wrapper.has-icons{margin-top:8px}.description-icons{display:flex;align-items:center;gap:4px}.description-icons img{width:auto;height:28px;object-fit:contain}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.TranslateService, decorators: [{
+        }], ctorParameters: () => [{ type: i2.TranslateService, decorators: [{
                     type: Inject,
                     args: [TranslateService]
                 }] }], propDecorators: { extraContent: [{
@@ -2027,12 +2056,12 @@ class CheckboxSelectionListComponent {
         this.searchControl.setValue("");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxSelectionListComponent, deps: [{ token: TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckboxSelectionListComponent, isStandalone: true, selector: "app-checkbox-selection-list", inputs: { options: "options", showFilter: "showFilter", filterPlaceholder: "filterPlaceholder", showNotFound: "showNotFound", notFoundMessage: "notFoundMessage", searchDelay: "searchDelay" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"checkbox-selection-list\">\n  <div class=\"filter-container\" *ngIf=\"showFilter\">\n    <span class=\"input-icon\">\n      <i class=\"pi pi-search\"></i>\n      <input\n        data-cy=\"checkbox-selection-search-input\"\n        type=\"text\"\n        class=\"search-input\"\n        [formControl]=\"searchControl\"\n        [placeholder]=\"filterPlaceholder\"\n      />\n    </span>\n    <button *ngIf=\"searchControl.value.length > 0\" (click)=\"clearSearchInput()\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  </div>\n\n  <div class=\"selection-list\">\n    <div class=\"selection-item\" *ngFor=\"let option of filteredOptions\">\n      <div class=\"checkbox-item\">\n        <app-dropi-checkbox \n          [checked]=\"option.checked\"\n          (onChange)=\"toggleSelection($event, option)\" \n          [attr.data-cy]=\"'checkbox-selection-' + option.id\"\n        />\n        <img *ngIf=\"option.preIcon\" [src]=\"option.preIcon\" [alt]=\"option.label\" />\n        <span>{{ option.label | translate}}</span>\n      </div>\n    </div>\n \n    <div *ngIf=\"showNotFound && (!filteredOptions || filteredOptions.length === 0)\" class=\"empty-container\">\n      <div class=\"empty\" data-cy=\"checkbox-selection-empty\">\n        <img src=\"\\assets\\utils\\logo-dropi-img-loader.png\" alt=\"Not-found\" />\n        <span>{{ notFoundMessage }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".filter-container{display:flex;height:37px;padding:var(--Size-3, 12px);justify-content:space-between;align-items:center;border-radius:8px;border:1px solid var(--Gray-100, #E6EAF2);background:var(--Gray-50, #F7F8FA)}.filter-container .input-icon{display:flex;align-items:center;flex-direction:row;width:100%}.filter-container .input-icon i{margin-right:8px}.filter-container .search-input{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent}.filter-container .search-input::placeholder{color:var(--Gray-500, #69738C);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}.filter-container button{border:none;background-color:transparent;color:var(--Gray-600, #475066);padding:0}.filter-container button i{font-size:13px}.selection-list{max-height:230px;overflow-y:auto}.selection-item{display:flex;padding:var(--Size-3, 12px) var(--Size-4, 16px);align-items:center;gap:12px;align-self:stretch}.selection-item .checkbox-item{display:flex;align-items:center;gap:var(--Size-3, 12px)}.selection-item .checkbox-item img{border-radius:50%;width:20px;height:20px}.selection-item .checkbox-item span{color:var(--Gray-600, #475066);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}.empty-container{display:flex;justify-content:center;align-items:center;height:230px;width:100%}.empty-container .empty{display:flex;flex-direction:column;align-items:center;gap:12px}.empty-container .empty img{width:63.75px;height:60px}.empty-container .empty span{color:var(--Gray-500, #69738C);text-align:center;font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}:host ::ng-deep .filter-container .p-inputtext{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent}:host ::ng-deep .filter-container .p-inputtext::placeholder{color:var(--Gray-500, #69738C);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}:host ::ng-deep .filter-container .p-component{border:none;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckboxSelectionListComponent, isStandalone: true, selector: "app-checkbox-selection-list", inputs: { options: "options", showFilter: "showFilter", filterPlaceholder: "filterPlaceholder", showNotFound: "showNotFound", notFoundMessage: "notFoundMessage", searchDelay: "searchDelay" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"checkbox-selection-list\">\n  <div class=\"filter-container\" *ngIf=\"showFilter\">\n    <span class=\"input-icon\">\n      <i class=\"pi pi-search\"></i>\n      <input\n        data-cy=\"checkbox-selection-search-input\"\n        type=\"text\"\n        class=\"search-input\"\n        [formControl]=\"searchControl\"\n        [placeholder]=\"filterPlaceholder\"\n      />\n    </span>\n    <button *ngIf=\"searchControl.value.length > 0\" (click)=\"clearSearchInput()\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  </div>\n\n  <div class=\"selection-list\">\n    <div class=\"selection-item\" *ngFor=\"let option of filteredOptions\">\n      <div class=\"checkbox-item\">\n        <app-dropi-checkbox \n          [checked]=\"option.checked\"\n          (onChange)=\"toggleSelection($event, option)\" \n          [attr.data-cy]=\"'checkbox-selection-' + option.id\"\n        />\n        <img *ngIf=\"option.preIcon\" [src]=\"option.preIcon\" [alt]=\"option.label\" />\n        <span>{{ option.label | translate}}</span>\n      </div>\n    </div>\n \n    <div *ngIf=\"showNotFound && (!filteredOptions || filteredOptions.length === 0)\" class=\"empty-container\">\n      <div class=\"empty\" data-cy=\"checkbox-selection-empty\">\n        <img src=\"\\assets\\utils\\logo-dropi-img-loader.png\" alt=\"Not-found\" />\n        <span>{{ notFoundMessage }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".filter-container{display:flex;height:37px;padding:var(--Size-3, 12px);justify-content:space-between;align-items:center;border-radius:8px;border:1px solid var(--Gray-100, #E6EAF2);background:var(--Gray-50, #F7F8FA)}.filter-container .input-icon{display:flex;align-items:center;flex-direction:row;width:100%}.filter-container .input-icon i{margin-right:8px}.filter-container .search-input{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent}.filter-container .search-input::placeholder{color:var(--Gray-500, #69738C);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}.filter-container button{border:none;background-color:transparent;color:var(--Gray-600, #475066);padding:0}.filter-container button i{font-size:13px}.selection-list{max-height:230px;overflow-y:auto}.selection-item{display:flex;padding:var(--Size-3, 12px) var(--Size-4, 16px);align-items:center;gap:12px;align-self:stretch}.selection-item .checkbox-item{display:flex;align-items:center;gap:var(--Size-3, 12px)}.selection-item .checkbox-item img{border-radius:50%;width:20px;height:20px}.selection-item .checkbox-item span{color:var(--Gray-600, #475066);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}.empty-container{display:flex;justify-content:center;align-items:center;height:230px;width:100%}.empty-container .empty{display:flex;flex-direction:column;align-items:center;gap:12px}.empty-container .empty img{width:63.75px;height:60px}.empty-container .empty span{color:var(--Gray-500, #69738C);text-align:center;font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}:host ::ng-deep .filter-container .p-inputtext{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent}:host ::ng-deep .filter-container .p-inputtext::placeholder{color:var(--Gray-500, #69738C);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}:host ::ng-deep .filter-container .p-component{border:none;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxSelectionListComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-checkbox-selection-list", standalone: true, imports: [CommonModule, TranslateModule, ReactiveFormsModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"checkbox-selection-list\">\n  <div class=\"filter-container\" *ngIf=\"showFilter\">\n    <span class=\"input-icon\">\n      <i class=\"pi pi-search\"></i>\n      <input\n        data-cy=\"checkbox-selection-search-input\"\n        type=\"text\"\n        class=\"search-input\"\n        [formControl]=\"searchControl\"\n        [placeholder]=\"filterPlaceholder\"\n      />\n    </span>\n    <button *ngIf=\"searchControl.value.length > 0\" (click)=\"clearSearchInput()\">\n      <i class=\"pi pi-times\"></i>\n    </button>\n  </div>\n\n  <div class=\"selection-list\">\n    <div class=\"selection-item\" *ngFor=\"let option of filteredOptions\">\n      <div class=\"checkbox-item\">\n        <app-dropi-checkbox \n          [checked]=\"option.checked\"\n          (onChange)=\"toggleSelection($event, option)\" \n          [attr.data-cy]=\"'checkbox-selection-' + option.id\"\n        />\n        <img *ngIf=\"option.preIcon\" [src]=\"option.preIcon\" [alt]=\"option.label\" />\n        <span>{{ option.label | translate}}</span>\n      </div>\n    </div>\n \n    <div *ngIf=\"showNotFound && (!filteredOptions || filteredOptions.length === 0)\" class=\"empty-container\">\n      <div class=\"empty\" data-cy=\"checkbox-selection-empty\">\n        <img src=\"\\assets\\utils\\logo-dropi-img-loader.png\" alt=\"Not-found\" />\n        <span>{{ notFoundMessage }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".filter-container{display:flex;height:37px;padding:var(--Size-3, 12px);justify-content:space-between;align-items:center;border-radius:8px;border:1px solid var(--Gray-100, #E6EAF2);background:var(--Gray-50, #F7F8FA)}.filter-container .input-icon{display:flex;align-items:center;flex-direction:row;width:100%}.filter-container .input-icon i{margin-right:8px}.filter-container .search-input{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent}.filter-container .search-input::placeholder{color:var(--Gray-500, #69738C);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}.filter-container button{border:none;background-color:transparent;color:var(--Gray-600, #475066);padding:0}.filter-container button i{font-size:13px}.selection-list{max-height:230px;overflow-y:auto}.selection-item{display:flex;padding:var(--Size-3, 12px) var(--Size-4, 16px);align-items:center;gap:12px;align-self:stretch}.selection-item .checkbox-item{display:flex;align-items:center;gap:var(--Size-3, 12px)}.selection-item .checkbox-item img{border-radius:50%;width:20px;height:20px}.selection-item .checkbox-item span{color:var(--Gray-600, #475066);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}.empty-container{display:flex;justify-content:center;align-items:center;height:230px;width:100%}.empty-container .empty{display:flex;flex-direction:column;align-items:center;gap:12px}.empty-container .empty img{width:63.75px;height:60px}.empty-container .empty span{color:var(--Gray-500, #69738C);text-align:center;font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}:host ::ng-deep .filter-container .p-inputtext{width:100%;text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:150%;border:none;padding:9px 0;background-color:transparent}:host ::ng-deep .filter-container .p-inputtext::placeholder{color:var(--Gray-500, #69738C);font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:150%}:host ::ng-deep .filter-container .p-component{border:none;background-color:transparent}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.TranslateService, decorators: [{
+        }], ctorParameters: () => [{ type: i2.TranslateService, decorators: [{
                     type: Inject,
                     args: [TranslateService]
                 }] }], propDecorators: { options: [{
@@ -2338,7 +2367,7 @@ class SpinnerComponent {
     constructor() { }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { loading: "loading" }, ngImport: i0, template: "<div class=\"text-center loader-text\">\n  <a *ngIf=\"loading\" href=\"javascript:void(0);\" class=\"text-primary\"\n    ><i class=\"mdi mdi-loading mdi-spin font-size-20 align-middle me-2\"></i>\n    {{ 'Loading' | translate }} ...\n  </a>\n</div>\n", styles: [".loader-text{background:#fff;max-width:fit-content;border-radius:30px;display:flex;align-items:center;padding:0 10px;margin:0 auto 20px}.loader-text a,.loader-text i{color:#74788d!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", inputs: { loading: "loading" }, ngImport: i0, template: "<div class=\"text-center loader-text\">\n  <a *ngIf=\"loading\" href=\"javascript:void(0);\" class=\"text-primary\"\n    ><i class=\"mdi mdi-loading mdi-spin font-size-20 align-middle me-2\"></i>\n    {{ 'Loading' | translate }} ...\n  </a>\n</div>\n", styles: [".loader-text{background:#fff;max-width:fit-content;border-radius:30px;display:flex;align-items:center;padding:0 10px;margin:0 auto 20px}.loader-text a,.loader-text i{color:#74788d!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
@@ -2504,7 +2533,7 @@ class ReadMoreComponent {
         this.truncatedText = this.truncateText();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ReadMoreComponent, isStandalone: true, selector: "app-read-more", inputs: { text: "text", maxWords: "maxWords", textStyle: "textStyle", buttonStyle: "buttonStyle", showSeeLess: "showSeeLess" }, ngImport: i0, template: "<div class=\"description-container\">\n  <p class=\"text\" [style]=\"textStyle\">\n    {{ truncatedText }}\n    <a\n      href=\"javascript:void(0);\"\n      *ngIf=\"text?.split(' ')?.length > maxWords && (showSeeLess || !isExpanded)\"\n      (click)=\"toggleExpanded()\"\n      class=\"toggle-button\"\n      [style]=\"buttonStyle\"\n    >\n      {{ isExpanded ? 'Show less' : 'Show more' | translate }}\n    </a>\n  </p>\n</div>", styles: [".description-container{font-family:Inter,sans-serif}.text{margin:0}.toggle-button{color:var(--Gray-gray-800, #585C65);font-size:12px;font-style:normal;font-weight:700;line-height:16px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ReadMoreComponent, isStandalone: true, selector: "app-read-more", inputs: { text: "text", maxWords: "maxWords", textStyle: "textStyle", buttonStyle: "buttonStyle", showSeeLess: "showSeeLess" }, ngImport: i0, template: "<div class=\"description-container\">\n  <p class=\"text\" [style]=\"textStyle\">\n    {{ truncatedText }}\n    <a\n      href=\"javascript:void(0);\"\n      *ngIf=\"text?.split(' ')?.length > maxWords && (showSeeLess || !isExpanded)\"\n      (click)=\"toggleExpanded()\"\n      class=\"toggle-button\"\n      [style]=\"buttonStyle\"\n    >\n      {{ isExpanded ? 'Show less' : 'Show more' | translate }}\n    </a>\n  </p>\n</div>", styles: [".description-container{font-family:Inter,sans-serif}.text{margin:0}.toggle-button{color:var(--Gray-gray-800, #585C65);font-size:12px;font-style:normal;font-weight:700;line-height:16px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadMoreComponent, decorators: [{
             type: Component,
@@ -2526,7 +2555,7 @@ class EmptyComponent {
     constructor() { }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmptyComponent, isStandalone: true, selector: "app-empty", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"text-center mt-5\">\n  {{ text | translate }}\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmptyComponent, isStandalone: true, selector: "app-empty", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"text-center mt-5\">\n  {{ text | translate }}\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyComponent, decorators: [{
             type: Component,
@@ -2652,7 +2681,7 @@ class InputComponent {
         return "";
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { inputProperties: "inputProperties", disabled: "disabled", showObligatoryAsterisk: "showObligatoryAsterisk", showPassword: "showPassword", fixedLabel: "fixedLabel", showAsterisk: "showAsterisk" }, ngImport: i0, template: "<div\n  class=\"dropi-input-container\"\n  [ngClass]=\"{\n    'dropi-input--error':\n      inputProperties.formControl.invalid &&\n      inputProperties.formControl.touched,\n    'dropi-input--disabled': disabled || inputProperties.formControl.disabled,\n    'dropi-input--with-icon-right':\n      inputProperties.icon && inputProperties.iconPos === 'right',\n    'dropi-input--with-icon-left':\n      inputProperties.icon && inputProperties.iconPos === 'left',\n  }\"\n>\n  <div class=\"input-wrapper\">\n    <div\n      class=\"icon-container left\"\n      *ngIf=\"inputProperties.icon && inputProperties.iconPos === 'left'\"\n    >\n      <app-icon\n        [name]=\"inputProperties.icon\"\n        width=\"20px\"\n        height=\"20px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <div class=\"input-field-wrapper\">\n      <input\n        [type]=\"showPassword ? 'text' : inputProperties.type || 'text'\"\n        class=\"dropi-input Body-M-Regular\"\n        [ngClass]=\"{\n          'text-password': inputProperties.isPasswordInput && !showPassword,\n          'fixed-label-input': fixedLabel,\n        }\"\n        [id]=\"inputProperties.id ? inputProperties.id : inputProperties.label\"\n        [attr.data-cy]=\"inputProperties.dataCy\"\n        [formControl]=\"inputProperties.formControl\"\n        [placeholder]=\"inputProperties.placeholder | translate\"\n        [maxlength]=\"inputProperties.maxLength\"\n        [attr.inputmode]=\"inputProperties.inputMode || 'text'\"\n        [disabled]=\"disabled || inputProperties.formControl.disabled\"\n        appThousandSeparator\n        [applyFormat]=\"\n          !!(\n            inputProperties?.isMoneyInput ||\n            inputProperties?.isThousandSeparator\n          )\n        \"\n        appOnlyNumbers\n        [showCurrency]=\"!!inputProperties?.isMoneyInput\"\n        [applyOnlyNumbers]=\"!!inputProperties?.isNumericInput\"\n        appOnlyLetters\n        [applyOnlyLetters]=\"!!inputProperties?.isLettersOnly\"\n      />\n\n      <label\n        class=\"Body-S-Regular label-bottom\"\n        *ngIf=\"!fixedLabel\"\n        [for]=\"inputProperties.label\"\n        >{{ inputProperties.label | translate }}\n        <span\n          class=\"asterisk\"\n          *ngIf=\"\n            isRequired() &&\n            showAsterisk &&\n            (!disabled || !inputProperties.formControl.disabled)\n          \"\n          >*</span\n        >\n      </label>\n    </div>\n\n    <div\n      class=\"icon-container right\"\n      *ngIf=\"inputProperties.icon && inputProperties.iconPos === 'right'\"\n    >\n      <app-icon\n        [name]=\"inputProperties.icon\"\n        width=\"20px\"\n        height=\"20px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <div\n      class=\"icon-container right password-toggle\"\n      *ngIf=\"inputProperties.type === 'password'\"\n    >\n      <app-icon\n        [name]=\"showPassword ? 'Visibility-off' : 'Visibility'\"\n        width=\"20px\"\n        height=\"20px\"\n        color=\"Gray-Gray-500\"\n        (click)=\"showOrHidePassword()\"\n      ></app-icon>\n    </div>\n  </div>\n\n  <div\n    class=\"helper-text-container\"\n    *ngIf=\"\n      inputProperties.textHelper &&\n      (!inputProperties.showHelperOnlyOnError ||\n        (inputProperties.formControl.invalid &&\n          inputProperties.formControl.touched))\n    \"\n  >\n    <span class=\"helper-text Label-S-Regular\">{{\n      (getErrorMessage() | translate) ||\n        (inputProperties.textHelper | translate)\n    }}</span>\n  </div>\n</div>\n", styles: [".form-group{position:relative;width:100%}.form-group .icon-input{position:absolute;top:8px;left:5px}.form-group .icon-input-password{position:absolute;top:8px;right:13px;cursor:pointer}.input-container{position:relative}.form-control{width:100%;padding:var(--Size-2);border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);font-size:var(--font-size-s);transition:border-color .3s ease-in-out;height:40px}.padding-icon{padding-left:28px}.form-control-helper{display:flex;gap:4px;align-items:baseline}.form-control-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.text-password{-webkit-text-security:disc}.form-control:focus::placeholder{color:var(--Gray-Gray-500)}.form-control:focus{border-color:var(--Info-Info-500)!important;outline:none}.form-control-valid{border:1px solid var(--Gray-Gray-400)!important;color:var(--Gray-Gray-600);outline:none}.form-control-invalid{border:1px solid var(--Error-Error-500)!important;color:var(--Gray-Gray-600);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200)!important;color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);outline:none}.fixed-label{position:relative;top:0;left:0;margin-bottom:8px;font-size:var(--font-size-xs);width:unset;color:var(--Gray-Gray-600)}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular);top:10px;font-size:var(--font-size-s);color:var(--Gray-Gray-500);left:10px;transition:all .2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}label.label-bottom span{color:var(--Error-Error-500)}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label{top:-28px;left:0;margin-bottom:8px;font-size:var(--font-size-xs);width:unset;color:var(--Gray-Gray-600)}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-500)}.form-control:disabled+label.label-bottom+.form-control-helper{color:var(--Gray-Gray-500)}.form-control:not(:focus):not(.fixed-label-input)::placeholder{color:transparent;transition:all .2s ease-in-out}.invalid-color{color:var(--Error-Error-500)!important}.disabled-helper{color:var(--Gray-Gray-500)!important}.fixed-label-container{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.input-label{color:var(--Gray-Gray-600, #475066)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "directive", type: ThousandSeparatorDirectiveStub, selector: "[appThousandSeparator]", inputs: ["applyFormat", "showCurrency"] }, { kind: "directive", type: OnlyNumbersDirectiveStub, selector: "[appOnlyNumbers]", inputs: ["applyOnlyNumbers"] }, { kind: "directive", type: OnlyLettersDirectiveStub, selector: "[appOnlyLetters]", inputs: ["applyOnlyLetters"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { inputProperties: "inputProperties", disabled: "disabled", showObligatoryAsterisk: "showObligatoryAsterisk", showPassword: "showPassword", fixedLabel: "fixedLabel", showAsterisk: "showAsterisk" }, ngImport: i0, template: "<div\n  class=\"dropi-input-container\"\n  [ngClass]=\"{\n    'dropi-input--error':\n      inputProperties.formControl.invalid &&\n      inputProperties.formControl.touched,\n    'dropi-input--disabled': disabled || inputProperties.formControl.disabled,\n    'dropi-input--with-icon-right':\n      inputProperties.icon && inputProperties.iconPos === 'right',\n    'dropi-input--with-icon-left':\n      inputProperties.icon && inputProperties.iconPos === 'left',\n  }\"\n>\n  <div class=\"input-wrapper\">\n    <div\n      class=\"icon-container left\"\n      *ngIf=\"inputProperties.icon && inputProperties.iconPos === 'left'\"\n    >\n      <app-icon\n        [name]=\"inputProperties.icon\"\n        width=\"20px\"\n        height=\"20px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <div class=\"input-field-wrapper\">\n      <input\n        [type]=\"showPassword ? 'text' : inputProperties.type || 'text'\"\n        class=\"dropi-input Body-M-Regular\"\n        [ngClass]=\"{\n          'text-password': inputProperties.isPasswordInput && !showPassword,\n          'fixed-label-input': fixedLabel,\n        }\"\n        [id]=\"inputProperties.id ? inputProperties.id : inputProperties.label\"\n        [attr.data-cy]=\"inputProperties.dataCy\"\n        [formControl]=\"inputProperties.formControl\"\n        [placeholder]=\"inputProperties.placeholder | translate\"\n        [maxlength]=\"inputProperties.maxLength\"\n        [attr.inputmode]=\"inputProperties.inputMode || 'text'\"\n        [disabled]=\"disabled || inputProperties.formControl.disabled\"\n        appThousandSeparator\n        [applyFormat]=\"\n          !!(\n            inputProperties?.isMoneyInput ||\n            inputProperties?.isThousandSeparator\n          )\n        \"\n        appOnlyNumbers\n        [showCurrency]=\"!!inputProperties?.isMoneyInput\"\n        [applyOnlyNumbers]=\"!!inputProperties?.isNumericInput\"\n        appOnlyLetters\n        [applyOnlyLetters]=\"!!inputProperties?.isLettersOnly\"\n      />\n\n      <label\n        class=\"Body-S-Regular label-bottom\"\n        *ngIf=\"!fixedLabel\"\n        [for]=\"inputProperties.label\"\n        >{{ inputProperties.label | translate }}\n        <span\n          class=\"asterisk\"\n          *ngIf=\"\n            isRequired() &&\n            showAsterisk &&\n            (!disabled || !inputProperties.formControl.disabled)\n          \"\n          >*</span\n        >\n      </label>\n    </div>\n\n    <div\n      class=\"icon-container right\"\n      *ngIf=\"inputProperties.icon && inputProperties.iconPos === 'right'\"\n    >\n      <app-icon\n        [name]=\"inputProperties.icon\"\n        width=\"20px\"\n        height=\"20px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n    </div>\n\n    <div\n      class=\"icon-container right password-toggle\"\n      *ngIf=\"inputProperties.type === 'password'\"\n    >\n      <app-icon\n        [name]=\"showPassword ? 'Visibility-off' : 'Visibility'\"\n        width=\"20px\"\n        height=\"20px\"\n        color=\"Gray-Gray-500\"\n        (click)=\"showOrHidePassword()\"\n      ></app-icon>\n    </div>\n  </div>\n\n  <div\n    class=\"helper-text-container\"\n    *ngIf=\"\n      inputProperties.textHelper &&\n      (!inputProperties.showHelperOnlyOnError ||\n        (inputProperties.formControl.invalid &&\n          inputProperties.formControl.touched))\n    \"\n  >\n    <span class=\"helper-text Label-S-Regular\">{{\n      (getErrorMessage() | translate) ||\n        (inputProperties.textHelper | translate)\n    }}</span>\n  </div>\n</div>\n", styles: [".form-group{position:relative;width:100%}.form-group .icon-input{position:absolute;top:8px;left:5px}.form-group .icon-input-password{position:absolute;top:8px;right:13px;cursor:pointer}.input-container{position:relative}.form-control{width:100%;padding:var(--Size-2);border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);font-size:var(--font-size-s);transition:border-color .3s ease-in-out;height:40px}.padding-icon{padding-left:28px}.form-control-helper{display:flex;gap:4px;align-items:baseline}.form-control-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.text-password{-webkit-text-security:disc}.form-control:focus::placeholder{color:var(--Gray-Gray-500)}.form-control:focus{border-color:var(--Info-Info-500)!important;outline:none}.form-control-valid{border:1px solid var(--Gray-Gray-400)!important;color:var(--Gray-Gray-600);outline:none}.form-control-invalid{border:1px solid var(--Error-Error-500)!important;color:var(--Gray-Gray-600);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200)!important;color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);outline:none}.fixed-label{position:relative;top:0;left:0;margin-bottom:8px;font-size:var(--font-size-xs);width:unset;color:var(--Gray-Gray-600)}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular);top:10px;font-size:var(--font-size-s);color:var(--Gray-Gray-500);left:10px;transition:all .2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}label.label-bottom span{color:var(--Error-Error-500)}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label{top:-28px;left:0;margin-bottom:8px;font-size:var(--font-size-xs);width:unset;color:var(--Gray-Gray-600)}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-500)}.form-control:disabled+label.label-bottom+.form-control-helper{color:var(--Gray-Gray-500)}.form-control:not(:focus):not(.fixed-label-input)::placeholder{color:transparent;transition:all .2s ease-in-out}.invalid-color{color:var(--Error-Error-500)!important}.disabled-helper{color:var(--Gray-Gray-500)!important}.fixed-label-container{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.input-label{color:var(--Gray-Gray-600, #475066)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: ThousandSeparatorDirectiveStub, selector: "[appThousandSeparator]", inputs: ["applyFormat", "showCurrency"] }, { kind: "directive", type: OnlyNumbersDirectiveStub, selector: "[appOnlyNumbers]", inputs: ["applyOnlyNumbers"] }, { kind: "directive", type: OnlyLettersDirectiveStub, selector: "[appOnlyLetters]", inputs: ["applyOnlyLetters"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -2832,7 +2861,7 @@ class OtpSendCodeComponent {
                 useExisting: OtpSendCodeComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEls", predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"mb-4 custom-alert\" *ngIf=\"typeBadge == 1\">\n  <app-alert\n    [message]=\"'prueba'\"\n    [type]=\"'default'\"\n    [state]=\"paramsAlert.state\"\n    [dismissable]=\"true\"\n    [showButton]=\"false\"\n    [buttonText]=\"'Cerrar'\"\n    [showAlert]=\"paramsAlert.show\"\n  ></app-alert>\n</div>\n\n<div class=\"mb-4\" *ngIf=\"typeBadge == 2\">\n  <dropi-alert-legacy\n    [visible]=\"paramsAlert.show\"\n    [type]=\"paramsAlert.state\"\n    [message]=\"paramsAlert.message\"\n    [autoClose]=\"true\"\n  ></dropi-alert-legacy>\n</div>\n\n<div\n  class=\"body-modal\"\n  *ngIf=\"\n    (engine === 'email' || engine === 'sms') &&\n    showLabelSendContact &&\n    typeLabelContact == 1 &&\n    paramsAlert.show &&\n    paramsAlert.state == 'success'\n  \"\n>\n  <div class=\"options\">\n    <h6>\n      {{ (engine === 'email' ? 'Email Validation' : 'SMS Validation') | translate }}\n    </h6>\n    <div class=\"text-top\">\n      <p>\n        {{\n          (engine === 'email'\n            ? 'Enter the code that was sent to your email'\n            : 'Enter the code that was sent to your phone number'\n          ) | translate\n        }}\n        {{ labelContact }}\n      </p>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"engine === '2fa'\">\n  <h5>\n    {{ 'Two factor authentication' | translate }}\n  </h5>\n\n  <label class=\"Body-M-Regular\"\n    >Ingresa los seis d\u00EDgitos que genera tu app de autenticaci\u00F3n de dos<br />\n    factores para continuar.</label\n  >\n</div>\n\n<div\n  *ngIf=\"\n    showLabelSendContact &&\n    typeLabelContact == 2 &&\n    paramsAlert.show &&\n    paramsAlert.state == 'success'\n  \"\n  class=\"mt-4 mb-4 text-left\"\n>\n  <label\n    >{{\n      'we sent you a code' | translate: { typeContact: typeContact, labelContact: labelContact }\n    }}\n  </label>\n  <label>{{ 'write it here to continue' | translate }}</label>\n</div>\n\n<div class=\"Body-S-Regular text-center\">{{ 'enter the code' | translate }}</div>\n\n<div class=\"container-otp mt-2\" [ngClass]=\"{ error: failedValidation }\">\n  <input\n    class=\"otp-input\"\n    #inputEl\n    *ngFor=\"let input of inputs.controls; let i = index\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"onTouched?.()\"\n    (keypress)=\"handleKeyPress($event, i)\"\n    (input)=\"handleInput($event, i)\"\n    (keydown)=\"handleKeyDown($event, i)\"\n    (paste)=\"handlePaste($event, i)\"\n    [formControl]=\"$any(input)\"\n    [attr.autocomplete]=\"i === 0 ? 'one-time-code' : null\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    [ngClass]=\"{ success: input.value && isNumeric(input.value) }\"\n  />\n</div>\n\n<div class=\"container-failed\" *ngIf=\"failedValidation\">\n  <app-icon name=\"Cross-circle\" width=\"18px\" height=\"19px\" color=\"Error-Error-500\"></app-icon>\n  <span class=\"Body-S-Regular error pt-1\">\n    <span>{{ errorMessageValidation }}</span>\n    <span *ngIf=\"this.validationTotalSeconds !== 0\" class=\"timer\">\n      {{ calculateMinutes('validationTotalSeconds') }} :\n      {{ calculateSeconds('validationTotalSeconds') | number: '2.0' }}</span\n    >\n  </span>\n</div>\n\n<div class=\"container-failed\" *ngIf=\"loadingValidation\">\n  <app-icon name=\"Info\" width=\"18px\" height=\"19px\"></app-icon>\n  <span class=\"Body-S-Regular pt-1\">\n    <span>{{ 'validating code' | translate }} </span>\n  </span>\n</div>\n\n<div class=\"container-failed\" *ngIf=\"sendingCode\">\n  <app-icon name=\"Info\" width=\"18px\" height=\"19px\"></app-icon>\n  <span class=\"Body-S-Regular pt-1\">\n    <span>Enviando c\u00F3digo...</span>\n  </span>\n</div>\n\n<div *ngIf=\"applySendCode && !errorSendOTP && !isMaximumAttempts\">\n  <div class=\"crono\">\n    <p>\n      <!-- Podr\u00E1s solicitar otro c\u00F3digo en: <span class=\"timer\"> {{ timeLeft }}</span> {{ typeTimeLeft }} -->\n      {{ 'you will be able to request another code in' | translate }}\n      <span class=\"timer\">\n        {{ calculateMinutes('sendTotalSeconds') }} :\n        {{ calculateSeconds('sendTotalSeconds') | number: '2.0' }}</span\n      >\n    </p>\n    <!-- <p *ngIf=\"timeLeft === 0\"> -->\n    <p *ngIf=\"sendTotalSeconds === 0\">\n      {{ \"didn't you receive the code?\" | translate }}\n      <!-- <span class=\"resend c-link\" (click)=\"restartTimer()\">Volver a enviar</span> -->\n      <span class=\"resend c-link\" (click)=\"sendCode()\">{{ 'resend' | translate }} </span>\n    </p>\n  </div>\n</div>\n\n<!-- <div class=\"contaienr-alert\">\n  <app-alert-modal\n    class=\"alert-son\"\n    [visible]=\"isVisibleAlert\"\n    [params]=\"paramsDialog\"\n    [loading]=\"false\"\n    (primaryButtonEvent)=\"closeModalError()\"\n  ></app-alert-modal>\n</div> -->\n", styles: [".container-failed{display:flex;width:100%;justify-content:left;gap:8px;padding-left:3.5em;margin-top:.5em}.container-otp{display:flex;width:100%;justify-content:center;gap:16px}.container-otp input{background:#fff;border-radius:var(--Size-2, 8px);border:1px solid var(--Gray-gray-200, #d3d7de);display:flex;width:50px;height:54px;padding:12px 0;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#495057;font-size:22px;text-align:center}.container-otp input.success{border:1px solid var(--Success-success-500, #0abb87)!important}.container-otp .input-focused{border:2px solid orange}.container-otp.error input{border:1px solid var(--Danger-danger-500, #ff5b5b)!important}p{color:var(--Gray-gray-700, #7b8190);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.crono{margin:50px 0}.crono p{margin:0;padding:2px}.crono p span.timer{color:#f49a3d;font-weight:600}.crono p span.resend{cursor:pointer}.a{display:flex;flex-direction:column;align-items:center;gap:12px;align-self:stretch}.b{display:flex;justify-content:center;align-items:center;gap:4px;align-self:stretch}.error{color:var(--Gray-600, #f46a6b)}.error-code{color:var(--Error-Error-500)}.otp-parent-container{width:fit-content;display:flex;flex-direction:column;gap:8px;margin:auto}:host ::ng-deep .p-dialog-content{padding:0!important}.resend.c-link{color:var(--Info-Info-500);cursor:pointer}.options ::ng-deep .description{margin-top:10px}.options ::ng-deep .description .item-table{padding-right:0;padding-left:var(--Size-6)}.body-modal{display:flex;flex-direction:column;gap:16px;margin-top:20px}.body-modal h6{color:var(--Gray-gray-900, #495057);font-family:Inter;font-size:16px;font-style:normal;font-weight:700;line-height:24px}.body-modal .text-top{margin-bottom:12px}.body-modal .text-top p{color:var(--Gray-gray-900, #495057);font-family:Inter;font-size:14px;font-style:normal;line-height:20px;margin:0;padding:0 0 4px;text-align:left}.body-modal .text-top .bold{font-weight:700}.body-modal .alias .p-inputtext{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputEls", predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div class=\"mb-4 custom-alert\" *ngIf=\"typeBadge == 1\">\n  <app-alert\n    [message]=\"'prueba'\"\n    [type]=\"'default'\"\n    [state]=\"paramsAlert.state\"\n    [dismissable]=\"true\"\n    [showButton]=\"false\"\n    [buttonText]=\"'Cerrar'\"\n    [showAlert]=\"paramsAlert.show\"\n  ></app-alert>\n</div>\n\n<div class=\"mb-4\" *ngIf=\"typeBadge == 2\">\n  <dropi-alert-legacy\n    [visible]=\"paramsAlert.show\"\n    [type]=\"paramsAlert.state\"\n    [message]=\"paramsAlert.message\"\n    [autoClose]=\"true\"\n  ></dropi-alert-legacy>\n</div>\n\n<div\n  class=\"body-modal\"\n  *ngIf=\"\n    (engine === 'email' || engine === 'sms') &&\n    showLabelSendContact &&\n    typeLabelContact == 1 &&\n    paramsAlert.show &&\n    paramsAlert.state == 'success'\n  \"\n>\n  <div class=\"options\">\n    <h6>\n      {{ (engine === 'email' ? 'Email Validation' : 'SMS Validation') | translate }}\n    </h6>\n    <div class=\"text-top\">\n      <p>\n        {{\n          (engine === 'email'\n            ? 'Enter the code that was sent to your email'\n            : 'Enter the code that was sent to your phone number'\n          ) | translate\n        }}\n        {{ labelContact }}\n      </p>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"engine === '2fa'\">\n  <h5>\n    {{ 'Two factor authentication' | translate }}\n  </h5>\n\n  <label class=\"Body-M-Regular\"\n    >Ingresa los seis d\u00EDgitos que genera tu app de autenticaci\u00F3n de dos<br />\n    factores para continuar.</label\n  >\n</div>\n\n<div\n  *ngIf=\"\n    showLabelSendContact &&\n    typeLabelContact == 2 &&\n    paramsAlert.show &&\n    paramsAlert.state == 'success'\n  \"\n  class=\"mt-4 mb-4 text-left\"\n>\n  <label\n    >{{\n      'we sent you a code' | translate: { typeContact: typeContact, labelContact: labelContact }\n    }}\n  </label>\n  <label>{{ 'write it here to continue' | translate }}</label>\n</div>\n\n<div class=\"Body-S-Regular text-center\">{{ 'enter the code' | translate }}</div>\n\n<div class=\"container-otp mt-2\" [ngClass]=\"{ error: failedValidation }\">\n  <input\n    class=\"otp-input\"\n    #inputEl\n    *ngFor=\"let input of inputs.controls; let i = index\"\n    (focus)=\"handleFocus($event)\"\n    (blur)=\"onTouched?.()\"\n    (keypress)=\"handleKeyPress($event, i)\"\n    (input)=\"handleInput($event, i)\"\n    (keydown)=\"handleKeyDown($event, i)\"\n    (paste)=\"handlePaste($event, i)\"\n    [formControl]=\"$any(input)\"\n    [attr.autocomplete]=\"i === 0 ? 'one-time-code' : null\"\n    type=\"text\"\n    inputmode=\"numeric\"\n    [ngClass]=\"{ success: input.value && isNumeric(input.value) }\"\n  />\n</div>\n\n<div class=\"container-failed\" *ngIf=\"failedValidation\">\n  <app-icon name=\"Cross-circle\" width=\"18px\" height=\"19px\" color=\"Error-Error-500\"></app-icon>\n  <span class=\"Body-S-Regular error pt-1\">\n    <span>{{ errorMessageValidation }}</span>\n    <span *ngIf=\"this.validationTotalSeconds !== 0\" class=\"timer\">\n      {{ calculateMinutes('validationTotalSeconds') }} :\n      {{ calculateSeconds('validationTotalSeconds') | number: '2.0' }}</span\n    >\n  </span>\n</div>\n\n<div class=\"container-failed\" *ngIf=\"loadingValidation\">\n  <app-icon name=\"Info\" width=\"18px\" height=\"19px\"></app-icon>\n  <span class=\"Body-S-Regular pt-1\">\n    <span>{{ 'validating code' | translate }} </span>\n  </span>\n</div>\n\n<div class=\"container-failed\" *ngIf=\"sendingCode\">\n  <app-icon name=\"Info\" width=\"18px\" height=\"19px\"></app-icon>\n  <span class=\"Body-S-Regular pt-1\">\n    <span>Enviando c\u00F3digo...</span>\n  </span>\n</div>\n\n<div *ngIf=\"applySendCode && !errorSendOTP && !isMaximumAttempts\">\n  <div class=\"crono\">\n    <p>\n      <!-- Podr\u00E1s solicitar otro c\u00F3digo en: <span class=\"timer\"> {{ timeLeft }}</span> {{ typeTimeLeft }} -->\n      {{ 'you will be able to request another code in' | translate }}\n      <span class=\"timer\">\n        {{ calculateMinutes('sendTotalSeconds') }} :\n        {{ calculateSeconds('sendTotalSeconds') | number: '2.0' }}</span\n      >\n    </p>\n    <!-- <p *ngIf=\"timeLeft === 0\"> -->\n    <p *ngIf=\"sendTotalSeconds === 0\">\n      {{ \"didn't you receive the code?\" | translate }}\n      <!-- <span class=\"resend c-link\" (click)=\"restartTimer()\">Volver a enviar</span> -->\n      <span class=\"resend c-link\" (click)=\"sendCode()\">{{ 'resend' | translate }} </span>\n    </p>\n  </div>\n</div>\n\n<!-- <div class=\"contaienr-alert\">\n  <app-alert-modal\n    class=\"alert-son\"\n    [visible]=\"isVisibleAlert\"\n    [params]=\"paramsDialog\"\n    [loading]=\"false\"\n    (primaryButtonEvent)=\"closeModalError()\"\n  ></app-alert-modal>\n</div> -->\n", styles: [".container-failed{display:flex;width:100%;justify-content:left;gap:8px;padding-left:3.5em;margin-top:.5em}.container-otp{display:flex;width:100%;justify-content:center;gap:16px}.container-otp input{background:#fff;border-radius:var(--Size-2, 8px);border:1px solid var(--Gray-gray-200, #d3d7de);display:flex;width:50px;height:54px;padding:12px 0;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#495057;font-size:22px;text-align:center}.container-otp input.success{border:1px solid var(--Success-success-500, #0abb87)!important}.container-otp .input-focused{border:2px solid orange}.container-otp.error input{border:1px solid var(--Danger-danger-500, #ff5b5b)!important}p{color:var(--Gray-gray-700, #7b8190);text-align:center;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:16px}.crono{margin:50px 0}.crono p{margin:0;padding:2px}.crono p span.timer{color:#f49a3d;font-weight:600}.crono p span.resend{cursor:pointer}.a{display:flex;flex-direction:column;align-items:center;gap:12px;align-self:stretch}.b{display:flex;justify-content:center;align-items:center;gap:4px;align-self:stretch}.error{color:var(--Gray-600, #f46a6b)}.error-code{color:var(--Error-Error-500)}.otp-parent-container{width:fit-content;display:flex;flex-direction:column;gap:8px;margin:auto}:host ::ng-deep .p-dialog-content{padding:0!important}.resend.c-link{color:var(--Info-Info-500);cursor:pointer}.options ::ng-deep .description{margin-top:10px}.options ::ng-deep .description .item-table{padding-right:0;padding-left:var(--Size-6)}.body-modal{display:flex;flex-direction:column;gap:16px;margin-top:20px}.body-modal h6{color:var(--Gray-gray-900, #495057);font-family:Inter;font-size:16px;font-style:normal;font-weight:700;line-height:24px}.body-modal .text-top{margin-bottom:12px}.body-modal .text-top p{color:var(--Gray-gray-900, #495057);font-family:Inter;font-size:14px;font-style:normal;line-height:20px;margin:0;padding:0 0 4px;text-align:left}.body-modal .text-top .bold{font-weight:700}.body-modal .alias .p-inputtext{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OtpSendCodeComponent, decorators: [{
             type: Component,
@@ -2924,7 +2953,7 @@ class DropiTextAreaComponent {
         return "";
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiTextAreaComponent, isStandalone: true, selector: "app-dropi-text-area", inputs: { textAreaProperties: "textAreaProperties", disabled: "disabled", showObligatoryAsterisk: "showObligatoryAsterisk" }, ngImport: i0, template: "<div class=\"textarea-wrapper\">\n  <label\n    *ngIf=\"textAreaProperties?.label !== ''\"\n    [for]=\"textAreaProperties.label\"\n    [ngStyle]=\"{ color: disabled ? 'var(--Gray-Gray-500)' : 'var(--Gray-Gray-600)' }\"\n    >{{ textAreaProperties.label | translate }}\n    <span\n      *ngIf=\"\n        isRequired() &&\n        showObligatoryAsterisk &&\n        (!disabled || !textAreaProperties.formControl.disabled)\n      \"\n      >*</span\n    ></label\n  >\n\n  <div class=\"textarea-container\">\n    <textarea\n      [id]=\"textAreaProperties.id ? textAreaProperties.id : textAreaProperties.label\"\n      [rows]=\"textAreaProperties.rows ? textAreaProperties.rows : 4\"\n      [formControl]=\"textAreaProperties.formControl\"\n      [placeholder]=\"textAreaProperties.placeholder | translate\"\n      [maxlength]=\"textAreaProperties?.maxLength\"\n      [minlength]=\"textAreaProperties?.minLength ?? 0\"\n      [style.resize]=\"textAreaProperties?.resize ? textAreaProperties.resize : 'vertical'\"\n      class=\"form-control Body-M-Regular\"\n      [ngClass]=\"{\n        'form-control-invalid':\n          textAreaProperties.formControl?.invalid && textAreaProperties.formControl?.touched,\n        'form-control-valid':\n          textAreaProperties.formControl?.valid && textAreaProperties.formControl?.touched\n      }\"\n    >\n    {{ textAreaProperties.formControl.value }}\n    </textarea>\n    <div class=\"char-counter\">\n      {{ textAreaProperties.formControl.value?.length }}/{{ textAreaProperties.maxLength }}\n    </div>\n  </div>\n  <div\n    *ngIf=\"\n      textAreaProperties.textHelper ||\n      (textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched)\n    \"\n    class=\"form-control-helper\"\n  >\n    <app-icon\n      *ngIf=\"textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched\"\n      name=\"Warning-circle\"\n      width=\"12px\"\n      height=\"12px\"\n      color=\"Error-Error-500\"\n    ></app-icon>\n    <span\n      [ngStyle]=\"{ color: disabled ? 'var(--Gray-Gray-500)' : 'var(--Gray-Gray-600)' }\"\n      [ngClass]=\"{\n        'invalid-color':\n          textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched\n      }\"\n      >{{ (getErrorMessage() | translate) || (textAreaProperties.textHelper | translate) }}</span\n    >\n  </div>\n</div>\n", styles: [".form-group{position:relative;width:100%}.form-control{border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);font-size:var(--font-size-s);transition:border-color .3s ease-in-out}.form-control-helper{display:flex;gap:4px;align-items:baseline}.form-control-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.form-control:focus::placeholder{color:var(--Gray-Gray-500)}.form-control:focus{border-color:var(--Info-Info-500);outline:none}.form-control-valid{border:1px solid var(--Gray-Gray-400)!important;color:var(--Gray-Gray-600);outline:none}.form-control-invalid{border:1px solid var(--Error-Error-500)!important;color:var(--Gray-Gray-600);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200)!important;color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);outline:none}.form-control:focus+label,.form-control:not(:placeholder-shown)+label{top:-28px;left:0;margin-bottom:8px;font-size:var(--font-size-xs);width:unset;color:var(--Gray-Gray-600)}.form-control:disabled+label{color:var(--Gray-Gray-500)}.form-control:disabled+label+.form-control-helper{color:var(--Gray-Gray-500)}.invalid-color{color:var(--Error-Error-500)!important}.textarea-wrapper{position:relative;width:100%}.textarea-wrapper label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.textarea-wrapper label span{color:var(--Error-Error-500)}.textarea-container{position:relative}textarea{width:100%;overflow:auto;padding:12px;box-sizing:border-box;border-radius:var(--Border-2)}.char-counter{position:absolute;bottom:10px;right:16px;font-size:12px;color:var(--Gray-Gray-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiTextAreaComponent, isStandalone: true, selector: "app-dropi-text-area", inputs: { textAreaProperties: "textAreaProperties", disabled: "disabled", showObligatoryAsterisk: "showObligatoryAsterisk" }, ngImport: i0, template: "<div class=\"textarea-wrapper\">\n  <label\n    *ngIf=\"textAreaProperties?.label !== ''\"\n    [for]=\"textAreaProperties.label\"\n    [ngStyle]=\"{ color: disabled ? 'var(--Gray-Gray-500)' : 'var(--Gray-Gray-600)' }\"\n    >{{ textAreaProperties.label | translate }}\n    <span\n      *ngIf=\"\n        isRequired() &&\n        showObligatoryAsterisk &&\n        (!disabled || !textAreaProperties.formControl.disabled)\n      \"\n      >*</span\n    ></label\n  >\n\n  <div class=\"textarea-container\">\n    <textarea\n      [id]=\"textAreaProperties.id ? textAreaProperties.id : textAreaProperties.label\"\n      [rows]=\"textAreaProperties.rows ? textAreaProperties.rows : 4\"\n      [formControl]=\"textAreaProperties.formControl\"\n      [placeholder]=\"textAreaProperties.placeholder | translate\"\n      [maxlength]=\"textAreaProperties?.maxLength\"\n      [minlength]=\"textAreaProperties?.minLength ?? 0\"\n      [style.resize]=\"textAreaProperties?.resize ? textAreaProperties.resize : 'vertical'\"\n      class=\"form-control Body-M-Regular\"\n      [ngClass]=\"{\n        'form-control-invalid':\n          textAreaProperties.formControl?.invalid && textAreaProperties.formControl?.touched,\n        'form-control-valid':\n          textAreaProperties.formControl?.valid && textAreaProperties.formControl?.touched\n      }\"\n    >\n    {{ textAreaProperties.formControl.value }}\n    </textarea>\n    <div class=\"char-counter\">\n      {{ textAreaProperties.formControl.value?.length }}/{{ textAreaProperties.maxLength }}\n    </div>\n  </div>\n  <div\n    *ngIf=\"\n      textAreaProperties.textHelper ||\n      (textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched)\n    \"\n    class=\"form-control-helper\"\n  >\n    <app-icon\n      *ngIf=\"textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched\"\n      name=\"Warning-circle\"\n      width=\"12px\"\n      height=\"12px\"\n      color=\"Error-Error-500\"\n    ></app-icon>\n    <span\n      [ngStyle]=\"{ color: disabled ? 'var(--Gray-Gray-500)' : 'var(--Gray-Gray-600)' }\"\n      [ngClass]=\"{\n        'invalid-color':\n          textAreaProperties.formControl.invalid && textAreaProperties.formControl.touched\n      }\"\n      >{{ (getErrorMessage() | translate) || (textAreaProperties.textHelper | translate) }}</span\n    >\n  </div>\n</div>\n", styles: [".form-group{position:relative;width:100%}.form-control{border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);font-size:var(--font-size-s);transition:border-color .3s ease-in-out}.form-control-helper{display:flex;gap:4px;align-items:baseline}.form-control-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.form-control:focus::placeholder{color:var(--Gray-Gray-500)}.form-control:focus{border-color:var(--Info-Info-500);outline:none}.form-control-valid{border:1px solid var(--Gray-Gray-400)!important;color:var(--Gray-Gray-600);outline:none}.form-control-invalid{border:1px solid var(--Error-Error-500)!important;color:var(--Gray-Gray-600);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200)!important;color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);outline:none}.form-control:focus+label,.form-control:not(:placeholder-shown)+label{top:-28px;left:0;margin-bottom:8px;font-size:var(--font-size-xs);width:unset;color:var(--Gray-Gray-600)}.form-control:disabled+label{color:var(--Gray-Gray-500)}.form-control:disabled+label+.form-control-helper{color:var(--Gray-Gray-500)}.invalid-color{color:var(--Error-Error-500)!important}.textarea-wrapper{position:relative;width:100%}.textarea-wrapper label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.textarea-wrapper label span{color:var(--Error-Error-500)}.textarea-container{position:relative}textarea{width:100%;overflow:auto;padding:12px;box-sizing:border-box;border-radius:var(--Border-2)}.char-counter{position:absolute;bottom:10px;right:16px;font-size:12px;color:var(--Gray-Gray-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiTextAreaComponent, decorators: [{
             type: Component,
@@ -3038,8 +3067,8 @@ class DropiPhoneInputComponent {
             return;
         this.isExpanded = !this.isExpanded;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiPhoneInputComponent, deps: [{ token: i0.ElementRef }, { token: "UserService" }, { token: "SettingsService" }, { token: "ApiService" }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiPhoneInputComponent, isStandalone: true, selector: "app-dropi-phone-input", inputs: { CodArea: "CodArea", ngModelPhone: "ngModelPhone", phoneNumberPlaceholder: "phoneNumberPlaceholder", isValidPhone: "isValidPhone", selectedOption: "selectedOption", selectProperties: "selectProperties", validateOnInit: "validateOnInit", disabledInput: "disabledInput", formControl: "formControl" }, outputs: { ngModelChangeCod: "ngModelChangeCod", ngModelChangePhone: "ngModelChangePhone", verifiedField: "verifiedField", onChangeSelect: "onChangeSelect" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, ngImport: i0, template: "<div class=\"dropi-input-phone\" [ngClass]=\"{ disabled: disabled }\">\n  <label\n    class=\"dropi-input-phone__label Label-S-SemiBold\"\n    *ngIf=\"selectProperties?.label\"\n  >\n    {{ selectProperties.label | translate }}\n    <span\n      *ngIf=\"selectProperties.showObligatory\"\n      class=\"dropi-input-phone__obligatory\"\n      >*</span\n    >\n  </label>\n\n  <div class=\"dropi-input-phone__container-select\">\n    <!-- Selector de pa\u00EDs -->\n    <div\n      class=\"dropi-input-phone__select\"\n      [ngClass]=\"{ 'is-expanded': isExpanded, disabled: disabled }\"\n      (click)=\"showOptions()\"\n    >\n      <div class=\"dropi-input-phone__selected\">\n        <div class=\"dropi-input-phone__flag-container\" *ngIf=\"selectedOption\">\n          <img\n            [src]=\"selectedOption.flag\"\n            [alt]=\"selectedOption.name\"\n            class=\"dropi-input-phone__flag\"\n          />\n          <span class=\"dropi-input-phone__code Body-M-Medium\"\n            >+{{ selectedOption.code }}</span\n          >\n        </div>\n        <div class=\"dropi-input-phone__placeholder\" *ngIf=\"!selectedOption\">\n          {{ selectProperties?.placeholder || \"Seleccionar\" | translate }}\n        </div>\n      </div>\n\n      <app-icon\n        [name]=\"isExpanded ? 'Dropdown-up' : 'Dropdown-down'\"\n        width=\"24px\"\n        height=\"24px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n\n      <!-- Lista de opciones desplegable -->\n      <div class=\"dropi-input-phone__options\" *ngIf=\"isExpanded\">\n        <div\n          *ngFor=\"let option of countries\"\n          class=\"dropi-input-phone__option\"\n          [ngClass]=\"{ selected: selectedOption?.code === option.code }\"\n          (click)=\"cambioCod(option); $event.stopPropagation()\"\n        >\n          <img\n            [src]=\"option.flag\"\n            [alt]=\"option.name\"\n            class=\"dropi-input-phone__flag\"\n          />\n          <span class=\"dropi-input-phone__option-name Body-M-Regular\">{{\n            option.name\n          }}</span>\n          <span class=\"dropi-input-phone__option-code Body-M-Regular\"\n            >(+{{ option.code }})</span\n          >\n        </div>\n      </div>\n    </div>\n\n    <!-- Input de n\u00FAmero de tel\u00E9fono -->\n    <div class=\"dropi-input-phone__input-container\">\n      <input\n        type=\"text\"\n        class=\"dropi-input-phone__input Body-M-Regular\"\n        [ngClass]=\"{\n          'is-invalid': isValidPhone === false || hasError,\n        }\"\n        [(ngModel)]=\"ngModelPhone\"\n        (input)=\"cambioPhone()\"\n        (keyup)=\"cambioPhone($event)\"\n        (change)=\"cambioPhone()\"\n        [placeholder]=\"phoneNumberPlaceholder\"\n        (paste)=\"handlePaste($event)\"\n        [maxlength]=\"maxLengthPhone\"\n        [disabled]=\"disabledInput\"\n      />\n    </div>\n  </div>\n\n  <span\n    class=\"dropi-input-phone__helper Label-S-Regular\"\n    *ngIf=\"selectProperties?.textHelper\"\n    >{{ selectProperties.textHelper | translate }}</span\n  >\n</div>\n", styles: [".phone-input-container{display:flex;align-items:center;gap:8px}.p-autocomplete-input::placeholder{color:#627587!important}.flag-code{display:flex;align-items:center;gap:8px}.country-select{position:relative}.ng-select .ng-dropdown-panel .ng-option.ng-option-marked{color:#313131!important}.selected-country{display:flex;align-items:center;cursor:pointer}.flag-icon{margin-right:8px;width:20px;height:20px;background-size:contain;background-repeat:no-repeat}.country-list{position:absolute;top:100%;left:0;list-style:none;padding:0;margin:0;background-color:#fff;border:1px solid #ccc;border-top:none;width:100%}.country-list li{display:flex;align-items:center;padding:8px;cursor:pointer}.country-list li:hover{background-color:#f5f5f5}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input.is-invalid{background:#fffbfb}.is-invalid-country .ng-select-container{border:1px solid #ff3d00!important;background:#fffbfb!important;color:#f10001!important}.form-control{width:100%;border:1px solid var(--Gray-Gray-200);border-radius:5px;font-size:14px;transition:border-color .3s ease-in-out;height:40px}.form-control:focus::placeholder{color:var(--Gray-Gray-500)}.form-control:focus{border-color:var(--Info-Info-500);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200)!important;color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);outline:none}.custom-select{position:relative;width:50%}.custom-select label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.custom-select label span{color:var(--Error-Error-500)}.select-button{width:100%;height:40px;padding:.47rem .75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);color:var(--Gray-Gray-500);font-size:var(--font-size-s);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0;border:1px solid transparent;border-radius:var(--Border-2);overflow-y:scroll;z-index:100}.option{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s);cursor:pointer}.option:hover{background:var(--Gray-Gray-50)}.expanded-select{max-height:250px;background:var(--Neutral-White);box-shadow:var(--Shadow-medium);transition:max-height .2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;transition:max-height .2s ease-out,background .6s ease-out,box-shadow .6s ease-out}.select-button:focus{border-color:var(--Info-Info-500)!important}.select-button:disabled,.option:disabled{border-color:var(--Gray-Gray-200);color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);cursor:unset}.select-completed{border-color:var(--Gray-Gray-400);color:var(--Gray-Gray-600);background:var(--Neutral-White)}.select-invalid{border-color:var(--Error-Error-500)!important}.select-helper{display:flex;gap:4px;align-items:baseline}.select-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.invalid-color{color:var(--Error-Error-500)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiPhoneInputComponent, deps: [{ token: i0.ElementRef }, { token: "UserService" }, { token: "SettingsService" }, { token: "ApiService" }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiPhoneInputComponent, isStandalone: true, selector: "app-dropi-phone-input", inputs: { CodArea: "CodArea", ngModelPhone: "ngModelPhone", phoneNumberPlaceholder: "phoneNumberPlaceholder", isValidPhone: "isValidPhone", selectedOption: "selectedOption", selectProperties: "selectProperties", validateOnInit: "validateOnInit", disabledInput: "disabledInput", formControl: "formControl" }, outputs: { ngModelChangeCod: "ngModelChangeCod", ngModelChangePhone: "ngModelChangePhone", verifiedField: "verifiedField", onChangeSelect: "onChangeSelect" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, ngImport: i0, template: "<div class=\"dropi-input-phone\" [ngClass]=\"{ disabled: disabled }\">\n  <label\n    class=\"dropi-input-phone__label Label-S-SemiBold\"\n    *ngIf=\"selectProperties?.label\"\n  >\n    {{ selectProperties.label | translate }}\n    <span\n      *ngIf=\"selectProperties.showObligatory\"\n      class=\"dropi-input-phone__obligatory\"\n      >*</span\n    >\n  </label>\n\n  <div class=\"dropi-input-phone__container-select\">\n    <!-- Selector de pa\u00EDs -->\n    <div\n      class=\"dropi-input-phone__select\"\n      [ngClass]=\"{ 'is-expanded': isExpanded, disabled: disabled }\"\n      (click)=\"showOptions()\"\n    >\n      <div class=\"dropi-input-phone__selected\">\n        <div class=\"dropi-input-phone__flag-container\" *ngIf=\"selectedOption\">\n          <img\n            [src]=\"selectedOption.flag\"\n            [alt]=\"selectedOption.name\"\n            class=\"dropi-input-phone__flag\"\n          />\n          <span class=\"dropi-input-phone__code Body-M-Medium\"\n            >+{{ selectedOption.code }}</span\n          >\n        </div>\n        <div class=\"dropi-input-phone__placeholder\" *ngIf=\"!selectedOption\">\n          {{ selectProperties?.placeholder || \"Seleccionar\" | translate }}\n        </div>\n      </div>\n\n      <app-icon\n        [name]=\"isExpanded ? 'Dropdown-up' : 'Dropdown-down'\"\n        width=\"24px\"\n        height=\"24px\"\n        color=\"Gray-Gray-500\"\n      ></app-icon>\n\n      <!-- Lista de opciones desplegable -->\n      <div class=\"dropi-input-phone__options\" *ngIf=\"isExpanded\">\n        <div\n          *ngFor=\"let option of countries\"\n          class=\"dropi-input-phone__option\"\n          [ngClass]=\"{ selected: selectedOption?.code === option.code }\"\n          (click)=\"cambioCod(option); $event.stopPropagation()\"\n        >\n          <img\n            [src]=\"option.flag\"\n            [alt]=\"option.name\"\n            class=\"dropi-input-phone__flag\"\n          />\n          <span class=\"dropi-input-phone__option-name Body-M-Regular\">{{\n            option.name\n          }}</span>\n          <span class=\"dropi-input-phone__option-code Body-M-Regular\"\n            >(+{{ option.code }})</span\n          >\n        </div>\n      </div>\n    </div>\n\n    <!-- Input de n\u00FAmero de tel\u00E9fono -->\n    <div class=\"dropi-input-phone__input-container\">\n      <input\n        type=\"text\"\n        class=\"dropi-input-phone__input Body-M-Regular\"\n        [ngClass]=\"{\n          'is-invalid': isValidPhone === false || hasError,\n        }\"\n        [(ngModel)]=\"ngModelPhone\"\n        (input)=\"cambioPhone()\"\n        (keyup)=\"cambioPhone($event)\"\n        (change)=\"cambioPhone()\"\n        [placeholder]=\"phoneNumberPlaceholder\"\n        (paste)=\"handlePaste($event)\"\n        [maxlength]=\"maxLengthPhone\"\n        [disabled]=\"disabledInput\"\n      />\n    </div>\n  </div>\n\n  <span\n    class=\"dropi-input-phone__helper Label-S-Regular\"\n    *ngIf=\"selectProperties?.textHelper\"\n    >{{ selectProperties.textHelper | translate }}</span\n  >\n</div>\n", styles: [".phone-input-container{display:flex;align-items:center;gap:8px}.p-autocomplete-input::placeholder{color:#627587!important}.flag-code{display:flex;align-items:center;gap:8px}.country-select{position:relative}.ng-select .ng-dropdown-panel .ng-option.ng-option-marked{color:#313131!important}.selected-country{display:flex;align-items:center;cursor:pointer}.flag-icon{margin-right:8px;width:20px;height:20px;background-size:contain;background-repeat:no-repeat}.country-list{position:absolute;top:100%;left:0;list-style:none;padding:0;margin:0;background-color:#fff;border:1px solid #ccc;border-top:none;width:100%}.country-list li{display:flex;align-items:center;padding:8px;cursor:pointer}.country-list li:hover{background-color:#f5f5f5}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input.is-invalid{background:#fffbfb}.is-invalid-country .ng-select-container{border:1px solid #ff3d00!important;background:#fffbfb!important;color:#f10001!important}.form-control{width:100%;border:1px solid var(--Gray-Gray-200);border-radius:5px;font-size:14px;transition:border-color .3s ease-in-out;height:40px}.form-control:focus::placeholder{color:var(--Gray-Gray-500)}.form-control:focus{border-color:var(--Info-Info-500);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200)!important;color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);outline:none}.custom-select{position:relative;width:50%}.custom-select label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.custom-select label span{color:var(--Error-Error-500)}.select-button{width:100%;height:40px;padding:.47rem .75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);color:var(--Gray-Gray-500);font-size:var(--font-size-s);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0;border:1px solid transparent;border-radius:var(--Border-2);overflow-y:scroll;z-index:100}.option{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s);cursor:pointer}.option:hover{background:var(--Gray-Gray-50)}.expanded-select{max-height:250px;background:var(--Neutral-White);box-shadow:var(--Shadow-medium);transition:max-height .2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;transition:max-height .2s ease-out,background .6s ease-out,box-shadow .6s ease-out}.select-button:focus{border-color:var(--Info-Info-500)!important}.select-button:disabled,.option:disabled{border-color:var(--Gray-Gray-200);color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);cursor:unset}.select-completed{border-color:var(--Gray-Gray-400);color:var(--Gray-Gray-600);background:var(--Neutral-White)}.select-invalid{border-color:var(--Error-Error-500)!important}.select-helper{display:flex;gap:4px;align-items:baseline}.select-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.invalid-color{color:var(--Error-Error-500)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiPhoneInputComponent, decorators: [{
             type: Component,
@@ -3053,7 +3082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ["ApiService"]
-                }] }, { type: i2$1.TranslateService }], propDecorators: { CodArea: [{
+                }] }, { type: i2.TranslateService }], propDecorators: { CodArea: [{
                 type: Input
             }], ngModelPhone: [{
                 type: Input
@@ -3097,7 +3126,7 @@ class InputToggleComponent {
         this.dataChange.emit(this.data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputToggleComponent, isStandalone: true, selector: "app-input-toggle", inputs: { data: "data", config: "config", elemnto: "elemnto" }, outputs: { dataChange: "dataChange" }, ngImport: i0, template: "<ng-container *ngIf=\"config.param === 'toggle'\">\n  <div class=\"form-check form-switch form-switch-md mb-3\" dir=\"ltr\">\n    <input\n      [attr.id]=\"elemnto\"\n      (click)=\"emitValue()\"\n      id=\"elemnto\"\n      *ngIf=\"data\"\n      class=\"form-check-input\"\n      [attr.type]=\"config.type\"\n      [(ngModel)]=\"data\"\n      [formControl]=\"config.formControl\"\n      [attr.active]=\"data\"\n      [attr.formControlName]=\"config.name\"\n      checked\n    />\n\n    <input\n      (click)=\"emitValue()\"\n      *ngIf=\"!data\"\n      [attr.id]=\"elemnto\"\n      id=\"elemnto\"\n      class=\"form-check-input\"\n      [attr.type]=\"config.type\"\n      [(ngModel)]=\"data\"\n      [formControl]=\"config.formControl\"\n      [attr.active]=\"data\"\n      [attr.formControlName]=\"config.name\"\n    />\n\n    <label class=\"form-check-label\" for=\"elemnto\" (click)=\"emitValue()\">\n      {{ config.labelText | translate }}</label\n    >\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputToggleComponent, isStandalone: true, selector: "app-input-toggle", inputs: { data: "data", config: "config", elemnto: "elemnto" }, outputs: { dataChange: "dataChange" }, ngImport: i0, template: "<ng-container *ngIf=\"config.param === 'toggle'\">\n  <div class=\"form-check form-switch form-switch-md mb-3\" dir=\"ltr\">\n    <input\n      [attr.id]=\"elemnto\"\n      (click)=\"emitValue()\"\n      id=\"elemnto\"\n      *ngIf=\"data\"\n      class=\"form-check-input\"\n      [attr.type]=\"config.type\"\n      [(ngModel)]=\"data\"\n      [formControl]=\"config.formControl\"\n      [attr.active]=\"data\"\n      [attr.formControlName]=\"config.name\"\n      checked\n    />\n\n    <input\n      (click)=\"emitValue()\"\n      *ngIf=\"!data\"\n      [attr.id]=\"elemnto\"\n      id=\"elemnto\"\n      class=\"form-check-input\"\n      [attr.type]=\"config.type\"\n      [(ngModel)]=\"data\"\n      [formControl]=\"config.formControl\"\n      [attr.active]=\"data\"\n      [attr.formControlName]=\"config.name\"\n    />\n\n    <label class=\"form-check-label\" for=\"elemnto\" (click)=\"emitValue()\">\n      {{ config.labelText | translate }}</label\n    >\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputToggleComponent, decorators: [{
             type: Component,
@@ -3642,7 +3671,7 @@ class DropiTableComponent {
             this.expandChildren.emit({ row });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiTableComponent, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiTableComponent, isStandalone: true, selector: "app-dropi-table", inputs: { headers: "headers", data: "data", childData: "childData", visibleRowsChildrens: "visibleRowsChildrens", dropiTableConfiguration: "dropiTableConfiguration", dropiTableBackendParams: "dropiTableBackendParams", loading: "loading", isCursorPagination: "isCursorPagination" }, outputs: { rowsSelected: "rowsSelected", actionClicked: "actionClicked", onPageChange: "onPageChange", onSizeChange: "onSizeChange", onSortChange: "onSortChange", onSearchChange: "onSearchChange", expandChildren: "expandChildren" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "checkboxes", predicate: DropiCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"dropiTableConfiguration\">\n  <div class=\"table-container\" *ngIf=\"!loading\">\n    <div class=\"search-container\" *ngIf=\"dropiTableConfiguration?.showSearch\">\n      <h3 class=\"table-title\">\n        {{ dropiTableConfiguration?.title | translate }}\n      </h3>\n      <app-input\n        [inputProperties]=\"{\n          label: 'Search',\n          placeholder: 'Search',\n          formControl: searchTerm,\n        }\"\n      ></app-input>\n    </div>\n\n    <div\n      class=\"table-wrapper\"\n      [ngClass]=\"hasActions ? 'width-actions' : 'width-no-actions'\"\n    >\n      <table\n        class=\"custom-table\"\n        [ngClass]=\"{\n          'has-checkbox': dropiTableConfiguration?.showCheckbox,\n        }\"\n      >\n        <thead>\n          <tr>\n            <th\n              class=\"checkbox-header\"\n              *ngIf=\"dropiTableConfiguration?.showCheckbox\"\n            >\n              <app-dropi-checkbox\n                (onChange)=\"onSelectAll($event)\"\n              ></app-dropi-checkbox>\n            </th>\n            <th\n              *ngFor=\"let header of headers\"\n              (click)=\"onSort(header)\"\n              [ngClass]=\"{\n                sortable: header?.sortable,\n                'low-opacity': header?.disabledColumn,\n                'highlight-column': header?.highlightColumn,\n              }\"\n              [style.text-align]=\"header?.align || 'left'\"\n            >\n              <div class=\"headers-container\">\n                <ng-container *ngIf=\"header?.imageUrl\">\n                  <img [src]=\"header?.imageUrl\" />\n                </ng-container>\n                <div class=\"headers\">\n                  <span>\n                    {{ header.label | translate }}\n                  </span>\n\n                  <div *ngIf=\"header?.sortable\" class=\"order-icons\">\n                    <app-icon\n                      name=\"Caret-up\"\n                      width=\"12px\"\n                      height=\"12px\"\n                      [color]=\"sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'\"\n                    ></app-icon>\n                    <app-icon\n                      name=\"Caret-down\"\n                      width=\"12px\"\n                      height=\"12px\"\n                      [color]=\"!sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'\"\n                    ></app-icon>\n                  </div>\n                </div>\n              </div>\n            </th>\n            <th class=\"actions-header actions\" *ngIf=\"hasActions\">\n              {{ \"Actions\" | translate }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let row of dataToShow; let i = index\">\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveRowTemplate\"\n              [ngTemplateOutletContext]=\"{\n                rowData: row,\n                level: 0,\n                parentIndex: i,\n                childIndex: null,\n              }\"\n            ></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      <div class=\"empty-table\" *ngIf=\"dataToShow?.length === 0 && !loading\">\n        <div class=\"message-container\">\n          <img src=\"\\assets\\utils\\icon-not-found.png\" alt=\"empty\" />\n          <div class=\"message\">\n            {{ dropiTableConfiguration.emptyMessage ?? \"no data\" | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"pagination\"\n      *ngIf=\"\n        dropiTableConfiguration?.showPaginator && !hidePaginator && !loading\n      \"\n    >\n      <div class=\"page-size-selector\">\n        <label>{{ \"Show\" | translate }}</label>\n        <select (change)=\"onChangePageSize($event)\">\n          <option\n            *ngFor=\"let size of dropiTableConfiguration?.pageSizeConfiguration\"\n            [selected]=\"pageSize === size\"\n            [value]=\"size\"\n          >\n            {{ size }}\n          </option>\n        </select>\n      </div>\n\n      <app-dropi-paginator\n        [totalPages]=\"totalPages\"\n        [currentPage]=\"currentPage\"\n        [isNotTotalPages]=\"isCursorPagination\"\n        (pageChange)=\"goToPage($event)\"\n      ></app-dropi-paginator>\n    </div>\n  </div>\n\n  <!-- Template recursivo para filas multinivel -->\n  <ng-template\n    #recursiveRowTemplate\n    let-rowData=\"rowData\"\n    let-level=\"level\"\n    let-parentIndex=\"parentIndex\"\n    let-childIndex=\"childIndex\"\n  >\n    <tr class=\"table-row\" [ngClass]=\"{ 'sub-row': level > 0 }\">\n      <td *ngIf=\"dropiTableConfiguration?.showCheckbox\">\n        <app-dropi-checkbox\n          [disabled]=\"rowData?.disableCheckbox\"\n          [checked]=\"rowData?.selected\"\n          (onChange)=\"onSelectRow($event, rowData)\"\n        ></app-dropi-checkbox>\n      </td>\n      <td\n        *ngFor=\"let header of headers\"\n        [ngClass]=\"{\n          'low-opacity': header?.disabledColumn,\n          'highlight-column': header?.highlightColumn,\n        }\"\n      >\n        <div class=\"cell-content\" [style.text-align]=\"header?.align || 'left'\">\n          <ng-container\n            [ngTemplateOutlet]=\"labelTypes\"\n            [ngTemplateOutletContext]=\"{\n              item: rowData[header.key],\n            }\"\n          ></ng-container>\n        </div>\n      </td>\n      <td\n        class=\"action-button actions\"\n        [ngClass]=\"{\n          'short-actions': dropiTableConfiguration?.showActionsPerRow\n            ? rowData.actionsPerRow && rowData.actionsPerRow.length <= 3\n            : dropiTableConfiguration?.rowActions &&\n              dropiTableConfiguration.rowActions.length <= 3,\n        }\"\n        *ngIf=\"hasActions\"\n      >\n        <div\n          *ngIf=\"\n            dropiTableConfiguration?.showActionsPerRow\n              ? rowData?.actionsPerRow && rowData.actionsPerRow.length > 3\n              : dropiTableConfiguration?.rowActions &&\n                dropiTableConfiguration.rowActions.length > 3;\n            else shortActions\n          \"\n          #actionsMenu\n        >\n          <app-icon\n            class=\"action-icon\"\n            (click)=\"toggleActions(level === 0 ? parentIndex : parentIndex)\"\n            name=\"Menu-dots-vertical\"\n            width=\"24px\"\n            height=\"24px\"\n            color=\"Gray-Gray-500\"\n          >\n          </app-icon>\n\n          <div class=\"actions-menu fade-in\" *ngIf=\"rowData.showActions\">\n            <div\n              class=\"action-item\"\n              *ngFor=\"\n                let action of dropiTableConfiguration?.showActionsPerRow\n                  ? rowData.actionsPerRow\n                  : dropiTableConfiguration?.rowActions\n              \"\n              (click)=\"onActionClicked(rowData, action, $event)\"\n            >\n              <app-icon\n                [name]=\"action.icon\"\n                width=\"20px\"\n                height=\"20px\"\n                [color]=\"action.iconColor || 'Gray-Gray-200'\"\n              ></app-icon>\n              {{ action.label }}\n            </div>\n          </div>\n        </div>\n\n        <ng-template #shortActions>\n          <div\n            *ngFor=\"\n              let action of dropiTableConfiguration?.showActionsPerRow\n                ? rowData.actionsPerRow\n                : dropiTableConfiguration?.rowActions\n            \"\n          >\n            <app-icon\n              class=\"action-icon\"\n              [name]=\"action.icon\"\n              width=\"24px\"\n              height=\"24px\"\n              [color]=\"action.iconColor || 'Gray-Gray-500'\"\n              (click)=\"onActionClicked(rowData, action, $event)\"\n              [pTooltip]=\"action.label | translate\"\n              tooltipPosition=\"bottom\"\n              tooltipStyleClass=\"my-custom-tooltip\"\n            ></app-icon>\n          </div>\n        </ng-template>\n        &nbsp;\n        <button\n          *ngIf=\"\n            rowData.tot_child?.value &&\n            rowData.tot_child.value != 0 &&\n            rowData.tot_child.value != null\n          \"\n          (click)=\"toggleTableRow(rowData, level > 0)\"\n          class=\"child-arrow-btn\"\n          [title]=\"\n            'Hijos: ' +\n            (rowData.children?.length || 0) +\n            ' | Expandido: ' +\n            (rowData.expanded || false)\n          \"\n        >\n          <i class=\"fas fa-chevron-down\" [class.rotated]=\"rowData.expanded\"></i>\n        </button>\n      </td>\n    </tr>\n\n    <!-- Renderizado recursivo de children -->\n    <ng-container *ngIf=\"rowData.children && rowData.expanded\">\n      <ng-container *ngFor=\"let childRow of rowData.children; let j = index\">\n        <ng-container\n          [ngTemplateOutlet]=\"recursiveRowTemplate\"\n          [ngTemplateOutletContext]=\"{\n            rowData: childRow,\n            level: level + 1,\n            parentIndex: parentIndex,\n            childIndex: j,\n          }\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- Tipos de celda -->\n\n  <ng-template #labelTypes let-item=\"item\" let-type=\"type\">\n    <ng-container [ngSwitch]=\"item.type\">\n      <ng-container *ngSwitchCase=\"'text'\">\n        <div class=\"container\">\n          <span class=\"table-labels\">\n            {{ item.value | translate }}\n          </span>\n          <span class=\"table-labels\" *ngIf=\"item?.subtext\">\n            {{ item.subtext | translate }}\n          </span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'date'\">\n        <div class=\"date-label\">\n          <span>{{ item.value | date: \"dd-MM-yyyy\" }} </span>\n          <span>{{ item.value | date: \"hh:mm a\" }} </span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'tag'\">\n        <app-dropi-tag\n          type=\"secondary\"\n          [state]=\"item.typeTag\"\n          showIcon=\"false\"\n          [text]=\"item.value | translate\"\n        >\n        </app-dropi-tag>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'carrier'\">\n        <div class=\"carrier-label\">\n          <img [src]=\"item.value | carrierImageUrl\" alt=\"carrier\" />\n          <span>{{ item.value | translate | titlecase }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'currency'\">\n        <currency class=\"table-labels\" [value]=\"item.value\"></currency>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'currencyColorMode'\">\n        <currency\n          class=\"table-labels currency-color-mode\"\n          [value]=\"item.value\"\n          [ngStyle]=\"{ '--label-color-table': item.colorLabel }\"\n        ></currency>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'textColorMode'\">\n        <span\n          [ngStyle]=\"{ '--label-color-table': item.colorLabel }\"\n          class=\"table-labels currency-color-mode\"\n          >{{ item.value | translate }}</span\n        >\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'textIcon'\">\n        <div\n          class=\"text-icon-label\"\n          [ngClass]=\"{ 'justify-center': !item?.value }\"\n        >\n          <app-icon\n            [name]=\"item.icon\"\n            width=\"24px\"\n            height=\"24px\"\n            [color]=\"item?.iconColor || 'Gray-Gray-500'\"\n          ></app-icon>\n          <span *ngIf=\"item?.value\">{{ item.value | translate }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'status'\">\n        <div class=\"status-label\">\n          <div class=\"status-dot\">\n            <div\n              [ngClass]=\"\n                'dot dot-' +\n                (item.status ? item.status.toLowerCase() : 'unknown')\n              \"\n            ></div>\n            <span class=\"status-text\">{{ item.status | translate }}</span>\n          </div>\n          <span *ngIf=\"item?.value\" class=\"status-description\">{{\n            item.value\n          }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'textLink'\">\n        <div class=\"conteiner-tex-link\">\n          <div class=\"text-link-label\">\n            <span *ngIf=\"item.value\">{{ item.value | translate }}: </span>\n            <a [href]=\"item?.url\" target=\"_blank\">{{ item?.urlText }}</a>\n          </div>\n          <app-icon\n            *ngIf=\"item.icon\"\n            [name]=\"item.icon\"\n            width=\"18px\"\n            height=\"18px\"\n            color=\"Info-Info-500\"\n          ></app-icon>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'image'\">\n        <div class=\"image-label\">\n          <div class=\"img-container\">\n            <img [src]=\"item.imageUrl\" alt=\"logo\" />\n          </div>\n\n          <span class=\"Body-M-Medium\">{{ item.value }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'country'\">\n        <div class=\"flag-container\">\n          <app-country-flags\n            *ngIf=\"item.flag\"\n            [width]=\"24\"\n            [height]=\"24\"\n            [country]=\"item.flag\"\n            [style]=\"'rectangle'\"\n          ></app-country-flags>\n\n          <span class=\"Body-M-Regular\">{{ item.value }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        {{ item.value | translate }}\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <ng-container *ngIf=\"loading\">\n    <div class=\"loading-container\">\n      <app-spinner></app-spinner>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.cell-container{height:80px}.table-container{border-radius:var(--Border-3);padding:0 var(--Size-4) var(--Size-4) var(--Size-4);background-color:var(--Neutral-White)}.table-container .search-container{margin-block:var(--Size-5);display:flex;flex-direction:column;gap:var(--Size-4)}.table-container .search-container .table-title{padding-block:var(--Size-2)}.table-container .table-wrapper{overflow-x:auto}.table-container .width-actions{width:calc(100% - 104px)}.table-container .width-no-actions{width:100%}.table-container .custom-table{width:auto;min-width:100%;border-collapse:collapse}.table-container .custom-table .headers-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1)}.table-container .custom-table .headers-container img{width:24px;height:24px}.table-container .custom-table .headers-container .headers{display:flex;flex-wrap:nowrap;justify-content:space-around}.table-container .custom-table .headers-container .headers span{font-weight:var(--font-weight-bold);color:var(--Gray-Gray-600);font-size:var(--font-size-xs);text-align:center}.table-container .custom-table .headers-container .headers .order-icons{display:flex;flex-direction:column;flex-wrap:nowrap}.table-container .custom-table .headers-container .headers .order-icons app-icon{height:6px;display:flex}.table-container .custom-table th,.table-container .custom-table td{position:relative;font-weight:var(--font-weight-bold);font-size:var(--font-size-xs);color:var(--Gray-Gray-700);padding:.5rem}.table-container .custom-table th:after,.table-container .custom-table td:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--Gray-Gray-100)}.table-container .custom-table td.actions,.table-container .custom-table th.actions{position:absolute;background-color:var(--Neutral-White);right:0;width:120px;display:flex;justify-content:center;align-items:center}.table-container .custom-table td{height:80px;min-width:100px;padding:var(--Size-3);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.table-container .custom-table td .action-icon{cursor:pointer}.table-container .custom-table td .cell-content{display:inline-block;width:100%}.table-container .custom-table .short-actions{display:flex;gap:var(--Size-2);align-items:center;justify-content:center}.table-container .custom-table .action-button .actions-menu{position:absolute;top:0;right:80px;padding:var(--Size-2);border-radius:var(--Border-2);background-color:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:10}.table-container .custom-table .action-button .actions-menu.fade-in{animation:fadeIn .3s ease-in-out forwards}.table-container .custom-table .action-button .action-item{padding:var(--Size-2);font-size:var(--font-size-xs);color:var(--Gray-Gray-600);height:45px;width:190px;display:flex;gap:var(--Size-4);align-items:center;justify-content:left;cursor:pointer}.table-container .custom-table .action-button .action-item:hover{background-color:var(--Gray-Gray-50)}.table-container .custom-table th{height:55px}.table-container .custom-table th.sortable{-webkit-user-select:none;user-select:none;cursor:pointer}.table-container .custom-table tr.table-row:hover{background-color:var(--Gray-Gray-50);transition:background-color .3s ease}.table-container .custom-table tr.table-row:hover td:last-child{background-color:var(--Gray-Gray-50);transition:background-color .3s ease}.table-container .custom-table .actions-header{width:60px;-webkit-user-select:none;user-select:none}.table-container .custom-table .checkbox-header{padding:var(--Size-3)}.table-container .pagination{margin-top:1rem;display:flex;justify-content:space-between;align-items:center}.table-container .pagination button{padding:.5rem}.table-container .pagination .page-size-selector{display:flex;gap:5px;align-items:baseline}.table-container .pagination .page-size-selector label{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.table-container .pagination .page-size-selector select{width:fit-content;height:29px;border-radius:var(--Border-2);padding:var(--Size-1);border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500);background:var(--Neutral-White)}.table-labels{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);white-space:nowrap}.date-label{display:inline-flex;flex-direction:column}.date-label span{font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600);white-space:nowrap}.carrier-label{display:inline-flex;flex-wrap:nowrap;gap:var(--Size-1)}.carrier-label img{width:24px;border-radius:50%;object-fit:cover}.carrier-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-icon-label{display:inline-flex;flex-wrap:nowrap;gap:var(--Size-2)}.text-icon-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.justify-center{justify-content:center}.conteiner-tex-link{display:flex;gap:var(--Border-2)}.low-opacity{opacity:.5}.highlight-column{background:var(--Primary-Primary-50);border:none!important}.text-link-label{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:var(--Size-1)}.text-link-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-link-label a{color:var(--Info-Info-500);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}app-icon{display:flex;align-items:flex-start}.image-label{display:inline-flex;flex-direction:column;justify-content:center;align-self:stretch}.image-label .img-container{display:flex;width:24px;padding-bottom:var(--Size-1, 4px);align-items:center;gap:10px}.image-label .img-container img{border-radius:60px;display:flex;height:24px;justify-content:center;align-items:center;flex:1 0 0}.image-label span{overflow:hidden;color:var(--Gray-600, #475066);text-overflow:ellipsis}.container{display:inline-flex;flex-direction:column}.child-arrow-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:.5rem;border-radius:.25rem}.child-arrow-btn .fa-chevron-down{transition:transform .2s}.child-arrow-btn .fa-chevron-down.rotated{transform:rotate(180deg)}.sub-row-container{background-color:var(--light-gray)}.sub-table-container{overflow:hidden;max-height:0;height:auto;font-weight:var(--font-weight-medium);gap:var(--Size-3);font-size:var(--font-size-s);cursor:pointer;opacity:0;padding:0 var(--Size-3) 0 var(--Size-8)}.sub-table-container.expanded{height:200px;opacity:1}.sub-row td:first-child{padding-left:2rem!important}.status-label{display:inline-flex;flex-direction:column;flex-wrap:nowrap;gap:var(--Size-1)}.status-label .status-description{font-weight:var(--font-weight-regular);font-size:var(--font-size-s);color:var(--Gray-Gray-600)}.status-label .status-dot{display:flex;gap:var(--Size-2);flex-wrap:nowrap;align-items:center}.status-label .status-text{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.status-label .dot{width:6px;height:6px;border-radius:50%}.status-label .dot-low{background-color:var(--Success-Success-500)}.status-label .dot-medium{background-color:var(--Warning-Warning-500)}.status-label .dot-high{background-color:var(--Error-Error-500)}.loading-container{height:25%;width:100%;display:flex;align-items:center;justify-content:center}.empty-table{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;flex:1 0 0;align-self:stretch;min-height:400px}.empty-table .message-container{display:flex;width:420px;padding:var(--Size-4, 16px);flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.empty-table .message-container img{height:60px;width:auto}.empty-table .message-container .message{color:var(--Gray-500, #69738c);text-align:center}.flag-container{display:flex;align-items:center;gap:var(--Size-3)}.currency-color-mode{color:var(--label-color-table, inherit)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.custom-table.has-checkbox th.checkbox-header,.custom-table.has-checkbox td:first-child{width:fit-content;min-width:fit-content;max-width:fit-content;text-align:center;padding:8px!important}.custom-table.has-checkbox th.checkbox-header app-dropi-checkbox,.custom-table.has-checkbox td:first-child app-dropi-checkbox{display:flex;justify-content:center;align-items:center;margin:0 auto}.custom-table:not(.has-checkbox) th,.custom-table:not(.has-checkbox) td{min-width:100px;padding:var(--Size-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: DropiPaginatorComponent, selector: "app-dropi-paginator", inputs: ["totalPages", "currentPage", "disabled", "isNotTotalPages", "maxVisiblePages"], outputs: ["pageChange"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: DropiCheckboxComponent, selector: "app-dropi-checkbox", inputs: ["checked", "disabled"], outputs: ["onChange"] }, { kind: "component", type: CurrencyComponentStub$1, selector: "currency", inputs: ["value"] }, { kind: "pipe", type: CarrierImageUrlStub, name: "carrierImageUrl" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["inputProperties", "disabled", "showObligatoryAsterisk", "showPassword", "fixedLabel", "showAsterisk"] }, { kind: "component", type: SpinnerComponentStub, selector: "app-spinner" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: CountryFlagsComponent, selector: "app-country-flags", inputs: ["country", "width", "height", "style"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiTableComponent, isStandalone: true, selector: "app-dropi-table", inputs: { headers: "headers", data: "data", childData: "childData", visibleRowsChildrens: "visibleRowsChildrens", dropiTableConfiguration: "dropiTableConfiguration", dropiTableBackendParams: "dropiTableBackendParams", loading: "loading", isCursorPagination: "isCursorPagination" }, outputs: { rowsSelected: "rowsSelected", actionClicked: "actionClicked", onPageChange: "onPageChange", onSizeChange: "onSizeChange", onSortChange: "onSortChange", onSearchChange: "onSearchChange", expandChildren: "expandChildren" }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "checkboxes", predicate: DropiCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"dropiTableConfiguration\">\n  <div class=\"table-container\" *ngIf=\"!loading\">\n    <div class=\"search-container\" *ngIf=\"dropiTableConfiguration?.showSearch\">\n      <h3 class=\"table-title\">\n        {{ dropiTableConfiguration?.title | translate }}\n      </h3>\n      <app-input\n        [inputProperties]=\"{\n          label: 'Search',\n          placeholder: 'Search',\n          formControl: searchTerm,\n        }\"\n      ></app-input>\n    </div>\n\n    <div\n      class=\"table-wrapper\"\n      [ngClass]=\"hasActions ? 'width-actions' : 'width-no-actions'\"\n    >\n      <table\n        class=\"custom-table\"\n        [ngClass]=\"{\n          'has-checkbox': dropiTableConfiguration?.showCheckbox,\n        }\"\n      >\n        <thead>\n          <tr>\n            <th\n              class=\"checkbox-header\"\n              *ngIf=\"dropiTableConfiguration?.showCheckbox\"\n            >\n              <app-dropi-checkbox\n                (onChange)=\"onSelectAll($event)\"\n              ></app-dropi-checkbox>\n            </th>\n            <th\n              *ngFor=\"let header of headers\"\n              (click)=\"onSort(header)\"\n              [ngClass]=\"{\n                sortable: header?.sortable,\n                'low-opacity': header?.disabledColumn,\n                'highlight-column': header?.highlightColumn,\n              }\"\n              [style.text-align]=\"header?.align || 'left'\"\n            >\n              <div class=\"headers-container\">\n                <ng-container *ngIf=\"header?.imageUrl\">\n                  <img [src]=\"header?.imageUrl\" />\n                </ng-container>\n                <div class=\"headers\">\n                  <span>\n                    {{ header.label | translate }}\n                  </span>\n\n                  <div *ngIf=\"header?.sortable\" class=\"order-icons\">\n                    <app-icon\n                      name=\"Caret-up\"\n                      width=\"12px\"\n                      height=\"12px\"\n                      [color]=\"sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'\"\n                    ></app-icon>\n                    <app-icon\n                      name=\"Caret-down\"\n                      width=\"12px\"\n                      height=\"12px\"\n                      [color]=\"!sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'\"\n                    ></app-icon>\n                  </div>\n                </div>\n              </div>\n            </th>\n            <th class=\"actions-header actions\" *ngIf=\"hasActions\">\n              {{ \"Actions\" | translate }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let row of dataToShow; let i = index\">\n            <ng-container\n              [ngTemplateOutlet]=\"recursiveRowTemplate\"\n              [ngTemplateOutletContext]=\"{\n                rowData: row,\n                level: 0,\n                parentIndex: i,\n                childIndex: null,\n              }\"\n            ></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      <div class=\"empty-table\" *ngIf=\"dataToShow?.length === 0 && !loading\">\n        <div class=\"message-container\">\n          <img src=\"\\assets\\utils\\icon-not-found.png\" alt=\"empty\" />\n          <div class=\"message\">\n            {{ dropiTableConfiguration.emptyMessage ?? \"no data\" | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"pagination\"\n      *ngIf=\"\n        dropiTableConfiguration?.showPaginator && !hidePaginator && !loading\n      \"\n    >\n      <div class=\"page-size-selector\">\n        <label>{{ \"Show\" | translate }}</label>\n        <select (change)=\"onChangePageSize($event)\">\n          <option\n            *ngFor=\"let size of dropiTableConfiguration?.pageSizeConfiguration\"\n            [selected]=\"pageSize === size\"\n            [value]=\"size\"\n          >\n            {{ size }}\n          </option>\n        </select>\n      </div>\n\n      <app-dropi-paginator\n        [totalPages]=\"totalPages\"\n        [currentPage]=\"currentPage\"\n        [isNotTotalPages]=\"isCursorPagination\"\n        (pageChange)=\"goToPage($event)\"\n      ></app-dropi-paginator>\n    </div>\n  </div>\n\n  <!-- Template recursivo para filas multinivel -->\n  <ng-template\n    #recursiveRowTemplate\n    let-rowData=\"rowData\"\n    let-level=\"level\"\n    let-parentIndex=\"parentIndex\"\n    let-childIndex=\"childIndex\"\n  >\n    <tr class=\"table-row\" [ngClass]=\"{ 'sub-row': level > 0 }\">\n      <td *ngIf=\"dropiTableConfiguration?.showCheckbox\">\n        <app-dropi-checkbox\n          [disabled]=\"rowData?.disableCheckbox\"\n          [checked]=\"rowData?.selected\"\n          (onChange)=\"onSelectRow($event, rowData)\"\n        ></app-dropi-checkbox>\n      </td>\n      <td\n        *ngFor=\"let header of headers\"\n        [ngClass]=\"{\n          'low-opacity': header?.disabledColumn,\n          'highlight-column': header?.highlightColumn,\n        }\"\n      >\n        <div class=\"cell-content\" [style.text-align]=\"header?.align || 'left'\">\n          <ng-container\n            [ngTemplateOutlet]=\"labelTypes\"\n            [ngTemplateOutletContext]=\"{\n              item: rowData[header.key],\n            }\"\n          ></ng-container>\n        </div>\n      </td>\n      <td\n        class=\"action-button actions\"\n        [ngClass]=\"{\n          'short-actions': dropiTableConfiguration?.showActionsPerRow\n            ? rowData.actionsPerRow && rowData.actionsPerRow.length <= 3\n            : dropiTableConfiguration?.rowActions &&\n              dropiTableConfiguration.rowActions.length <= 3,\n        }\"\n        *ngIf=\"hasActions\"\n      >\n        <div\n          *ngIf=\"\n            dropiTableConfiguration?.showActionsPerRow\n              ? rowData?.actionsPerRow && rowData.actionsPerRow.length > 3\n              : dropiTableConfiguration?.rowActions &&\n                dropiTableConfiguration.rowActions.length > 3;\n            else shortActions\n          \"\n          #actionsMenu\n        >\n          <app-icon\n            class=\"action-icon\"\n            (click)=\"toggleActions(level === 0 ? parentIndex : parentIndex)\"\n            name=\"Menu-dots-vertical\"\n            width=\"24px\"\n            height=\"24px\"\n            color=\"Gray-Gray-500\"\n          >\n          </app-icon>\n\n          <div class=\"actions-menu fade-in\" *ngIf=\"rowData.showActions\">\n            <div\n              class=\"action-item\"\n              *ngFor=\"\n                let action of dropiTableConfiguration?.showActionsPerRow\n                  ? rowData.actionsPerRow\n                  : dropiTableConfiguration?.rowActions\n              \"\n              (click)=\"onActionClicked(rowData, action, $event)\"\n            >\n              <app-icon\n                [name]=\"action.icon\"\n                width=\"20px\"\n                height=\"20px\"\n                [color]=\"action.iconColor || 'Gray-Gray-200'\"\n              ></app-icon>\n              {{ action.label }}\n            </div>\n          </div>\n        </div>\n\n        <ng-template #shortActions>\n          <div\n            *ngFor=\"\n              let action of dropiTableConfiguration?.showActionsPerRow\n                ? rowData.actionsPerRow\n                : dropiTableConfiguration?.rowActions\n            \"\n          >\n            <app-icon\n              class=\"action-icon\"\n              [name]=\"action.icon\"\n              width=\"24px\"\n              height=\"24px\"\n              [color]=\"action.iconColor || 'Gray-Gray-500'\"\n              (click)=\"onActionClicked(rowData, action, $event)\"\n              [pTooltip]=\"action.label | translate\"\n              tooltipPosition=\"bottom\"\n              tooltipStyleClass=\"my-custom-tooltip\"\n            ></app-icon>\n          </div>\n        </ng-template>\n        &nbsp;\n        <button\n          *ngIf=\"\n            rowData.tot_child?.value &&\n            rowData.tot_child.value != 0 &&\n            rowData.tot_child.value != null\n          \"\n          (click)=\"toggleTableRow(rowData, level > 0)\"\n          class=\"child-arrow-btn\"\n          [title]=\"\n            'Hijos: ' +\n            (rowData.children?.length || 0) +\n            ' | Expandido: ' +\n            (rowData.expanded || false)\n          \"\n        >\n          <i class=\"fas fa-chevron-down\" [class.rotated]=\"rowData.expanded\"></i>\n        </button>\n      </td>\n    </tr>\n\n    <!-- Renderizado recursivo de children -->\n    <ng-container *ngIf=\"rowData.children && rowData.expanded\">\n      <ng-container *ngFor=\"let childRow of rowData.children; let j = index\">\n        <ng-container\n          [ngTemplateOutlet]=\"recursiveRowTemplate\"\n          [ngTemplateOutletContext]=\"{\n            rowData: childRow,\n            level: level + 1,\n            parentIndex: parentIndex,\n            childIndex: j,\n          }\"\n        ></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- Tipos de celda -->\n\n  <ng-template #labelTypes let-item=\"item\" let-type=\"type\">\n    <ng-container [ngSwitch]=\"item.type\">\n      <ng-container *ngSwitchCase=\"'text'\">\n        <div class=\"container\">\n          <span class=\"table-labels\">\n            {{ item.value | translate }}\n          </span>\n          <span class=\"table-labels\" *ngIf=\"item?.subtext\">\n            {{ item.subtext | translate }}\n          </span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'date'\">\n        <div class=\"date-label\">\n          <span>{{ item.value | date: \"dd-MM-yyyy\" }} </span>\n          <span>{{ item.value | date: \"hh:mm a\" }} </span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'tag'\">\n        <app-dropi-tag\n          type=\"secondary\"\n          [state]=\"item.typeTag\"\n          showIcon=\"false\"\n          [text]=\"item.value | translate\"\n        >\n        </app-dropi-tag>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'carrier'\">\n        <div class=\"carrier-label\">\n          <img [src]=\"item.value | carrierImageUrl\" alt=\"carrier\" />\n          <span>{{ item.value | translate | titlecase }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'currency'\">\n        <currency class=\"table-labels\" [value]=\"item.value\"></currency>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'currencyColorMode'\">\n        <currency\n          class=\"table-labels currency-color-mode\"\n          [value]=\"item.value\"\n          [ngStyle]=\"{ '--label-color-table': item.colorLabel }\"\n        ></currency>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'textColorMode'\">\n        <span\n          [ngStyle]=\"{ '--label-color-table': item.colorLabel }\"\n          class=\"table-labels currency-color-mode\"\n          >{{ item.value | translate }}</span\n        >\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'textIcon'\">\n        <div\n          class=\"text-icon-label\"\n          [ngClass]=\"{ 'justify-center': !item?.value }\"\n        >\n          <app-icon\n            [name]=\"item.icon\"\n            width=\"24px\"\n            height=\"24px\"\n            [color]=\"item?.iconColor || 'Gray-Gray-500'\"\n          ></app-icon>\n          <span *ngIf=\"item?.value\">{{ item.value | translate }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'status'\">\n        <div class=\"status-label\">\n          <div class=\"status-dot\">\n            <div\n              [ngClass]=\"\n                'dot dot-' +\n                (item.status ? item.status.toLowerCase() : 'unknown')\n              \"\n            ></div>\n            <span class=\"status-text\">{{ item.status | translate }}</span>\n          </div>\n          <span *ngIf=\"item?.value\" class=\"status-description\">{{\n            item.value\n          }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'textLink'\">\n        <div class=\"conteiner-tex-link\">\n          <div class=\"text-link-label\">\n            <span *ngIf=\"item.value\">{{ item.value | translate }}: </span>\n            <a [href]=\"item?.url\" target=\"_blank\">{{ item?.urlText }}</a>\n          </div>\n          <app-icon\n            *ngIf=\"item.icon\"\n            [name]=\"item.icon\"\n            width=\"18px\"\n            height=\"18px\"\n            color=\"Info-Info-500\"\n          ></app-icon>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'image'\">\n        <div class=\"image-label\">\n          <div class=\"img-container\">\n            <img [src]=\"item.imageUrl\" alt=\"logo\" />\n          </div>\n\n          <span class=\"Body-M-Medium\">{{ item.value }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'country'\">\n        <div class=\"flag-container\">\n          <app-country-flags\n            *ngIf=\"item.flag\"\n            [width]=\"24\"\n            [height]=\"24\"\n            [country]=\"item.flag\"\n            [style]=\"'rectangle'\"\n          ></app-country-flags>\n\n          <span class=\"Body-M-Regular\">{{ item.value }}</span>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        {{ item.value | translate }}\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <ng-container *ngIf=\"loading\">\n    <div class=\"loading-container\">\n      <app-spinner></app-spinner>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.cell-container{height:80px}.table-container{border-radius:var(--Border-3);padding:0 var(--Size-4) var(--Size-4) var(--Size-4);background-color:var(--Neutral-White)}.table-container .search-container{margin-block:var(--Size-5);display:flex;flex-direction:column;gap:var(--Size-4)}.table-container .search-container .table-title{padding-block:var(--Size-2)}.table-container .table-wrapper{overflow-x:auto}.table-container .width-actions{width:calc(100% - 104px)}.table-container .width-no-actions{width:100%}.table-container .custom-table{width:auto;min-width:100%;border-collapse:collapse}.table-container .custom-table .headers-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1)}.table-container .custom-table .headers-container img{width:24px;height:24px}.table-container .custom-table .headers-container .headers{display:flex;flex-wrap:nowrap;justify-content:space-around}.table-container .custom-table .headers-container .headers span{font-weight:var(--font-weight-bold);color:var(--Gray-Gray-600);font-size:var(--font-size-xs);text-align:center}.table-container .custom-table .headers-container .headers .order-icons{display:flex;flex-direction:column;flex-wrap:nowrap}.table-container .custom-table .headers-container .headers .order-icons app-icon{height:6px;display:flex}.table-container .custom-table th,.table-container .custom-table td{position:relative;font-weight:var(--font-weight-bold);font-size:var(--font-size-xs);color:var(--Gray-Gray-700);padding:.5rem}.table-container .custom-table th:after,.table-container .custom-table td:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--Gray-Gray-100)}.table-container .custom-table td.actions,.table-container .custom-table th.actions{position:absolute;background-color:var(--Neutral-White);right:0;width:120px;display:flex;justify-content:center;align-items:center}.table-container .custom-table td{height:80px;min-width:100px;padding:var(--Size-3);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.table-container .custom-table td .action-icon{cursor:pointer}.table-container .custom-table td .cell-content{display:inline-block;width:100%}.table-container .custom-table .short-actions{display:flex;gap:var(--Size-2);align-items:center;justify-content:center}.table-container .custom-table .action-button .actions-menu{position:absolute;top:0;right:80px;padding:var(--Size-2);border-radius:var(--Border-2);background-color:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:10}.table-container .custom-table .action-button .actions-menu.fade-in{animation:fadeIn .3s ease-in-out forwards}.table-container .custom-table .action-button .action-item{padding:var(--Size-2);font-size:var(--font-size-xs);color:var(--Gray-Gray-600);height:45px;width:190px;display:flex;gap:var(--Size-4);align-items:center;justify-content:left;cursor:pointer}.table-container .custom-table .action-button .action-item:hover{background-color:var(--Gray-Gray-50)}.table-container .custom-table th{height:55px}.table-container .custom-table th.sortable{-webkit-user-select:none;user-select:none;cursor:pointer}.table-container .custom-table tr.table-row:hover{background-color:var(--Gray-Gray-50);transition:background-color .3s ease}.table-container .custom-table tr.table-row:hover td:last-child{background-color:var(--Gray-Gray-50);transition:background-color .3s ease}.table-container .custom-table .actions-header{width:60px;-webkit-user-select:none;user-select:none}.table-container .custom-table .checkbox-header{padding:var(--Size-3)}.table-container .pagination{margin-top:1rem;display:flex;justify-content:space-between;align-items:center}.table-container .pagination button{padding:.5rem}.table-container .pagination .page-size-selector{display:flex;gap:5px;align-items:baseline}.table-container .pagination .page-size-selector label{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.table-container .pagination .page-size-selector select{width:fit-content;height:29px;border-radius:var(--Border-2);padding:var(--Size-1);border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500);background:var(--Neutral-White)}.table-labels{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);white-space:nowrap}.date-label{display:inline-flex;flex-direction:column}.date-label span{font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600);white-space:nowrap}.carrier-label{display:inline-flex;flex-wrap:nowrap;gap:var(--Size-1)}.carrier-label img{width:24px;border-radius:50%;object-fit:cover}.carrier-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-icon-label{display:inline-flex;flex-wrap:nowrap;gap:var(--Size-2)}.text-icon-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.justify-center{justify-content:center}.conteiner-tex-link{display:flex;gap:var(--Border-2)}.low-opacity{opacity:.5}.highlight-column{background:var(--Primary-Primary-50);border:none!important}.text-link-label{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:var(--Size-1)}.text-link-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-link-label a{color:var(--Info-Info-500);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}app-icon{display:flex;align-items:flex-start}.image-label{display:inline-flex;flex-direction:column;justify-content:center;align-self:stretch}.image-label .img-container{display:flex;width:24px;padding-bottom:var(--Size-1, 4px);align-items:center;gap:10px}.image-label .img-container img{border-radius:60px;display:flex;height:24px;justify-content:center;align-items:center;flex:1 0 0}.image-label span{overflow:hidden;color:var(--Gray-600, #475066);text-overflow:ellipsis}.container{display:inline-flex;flex-direction:column}.child-arrow-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:.5rem;border-radius:.25rem}.child-arrow-btn .fa-chevron-down{transition:transform .2s}.child-arrow-btn .fa-chevron-down.rotated{transform:rotate(180deg)}.sub-row-container{background-color:var(--light-gray)}.sub-table-container{overflow:hidden;max-height:0;height:auto;font-weight:var(--font-weight-medium);gap:var(--Size-3);font-size:var(--font-size-s);cursor:pointer;opacity:0;padding:0 var(--Size-3) 0 var(--Size-8)}.sub-table-container.expanded{height:200px;opacity:1}.sub-row td:first-child{padding-left:2rem!important}.status-label{display:inline-flex;flex-direction:column;flex-wrap:nowrap;gap:var(--Size-1)}.status-label .status-description{font-weight:var(--font-weight-regular);font-size:var(--font-size-s);color:var(--Gray-Gray-600)}.status-label .status-dot{display:flex;gap:var(--Size-2);flex-wrap:nowrap;align-items:center}.status-label .status-text{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.status-label .dot{width:6px;height:6px;border-radius:50%}.status-label .dot-low{background-color:var(--Success-Success-500)}.status-label .dot-medium{background-color:var(--Warning-Warning-500)}.status-label .dot-high{background-color:var(--Error-Error-500)}.loading-container{height:25%;width:100%;display:flex;align-items:center;justify-content:center}.empty-table{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;flex:1 0 0;align-self:stretch;min-height:400px}.empty-table .message-container{display:flex;width:420px;padding:var(--Size-4, 16px);flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.empty-table .message-container img{height:60px;width:auto}.empty-table .message-container .message{color:var(--Gray-500, #69738c);text-align:center}.flag-container{display:flex;align-items:center;gap:var(--Size-3)}.currency-color-mode{color:var(--label-color-table, inherit)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.custom-table.has-checkbox th.checkbox-header,.custom-table.has-checkbox td:first-child{width:fit-content;min-width:fit-content;max-width:fit-content;text-align:center;padding:8px!important}.custom-table.has-checkbox th.checkbox-header app-dropi-checkbox,.custom-table.has-checkbox td:first-child app-dropi-checkbox{display:flex;justify-content:center;align-items:center;margin:0 auto}.custom-table:not(.has-checkbox) th,.custom-table:not(.has-checkbox) td{min-width:100px;padding:var(--Size-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: DropiPaginatorComponent, selector: "app-dropi-paginator", inputs: ["totalPages", "currentPage", "disabled", "isNotTotalPages", "maxVisiblePages"], outputs: ["pageChange"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: DropiCheckboxComponent, selector: "app-dropi-checkbox", inputs: ["checked", "disabled"], outputs: ["onChange"] }, { kind: "component", type: CurrencyComponentStub$1, selector: "currency", inputs: ["value"] }, { kind: "pipe", type: CarrierImageUrlStub, name: "carrierImageUrl" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["inputProperties", "disabled", "showObligatoryAsterisk", "showPassword", "fixedLabel", "showAsterisk"] }, { kind: "component", type: SpinnerComponentStub, selector: "app-spinner" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: CountryFlagsComponent, selector: "app-country-flags", inputs: ["country", "width", "height", "style"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiTableComponent, decorators: [{
             type: Component,
@@ -4343,7 +4372,7 @@ class CardProductComponent {
         return this.generateMixedStockDivs();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardProductComponent, deps: [{ token: "SettingsService" }, { token: "ProductstService" }, { token: "OrderManualService" }, { token: "Router" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardProductComponent, isStandalone: true, selector: "dropi-card-product", inputs: { product: "product", state: "state", aS: "aS", bettaTester: "bettaTester" }, outputs: { onAddToCart: "onAddToCart", onProductClick: "onProductClick", changeFavorite: "changeFavorite" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getRandomCardClass()\" [style]=\"getCardStyles()\" (click)=\"getProductDetails()\">\n  <app-beta-tag *ngIf=\"bettaTester\"></app-beta-tag>\n  <!-- Contenedor de imagen con altura fija de 214px como en Figma -->\n  <div [class]=\"getRandomImageContainerClass()\" [style]=\"getImageContainerStyles()\">\n    <div [class]=\"getRandomImageClass()\" [style]=\"getImageStyles()\">\n      <!-- Imagen del producto con manejo de errores -->\n      <img\n        [src]=\"imageUrl\"\n        [alt]=\"product?.name || 'Product Image'\"\n        (error)=\"onError($event)\"\n        [ngClass]=\"{ 'error-img': imageError }\"\n        style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 8px\"\n      />\n\n      <!-- Tags superpuestos en la esquina superior izquierda -->\n      <div\n        [class]=\"getRandomTagsClass()\"\n        [style]=\"getTagsContainerStyles()\"\n        *ngIf=\"productTags?.length > 0\"\n      >\n        <div [class]=\"getRandomTagsRowClass()\" [style]=\"getTagsRowStyles()\">\n          <app-dropi-tag\n            *ngFor=\"let tag of productTags.slice(0, 2)\"\n            [type]=\"tag?.type\"\n            [state]=\"tag?.state\"\n            [showIcon]=\"tag?.showIcon\"\n            [icon]=\"tag?.icon\"\n            [text]=\"tag?.text\"\n          >\n          </app-dropi-tag>\n        </div>\n      </div>\n\n      <!-- Bot\u00F3n de favorito superpuesto en la esquina inferior derecha -->\n      <div\n        [class]=\"getRandomFavoriteButtonClass()\"\n        [ngClass]=\"{ 'favorite-button': true, 'favorite-active': product?.favorite }\"\n        [style]=\"getFavoriteButtonStyles()\"\n        (click)=\"handleFavoriteToggle(); $event.stopPropagation()\"\n      >\n        <app-icon\n          [name]=\"product?.favorite ? 'Heart-solid' : 'Heart'\"\n          width=\"18px\"\n          height=\"18px\"\n          [color]=\"product?.favorite ? '#fff' : '#858ea6'\"\n          [style]=\"{ display: 'flex', 'align-items': 'center', 'justify-content': 'center' }\"\n        >\n        </app-icon>\n      </div>\n    </div>\n  </div>\n\n  <!-- Informaci\u00F3n del producto -->\n  <div [class]=\"getRandomProductInfoClass()\" [style]=\"getProductInfoStyles()\">\n    <!-- Header con categor\u00EDa y stock -->\n    <div [class]=\"getRandomProductHeaderClass()\" [style]=\"getProductHeaderStyles()\">\n      <dropi-ilustration-icon\n        *ngIf=\"product?.supplier?.icon\"\n        [style]=\"getRandomProviderCategoryStyles()\"\n        [type]=\"'insignia'\"\n        [stateInsignia]=\"product?.supplier?.icon\"\n        [tagProduct]=\"true\"\n      ></dropi-ilustration-icon>\n\n      <span\n        [class]=\"getRandomCategoryClass()\"\n        [style]=\"getCategoryStyles()\"\n        *ngIf=\"product?.categories && product?.categories.length > 0\"\n        >{{ product?.categories[0]?.name | adjustName }}</span\n      >\n\n      <div [class]=\"getRandomStockInfoClass()\" [style]=\"getStockInfoStyles()\">\n        <span [class]=\"getRandomStockLabelClass()\" [style]=\"getStockLabelStyles()\">{{ \"stock\" | translate }}:</span>\n\n        <!-- Stocks mezclados aleatoriamente (real + falsos) -->\n        <span\n          *ngFor=\"let stockItem of getMixedStockDivs()\"\n          [class]=\"stockItem.class\"\n          [style]=\"stockItem.isReal ? getStockValueStyles() : getFakeStockStyles()\"\n        >\n          {{ stockItem.value }}\n        </span>\n\n        <span\n          *ngIf=\"product?.private_user_stock && product?.private_user_stock > 0\"\n          class=\"stock-private-user\"\n          [style]=\"{\n            'font-weight': '500',\n            padding: '0px 6px',\n            'margin-left': '6px',\n            'border-radius': '4px',\n            background: 'var(--Success-Success-50, #e7f8f3)',\n            color: 'var(--Success-Success-500, #0abb87)',\n            'text-align': 'center'\n          }\"\n        >\n          {{ product?.private_user_stock }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nombre del producto -->\n    <h3 [class]=\"getRandomProductNameClass()\" [style]=\"getProductNameStyles()\">\n      {{ product?.name | adjustName }}\n    </h3>\n\n    <!-- Proveedor -->\n    <div [class]=\"getRandomSupplierInfoClass()\" [style]=\"getSupplierInfoStyles()\">\n      <span [class]=\"getRandomSupplierLabelClass()\" [style]=\"getSupplierLabelStyles()\"\n        >{{ \"supplier\" | translate }}:</span\n      >\n      <span\n        [class]=\"getRandomSupplierNameClass()\"\n        [style]=\"getSupplierNameStyles()\"\n        (click)=\"getProvidersDetails(); $event.stopPropagation()\"\n        >{{ product?.supplier?.name | adjustName }}</span\n      >\n    </div>\n\n    <!-- Precios -->\n    <div [class]=\"getRandomPriceContainerClass()\" [style]=\"getPriceContainerStyles()\">\n      <div [class]=\"getRandomPriceItemClass()\" [style]=\"getPriceItemStyles()\">\n        <span [class]=\"getRandomPriceLabelClass()\" [style]=\"getPriceLabelStyles()\"\n          >{{ \"supplier price\" | translate }}</span\n        >\n\n        <!-- Precios de proveedor mezclados aleatoriamente (real + falsos) -->\n        <currency\n          *ngFor=\"let priceItem of getMixedSupplierPriceDivs()\"\n          [class]=\"priceItem.class\"\n          [style]=\"priceItem.isReal ? getPriceValueStyles() : getFakePriceStyles()\"\n          [value]=\"priceItem.value\"\n        >\n        </currency>\n      </div>\n      <div [class]=\"getRandomPriceItemClass()\" [style]=\"getPriceItemStyles()\">\n        <span [class]=\"getRandomPriceLabelClass()\" [style]=\"getPriceLabelStyles()\"\n          >{{ \"suggested price\" | translate }}</span\n        >\n\n        <!-- Precios sugeridos mezclados aleatoriamente (real + falsos) -->\n        <currency\n          *ngFor=\"let priceItem of getMixedSuggestedPriceDivs()\"\n          [class]=\"priceItem.class\"\n          [style]=\"priceItem.isReal ? getPriceValueStyles() : getFakePriceStyles()\"\n          [value]=\"priceItem.value\"\n        >\n        </currency>\n      </div>\n    </div>\n  </div>\n\n  <!-- Separador horizontal -->\n  <div [class]=\"getRandomSeparatorClass()\" [style]=\"getSeparatorStyles()\"></div>\n\n  <!-- Bot\u00F3n de acci\u00F3n principal -->\n  <div\n    [class]=\"getRandomActionButtonClass()\"\n    [style]=\"getActionButtonStyles()\"\n    (click)=\"handleAddToCart(); $event.stopPropagation()\"\n  >\n    <app-icon\n      name=\"Shopping-cart-arrow-rigth\"\n      width=\"20px\"\n      height=\"20px\"\n      color=\"#f49a3d\"\n      [style]=\"{ display: 'flex', 'align-items': 'center', 'justify-content': 'center' }\"\n    ></app-icon>\n    <span [class]=\"getRandomButtonTextClass()\" [style]=\"getButtonTextStyles()\"\n      >{{ \"send to client\" | translate }}</span\n    >\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: CurrencyComponentStub, selector: "currency", inputs: ["value", "class", "style"] }, { kind: "pipe", type: AdjustNamePipeStub, name: "adjustName" }, { kind: "component", type: BetaTagComponentStub, selector: "app-beta-tag" }, { kind: "component", type: DropiIlustrationIconComponent, selector: "dropi-ilustration-icon", inputs: ["type", "state", "stateInsignia", "tagProduct"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardProductComponent, isStandalone: true, selector: "dropi-card-product", inputs: { product: "product", state: "state", aS: "aS", bettaTester: "bettaTester" }, outputs: { onAddToCart: "onAddToCart", onProductClick: "onProductClick", changeFavorite: "changeFavorite" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getRandomCardClass()\" [style]=\"getCardStyles()\" (click)=\"getProductDetails()\">\n  <app-beta-tag *ngIf=\"bettaTester\"></app-beta-tag>\n  <!-- Contenedor de imagen con altura fija de 214px como en Figma -->\n  <div [class]=\"getRandomImageContainerClass()\" [style]=\"getImageContainerStyles()\">\n    <div [class]=\"getRandomImageClass()\" [style]=\"getImageStyles()\">\n      <!-- Imagen del producto con manejo de errores -->\n      <img\n        [src]=\"imageUrl\"\n        [alt]=\"product?.name || 'Product Image'\"\n        (error)=\"onError($event)\"\n        [ngClass]=\"{ 'error-img': imageError }\"\n        style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 8px\"\n      />\n\n      <!-- Tags superpuestos en la esquina superior izquierda -->\n      <div\n        [class]=\"getRandomTagsClass()\"\n        [style]=\"getTagsContainerStyles()\"\n        *ngIf=\"productTags?.length > 0\"\n      >\n        <div [class]=\"getRandomTagsRowClass()\" [style]=\"getTagsRowStyles()\">\n          <app-dropi-tag\n            *ngFor=\"let tag of productTags.slice(0, 2)\"\n            [type]=\"tag?.type\"\n            [state]=\"tag?.state\"\n            [showIcon]=\"tag?.showIcon\"\n            [icon]=\"tag?.icon\"\n            [text]=\"tag?.text\"\n          >\n          </app-dropi-tag>\n        </div>\n      </div>\n\n      <!-- Bot\u00F3n de favorito superpuesto en la esquina inferior derecha -->\n      <div\n        [class]=\"getRandomFavoriteButtonClass()\"\n        [ngClass]=\"{ 'favorite-button': true, 'favorite-active': product?.favorite }\"\n        [style]=\"getFavoriteButtonStyles()\"\n        (click)=\"handleFavoriteToggle(); $event.stopPropagation()\"\n      >\n        <app-icon\n          [name]=\"product?.favorite ? 'Heart-solid' : 'Heart'\"\n          width=\"18px\"\n          height=\"18px\"\n          [color]=\"product?.favorite ? '#fff' : '#858ea6'\"\n          [style]=\"{ display: 'flex', 'align-items': 'center', 'justify-content': 'center' }\"\n        >\n        </app-icon>\n      </div>\n    </div>\n  </div>\n\n  <!-- Informaci\u00F3n del producto -->\n  <div [class]=\"getRandomProductInfoClass()\" [style]=\"getProductInfoStyles()\">\n    <!-- Header con categor\u00EDa y stock -->\n    <div [class]=\"getRandomProductHeaderClass()\" [style]=\"getProductHeaderStyles()\">\n      <dropi-ilustration-icon\n        *ngIf=\"product?.supplier?.icon\"\n        [style]=\"getRandomProviderCategoryStyles()\"\n        [type]=\"'insignia'\"\n        [stateInsignia]=\"product?.supplier?.icon\"\n        [tagProduct]=\"true\"\n      ></dropi-ilustration-icon>\n\n      <span\n        [class]=\"getRandomCategoryClass()\"\n        [style]=\"getCategoryStyles()\"\n        *ngIf=\"product?.categories && product?.categories.length > 0\"\n        >{{ product?.categories[0]?.name | adjustName }}</span\n      >\n\n      <div [class]=\"getRandomStockInfoClass()\" [style]=\"getStockInfoStyles()\">\n        <span [class]=\"getRandomStockLabelClass()\" [style]=\"getStockLabelStyles()\">{{ \"stock\" | translate }}:</span>\n\n        <!-- Stocks mezclados aleatoriamente (real + falsos) -->\n        <span\n          *ngFor=\"let stockItem of getMixedStockDivs()\"\n          [class]=\"stockItem.class\"\n          [style]=\"stockItem.isReal ? getStockValueStyles() : getFakeStockStyles()\"\n        >\n          {{ stockItem.value }}\n        </span>\n\n        <span\n          *ngIf=\"product?.private_user_stock && product?.private_user_stock > 0\"\n          class=\"stock-private-user\"\n          [style]=\"{\n            'font-weight': '500',\n            padding: '0px 6px',\n            'margin-left': '6px',\n            'border-radius': '4px',\n            background: 'var(--Success-Success-50, #e7f8f3)',\n            color: 'var(--Success-Success-500, #0abb87)',\n            'text-align': 'center'\n          }\"\n        >\n          {{ product?.private_user_stock }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nombre del producto -->\n    <h3 [class]=\"getRandomProductNameClass()\" [style]=\"getProductNameStyles()\">\n      {{ product?.name | adjustName }}\n    </h3>\n\n    <!-- Proveedor -->\n    <div [class]=\"getRandomSupplierInfoClass()\" [style]=\"getSupplierInfoStyles()\">\n      <span [class]=\"getRandomSupplierLabelClass()\" [style]=\"getSupplierLabelStyles()\"\n        >{{ \"supplier\" | translate }}:</span\n      >\n      <span\n        [class]=\"getRandomSupplierNameClass()\"\n        [style]=\"getSupplierNameStyles()\"\n        (click)=\"getProvidersDetails(); $event.stopPropagation()\"\n        >{{ product?.supplier?.name | adjustName }}</span\n      >\n    </div>\n\n    <!-- Precios -->\n    <div [class]=\"getRandomPriceContainerClass()\" [style]=\"getPriceContainerStyles()\">\n      <div [class]=\"getRandomPriceItemClass()\" [style]=\"getPriceItemStyles()\">\n        <span [class]=\"getRandomPriceLabelClass()\" [style]=\"getPriceLabelStyles()\"\n          >{{ \"supplier price\" | translate }}</span\n        >\n\n        <!-- Precios de proveedor mezclados aleatoriamente (real + falsos) -->\n        <currency\n          *ngFor=\"let priceItem of getMixedSupplierPriceDivs()\"\n          [class]=\"priceItem.class\"\n          [style]=\"priceItem.isReal ? getPriceValueStyles() : getFakePriceStyles()\"\n          [value]=\"priceItem.value\"\n        >\n        </currency>\n      </div>\n      <div [class]=\"getRandomPriceItemClass()\" [style]=\"getPriceItemStyles()\">\n        <span [class]=\"getRandomPriceLabelClass()\" [style]=\"getPriceLabelStyles()\"\n          >{{ \"suggested price\" | translate }}</span\n        >\n\n        <!-- Precios sugeridos mezclados aleatoriamente (real + falsos) -->\n        <currency\n          *ngFor=\"let priceItem of getMixedSuggestedPriceDivs()\"\n          [class]=\"priceItem.class\"\n          [style]=\"priceItem.isReal ? getPriceValueStyles() : getFakePriceStyles()\"\n          [value]=\"priceItem.value\"\n        >\n        </currency>\n      </div>\n    </div>\n  </div>\n\n  <!-- Separador horizontal -->\n  <div [class]=\"getRandomSeparatorClass()\" [style]=\"getSeparatorStyles()\"></div>\n\n  <!-- Bot\u00F3n de acci\u00F3n principal -->\n  <div\n    [class]=\"getRandomActionButtonClass()\"\n    [style]=\"getActionButtonStyles()\"\n    (click)=\"handleAddToCart(); $event.stopPropagation()\"\n  >\n    <app-icon\n      name=\"Shopping-cart-arrow-rigth\"\n      width=\"20px\"\n      height=\"20px\"\n      color=\"#f49a3d\"\n      [style]=\"{ display: 'flex', 'align-items': 'center', 'justify-content': 'center' }\"\n    ></app-icon>\n    <span [class]=\"getRandomButtonTextClass()\" [style]=\"getButtonTextStyles()\"\n      >{{ \"send to client\" | translate }}</span\n    >\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "component", type: CurrencyComponentStub, selector: "currency", inputs: ["value", "class", "style"] }, { kind: "pipe", type: AdjustNamePipeStub, name: "adjustName" }, { kind: "component", type: BetaTagComponentStub, selector: "app-beta-tag" }, { kind: "component", type: DropiIlustrationIconComponent, selector: "dropi-ilustration-icon", inputs: ["type", "state", "stateInsignia", "tagProduct"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardProductComponent, decorators: [{
             type: Component,
@@ -4669,7 +4698,7 @@ class ColorPickerComponent {
         this.onHexInputChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { currentColor: "currentColor", position: "position" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()", "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "colorCanvas", first: true, predicate: ["colorCanvas"], descendants: true }, { propertyName: "hueCanvas", first: true, predicate: ["hueCanvas"], descendants: true }, { propertyName: "opacityCanvas", first: true, predicate: ["opacityCanvas"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }], ngImport: i0, template: "<div class=\"general-container\" #colorPicker>\n  <div class=\"main-input-container\">\n    <div class=\"overlay\" (click)=\"showEditor()\"></div>\n    <div class=\"line-color-preview\">\n      <div class=\"color-preview\" [style.background]=\"currentColor\"></div>\n    </div>\n    <div class=\"color-info\">\n      <input type=\"text\" class=\"color-input\" [ngModel]=\"currentColor\" maxlength=\"9\" />\n    </div>\n  </div>\n\n  <div class=\"color-picker-container position-{{position}}\" [ngClass]=\"{ show: showEdit }\">\n    <div class=\"main-color-canvas-container\">\n      <canvas #colorCanvas width=\"256\" height=\"150\" (mousedown)=\"onColorMouseDown($event)\"></canvas>\n      <div\n        class=\"color-selector-pointer\"\n        [style.left]=\"(saturation / 100) * 256 + 'px'\"\n        [style.top]=\"((100 - value) / 100) * 150 + 'px'\"\n      ></div>\n    </div>\n\n    <div class=\"slider-container\">\n      <div class=\"slider-group\">\n        <div class=\"hue-slider-container\">\n          <canvas #hueCanvas width=\"256\" height=\"20\" (mousedown)=\"onHueMouseDown($event)\"></canvas>\n          <div class=\"slider-pointer\" [style.left]=\"(hue / 360) * 234 + 'px'\"></div>\n        </div>\n      </div>\n\n      <div class=\"slider-group\">\n        <div class=\"opacity-slider-container\">\n          <canvas\n            #opacityCanvas\n            width=\"256\"\n            height=\"20\"\n            (mousedown)=\"onOpacityMouseDown($event)\"\n          ></canvas>\n          <div class=\"slider-pointer\" [style.left]=\"(opacity / 100) * 234 + 'px'\"></div>\n        </div>\n      </div>\n\n      <div class=\"color-info\">\n        <div class=\"color-label\">HEX</div>\n        <input\n          type=\"text\"\n          class=\"color-input\"\n          [(ngModel)]=\"color\"\n          (ngModelChange)=\"onHexInputChange()\"\n          maxlength=\"9\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom:before{transform:rotate(90deg);left:50%;top:-15px}.position-right:before{left:-6px;top:10px}.position-top:before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left:before{transform:rotate(180deg);right:-9px}.color-picker-container:before{content:\"\";position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform .2s ease-out,opacity .2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px,-6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:700}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:700;text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid #ddd;border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { currentColor: "currentColor", position: "position" }, outputs: { colorChange: "colorChange" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()", "document:click": "handleClickOutside($event)" } }, viewQueries: [{ propertyName: "colorCanvas", first: true, predicate: ["colorCanvas"], descendants: true }, { propertyName: "hueCanvas", first: true, predicate: ["hueCanvas"], descendants: true }, { propertyName: "opacityCanvas", first: true, predicate: ["opacityCanvas"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }], ngImport: i0, template: "<div class=\"general-container\" #colorPicker>\n  <div class=\"main-input-container\">\n    <div class=\"overlay\" (click)=\"showEditor()\"></div>\n    <div class=\"line-color-preview\">\n      <div class=\"color-preview\" [style.background]=\"currentColor\"></div>\n    </div>\n    <div class=\"color-info\">\n      <input type=\"text\" class=\"color-input\" [ngModel]=\"currentColor\" maxlength=\"9\" />\n    </div>\n  </div>\n\n  <div class=\"color-picker-container position-{{position}}\" [ngClass]=\"{ show: showEdit }\">\n    <div class=\"main-color-canvas-container\">\n      <canvas #colorCanvas width=\"256\" height=\"150\" (mousedown)=\"onColorMouseDown($event)\"></canvas>\n      <div\n        class=\"color-selector-pointer\"\n        [style.left]=\"(saturation / 100) * 256 + 'px'\"\n        [style.top]=\"((100 - value) / 100) * 150 + 'px'\"\n      ></div>\n    </div>\n\n    <div class=\"slider-container\">\n      <div class=\"slider-group\">\n        <div class=\"hue-slider-container\">\n          <canvas #hueCanvas width=\"256\" height=\"20\" (mousedown)=\"onHueMouseDown($event)\"></canvas>\n          <div class=\"slider-pointer\" [style.left]=\"(hue / 360) * 234 + 'px'\"></div>\n        </div>\n      </div>\n\n      <div class=\"slider-group\">\n        <div class=\"opacity-slider-container\">\n          <canvas\n            #opacityCanvas\n            width=\"256\"\n            height=\"20\"\n            (mousedown)=\"onOpacityMouseDown($event)\"\n          ></canvas>\n          <div class=\"slider-pointer\" [style.left]=\"(opacity / 100) * 234 + 'px'\"></div>\n        </div>\n      </div>\n\n      <div class=\"color-info\">\n        <div class=\"color-label\">HEX</div>\n        <input\n          type=\"text\"\n          class=\"color-input\"\n          [(ngModel)]=\"color\"\n          (ngModelChange)=\"onHexInputChange()\"\n          maxlength=\"9\"\n        />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom:before{transform:rotate(90deg);left:50%;top:-15px}.position-right:before{left:-6px;top:10px}.position-top:before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left:before{transform:rotate(180deg);right:-9px}.color-picker-container:before{content:\"\";position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform .2s ease-out,opacity .2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px,-6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:700}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:700;text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid #ddd;border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -4747,7 +4776,7 @@ class EmptyStateComponent {
         this.buttonClickEvent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, deps: [{ token: "SettingsService" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmptyStateComponent, isStandalone: true, selector: "app-empty-state", inputs: { buttonText: "buttonText", description: "description", buttonSeverity: "buttonSeverity", title: "title", dropiIcon: "dropiIcon" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"empty-container\">\n    <!-- <img\n      class=\"empty-dropi-icon\"\n      *ngIf=\"brandName === 'dropi'\"\n      src=\"\\assets\\utils\\logo-dropi-img-loader.png\"\n      alt=\"\"\n    /> -->\n    <dropi-ilustration-icon class=\"empty-dropi-icon\" *ngIf=\"brandName === 'dropi'\" [type]=\"'dropi' \" [state]=\"dropiIcon\"\n      ></dropi-ilustration-icon>\n    <div class=\"icon-container\" *ngIf=\"brandName !== 'dropi'\">\n      <app-icon name=\"Warning-circle\" width=\"24px\" color=\"Gray-Gray-500\"></app-icon>\n    </div>\n    <div class=\"text-container\">\n      <div *ngIf=\"title !== ''\" class=\"empty-title Body-L-Medium\">\n        {{ title | translate }}\n      </div>\n      <div class=\"description-container\">\n        <div class=\"description Body-M-Regular\">{{ description | translate }}</div>\n      </div>\n    </div>\n\n    <dropi-button\n      *ngIf=\"buttonText !== ''\"\n      [text]=\"buttonText | translate\"\n      [severity]=\"buttonSeverity\"\n      (onClick)=\"buttonClick()\"\n    ></dropi-button>\n  </div>\n</div>\n", styles: [".description{color:var(--Gray-500, #69738c);text-align:center;max-width:400px;align-self:stretch;width:100%}.icon-container{display:flex;width:48px;height:48px;flex-direction:column;justify-content:center;align-items:center;gap:8px;border-radius:var(--Size-7, 40px);background:var(--GrayGray-50, #f7f8fa)}.empty-dropi-icon{height:60px;flex-shrink:0;width:60px;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-container{display:flex;width:420px;padding:var(--Size-4, 16px);flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.description-container{width:100%;display:flex;align-items:center;justify-content:center}.text-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);align-self:stretch}.empty-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;align-self:stretch;overflow:hidden;color:var(--Gray-Gray-700, #32394d);text-align:center;text-overflow:ellipsis}@media screen and (max-width: 600px){.description{max-width:calc(100vw - 32px);width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: DropiIlustrationIconComponent, selector: "dropi-ilustration-icon", inputs: ["type", "state", "stateInsignia", "tagProduct"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmptyStateComponent, isStandalone: true, selector: "app-empty-state", inputs: { buttonText: "buttonText", description: "description", buttonSeverity: "buttonSeverity", title: "title", dropiIcon: "dropiIcon" }, outputs: { buttonClickEvent: "buttonClickEvent" }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"empty-container\">\n    <!-- <img\n      class=\"empty-dropi-icon\"\n      *ngIf=\"brandName === 'dropi'\"\n      src=\"\\assets\\utils\\logo-dropi-img-loader.png\"\n      alt=\"\"\n    /> -->\n    <dropi-ilustration-icon class=\"empty-dropi-icon\" *ngIf=\"brandName === 'dropi'\" [type]=\"'dropi' \" [state]=\"dropiIcon\"\n      ></dropi-ilustration-icon>\n    <div class=\"icon-container\" *ngIf=\"brandName !== 'dropi'\">\n      <app-icon name=\"Warning-circle\" width=\"24px\" color=\"Gray-Gray-500\"></app-icon>\n    </div>\n    <div class=\"text-container\">\n      <div *ngIf=\"title !== ''\" class=\"empty-title Body-L-Medium\">\n        {{ title | translate }}\n      </div>\n      <div class=\"description-container\">\n        <div class=\"description Body-M-Regular\">{{ description | translate }}</div>\n      </div>\n    </div>\n\n    <dropi-button\n      *ngIf=\"buttonText !== ''\"\n      [text]=\"buttonText | translate\"\n      [severity]=\"buttonSeverity\"\n      (onClick)=\"buttonClick()\"\n    ></dropi-button>\n  </div>\n</div>\n", styles: [".description{color:var(--Gray-500, #69738c);text-align:center;max-width:400px;align-self:stretch;width:100%}.icon-container{display:flex;width:48px;height:48px;flex-direction:column;justify-content:center;align-items:center;gap:8px;border-radius:var(--Size-7, 40px);background:var(--GrayGray-50, #f7f8fa)}.empty-dropi-icon{height:60px;flex-shrink:0;width:60px;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-container{display:flex;width:420px;padding:var(--Size-4, 16px);flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.description-container{width:100%;display:flex;align-items:center;justify-content:center}.text-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);align-self:stretch}.empty-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;align-self:stretch;overflow:hidden;color:var(--Gray-Gray-700, #32394d);text-align:center;text-overflow:ellipsis}@media screen and (max-width: 600px){.description{max-width:calc(100vw - 32px);width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DropiIlustrationIconComponent, selector: "dropi-ilustration-icon", inputs: ["type", "state", "stateInsignia", "tagProduct"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
@@ -4843,7 +4872,7 @@ class DropZoneComponent {
         this.addFiles.emit(files);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneComponent, deps: [{ token: "UploadFileService" }, { token: "CompressImagesService" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropZoneComponent, isStandalone: true, selector: "app-drop-zone", inputs: { multiple: "multiple", accept: "accept", maxFiles: "maxFiles", maxFileSizeMB: "maxFileSizeMB", title: "title", label: "label", viewDragAndDrop: "viewDragAndDrop", compress: "compress", maxHeight: "maxHeight", maxWidth: "maxWidth", textButton: "textButton", textFileUpload: "textFileUpload" }, outputs: { addFiles: "addFiles" }, ngImport: i0, template: "<div\n  class=\"file-upload\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n>\n  <div *ngIf=\"!isNotStore\" class=\"file-upload__zone\" [class.drag-over]=\"dragOver\">\n    <svg\n      *ngIf=\"size === 'default'\"\n      width=\"40\"\n      height=\"40\"\n      viewBox=\"0 0 40 40\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z\"\n        fill=\"#FEF8F1\"\n      />\n      <g clip-path=\"url(#clip0_183_10598)\">\n        <path\n          d=\"M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z\"\n          fill=\"#F49A3D\"\n        />\n        <path\n          d=\"M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z\"\n          fill=\"#F49A3D\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_183_10598\">\n          <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(12 12)\" />\n        </clipPath>\n      </defs>\n    </svg>\n    <div class=\"info\">\n      <div [ngClass]=\"{ 'size-small-upload': size === 'small' }\">\n        <div class=\"title\">{{ textFileUpload | translate }}</div>\n        <dropi-button\n          *ngIf=\"size !== 'default'\"\n          (onClick)=\"fileInput.click()\"\n          [text]=\"textButton\"\n          size=\"small\"\n        ></dropi-button>\n      </div>\n\n      <div *ngIf=\"size === 'default'\">\n        <div class=\"description\">\n          {{ ('Supported formats' | translate) + ': ' }} {{ accept.join(', ') }}\n        </div>\n        <div class=\"description\">\n          {{ ('Maximum size' | translate) + ': ' }} {{ maxFileSizeMB }}MB\n        </div>\n      </div>\n\n      <div *ngIf=\"size !== 'default'\">\n        <div class=\"description\">\n          {{ ('Supported formats' | translate) + ': ' }} {{ accept.join(', ') }}.\n          {{ ('Maximum size' | translate) + ': ' }} {{ maxFileSizeMB }}MB\n        </div>\n        <div class=\"description\"></div>\n      </div>\n    </div>\n\n    <dropi-button\n      *ngIf=\"size == 'default'\"\n      (onClick)=\"fileInput.click()\"\n      [text]=\"textButton\"\n      size=\"small\"\n    ></dropi-button>\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"acceptedMimeTypes?.join(',')\"\n      (change)=\"onFileChange($event)\"\n      hidden\n    />\n  </div>\n\n  <div class=\"container-buttons-file\" *ngIf=\"isNotStore\">\n    <dropi-button\n      *ngIf=\"uploadStatus == 'idle' || uploadStatus == 'error' || uploadStatus == 'loading'\"\n      [state]=\"disabled ? 'disabled' : stateButton\"\n      preIcon=\"File-upload\"\n      (onClick)=\"fileInput.click()\"\n      [text]=\"textButton | translate\"\n    ></dropi-button>\n    <div *ngIf=\"uploadStatus == 'success'\" class=\"button-mock\">\n      {{ fileCharged }}\n      <div class=\"\">\n        <app-icon\n          (click)=\"clearFile()\"\n          class=\"colse-circle-mock\"\n          name=\"Close-small\"\n          width=\"12px\"\n          height=\"12px\"\n          color=\"Primary-Primary-500\"\n        ></app-icon>\n      </div>\n    </div>\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"acceptedMimeTypes?.join(',')\"\n      (change)=\"onFileChange($event)\"\n      hidden\n    />\n  </div>\n</div>\n", styles: [".file-upload{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);background:var(--White, #fff)}.file-upload__zone{display:flex;padding:var(--Size-5);flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-6);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px dashed var(--Gray-Gray-200);background:var(--White);text-align:center;transition:border-color .3s ease}.file-upload__zone.drag-over{border:1px dashed var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fef8f1)}.file-upload__zone .info{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2);align-self:stretch}.file-upload__zone .info .title{color:var(--Gray-Gray-700);text-align:center;text-overflow:ellipsis;font-size:var(--font-size-m);font-weight:500;line-height:150%}.file-upload__zone .info .description{color:var(--GrayGray-600, #475066);text-align:center;font-size:var(--font-size-s);font-style:normal;font-weight:400;line-height:150%}.file-upload__zone .size-small-upload{gap:var(--Size-3);display:flex;flex-direction:row!important}.file-upload .container-buttons-file{position:relative;display:flex;flex-direction:column}.file-upload .container-buttons-file span{position:absolute;top:50px}.file-upload .container-buttons-file .button-mock{padding:10px;border:1px solid var(--Primary-Primary-500);border-radius:8px;color:var(--Primary-Primary-500);display:flex;align-items:center;font-size:14px;gap:.5rem}.file-upload .container-buttons-file .button-mock .colse-circle-mock{cursor:pointer;border:1px solid var(--Primary-Primary-500);display:flex;justify-content:center;align-items:center;border-radius:50%;width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropZoneComponent, isStandalone: true, selector: "app-drop-zone", inputs: { multiple: "multiple", accept: "accept", maxFiles: "maxFiles", maxFileSizeMB: "maxFileSizeMB", title: "title", label: "label", viewDragAndDrop: "viewDragAndDrop", compress: "compress", maxHeight: "maxHeight", maxWidth: "maxWidth", textButton: "textButton", textFileUpload: "textFileUpload" }, outputs: { addFiles: "addFiles" }, ngImport: i0, template: "<div\n  class=\"file-upload\"\n  (drop)=\"onDrop($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n>\n  <div *ngIf=\"!isNotStore\" class=\"file-upload__zone\" [class.drag-over]=\"dragOver\">\n    <svg\n      *ngIf=\"size === 'default'\"\n      width=\"40\"\n      height=\"40\"\n      viewBox=\"0 0 40 40\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z\"\n        fill=\"#FEF8F1\"\n      />\n      <g clip-path=\"url(#clip0_183_10598)\">\n        <path\n          d=\"M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z\"\n          fill=\"#F49A3D\"\n        />\n        <path\n          d=\"M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z\"\n          fill=\"#F49A3D\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_183_10598\">\n          <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(12 12)\" />\n        </clipPath>\n      </defs>\n    </svg>\n    <div class=\"info\">\n      <div [ngClass]=\"{ 'size-small-upload': size === 'small' }\">\n        <div class=\"title\">{{ textFileUpload | translate }}</div>\n        <dropi-button\n          *ngIf=\"size !== 'default'\"\n          (onClick)=\"fileInput.click()\"\n          [text]=\"textButton\"\n          size=\"small\"\n        ></dropi-button>\n      </div>\n\n      <div *ngIf=\"size === 'default'\">\n        <div class=\"description\">\n          {{ ('Supported formats' | translate) + ': ' }} {{ accept.join(', ') }}\n        </div>\n        <div class=\"description\">\n          {{ ('Maximum size' | translate) + ': ' }} {{ maxFileSizeMB }}MB\n        </div>\n      </div>\n\n      <div *ngIf=\"size !== 'default'\">\n        <div class=\"description\">\n          {{ ('Supported formats' | translate) + ': ' }} {{ accept.join(', ') }}.\n          {{ ('Maximum size' | translate) + ': ' }} {{ maxFileSizeMB }}MB\n        </div>\n        <div class=\"description\"></div>\n      </div>\n    </div>\n\n    <dropi-button\n      *ngIf=\"size == 'default'\"\n      (onClick)=\"fileInput.click()\"\n      [text]=\"textButton\"\n      size=\"small\"\n    ></dropi-button>\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"acceptedMimeTypes?.join(',')\"\n      (change)=\"onFileChange($event)\"\n      hidden\n    />\n  </div>\n\n  <div class=\"container-buttons-file\" *ngIf=\"isNotStore\">\n    <dropi-button\n      *ngIf=\"uploadStatus == 'idle' || uploadStatus == 'error' || uploadStatus == 'loading'\"\n      [state]=\"disabled ? 'disabled' : stateButton\"\n      preIcon=\"File-upload\"\n      (onClick)=\"fileInput.click()\"\n      [text]=\"textButton | translate\"\n    ></dropi-button>\n    <div *ngIf=\"uploadStatus == 'success'\" class=\"button-mock\">\n      {{ fileCharged }}\n      <div class=\"\">\n        <app-icon\n          (click)=\"clearFile()\"\n          class=\"colse-circle-mock\"\n          name=\"Close-small\"\n          width=\"12px\"\n          height=\"12px\"\n          color=\"Primary-Primary-500\"\n        ></app-icon>\n      </div>\n    </div>\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.multiple]=\"multiple ? '' : null\"\n      [attr.accept]=\"acceptedMimeTypes?.join(',')\"\n      (change)=\"onFileChange($event)\"\n      hidden\n    />\n  </div>\n</div>\n", styles: [".file-upload{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);background:var(--White, #fff)}.file-upload__zone{display:flex;padding:var(--Size-5);flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-6);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px dashed var(--Gray-Gray-200);background:var(--White);text-align:center;transition:border-color .3s ease}.file-upload__zone.drag-over{border:1px dashed var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fef8f1)}.file-upload__zone .info{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2);align-self:stretch}.file-upload__zone .info .title{color:var(--Gray-Gray-700);text-align:center;text-overflow:ellipsis;font-size:var(--font-size-m);font-weight:500;line-height:150%}.file-upload__zone .info .description{color:var(--GrayGray-600, #475066);text-align:center;font-size:var(--font-size-s);font-style:normal;font-weight:400;line-height:150%}.file-upload__zone .size-small-upload{gap:var(--Size-3);display:flex;flex-direction:row!important}.file-upload .container-buttons-file{position:relative;display:flex;flex-direction:column}.file-upload .container-buttons-file span{position:absolute;top:50px}.file-upload .container-buttons-file .button-mock{padding:10px;border:1px solid var(--Primary-Primary-500);border-radius:8px;color:var(--Primary-Primary-500);display:flex;align-items:center;font-size:14px;gap:.5rem}.file-upload .container-buttons-file .button-mock .colse-circle-mock{cursor:pointer;border:1px solid var(--Primary-Primary-500);display:flex;justify-content:center;align-items:center;border-radius:50%;width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropZoneComponent, decorators: [{
             type: Component,
@@ -4905,7 +4934,7 @@ class CardViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardViewComponent, deps: [{ token: "ImageOverlayService" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardViewComponent, isStandalone: true, selector: "app-card-view", inputs: { fileItem: "fileItem", onlyView: "onlyView" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"file-card\" [ngClass]=\"[fileItem.state, getFileTypeClass(fileItem.file)]\">\n  <ng-container\n    *ngIf=\"fileItem.previewUrl && !fileItem.previewUrl.includes('.pdf'); else iconTemplate\"\n  >\n    <div class=\"preview-wrapper\">\n      <img\n        [ngClass]=\"fileItem.state\"\n        class=\"preview\"\n        [src]=\"fileItem.previewUrl || './assets/utils/template-no-image.png'\"\n        alt=\"fileItem.previewUrl\"\n      />\n\n      <ng-container *ngIf=\"fileItem.state === 'complete'\">\n        <div class=\"overlay-icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"12\"\n            height=\"12\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n          >\n            <g clip-path=\"url(#clip0_5064_216)\">\n              <path\n                d=\"M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z\"\n                fill=\"#0ABB87\"\n              />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_5064_216\">\n                <rect width=\"12\" height=\"12\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!--iconos de documento-->\n  <ng-template #iconTemplate>\n    <div class=\"file-icon\">\n      <ng-container>\n        <svg\n          *ngIf=\"viewType('pdf')\"\n          class=\"icon-pdf\"\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z\"\n            fill=\"#FEF0F0\"\n          />\n          <g clip-path=\"url(#clip0_3287_1674)\">\n            <path\n              d=\"M24.1252 11.1167L21.2168 8.20833C20.1168 7.10833 18.6502 6.5 17.0918 6.5H13.3335C11.0335 6.5 9.16684 8.36667 9.16684 10.6667V22.3333C9.16684 24.6333 11.0335 26.5 13.3335 26.5H21.6668C23.9668 26.5 25.8335 24.6333 25.8335 22.3333V15.2417C25.8335 13.6833 25.2252 12.2167 24.1252 11.1167ZM22.9502 12.2917C23.2168 12.5583 23.4418 12.85 23.6252 13.1667H20.0085C19.5502 13.1667 19.1752 12.7917 19.1752 12.3333V8.71667C19.4918 8.9 19.7835 9.125 20.0502 9.39167L22.9585 12.3L22.9502 12.2917ZM24.1668 22.3333C24.1668 23.7083 23.0418 24.8333 21.6668 24.8333H13.3335C11.9585 24.8333 10.8335 23.7083 10.8335 22.3333V10.6667C10.8335 9.29167 11.9585 8.16667 13.3335 8.16667H17.0918C17.2252 8.16667 17.3668 8.16667 17.5002 8.18333V12.3333C17.5002 13.7083 18.6252 14.8333 20.0002 14.8333H24.1502C24.1668 14.9667 24.1668 15.1 24.1668 15.2417V22.3333ZM13.4085 17.3333H12.5002C12.0418 17.3333 11.6668 17.7083 11.6668 18.1667V21.8667C11.6668 22.1583 11.9002 22.3833 12.1835 22.3833C12.4668 22.3833 12.7002 22.15 12.7002 21.8667V20.85H13.4002C14.3835 20.85 15.1835 20.0583 15.1835 19.0917C15.1835 18.125 14.3835 17.3333 13.4002 17.3333H13.4085ZM13.4085 19.8083H12.7168V18.375H13.4168C13.8168 18.375 14.1585 18.7 14.1585 19.0917C14.1585 19.4833 13.8168 19.8083 13.4168 19.8083H13.4085ZM23.3502 17.8583C23.3502 18.15 23.1168 18.375 22.8335 18.375H21.4252V19.325H22.4585C22.7502 19.325 22.9752 19.5583 22.9752 19.8417C22.9752 20.125 22.7418 20.3583 22.4585 20.3583H21.4252V21.8583C21.4252 22.15 21.1918 22.375 20.9085 22.375C20.6252 22.375 20.3918 22.1417 20.3918 21.8583V17.85C20.3918 17.5583 20.6252 17.3333 20.9085 17.3333H22.8335C23.1252 17.3333 23.3502 17.5667 23.3502 17.85V17.8583ZM17.5752 17.3417H16.6668C16.2085 17.3417 15.8335 17.7167 15.8335 18.175V21.875C15.8335 22.1667 16.0668 22.3417 16.3502 22.3417C16.6335 22.3417 17.5668 22.3417 17.5668 22.3417C18.5502 22.3417 19.3502 21.55 19.3502 20.5833V19.1C19.3502 18.1333 18.5502 17.3417 17.5668 17.3417H17.5752ZM18.3168 20.5833C18.3168 20.975 17.9752 21.3 17.5752 21.3H16.8835V18.3833H17.5835C17.9835 18.3833 18.3252 18.7083 18.3252 19.1V20.5833H18.3168Z\"\n              fill=\"#DE6061\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_3287_1674\">\n              <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(7.5 6.5)\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <svg\n          *ngIf=\"viewType('default')\"\n          class=\"icon-default\"\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z\"\n            fill=\"#EEF6FE\"\n          />\n          <g clip-path=\"url(#clip0_3287_1708)\">\n            <path\n              d=\"M21.1668 18.6667C21.1668 18.8877 21.079 19.0997 20.9227 19.2559C20.7664 19.4122 20.5545 19.5 20.3335 19.5H13.6668C13.4458 19.5 13.2338 19.4122 13.0775 19.2559C12.9213 19.0997 12.8335 18.8877 12.8335 18.6667C12.8335 18.4457 12.9213 18.2337 13.0775 18.0774C13.2338 17.9211 13.4458 17.8334 13.6668 17.8334H20.3335C20.5545 17.8334 20.7664 17.9211 20.9227 18.0774C21.079 18.2337 21.1668 18.4457 21.1668 18.6667ZM17.8335 21.1667H13.6668C13.4458 21.1667 13.2338 21.2545 13.0775 21.4108C12.9213 21.567 12.8335 21.779 12.8335 22C12.8335 22.221 12.9213 22.433 13.0775 22.5893C13.2338 22.7456 13.4458 22.8334 13.6668 22.8334H17.8335C18.0545 22.8334 18.2664 22.7456 18.4227 22.5893C18.579 22.433 18.6668 22.221 18.6668 22C18.6668 21.779 18.579 21.567 18.4227 21.4108C18.2664 21.2545 18.0545 21.1667 17.8335 21.1667ZM25.3335 15.7375V22.8334C25.3321 23.938 24.8927 24.9971 24.1116 25.7782C23.3305 26.5593 22.2715 26.9987 21.1668 27H12.8335C11.7288 26.9987 10.6698 26.5593 9.88864 25.7782C9.10753 24.9971 8.66812 23.938 8.66679 22.8334V11.1667C8.66812 10.062 9.10753 9.00298 9.88864 8.22187C10.6698 7.44075 11.7288 7.00134 12.8335 7.00002H16.596C17.3623 6.99805 18.1214 7.14801 18.8295 7.44124C19.5375 7.73446 20.1804 8.16513 20.721 8.70835L23.6243 11.6134C24.1678 12.1536 24.5988 12.7962 24.8921 13.5042C25.1855 14.2121 25.3355 14.9712 25.3335 15.7375ZM19.5426 9.88669C19.2804 9.63265 18.9859 9.41412 18.6668 9.23669V12.8334C18.6668 13.0544 18.7546 13.2663 18.9109 13.4226C19.0672 13.5789 19.2791 13.6667 19.5001 13.6667H23.0968C22.9193 13.3477 22.7004 13.0535 22.446 12.7917L19.5426 9.88669ZM23.6668 15.7375C23.6668 15.6 23.6401 15.4684 23.6276 15.3334H19.5001C18.8371 15.3334 18.2012 15.07 17.7324 14.6011C17.2635 14.1323 17.0001 13.4964 17.0001 12.8334V8.70585C16.8651 8.69335 16.7326 8.66669 16.596 8.66669H12.8335C12.1704 8.66669 11.5345 8.93008 11.0657 9.39892C10.5969 9.86776 10.3335 10.5036 10.3335 11.1667V22.8334C10.3335 23.4964 10.5969 24.1323 11.0657 24.6011C11.5345 25.07 12.1704 25.3334 12.8335 25.3334H21.1668C21.8298 25.3334 22.4657 25.07 22.9346 24.6011C23.4034 24.1323 23.6668 23.4964 23.6668 22.8334V15.7375Z\"\n              fill=\"#4996DB\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_3287_1708\">\n              <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(7 7)\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </ng-container>\n    </div>\n  </ng-template>\n  <div class=\"info-container\" *ngIf=\"fileItem.state !== 'confirm-delete'\">\n    <div class=\"file-name\">\n      {{ fileItem?.file?.name ?? fileItem?.previewUrl?.split('/').pop() }}\n    </div>\n    <div class=\"progress-bar-container\" *ngIf=\"fileItem.state === 'uploading'\">\n      <div class=\"progress-bar\" [style.width.%]=\"fileItem.progress\"></div>\n    </div>\n  </div>\n\n  <!--Botones de  eliminar y ver-->\n\n  <div\n    class=\"preview-image\"\n    *ngIf=\"fileItem.state !== 'confirm-delete' \"\n    (click)=\"openPreviewImage()\"\n  >\n    <app-icon name=\"Eye\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-600\" />\n  </div>\n  <!-- <div\n    class=\"preview-image\"\n    *ngIf=\"fileItem.state !== 'confirm-delete' && fileItem.fileType !== 'image'\"\n    (click)=\"downloadFile()\"\n  >\n    <app-icon name=\"Download\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-600\" />\n  </div> -->\n\n  <div (click)=\"onSendClick('delete')\" *ngIf=\"fileItem.state !== 'confirm-delete' && !onlyView\" class=\"delete\">\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16.25 4.44453H14.0972C13.936 3.66078 13.5096 2.95657 12.8897 2.45058C12.2699 1.94459 11.4946 1.66776 10.6944 1.66675H9.30554C8.5054 1.66776 7.73007 1.94459 7.11023 2.45058C6.49039 2.95657 6.06394 3.66078 5.90276 4.44453H3.74999C3.56581 4.44453 3.38917 4.51769 3.25894 4.64792C3.12871 4.77816 3.05554 4.95479 3.05554 5.13897C3.05554 5.32315 3.12871 5.49978 3.25894 5.63002C3.38917 5.76025 3.56581 5.83341 3.74999 5.83341H4.44443V14.8612C4.44553 15.7817 4.81171 16.6643 5.46264 17.3152C6.11357 17.9661 6.9961 18.3323 7.91665 18.3334H12.0833C13.0039 18.3323 13.8864 17.9661 14.5373 17.3152C15.1883 16.6643 15.5544 15.7817 15.5555 14.8612V5.83341H16.25C16.4342 5.83341 16.6108 5.76025 16.741 5.63002C16.8713 5.49978 16.9444 5.32315 16.9444 5.13897C16.9444 4.95479 16.8713 4.77816 16.741 4.64792C16.6108 4.51769 16.4342 4.44453 16.25 4.44453ZM9.30554 3.05564H10.6944C11.1252 3.05616 11.5452 3.18993 11.8969 3.43858C12.2487 3.68724 12.5149 4.03862 12.659 4.44453H7.34096C7.48511 4.03862 7.75131 3.68724 8.10303 3.43858C8.45476 3.18993 8.8748 3.05616 9.30554 3.05564ZM14.1667 14.8612C14.1667 15.4137 13.9472 15.9436 13.5565 16.3343C13.1658 16.725 12.6359 16.9445 12.0833 16.9445H7.91665C7.36412 16.9445 6.83421 16.725 6.44351 16.3343C6.05281 15.9436 5.83332 15.4137 5.83332 14.8612V5.83341H14.1667V14.8612Z\"\n        fill=\"#DE6061\"\n      />\n      <path\n        d=\"M8.61115 14.1663C8.79533 14.1663 8.97197 14.0931 9.1022 13.9629C9.23243 13.8327 9.3056 13.656 9.3056 13.4719V9.30521C9.3056 9.12103 9.23243 8.94439 9.1022 8.81416C8.97197 8.68393 8.79533 8.61076 8.61115 8.61076C8.42698 8.61076 8.25034 8.68393 8.12011 8.81416C7.98988 8.94439 7.91671 9.12103 7.91671 9.30521V13.4719C7.91671 13.656 7.98988 13.8327 8.12011 13.9629C8.25034 14.0931 8.42698 14.1663 8.61115 14.1663Z\"\n        fill=\"#DE6061\"\n      />\n      <path\n        d=\"M11.3888 14.1663C11.573 14.1663 11.7497 14.0931 11.8799 13.9629C12.0101 13.8327 12.0833 13.656 12.0833 13.4719V9.30521C12.0833 9.12103 12.0101 8.94439 11.8799 8.81416C11.7497 8.68393 11.573 8.61076 11.3888 8.61076C11.2047 8.61076 11.028 8.68393 10.8978 8.81416C10.7676 8.94439 10.6944 9.12103 10.6944 9.30521V13.4719C10.6944 13.656 10.7676 13.8327 10.8978 13.9629C11.028 14.0931 11.2047 14.1663 11.3888 14.1663Z\"\n        fill=\"#DE6061\"\n      />\n    </svg>\n  </div>\n\n  <!--mensaje de eliminar-->\n  <div class=\"delete-confirm\" *ngIf=\"fileItem.state === 'confirm-delete'\">\n    <span class=\"message\">{{\n      (fileItem.previewUrl ? 'delete image' : 'delete file') | translate\n    }}</span>\n    <div class=\"actions\">\n      <dropi-button size=\"small\" text=\"S\u00ED\" (onClick)=\"onSendClick('confirm-delete')\"></dropi-button>\n      <dropi-button\n        text=\"No\"\n        size=\"small\"\n        (onClick)=\"onSendClick('cancel-delete')\"\n        severity=\"secondary\"\n      ></dropi-button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.file-card{display:flex;padding:var(--Size-4, 16px);align-items:center;gap:var(--Size-3, 12px);align-self:stretch;border-radius:var(--Border-2);border:1px solid var(--Gray-Gray-100);background:var(--White, #FFF)}.file-card .preview-wrapper{width:34px;height:34px;position:relative;display:inline-block;border-radius:var(--Border-2);overflow:hidden}.file-card .preview-wrapper .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.file-card .preview-wrapper .preview.uploading{filter:blur(2px)}.file-card .preview-wrapper .overlay-icon{width:16px;height:16px;padding:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--White, #fff)}.file-card .info-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2);flex:1 0 0}.file-card .info-container .file-name{overflow:hidden;color:var(--Gray-Gray-600);text-overflow:ellipsis;font-size:12px;font-style:normal;font-weight:400;line-height:150%;white-space:nowrap;max-width:300px}.file-card .info-container .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.file-card .info-container .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500);transition:width .3s ease}.file-card .delete,.file-card .preview-image{display:inline-block;transition:transform .3s ease;border-radius:var(--Border-2)}.file-card .delete:hover,.file-card .preview-image:hover{cursor:pointer;transform:scale(1.1)}.file-card .delete-confirm{color:var(--Gray-Gray-600);font-size:var(--font-size-xs);font-style:normal;font-weight:500;line-height:150%;display:flex;justify-content:space-between;align-items:center;align-self:stretch;flex:1 0 0}.file-card .delete-confirm .actions{display:flex;align-items:flex-start;gap:var(--Size-2, 8px)}@media (max-width: 600px){.file-card .info-container .file-name{max-width:100px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardViewComponent, isStandalone: true, selector: "app-card-view", inputs: { fileItem: "fileItem", onlyView: "onlyView" }, outputs: { action: "action" }, ngImport: i0, template: "<div class=\"file-card\" [ngClass]=\"[fileItem.state, getFileTypeClass(fileItem.file)]\">\n  <ng-container\n    *ngIf=\"fileItem.previewUrl && !fileItem.previewUrl.includes('.pdf'); else iconTemplate\"\n  >\n    <div class=\"preview-wrapper\">\n      <img\n        [ngClass]=\"fileItem.state\"\n        class=\"preview\"\n        [src]=\"fileItem.previewUrl || './assets/utils/template-no-image.png'\"\n        alt=\"fileItem.previewUrl\"\n      />\n\n      <ng-container *ngIf=\"fileItem.state === 'complete'\">\n        <div class=\"overlay-icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"12\"\n            height=\"12\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n          >\n            <g clip-path=\"url(#clip0_5064_216)\">\n              <path\n                d=\"M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z\"\n                fill=\"#0ABB87\"\n              />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_5064_216\">\n                <rect width=\"12\" height=\"12\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <!--iconos de documento-->\n  <ng-template #iconTemplate>\n    <div class=\"file-icon\">\n      <ng-container>\n        <svg\n          *ngIf=\"viewType('pdf')\"\n          class=\"icon-pdf\"\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z\"\n            fill=\"#FEF0F0\"\n          />\n          <g clip-path=\"url(#clip0_3287_1674)\">\n            <path\n              d=\"M24.1252 11.1167L21.2168 8.20833C20.1168 7.10833 18.6502 6.5 17.0918 6.5H13.3335C11.0335 6.5 9.16684 8.36667 9.16684 10.6667V22.3333C9.16684 24.6333 11.0335 26.5 13.3335 26.5H21.6668C23.9668 26.5 25.8335 24.6333 25.8335 22.3333V15.2417C25.8335 13.6833 25.2252 12.2167 24.1252 11.1167ZM22.9502 12.2917C23.2168 12.5583 23.4418 12.85 23.6252 13.1667H20.0085C19.5502 13.1667 19.1752 12.7917 19.1752 12.3333V8.71667C19.4918 8.9 19.7835 9.125 20.0502 9.39167L22.9585 12.3L22.9502 12.2917ZM24.1668 22.3333C24.1668 23.7083 23.0418 24.8333 21.6668 24.8333H13.3335C11.9585 24.8333 10.8335 23.7083 10.8335 22.3333V10.6667C10.8335 9.29167 11.9585 8.16667 13.3335 8.16667H17.0918C17.2252 8.16667 17.3668 8.16667 17.5002 8.18333V12.3333C17.5002 13.7083 18.6252 14.8333 20.0002 14.8333H24.1502C24.1668 14.9667 24.1668 15.1 24.1668 15.2417V22.3333ZM13.4085 17.3333H12.5002C12.0418 17.3333 11.6668 17.7083 11.6668 18.1667V21.8667C11.6668 22.1583 11.9002 22.3833 12.1835 22.3833C12.4668 22.3833 12.7002 22.15 12.7002 21.8667V20.85H13.4002C14.3835 20.85 15.1835 20.0583 15.1835 19.0917C15.1835 18.125 14.3835 17.3333 13.4002 17.3333H13.4085ZM13.4085 19.8083H12.7168V18.375H13.4168C13.8168 18.375 14.1585 18.7 14.1585 19.0917C14.1585 19.4833 13.8168 19.8083 13.4168 19.8083H13.4085ZM23.3502 17.8583C23.3502 18.15 23.1168 18.375 22.8335 18.375H21.4252V19.325H22.4585C22.7502 19.325 22.9752 19.5583 22.9752 19.8417C22.9752 20.125 22.7418 20.3583 22.4585 20.3583H21.4252V21.8583C21.4252 22.15 21.1918 22.375 20.9085 22.375C20.6252 22.375 20.3918 22.1417 20.3918 21.8583V17.85C20.3918 17.5583 20.6252 17.3333 20.9085 17.3333H22.8335C23.1252 17.3333 23.3502 17.5667 23.3502 17.85V17.8583ZM17.5752 17.3417H16.6668C16.2085 17.3417 15.8335 17.7167 15.8335 18.175V21.875C15.8335 22.1667 16.0668 22.3417 16.3502 22.3417C16.6335 22.3417 17.5668 22.3417 17.5668 22.3417C18.5502 22.3417 19.3502 21.55 19.3502 20.5833V19.1C19.3502 18.1333 18.5502 17.3417 17.5668 17.3417H17.5752ZM18.3168 20.5833C18.3168 20.975 17.9752 21.3 17.5752 21.3H16.8835V18.3833H17.5835C17.9835 18.3833 18.3252 18.7083 18.3252 19.1V20.5833H18.3168Z\"\n              fill=\"#DE6061\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_3287_1674\">\n              <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(7.5 6.5)\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <svg\n          *ngIf=\"viewType('default')\"\n          class=\"icon-default\"\n          width=\"34\"\n          height=\"34\"\n          viewBox=\"0 0 34 34\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z\"\n            fill=\"#EEF6FE\"\n          />\n          <g clip-path=\"url(#clip0_3287_1708)\">\n            <path\n              d=\"M21.1668 18.6667C21.1668 18.8877 21.079 19.0997 20.9227 19.2559C20.7664 19.4122 20.5545 19.5 20.3335 19.5H13.6668C13.4458 19.5 13.2338 19.4122 13.0775 19.2559C12.9213 19.0997 12.8335 18.8877 12.8335 18.6667C12.8335 18.4457 12.9213 18.2337 13.0775 18.0774C13.2338 17.9211 13.4458 17.8334 13.6668 17.8334H20.3335C20.5545 17.8334 20.7664 17.9211 20.9227 18.0774C21.079 18.2337 21.1668 18.4457 21.1668 18.6667ZM17.8335 21.1667H13.6668C13.4458 21.1667 13.2338 21.2545 13.0775 21.4108C12.9213 21.567 12.8335 21.779 12.8335 22C12.8335 22.221 12.9213 22.433 13.0775 22.5893C13.2338 22.7456 13.4458 22.8334 13.6668 22.8334H17.8335C18.0545 22.8334 18.2664 22.7456 18.4227 22.5893C18.579 22.433 18.6668 22.221 18.6668 22C18.6668 21.779 18.579 21.567 18.4227 21.4108C18.2664 21.2545 18.0545 21.1667 17.8335 21.1667ZM25.3335 15.7375V22.8334C25.3321 23.938 24.8927 24.9971 24.1116 25.7782C23.3305 26.5593 22.2715 26.9987 21.1668 27H12.8335C11.7288 26.9987 10.6698 26.5593 9.88864 25.7782C9.10753 24.9971 8.66812 23.938 8.66679 22.8334V11.1667C8.66812 10.062 9.10753 9.00298 9.88864 8.22187C10.6698 7.44075 11.7288 7.00134 12.8335 7.00002H16.596C17.3623 6.99805 18.1214 7.14801 18.8295 7.44124C19.5375 7.73446 20.1804 8.16513 20.721 8.70835L23.6243 11.6134C24.1678 12.1536 24.5988 12.7962 24.8921 13.5042C25.1855 14.2121 25.3355 14.9712 25.3335 15.7375ZM19.5426 9.88669C19.2804 9.63265 18.9859 9.41412 18.6668 9.23669V12.8334C18.6668 13.0544 18.7546 13.2663 18.9109 13.4226C19.0672 13.5789 19.2791 13.6667 19.5001 13.6667H23.0968C22.9193 13.3477 22.7004 13.0535 22.446 12.7917L19.5426 9.88669ZM23.6668 15.7375C23.6668 15.6 23.6401 15.4684 23.6276 15.3334H19.5001C18.8371 15.3334 18.2012 15.07 17.7324 14.6011C17.2635 14.1323 17.0001 13.4964 17.0001 12.8334V8.70585C16.8651 8.69335 16.7326 8.66669 16.596 8.66669H12.8335C12.1704 8.66669 11.5345 8.93008 11.0657 9.39892C10.5969 9.86776 10.3335 10.5036 10.3335 11.1667V22.8334C10.3335 23.4964 10.5969 24.1323 11.0657 24.6011C11.5345 25.07 12.1704 25.3334 12.8335 25.3334H21.1668C21.8298 25.3334 22.4657 25.07 22.9346 24.6011C23.4034 24.1323 23.6668 23.4964 23.6668 22.8334V15.7375Z\"\n              fill=\"#4996DB\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0_3287_1708\">\n              <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(7 7)\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </ng-container>\n    </div>\n  </ng-template>\n  <div class=\"info-container\" *ngIf=\"fileItem.state !== 'confirm-delete'\">\n    <div class=\"file-name\">\n      {{ fileItem?.file?.name ?? fileItem?.previewUrl?.split('/').pop() }}\n    </div>\n    <div class=\"progress-bar-container\" *ngIf=\"fileItem.state === 'uploading'\">\n      <div class=\"progress-bar\" [style.width.%]=\"fileItem.progress\"></div>\n    </div>\n  </div>\n\n  <!--Botones de  eliminar y ver-->\n\n  <div\n    class=\"preview-image\"\n    *ngIf=\"fileItem.state !== 'confirm-delete' \"\n    (click)=\"openPreviewImage()\"\n  >\n    <app-icon name=\"Eye\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-600\" />\n  </div>\n  <!-- <div\n    class=\"preview-image\"\n    *ngIf=\"fileItem.state !== 'confirm-delete' && fileItem.fileType !== 'image'\"\n    (click)=\"downloadFile()\"\n  >\n    <app-icon name=\"Download\" width=\"20px\" height=\"20px\" color=\"Gray-Gray-600\" />\n  </div> -->\n\n  <div (click)=\"onSendClick('delete')\" *ngIf=\"fileItem.state !== 'confirm-delete' && !onlyView\" class=\"delete\">\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M16.25 4.44453H14.0972C13.936 3.66078 13.5096 2.95657 12.8897 2.45058C12.2699 1.94459 11.4946 1.66776 10.6944 1.66675H9.30554C8.5054 1.66776 7.73007 1.94459 7.11023 2.45058C6.49039 2.95657 6.06394 3.66078 5.90276 4.44453H3.74999C3.56581 4.44453 3.38917 4.51769 3.25894 4.64792C3.12871 4.77816 3.05554 4.95479 3.05554 5.13897C3.05554 5.32315 3.12871 5.49978 3.25894 5.63002C3.38917 5.76025 3.56581 5.83341 3.74999 5.83341H4.44443V14.8612C4.44553 15.7817 4.81171 16.6643 5.46264 17.3152C6.11357 17.9661 6.9961 18.3323 7.91665 18.3334H12.0833C13.0039 18.3323 13.8864 17.9661 14.5373 17.3152C15.1883 16.6643 15.5544 15.7817 15.5555 14.8612V5.83341H16.25C16.4342 5.83341 16.6108 5.76025 16.741 5.63002C16.8713 5.49978 16.9444 5.32315 16.9444 5.13897C16.9444 4.95479 16.8713 4.77816 16.741 4.64792C16.6108 4.51769 16.4342 4.44453 16.25 4.44453ZM9.30554 3.05564H10.6944C11.1252 3.05616 11.5452 3.18993 11.8969 3.43858C12.2487 3.68724 12.5149 4.03862 12.659 4.44453H7.34096C7.48511 4.03862 7.75131 3.68724 8.10303 3.43858C8.45476 3.18993 8.8748 3.05616 9.30554 3.05564ZM14.1667 14.8612C14.1667 15.4137 13.9472 15.9436 13.5565 16.3343C13.1658 16.725 12.6359 16.9445 12.0833 16.9445H7.91665C7.36412 16.9445 6.83421 16.725 6.44351 16.3343C6.05281 15.9436 5.83332 15.4137 5.83332 14.8612V5.83341H14.1667V14.8612Z\"\n        fill=\"#DE6061\"\n      />\n      <path\n        d=\"M8.61115 14.1663C8.79533 14.1663 8.97197 14.0931 9.1022 13.9629C9.23243 13.8327 9.3056 13.656 9.3056 13.4719V9.30521C9.3056 9.12103 9.23243 8.94439 9.1022 8.81416C8.97197 8.68393 8.79533 8.61076 8.61115 8.61076C8.42698 8.61076 8.25034 8.68393 8.12011 8.81416C7.98988 8.94439 7.91671 9.12103 7.91671 9.30521V13.4719C7.91671 13.656 7.98988 13.8327 8.12011 13.9629C8.25034 14.0931 8.42698 14.1663 8.61115 14.1663Z\"\n        fill=\"#DE6061\"\n      />\n      <path\n        d=\"M11.3888 14.1663C11.573 14.1663 11.7497 14.0931 11.8799 13.9629C12.0101 13.8327 12.0833 13.656 12.0833 13.4719V9.30521C12.0833 9.12103 12.0101 8.94439 11.8799 8.81416C11.7497 8.68393 11.573 8.61076 11.3888 8.61076C11.2047 8.61076 11.028 8.68393 10.8978 8.81416C10.7676 8.94439 10.6944 9.12103 10.6944 9.30521V13.4719C10.6944 13.656 10.7676 13.8327 10.8978 13.9629C11.028 14.0931 11.2047 14.1663 11.3888 14.1663Z\"\n        fill=\"#DE6061\"\n      />\n    </svg>\n  </div>\n\n  <!--mensaje de eliminar-->\n  <div class=\"delete-confirm\" *ngIf=\"fileItem.state === 'confirm-delete'\">\n    <span class=\"message\">{{\n      (fileItem.previewUrl ? 'delete image' : 'delete file') | translate\n    }}</span>\n    <div class=\"actions\">\n      <dropi-button size=\"small\" text=\"S\u00ED\" (onClick)=\"onSendClick('confirm-delete')\"></dropi-button>\n      <dropi-button\n        text=\"No\"\n        size=\"small\"\n        (onClick)=\"onSendClick('cancel-delete')\"\n        severity=\"secondary\"\n      ></dropi-button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.file-card{display:flex;padding:var(--Size-4, 16px);align-items:center;gap:var(--Size-3, 12px);align-self:stretch;border-radius:var(--Border-2);border:1px solid var(--Gray-Gray-100);background:var(--White, #FFF)}.file-card .preview-wrapper{width:34px;height:34px;position:relative;display:inline-block;border-radius:var(--Border-2);overflow:hidden}.file-card .preview-wrapper .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.file-card .preview-wrapper .preview.uploading{filter:blur(2px)}.file-card .preview-wrapper .overlay-icon{width:16px;height:16px;padding:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--White, #fff)}.file-card .info-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2);flex:1 0 0}.file-card .info-container .file-name{overflow:hidden;color:var(--Gray-Gray-600);text-overflow:ellipsis;font-size:12px;font-style:normal;font-weight:400;line-height:150%;white-space:nowrap;max-width:300px}.file-card .info-container .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.file-card .info-container .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500);transition:width .3s ease}.file-card .delete,.file-card .preview-image{display:inline-block;transition:transform .3s ease;border-radius:var(--Border-2)}.file-card .delete:hover,.file-card .preview-image:hover{cursor:pointer;transform:scale(1.1)}.file-card .delete-confirm{color:var(--Gray-Gray-600);font-size:var(--font-size-xs);font-style:normal;font-weight:500;line-height:150%;display:flex;justify-content:space-between;align-items:center;align-self:stretch;flex:1 0 0}.file-card .delete-confirm .actions{display:flex;align-items:flex-start;gap:var(--Size-2, 8px)}@media (max-width: 600px){.file-card .info-container .file-name{max-width:100px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardViewComponent, decorators: [{
             type: Component,
@@ -5012,7 +5041,7 @@ class FileListComponent {
         this.uploadFileService?.triggerInput();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListComponent, deps: [{ token: "UploadFileService" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileListComponent, isStandalone: true, selector: "app-file-list", inputs: { files: "files", onlyView: "onlyView", previewType: "previewType", maxFiles: "maxFiles", addButton: "addButton" }, outputs: { action: "action" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"files-container\">\n  <div class=\"grid-list\">\n    <ng-container *ngIf=\"!viewImageToDelete\">\n      <app-grid-view\n        *ngFor=\"let fileItem of gridFiles\"\n        [fileItem]=\"fileItem\"\n        (action)=\"onChildGridAction($event)\"\n      ></app-grid-view>\n    </ng-container>\n\n    <app-card-view\n      *ngIf=\"viewImageToDelete\"\n      style=\"width: 100%\"\n      [fileItem]=\"imageTodelete\"\n      [onlyView]=\"onlyView\"\n      (action)=\"onDeleteCardAction($event)\"\n    ></app-card-view>\n    <div\n      (click)=\"addImage()\"\n      *ngIf=\"(gridFiles.length != 0 || (previewType == 'grid' && addButton)) && gridFiles.length < maxFiles && !viewImageToDelete\"\n      class=\"add-img\"\n    >\n      <div class=\"icon\">\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z\"\n            fill=\"#32394D\"\n          />\n        </svg>\n      </div>\n      <div class=\"text\">\n        {{ 'add' | translate }}\n      </div>\n    </div>\n  </div>\n  <div class=\"card-list\">\n    <app-card-view\n      *ngFor=\"let fileItem of cardFiles\"\n      style=\"width: 100%\"\n      [fileItem]=\"fileItem\"\n      [onlyView]=\"onlyView\"\n      (action)=\"onChildAction($event)\"\n    ></app-card-view>\n  </div>\n</div>\n", styles: [".grid-list{display:flex;align-items:flex-start;gap:var(--Size-5, 24px);align-self:stretch;flex-wrap:wrap}.files-container{display:flex;flex-direction:column;gap:var(--Size-3)}.card-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Size-3);align-self:stretch;width:100%}.add-img{display:flex;height:88px;width:88px;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-1, 4px);align-self:stretch;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-50, #f7f8fa)}.add-img:hover{cursor:pointer;transform:scale(1.1)}.add-img .icon{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Gray-Gray-100, #e6eaf2)}.add-img .text{color:var(--Gray-600, #475066);text-align:center;font-size:12px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardViewComponent, selector: "app-card-view", inputs: ["fileItem", "onlyView"], outputs: ["action"] }, { kind: "component", type: GridViewComponent, selector: "app-grid-view", inputs: ["fileItem"], outputs: ["action"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FileListComponent, isStandalone: true, selector: "app-file-list", inputs: { files: "files", onlyView: "onlyView", previewType: "previewType", maxFiles: "maxFiles", addButton: "addButton" }, outputs: { action: "action" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"files-container\">\n  <div class=\"grid-list\">\n    <ng-container *ngIf=\"!viewImageToDelete\">\n      <app-grid-view\n        *ngFor=\"let fileItem of gridFiles\"\n        [fileItem]=\"fileItem\"\n        (action)=\"onChildGridAction($event)\"\n      ></app-grid-view>\n    </ng-container>\n\n    <app-card-view\n      *ngIf=\"viewImageToDelete\"\n      style=\"width: 100%\"\n      [fileItem]=\"imageTodelete\"\n      [onlyView]=\"onlyView\"\n      (action)=\"onDeleteCardAction($event)\"\n    ></app-card-view>\n    <div\n      (click)=\"addImage()\"\n      *ngIf=\"(gridFiles.length != 0 || (previewType == 'grid' && addButton)) && gridFiles.length < maxFiles && !viewImageToDelete\"\n      class=\"add-img\"\n    >\n      <div class=\"icon\">\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z\"\n            fill=\"#32394D\"\n          />\n        </svg>\n      </div>\n      <div class=\"text\">\n        {{ 'add' | translate }}\n      </div>\n    </div>\n  </div>\n  <div class=\"card-list\">\n    <app-card-view\n      *ngFor=\"let fileItem of cardFiles\"\n      style=\"width: 100%\"\n      [fileItem]=\"fileItem\"\n      [onlyView]=\"onlyView\"\n      (action)=\"onChildAction($event)\"\n    ></app-card-view>\n  </div>\n</div>\n", styles: [".grid-list{display:flex;align-items:flex-start;gap:var(--Size-5, 24px);align-self:stretch;flex-wrap:wrap}.files-container{display:flex;flex-direction:column;gap:var(--Size-3)}.card-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Size-3);align-self:stretch;width:100%}.add-img{display:flex;height:88px;width:88px;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-1, 4px);align-self:stretch;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-50, #f7f8fa)}.add-img:hover{cursor:pointer;transform:scale(1.1)}.add-img .icon{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Gray-Gray-100, #e6eaf2)}.add-img .text{color:var(--Gray-600, #475066);text-align:center;font-size:12px;font-style:normal;font-weight:400;line-height:150%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardViewComponent, selector: "app-card-view", inputs: ["fileItem", "onlyView"], outputs: ["action"] }, { kind: "component", type: GridViewComponent, selector: "app-grid-view", inputs: ["fileItem"], outputs: ["action"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
@@ -5076,7 +5105,7 @@ class DropiFileUploadComponent {
         // Implementación básica para build
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiFileUploadComponent, deps: [{ token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiFileUploadComponent, isStandalone: true, selector: "app-dropi-file-upload", inputs: { params: "params" }, outputs: { uploadedUrlsChange: "uploadedUrlsChange" }, ngImport: i0, template: "<div class=\"upload-container\">\n  <!--Encabezado -->\n  <div class=\"upload-header\">\n    <div class=\"title text\">{{ params.title | translate }}</div>\n    <div class=\"label text\">{{ params.label | translate }}</div>\n  </div>\n\n    <app-alert\n    *ngIf=\"error\"\n    [message]=\"errorMessage | translate\"\n    type=\"default\"\n    state=\"error\"\n    [dismissable]=\"true\"\n    [showButton]=\"false\"\n    (onClose)=\"error = false\"\n  ></app-alert>\n  <!--Zona de arrastre -->\n  <app-drop-zone\n    *ngIf=\"selectedFiles.length < params.maxFiles\"\n    [hidden]=\"params.previewType === 'grid' && (!params.viewDragAndDrop || selectedFiles.length > 0)\"\n    [accept]=\"params.accept\"\n    [multiple]=\"params.multiple\"\n    [compress]=\"params.compress\"\n    [maxHeight]=\"params.maxHeight\"\n    [maxWidth]=\"params.maxWidth\"\n    [maxFileSizeMB]=\"params.maxFileSizeMB\"\n    [textButton]=\"params.textButton || 'Seleccionar Imagen'\"\n    [textFileUpload]=\"params.textDropZone || 'Drop or upload an image here'\"\n    (addFiles)=\"onFilesAdded($event)\"\n  ></app-drop-zone>\n\n\n  <!--Listado de archivos -->\n  <app-file-list\n    [onlyView]=\"params.onlyView\"\n    [maxFiles]=\"params.maxFiles\"\n    [files]=\"selectedFiles\"\n    (action)=\"onFileAction($event)\"\n    [previewType]=\"params.previewType\"\n    [addButton]=\"!params.viewDragAndDrop\"\n  ></app-file-list>\n</div>\n", styles: [".upload-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px);width:100%;margin:var(--Size-3, 12px)}.upload-header{gap:var(--Size-1);display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.upload-header .text{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs);font-style:normal;line-height:150%}.upload-header .title{font-weight:500}.upload-header .label{font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: DropZoneComponent, selector: "app-drop-zone", inputs: ["multiple", "accept", "maxFiles", "maxFileSizeMB", "title", "label", "viewDragAndDrop", "compress", "maxHeight", "maxWidth", "textButton", "textFileUpload"], outputs: ["addFiles"] }, { kind: "component", type: FileListComponent, selector: "app-file-list", inputs: ["files", "onlyView", "previewType", "maxFiles", "addButton"], outputs: ["action"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiFileUploadComponent, isStandalone: true, selector: "app-dropi-file-upload", inputs: { params: "params" }, outputs: { uploadedUrlsChange: "uploadedUrlsChange" }, ngImport: i0, template: "<div class=\"upload-container\">\n  <!--Encabezado -->\n  <div class=\"upload-header\">\n    <div class=\"title text\">{{ params.title | translate }}</div>\n    <div class=\"label text\">{{ params.label | translate }}</div>\n  </div>\n\n    <app-alert\n    *ngIf=\"error\"\n    [message]=\"errorMessage | translate\"\n    type=\"default\"\n    state=\"error\"\n    [dismissable]=\"true\"\n    [showButton]=\"false\"\n    (onClose)=\"error = false\"\n  ></app-alert>\n  <!--Zona de arrastre -->\n  <app-drop-zone\n    *ngIf=\"selectedFiles.length < params.maxFiles\"\n    [hidden]=\"params.previewType === 'grid' && (!params.viewDragAndDrop || selectedFiles.length > 0)\"\n    [accept]=\"params.accept\"\n    [multiple]=\"params.multiple\"\n    [compress]=\"params.compress\"\n    [maxHeight]=\"params.maxHeight\"\n    [maxWidth]=\"params.maxWidth\"\n    [maxFileSizeMB]=\"params.maxFileSizeMB\"\n    [textButton]=\"params.textButton || 'Seleccionar Imagen'\"\n    [textFileUpload]=\"params.textDropZone || 'Drop or upload an image here'\"\n    (addFiles)=\"onFilesAdded($event)\"\n  ></app-drop-zone>\n\n\n  <!--Listado de archivos -->\n  <app-file-list\n    [onlyView]=\"params.onlyView\"\n    [maxFiles]=\"params.maxFiles\"\n    [files]=\"selectedFiles\"\n    (action)=\"onFileAction($event)\"\n    [previewType]=\"params.previewType\"\n    [addButton]=\"!params.viewDragAndDrop\"\n  ></app-file-list>\n</div>\n", styles: [".upload-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px);width:100%;margin:var(--Size-3, 12px)}.upload-header{gap:var(--Size-1);display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}.upload-header .text{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs);font-style:normal;line-height:150%}.upload-header .title{font-weight:500}.upload-header .label{font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DropZoneComponent, selector: "app-drop-zone", inputs: ["multiple", "accept", "maxFiles", "maxFileSizeMB", "title", "label", "viewDragAndDrop", "compress", "maxHeight", "maxWidth", "textButton", "textFileUpload"], outputs: ["addFiles"] }, { kind: "component", type: FileListComponent, selector: "app-file-list", inputs: ["files", "onlyView", "previewType", "maxFiles", "addButton"], outputs: ["action"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiFileUploadComponent, decorators: [{
             type: Component,
@@ -5486,7 +5515,7 @@ class DropiCountrySelectorComponent {
         this.filteredCountries = this.countries;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiCountrySelectorComponent, deps: [{ token: ElementRef }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiCountrySelectorComponent, isStandalone: true, selector: "app-dropi-country-selector", inputs: { selectProperties: "selectProperties", disabled: "disabled", formControl: "formControl", currentSelection: "currentSelection", searchTerm: "searchTerm" }, outputs: { onChangeSelect: "onChangeSelect" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"custom-select\">\n  <label *ngIf=\"selectProperties?.label\">\n    {{ selectProperties.label | translate }}\n    <span *ngIf=\"selectProperties?.showObligatory\">*</span>\n  </label>\n  <button\n    type=\"button\"\n    class=\"select-button\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'select-completed': !!selectedOption,\n      'select-invalid': hasError\n    }\"\n    (click)=\"showOptions()\"\n  >\n    <div>\n      <ng-container *ngIf=\"selectedOption; else placeholder\">\n        <img\n          style=\"border-radius: 16px\"\n          [src]=\"'https://flagsapi.com/' + selectedOption.code + '/shiny/24.png'\"\n        />\n        {{ selectedOption.name }}\n      </ng-container>\n\n      <ng-template #placeholder>\n        {{ selectProperties.placeholder }}\n      </ng-template>\n    </div>\n\n    <app-icon\n      [name]=\"isExpanded ? 'Dropdown-up' : 'Dropdown-down'\"\n      width=\"20px\"\n      height=\"20px\"\n      color=\"Gray-Gray-500\"\n    ></app-icon>\n  </button>\n\n  <ul class=\"select-dropdown\" [ngClass]=\"isExpanded ? 'expanded-select' : 'collapsed-select'\">\n    <li>\n      <input\n        #searchInput\n        type=\"text\"\n        [(ngModel)]=\"searchTerm\"\n        (input)=\"filterCountries()\"\n        class=\"country-search\"\n        placeholder=\"{{ 'Search country' | translate }}\"\n      />\n    </li>\n    <li *ngFor=\"let country of filteredCountries\">\n      <button class=\"option\" (click)=\"selectOption(country)\" type=\"button\">\n        <img\n          style=\"border-radius: 16px\"\n          [src]=\"'https://flagsapi.com/' + country.code + '/shiny/24.png'\"\n        />\n        {{ country.name }}\n      </button>\n    </li>\n  </ul>\n</div>\n", styles: [".custom-select{position:relative;width:100%}.custom-select label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.custom-select label span{color:var(--Error-Error-500)}.select-button{width:100%;height:40px;padding:.47rem .75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);color:var(--Gray-Gray-500);font-size:var(--font-size-s);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0;border:1px solid transparent;border-radius:var(--Border-2);overflow-y:scroll;z-index:100}.option{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s);cursor:pointer}.option:hover{background:var(--Gray-Gray-50)}.expanded-select{max-height:250px;background:var(--Neutral-White);box-shadow:var(--Shadow-medium);transition:max-height .2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;transition:max-height .2s ease-out,background .6s ease-out,box-shadow .6s ease-out}.select-button:focus{border-color:var(--Info-Info-500)!important}.select-button:disabled,.option:disabled{border-color:var(--Gray-Gray-200);color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);cursor:unset}.select-completed{border-color:var(--Gray-Gray-400);color:var(--Gray-Gray-600);background:var(--Neutral-White)}.select-invalid{border-color:var(--Error-Error-500)!important}.select-helper{display:flex;gap:4px;align-items:baseline}.select-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.invalid-color{color:var(--Error-Error-500)!important}.country-search{width:100%;padding:6px 10px;border:none;border-bottom:1px solid #ccc;outline:none;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropiCountrySelectorComponent, isStandalone: true, selector: "app-dropi-country-selector", inputs: { selectProperties: "selectProperties", disabled: "disabled", formControl: "formControl", currentSelection: "currentSelection", searchTerm: "searchTerm" }, outputs: { onChangeSelect: "onChangeSelect" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"custom-select\">\n  <label *ngIf=\"selectProperties?.label\">\n    {{ selectProperties.label | translate }}\n    <span *ngIf=\"selectProperties?.showObligatory\">*</span>\n  </label>\n  <button\n    type=\"button\"\n    class=\"select-button\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'select-completed': !!selectedOption,\n      'select-invalid': hasError\n    }\"\n    (click)=\"showOptions()\"\n  >\n    <div>\n      <ng-container *ngIf=\"selectedOption; else placeholder\">\n        <img\n          style=\"border-radius: 16px\"\n          [src]=\"'https://flagsapi.com/' + selectedOption.code + '/shiny/24.png'\"\n        />\n        {{ selectedOption.name }}\n      </ng-container>\n\n      <ng-template #placeholder>\n        {{ selectProperties.placeholder }}\n      </ng-template>\n    </div>\n\n    <app-icon\n      [name]=\"isExpanded ? 'Dropdown-up' : 'Dropdown-down'\"\n      width=\"20px\"\n      height=\"20px\"\n      color=\"Gray-Gray-500\"\n    ></app-icon>\n  </button>\n\n  <ul class=\"select-dropdown\" [ngClass]=\"isExpanded ? 'expanded-select' : 'collapsed-select'\">\n    <li>\n      <input\n        #searchInput\n        type=\"text\"\n        [(ngModel)]=\"searchTerm\"\n        (input)=\"filterCountries()\"\n        class=\"country-search\"\n        placeholder=\"{{ 'Search country' | translate }}\"\n      />\n    </li>\n    <li *ngFor=\"let country of filteredCountries\">\n      <button class=\"option\" (click)=\"selectOption(country)\" type=\"button\">\n        <img\n          style=\"border-radius: 16px\"\n          [src]=\"'https://flagsapi.com/' + country.code + '/shiny/24.png'\"\n        />\n        {{ country.name }}\n      </button>\n    </li>\n  </ul>\n</div>\n", styles: [".custom-select{position:relative;width:100%}.custom-select label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600)}.custom-select label span{color:var(--Error-Error-500)}.select-button{width:100%;height:40px;padding:.47rem .75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);color:var(--Gray-Gray-500);font-size:var(--font-size-s);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0;border:1px solid transparent;border-radius:var(--Border-2);overflow-y:scroll;z-index:100}.option{width:100%;height:45px;border-radius:var(--Border-2);padding-top:var(--Size-3);padding-right:var(--Size-4);padding-bottom:var(--Size-3);padding-left:var(--Size-4);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600);font-size:var(--font-size-s);cursor:pointer}.option:hover{background:var(--Gray-Gray-50)}.expanded-select{max-height:250px;background:var(--Neutral-White);box-shadow:var(--Shadow-medium);transition:max-height .2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;transition:max-height .2s ease-out,background .6s ease-out,box-shadow .6s ease-out}.select-button:focus{border-color:var(--Info-Info-500)!important}.select-button:disabled,.option:disabled{border-color:var(--Gray-Gray-200);color:var(--Gray-Gray-400);background-color:var(--Gray-Gray-50);cursor:unset}.select-completed{border-color:var(--Gray-Gray-400);color:var(--Gray-Gray-600);background:var(--Neutral-White)}.select-invalid{border-color:var(--Error-Error-500)!important}.select-helper{display:flex;gap:4px;align-items:baseline}.select-helper span{display:block;margin-top:8px;color:var(--Gray-Gray-600);font-size:var(--font-size-xs)}.invalid-color{color:var(--Error-Error-500)!important}.country-search{width:100%;padding:6px 10px;border:none;border-bottom:1px solid #ccc;outline:none;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropiCountrySelectorComponent, decorators: [{
             type: Component,
@@ -5652,7 +5681,7 @@ class SidebarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, deps: [{ token: "Router" }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { sideBarProperties: "sideBarProperties" }, outputs: { onIndexChanged: "onIndexChanged" }, ngImport: i0, template: "<div class=\"main-sidebar-container\">\n  <ng-container *ngFor=\"let item of sideBarProperties\">\n    <div\n      class=\"sidebar-option\"\n      [ngClass]=\"item.active ? 'sidebar-active-option' : 'sidebar-default-option'\"\n      (click)=\"onItemClick(item)\"\n    >\n      <app-icon\n        [name]=\"item.icon\"\n        width=\"20px\"\n        height=\"20px\"\n        [color]=\"item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'\"\n      ></app-icon>\n      <span>{{ item.text | translate }}</span>\n      <app-icon\n        *ngIf=\"item.subItems && item.subItems.length > 0\"\n        class=\"arrow\"\n        [ngClass]=\"{\n          'arrow-expanded': item.expandedMenu\n        }\"\n        name=\"Dropdown-down\"\n        width=\"20px\"\n        height=\"20px\"\n        [color]=\"item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'\"\n      ></app-icon>\n    </div>\n    <ng-container *ngIf=\"item.subItems && item.subItems.length > 0\">\n      <div\n        class=\"sidebar-sub-item\"\n        *ngFor=\"let subOption of item.subItems\"\n        (click)=\"onSubItemClick(subOption)\"\n        [ngClass]=\"{\n          'sidebar-expanded': item.expandedMenu,\n          'sidebar-sub-item-default': !subOption.active,\n          'sidebar-sub-item-active': subOption.active\n        }\"\n      >\n        {{ subOption.text | translate }}\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".main-sidebar-container{margin-top:20px}.sidebar-option{height:45px;display:flex;align-items:center;position:relative;font-weight:var(--font-weight-medium);gap:var(--Size-3);padding:var(--Size-3);font-size:var(--font-size-s);border-radius:var(--Border-1);min-width:147px;cursor:pointer}.sidebar-option .arrow{position:absolute;right:17px;transition:transform .3s ease}.sidebar-option .arrow-expanded{transform:rotate(180deg)}.sidebar-default-option{color:var(--Gray-Gray-500)}.sidebar-active-option{color:var(--Primary-Primary-500);background-color:#fef8f1}.sidebar-sub-item{overflow:hidden;max-height:0;height:auto;font-weight:var(--font-weight-medium);gap:var(--Size-3);font-size:var(--font-size-s);cursor:pointer;opacity:0;padding:0 var(--Size-3) 0 var(--Size-8);transition:max-height .3s ease-out,opacity .3s ease-out,padding .3s ease-out}.sidebar-sub-item.sidebar-expanded{max-height:200px;opacity:1;padding:var(--Size-3) var(--Size-3) var(--Size-3) var(--Size-8)}.sidebar-sub-item-default{color:var(--Gray-Gray-500)}.sidebar-sub-item-active{color:var(--Primary-Primary-500)}.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", inputs: { sideBarProperties: "sideBarProperties" }, outputs: { onIndexChanged: "onIndexChanged" }, ngImport: i0, template: "<div class=\"main-sidebar-container\">\n  <ng-container *ngFor=\"let item of sideBarProperties\">\n    <div\n      class=\"sidebar-option\"\n      [ngClass]=\"item.active ? 'sidebar-active-option' : 'sidebar-default-option'\"\n      (click)=\"onItemClick(item)\"\n    >\n      <app-icon\n        [name]=\"item.icon\"\n        width=\"20px\"\n        height=\"20px\"\n        [color]=\"item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'\"\n      ></app-icon>\n      <span>{{ item.text | translate }}</span>\n      <app-icon\n        *ngIf=\"item.subItems && item.subItems.length > 0\"\n        class=\"arrow\"\n        [ngClass]=\"{\n          'arrow-expanded': item.expandedMenu\n        }\"\n        name=\"Dropdown-down\"\n        width=\"20px\"\n        height=\"20px\"\n        [color]=\"item.active ? 'Primary-Primary-500' : 'Gray-Gray-500'\"\n      ></app-icon>\n    </div>\n    <ng-container *ngIf=\"item.subItems && item.subItems.length > 0\">\n      <div\n        class=\"sidebar-sub-item\"\n        *ngFor=\"let subOption of item.subItems\"\n        (click)=\"onSubItemClick(subOption)\"\n        [ngClass]=\"{\n          'sidebar-expanded': item.expandedMenu,\n          'sidebar-sub-item-default': !subOption.active,\n          'sidebar-sub-item-active': subOption.active\n        }\"\n      >\n        {{ subOption.text | translate }}\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [".main-sidebar-container{margin-top:20px}.sidebar-option{height:45px;display:flex;align-items:center;position:relative;font-weight:var(--font-weight-medium);gap:var(--Size-3);padding:var(--Size-3);font-size:var(--font-size-s);border-radius:var(--Border-1);min-width:147px;cursor:pointer}.sidebar-option .arrow{position:absolute;right:17px;transition:transform .3s ease}.sidebar-option .arrow-expanded{transform:rotate(180deg)}.sidebar-default-option{color:var(--Gray-Gray-500)}.sidebar-active-option{color:var(--Primary-Primary-500);background-color:#fef8f1}.sidebar-sub-item{overflow:hidden;max-height:0;height:auto;font-weight:var(--font-weight-medium);gap:var(--Size-3);font-size:var(--font-size-s);cursor:pointer;opacity:0;padding:0 var(--Size-3) 0 var(--Size-8);transition:max-height .3s ease-out,opacity .3s ease-out,padding .3s ease-out}.sidebar-sub-item.sidebar-expanded{max-height:200px;opacity:1;padding:var(--Size-3) var(--Size-3) var(--Size-3) var(--Size-8)}.sidebar-sub-item-default{color:var(--Gray-Gray-500)}.sidebar-sub-item-active{color:var(--Primary-Primary-500)}.space-between{justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["name", "width", "height", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,