lib-portal-angular 0.0.87 → 0.0.88

package/fesm2022/lib-portal-angular.mjs

@@ -1,18 +1,20 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostListener, ViewChild, forwardRef, Directive, ViewContainerRef, NgModule, createComponent } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostListener, ViewChild, forwardRef, Directive, ViewEncapsulation, ViewContainerRef, NgModule, createComponent } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from 'lucide-angular';
+import * as i4 from 'lucide-angular';
 import { LucideAngularModule, icons } from 'lucide-angular';
 import hljs from 'highlight.js';
 import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { Subject, of, Subscription, Observable } from 'rxjs';
-import { debounceTime, startWith, switchMap, map, catchError, takeUntil } from 'rxjs/operators';
-import * as i2$1 from '@angular/common/http';
+import { debounceTime, distinctUntilChanged, switchMap, tap, map, catchError, takeUntil } from 'rxjs/operators';
+import * as i1$2 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
-import * as i5 from '@ng-select/ng-select';
+import jsPDF from 'jspdf';
+import 'jspdf-autotable';
+import * as XLSX from 'xlsx';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as CryptoJS from 'crypto-js';
 
@@ -1151,7 +1153,7 @@ class CalendarArgentaComponent {
         return this.locales[this.locale]?.daysOfWeek || this.locales['en'].daysOfWeek;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarArgentaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarArgentaComponent, selector: "argenta-calendar", inputs: { id: "id", placeholder: "placeholder", label: "label", minDate: "minDate", maxDate: "maxDate", locale: "locale", useTime: "useTime", initialDate: "initialDate", rangeMode: "rangeMode", startDate: "startDate", endDate: "endDate", closeButtonLabel: "closeButtonLabel" }, outputs: { rangeChange: "rangeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <div class=\"input-wrapper\">\n    <input\n      id=\"{{ id }}\"\n      type=\"text\"\n      class=\"custom-input\"\n      [attr.placeholder]=\"rangeMode && useTime ? 'dd/MM/yyyy HH:mm - dd/MM/yyyy HH:mm' : \n      rangeMode && !useTime ? 'dd/MM/yyyy - dd/MM/yyyy' :(!rangeMode && useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy')\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.in-range]=\"isInRange(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              {{ day ? day : \"\" }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Inputs para inser\u00E7\u00E3o das horas -->\n        <div *ngIf=\"useTime\" class=\"time-inputs\">\n          <!-- Campo de hora de in\u00EDcio -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora de In\u00EDcio' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"startTime\" (change)=\"onTimeChange('start')\" />\n          </div>\n\n          <!-- Campo de hora de fim -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.endTimeLabel || 'Hora de Fim' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"endTime\" (change)=\"onTimeChange('end')\" />\n          </div>\n\n          <!-- Campo de hora \u00FAnica (se n\u00E3o for range) -->\n          <div *ngIf=\"!rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora' }}</label> <!-- Usando o label de in\u00EDcio -->\n            <input type=\"time\" [(ngModel)]=\"selectedTime\" (change)=\"onTimeChange('single')\" />\n          </div>\n        </div>\n\n        <!-- Bot\u00E3o de fechar o calend\u00E1rio -->\n        <button class=\"close-button\" (click)=\"closeCalendar()\">{{ closeButtonLabel }}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease;position:absolute;top:100%;left:0;z-index:9999;background-color:#fff;box-shadow:0 4px 12px #0000001a;width:auto;max-width:none}.calendar-wrapper{position:relative}@media (max-width: 300px){.calendar-container{width:100vw;left:0}}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:var(--font-family);transition:max-height .4s ease;background-color:#fdfdfd}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:var(--primary-color);color:var(--text-color);border:none;padding:8px 12px;cursor:pointer;border-radius:8px;font-size:1.2rem;transition:background-color .2s}.calendar .calendar-header button:hover{background-color:var(--secondary-color)}.calendar .calendar-header span{font-size:1.4rem;color:var(--primary-color);text-align:center;flex-grow:1}.calendar .calendar-body{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar .calendar-body .calendar-day-names{display:contents}.calendar .calendar-body .calendar-day-names span{text-align:center;font-weight:700;margin-bottom:5px;font-size:.9rem}.calendar .calendar-body .calendar-day-names span:nth-child(1){color:#ff8080}.calendar .calendar-body .calendar-day-names span:nth-child(7){color:#555}.calendar .calendar-body .calendar-days{display:contents}.calendar .calendar-body .calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar .calendar-body .calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar .calendar-body .calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px;padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.custom-input:focus{outline:none;border-color:#ccc}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.error-message{position:relative;background-color:#ff8080;color:#fff;padding:10px;border-radius:8px;font-size:.9rem;max-width:250px;margin-top:5px}.error-message:after{content:\"\";position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#ff8080 transparent transparent transparent}.input-wrapper{position:relative;display:inline-block;width:100%}.input-wrapper .custom-input{width:100%;padding-right:40px;box-sizing:border-box}.input-wrapper .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;color:#b8b8b8}.calendar-days{display:contents}.calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color);text-decoration:underline}.calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar-days span.in-range{background-color:#fd9;color:#000}.calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.calendar-body{position:relative}.close-button{float:right;margin-top:10px;background-color:#fff3cd;color:#383838;border:none;padding:6px 12px;cursor:pointer;border-radius:20px;font-size:12px;font-weight:500;transition:all .2s ease}.close-button:hover{background-color:#e9ebec;box-shadow:0 2px 4px #eeebeb26}.close-button:active{transform:translateY(1px)}.time-inputs{display:flex;justify-content:space-between;margin-top:10px}.time-input{display:flex;flex-direction:column;width:45%}.time-input label{font-size:.9rem;margin-bottom:5px}.time-input input{padding:8px;font-size:.9rem;border:1px solid #ccc;border-radius:4px}\n"], dependencies: [{ 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: 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: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarArgentaComponent, selector: "argenta-calendar", inputs: { id: "id", placeholder: "placeholder", label: "label", minDate: "minDate", maxDate: "maxDate", locale: "locale", useTime: "useTime", initialDate: "initialDate", rangeMode: "rangeMode", startDate: "startDate", endDate: "endDate", closeButtonLabel: "closeButtonLabel" }, outputs: { rangeChange: "rangeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <div class=\"input-wrapper\">\n    <input\n      id=\"{{ id }}\"\n      type=\"text\"\n      class=\"custom-input\"\n      [attr.placeholder]=\"rangeMode && useTime ? 'dd/MM/yyyy HH:mm - dd/MM/yyyy HH:mm' : \n      rangeMode && !useTime ? 'dd/MM/yyyy - dd/MM/yyyy' :(!rangeMode && useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy')\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.in-range]=\"isInRange(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              {{ day ? day : \"\" }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Inputs para inser\u00E7\u00E3o das horas -->\n        <div *ngIf=\"useTime\" class=\"time-inputs\">\n          <!-- Campo de hora de in\u00EDcio -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora de In\u00EDcio' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"startTime\" (change)=\"onTimeChange('start')\" />\n          </div>\n\n          <!-- Campo de hora de fim -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.endTimeLabel || 'Hora de Fim' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"endTime\" (change)=\"onTimeChange('end')\" />\n          </div>\n\n          <!-- Campo de hora \u00FAnica (se n\u00E3o for range) -->\n          <div *ngIf=\"!rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora' }}</label> <!-- Usando o label de in\u00EDcio -->\n            <input type=\"time\" [(ngModel)]=\"selectedTime\" (change)=\"onTimeChange('single')\" />\n          </div>\n        </div>\n\n        <!-- Bot\u00E3o de fechar o calend\u00E1rio -->\n        <button class=\"close-button\" (click)=\"closeCalendar()\">{{ closeButtonLabel }}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease;position:absolute;top:100%;left:0;z-index:9999;background-color:#fff;box-shadow:0 4px 12px #0000001a;width:auto;max-width:none}.calendar-wrapper{position:relative}@media (max-width: 300px){.calendar-container{width:100vw;left:0}}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:var(--font-family);transition:max-height .4s ease;background-color:#fdfdfd}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:var(--primary-color);color:var(--text-color);border:none;padding:8px 12px;cursor:pointer;border-radius:8px;font-size:1.2rem;transition:background-color .2s}.calendar .calendar-header button:hover{background-color:var(--secondary-color)}.calendar .calendar-header span{font-size:1.4rem;color:var(--primary-color);text-align:center;flex-grow:1}.calendar .calendar-body{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar .calendar-body .calendar-day-names{display:contents}.calendar .calendar-body .calendar-day-names span{text-align:center;font-weight:700;margin-bottom:5px;font-size:.9rem}.calendar .calendar-body .calendar-day-names span:nth-child(1){color:#ff8080}.calendar .calendar-body .calendar-day-names span:nth-child(7){color:#555}.calendar .calendar-body .calendar-days{display:contents}.calendar .calendar-body .calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar .calendar-body .calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar .calendar-body .calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px;padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.custom-input:focus{outline:none;border-color:#ccc}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.error-message{position:relative;background-color:#ff8080;color:#fff;padding:10px;border-radius:8px;font-size:.9rem;max-width:250px;margin-top:5px}.error-message:after{content:\"\";position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#ff8080 transparent transparent transparent}.input-wrapper{position:relative;display:inline-block;width:100%}.input-wrapper .custom-input{width:100%;padding-right:40px;box-sizing:border-box}.input-wrapper .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;color:#b8b8b8}.calendar-days{display:contents}.calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color);text-decoration:underline}.calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar-days span.in-range{background-color:#fd9;color:#000}.calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.calendar-body{position:relative}.close-button{float:right;margin-top:10px;background-color:#fff3cd;color:#383838;border:none;padding:6px 12px;cursor:pointer;border-radius:20px;font-size:12px;font-weight:500;transition:all .2s ease}.close-button:hover{background-color:#e9ebec;box-shadow:0 2px 4px #eeebeb26}.close-button:active{transform:translateY(1px)}.time-inputs{display:flex;justify-content:space-between;margin-top:10px}.time-input{display:flex;flex-direction:column;width:45%}.time-input label{font-size:.9rem;margin-bottom:5px}.time-input input{padding:8px;font-size:.9rem;border:1px solid #ccc;border-radius:4px}\n"], dependencies: [{ 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: 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: "component", type: i4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarArgentaComponent, decorators: [{
             type: Component,
@@ -1525,192 +1527,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class DragDropListComponent {
-    constructor() {
-        this.nonSelectedList = [];
-        this.nonSelectedButtonClick = new EventEmitter();
-        this.nonSelectedInputChanged = new EventEmitter();
-        this.selectedList = [];
-        this.selectedButtonClick = new EventEmitter();
-        this.selectedInputChanged = new EventEmitter();
-        this.nonSelectedListInputSubject = new Subject();
-        this.selectedListInputSubject = new Subject();
-        this.ButtonClasses = ButtonClasses; // Adicione a enumeração ao componente
-        this.draggedItem = null;
-        this.nonSelectedListInputSubject.pipe(debounceTime(2000)).subscribe((value) => {
-            this.nonSelectedInputChanged.emit(value);
-        });
-        this.selectedListInputSubject.pipe(debounceTime(2000)).subscribe((value) => {
-            this.selectedInputChanged.emit(value);
-        });
-    }
-    onDragStart(item) {
-        this.draggedItem = item;
-    }
-    onDragOver(event) {
-        event.preventDefault();
-    }
-    onDrop(list, event) {
-        event.preventDefault();
-        if (this.draggedItem) {
-            const index = list.indexOf(this.draggedItem);
-            if (index === -1) {
-                this.removeItem(this.draggedItem);
-                list.push(this.draggedItem);
-            }
-            this.draggedItem = null;
-        }
-    }
-    removeItem(item) {
-        [this.nonSelectedList, this.selectedList].forEach((list) => {
-            const index = list.indexOf(item);
-            if (index !== -1) {
-                list.splice(index, 1);
-            }
-        });
-    }
-    nonSelectedListInputChange(event) {
-        this.nonSelectedListInputSubject.next(event.target.value);
-    }
-    selectedListInputChange(event) {
-        this.selectedListInputSubject.next(event.target.value);
-    }
-    selButtonClick() {
-        this.selectedButtonClick.emit();
-    }
-    nonSelButtonClick() {
-        this.nonSelectedButtonClick.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DragDropListComponent, selector: "argenta-drag-drop-list", inputs: { nonSelectedTitle: "nonSelectedTitle", nonSelectedList: "nonSelectedList", nonSelectedButtonLabel: "nonSelectedButtonLabel", selectedTitle: "selectedTitle", selectedList: "selectedList", selectedButtonLabel: "selectedButtonLabel" }, outputs: { nonSelectedButtonClick: "nonSelectedButtonClick", nonSelectedInputChanged: "nonSelectedInputChanged", selectedButtonClick: "selectedButtonClick", selectedInputChanged: "selectedInputChanged" }, ngImport: i0, template: "<!-- Cont\u00EAiner externo para dar a apar\u00EAncia de grupo -->\n<div class=\"group-container\">\n  <div class=\"container\">\n    <!-- Lista 1 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(nonSelectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ nonSelectedTitle }}</h6>\n        <div *ngIf=\"nonSelectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ nonSelectedButtonLabel }}\"\n            (onButtonClick)=\"nonSelButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"nonSelectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of nonSelectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n\n    <!-- Lista 2 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(selectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ selectedTitle }}</h6>\n        <div *ngIf=\"selectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ selectedButtonLabel }}\"\n            (onButtonClick)=\"selButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"selectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of selectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.group-container{display:flex;justify-content:center;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;width:80%;margin:auto}.container{display:flex;gap:20px;width:100%}.list{flex:1;padding:10px;background-color:#f0f0f0;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.list-input{width:100%;height:40px;margin-bottom:15px;border-radius:4px;border:1px solid #ccc;outline:none;font-size:1rem;resize:none}.item-card{width:100%;padding:15px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0003;cursor:move;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family);font-weight:500;font-size:1.1rem;color:#333}.row{display:flex;justify-content:space-between;align-items:center;width:100%;max-height:50px;height:50px}.align-end{display:flex;justify-content:flex-end}\n"], dependencies: [{ 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: ButtonComponent, selector: "argenta-custom-button", inputs: ["type", "label", "btnClass", "fontSize", "disabled", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "name", "value", "permissions"], outputs: ["onButtonClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "argenta-drag-drop-list", template: "<!-- Cont\u00EAiner externo para dar a apar\u00EAncia de grupo -->\n<div class=\"group-container\">\n  <div class=\"container\">\n    <!-- Lista 1 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(nonSelectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ nonSelectedTitle }}</h6>\n        <div *ngIf=\"nonSelectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ nonSelectedButtonLabel }}\"\n            (onButtonClick)=\"nonSelButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"nonSelectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of nonSelectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n\n    <!-- Lista 2 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(selectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ selectedTitle }}</h6>\n        <div *ngIf=\"selectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ selectedButtonLabel }}\"\n            (onButtonClick)=\"selButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"selectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of selectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.group-container{display:flex;justify-content:center;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;width:80%;margin:auto}.container{display:flex;gap:20px;width:100%}.list{flex:1;padding:10px;background-color:#f0f0f0;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.list-input{width:100%;height:40px;margin-bottom:15px;border-radius:4px;border:1px solid #ccc;outline:none;font-size:1rem;resize:none}.item-card{width:100%;padding:15px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0003;cursor:move;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family);font-weight:500;font-size:1.1rem;color:#333}.row{display:flex;justify-content:space-between;align-items:center;width:100%;max-height:50px;height:50px}.align-end{display:flex;justify-content:flex-end}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { nonSelectedTitle: [{
-                type: Input
-            }], nonSelectedList: [{
-                type: Input
-            }], nonSelectedButtonLabel: [{
-                type: Input
-            }], nonSelectedButtonClick: [{
-                type: Output
-            }], nonSelectedInputChanged: [{
-                type: Output
-            }], selectedTitle: [{
-                type: Input
-            }], selectedList: [{
-                type: Input
-            }], selectedButtonLabel: [{
-                type: Input
-            }], selectedButtonClick: [{
-                type: Output
-            }], selectedInputChanged: [{
-                type: Output
-            }] } });
-
-class DynamicModalComponent {
-    constructor() {
-        this.modalTitle = "Modal Title";
-        this.modalSizeClass = "";
-        this.modalId = "dynamicModal"; // ID único para cada modal
-    }
-    openModal() {
-        const modalElement = document.getElementById(this.modalId);
-        if (modalElement) {
-            modalElement.classList.add("show");
-            modalElement.setAttribute("aria-hidden", "false");
-            modalElement.style.display = "block";
-            document.body.classList.add("modal-open");
-            // Adiciona o backdrop manualmente se não existir
-            if (!document.querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)) {
-                const backdrop = document.createElement("div");
-                backdrop.className = "modal-backdrop fade show";
-                backdrop.setAttribute("data-modal-id", this.modalId);
-                document.body.appendChild(backdrop);
-            }
-        }
-    }
-    closeModal() {
-        const modalElement = document.getElementById(this.modalId);
-        if (modalElement) {
-            modalElement.classList.remove("show");
-            modalElement.setAttribute("aria-hidden", "true");
-            modalElement.style.display = "none";
-            document.body.classList.remove("modal-open");
-            document
-                .querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)
-                ?.remove();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicModalComponent, selector: "argenta-dynamic-modal", inputs: { modalTitle: "modalTitle", modalSizeClass: "modalSizeClass", modalId: "modalId" }, ngImport: i0, template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "argenta-dynamic-modal", template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
-        }], propDecorators: { modalTitle: [{
-                type: Input
-            }], modalSizeClass: [{
-                type: Input
-            }], modalId: [{
-                type: Input
-            }] } });
-
-class DynamicTableComponent {
-    constructor() {
-        this.itemsPerPageOptions = [10, 20, 50];
-        this.showPageInfo = true;
-        this.currentPage = 1;
-        this.itemsPerPage = 10;
-    }
-    get totalItems() {
-        return this.config.totalItems ?? this.config.data.length;
-    }
-    get paginatedData() {
-        if (!this.config.pagination) {
-            // Retorna todos os dados se a paginação estiver desativada
-            return this.config.data;
-        }
-        const itemsPerPage = this.config.itemsPerPage || this.itemsPerPage;
-        const startIndex = (this.currentPage - 1) * itemsPerPage;
-        return this.config.data.slice(startIndex, startIndex + itemsPerPage);
-    }
-    ngOnInit() {
-        if (!this.config || !this.config.columns || !this.config.data) {
-            throw new Error("DynamicTableComponent: Configuração inválida.");
-        }
-        // Define valores padrão se não especificados
-        this.config.showHeader = this.config.showHeader ?? true; // Exibe o cabeçalho por padrão
-        this.config.pagination = this.config.pagination ?? true; // Ativa paginação por padrão
-        this.itemsPerPage = this.config.itemsPerPage || 10;
-    }
-    onPageChange(newPage) {
-        this.currentPage = newPage;
-    }
-    onItemsPerPageChange(event) {
-        const target = event.target;
-        this.itemsPerPage = +target.value;
-        this.currentPage = 1; // Reinicia a paginação ao alterar os itens por página
-    }
-    // Getter para garantir que totalItems nunca seja undefined
-    get safeTotalItems() {
-        return this.totalItems || 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicTableComponent, selector: "argenta-dynamic-table", inputs: { config: "config", itemsPerPageOptions: "itemsPerPageOptions", showPageInfo: "showPageInfo" }, ngImport: i0, template: "<table class=\"table\" [ngClass]=\"{ nested: config.isNested }\">\n  <thead *ngIf=\"config.showHeader\">\n    <tr>\n      <th *ngFor=\"let column of config.columns\">{{ column.header }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of paginatedData\">\n      <td *ngFor=\"let column of config.columns\">\n        <ng-container [ngSwitch]=\"column.type\">\n          <span *ngSwitchCase=\"'text'\">{{ row[column.key] }}</span>\n          <ng-container *ngSwitchCase=\"'template'\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.template || null;\n                context: { $implicit: row }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div\n  class=\"text-center pagination-controls\"\n  [ngClass]=\"{ nested: config.isNested }\"\n  *ngIf=\"config.pagination\"\n>\n  <custom-pagination\n    [totalItems]=\"safeTotalItems\"\n    [itemsPerPage]=\"itemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.table{width:100%;border-collapse:collapse;border-spacing:0}.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{border-top-left-radius:10px}.table thead th:last-child{border-top-right-radius:10px}.table.nested thead th{font-size:.7rem;padding:7px;line-height:.8}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table.nested tbody td:first-child{padding-left:1rem}.table tbody tr:hover{background-color:#f5f5f5!important;transition:background-color .3s ease}.table.nested tbody tr:hover{background-color:#f0f0f0!important}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.pagination-controls.nested{font-size:.7rem;transform:scale(.7);margin-top:.5rem}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.left-section{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.5rem}.custom-select{font-family:var(--font-family);font-size:14px;padding:.375rem 1.75rem .375rem .75rem;border:1px solid #ccc;border-radius:.25rem;appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px}.custom-select:focus{border-color:#80bdff;outline:none;box-shadow:0 0 0 .2rem #007bff40}\n"], dependencies: [{ 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "argenta-dynamic-table", template: "<table class=\"table\" [ngClass]=\"{ nested: config.isNested }\">\n  <thead *ngIf=\"config.showHeader\">\n    <tr>\n      <th *ngFor=\"let column of config.columns\">{{ column.header }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of paginatedData\">\n      <td *ngFor=\"let column of config.columns\">\n        <ng-container [ngSwitch]=\"column.type\">\n          <span *ngSwitchCase=\"'text'\">{{ row[column.key] }}</span>\n          <ng-container *ngSwitchCase=\"'template'\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.template || null;\n                context: { $implicit: row }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div\n  class=\"text-center pagination-controls\"\n  [ngClass]=\"{ nested: config.isNested }\"\n  *ngIf=\"config.pagination\"\n>\n  <custom-pagination\n    [totalItems]=\"safeTotalItems\"\n    [itemsPerPage]=\"itemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.table{width:100%;border-collapse:collapse;border-spacing:0}.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{border-top-left-radius:10px}.table thead th:last-child{border-top-right-radius:10px}.table.nested thead th{font-size:.7rem;padding:7px;line-height:.8}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table.nested tbody td:first-child{padding-left:1rem}.table tbody tr:hover{background-color:#f5f5f5!important;transition:background-color .3s ease}.table.nested tbody tr:hover{background-color:#f0f0f0!important}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.pagination-controls.nested{font-size:.7rem;transform:scale(.7);margin-top:.5rem}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.left-section{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.5rem}.custom-select{font-family:var(--font-family);font-size:14px;padding:.375rem 1.75rem .375rem .75rem;border:1px solid #ccc;border-radius:.25rem;appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px}.custom-select:focus{border-color:#80bdff;outline:none;box-shadow:0 0 0 .2rem #007bff40}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
-                type: Input
-            }], itemsPerPageOptions: [{
-                type: Input
-            }], showPageInfo: [{
-                type: Input
-            }] } });
-
 class FileUploadComponent {
     constructor(authService) {
         this.authService = authService;
@@ -2242,174 +2058,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class JsonViewerComponent {
-    constructor() {
-        this.isRoot = true;
-        this.allExpanded = true;
-        this.expandedMap = new Map();
+class MultiSelectComponent {
+    onClickOutside(event) {
+        const target = event.target;
+        if (!target.closest(".custom-select-container")) {
+            this.closeDropdown();
+        }
     }
-    toggleAll() {
-        this.allExpanded = !this.allExpanded;
-        this.expandedMap.clear();
+    constructor(authService, http, cdr) {
+        this.authService = authService;
+        this.http = http;
+        this.cdr = cdr;
+        this.label = "Multi Select";
+        this.data = [];
+        this.placeholder = "";
+        this.id = "multiSelectId";
+        this.bindLabel = "";
+        this.bindValue = "";
+        this.closeOnSelect = false;
+        this.searchUrl = "";
+        this.multiple = true;
+        this.searchParams = {};
+        this.keyupEvent = new EventEmitter();
+        this.lastSearchTerm = "";
+        this.backupData = [];
+        this.allItems = [];
+        this.items = of([]);
+        this.filteredItems = of([]);
+        this.searchTerms = new Subject();
+        this.isOpen = false;
+        this.onChangeCallback = () => { };
+        this.onTouchedCallback = () => { };
+        this.isCourseEntered = false;
+        this.compareFn = (item1, item2) => {
+            return item1 && item2
+                ? item1[this.bindValue] === item2[this.bindValue]
+                : item1 === item2;
+        };
     }
-    toggleExpand(key) {
-        const currentState = this.isExpanded(key);
-        this.expandedMap.set(key, !currentState);
+    ngOnInit() {
+        this.filteredItems = this.searchTerms.pipe(debounceTime(700), // Reduz chamadas repetitivas
+        distinctUntilChanged(), // Ignora termos repetidos consecutivos
+        switchMap((term) => {
+            // Sempre busca no back-end
+            return this.search(term).pipe(tap((fetchedItems) => {
+                this.updateData(fetchedItems);
+            }), map((fetchedItems) => this.filterOutSelected(fetchedItems)));
+        }));
+        this.filteredItems.subscribe({
+            next: (items) => { },
+            error: (err) => console.error("Erro ao buscar no back-end:", err),
+        });
+        this.fetchInitialData().subscribe((data) => {
+            this.updateData(data);
+        });
     }
-    isObject(val) {
-        return val !== null && typeof val === 'object';
+    onInputChange(event) {
+        const input = event.target.value.trim();
+        this.searchTerms.next(input);
+        if (input === "") {
+            this.fetchInitialData().subscribe((data) => {
+                this.allItems = data;
+                this.filteredItems = of(this.filterOutSelected(this.allItems));
+            });
+        }
     }
-    objectKeys(obj) {
-        return Object.keys(obj);
+    search(term) {
+        return this.http.get(`${this.searchUrl}`, { params: { term } }).pipe(map((response) => {
+            const transformedItems = response.map((item) => ({
+                [this.bindValue]: item[this.bindValue],
+                [this.bindLabel]: item[this.bindLabel],
+            }));
+            this.allItems = transformedItems;
+            this.filteredItems = of(this.filterOutSelected(this.allItems));
+            this.cdr.markForCheck(); // Notifica o Angular sobre a alteração
+            return transformedItems;
+        }), catchError((error) => {
+            console.error("Erro ao buscar no back-end:", error);
+            this.filteredItems = of([]);
+            return of([]);
+        }));
     }
-    isExpanded(key) {
-        return this.expandedMap.has(key) ? this.expandedMap.get(key) : this.allExpanded;
+    fetchInitialData() {
+        return this.http.get(this.searchUrl).pipe(map((response) => {
+            const transformedItems = response.map((item) => ({
+                [this.bindValue]: item[this.bindValue],
+                [this.bindLabel]: item[this.bindLabel],
+            }));
+            this.allItems = transformedItems;
+            return this.allItems;
+        }), catchError((error) => {
+            console.error("Erro ao carregar dados iniciais:", error);
+            return of([]);
+        }));
     }
-    copyJson() {
-        const jsonString = JSON.stringify(this.jsonData, null, 2);
-        navigator.clipboard.writeText(jsonString).then(() => {
-            alert('JSON copiado com sucesso!');
-        }).catch(err => {
-            console.error('Error copying JSON to clipboard:', err);
+    ngOnChanges(changes) {
+        if (changes["selected"] && !changes["selected"].isFirstChange()) {
+            this.addSelectedItemsToData();
+        }
+    }
+    updateData(newData) {
+        newData.forEach((item) => {
+            const existsInList = this.allItems.some((listItem) => this.compareFn(listItem, item));
+            if (!existsInList) {
+                this.allItems.push(item);
+            }
         });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewerComponent, selector: "argenta-json-viewer", inputs: { jsonData: "jsonData", isRoot: "isRoot", copyLabel: "copyLabel", showLabel: "showLabel", hideLabel: "hideLabel" }, ngImport: i0, template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"], dependencies: [{ 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: JsonViewerComponent, selector: "argenta-json-viewer", inputs: ["jsonData", "isRoot", "copyLabel", "showLabel", "hideLabel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'argenta-json-viewer', template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"] }]
-        }], propDecorators: { jsonData: [{
-                type: Input
-            }], isRoot: [{
-                type: Input
-            }], copyLabel: [{
-                type: Input
-            }], showLabel: [{
-                type: Input
-            }], hideLabel: [{
-                type: Input
-            }] } });
-
-class ModalComponent {
-    constructor(activeModal) {
-        this.activeModal = activeModal;
-        this.onButtonClick = new EventEmitter(); // Novo evento
-    }
-    ngOnInit() {
-        const componentRef = this.dynamicComponent.createComponent(this.component);
-        const instance = componentRef.instance;
-        if (this.componentInputs) {
-            Object.keys(this.componentInputs).forEach(inputName => {
-                instance[inputName] = this.componentInputs[inputName];
-            });
-        }
-    }
-    closeModal() {
-        this.activeModal.close();
-    }
-    buttonClicked() {
-        this.onButtonClick.emit(); // Emitindo o evento
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", componentInputs: "componentInputs", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'argenta-modal', template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { title: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }], componentInputs: [{
-                type: Input
-            }], closeButtonLabel: [{
-                type: Input
-            }], buttonLabel: [{
-                type: Input
-            }], onButtonClick: [{
-                type: Output
-            }], dynamicComponent: [{
-                type: ViewChild,
-                args: ['dynamicComponent', { read: ViewContainerRef, static: true }]
-            }] } });
-
-class MultiSelectComponent {
-    constructor(authService, http) {
-        this.authService = authService;
-        this.http = http;
-        this.label = 'Multi Select';
-        this.data = []; // Accepts an array of generic objects
-        this.placeholder = 'Select items';
-        this.id = 'multiSelectId';
-        this.bindLabel = ''; // Generic dynamic label
-        this.bindValue = ''; // Generic dynamic value
-        this.closeOnSelect = false; // New property to control dropdown close behavior
-        this.searchUrl = ''; // URL for backend search
-        this.multiple = true; // New property to control single or multiple selection
-        this.searchParams = {}; // Parâmetros de busca dinâmicos
-        this.keyupEvent = new EventEmitter();
-        this.backupData = []; // Backup of the initial data
-        this.allItems = []; // Store the combined list
-        this.items = of([]); // Initialization of the property
-        this.filteredItems = of([]); // Filtered items
-        this.searchTerms = new Subject(); // For search debounce
-        this.onChangeCallback = () => { };
-        this.onTouchedCallback = () => { };
-        this.isCourseEntered = false;
-        this.compareFn = (item1, item2) => {
-            return item1 && item2 ? item1[this.bindValue] === item2[this.bindValue] : item1 === item2;
-        };
-    }
-    ngOnInit() {
-        this.backupData = [...this.data]; // Backup initial data
-        this.allItems = [...this.data]; // Initialize allItems with the initial data
-        this.items = of(this.allItems);
-        this.fetchInitialData().subscribe(data => {
-            this.updateData(data);
-            this.filteredItems = this.searchTerms.pipe(debounceTime(700), startWith(''), // Start with an empty search to load the original list
-            switchMap(term => this.search(term)));
-            // Adicionar itens selecionados à lista após buscar dados iniciais
-            this.addSelectedItemsToData();
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes['selected'] && !changes['selected'].isFirstChange()) {
-            this.addSelectedItemsToData();
-        }
-    }
-    fetchInitialData() {
-        return this.http.get(this.searchUrl).pipe(map((response) => {
-            if (response && response.length > 0) {
-                return response.map((item) => ({
-                    [this.bindValue]: item[this.bindValue],
-                    [this.bindLabel]: item[this.bindLabel]
-                }));
-            }
-            return [];
-        }), catchError((error) => {
-            console.error('Error fetching initial data from backend:', error);
-            return of([]);
-        }));
-    }
-    updateData(newData) {
-        newData.forEach((item) => {
-            const existsInList = this.allItems.some(listItem => this.compareFn(listItem, item));
-            if (!existsInList) {
-                this.allItems.push(item);
-            }
-        });
-        this.items = of(this.allItems);
+        this.filteredItems = of(this.allItems);
     }
     addSelectedItemsToData() {
         if (this.selected) {
             const selectedItems = this.multiple ? this.selected : [this.selected];
             selectedItems.forEach((item) => {
-                const existsInList = this.allItems.some(listItem => this.compareFn(listItem, item));
+                const existsInList = this.allItems.some((listItem) => this.compareFn(listItem, item));
                 if (!existsInList) {
                     const newItem = {
                         [this.bindValue]: item[this.bindValue] || item,
-                        [this.bindLabel]: item[this.bindLabel] || item
+                        [this.bindLabel]: item[this.bindLabel] || item,
                     };
                     this.data.push(newItem);
                     this.allItems.push(newItem);
@@ -2436,60 +2201,15 @@ class MultiSelectComponent {
             this.selected = event ? event : null;
         }
         this.onChangeCallback(this.selected);
-        // Verificar se um item foi removido
-        if (previousSelected && Array.isArray(previousSelected) && previousSelected.length > event.length) {
-            const removedItems = previousSelected.filter(item => !event.includes(item));
-            removedItems.forEach(item => {
-                const existsInData = this.data.some(dataItem => this.compareFn(dataItem, item));
-                if (!existsInData) {
-                    this.data.push(item);
-                    this.allItems.push(item); // Adicionar de volta aos itens disponíveis
+        if (previousSelected && Array.isArray(previousSelected)) {
+            const removedItems = previousSelected.filter((item) => !event.includes(item));
+            removedItems.forEach((item) => {
+                const existsInAllItems = this.allItems.some((listItem) => this.compareFn(listItem, item));
+                if (!existsInAllItems) {
+                    this.allItems.push(item);
                 }
             });
-        }
-    }
-    onInputChange(event) {
-        const input = event.target.value;
-        this.searchTerms.next(input);
-    }
-    search(term) {
-        if (!term.trim()) {
-            // Se o termo de busca estiver vazio, retorna a lista completa
-            return of(this.allItems);
-        }
-        // Filtra os itens localmente
-        const filtered = this.allItems.filter((item) => item[this.bindLabel].toLowerCase().includes(term.toLowerCase()));
-        if (filtered.length > 0) {
-            console.log('Items filtered locally.');
-            return of(filtered);
-        }
-        else if (this.searchUrl) {
-            // Construir os parâmetros de busca dinamicamente
-            const params = new URLSearchParams(this.searchParams);
-            params.append('term', term);
-            return this.http.get(`${this.searchUrl}?${params.toString()}`).pipe(map((response) => {
-                if (response && response.length > 0) {
-                    // Transforma os itens do backend para o formato esperado pelo componente
-                    const transformedItems = response.map((item) => ({
-                        [this.bindValue]: item[this.bindValue],
-                        [this.bindLabel]: item[this.bindLabel]
-                    }));
-                    // Atualiza os dados com os novos itens buscados
-                    this.updateData(transformedItems);
-                    return this.allItems;
-                }
-                else {
-                    console.log('No items found in the backend search.');
-                    return this.allItems;
-                }
-            }), catchError((error) => {
-                console.error('Error fetching from backend:', error);
-                return of(this.allItems);
-            }));
-        }
-        else {
-            console.log('No search URL provided and no items found locally.');
-            return of(this.allItems);
+            this.items = of(this.allItems);
         }
     }
     writeValue(value) {
@@ -2507,9 +2227,7 @@ class MultiSelectComponent {
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
     }
-    setDisabledState(isDisabled) {
-        // No implementation needed for this example
-    }
+    setDisabledState(isDisabled) { }
     hasPermission() {
         if (!this.permissions || this.permissions.length === 0) {
             return true;
@@ -2519,33 +2237,88 @@ class MultiSelectComponent {
         }
         catch (error) {
             if (error instanceof Error) {
-                console.error('Permission error:', error.message);
+                console.error("Permission error:", error.message);
             }
             else {
-                console.error('Unknown error occurred during permission check');
+                console.error("Unknown error occurred during permission check");
             }
             return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", bindValue: "bindValue", permissions: "permissions", closeOnSelect: "closeOnSelect", searchUrl: "searchUrl", multiple: "multiple", searchParams: "searchParams" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    isSelected(item) {
+        if (this.multiple) {
+            return this.selected?.some((selectedItem) => this.compareFn(selectedItem, item));
+        }
+        else {
+            return this.compareFn(this.selected, item);
+        }
+    }
+    selectItem(item, event) {
+        event.stopPropagation();
+        if (!this.isSelected(item)) {
+            if (this.multiple) {
+                this.selected.push(item);
+            }
+            else {
+                this.selected = [item];
+            }
+        }
+        if (this.multiple) {
+            this.allItems = this.allItems.filter((listItem) => !this.compareFn(listItem, item));
+        }
+        this.filteredItems = of(this.filterOutSelected(this.allItems));
+        this.onSelectedChange(this.selected);
+        if (this.closeOnSelect) {
+            this.closeDropdown();
+        }
+    }
+    filterByTerm(term) {
+        return this.allItems.filter((item) => item[this.bindLabel]?.toLowerCase().includes(term.toLowerCase()));
+    }
+    filterOutSelected(items) {
+        if (!this.multiple) {
+            return items;
+        }
+        return items.filter((item) => !this.selected.some((selectedItem) => this.compareFn(selectedItem, item)));
+    }
+    removeSelectedItem(item, event) {
+        event.stopPropagation();
+        this.selected = this.selected.filter((selectedItem) => !this.compareFn(selectedItem, item));
+        const existsInAllItems = this.allItems.some((listItem) => this.compareFn(listItem, item));
+        if (!existsInAllItems) {
+            this.allItems.push(item);
+        }
+        this.filteredItems = of(this.filterByTerm(this.lastSearchTerm || ""));
+        this.onSelectedChange(this.selected);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i1$2.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", bindValue: "bindValue", permissions: "permissions", closeOnSelect: "closeOnSelect", searchUrl: "searchUrl", multiple: "multiple", searchParams: "searchParams" }, outputs: { keyupEvent: "keyupEvent" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
-                multi: true
-            }
-        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";.form-group{font-family:var(--font-family);font-size:1rem}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:.9rem;font-weight:400;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2rem;background-image:none;background-repeat:no-repeat;background-position:right .5rem center;height:46px}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:var(--font-family);color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:var(--font-family);color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem\">\n    {{ label }}\n  </label>\n  <div class=\"custom-select-container\" tabindex=\"0\">\n    <!-- Input com itens selecionados -->\n    <div class=\"custom-input\">\n      <span class=\"selected-item\" *ngFor=\"let item of selected\">\n        {{ item[bindLabel] }}\n        <button\n          class=\"remove-item-btn\"\n          (click)=\"removeSelectedItem(item, $event)\"\n        >\n          \u00D7\n        </button>\n      </span>\n      <input\n        type=\"text\"\n        class=\"input-field\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder\"\n        (focus)=\"toggleDropdown()\"\n        (keyup)=\"onKeyUp($event)\"\n        (input)=\"onInputChange($event)\"\n      />\n      <!-- \u00CDcone flutuante -->\n      <lucide-icon\n        [name]=\"isOpen ? 'align-justify' : 'chevron-down'\"\n        class=\"dropdown-icon\"\n      ></lucide-icon>\n    </div>\n\n    <!-- Dropdown suspenso -->\n    <div *ngIf=\"isOpen\" class=\"dropdown\">\n      <div\n        *ngFor=\"let item of filteredItems | async\"\n        class=\"dropdown-item\"\n        [class.selected]=\"isSelected(item)\"\n        (click)=\"selectItem(item, $event)\"\n      >\n        {{ item[bindLabel] }}\n      </div>\n      <div *ngIf=\"(filteredItems | async)?.length === 0\" class=\"empty-dropdown\">\n        Nenhum item dispon\u00EDvel\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.custom-select-container{position:relative;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333;font-family:var(--font-family)}.custom-select-container .custom-input{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;width:100%;min-height:20px;cursor:text;background:none;border:none;outline:none;position:relative}.custom-select-container .custom-input .selected-item{display:flex;align-items:center;background-color:#f8f8f8;color:#333;border:1px solid #e0e0e0;border-radius:4px;padding:.15rem .4rem;font-size:.85rem}.custom-select-container .custom-input .selected-item .remove-item-btn{display:flex;align-items:center;justify-content:center;background-color:#c7c7c7;border:none;color:#4b4b4b;font-weight:700;cursor:pointer;font-size:.6rem;line-height:1;border-radius:50%;width:14px;height:14px;margin-left:.3rem;padding:0;position:relative}.custom-select-container .custom-input .selected-item .remove-item-btn span{transition:transform .2s ease,color .2s ease}.custom-select-container .custom-input .selected-item .remove-item-btn:hover{background-color:#8f8a8b;color:#fff}.custom-select-container .custom-input .selected-item .remove-item-btn:hover span{transform:scale(1.2);color:#fff}.custom-select-container .custom-input .selected-item .remove-item-btn:active{background-color:#767072}.custom-select-container .custom-input .input-field{flex:1;border:none;outline:none;font-size:.85rem;padding:.1rem 3rem .1rem .2rem;background:transparent;min-width:80px}.custom-select-container .custom-input .dropdown-icon{position:absolute;right:.1rem;top:50%;transform:translateY(-50%);font-size:1.2rem;color:#888;pointer-events:none}.dropdown{position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background-color:#fff;border:1px solid #ccc;border-radius:4px;z-index:1000}.dropdown::-webkit-scrollbar{width:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:4px}.dropdown::-webkit-scrollbar-thumb:hover{background-color:#aaa}.dropdown::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:4px}.dropdown .dropdown-item{padding:.5rem;cursor:pointer}.dropdown .dropdown-item:hover{background-color:#f1f1f1}.dropdown .dropdown-item.selected{font-weight:700;background-color:#e9e9e9}.empty-dropdown{padding:1rem;text-align:center;color:#999;font-size:.9rem}@media (max-width: 768px){.custom-input .input-field{padding-right:4rem}.custom-input .dropdown-icon{right:.75rem}}\n"], dependencies: [{ 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: i4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-custom-multi-select', providers: [
+            args: [{ selector: "argenta-custom-multi-select", encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MultiSelectComponent),
-                            multi: true
-                        }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";.form-group{font-family:var(--font-family);font-size:1rem}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:.9rem;font-weight:400;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2rem;background-image:none;background-repeat:no-repeat;background-position:right .5rem center;height:46px}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:var(--font-family);color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:var(--font-family);color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"] }]
-        }], ctorParameters: function () { return [{ type: AuthService }, { type: i2$1.HttpClient }]; }, propDecorators: { label: [{
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem\">\n    {{ label }}\n  </label>\n  <div class=\"custom-select-container\" tabindex=\"0\">\n    <!-- Input com itens selecionados -->\n    <div class=\"custom-input\">\n      <span class=\"selected-item\" *ngFor=\"let item of selected\">\n        {{ item[bindLabel] }}\n        <button\n          class=\"remove-item-btn\"\n          (click)=\"removeSelectedItem(item, $event)\"\n        >\n          \u00D7\n        </button>\n      </span>\n      <input\n        type=\"text\"\n        class=\"input-field\"\n        [id]=\"id\"\n        [placeholder]=\"placeholder\"\n        (focus)=\"toggleDropdown()\"\n        (keyup)=\"onKeyUp($event)\"\n        (input)=\"onInputChange($event)\"\n      />\n      <!-- \u00CDcone flutuante -->\n      <lucide-icon\n        [name]=\"isOpen ? 'align-justify' : 'chevron-down'\"\n        class=\"dropdown-icon\"\n      ></lucide-icon>\n    </div>\n\n    <!-- Dropdown suspenso -->\n    <div *ngIf=\"isOpen\" class=\"dropdown\">\n      <div\n        *ngFor=\"let item of filteredItems | async\"\n        class=\"dropdown-item\"\n        [class.selected]=\"isSelected(item)\"\n        (click)=\"selectItem(item, $event)\"\n      >\n        {{ item[bindLabel] }}\n      </div>\n      <div *ngIf=\"(filteredItems | async)?.length === 0\" class=\"empty-dropdown\">\n        Nenhum item dispon\u00EDvel\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.custom-select-container{position:relative;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333;font-family:var(--font-family)}.custom-select-container .custom-input{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;width:100%;min-height:20px;cursor:text;background:none;border:none;outline:none;position:relative}.custom-select-container .custom-input .selected-item{display:flex;align-items:center;background-color:#f8f8f8;color:#333;border:1px solid #e0e0e0;border-radius:4px;padding:.15rem .4rem;font-size:.85rem}.custom-select-container .custom-input .selected-item .remove-item-btn{display:flex;align-items:center;justify-content:center;background-color:#c7c7c7;border:none;color:#4b4b4b;font-weight:700;cursor:pointer;font-size:.6rem;line-height:1;border-radius:50%;width:14px;height:14px;margin-left:.3rem;padding:0;position:relative}.custom-select-container .custom-input .selected-item .remove-item-btn span{transition:transform .2s ease,color .2s ease}.custom-select-container .custom-input .selected-item .remove-item-btn:hover{background-color:#8f8a8b;color:#fff}.custom-select-container .custom-input .selected-item .remove-item-btn:hover span{transform:scale(1.2);color:#fff}.custom-select-container .custom-input .selected-item .remove-item-btn:active{background-color:#767072}.custom-select-container .custom-input .input-field{flex:1;border:none;outline:none;font-size:.85rem;padding:.1rem 3rem .1rem .2rem;background:transparent;min-width:80px}.custom-select-container .custom-input .dropdown-icon{position:absolute;right:.1rem;top:50%;transform:translateY(-50%);font-size:1.2rem;color:#888;pointer-events:none}.dropdown{position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background-color:#fff;border:1px solid #ccc;border-radius:4px;z-index:1000}.dropdown::-webkit-scrollbar{width:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:4px}.dropdown::-webkit-scrollbar-thumb:hover{background-color:#aaa}.dropdown::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:4px}.dropdown .dropdown-item{padding:.5rem;cursor:pointer}.dropdown .dropdown-item:hover{background-color:#f1f1f1}.dropdown .dropdown-item.selected{font-weight:700;background-color:#e9e9e9}.empty-dropdown{padding:1rem;text-align:center;color:#999;font-size:.9rem}@media (max-width: 768px){.custom-input .input-field{padding-right:4rem}.custom-input .dropdown-icon{right:.75rem}}\n"] }]
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: i1$2.HttpClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onClickOutside: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }], label: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -2703,7 +2476,7 @@ class SearchCustomerComponent {
         this.searchTerm.emit(inputElement.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchCustomerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchCustomerComponent, selector: "argenta-search-customer", inputs: { placeholder: "placeholder", id: "id", disabled: "disabled", readonly: "readonly", autofocus: "autofocus" }, outputs: { searchTerm: "searchTerm" }, ngImport: i0, template: "<div class=\"search-container\">\n  <span class=\"search-icon\" [ngClass]=\"'search-icon-green'\">\n    <lucide-icon name=\"search\" [size]=\"16\"></lucide-icon>\n  </span>\n  <input\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [autofocus]=\"autofocus\"\n    (input)=\"onSearch($event)\"\n    class=\"search-input custom-input\"\n  />\n</div>\n", styles: [".search-container{display:flex;align-items:center;border:1px solid var(--primary-color);border-radius:8px;padding:5px;background-color:#f7f9fc}.search-icon{padding:0 10px;color:#b0b0b0}.search-input{border:none;outline:none;padding:8px;flex:1;background-color:transparent;font-family:var(--font-family);color:#333;font-size:.9rem;height:35px}.search-input::placeholder{color:#b0b0b0}.search-icon-green{color:var(--primary-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchCustomerComponent, selector: "argenta-search-customer", inputs: { placeholder: "placeholder", id: "id", disabled: "disabled", readonly: "readonly", autofocus: "autofocus" }, outputs: { searchTerm: "searchTerm" }, ngImport: i0, template: "<div class=\"search-container\">\n  <span class=\"search-icon\" [ngClass]=\"'search-icon-green'\">\n    <lucide-icon name=\"search\" [size]=\"16\"></lucide-icon>\n  </span>\n  <input\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [autofocus]=\"autofocus\"\n    (input)=\"onSearch($event)\"\n    class=\"search-input custom-input\"\n  />\n</div>\n", styles: [".search-container{display:flex;align-items:center;border:1px solid var(--primary-color);border-radius:8px;padding:5px;background-color:#f7f9fc}.search-icon{padding:0 10px;color:#b0b0b0}.search-input{border:none;outline:none;padding:8px;flex:1;background-color:transparent;font-family:var(--font-family);color:#333;font-size:.9rem;height:35px}.search-input::placeholder{color:#b0b0b0}.search-icon-green{color:var(--primary-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchCustomerComponent, decorators: [{
             type: Component,
@@ -2947,7 +2720,7 @@ class SelectComponent {
         <lucide-icon name="chevron-down" [size]="16" color="#5E6366" [strokeWidth]="1.75"></lucide-icon>
       </div>
     </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";.form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"], dependencies: [{ 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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";.form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"], dependencies: [{ 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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -3287,7 +3060,7 @@ class DataTableComponent {
         this.onButtonClick.emit(); // Emitindo o evento
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AuthService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel", pagedData: "pagedData", initialFilterField: "initialFilterField", buttonList: "buttonList" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick", filterFieldChange: "filterFieldChange" }, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n  <div class=\"left-section\">\n    <div class=\"form-group\">\n      <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n        itemsPerPageLabel\n      }}</label>\n      <select\n        id=\"itemsPerPageSelect\"\n        class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n        [(ngModel)]=\"defaultItemsPerPage\"\n        (ngModelChange)=\"onItemsPerPageChange()\"\n      >\n        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n          {{ option }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div class=\"right-section\">\n    <div *ngIf=\"buttonList && buttonList.length > 0\" class=\"ng-button-row\">\n      <ng-container *ngFor=\"let buttonTemplate of buttonList\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonTemplate\"\n          class=\"ng-button\"\n        ></ng-container>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"buttonLabel && buttonLabel.length > 0\"\n      class=\"custom-button\"\n      (click)=\"onNewButtonClick()\"\n    >\n      <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n      {{ buttonLabel }}\n    </button>\n  </div>\n</div>\n\n<div class=\"search-input-container\">\n  <argenta-search-input\n    id=\"search\"\n    label=\"\"\n    placeholder=\"Buscar\"\n    [(ngModel)]=\"filterDescription\"\n    (search)=\"onSearch($event)\"\n  ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <ng-container *ngFor=\"let column of columns\">\n          <th\n            *ngIf=\"!isColumnHidden(column.prop)\"\n            (click)=\"onSelectSearchField(column.prop)\"\n          >\n            {{ column.label }}\n            <span>\n              <i-lucide\n                name=\"arrow-up\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'asc'\n                \"\n              ></i-lucide>\n              <i-lucide\n                name=\"arrow-down\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'desc'\n                \"\n              ></i-lucide>\n            </span>\n          </th>\n        </ng-container>\n        <th\n          *ngIf=\"showActionColumn\"\n          class=\"text-end\"\n          style=\"padding-right: 6.3rem\"\n        >\n          {{ actionColumnLabel }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of pagedData; let i = index\">\n        <ng-container *ngFor=\"let column of columns\">\n          <td *ngIf=\"!isColumnHidden(column.prop)\">\n            {{ getNestedProperty(item, column.prop) }}\n          </td>\n        </ng-container>\n        <td *ngIf=\"showActionColumn\" class=\"text-end\">\n          <div class=\"d-flex justify-content-end\">\n            <div\n              *ngIf=\"\n                hasPermission(editPermissions) &&\n                onEditTable.observers.length > 0\n              \"\n              (click)=\"handleAction('edit', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"square-pen\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(viewPermissions) &&\n                onViewTable.observers.length > 0\n              \"\n              (click)=\"handleAction('view', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"user-round\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(deletePermissions) &&\n                onDeleteTable.observers.length > 0\n              \"\n              (click)=\"handleAction('delete', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <i-lucide\n                name=\"trash-2\"\n                [size]=\"20\"\n                color=\"#F26E6E\"\n                [strokeWidth]=\"1.75\"\n              ></i-lucide>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n  <custom-pagination\n    [totalItems]=\"totalItems\"\n    [itemsPerPage]=\"defaultItemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}.ng-button-row{display:flex;gap:10px;margin-right:10px;margin-left:10px}\n"], dependencies: [{ 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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel", pagedData: "pagedData", initialFilterField: "initialFilterField", buttonList: "buttonList" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick", filterFieldChange: "filterFieldChange" }, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n  <div class=\"left-section\">\n    <div class=\"form-group\">\n      <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n        itemsPerPageLabel\n      }}</label>\n      <select\n        id=\"itemsPerPageSelect\"\n        class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n        [(ngModel)]=\"defaultItemsPerPage\"\n        (ngModelChange)=\"onItemsPerPageChange()\"\n      >\n        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n          {{ option }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div class=\"right-section\">\n    <div *ngIf=\"buttonList && buttonList.length > 0\" class=\"ng-button-row\">\n      <ng-container *ngFor=\"let buttonTemplate of buttonList\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonTemplate\"\n          class=\"ng-button\"\n        ></ng-container>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"buttonLabel && buttonLabel.length > 0\"\n      class=\"custom-button\"\n      (click)=\"onNewButtonClick()\"\n    >\n      <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n      {{ buttonLabel }}\n    </button>\n  </div>\n</div>\n\n<div class=\"search-input-container\">\n  <argenta-search-input\n    id=\"search\"\n    label=\"\"\n    placeholder=\"Buscar\"\n    [(ngModel)]=\"filterDescription\"\n    (search)=\"onSearch($event)\"\n  ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <ng-container *ngFor=\"let column of columns\">\n          <th\n            *ngIf=\"!isColumnHidden(column.prop)\"\n            (click)=\"onSelectSearchField(column.prop)\"\n          >\n            {{ column.label }}\n            <span>\n              <i-lucide\n                name=\"arrow-up\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'asc'\n                \"\n              ></i-lucide>\n              <i-lucide\n                name=\"arrow-down\"\n                [size]=\"14\"\n                [class.selected]=\"\n                  column.isSearchSelected && sortDirection === 'desc'\n                \"\n              ></i-lucide>\n            </span>\n          </th>\n        </ng-container>\n        <th\n          *ngIf=\"showActionColumn\"\n          class=\"text-end\"\n          style=\"padding-right: 6.3rem\"\n        >\n          {{ actionColumnLabel }}\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of pagedData; let i = index\">\n        <ng-container *ngFor=\"let column of columns\">\n          <td *ngIf=\"!isColumnHidden(column.prop)\">\n            {{ getNestedProperty(item, column.prop) }}\n          </td>\n        </ng-container>\n        <td *ngIf=\"showActionColumn\" class=\"text-end\">\n          <div class=\"d-flex justify-content-end\">\n            <div\n              *ngIf=\"\n                hasPermission(editPermissions) &&\n                onEditTable.observers.length > 0\n              \"\n              (click)=\"handleAction('edit', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"square-pen\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(viewPermissions) &&\n                onViewTable.observers.length > 0\n              \"\n              (click)=\"handleAction('view', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <lucide-icon\n                name=\"user-round\"\n                [size]=\"20\"\n                color=\"#2CA58D\"\n                [strokeWidth]=\"1.75\"\n              ></lucide-icon>\n            </div>\n            <div\n              *ngIf=\"\n                hasPermission(deletePermissions) &&\n                onDeleteTable.observers.length > 0\n              \"\n              (click)=\"handleAction('delete', item, i)\"\n              class=\"clickable-icon\"\n              style=\"margin-right: 1.5rem\"\n            >\n              <i-lucide\n                name=\"trash-2\"\n                [size]=\"20\"\n                color=\"#F26E6E\"\n                [strokeWidth]=\"1.75\"\n              ></i-lucide>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n  <custom-pagination\n    [totalItems]=\"totalItems\"\n    [itemsPerPage]=\"defaultItemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}.ng-button-row{display:flex;gap:10px;margin-right:10px;margin-left:10px}\n"], dependencies: [{ 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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: i4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -3591,10 +3364,888 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class JsonViewerComponent {
+    constructor() {
+        this.isRoot = true;
+        this.allExpanded = true;
+        this.expandedMap = new Map();
+    }
+    toggleAll() {
+        this.allExpanded = !this.allExpanded;
+        this.expandedMap.clear();
+    }
+    toggleExpand(key) {
+        const currentState = this.isExpanded(key);
+        this.expandedMap.set(key, !currentState);
+    }
+    isObject(val) {
+        return val !== null && typeof val === 'object';
+    }
+    objectKeys(obj) {
+        return Object.keys(obj);
+    }
+    isExpanded(key) {
+        return this.expandedMap.has(key) ? this.expandedMap.get(key) : this.allExpanded;
+    }
+    copyJson() {
+        const jsonString = JSON.stringify(this.jsonData, null, 2);
+        navigator.clipboard.writeText(jsonString).then(() => {
+            alert('JSON copiado com sucesso!');
+        }).catch(err => {
+            console.error('Error copying JSON to clipboard:', err);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JsonViewerComponent, selector: "argenta-json-viewer", inputs: { jsonData: "jsonData", isRoot: "isRoot", copyLabel: "copyLabel", showLabel: "showLabel", hideLabel: "hideLabel" }, ngImport: i0, template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"], dependencies: [{ 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: JsonViewerComponent, selector: "argenta-json-viewer", inputs: ["jsonData", "isRoot", "copyLabel", "showLabel", "hideLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JsonViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'argenta-json-viewer', template: "<div class=\"json-viewer-box\">\n  <div class=\"toolbar\">\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button copy-button\"\n      (click)=\"copyJson()\"\n    >\n      {{ copyLabel }}\n    </button>\n    <button\n      *ngIf=\"isRoot\"\n      class=\"action-button toggle-button\"\n      (click)=\"toggleAll()\"\n    >\n      {{ allExpanded ? \"\u25BC \" + hideLabel : \"\u25BA \" + showLabel }}\n    </button>\n  </div>\n\n  <div class=\"json-content\">\n    <div *ngIf=\"isObject(jsonData)\">\n      <div class=\"json-pair\" *ngFor=\"let key of objectKeys(jsonData)\">\n        <span class=\"key\">\n          {{ key }}:\n          <button class=\"minimal-toggle-button\" (click)=\"toggleExpand(key)\">\n            {{ isExpanded(key) ? \"\u25BC\" : \"\u25BA\" }}\n          </button>\n        </span>\n\n        <div class=\"nested-json\" *ngIf=\"isExpanded(key)\">\n          <argenta-json-viewer\n            [jsonData]=\"jsonData[key]\"\n            [isRoot]=\"false\"\n          ></argenta-json-viewer>\n        </div>\n        <span *ngIf=\"!isExpanded(key) && isObject(jsonData[key])\">[...]</span>\n      </div>\n    </div>\n    <span *ngIf=\"!isObject(jsonData)\">\n      {{ jsonData }}\n    </span>\n  </div>\n</div>\n", styles: [".json-viewer-box{border:1px solid #ccc;padding:10px;border-radius:8px;font-family:Arial,sans-serif;background-color:#f9f9f9}.json-viewer-box .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #ddd}.json-viewer-box .action-button{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.json-viewer-box .action-button:hover{background-color:#45a049}.json-viewer-box .minimal-toggle-button{background:none;border:none;color:#007bff;cursor:pointer;font-size:12px;margin-left:5px;padding:0;line-height:1}.json-viewer-box .minimal-toggle-button:hover{color:#0056b3}.json-viewer-box .json-content{margin-top:10px}.json-viewer-box .json-content .json-pair{margin-bottom:5px}.json-viewer-box .json-content .json-pair .key{font-weight:700;margin-right:5px;display:flex;align-items:center}\n"] }]
+        }], propDecorators: { jsonData: [{
+                type: Input
+            }], isRoot: [{
+                type: Input
+            }], copyLabel: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
+            }] } });
+
+class ModalComponent {
+    constructor(activeModal) {
+        this.activeModal = activeModal;
+        this.onButtonClick = new EventEmitter(); // Novo evento
+    }
+    ngOnInit() {
+        const componentRef = this.dynamicComponent.createComponent(this.component);
+        const instance = componentRef.instance;
+        if (this.componentInputs) {
+            Object.keys(this.componentInputs).forEach(inputName => {
+                instance[inputName] = this.componentInputs[inputName];
+            });
+        }
+    }
+    closeModal() {
+        this.activeModal.close();
+    }
+    buttonClicked() {
+        this.onButtonClick.emit(); // Emitindo o evento
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", componentInputs: "componentInputs", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'argenta-modal', template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { title: [{
+                type: Input
+            }], component: [{
+                type: Input
+            }], componentInputs: [{
+                type: Input
+            }], closeButtonLabel: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
+            }], onButtonClick: [{
+                type: Output
+            }], dynamicComponent: [{
+                type: ViewChild,
+                args: ['dynamicComponent', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class DynamicModalComponent {
+    constructor() {
+        this.modalTitle = "Modal Title";
+        this.modalSizeClass = "";
+        this.modalId = "dynamicModal"; // ID único para cada modal
+    }
+    openModal() {
+        const modalElement = document.getElementById(this.modalId);
+        if (modalElement) {
+            modalElement.classList.add("show");
+            modalElement.setAttribute("aria-hidden", "false");
+            modalElement.style.display = "block";
+            document.body.classList.add("modal-open");
+            // Adiciona o backdrop manualmente se não existir
+            if (!document.querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)) {
+                const backdrop = document.createElement("div");
+                backdrop.className = "modal-backdrop fade show";
+                backdrop.setAttribute("data-modal-id", this.modalId);
+                document.body.appendChild(backdrop);
+            }
+        }
+    }
+    closeModal() {
+        const modalElement = document.getElementById(this.modalId);
+        if (modalElement) {
+            modalElement.classList.remove("show");
+            modalElement.setAttribute("aria-hidden", "true");
+            modalElement.style.display = "none";
+            document.body.classList.remove("modal-open");
+            document
+                .querySelector(`.modal-backdrop[data-modal-id="${this.modalId}"]`)
+                ?.remove();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicModalComponent, selector: "argenta-dynamic-modal", inputs: { modalTitle: "modalTitle", modalSizeClass: "modalSizeClass", modalId: "modalId" }, ngImport: i0, template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-dynamic-modal", template: "<div\n  class=\"modal fade\"\n  [id]=\"modalId\"\n  tabindex=\"-1\"\n  [attr.aria-labelledby]=\"modalId + 'Label'\"\n  aria-hidden=\"true\"\n>\n  <div class=\"modal-dialog\" [ngClass]=\"modalSizeClass\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header custom-header\">\n        <h5 class=\"modal-title custom-modal-title\" [id]=\"modalId + 'Label'\">\n          {{ modalTitle }}\n        </h5>\n        <button\n          type=\"button\"\n          class=\"custom-close-button\"\n          (click)=\"closeModal()\"\n          aria-label=\"Close\"\n        >\n          &times;\n        </button>\n      </div>\n      <div class=\"modal-body custom-body\">\n        <ng-content select=\"[modal-body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer custom-footer\">\n        <ng-content select=\"[modal-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".custom-header{background-color:var(--primary-color)!important;color:var(--text-color)!important;font-size:1.25rem!important;font-family:var(--font-family)!important;padding:1rem;position:relative}.custom-header .custom-close-button{position:absolute;right:1rem;background:none;border:none;font-size:2.5rem;color:var(--text-color);cursor:pointer}.custom-header .custom-close-button:hover{color:var(--danger-color)}.custom-modal-title{color:var(--text-color)!important;font-size:1.8rem!important;font-family:var(--font-family)!important}.custom-body{background-color:#fff;padding:1rem}.custom-footer{background-color:#fff;padding:.75rem;display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
+        }], propDecorators: { modalTitle: [{
+                type: Input
+            }], modalSizeClass: [{
+                type: Input
+            }], modalId: [{
+                type: Input
+            }] } });
+
+class DynamicTableComponent {
+    constructor() {
+        this.itemsPerPageOptions = [10, 20, 50];
+        this.showPageInfo = true;
+        this.currentPage = 1;
+        this.itemsPerPage = 10;
+    }
+    get totalItems() {
+        return this.config.totalItems ?? this.config.data.length;
+    }
+    get paginatedData() {
+        if (!this.config.pagination) {
+            // Retorna todos os dados se a paginação estiver desativada
+            return this.config.data;
+        }
+        const itemsPerPage = this.config.itemsPerPage || this.itemsPerPage;
+        const startIndex = (this.currentPage - 1) * itemsPerPage;
+        return this.config.data.slice(startIndex, startIndex + itemsPerPage);
+    }
+    ngOnInit() {
+        if (!this.config || !this.config.columns || !this.config.data) {
+            throw new Error("DynamicTableComponent: Configuração inválida.");
+        }
+        // Define valores padrão se não especificados
+        this.config.showHeader = this.config.showHeader ?? true; // Exibe o cabeçalho por padrão
+        this.config.pagination = this.config.pagination ?? true; // Ativa paginação por padrão
+        this.itemsPerPage = this.config.itemsPerPage || 10;
+    }
+    onPageChange(newPage) {
+        this.currentPage = newPage;
+    }
+    onItemsPerPageChange(event) {
+        const target = event.target;
+        this.itemsPerPage = +target.value;
+        this.currentPage = 1; // Reinicia a paginação ao alterar os itens por página
+    }
+    // Getter para garantir que totalItems nunca seja undefined
+    get safeTotalItems() {
+        return this.totalItems || 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicTableComponent, selector: "argenta-dynamic-table", inputs: { config: "config", itemsPerPageOptions: "itemsPerPageOptions", showPageInfo: "showPageInfo" }, ngImport: i0, template: "<table class=\"table\" [ngClass]=\"{ nested: config.isNested }\">\n  <thead *ngIf=\"config.showHeader\">\n    <tr>\n      <th *ngFor=\"let column of config.columns\">{{ column.header }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of paginatedData\">\n      <td *ngFor=\"let column of config.columns\">\n        <ng-container [ngSwitch]=\"column.type\">\n          <span *ngSwitchCase=\"'text'\">{{ row[column.key] }}</span>\n          <ng-container *ngSwitchCase=\"'template'\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.template || null;\n                context: { $implicit: row }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div\n  class=\"text-center pagination-controls\"\n  [ngClass]=\"{ nested: config.isNested }\"\n  *ngIf=\"config.pagination\"\n>\n  <custom-pagination\n    [totalItems]=\"safeTotalItems\"\n    [itemsPerPage]=\"itemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.table{width:100%;border-collapse:collapse;border-spacing:0}.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{border-top-left-radius:10px}.table thead th:last-child{border-top-right-radius:10px}.table.nested thead th{font-size:.7rem;padding:7px;line-height:.8}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table.nested tbody td:first-child{padding-left:1rem}.table tbody tr:hover{background-color:#f5f5f5!important;transition:background-color .3s ease}.table.nested tbody tr:hover{background-color:#f0f0f0!important}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.pagination-controls.nested{font-size:.7rem;transform:scale(.7);margin-top:.5rem}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.left-section{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.5rem}.custom-select{font-family:var(--font-family);font-size:14px;padding:.375rem 1.75rem .375rem .75rem;border:1px solid #ccc;border-radius:.25rem;appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px}.custom-select:focus{border-color:#80bdff;outline:none;box-shadow:0 0 0 .2rem #007bff40}\n"], dependencies: [{ 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-dynamic-table", template: "<table class=\"table\" [ngClass]=\"{ nested: config.isNested }\">\n  <thead *ngIf=\"config.showHeader\">\n    <tr>\n      <th *ngFor=\"let column of config.columns\">{{ column.header }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of paginatedData\">\n      <td *ngFor=\"let column of config.columns\">\n        <ng-container [ngSwitch]=\"column.type\">\n          <span *ngSwitchCase=\"'text'\">{{ row[column.key] }}</span>\n          <ng-container *ngSwitchCase=\"'template'\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.template || null;\n                context: { $implicit: row }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<div\n  class=\"text-center pagination-controls\"\n  [ngClass]=\"{ nested: config.isNested }\"\n  *ngIf=\"config.pagination\"\n>\n  <custom-pagination\n    [totalItems]=\"safeTotalItems\"\n    [itemsPerPage]=\"itemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\"\n  >\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.table{width:100%;border-collapse:collapse;border-spacing:0}.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{border-top-left-radius:10px}.table thead th:last-child{border-top-right-radius:10px}.table.nested thead th{font-size:.7rem;padding:7px;line-height:.8}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table.nested tbody td:first-child{padding-left:1rem}.table tbody tr:hover{background-color:#f5f5f5!important;transition:background-color .3s ease}.table.nested tbody tr:hover{background-color:#f0f0f0!important}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.pagination-controls.nested{font-size:.7rem;transform:scale(.7);margin-top:.5rem}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.left-section{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.5rem}.custom-select{font-family:var(--font-family);font-size:14px;padding:.375rem 1.75rem .375rem .75rem;border:1px solid #ccc;border-radius:.25rem;appearance:none;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px}.custom-select:focus{border-color:#80bdff;outline:none;box-shadow:0 0 0 .2rem #007bff40}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], itemsPerPageOptions: [{
+                type: Input
+            }], showPageInfo: [{
+                type: Input
+            }] } });
+
+function formatToBrazilianNumber(value) {
+    return value.toLocaleString("pt-BR", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+}
+
+class ArgentaPdfDataHandlerComponent {
+    constructor() {
+        this.data = [];
+    }
+    isNumericColumn(key) {
+        // Se 'numericColumns' estiver definido no pdfConfig, use-o como referência
+        return this.config?.numericColumns?.includes(key) ?? false;
+    }
+    processData(data) {
+        if (!data || !this.config?.tableKeys?.length) {
+            console.warn("Dados ou chaves de tabela ausentes!");
+            return [];
+        }
+        // Identificar colunas numéricas
+        const numericColumns = this.config.numericColumns || [];
+        return data.map((item) => {
+            const processedItem = {};
+            this.config.tableKeys.forEach((key) => {
+                if (numericColumns.includes(key)) {
+                    const value = item[key];
+                    if (typeof value === "string") {
+                        // Converte o valor no formato brasileiro para número
+                        processedItem[key] = parseFloat(value.replace(".", "").replace(",", "."));
+                    }
+                    else if (typeof value === "number") {
+                        processedItem[key] = value;
+                    }
+                    else {
+                        processedItem[key] = 0; // Valor padrão para entradas inválidas
+                    }
+                }
+                else {
+                    // Mantém o valor original para colunas não numéricas
+                    processedItem[key] = item[key];
+                }
+            });
+            return processedItem;
+        });
+    }
+    exportToPdf() {
+        if (!this.config || !this.data.length) {
+            console.warn("Configuração ou dados ausentes para exportação de PDF!");
+            return;
+        }
+        const doc = new jsPDF();
+        // Configuração do título
+        const titleStyle = this.styles?.titleStyle || {};
+        doc.setFont(titleStyle.fontFamily || "helvetica", "normal");
+        doc.setFontSize(titleStyle.fontSize || 14);
+        doc.setTextColor(titleStyle.fontColor || "#000");
+        doc.text(this.config.pdfTitle || "Relatório", titleStyle.align === "center" ? 105 : 10, 10, { align: titleStyle.align || "left" });
+        // Processar os dados
+        const processedData = this.processData(this.data);
+        // Calcular totais por linha
+        const calculatedData = processedData.map((row) => {
+            const newRow = { ...row };
+            this.config.rowCalculations?.forEach((calc) => {
+                const result = calc.formula(row);
+                newRow[calc.label] = isNaN(result)
+                    ? "-"
+                    : formatToBrazilianNumber(result); // Formata os totais por linha
+            });
+            return newRow;
+        });
+        // Calcular o total geral
+        let totalRow = {};
+        if (this.config.totalizer?.include) {
+            this.config.totalizer.columns.forEach((column) => {
+                const values = calculatedData
+                    .map((item) => {
+                    const value = item[column.field];
+                    if (typeof value === "string") {
+                        return parseFloat(value.replace(".", "").replace(",", "."));
+                    }
+                    return typeof value === "number" ? value : 0; // Valores inválidos tratados como 0
+                })
+                    .filter((value) => !isNaN(value)); // Filtra valores válidos
+                const total = column.formula(values);
+                totalRow[column.field] = formatToBrazilianNumber(total); // Formata o total geral
+            });
+        }
+        // Preparar os dados para a tabela
+        const tableHeaders = [...this.config.tableHeaders];
+        const tableKeys = [...this.config.tableKeys];
+        const tableData = calculatedData.map((item) => tableKeys.map((key) => {
+            const value = item[key];
+            if (typeof value === "number") {
+                return formatToBrazilianNumber(value); // Formata números
+            }
+            return value || "-"; // Retorna o valor original
+        }));
+        // Adicionar a linha totalizadora ao final da tabela
+        if (this.config.totalizer?.include) {
+            const totalizerRow = tableKeys.map((key, index) => {
+                if (index === 0) {
+                    return this.config.totalizer?.columns[0].label || "-"; // Adiciona o label na primeira coluna
+                }
+                return totalRow[key] || "-";
+            });
+            tableData.push(totalizerRow);
+        }
+        // Configurar estilos e gerar a tabela
+        const tableStyle = this.styles?.tableStyle || {};
+        const headerStyle = this.styles?.headerStyle || {};
+        const dataStyle = this.styles?.dataStyle || {};
+        doc.autoTable({
+            head: [tableHeaders],
+            body: tableData,
+            startY: 20,
+            headStyles: {
+                fontSize: headerStyle.fontSize || 12,
+                textColor: headerStyle.fontColor || "#fff",
+                fillColor: headerStyle.backgroundColor || "#007bff",
+            },
+            bodyStyles: {
+                fontSize: dataStyle.fontSize || 10,
+                textColor: dataStyle.fontColor || "#555",
+            },
+            styles: {
+                fontSize: tableStyle.fontSize || 10,
+                textColor: tableStyle.fontColor || "#000",
+                fillColor: tableStyle.backgroundColor || "#fff",
+            },
+            theme: "grid",
+        });
+        // Salvar o PDF
+        doc.save(this.config.fileName || "relatorio.pdf");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArgentaPdfDataHandlerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArgentaPdfDataHandlerComponent, selector: "argenta-pdf-data-handler", inputs: { config: "config", data: "data", styles: "styles" }, ngImport: i0, template: "<div class=\"pdf-data-handler-container\">\n  <button class=\"pdf-button\" (click)=\"exportToPdf()\">\n    {{ config.buttonLabel || \"Export PDF\" }}\n  </button>\n</div>\n", styles: [".pdf-data-handler-container{display:flex;justify-content:center;align-items:center;padding:1rem}.pdf-data-handler-container .pdf-button{font-family:var(--font-family, Arial, sans-serif);font-size:16px;font-weight:600;padding:.5rem 1rem;border-radius:.25rem;color:var(--text-color, #fff);background-color:var(--primary-color);border:none;cursor:pointer;transition:background-color .3s,box-shadow .3s}.pdf-data-handler-container .pdf-button:hover{background-color:var(--secondary-color)}.pdf-data-handler-container .pdf-button:active{transform:scale(.98)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArgentaPdfDataHandlerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-pdf-data-handler", template: "<div class=\"pdf-data-handler-container\">\n  <button class=\"pdf-button\" (click)=\"exportToPdf()\">\n    {{ config.buttonLabel || \"Export PDF\" }}\n  </button>\n</div>\n", styles: [".pdf-data-handler-container{display:flex;justify-content:center;align-items:center;padding:1rem}.pdf-data-handler-container .pdf-button{font-family:var(--font-family, Arial, sans-serif);font-size:16px;font-weight:600;padding:.5rem 1rem;border-radius:.25rem;color:var(--text-color, #fff);background-color:var(--primary-color);border:none;cursor:pointer;transition:background-color .3s,box-shadow .3s}.pdf-data-handler-container .pdf-button:hover{background-color:var(--secondary-color)}.pdf-data-handler-container .pdf-button:active{transform:scale(.98)}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }] } });
+
+class ArgentaPdfDownloadComponent {
+    constructor(http) {
+        this.http = http;
+        this.apiEndpoint = ""; // Endpoint do back-end ou URL pública
+        this.buttonText = "Baixar PDF"; // Texto do botão
+        this.loadingText = "Baixando..."; // Texto durante o carregamento
+        this.isLoading = false;
+    }
+    downloadPdf() {
+        if (!this.apiEndpoint) {
+            console.error("O endpoint da API não foi fornecido.");
+            return;
+        }
+        // Verifica se a URL é pública (HTTPS ou HTTP)
+        if (this.apiEndpoint.startsWith("http://") ||
+            this.apiEndpoint.startsWith("https://")) {
+            window.open(this.apiEndpoint, "_blank"); // Abre a URL diretamente
+            return;
+        }
+        this.isLoading = true;
+        // Requisição para obter o arquivo como blob
+        this.http.get(this.apiEndpoint, { responseType: "blob" }).subscribe({
+            next: (blob) => {
+                const fileURL = window.URL.createObjectURL(blob);
+                window.open(fileURL, "_blank"); // Abre o arquivo como blob
+                this.isLoading = false;
+            },
+            error: (err) => {
+                console.error("Erro ao baixar o PDF:", err);
+                this.isLoading = false;
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArgentaPdfDownloadComponent, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ArgentaPdfDownloadComponent, selector: "argenta-pdf-download", inputs: { apiEndpoint: "apiEndpoint", buttonText: "buttonText", loadingText: "loadingText" }, ngImport: i0, template: "<button (click)=\"downloadPdf()\" [disabled]=\"isLoading\">\n  <span *ngIf=\"!isLoading\">{{ buttonText }}</span>\n  <span *ngIf=\"isLoading\">{{ loadingText }}</span>\n</button>\n", styles: ["button{font-family:var(--font-family);font-size:16px;font-weight:600;padding:.5rem 1rem;border-radius:.25rem;color:var(--text-color);background-color:var(--primary-color);border:none;cursor:pointer;transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out,transform .2s ease;box-shadow:0 4px 6px #0000001a}button:hover{background-color:var(--secondary-color);box-shadow:0 6px 8px #00000026}button:active{transform:scale(.96);box-shadow:0 2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ArgentaPdfDownloadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-pdf-download", template: "<button (click)=\"downloadPdf()\" [disabled]=\"isLoading\">\n  <span *ngIf=\"!isLoading\">{{ buttonText }}</span>\n  <span *ngIf=\"isLoading\">{{ loadingText }}</span>\n</button>\n", styles: ["button{font-family:var(--font-family);font-size:16px;font-weight:600;padding:.5rem 1rem;border-radius:.25rem;color:var(--text-color);background-color:var(--primary-color);border:none;cursor:pointer;transition:background-color .3s ease-in-out,box-shadow .3s ease-in-out,transform .2s ease;box-shadow:0 4px 6px #0000001a}button:hover{background-color:var(--secondary-color);box-shadow:0 6px 8px #00000026}button:active{transform:scale(.96);box-shadow:0 2px 4px #0000001a}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; }, propDecorators: { apiEndpoint: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }] } });
+
+class DragDropListComponent {
+    constructor() {
+        this.nonSelectedList = [];
+        this.nonSelectedButtonClick = new EventEmitter();
+        this.nonSelectedInputChanged = new EventEmitter();
+        this.selectedList = [];
+        this.selectedButtonClick = new EventEmitter();
+        this.selectedInputChanged = new EventEmitter();
+        this.nonSelectedListInputSubject = new Subject();
+        this.selectedListInputSubject = new Subject();
+        this.ButtonClasses = ButtonClasses; // Adicione a enumeração ao componente
+        this.draggedItem = null;
+        this.nonSelectedListInputSubject.pipe(debounceTime(2000)).subscribe((value) => {
+            this.nonSelectedInputChanged.emit(value);
+        });
+        this.selectedListInputSubject.pipe(debounceTime(2000)).subscribe((value) => {
+            this.selectedInputChanged.emit(value);
+        });
+    }
+    onDragStart(item) {
+        this.draggedItem = item;
+    }
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    onDrop(list, event) {
+        event.preventDefault();
+        if (this.draggedItem) {
+            const index = list.indexOf(this.draggedItem);
+            if (index === -1) {
+                this.removeItem(this.draggedItem);
+                list.push(this.draggedItem);
+            }
+            this.draggedItem = null;
+        }
+    }
+    removeItem(item) {
+        [this.nonSelectedList, this.selectedList].forEach((list) => {
+            const index = list.indexOf(item);
+            if (index !== -1) {
+                list.splice(index, 1);
+            }
+        });
+    }
+    nonSelectedListInputChange(event) {
+        this.nonSelectedListInputSubject.next(event.target.value);
+    }
+    selectedListInputChange(event) {
+        this.selectedListInputSubject.next(event.target.value);
+    }
+    selButtonClick() {
+        this.selectedButtonClick.emit();
+    }
+    nonSelButtonClick() {
+        this.nonSelectedButtonClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DragDropListComponent, selector: "argenta-drag-drop-list", inputs: { nonSelectedTitle: "nonSelectedTitle", nonSelectedList: "nonSelectedList", nonSelectedButtonLabel: "nonSelectedButtonLabel", selectedTitle: "selectedTitle", selectedList: "selectedList", selectedButtonLabel: "selectedButtonLabel" }, outputs: { nonSelectedButtonClick: "nonSelectedButtonClick", nonSelectedInputChanged: "nonSelectedInputChanged", selectedButtonClick: "selectedButtonClick", selectedInputChanged: "selectedInputChanged" }, ngImport: i0, template: "<!-- Cont\u00EAiner externo para dar a apar\u00EAncia de grupo -->\n<div class=\"group-container\">\n  <div class=\"container\">\n    <!-- Lista 1 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(nonSelectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ nonSelectedTitle }}</h6>\n        <div *ngIf=\"nonSelectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ nonSelectedButtonLabel }}\"\n            (onButtonClick)=\"nonSelButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"nonSelectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of nonSelectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n\n    <!-- Lista 2 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(selectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ selectedTitle }}</h6>\n        <div *ngIf=\"selectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ selectedButtonLabel }}\"\n            (onButtonClick)=\"selButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"selectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of selectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.group-container{display:flex;justify-content:center;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;width:80%;margin:auto}.container{display:flex;gap:20px;width:100%}.list{flex:1;padding:10px;background-color:#f0f0f0;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.list-input{width:100%;height:40px;margin-bottom:15px;border-radius:4px;border:1px solid #ccc;outline:none;font-size:1rem;resize:none}.item-card{width:100%;padding:15px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0003;cursor:move;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family);font-weight:500;font-size:1.1rem;color:#333}.row{display:flex;justify-content:space-between;align-items:center;width:100%;max-height:50px;height:50px}.align-end{display:flex;justify-content:flex-end}\n"], dependencies: [{ 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: ButtonComponent, selector: "argenta-custom-button", inputs: ["type", "label", "btnClass", "fontSize", "disabled", "autofocus", "form", "formaction", "formenctype", "formmethod", "formnovalidate", "formtarget", "name", "value", "permissions"], outputs: ["onButtonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragDropListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-drag-drop-list", template: "<!-- Cont\u00EAiner externo para dar a apar\u00EAncia de grupo -->\n<div class=\"group-container\">\n  <div class=\"container\">\n    <!-- Lista 1 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(nonSelectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ nonSelectedTitle }}</h6>\n        <div *ngIf=\"nonSelectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ nonSelectedButtonLabel }}\"\n            (onButtonClick)=\"nonSelButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"nonSelectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of nonSelectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n\n    <!-- Lista 2 com input -->\n    <div\n      class=\"list\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(selectedList, $event)\"\n    >\n      <div class=\"row\">\n        <h6 class=\"col-md-8\">{{ selectedTitle }}</h6>\n        <div *ngIf=\"selectedButtonLabel\" class=\"col-md-4 align-end\">\n          <argenta-custom-button\n            label=\"{{ selectedButtonLabel }}\"\n            (onButtonClick)=\"selButtonClick()\"\n            class=\"align-end\"\n            [btnClass]=\"ButtonClasses.Primary\"\n          >\n          </argenta-custom-button>\n        </div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"list-input\"\n        (input)=\"selectedListInputChange($event)\"\n      />\n      <div\n        *ngFor=\"let item of selectedList\"\n        class=\"item-card\"\n        draggable=\"true\"\n        (dragstart)=\"onDragStart(item)\"\n      >\n        {{ item.descricao }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.group-container{display:flex;justify-content:center;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;width:80%;margin:auto}.container{display:flex;gap:20px;width:100%}.list{flex:1;padding:10px;background-color:#f0f0f0;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.list-input{width:100%;height:40px;margin-bottom:15px;border-radius:4px;border:1px solid #ccc;outline:none;font-size:1rem;resize:none}.item-card{width:100%;padding:15px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0003;cursor:move;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family);font-weight:500;font-size:1.1rem;color:#333}.row{display:flex;justify-content:space-between;align-items:center;width:100%;max-height:50px;height:50px}.align-end{display:flex;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { nonSelectedTitle: [{
+                type: Input
+            }], nonSelectedList: [{
+                type: Input
+            }], nonSelectedButtonLabel: [{
+                type: Input
+            }], nonSelectedButtonClick: [{
+                type: Output
+            }], nonSelectedInputChanged: [{
+                type: Output
+            }], selectedTitle: [{
+                type: Input
+            }], selectedList: [{
+                type: Input
+            }], selectedButtonLabel: [{
+                type: Input
+            }], selectedButtonClick: [{
+                type: Output
+            }], selectedInputChanged: [{
+                type: Output
+            }] } });
+
+class DataExcelExporterComponent {
+    constructor() {
+        this.data = [];
+    }
+    exportToExcel() {
+        if (!this.config || (!this.data.length && !this.config.multipleSheets)) {
+            console.warn("Nenhuma configuração ou dados fornecidos.");
+            return;
+        }
+        const workbook = XLSX.utils.book_new();
+        // Verifica se múltiplas planilhas estão configuradas
+        if (this.config.multipleSheets) {
+            this.config.multipleSheets.forEach((sheetConfig) => {
+                const worksheet = XLSX.utils.aoa_to_sheet([]);
+                // Adiciona o título, se houver
+                let startRow = 0;
+                if (sheetConfig.title) {
+                    XLSX.utils.sheet_add_aoa(worksheet, [[sheetConfig.title]], {
+                        origin: "A1",
+                    });
+                    // Define larguras personalizadas do título
+                    if (sheetConfig.titleWidths) {
+                        worksheet["!cols"] = sheetConfig.titleWidths.map((width) => ({
+                            wch: width,
+                        }));
+                    }
+                    // Mescla o título
+                    if (sheetConfig.tableHeaders) {
+                        worksheet["!merges"] = worksheet["!merges"] || [];
+                        worksheet["!merges"].push({
+                            s: { r: 0, c: 0 },
+                            e: { r: 0, c: sheetConfig.tableHeaders.length - 1 },
+                        });
+                    }
+                    startRow = 1;
+                }
+                // Adiciona cabeçalhos
+                if (sheetConfig.tableHeaders) {
+                    XLSX.utils.sheet_add_aoa(worksheet, [sheetConfig.tableHeaders], {
+                        origin: `A${startRow + 1}`,
+                    });
+                }
+                // Adiciona dados
+                if (sheetConfig.data) {
+                    XLSX.utils.sheet_add_json(worksheet, sheetConfig.data, {
+                        origin: `A${startRow + 2}`,
+                        skipHeader: true,
+                    });
+                }
+                // Define larguras das colunas
+                if (sheetConfig.columnWidths) {
+                    worksheet["!cols"] = sheetConfig.columnWidths.map((width) => ({
+                        wch: width,
+                    }));
+                }
+                // Adiciona a planilha ao workbook
+                XLSX.utils.book_append_sheet(workbook, worksheet, sheetConfig.sheetName);
+            });
+        }
+        else {
+            // Caso não haja múltiplas planilhas, processa a planilha única
+            const worksheet = XLSX.utils.aoa_to_sheet([]);
+            // Adiciona título, se houver
+            let startRow = 0;
+            if (this.config.title) {
+                XLSX.utils.sheet_add_aoa(worksheet, [[this.config.title]], {
+                    origin: "A1",
+                });
+                // Define larguras do título
+                if (this.config.titleWidths) {
+                    worksheet["!cols"] = this.config.titleWidths.map((width) => ({
+                        wch: width,
+                    }));
+                }
+                // Mescla o título
+                if (this.config.tableHeaders) {
+                    worksheet["!merges"] = worksheet["!merges"] || [];
+                    worksheet["!merges"].push({
+                        s: { r: 0, c: 0 },
+                        e: { r: 0, c: this.config.tableHeaders.length - 1 },
+                    });
+                }
+                startRow = 1;
+            }
+            // Adiciona cabeçalhos
+            if (this.config.tableHeaders) {
+                XLSX.utils.sheet_add_aoa(worksheet, [this.config.tableHeaders], {
+                    origin: `A${startRow + 1}`,
+                });
+            }
+            // Adiciona dados
+            XLSX.utils.sheet_add_json(worksheet, this.data, {
+                origin: `A${startRow + 2}`,
+                skipHeader: true,
+            });
+            // Define larguras das colunas
+            if (this.config.columnWidths) {
+                worksheet["!cols"] = this.config.columnWidths.map((width) => ({
+                    wch: width,
+                }));
+            }
+            // Adiciona a planilha ao workbook
+            XLSX.utils.book_append_sheet(workbook, worksheet, this.config.sheetName);
+        }
+        // Salva o arquivo Excel
+        XLSX.writeFile(workbook, this.config.fileName);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataExcelExporterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataExcelExporterComponent, selector: "argenta-excel-exporter", inputs: { config: "config", data: "data" }, ngImport: i0, template: `
+    <button (click)="exportToExcel()">{{ config?.buttonLabel }}</button>
+  `, isInline: true, styles: ["button{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);padding:10px 20px;border:none;cursor:pointer}button:hover{background-color:var(--secondary-color)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataExcelExporterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-excel-exporter", template: `
+    <button (click)="exportToExcel()">{{ config?.buttonLabel }}</button>
+  `, styles: ["button{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);padding:10px 20px;border:none;cursor:pointer}button:hover{background-color:var(--secondary-color)}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class DataExcelImporterComponent {
+    constructor() {
+        this.excelData = new EventEmitter(); // Evento para enviar dados processados
+        // Configurações padrão
+        this.config = {
+            acceptedFileTypes: [".xlsx", ".xls", ".csv"],
+            onImport: (data) => this.defaultImportHandler(data),
+            excludeRows: [],
+            excludeColumns: [],
+            hasHeader: true,
+            headerRowIndex: 1,
+            titleRowIndex: 1,
+        };
+        // Controle do modal e inputs de configuração
+        this.userConfig = { ...this.config };
+        this.excludeRowsInput = ""; // Para capturar linhas a excluir
+        this.excludeColumnsInput = ""; // Para capturar colunas a excluir
+        this.showConfigModal = false;
+        this.buttonLabel = "Importar Dados";
+    }
+    // Abre o modal de configurações
+    openModal() {
+        this.showConfigModal = true;
+    }
+    // Fecha o modal de configurações
+    closeModal() {
+        this.showConfigModal = false;
+    }
+    // Salva as configurações ajustadas no modal
+    saveConfig() {
+        this.config = {
+            ...this.userConfig,
+            titleRowIndex: (this.userConfig.titleRowIndex ?? 1) - 1,
+            headerRowIndex: (this.userConfig.headerRowIndex ?? 2) - 1,
+            excludeRows: this.excludeRowsInput
+                .split(",")
+                .map((row) => parseInt(row.trim(), 10) - 1),
+            excludeColumns: this.excludeColumnsInput
+                .split(",")
+                .map((col) => this.columnLetterToIndex(col.trim())), // Converte letras para índices
+        };
+        this.closeModal();
+    }
+    // Valida que as linhas informadas sejam pelo menos 1
+    validateRowInput(field) {
+        if (field === "headerRow" && this.userConfig.headerRowIndex < 1) {
+            this.userConfig.headerRowIndex = 1;
+        }
+        if (field === "titleRow" && this.userConfig.titleRowIndex < 1) {
+            this.userConfig.titleRowIndex = 1;
+        }
+    }
+    // Processa o arquivo selecionado
+    handleFileInput(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const fileType = file.name.split(".").pop()?.toLowerCase();
+            if (fileType === "csv") {
+                this.processCSVFile(file); // Processa o CSV de forma isolada
+            }
+            else {
+                this.processExcelFile(file); // Mantém o fluxo atual para Excel
+            }
+            event.target.value = ""; // Reseta o input para permitir reimportação
+        }
+    }
+    processExcelFile(file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const data = new Uint8Array(e.target.result);
+            const workbook = XLSX.read(data, { type: "array" });
+            const sheetName = workbook.SheetNames[0];
+            const worksheet = workbook.Sheets[sheetName];
+            const titleRowIndex = this.config.titleRowIndex ?? 0;
+            const headerRowIndex = this.config.headerRowIndex ?? titleRowIndex + 1;
+            if (worksheet["!ref"]) {
+                worksheet["!ref"] = this.adjustRange(worksheet["!ref"], headerRowIndex + 1);
+            }
+            else {
+                console.error("Intervalo da planilha ('!ref') não encontrado.");
+                return;
+            }
+            const jsonData = XLSX.utils.sheet_to_json(worksheet, {
+                header: 1,
+                defval: "",
+                blankrows: false,
+            });
+            this.processData(jsonData);
+        };
+        reader.readAsArrayBuffer(file); // Lê o Excel como array buffer
+    }
+    processCSVFile(file) {
+        if (this.userConfig.hasHeader) {
+            if (this.config?.headerRowIndex !== undefined) {
+                this.config.headerRowIndex =
+                    this.config.headerRowIndex === 0 ? 1 : this.config.headerRowIndex + 1;
+            }
+            const sum = (this.config.excludeRows ?? []).reduce((acc, value) => acc + value, 0) +
+                1;
+            this.config.excludeRows = [sum];
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const csvData = e.target.result;
+            // Converte CSV em JSON usando XLSX
+            const workbook = XLSX.read(csvData, { type: "string" });
+            const sheetName = workbook.SheetNames[0];
+            const worksheet = workbook.Sheets[sheetName];
+            const jsonData = XLSX.utils.sheet_to_json(worksheet, {
+                header: 1,
+                defval: "",
+                blankrows: false,
+            });
+            this.processData(jsonData);
+        };
+        reader.readAsText(file); // Lê o CSV como texto
+    }
+    processData(jsonData) {
+        const titleRowIndex = this.config.titleRowIndex ?? 0;
+        const headerRowIndex = this.config.headerRowIndex ?? titleRowIndex + 1;
+        const headers = jsonData[0];
+        if (!headers) {
+            console.error("Cabeçalhos não encontrados. Verifique o headerRowIndex.");
+            return;
+        }
+        const normalizedHeaders = headers.map((header, index) => this.normalizeHeader(header || `col_${index}`));
+        const dataRows = jsonData.slice(1); // Remove a linha de cabeçalho
+        // Filtra as linhas baseando-se no índice informado pelo usuário (1-based)
+        const filteredRows = dataRows.filter((_, index) => !this.config.excludeRows?.includes(index + headerRowIndex + 1));
+        const formattedData = filteredRows.map((row) => {
+            const record = {};
+            normalizedHeaders.forEach((header, index) => {
+                record[header] = row[index] ?? "";
+            });
+            return record;
+        });
+        const finalData = this.filterColumns(formattedData);
+        this.config.onImport(finalData); // Chama o callback com os dados processados
+        this.excelData.emit(finalData); // Emite os dados processados para o cliente
+    }
+    // Ajusta o intervalo da planilha com base na linha do cabeçalho
+    adjustRange(range, startRow) {
+        const [start, end] = range.split(":");
+        const startCol = start.replace(/[0-9]/g, "");
+        const endCol = end.replace(/[0-9]/g, "");
+        const endRow = end.replace(/[A-Za-z]/g, "");
+        return `${startCol}${startRow}:${endCol}${endRow}`;
+    }
+    // Normaliza os cabeçalhos removendo acentos e espaços
+    normalizeHeader(header) {
+        return header
+            .normalize("NFD")
+            .replace(/[\u0300-\u036f]/g, "")
+            .replace(/\s+/g, "_")
+            .toLowerCase();
+    }
+    // Filtra as colunas configuradas para exclusão
+    filterColumns(data) {
+        const { excludeColumns } = this.config;
+        return data.map((row) => {
+            const filteredRow = {};
+            Object.keys(row).forEach((key, index) => {
+                if (!excludeColumns?.includes(index)) {
+                    filteredRow[key] = row[key];
+                }
+            });
+            return filteredRow;
+        });
+    }
+    // Converte letra da coluna para índice (A -> 0, B -> 1, etc.)
+    columnLetterToIndex(letter) {
+        let index = 0;
+        for (let i = 0; i < letter.length; i++) {
+            index = index * 26 + (letter.charCodeAt(i) - "A".charCodeAt(0) + 1);
+        }
+        return index - 1;
+    }
+    // Callback padrão para manipular dados importados
+    defaultImportHandler(data) { }
+    transformToUppercase() {
+        this.excludeColumnsInput = this.excludeColumnsInput.toUpperCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataExcelImporterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataExcelImporterComponent, selector: "argenta-excel-importer", outputs: { excelData: "excelData" }, ngImport: i0, template: "<div class=\"excel-importer\">\n  <input\n    type=\"file\"\n    (change)=\"handleFileInput($event)\"\n    [accept]=\"config.acceptedFileTypes?.join(',')\"\n    style=\"display: none\"\n    #fileInput\n  />\n  <button (click)=\"fileInput.click()\">{{ buttonLabel }}</button>\n  <lucide-icon\n    name=\"settings\"\n    [size]=\"24\"\n    [strokeWidth]=\"2.25\"\n    class=\"settings-icon\"\n    (click)=\"openModal()\"\n  ></lucide-icon>\n</div>\n\n<div class=\"modal-container\" *ngIf=\"showConfigModal\">\n  <div class=\"modal-content\">\n    <h4 class=\"titulo\">Configura\u00E7\u00E3o de Importa\u00E7\u00E3o</h4>\n    <form (ngSubmit)=\"saveConfig()\">\n      <div class=\"form-group\">\n        <label for=\"acceptedFileTypes\">Tipos de Arquivo Permitidos</label>\n        <input\n          id=\"acceptedFileTypes\"\n          type=\"text\"\n          [(ngModel)]=\"userConfig.acceptedFileTypes\"\n          name=\"acceptedFileTypes\"\n          placeholder=\".xlsx, .xls\"\n        />\n      </div>\n      <div class=\"form-group\" style=\"display: none\">\n        <label for=\"titleRow\">Linha do T\u00EDtulo (se aplic\u00E1vel)</label>\n        <input\n          id=\"titleRow\"\n          type=\"number\"\n          [(ngModel)]=\"userConfig.titleRowIndex\"\n          name=\"titleRow\"\n          placeholder=\"Ex: 1\"\n          (change)=\"validateRowInput('titleRow')\"\n        />\n      </div>\n      <div class=\"form-group checkbox-group\">\n        <div class=\"row\">\n          <div class=\"col-md-8\">\n            <label for=\"hasHeader\">A planilha cont\u00E9m cabe\u00E7alho?</label>\n          </div>\n          <div class=\"col-md-4\">\n            <input\n              id=\"hasHeader\"\n              class=\"input-checkbox\"\n              type=\"checkbox\"\n              [(ngModel)]=\"userConfig.hasHeader\"\n              name=\"hasHeader\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <!-- Exibe a linha do cabe\u00E7alho apenas se o checkbox estiver marcado -->\n      <div class=\"form-group\" *ngIf=\"userConfig.hasHeader\">\n        <label for=\"headerRow\">Linha do Cabe\u00E7alho</label>\n        <input\n          id=\"headerRow\"\n          type=\"number\"\n          [(ngModel)]=\"userConfig.headerRowIndex\"\n          name=\"headerRow\"\n          placeholder=\"Ex: 2\"\n          (change)=\"validateRowInput('headerRow')\"\n        />\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"excludeRows\">Linhas a Excluir</label>\n        <input\n          id=\"excludeRows\"\n          type=\"text\"\n          [(ngModel)]=\"excludeRowsInput\"\n          name=\"excludeRows\"\n          placeholder=\"Ex: 1, 3\"\n        />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"excludeColumns\">Colunas a Excluir</label>\n        <input\n          id=\"excludeColumns\"\n          type=\"text\"\n          [(ngModel)]=\"excludeColumnsInput\"\n          name=\"excludeColumns\"\n          placeholder=\"Ex: A, C\"\n          (input)=\"transformToUppercase()\"\n        />\n      </div>\n      <button type=\"submit\">Salvar Configura\u00E7\u00F5es</button>\n      <button type=\"button\" (click)=\"closeModal()\">Fechar</button>\n    </form>\n  </div>\n</div>\n", styles: [".excel-importer{display:flex;align-items:center;gap:10px}.excel-importer button{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);padding:10px 20px;border:none;cursor:pointer;display:flex;align-items:center}.excel-importer button:hover{background-color:var(--secondary-color)}.excel-importer .settings-icon{color:var(--text-color);background-color:var(--primary-color);border-radius:50%;padding:5px;cursor:pointer;transition:background-color .3s,color .3s}.excel-importer .settings-icon:hover{background-color:var(--secondary-color);color:#fff}.modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background:#fff;padding:20px;border-radius:5px;width:400px}.modal-content h2{margin-bottom:20px}.modal-content .form-group{margin-bottom:15px}.modal-content .form-group label{display:block;margin-bottom:5px}.modal-content .form-group input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.modal-content button{margin-right:10px;padding:8px 15px;border:none;cursor:pointer}.modal-content button:first-of-type{background-color:var(--primary-color);color:#fff}.modal-content button:last-of-type{background-color:#ccc}input#excludeColumns{text-transform:uppercase}.small-label{font-size:.7rem;color:#555}.input-checkbox{margin-left:-5rem}.titulo{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataExcelImporterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-excel-importer", template: "<div class=\"excel-importer\">\n  <input\n    type=\"file\"\n    (change)=\"handleFileInput($event)\"\n    [accept]=\"config.acceptedFileTypes?.join(',')\"\n    style=\"display: none\"\n    #fileInput\n  />\n  <button (click)=\"fileInput.click()\">{{ buttonLabel }}</button>\n  <lucide-icon\n    name=\"settings\"\n    [size]=\"24\"\n    [strokeWidth]=\"2.25\"\n    class=\"settings-icon\"\n    (click)=\"openModal()\"\n  ></lucide-icon>\n</div>\n\n<div class=\"modal-container\" *ngIf=\"showConfigModal\">\n  <div class=\"modal-content\">\n    <h4 class=\"titulo\">Configura\u00E7\u00E3o de Importa\u00E7\u00E3o</h4>\n    <form (ngSubmit)=\"saveConfig()\">\n      <div class=\"form-group\">\n        <label for=\"acceptedFileTypes\">Tipos de Arquivo Permitidos</label>\n        <input\n          id=\"acceptedFileTypes\"\n          type=\"text\"\n          [(ngModel)]=\"userConfig.acceptedFileTypes\"\n          name=\"acceptedFileTypes\"\n          placeholder=\".xlsx, .xls\"\n        />\n      </div>\n      <div class=\"form-group\" style=\"display: none\">\n        <label for=\"titleRow\">Linha do T\u00EDtulo (se aplic\u00E1vel)</label>\n        <input\n          id=\"titleRow\"\n          type=\"number\"\n          [(ngModel)]=\"userConfig.titleRowIndex\"\n          name=\"titleRow\"\n          placeholder=\"Ex: 1\"\n          (change)=\"validateRowInput('titleRow')\"\n        />\n      </div>\n      <div class=\"form-group checkbox-group\">\n        <div class=\"row\">\n          <div class=\"col-md-8\">\n            <label for=\"hasHeader\">A planilha cont\u00E9m cabe\u00E7alho?</label>\n          </div>\n          <div class=\"col-md-4\">\n            <input\n              id=\"hasHeader\"\n              class=\"input-checkbox\"\n              type=\"checkbox\"\n              [(ngModel)]=\"userConfig.hasHeader\"\n              name=\"hasHeader\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <!-- Exibe a linha do cabe\u00E7alho apenas se o checkbox estiver marcado -->\n      <div class=\"form-group\" *ngIf=\"userConfig.hasHeader\">\n        <label for=\"headerRow\">Linha do Cabe\u00E7alho</label>\n        <input\n          id=\"headerRow\"\n          type=\"number\"\n          [(ngModel)]=\"userConfig.headerRowIndex\"\n          name=\"headerRow\"\n          placeholder=\"Ex: 2\"\n          (change)=\"validateRowInput('headerRow')\"\n        />\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"excludeRows\">Linhas a Excluir</label>\n        <input\n          id=\"excludeRows\"\n          type=\"text\"\n          [(ngModel)]=\"excludeRowsInput\"\n          name=\"excludeRows\"\n          placeholder=\"Ex: 1, 3\"\n        />\n      </div>\n      <div class=\"form-group\">\n        <label for=\"excludeColumns\">Colunas a Excluir</label>\n        <input\n          id=\"excludeColumns\"\n          type=\"text\"\n          [(ngModel)]=\"excludeColumnsInput\"\n          name=\"excludeColumns\"\n          placeholder=\"Ex: A, C\"\n          (input)=\"transformToUppercase()\"\n        />\n      </div>\n      <button type=\"submit\">Salvar Configura\u00E7\u00F5es</button>\n      <button type=\"button\" (click)=\"closeModal()\">Fechar</button>\n    </form>\n  </div>\n</div>\n", styles: [".excel-importer{display:flex;align-items:center;gap:10px}.excel-importer button{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);padding:10px 20px;border:none;cursor:pointer;display:flex;align-items:center}.excel-importer button:hover{background-color:var(--secondary-color)}.excel-importer .settings-icon{color:var(--text-color);background-color:var(--primary-color);border-radius:50%;padding:5px;cursor:pointer;transition:background-color .3s,color .3s}.excel-importer .settings-icon:hover{background-color:var(--secondary-color);color:#fff}.modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background:#fff;padding:20px;border-radius:5px;width:400px}.modal-content h2{margin-bottom:20px}.modal-content .form-group{margin-bottom:15px}.modal-content .form-group label{display:block;margin-bottom:5px}.modal-content .form-group input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.modal-content button{margin-right:10px;padding:8px 15px;border:none;cursor:pointer}.modal-content button:first-of-type{background-color:var(--primary-color);color:#fff}.modal-content button:last-of-type{background-color:#ccc}input#excludeColumns{text-transform:uppercase}.small-label{font-size:.7rem;color:#555}.input-checkbox{margin-left:-5rem}.titulo{margin-bottom:2rem}\n"] }]
+        }], propDecorators: { excelData: [{
+                type: Output
+            }] } });
+
+class CsvImporterComponent {
+    constructor() {
+        this.config = {
+            acceptedFileTypes: [".xlsx", ".xls", ".csv"],
+            detectHeaders: true,
+            delimiter: ";",
+            onImport: () => { },
+        };
+    }
+    handleFileInput(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            // Detecta se o arquivo é CSV
+            if (file.name.endsWith(".csv")) {
+                reader.onload = (e) => {
+                    const csvData = e.target.result;
+                    const delimiter = this.config.delimiter ?? ";"; // Usa delimitador configurado ou padrão
+                    const jsonData = this.parseCSV(csvData, delimiter);
+                    this.processData(jsonData);
+                };
+                reader.readAsText(file);
+            }
+            else {
+                // Processa arquivos Excel (XLSX/XLS)
+                reader.onload = (e) => {
+                    const data = new Uint8Array(e.target.result);
+                    const workbook = XLSX.read(data, { type: "array" });
+                    const sheetName = workbook.SheetNames[0];
+                    const worksheet = workbook.Sheets[sheetName];
+                    const jsonData = XLSX.utils.sheet_to_json(worksheet, {
+                        header: 1,
+                        defval: "",
+                    });
+                    this.processData(jsonData);
+                };
+                reader.readAsArrayBuffer(file);
+            }
+        }
+    }
+    parseCSV(csvData, delimiter = ";") {
+        return csvData
+            .split("\n")
+            .map((row) => row.split(delimiter).map((cell) => cell.trim()));
+    }
+    processData(jsonData) {
+        const headers = this.getHeaders(jsonData);
+        const dataRows = jsonData.slice(headers ? 1 : 0);
+        const formattedData = this.formatData(dataRows, headers);
+        this.config.onImport(formattedData);
+    }
+    getHeaders(data) {
+        if (this.config.customHeaders) {
+            return this.config.customHeaders;
+        }
+        if (this.config.detectHeaders && data.length > 0) {
+            return data[0].map((header, index) => this.normalizeHeader(header || `col_${index}`));
+        }
+        return null; // Nenhum cabeçalho detectado
+    }
+    formatData(dataRows, headers) {
+        if (!headers) {
+            return dataRows; // Retorna dados brutos se não houver cabeçalhos
+        }
+        return dataRows.map((row) => {
+            const record = {};
+            headers.forEach((header, index) => {
+                record[header] = row[index] ?? "";
+            });
+            return record;
+        });
+    }
+    normalizeHeader(header) {
+        return String(header)
+            .normalize("NFD")
+            .replace(/[\u0300-\u036f]/g, "")
+            .replace(/\s+/g, "_")
+            .toLowerCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsvImporterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CsvImporterComponent, selector: "argenta-csv-importer", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"excel-importer\">\n  <input\n    type=\"file\"\n    (change)=\"handleFileInput($event)\"\n    [accept]=\"config.acceptedFileTypes?.join(',')\"\n    style=\"display: none\"\n    #fileInput\n  />\n  <button (click)=\"fileInput.click()\">Importar Arquivo</button>\n</div>\n", styles: [".excel-importer button{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);padding:10px 20px;border:none;cursor:pointer}.excel-importer button:hover{background-color:var(--secondary-color)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CsvImporterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "argenta-csv-importer", template: "<div class=\"excel-importer\">\n  <input\n    type=\"file\"\n    (change)=\"handleFileInput($event)\"\n    [accept]=\"config.acceptedFileTypes?.join(',')\"\n    style=\"display: none\"\n    #fileInput\n  />\n  <button (click)=\"fileInput.click()\">Importar Arquivo</button>\n</div>\n", styles: [".excel-importer button{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);padding:10px 20px;border:none;cursor:pointer}.excel-importer button:hover{background-color:var(--secondary-color)}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
 // Select some icons (use an object, not an array)
 class LucideIconsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i3.LucideAngularModule], exports: [LucideAngularModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i4.LucideAngularModule], exports: [LucideAngularModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(icons), LucideAngularModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, decorators: [{
@@ -3640,7 +4291,12 @@ class ComponentsModule {
             ModalComponent,
             DragDropListComponent,
             DynamicModalComponent,
-            DynamicTableComponent], imports: [CommonModule,
+            DynamicTableComponent,
+            ArgentaPdfDataHandlerComponent,
+            ArgentaPdfDownloadComponent,
+            DataExcelExporterComponent,
+            DataExcelImporterComponent,
+            CsvImporterComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule,
@@ -3681,7 +4337,12 @@ class ComponentsModule {
             ModalComponent,
             DragDropListComponent,
             DynamicModalComponent,
-            DynamicTableComponent] }); }
+            DynamicTableComponent,
+            ArgentaPdfDataHandlerComponent,
+            ArgentaPdfDownloadComponent,
+            DataExcelExporterComponent,
+            DataExcelImporterComponent,
+            CsvImporterComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3729,6 +4390,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DragDropListComponent,
                         DynamicModalComponent,
                         DynamicTableComponent,
+                        ArgentaPdfDataHandlerComponent,
+                        ArgentaPdfDownloadComponent,
+                        DataExcelExporterComponent,
+                        DataExcelImporterComponent,
+                        CsvImporterComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -3776,6 +4442,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DragDropListComponent,
                         DynamicModalComponent,
                         DynamicTableComponent,
+                        ArgentaPdfDataHandlerComponent,
+                        ArgentaPdfDownloadComponent,
+                        DataExcelExporterComponent,
+                        DataExcelImporterComponent,
+                        CsvImporterComponent,
                     ],
                 }]
         }] });
@@ -3869,7 +4540,7 @@ class DataPaginateService {
             };
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, decorators: [{
@@ -3877,7 +4548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
 
 class RouterParameterService {
     constructor() {
@@ -3976,7 +4647,7 @@ function setThemeColors(config) {
 }
 
 /*
- * Public API Surface of sim-lib
+ * Public API Surface of lib-atriun-angular
  *
  * Este arquivo exporta todos os componentes, enums e módulos necessários
  * para que os consumidores da biblioteca possam utilizá-los em suas aplicações.
@@ -3987,5 +4658,5 @@ function setThemeColors(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, DragDropListComponent, DynamicModalComponent, DynamicTableComponent, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, ModalComponent, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent, convertToSnakeCase, setThemeColors };
+export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, ArgentaPdfDataHandlerComponent, ArgentaPdfDownloadComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CsvImporterComponent, CustomPaginationComponent, CustomSwitchComponent, DataExcelExporterComponent, DataExcelImporterComponent, DataPaginateService, DataTableComponent, DragDropListComponent, DynamicModalComponent, DynamicTableComponent, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, ModalComponent, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent, convertToSnakeCase, setThemeColors };
 //# sourceMappingURL=lib-portal-angular.mjs.map