lib-portal-angular 0.0.66 → 0.0.68

package/fesm2022/lib-portal-angular.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChild, Directive, NgModule, createComponent } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostListener, forwardRef, ViewChild, Directive, NgModule, createComponent } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from 'lucide-angular';
+import { LucideAngularModule, icons } from 'lucide-angular';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { of, Subject, Subscription, Observable } from 'rxjs';
+import hljs from 'highlight.js';
+import * as i1$2 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 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i5 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import hljs from 'highlight.js';
-import * as i1 from '@ng-bootstrap/ng-bootstrap';
-import * as i1$1 from 'lucide-angular';
-import { LucideAngularModule, icons } from 'lucide-angular';
 import * as CryptoJS from 'crypto-js';
 
 class AuthService {
@@ -48,188 +48,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-class MultiSelectComponent {
-    constructor(authService, http) {
+class AccordionArgentaComponent {
+    constructor(authService) {
         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;
-        };
+        this.title = 'Accordion Title'; // Título do accordion
+        this.isOpen = false; // Estado inicial do accordion
+        this.permissions = []; // Permissões necessárias para exibir o accordion
+        this.toggleEvent = new EventEmitter(); // Evento emitido ao abrir/fechar o accordion
     }
     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();
-        });
+        this.validatePermissions();
     }
     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);
-    }
-    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));
-                if (!existsInList) {
-                    const newItem = {
-                        [this.bindValue]: item[this.bindValue] || item,
-                        [this.bindLabel]: item[this.bindLabel] || item
-                    };
-                    this.data.push(newItem);
-                    this.allItems.push(newItem);
-                }
-            });
-            this.items = of(this.allItems);
-        }
-    }
-    onFocus() {
-        this.isCourseEntered = true;
-    }
-    onBlur() {
-        this.isCourseEntered = false;
-    }
-    onKeyUp(event) {
-        this.keyupEvent.emit(event);
-    }
-    onSelectedChange(event) {
-        const previousSelected = this.selected;
-        if (this.multiple) {
-            this.selected = event;
-        }
-        else {
-            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
-                }
-            });
-        }
-    }
-    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);
-        }
-    }
-    writeValue(value) {
-        if (this.multiple) {
-            this.selected = value || [];
-        }
-        else {
-            this.selected = value || null;
+        if (changes['permissions']) {
+            this.validatePermissions();
         }
-        this.addSelectedItemsToData();
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    setDisabledState(isDisabled) {
-        // No implementation needed for this example
     }
     hasPermission() {
         if (!this.permissions || this.permissions.length === 0) {
-            return true;
+            return true; // Se não forem passadas permissões, o accordion será exibido por padrão
         }
         try {
-            return this.authService.hasPermission(this.permissions);
+            return this.authService.hasPermission(this.permissions); // Verifica se o usuário tem as permissões
         }
         catch (error) {
             if (error instanceof Error) {
@@ -238,93 +78,34 @@ class MultiSelectComponent {
             else {
                 console.error('Unknown error occurred during permission check');
             }
-            return true;
+            return false; // Se ocorrer um erro ou as permissões não forem válidas, o accordion não será exibido
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i2.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: [
-            {
-                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\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    toggle() {
+        this.isOpen = !this.isOpen;
+        this.toggleEvent.emit(this.isOpen); // Emite o estado atual (aberto ou fechado)
+    }
+    validatePermissions() {
+        if (!Array.isArray(this.permissions)) {
+            throw new Error(`Invalid permissions: ${this.permissions}. It should be an array of strings.`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionArgentaComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccordionArgentaComponent, selector: "argenta-accordion", inputs: { title: "title", isOpen: "isOpen", permissions: "permissions" }, outputs: { toggleEvent: "toggleEvent" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"accordion\">\n    <div class=\"accordion-header\" (click)=\"toggle()\" [class.open]=\"isOpen\">\n      <h3>{{ title }}</h3>\n      <!-- \u00CDcone da seta -->\n      <span class=\"accordion-icon\">\u25BC</span>\n    </div>\n    <div class=\"accordion-content\" [class.open]=\"isOpen\">\n      <ng-content></ng-content> <!-- Conte\u00FAdo do accordion -->\n    </div>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.accordion{border:1px solid #ccc;border-radius:8px;margin-bottom:15px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease;overflow:hidden}.accordion .accordion-header{background-color:#00444c;color:#fff;cursor:pointer;padding:10px;display:flex;justify-content:space-between;align-items:center;font-size:1.2rem}.accordion .accordion-header h3{margin:0;font-size:1rem;font-weight:700}.accordion .accordion-header .accordion-icon{font-size:1.2rem;transition:transform .4s ease;transform:rotate(0)}.accordion .accordion-header.open .accordion-icon{transform:rotate(180deg)}.accordion .accordion-content{max-height:0;overflow:hidden;padding:0 10px;background-color:#fff;font-size:.9rem;transition:max-height .4s ease,padding .4s ease}.accordion .accordion-content.open{max-height:500px;padding:10px;border-bottom-left-radius:8px;border-bottom-right-radius:8px}\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: MultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionArgentaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-custom-multi-select', 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\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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.HttpClient }]; }, propDecorators: { label: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], bindLabel: [{
+            args: [{ selector: 'argenta-accordion', template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"accordion\">\n    <div class=\"accordion-header\" (click)=\"toggle()\" [class.open]=\"isOpen\">\n      <h3>{{ title }}</h3>\n      <!-- \u00CDcone da seta -->\n      <span class=\"accordion-icon\">\u25BC</span>\n    </div>\n    <div class=\"accordion-content\" [class.open]=\"isOpen\">\n      <ng-content></ng-content> <!-- Conte\u00FAdo do accordion -->\n    </div>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.accordion{border:1px solid #ccc;border-radius:8px;margin-bottom:15px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease;overflow:hidden}.accordion .accordion-header{background-color:#00444c;color:#fff;cursor:pointer;padding:10px;display:flex;justify-content:space-between;align-items:center;font-size:1.2rem}.accordion .accordion-header h3{margin:0;font-size:1rem;font-weight:700}.accordion .accordion-header .accordion-icon{font-size:1.2rem;transition:transform .4s ease;transform:rotate(0)}.accordion .accordion-header.open .accordion-icon{transform:rotate(180deg)}.accordion .accordion-content{max-height:0;overflow:hidden;padding:0 10px;background-color:#fff;font-size:.9rem;transition:max-height .4s ease,padding .4s ease}.accordion .accordion-content.open{max-height:500px;padding:10px;border-bottom-left-radius:8px;border-bottom-right-radius:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { title: [{
                 type: Input
-            }], bindValue: [{
+            }], isOpen: [{
                 type: Input
             }], permissions: [{
                 type: Input
-            }], closeOnSelect: [{
-                type: Input
-            }], searchUrl: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], searchParams: [{
-                type: Input
-            }], keyupEvent: [{
+            }], toggleEvent: [{
                 type: Output
             }] } });
 
-class MultiSelectCategoryComponent {
-    constructor() {
-        // Inputs para receber dados dinâmicos de diferentes categorias
-        this.unidadesOrganizacionais = [];
-        this.clientes = [];
-        this.empresas = [];
-        this.usuarios = [];
-        // Inputs para permissões específicas de cada categoria
-        this.permissoesUnidades = [];
-        this.permissoesClientes = [];
-        this.permissoesEmpresas = [];
-        this.permissoesUsuarios = [];
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectCategoryComponent, selector: "argenta-multi-select-category", inputs: { unidadesOrganizacionais: "unidadesOrganizacionais", clientes: "clientes", empresas: "empresas", usuarios: "usuarios", permissoesUnidades: "permissoesUnidades", permissoesClientes: "permissoesClientes", permissoesEmpresas: "permissoesEmpresas", permissoesUsuarios: "permissoesUsuarios" }, ngImport: i0, template: "<div class=\"multi-select-category\">\n  <div class=\"row\">\n    <!-- Primeira linha: Usu\u00E1rio e Cliente -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Usu\u00E1rios\"\n        [data]=\"usuarios\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUsuarios\"\n        placeholder=\"Selecione Usu\u00E1rios\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Clientes\"\n        [data]=\"clientes\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesClientes\"\n        placeholder=\"Selecione Clientes\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n\n  <div class=\"row\">\n    <!-- Segunda linha: Empresa e Unidade Organizacional -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Empresas\"\n        [data]=\"empresas\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesEmpresas\"\n        placeholder=\"Selecione Empresas\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Unidades Organizacionais\"\n        [data]=\"unidadesOrganizacionais\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUnidades\"\n        placeholder=\"Selecione Unidades Organizacionais\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n</div>\n", styles: [".multi-select-category{display:flex;flex-direction:column;gap:1rem}.multi-select-category .row{display:flex;gap:1rem}.multi-select-category .col{flex:1}\n"], dependencies: [{ kind: "component", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: ["label", "data", "placeholder", "selected", "id", "bindLabel", "bindValue", "permissions", "closeOnSelect", "searchUrl", "multiple", "searchParams"], outputs: ["keyupEvent"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectCategoryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'argenta-multi-select-category', template: "<div class=\"multi-select-category\">\n  <div class=\"row\">\n    <!-- Primeira linha: Usu\u00E1rio e Cliente -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Usu\u00E1rios\"\n        [data]=\"usuarios\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUsuarios\"\n        placeholder=\"Selecione Usu\u00E1rios\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Clientes\"\n        [data]=\"clientes\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesClientes\"\n        placeholder=\"Selecione Clientes\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n\n  <div class=\"row\">\n    <!-- Segunda linha: Empresa e Unidade Organizacional -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Empresas\"\n        [data]=\"empresas\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesEmpresas\"\n        placeholder=\"Selecione Empresas\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Unidades Organizacionais\"\n        [data]=\"unidadesOrganizacionais\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUnidades\"\n        placeholder=\"Selecione Unidades Organizacionais\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n</div>\n", styles: [".multi-select-category{display:flex;flex-direction:column;gap:1rem}.multi-select-category .row{display:flex;gap:1rem}.multi-select-category .col{flex:1}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { unidadesOrganizacionais: [{
-                type: Input
-            }], clientes: [{
-                type: Input
-            }], empresas: [{
-                type: Input
-            }], usuarios: [{
-                type: Input
-            }], permissoesUnidades: [{
-                type: Input
-            }], permissoesClientes: [{
-                type: Input
-            }], permissoesEmpresas: [{
-                type: Input
-            }], permissoesUsuarios: [{
-                type: Input
-            }] } });
-
 class AlertComponent {
     constructor() {
         this.alerts = [];
@@ -396,7 +177,7 @@ class AlertComponent {
         }, 2000); // Fechar após 2 segundos
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "lib-alert", inputs: { alerts: "alerts" }, ngImport: i0, template: "<div *ngFor=\"let alert of alerts\" \n     [ngClass]=\"getAlertClass(alert)\" \n     role=\"alert\" \n     [id]=\"'alert-' + alert.message\"\n     (mouseenter)=\"onMouseEnter(alert)\" \n     (mouseleave)=\"onMouseLeave(alert)\">\n  <button type=\"button\" class=\"close\" (click)=\"closeAlert(alert)\" aria-label=\"Close\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n  <div class=\"alert-header\">\n    <span [ngClass]=\"getAlertIconClass(alert)\" class=\"alert-icon\"></span>\n    <strong>{{ alert.title }}</strong>\n  </div>\n  <div class=\"alert-body\">\n    {{ alert.message }}\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.alert-container{position:fixed;top:20px;right:20px;max-width:400px;margin:10px auto;padding:15px;border-radius:4px;background-color:#f8d7da;color:#721c24;word-wrap:break-word;opacity:0;transform:translateY(-20px);transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;align-items:flex-start;z-index:9999}.alert-container.show{opacity:1;transform:translateY(0)}.alert-container .close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;color:#000;opacity:.5;cursor:pointer;outline:none}.alert-container .close:hover{opacity:1}.alert-container .alert-header{display:flex;align-items:center;margin-bottom:5px}.alert-container .alert-icon{margin-right:10px;font-size:20px}.alert-container .alert-body{margin-left:30px}.alert-container .alert-icon.success-icon:before{content:\"\\2714\\fe0f\"}.alert-container .alert-icon.info-icon:before{content:\"\\2139\\fe0f\"}.alert-container .alert-icon.warning-icon:before{content:\"\\26a0\\fe0f\"}.alert-container .alert-icon.danger-icon:before{content:\"\\274c\"}.alert-success{background-color:#d4edda;color:#155724}.alert-info{background-color:#d8f4f7;color:#0c5460}.alert-warning{background-color:#fff3cd;color:#856404}.alert-danger{background-color:#fdd9d7;color:#721c24}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "lib-alert", inputs: { alerts: "alerts" }, ngImport: i0, template: "<div *ngFor=\"let alert of alerts\" \n     [ngClass]=\"getAlertClass(alert)\" \n     role=\"alert\" \n     [id]=\"'alert-' + alert.message\"\n     (mouseenter)=\"onMouseEnter(alert)\" \n     (mouseleave)=\"onMouseLeave(alert)\">\n  <button type=\"button\" class=\"close\" (click)=\"closeAlert(alert)\" aria-label=\"Close\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n  <div class=\"alert-header\">\n    <span [ngClass]=\"getAlertIconClass(alert)\" class=\"alert-icon\"></span>\n    <strong>{{ alert.title }}</strong>\n  </div>\n  <div class=\"alert-body\">\n    {{ alert.message }}\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.alert-container{position:fixed;top:20px;right:20px;max-width:400px;margin:10px auto;padding:15px;border-radius:4px;background-color:#f8d7da;color:#721c24;word-wrap:break-word;opacity:0;transform:translateY(-20px);transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;align-items:flex-start;z-index:9999}.alert-container.show{opacity:1;transform:translateY(0)}.alert-container .close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;color:#000;opacity:.5;cursor:pointer;outline:none}.alert-container .close:hover{opacity:1}.alert-container .alert-header{display:flex;align-items:center;margin-bottom:5px}.alert-container .alert-icon{margin-right:10px;font-size:20px}.alert-container .alert-body{margin-left:30px}.alert-container .alert-icon.success-icon:before{content:\"\\2714\\fe0f\"}.alert-container .alert-icon.info-icon:before{content:\"\\2139\\fe0f\"}.alert-container .alert-icon.warning-icon:before{content:\"\\26a0\\fe0f\"}.alert-container .alert-icon.danger-icon:before{content:\"\\274c\"}.alert-success{background-color:#d4edda;color:#155724}.alert-info{background-color:#d8f4f7;color:#0c5460}.alert-warning{background-color:#fff3cd;color:#856404}.alert-danger{background-color:#fdd9d7;color:#721c24}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -541,7 +322,7 @@ class BadgeComponent {
       {{ label }}
       <span class="badge">{{ badgeContent }}</span>
     </button>
-  `, isInline: true, styles: [".notification-button{position:relative;display:inline-block;width:155px;height:58px;padding:14px 29px 14px 36px;border-radius:6px;border:none;font-size:16px;font-weight:700;text-align:center;transition:opacity .3s}.badge{position:absolute;width:52px;height:32px;top:-15px;right:-20px;background-color:#dc3545;color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:Inter,sans-serif}.notification-button.hovered{opacity:.8}.notification-button.clicked{opacity:.6}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".notification-button{position:relative;display:inline-block;width:155px;height:58px;padding:14px 29px 14px 36px;border-radius:6px;border:none;font-size:16px;font-weight:700;text-align:center;transition:opacity .3s}.badge{position:absolute;width:52px;height:32px;top:-15px;right:-20px;background-color:#dc3545;color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:Inter,sans-serif}.notification-button.hovered{opacity:.8}.notification-button.clicked{opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
@@ -741,7 +522,7 @@ class ButtonComponent {
         {{ label }}
       </button>
     </ng-container>
-  `, isInline: true, styles: [".btn{padding:.5rem 1rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:24px;letter-spacing:.005em;text-align:left}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".btn{padding:.5rem 1rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;line-height:24px;letter-spacing:.005em;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -815,42 +596,364 @@ class BasicRegistrationComponent {
         if (!permissions || permissions.length === 0) {
             return true;
         }
-        try {
-            return this.authService.hasPermission(permissions);
+        try {
+            return this.authService.hasPermission(permissions);
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                console.error('Permission error:', error.message);
+            }
+            else {
+                console.error('Unknown error occurred during permission check');
+            }
+            return true;
+        }
+    }
+    handleCancel(event) {
+        this.cancelClick.emit(event);
+    }
+    handleSave(event) {
+        this.saveClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasicRegistrationComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BasicRegistrationComponent, selector: "argenta-basic-registration", inputs: { cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelPermissions: "cancelPermissions", savePermissions: "savePermissions" }, outputs: { cancelClick: "cancelClick", saveClick: "saveClick" }, ngImport: i0, template: "<div class=\"row row-car\">\n  <div class=\"card\">\n    <div class=\"card-content\" style=\"margin-top: 2.5rem;\">\n      <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n    </div>\n    <div class=\"card-footer\">\n      <div class=\"button-group\">\n        <argenta-custom-button\n          *ngIf=\"hasPermission(cancelPermissions)\"\n          [type]=\"'button'\"\n          [label]=\"cancelLabel\"\n          [btnClass]=\"ButtonClasses.Light\"\n          (onButtonClick)=\"handleCancel($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n        <argenta-custom-button\n          *ngIf=\"hasPermission(savePermissions)\"\n          [type]=\"'submit'\"\n          [label]=\"saveLabel\"\n          [btnClass]=\"ButtonClasses.Primary\"\n          (onButtonClick)=\"handleSave($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n      </div>\n    </div>\n  </div>      \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasicRegistrationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'argenta-basic-registration', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-car\">\n  <div class=\"card\">\n    <div class=\"card-content\" style=\"margin-top: 2.5rem;\">\n      <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n    </div>\n    <div class=\"card-footer\">\n      <div class=\"button-group\">\n        <argenta-custom-button\n          *ngIf=\"hasPermission(cancelPermissions)\"\n          [type]=\"'button'\"\n          [label]=\"cancelLabel\"\n          [btnClass]=\"ButtonClasses.Light\"\n          (onButtonClick)=\"handleCancel($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n        <argenta-custom-button\n          *ngIf=\"hasPermission(savePermissions)\"\n          [type]=\"'submit'\"\n          [label]=\"saveLabel\"\n          [btnClass]=\"ButtonClasses.Primary\"\n          (onButtonClick)=\"handleSave($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n      </div>\n    </div>\n  </div>      \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { cancelLabel: [{
+                type: Input
+            }], saveLabel: [{
+                type: Input
+            }], cancelPermissions: [{
+                type: Input
+            }], savePermissions: [{
+                type: Input
+            }], cancelClick: [{
+                type: Output
+            }], saveClick: [{
+                type: Output
+            }] } });
+
+class CalendarArgentaComponent {
+    constructor() {
+        this.id = 'argenta-calendar';
+        this.placeholder = 'Select a date';
+        this.label = 'Select a date';
+        this.minDate = null;
+        this.maxDate = null;
+        this.locale = 'pt'; // Suporte para diferentes idiomas
+        this.useTime = false; // Propriedade para definir se inclui hora
+        this.initialDate = null; // Propriedade para receber a data inicial
+        this.dateChange = new EventEmitter();
+        this.currentYear = new Date().getFullYear();
+        this.currentMonth = new Date().getMonth();
+        this.selectedDate = null;
+        this.isCalendarVisible = false;
+        this.inputDate = '';
+        this.invalidDate = false;
+        this.locales = {
+            en: {
+                months: [
+                    'January', 'February', 'March', 'April', 'May', 'June', 'July',
+                    'August', 'September', 'October', 'November', 'December'
+                ],
+                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+                invalidDateMessage: 'Invalid date. Please enter a date in the format dd/MM/yyyy'
+            },
+            pt: {
+                months: [
+                    'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho',
+                    'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+                ],
+                daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
+                invalidDateMessage: 'Data inválida. Por favor, insira uma data no formato dd/MM/yyyy'
+            },
+            es: {
+                months: [
+                    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
+                    'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+                ],
+                daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
+                invalidDateMessage: 'Fecha inválida. Por favor, ingrese una fecha en el formato dd/MM/yyyy'
+            }
+        };
+    }
+    ngOnInit() {
+        if (this.initialDate) {
+            // Se a initialDate for fornecida, usamos ela
+            this.updateCalendar(this.initialDate);
+        }
+        else {
+            // Caso contrário, usamos a data atual
+            const today = new Date();
+            this.selectedDate = today;
+            this.inputDate = this.formatDateForDisplay(today);
+            this.dateChange.emit(this.inputDate); // Emite a data inicial
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['initialDate'] && changes['initialDate'].currentValue) {
+            this.updateCalendar(changes['initialDate'].currentValue);
+        }
+    }
+    // Método para atualizar o calendário com a data passada
+    updateCalendar(dateString) {
+        const parsedDate = this.parseDate(dateString);
+        // Verifica se a data é válida
+        if (parsedDate !== null && this.validateDate(dateString)) {
+            this.selectedDate = parsedDate;
+            this.currentYear = parsedDate.getFullYear();
+            this.currentMonth = parsedDate.getMonth();
+            this.inputDate = this.formatDateForDisplay(parsedDate);
+            this.dateChange.emit(this.inputDate); // Emite a nova data
+            this.invalidDate = false; // Remove o status de data inválida
+        }
+        else {
+            this.invalidDate = true; // Marca a data como inválida
+            this.dateChange.emit('Data ou hora inválida'); // Emite mensagem de erro
+            console.log('Data ou hora inválida passada para o componente');
+        }
+    }
+    onInputChange(event) {
+        const inputValue = event.target.value;
+        this.inputDate = this.applyDateMask(inputValue);
+        // Validação para obrigar a hora quando useTime for verdadeiro
+        if (this.useTime) {
+            // Se a entrada não tiver o comprimento correto para data + hora
+            if (this.inputDate.length < 16) {
+                this.invalidDate = true;
+                this.dateChange.emit('Data ou hora inválida');
+                return;
+            }
+        }
+        // Somente validar a hora se o campo useTime estiver ativo e o formato estiver correto
+        if (this.useTime && this.inputDate.length >= 14) {
+            const [datePart, timePart] = this.inputDate.split(' ');
+            if (timePart) {
+                const [hourStr, minuteStr] = timePart.split(':');
+                const hour = Number(hourStr);
+                const minute = Number(minuteStr);
+                // Corrige somente se a hora/minuto forem inválidos
+                if (hour < 0 || hour > 23 || isNaN(hour)) {
+                    this.invalidDate = true;
+                    this.dateChange.emit('Hora inválida');
+                    return;
+                }
+                else if (minute < 0 || minute > 59 || isNaN(minute)) {
+                    this.invalidDate = true;
+                    this.dateChange.emit('Hora inválida');
+                    return;
+                }
+                else {
+                    this.invalidDate = false;
+                }
+            }
+        }
+        // Emitir a data quando for válida
+        if ((this.useTime && this.inputDate.length === 16) || (!this.useTime && this.inputDate.length === 10)) {
+            if (this.validateDate(this.inputDate)) {
+                this.invalidDate = false;
+                const parsedDate = this.parseDate(this.inputDate);
+                // Verificar se parsedDate não é nulo antes de acessar suas propriedades
+                if (parsedDate !== null) {
+                    this.currentYear = parsedDate.getFullYear();
+                    this.currentMonth = parsedDate.getMonth();
+                    this.selectedDate = parsedDate;
+                    // Formatar a data para dd/MM/yyyy - HH:mm
+                    const formattedDate = this.formatDateForEmit(parsedDate);
+                    this.dateChange.emit(formattedDate); // Emite a data válida com o hífen
+                }
+                else {
+                    console.log('Data inválida passada para o componente.');
+                    this.dateChange.emit('Data inválida');
+                }
+            }
+            else {
+                this.invalidDate = true;
+                this.dateChange.emit('Data inválida'); // Emite o evento com mensagem de erro
+            }
+        }
+    }
+    // Formatar a data e hora com hífen
+    formatDateForEmit(date) {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        let formattedDate = `${day}/${month}/${year}`;
+        if (this.useTime) {
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            // Adiciona o hífen entre a data e a hora
+            formattedDate += ` - ${hours}:${minutes}`;
+        }
+        return formattedDate;
+    }
+    applyDateMask(inputValue) {
+        let digitsOnly = inputValue.replace(/\D/g, '');
+        // Limita os dígitos com base no uso de hora
+        const maxLength = this.useTime ? 12 : 8;
+        if (digitsOnly.length > maxLength) {
+            digitsOnly = digitsOnly.substring(0, maxLength);
+        }
+        let day = digitsOnly.substring(0, 2);
+        let month = digitsOnly.substring(2, 4);
+        let year = digitsOnly.substring(4, 8);
+        let hour = digitsOnly.substring(8, 10);
+        let minute = digitsOnly.substring(10, 12);
+        let maskedDate = `${day}/${month}/${year}`;
+        if (this.useTime && hour && minute) {
+            maskedDate += ` ${hour}:${minute}`;
+        }
+        return maskedDate;
+    }
+    validateDate(inputValue) {
+        const [datePart, timePart] = inputValue.split(' ');
+        const [dayStr, monthStr, yearStr] = datePart.split('/');
+        const day = Number(dayStr);
+        const month = Number(monthStr);
+        const year = Number(yearStr);
+        // Validação de data
+        if (month < 1 || month > 12 || yearStr.length !== 4 || isNaN(year)) {
+            return false;
+        }
+        const lastDayOfMonth = new Date(year, month, 0).getDate();
+        if (day < 1 || day > lastDayOfMonth) {
+            return false;
+        }
+        // Validação de hora
+        if (this.useTime && timePart) {
+            const [hourStr, minuteStr] = timePart.split(':');
+            const hour = Number(hourStr);
+            const minute = Number(minuteStr);
+            if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || isNaN(hour) || isNaN(minute)) {
+                return false; // Hora ou minuto inválidos
+            }
+        }
+        return true;
+    }
+    parseDate(dateStr) {
+        const [datePart, timePart] = dateStr.split(' ');
+        const [day, month, year] = datePart.split('/').map(Number);
+        if (!day || !month || !year) {
+            return null;
+        }
+        const date = new Date(year, month - 1, day);
+        if (this.useTime && timePart) {
+            const [hour, minute] = timePart.split(':').map(Number);
+            date.setHours(hour || 0, minute || 0);
+        }
+        return date;
+    }
+    formatDateForDisplay(date) {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        let formattedDate = `${day}/${month}/${year}`;
+        if (this.useTime) {
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            formattedDate += ` ${hours}:${minutes}`;
+        }
+        return formattedDate;
+    }
+    toggleCalendar() {
+        this.isCalendarVisible = !this.isCalendarVisible;
+    }
+    selectDate(day) {
+        const date = new Date(this.currentYear, this.currentMonth, day);
+        this.inputDate = this.formatDateForDisplay(date);
+        this.selectedDate = date; // Armazena a data selecionada
+        this.dateChange.emit(this.inputDate); // Emite a data selecionada ao clicar no calendário
+        this.isCalendarVisible = false; // Fecha o calendário após a seleção
+    }
+    handleKeyPress(event) {
+        const charCode = event.key.charCodeAt(0);
+        if (charCode < 48 || charCode > 57) {
+            event.preventDefault();
+        }
+        if (this.inputDate.replace(/\D/g, '').length >= (this.useTime ? 12 : 8)) {
+            event.preventDefault();
+        }
+    }
+    get daysInMonth() {
+        const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay(); // Dia da semana do primeiro dia do mês
+        const totalDaysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate(); // Total de dias no mês
+        const daysArray = Array.from({ length: totalDaysInMonth }, (_, i) => i + 1); // Array com todos os dias do mês
+        const leadingEmptyDays = Array(firstDayOfMonth).fill(null); // Dias vazios antes do primeiro dia do mês
+        return [...leadingEmptyDays, ...daysArray]; // Retorna os dias vazios seguidos pelos dias do mês
+    }
+    get months() {
+        return this.locales[this.locale]?.months || this.locales['en'].months;
+    }
+    get daysOfWeek() {
+        return this.locales[this.locale]?.daysOfWeek || this.locales['en'].daysOfWeek;
+    }
+    prevMonth() {
+        if (this.currentMonth === 0) {
+            this.currentMonth = 11;
+            this.currentYear--;
         }
-        catch (error) {
-            if (error instanceof Error) {
-                console.error('Permission error:', error.message);
-            }
-            else {
-                console.error('Unknown error occurred during permission check');
-            }
-            return true;
+        else {
+            this.currentMonth--;
         }
     }
-    handleCancel(event) {
-        this.cancelClick.emit(event);
+    nextMonth() {
+        if (this.currentMonth === 11) {
+            this.currentMonth = 0;
+            this.currentYear++;
+        }
+        else {
+            this.currentMonth++;
+        }
     }
-    handleSave(event) {
-        this.saveClick.emit(event);
+    isSelected(day) {
+        if (!this.selectedDate)
+            return false;
+        const selectedDay = this.selectedDate.getDate();
+        const selectedMonth = this.selectedDate.getMonth();
+        const selectedYear = this.selectedDate.getFullYear();
+        return (selectedDay === day &&
+            selectedMonth === this.currentMonth &&
+            selectedYear === this.currentYear);
+    }
+    isToday(day) {
+        const today = new Date();
+        return (today.getFullYear() === this.currentYear &&
+            today.getMonth() === this.currentMonth &&
+            today.getDate() === day);
+    }
+    isDateDisabled(day) {
+        const date = new Date(this.currentYear, this.currentMonth, day);
+        if (this.minDate && date < this.minDate)
+            return true;
+        if (this.maxDate && date > this.maxDate)
+            return true;
+        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BasicRegistrationComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BasicRegistrationComponent, selector: "argenta-basic-registration", inputs: { cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelPermissions: "cancelPermissions", savePermissions: "savePermissions" }, outputs: { cancelClick: "cancelClick", saveClick: "saveClick" }, ngImport: i0, template: "<div class=\"row row-car\">\n  <div class=\"card\">\n    <div class=\"card-content\" style=\"margin-top: 2.5rem;\">\n      <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n    </div>\n    <div class=\"card-footer\">\n      <div class=\"button-group\">\n        <argenta-custom-button\n          *ngIf=\"hasPermission(cancelPermissions)\"\n          [type]=\"'button'\"\n          [label]=\"cancelLabel\"\n          [btnClass]=\"ButtonClasses.Light\"\n          (onButtonClick)=\"handleCancel($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n        <argenta-custom-button\n          *ngIf=\"hasPermission(savePermissions)\"\n          [type]=\"'submit'\"\n          [label]=\"saveLabel\"\n          [btnClass]=\"ButtonClasses.Primary\"\n          (onButtonClick)=\"handleSave($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n      </div>\n    </div>\n  </div>      \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"], dependencies: [{ kind: "directive", type: i2$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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" }, outputs: { dateChange: "dateChange" }, 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]=\"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    <!-- \u00CDcone de calend\u00E1rio dentro do input -->\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <!-- Mensagem de erro estilo bal\u00E3ozinho -->\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <!-- Mostra a parte de 'HH:mm' apenas se useTime for verdadeiro -->\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.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              <!-- Somente permite clique em dias v\u00E1lidos -->\n              {{ day ? day : \"\" }}\n              <!-- Exibe o dia se for v\u00E1lido, sen\u00E3o exibe vazio -->\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:#00444c;color:#fff;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:#2ca58d}.calendar .calendar-header span{font-size:1.4rem;color:#00444c;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:#2ca58d;color:#fff}.calendar .calendar-body .calendar-days span.selected{background-color:#00444c;color:#fff}.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:#2ca58d;color:#fff}.custom-input{font-family:Inter,Arial,sans-serif;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::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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}\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: "component", type: i1$1.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: BasicRegistrationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarArgentaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-basic-registration', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row-car\">\n  <div class=\"card\">\n    <div class=\"card-content\" style=\"margin-top: 2.5rem;\">\n      <ng-content></ng-content> <!-- Permite a inclus\u00E3o de conte\u00FAdo din\u00E2mico -->\n    </div>\n    <div class=\"card-footer\">\n      <div class=\"button-group\">\n        <argenta-custom-button\n          *ngIf=\"hasPermission(cancelPermissions)\"\n          [type]=\"'button'\"\n          [label]=\"cancelLabel\"\n          [btnClass]=\"ButtonClasses.Light\"\n          (onButtonClick)=\"handleCancel($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n        <argenta-custom-button\n          *ngIf=\"hasPermission(savePermissions)\"\n          [type]=\"'submit'\"\n          [label]=\"saveLabel\"\n          [btnClass]=\"ButtonClasses.Primary\"\n          (onButtonClick)=\"handleSave($event)\"\n          class=\"argenta-custom-button\">\n        </argenta-custom-button>\n      </div>\n    </div>\n  </div>      \n</div>\n", styles: ["@charset \"UTF-8\";.card{border-radius:10px;padding:1rem;background-color:#fff;border:none}.card-footer{display:flex;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-radius:.25rem}.button-group{display:flex;gap:1rem;height:3rem}.argenta-custom-button{height:100%}.row-car{margin-left:-.8rem;margin-right:-.8rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { cancelLabel: [{
+            args: [{ selector: 'argenta-calendar', 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]=\"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    <!-- \u00CDcone de calend\u00E1rio dentro do input -->\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <!-- Mensagem de erro estilo bal\u00E3ozinho -->\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <!-- Mostra a parte de 'HH:mm' apenas se useTime for verdadeiro -->\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.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              <!-- Somente permite clique em dias v\u00E1lidos -->\n              {{ day ? day : \"\" }}\n              <!-- Exibe o dia se for v\u00E1lido, sen\u00E3o exibe vazio -->\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:#00444c;color:#fff;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:#2ca58d}.calendar .calendar-header span{font-size:1.4rem;color:#00444c;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:#2ca58d;color:#fff}.calendar .calendar-body .calendar-days span.selected{background-color:#00444c;color:#fff}.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:#2ca58d;color:#fff}.custom-input{font-family:Inter,Arial,sans-serif;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::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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}\n"] }]
+        }], propDecorators: { id: [{
                 type: Input
-            }], saveLabel: [{
+            }], placeholder: [{
                 type: Input
-            }], cancelPermissions: [{
+            }], label: [{
                 type: Input
-            }], savePermissions: [{
+            }], minDate: [{
                 type: Input
-            }], cancelClick: [{
-                type: Output
-            }], saveClick: [{
+            }], maxDate: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], useTime: [{
+                type: Input
+            }], initialDate: [{
+                type: Input
+            }], dateChange: [{
                 type: Output
             }] } });
 
@@ -947,7 +1050,7 @@ class CheckboxComponent {
       />
       <label class="form-check-label" [for]="id">{{ label }}</label>
     </div>
-  `, isInline: true, styles: [".form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -1079,13 +1182,13 @@ class ConfirmationComponent {
     ngOnDestroy() {
         // Clear any subscriptions if there were any
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationComponent, deps: [{ token: i1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmationComponent, selector: "app-confirmation", inputs: { title: "title", message: "message", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText" }, ngImport: i0, template: "<div class=\"modal-header\">\n  <h5 class=\"modal-title\" id=\"confirmationModalLabel\">{{ title }}</h5>\n</div>\n<div class=\"modal-body\">\n  <p>{{ message }}</p>\n</div>\n<div class=\"modal-footer d-flex justify-content-end\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\">{{ cancelButtonText }}</button>\n  <button type=\"button\" class=\"btn btn-primary ms-2\" (click)=\"confirm()\" appAutofocus>{{ confirmButtonText }}</button>\n</div>\n", styles: ["@charset \"UTF-8\";.modal-header{border-bottom:none}.modal-footer{border-top:none;padding-top:0;padding-bottom:15px;display:flex;justify-content:flex-end}.modal-title{font-family:Inter,sans-serif;color:#151920;font-size:19px}.modal-body{text-align:left}.modal-body p{color:#15192080;font-family:Inter,sans-serif;font-size:14px}.btn-primary{font-family:Inter,sans-serif;background-color:#00444c;border:1px solid #00444C;border-radius:8px;width:130px;height:42px;color:#fff;transition:opacity .3s,transform .1s}.btn-primary:hover{opacity:.8}.btn-primary:active{transform:scale(.98);background-color:#00444c;border:1px solid #00444C}.btn-secondary{font-family:Inter,sans-serif;background-color:transparent;border-radius:8px;width:96px;height:42px;border:1px solid rgba(21,25,32,.5019607843);color:#15192080;transition:opacity .3s,transform .1s;margin-right:8px}.btn-secondary:hover{opacity:.8}.btn-secondary:active{transform:scale(.98)}.ms-2{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[appAutofocus]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-header\">\n  <h5 class=\"modal-title\" id=\"confirmationModalLabel\">{{ title }}</h5>\n</div>\n<div class=\"modal-body\">\n  <p>{{ message }}</p>\n</div>\n<div class=\"modal-footer d-flex justify-content-end\">\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\">{{ cancelButtonText }}</button>\n  <button type=\"button\" class=\"btn btn-primary ms-2\" (click)=\"confirm()\" appAutofocus>{{ confirmButtonText }}</button>\n</div>\n", styles: ["@charset \"UTF-8\";.modal-header{border-bottom:none}.modal-footer{border-top:none;padding-top:0;padding-bottom:15px;display:flex;justify-content:flex-end}.modal-title{font-family:Inter,sans-serif;color:#151920;font-size:19px}.modal-body{text-align:left}.modal-body p{color:#15192080;font-family:Inter,sans-serif;font-size:14px}.btn-primary{font-family:Inter,sans-serif;background-color:#00444c;border:1px solid #00444C;border-radius:8px;width:130px;height:42px;color:#fff;transition:opacity .3s,transform .1s}.btn-primary:hover{opacity:.8}.btn-primary:active{transform:scale(.98);background-color:#00444c;border:1px solid #00444C}.btn-secondary{font-family:Inter,sans-serif;background-color:transparent;border-radius:8px;width:96px;height:42px;border:1px solid rgba(21,25,32,.5019607843);color:#15192080;transition:opacity .3s,transform .1s;margin-right:8px}.btn-secondary:hover{opacity:.8}.btn-secondary:active{transform:scale(.98)}.ms-2{margin-left:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { title: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -1133,7 +1236,7 @@ class CustomPaginationComponent {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomPaginationComponent, selector: "custom-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", showPageInfo: "showPageInfo" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav *ngIf=\"totalPages > 0\">\n  <ul class=\"pagination\">\n    <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n      <a class=\"page-link\" (click)=\"changePage(1)\">&laquo;&laquo;</a>\n    </li>\n    <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n      <a class=\"page-link\" (click)=\"changePage(currentPage - 1)\">&laquo;</a>\n    </li>\n    <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n      <a class=\"page-link\" (click)=\"changePage(page)\">{{ page }}</a>\n    </li>\n    <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n      <a class=\"page-link\" (click)=\"changePage(currentPage + 1)\">&raquo;</a>\n    </li>\n    <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n      <a class=\"page-link\" (click)=\"changePage(totalPages)\">&raquo;&raquo;</a>\n    </li>\n  </ul>\n</nav>\n", styles: ["@charset \"UTF-8\";.pagination{display:flex;list-style:none;padding:0;margin:1rem 0;justify-content:center;align-items:center}.page-item{margin:0 .25rem}.page-item.disabled .page-link{cursor:not-allowed;opacity:.5}.page-item.active .page-link{background-color:#00444c;color:#fff}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:#00444c;cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#e5e5e5}.page-info{margin-left:1rem;font-size:1rem;color:#00444c;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomPaginationComponent, selector: "custom-pagination", inputs: { totalItems: "totalItems", itemsPerPage: "itemsPerPage", currentPage: "currentPage", showPageInfo: "showPageInfo" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav *ngIf=\"totalPages > 0\">\n  <ul class=\"pagination\">\n    <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n      <a class=\"page-link\" (click)=\"changePage(1)\">&laquo;&laquo;</a>\n    </li>\n    <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n      <a class=\"page-link\" (click)=\"changePage(currentPage - 1)\">&laquo;</a>\n    </li>\n    <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n      <a class=\"page-link\" (click)=\"changePage(page)\">{{ page }}</a>\n    </li>\n    <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n      <a class=\"page-link\" (click)=\"changePage(currentPage + 1)\">&raquo;</a>\n    </li>\n    <li class=\"page-item\" [class.disabled]=\"currentPage === totalPages\">\n      <a class=\"page-link\" (click)=\"changePage(totalPages)\">&raquo;&raquo;</a>\n    </li>\n  </ul>\n</nav>\n", styles: ["@charset \"UTF-8\";.pagination{display:flex;list-style:none;padding:0;margin:1rem 0;justify-content:center;align-items:center}.page-item{margin:0 .25rem}.page-item.disabled .page-link{cursor:not-allowed;opacity:.5}.page-item.active .page-link{background-color:#00444c;color:#fff}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:#00444c;cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#e5e5e5}.page-info{margin-left:1rem;font-size:1rem;color:#00444c;font-weight:700}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomPaginationComponent, decorators: [{
             type: Component,
@@ -1180,7 +1283,7 @@ class CustomSwitchComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomSwitchComponent, selector: "argenta-custom-switch", inputs: { checked: "checked", label: "label", permissions: "permissions" }, outputs: { switchChange: "switchChange" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"form-check form-switch\">\n    <input \n      class=\"form-check-input\" \n      type=\"checkbox\" \n      [checked]=\"checked\" \n      (change)=\"toggleSwitch()\" \n      id=\"flexSwitchCheckDefault\" \n    />\n    <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n      {{ label }}\n    </label>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer;position:relative;appearance:none;background-color:#e5e5e5;border:2px solid #00444C;border-radius:34px;outline:none;transition:background-color .3s,border-color .3s}.form-check-input:focus{outline:none;box-shadow:none}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:3px;left:3px;transition:transform .3s,background-color .3s}.form-check-input:checked:before{transform:translate(26px);background-color:#fff}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomSwitchComponent, selector: "argenta-custom-switch", inputs: { checked: "checked", label: "label", permissions: "permissions" }, outputs: { switchChange: "switchChange" }, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n  <div class=\"form-check form-switch\">\n    <input \n      class=\"form-check-input\" \n      type=\"checkbox\" \n      [checked]=\"checked\" \n      (change)=\"toggleSwitch()\" \n      id=\"flexSwitchCheckDefault\" \n    />\n    <label class=\"form-check-label\" for=\"flexSwitchCheckDefault\">\n      {{ label }}\n    </label>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.form-check{display:flex;align-items:center}.form-check-input{width:60px;height:34px;margin-right:10px;cursor:pointer;position:relative;appearance:none;background-color:#e5e5e5;border:2px solid #00444C;border-radius:34px;outline:none;transition:background-color .3s,border-color .3s}.form-check-input:focus{outline:none;box-shadow:none}.form-check-input:checked{background-color:#00444c;border-color:#00444c}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:#00444c;border-radius:50%;top:3px;left:3px;transition:transform .3s,background-color .3s}.form-check-input:checked:before{transform:translate(26px);background-color:#fff}.form-check-label{color:#00444c;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:24px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomSwitchComponent, decorators: [{
             type: Component,
@@ -1242,7 +1345,7 @@ class FileUploadComponent {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileUploadComponent, selector: "argenta-file-upload", inputs: { accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", labelText: "labelText", permissions: "permissions" }, outputs: { fileUploaded: "fileUploaded" }, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"file-upload-container\">\n  <label for=\"fileUpload\" class=\"form-label\">{{ labelText }}</label> \n  <input\n    type=\"file\"\n    id=\"fileUpload\"\n    class=\"form-control\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    (change)=\"onFileChange($event)\" \n  />\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.file-upload-container{margin-top:10px;font-family:Inter,Arial,sans-serif}.file-upload-container .form-label{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem;color:#333}.file-upload-container .form-control[type=file]{padding:10px;border-radius:5px;border:1px solid #ced4da;font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.file-upload-container .form-control[type=file]::file-selector-button{padding:.5rem 1rem;margin-right:10px;border:1px solid #ced4da;border-radius:5px;background-color:#f8f9fa;color:#000;cursor:pointer;transition:background-color .2s}.file-upload-container .form-control[type=file]::file-selector-button:hover{background-color:#e2e6ea}.file-upload-container .form-text{color:#6c757d;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileUploadComponent, selector: "argenta-file-upload", inputs: { accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", labelText: "labelText", permissions: "permissions" }, outputs: { fileUploaded: "fileUploaded" }, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"file-upload-container\">\n  <label for=\"fileUpload\" class=\"form-label\">{{ labelText }}</label> \n  <input\n    type=\"file\"\n    id=\"fileUpload\"\n    class=\"form-control\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    (change)=\"onFileChange($event)\" \n  />\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.file-upload-container{margin-top:10px;font-family:Inter,Arial,sans-serif}.file-upload-container .form-label{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem;color:#333}.file-upload-container .form-control[type=file]{padding:10px;border-radius:5px;border:1px solid #ced4da;font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.file-upload-container .form-control[type=file]::file-selector-button{padding:.5rem 1rem;margin-right:10px;border:1px solid #ced4da;border-radius:5px;background-color:#f8f9fa;color:#000;cursor:pointer;transition:background-color .2s}.file-upload-container .form-control[type=file]::file-selector-button:hover{background-color:#e2e6ea}.file-upload-container .form-text{color:#6c757d;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -1544,55 +1647,327 @@ class InputComponent {
             remainder = 0;
         return remainder === parseInt(cpf.substring(10, 11));
     }
-    validateCnpj(cnpj) {
-        if (cnpj.length !== 14)
-            return false;
-        let length = cnpj.length - 2;
-        let numbers = cnpj.substring(0, length);
-        let digits = cnpj.substring(length);
-        let sum = 0, pos = length - 7;
-        for (let i = length; i >= 1; i--) {
-            sum += parseInt(numbers.charAt(length - i)) * pos--;
-            if (pos < 2)
-                pos = 9;
-        }
-        let result = sum % 11 < 2 ? 0 : 11 - sum % 11;
-        if (result !== parseInt(digits.charAt(0)))
-            return false;
-        length = length + 1;
-        numbers = cnpj.substring(0, length);
-        sum = 0;
-        pos = length - 7;
-        for (let i = length; i >= 1; i--) {
-            sum += parseInt(numbers.charAt(length - i)) * pos--;
-            if (pos < 2)
-                pos = 9;
+    validateCnpj(cnpj) {
+        if (cnpj.length !== 14)
+            return false;
+        let length = cnpj.length - 2;
+        let numbers = cnpj.substring(0, length);
+        let digits = cnpj.substring(length);
+        let sum = 0, pos = length - 7;
+        for (let i = length; i >= 1; i--) {
+            sum += parseInt(numbers.charAt(length - i)) * pos--;
+            if (pos < 2)
+                pos = 9;
+        }
+        let result = sum % 11 < 2 ? 0 : 11 - sum % 11;
+        if (result !== parseInt(digits.charAt(0)))
+            return false;
+        length = length + 1;
+        numbers = cnpj.substring(0, length);
+        sum = 0;
+        pos = length - 7;
+        for (let i = length; i >= 1; i--) {
+            sum += parseInt(numbers.charAt(length - i)) * pos--;
+            if (pos < 2)
+                pos = 9;
+        }
+        result = sum % 11 < 2 ? 0 : 11 - sum % 11;
+        return result === parseInt(digits.charAt(1));
+    }
+    validateCep(cep) {
+        return /^\d{8}$/.test(cep); // Valida apenas números, sem considerar a máscara
+    }
+    clearAndShowValidationError(message) {
+        this.value = ''; // Limpa o valor do ngModel
+        this.onChangeCallback(this.value); // Atualiza o ngModel com o valor limpo
+        this.errorMessage = message;
+        this.showErrorModal = true;
+    }
+    closeModal() {
+        this.showErrorModal = false;
+        this.errorMessage = '';
+    }
+    onFocus(event) {
+        this.focusEvent.emit(event);
+    }
+    onBlur(event) {
+        this.onTouchedCallback();
+        this.blurEvent.emit(event);
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    hasPermission() {
+        if (!this.permissions || this.permissions.length === 0) {
+            return true;
+        }
+        try {
+            return this.authService.hasPermission(this.permissions);
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                console.error('Permission error:', error.message);
+            }
+            else {
+                console.error('Unknown error occurred during permission check');
+            }
+            return true;
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "argenta-custom-input", inputs: { label: "label", placeholder: "placeholder", id: "id", type: "type", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", minlength: "minlength", required: "required", pattern: "pattern", autofocus: "autofocus", useCpfMask: "useCpfMask", useCnpjMask: "useCnpjMask", useCepMask: "useCepMask", onlyNumbers: "onlyNumbers", validateInput: "validateInput", labelFontWeight: "labelFontWeight", permissions: "permissions", useMoneyMask: "useMoneyMask", currencyCode: "currencyCode", displayCurrencySymbol: "displayCurrencySymbol" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyupEvent: "keyupEvent", keydownEvent: "keydownEvent", keypressEvent: "keypressEvent" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <input [type]=\"getInputType()\"\n         class=\"form-control custom-input\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         [(ngModel)]=\"value\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         (keyup)=\"keyupEvent.emit($event)\"\n         (keydown)=\"onKeyDown($event)\"\n         (keypress)=\"keypressEvent.emit($event)\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.maxlength]=\"maxlength\"\n         [attr.minlength]=\"minlength\"\n         [required]=\"required\"\n         [attr.pattern]=\"pattern\"\n         [autofocus]=\"autofocus\"\n         [cpfMask]=\"useCpfMask\"  \n         [cnpjMask]=\"useCnpjMask\" \n         [cepMask]=\"useCepMask\">\n\n  <!-- Modal para exibir mensagens de erro -->\n  <div class=\"modal-overlay\" *ngIf=\"showErrorModal\">\n    <div class=\"modal-content\">\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\n      <p>{{ errorMessage }}</p>\n      <button class=\"btn-ok\" (click)=\"closeModal()\">OK</button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:25px 30px;border-radius:8px;width:360px;text-align:center;position:relative;box-shadow:0 4px 12px #0003}.close{position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;color:#555;transition:color .3s}.close:hover{color:#f44336}.btn-ok{margin-top:20px;padding:8px 20px;border:none;background-color:#00444c;color:#fff;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s,transform .2s}.btn-ok:hover{background-color:#00363d;transform:scale(1.05)}.btn-ok:active{transform:scale(.98)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CepMaskDirective, selector: "[cepMask]", inputs: ["cepMask"] }, { kind: "directive", type: CnpjMaskDirective, selector: "[cnpjMask]", inputs: ["cnpjMask"] }, { kind: "directive", type: CpfMaskDirective, selector: "[cpfMask]", inputs: ["cpfMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'argenta-custom-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <input [type]=\"getInputType()\"\n         class=\"form-control custom-input\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         [(ngModel)]=\"value\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         (keyup)=\"keyupEvent.emit($event)\"\n         (keydown)=\"onKeyDown($event)\"\n         (keypress)=\"keypressEvent.emit($event)\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.maxlength]=\"maxlength\"\n         [attr.minlength]=\"minlength\"\n         [required]=\"required\"\n         [attr.pattern]=\"pattern\"\n         [autofocus]=\"autofocus\"\n         [cpfMask]=\"useCpfMask\"  \n         [cnpjMask]=\"useCnpjMask\" \n         [cepMask]=\"useCepMask\">\n\n  <!-- Modal para exibir mensagens de erro -->\n  <div class=\"modal-overlay\" *ngIf=\"showErrorModal\">\n    <div class=\"modal-content\">\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\n      <p>{{ errorMessage }}</p>\n      <button class=\"btn-ok\" (click)=\"closeModal()\">OK</button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:25px 30px;border-radius:8px;width:360px;text-align:center;position:relative;box-shadow:0 4px 12px #0003}.close{position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;color:#555;transition:color .3s}.close:hover{color:#f44336}.btn-ok{margin-top:20px;padding:8px 20px;border:none;background-color:#00444c;color:#fff;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s,transform .2s}.btn-ok:hover{background-color:#00363d;transform:scale(1.05)}.btn-ok:active{transform:scale(.98)}\n"] }]
+        }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], useCpfMask: [{
+                type: Input
+            }], useCnpjMask: [{
+                type: Input
+            }], useCepMask: [{
+                type: Input
+            }], onlyNumbers: [{
+                type: Input
+            }], validateInput: [{
+                type: Input
+            }], labelFontWeight: [{
+                type: Input
+            }], permissions: [{
+                type: Input
+            }], useMoneyMask: [{
+                type: Input
+            }], currencyCode: [{
+                type: Input
+            }], displayCurrencySymbol: [{
+                type: Input
+            }], inputEvent: [{
+                type: Output
+            }], changeEvent: [{
+                type: Output
+            }], focusEvent: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }], keyupEvent: [{
+                type: Output
+            }], keydownEvent: [{
+                type: Output
+            }], keypressEvent: [{
+                type: Output
+            }] } });
+
+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);
+    }
+    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));
+                if (!existsInList) {
+                    const newItem = {
+                        [this.bindValue]: item[this.bindValue] || item,
+                        [this.bindLabel]: item[this.bindLabel] || item
+                    };
+                    this.data.push(newItem);
+                    this.allItems.push(newItem);
+                }
+            });
+            this.items = of(this.allItems);
         }
-        result = sum % 11 < 2 ? 0 : 11 - sum % 11;
-        return result === parseInt(digits.charAt(1));
     }
-    validateCep(cep) {
-        return /^\d{8}$/.test(cep); // Valida apenas números, sem considerar a máscara
+    onFocus() {
+        this.isCourseEntered = true;
     }
-    clearAndShowValidationError(message) {
-        this.value = ''; // Limpa o valor do ngModel
-        this.onChangeCallback(this.value); // Atualiza o ngModel com o valor limpo
-        this.errorMessage = message;
-        this.showErrorModal = true;
+    onBlur() {
+        this.isCourseEntered = false;
     }
-    closeModal() {
-        this.showErrorModal = false;
-        this.errorMessage = '';
+    onKeyUp(event) {
+        this.keyupEvent.emit(event);
     }
-    onFocus(event) {
-        this.focusEvent.emit(event);
+    onSelectedChange(event) {
+        const previousSelected = this.selected;
+        if (this.multiple) {
+            this.selected = event;
+        }
+        else {
+            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
+                }
+            });
+        }
     }
-    onBlur(event) {
-        this.onTouchedCallback();
-        this.blurEvent.emit(event);
+    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);
+        }
     }
     writeValue(value) {
-        this.value = value;
+        if (this.multiple) {
+            this.selected = value || [];
+        }
+        else {
+            this.selected = value || null;
+        }
+        this.addSelectedItemsToData();
     }
     registerOnChange(fn) {
         this.onChangeCallback = fn;
@@ -1601,7 +1976,7 @@ class InputComponent {
         this.onTouchedCallback = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        // No implementation needed for this example
     }
     hasPermission() {
         if (!this.permissions || this.permissions.length === 0) {
@@ -1620,83 +1995,88 @@ class InputComponent {
             return true;
         }
     }
-    ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InputComponent, selector: "argenta-custom-input", inputs: { label: "label", placeholder: "placeholder", id: "id", type: "type", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", minlength: "minlength", required: "required", pattern: "pattern", autofocus: "autofocus", useCpfMask: "useCpfMask", useCnpjMask: "useCnpjMask", useCepMask: "useCepMask", onlyNumbers: "onlyNumbers", validateInput: "validateInput", labelFontWeight: "labelFontWeight", permissions: "permissions", useMoneyMask: "useMoneyMask", currencyCode: "currencyCode", displayCurrencySymbol: "displayCurrencySymbol" }, outputs: { inputEvent: "inputEvent", changeEvent: "changeEvent", focusEvent: "focusEvent", blurEvent: "blurEvent", keyupEvent: "keyupEvent", keydownEvent: "keydownEvent", keypressEvent: "keypressEvent" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i2.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: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputComponent),
+                useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <input [type]=\"getInputType()\"\n         class=\"form-control custom-input\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         [(ngModel)]=\"value\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         (keyup)=\"keyupEvent.emit($event)\"\n         (keydown)=\"onKeyDown($event)\"\n         (keypress)=\"keypressEvent.emit($event)\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.maxlength]=\"maxlength\"\n         [attr.minlength]=\"minlength\"\n         [required]=\"required\"\n         [attr.pattern]=\"pattern\"\n         [autofocus]=\"autofocus\"\n         [cpfMask]=\"useCpfMask\"  \n         [cnpjMask]=\"useCnpjMask\" \n         [cepMask]=\"useCepMask\">\n\n  <!-- Modal para exibir mensagens de erro -->\n  <div class=\"modal-overlay\" *ngIf=\"showErrorModal\">\n    <div class=\"modal-content\">\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\n      <p>{{ errorMessage }}</p>\n      <button class=\"btn-ok\" (click)=\"closeModal()\">OK</button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:25px 30px;border-radius:8px;width:360px;text-align:center;position:relative;box-shadow:0 4px 12px #0003}.close{position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;color:#555;transition:color .3s}.close:hover{color:#f44336}.btn-ok{margin-top:20px;padding:8px 20px;border:none;background-color:#00444c;color:#fff;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s,transform .2s}.btn-ok:hover{background-color:#00363d;transform:scale(1.05)}.btn-ok:active{transform:scale(.98)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CepMaskDirective, selector: "[cepMask]", inputs: ["cepMask"] }, { kind: "directive", type: CnpjMaskDirective, selector: "[cnpjMask]", inputs: ["cnpjMask"] }, { kind: "directive", type: CpfMaskDirective, selector: "[cpfMask]", inputs: ["cpfMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-custom-input', providers: [
+            args: [{ selector: 'argenta-custom-multi-select', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputComponent),
+                            useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <input [type]=\"getInputType()\"\n         class=\"form-control custom-input\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         [(ngModel)]=\"value\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         (keyup)=\"keyupEvent.emit($event)\"\n         (keydown)=\"onKeyDown($event)\"\n         (keypress)=\"keypressEvent.emit($event)\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.maxlength]=\"maxlength\"\n         [attr.minlength]=\"minlength\"\n         [required]=\"required\"\n         [attr.pattern]=\"pattern\"\n         [autofocus]=\"autofocus\"\n         [cpfMask]=\"useCpfMask\"  \n         [cnpjMask]=\"useCnpjMask\" \n         [cepMask]=\"useCepMask\">\n\n  <!-- Modal para exibir mensagens de erro -->\n  <div class=\"modal-overlay\" *ngIf=\"showErrorModal\">\n    <div class=\"modal-content\">\n      <span class=\"close\" (click)=\"closeModal()\">&times;</span>\n      <p>{{ errorMessage }}</p>\n      <button class=\"btn-ok\" (click)=\"closeModal()\">OK</button>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:25px 30px;border-radius:8px;width:360px;text-align:center;position:relative;box-shadow:0 4px 12px #0003}.close{position:absolute;top:10px;right:15px;cursor:pointer;font-size:20px;color:#555;transition:color .3s}.close:hover{color:#f44336}.btn-ok{margin-top:20px;padding:8px 20px;border:none;background-color:#00444c;color:#fff;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s,transform .2s}.btn-ok:hover{background-color:#00363d;transform:scale(1.05)}.btn-ok:active{transform:scale(.98)}\n"] }]
-        }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { label: [{
-                type: Input
-            }], placeholder: [{
+                    ], 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\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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.HttpClient }]; }, propDecorators: { label: [{
                 type: Input
-            }], id: [{
+            }], data: [{
                 type: Input
-            }], type: [{
+            }], placeholder: [{
                 type: Input
-            }], disabled: [{
+            }], selected: [{
                 type: Input
-            }], readonly: [{
+            }], id: [{
                 type: Input
-            }], maxlength: [{
+            }], bindLabel: [{
                 type: Input
-            }], minlength: [{
+            }], bindValue: [{
                 type: Input
-            }], required: [{
+            }], permissions: [{
                 type: Input
-            }], pattern: [{
+            }], closeOnSelect: [{
                 type: Input
-            }], autofocus: [{
+            }], searchUrl: [{
                 type: Input
-            }], useCpfMask: [{
+            }], multiple: [{
                 type: Input
-            }], useCnpjMask: [{
+            }], searchParams: [{
                 type: Input
-            }], useCepMask: [{
+            }], keyupEvent: [{
+                type: Output
+            }] } });
+
+class MultiSelectCategoryComponent {
+    constructor() {
+        // Inputs para receber dados dinâmicos de diferentes categorias
+        this.unidadesOrganizacionais = [];
+        this.clientes = [];
+        this.empresas = [];
+        this.usuarios = [];
+        // Inputs para permissões específicas de cada categoria
+        this.permissoesUnidades = [];
+        this.permissoesClientes = [];
+        this.permissoesEmpresas = [];
+        this.permissoesUsuarios = [];
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectCategoryComponent, selector: "argenta-multi-select-category", inputs: { unidadesOrganizacionais: "unidadesOrganizacionais", clientes: "clientes", empresas: "empresas", usuarios: "usuarios", permissoesUnidades: "permissoesUnidades", permissoesClientes: "permissoesClientes", permissoesEmpresas: "permissoesEmpresas", permissoesUsuarios: "permissoesUsuarios" }, ngImport: i0, template: "<div class=\"multi-select-category\">\n  <div class=\"row\">\n    <!-- Primeira linha: Usu\u00E1rio e Cliente -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Usu\u00E1rios\"\n        [data]=\"usuarios\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUsuarios\"\n        placeholder=\"Selecione Usu\u00E1rios\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Clientes\"\n        [data]=\"clientes\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesClientes\"\n        placeholder=\"Selecione Clientes\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n\n  <div class=\"row\">\n    <!-- Segunda linha: Empresa e Unidade Organizacional -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Empresas\"\n        [data]=\"empresas\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesEmpresas\"\n        placeholder=\"Selecione Empresas\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Unidades Organizacionais\"\n        [data]=\"unidadesOrganizacionais\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUnidades\"\n        placeholder=\"Selecione Unidades Organizacionais\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n</div>\n", styles: [".multi-select-category{display:flex;flex-direction:column;gap:1rem}.multi-select-category .row{display:flex;gap:1rem}.multi-select-category .col{flex:1}\n"], dependencies: [{ kind: "component", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: ["label", "data", "placeholder", "selected", "id", "bindLabel", "bindValue", "permissions", "closeOnSelect", "searchUrl", "multiple", "searchParams"], outputs: ["keyupEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'argenta-multi-select-category', template: "<div class=\"multi-select-category\">\n  <div class=\"row\">\n    <!-- Primeira linha: Usu\u00E1rio e Cliente -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Usu\u00E1rios\"\n        [data]=\"usuarios\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUsuarios\"\n        placeholder=\"Selecione Usu\u00E1rios\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Clientes\"\n        [data]=\"clientes\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesClientes\"\n        placeholder=\"Selecione Clientes\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n\n  <div class=\"row\">\n    <!-- Segunda linha: Empresa e Unidade Organizacional -->\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Empresas\"\n        [data]=\"empresas\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesEmpresas\"\n        placeholder=\"Selecione Empresas\">\n      </argenta-custom-multi-select>\n    </div>\n\n    <div class=\"col\">\n      <argenta-custom-multi-select\n        label=\"Unidades Organizacionais\"\n        [data]=\"unidadesOrganizacionais\"\n        bindLabel=\"nome\"\n        bindValue=\"id\"\n        [permissions]=\"permissoesUnidades\"\n        placeholder=\"Selecione Unidades Organizacionais\">\n      </argenta-custom-multi-select>\n    </div>\n  </div>\n</div>\n", styles: [".multi-select-category{display:flex;flex-direction:column;gap:1rem}.multi-select-category .row{display:flex;gap:1rem}.multi-select-category .col{flex:1}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { unidadesOrganizacionais: [{
                 type: Input
-            }], onlyNumbers: [{
+            }], clientes: [{
                 type: Input
-            }], validateInput: [{
+            }], empresas: [{
                 type: Input
-            }], labelFontWeight: [{
+            }], usuarios: [{
                 type: Input
-            }], permissions: [{
+            }], permissoesUnidades: [{
                 type: Input
-            }], useMoneyMask: [{
+            }], permissoesClientes: [{
                 type: Input
-            }], currencyCode: [{
+            }], permissoesEmpresas: [{
                 type: Input
-            }], displayCurrencySymbol: [{
+            }], permissoesUsuarios: [{
                 type: Input
-            }], inputEvent: [{
-                type: Output
-            }], changeEvent: [{
-                type: Output
-            }], focusEvent: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output
-            }], keyupEvent: [{
-                type: Output
-            }], keydownEvent: [{
-                type: Output
-            }], keypressEvent: [{
-                type: Output
             }] } });
 
 class RadioComponent {
@@ -1757,7 +2137,7 @@ class RadioComponent {
              [disabled]="disabled">
       <label class="form-check-label" [for]="id">{{ label }}</label>
     </div>
-  `, isInline: true, styles: [".form-check{font-family:Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem;margin-right:.5rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".form-check{font-family:Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Arial,sans-serif;color:#333;font-size:1rem;margin-right:.5rem}.form-check-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -1934,7 +2314,7 @@ class SearchInputComponent {
                 useExisting: forwardRef(() => SearchInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngStyle]=\"getLabelStyles()\">{{ label }}</label>\n  <input [type]=\"type\"\n         class=\"form-control custom-input\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         [(ngModel)]=\"value\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         (keyup)=\"onKeyup($event)\"\n         (keydown)=\"onKeydown($event)\"\n         (keypress)=\"onKeypress($event)\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.maxlength]=\"maxlength\"\n         [attr.minlength]=\"minlength\"\n         [required]=\"required\"\n         [attr.pattern]=\"pattern\"\n         [autofocus]=\"autofocus\">\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        ], ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngStyle]=\"getLabelStyles()\">{{ label }}</label>\n  <input [type]=\"type\"\n         class=\"form-control custom-input\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         [(ngModel)]=\"value\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         (keyup)=\"onKeyup($event)\"\n         (keydown)=\"onKeydown($event)\"\n         (keypress)=\"onKeypress($event)\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.maxlength]=\"maxlength\"\n         [attr.minlength]=\"minlength\"\n         [required]=\"required\"\n         [attr.pattern]=\"pattern\"\n         [autofocus]=\"autofocus\">\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
@@ -2069,7 +2449,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\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i1$1.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\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;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: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i1$1.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,
@@ -2154,7 +2534,7 @@ class TabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, selector: "argenta-tab", inputs: { tabs: "tabs", activeTabIndex: "activeTabIndex", componentPermissions: "componentPermissions" }, outputs: { tabChanged: "tabChanged" }, ngImport: i0, template: "<ng-container *ngIf=\"hasComponentPermission()\">\n  <ul class=\"nav nav-tabs\">\n    <ng-container *ngFor=\"let tab of tabs; let i = index\">\n      <li class=\"nav-item\" *ngIf=\"hasPermission(tab.permissions)\">\n        <a\n          class=\"nav-link\"\n          [class.active]=\"i === activeTabIndex\"\n          (click)=\"selectTab(i, $event)\"\n          href=\"#\"\n          >{{ tab.label }}</a\n        >\n      </li>\n    </ng-container>\n  </ul>\n  <div class=\"tab-content\">\n    <div\n      *ngFor=\"let tab of tabs; let i = index\"\n      class=\"tab-pane fade\"\n      [ngClass]=\"{ 'show active': i === activeTabIndex }\"\n    >\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.nav-tabs .nav-item .nav-link{cursor:pointer;font-family:Inter,Arial,sans-serif;border-top-left-radius:.3rem;border-top-right-radius:.3rem;font-size:14px;color:#00444c;border:1px solid #ddd;transition:background-color .3s ease,color .3s ease}.nav-tabs .nav-item .nav-link.active{background-color:#00444c;color:#fff;border-color:transparent}.nav-tabs .nav-item .nav-link:hover{background-color:#2ca58d;color:#fff}.tab-content .tab-pane{padding:1rem;border:1px solid #ddd;border-top:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, selector: "argenta-tab", inputs: { tabs: "tabs", activeTabIndex: "activeTabIndex", componentPermissions: "componentPermissions" }, outputs: { tabChanged: "tabChanged" }, ngImport: i0, template: "<ng-container *ngIf=\"hasComponentPermission()\">\n  <ul class=\"nav nav-tabs\">\n    <ng-container *ngFor=\"let tab of tabs; let i = index\">\n      <li class=\"nav-item\" *ngIf=\"hasPermission(tab.permissions)\">\n        <a\n          class=\"nav-link\"\n          [class.active]=\"i === activeTabIndex\"\n          (click)=\"selectTab(i, $event)\"\n          href=\"#\"\n          >{{ tab.label }}</a\n        >\n      </li>\n    </ng-container>\n  </ul>\n  <div class=\"tab-content\">\n    <div\n      *ngFor=\"let tab of tabs; let i = index\"\n      class=\"tab-pane fade\"\n      [ngClass]=\"{ 'show active': i === activeTabIndex }\"\n    >\n      <ng-container *ngTemplateOutlet=\"tab.content\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.nav-tabs .nav-item .nav-link{cursor:pointer;font-family:Inter,Arial,sans-serif;border-top-left-radius:.3rem;border-top-right-radius:.3rem;font-size:14px;color:#00444c;border:1px solid #ddd;transition:background-color .3s ease,color .3s ease}.nav-tabs .nav-item .nav-link.active{background-color:#00444c;color:#fff;border-color:transparent}.nav-tabs .nav-item .nav-link:hover{background-color:#2ca58d;color:#fff}.tab-content .tab-pane{padding:1rem;border:1px solid #ddd;border-top:none}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
@@ -2211,7 +2591,7 @@ class DataTableComponent {
         this.pageText = 'Page';
         this.ofText = 'of';
         this.filterDescription = '';
-        this.buttonLabel = 'Novo perfil'; // Adicionando o Input para o label do botão
+        this.buttonLabel = ''; // Adicionando o Input para o label do botão
         this.sortChange = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.itemsPerPageChange = new EventEmitter();
@@ -2348,11 +2728,11 @@ 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" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, 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\">{{ itemsPerPageLabel }}</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        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n      </select>\n    </div>\n  </div>\n   <div class=\"right-section\">\n    <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\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 id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></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 *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n            {{ column.label }}\n          </th>\n        </ng-container>\n        <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</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 *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></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  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.clickable-icon{cursor:pointer}:host{font-family:Inter,Arial,sans-serif}.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:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;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:Inter,Arial,sans-serif;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:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.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" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, 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\">{{ itemsPerPageLabel }}</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        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n      </select>\n    </div>\n  </div>\n   <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n    <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\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 id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></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 *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n            {{ column.label }}\n          </th>\n        </ng-container>\n        <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</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 *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></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  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.clickable-icon{cursor:pointer}:host{font-family:Inter,Arial,sans-serif}.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:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;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:Inter,Arial,sans-serif;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:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\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: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.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,
-            args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, 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\">{{ itemsPerPageLabel }}</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        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n      </select>\n    </div>\n  </div>\n   <div class=\"right-section\">\n    <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\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 id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></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 *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n            {{ column.label }}\n          </th>\n        </ng-container>\n        <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</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 *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></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  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.clickable-icon{cursor:pointer}:host{font-family:Inter,Arial,sans-serif}.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:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;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:Inter,Arial,sans-serif;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:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\n"] }]
+            args: [{ selector: 'argenta-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, 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\">{{ itemsPerPageLabel }}</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        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n      </select>\n    </div>\n  </div>\n   <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n    <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\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 id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></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 *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n            {{ column.label }}\n          </th>\n        </ng-container>\n        <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</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 *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></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  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.clickable-icon{cursor:pointer}:host{font-family:Inter,Arial,sans-serif}.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:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;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:Inter,Arial,sans-serif;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:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;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:Inter,Arial,sans-serif;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:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
                 type: Input
             }], hiddenColumns: [{
@@ -2499,7 +2879,7 @@ class TextareaComponent {
                 [readonly]="readonly"
                 [autofocus]="autofocus"></textarea>
     </div>
-  `, isInline: true, styles: [".form-group{margin-bottom:1rem}.form-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".form-group{margin-bottom:1rem}.form-label{font-family:Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -2629,7 +3009,7 @@ class TreeNodeComponent {
         node.collapsed = !node.collapsed;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeNodeComponent, selector: "argenta-custom-tree-node", inputs: { title: "title", nodes: "nodes", isRoot: "isRoot" }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div *ngIf=\"isRoot\" class=\"tree-title\">{{ title || 'Tree Node' }}</div>\n<ul class=\"tree\">\n  <li *ngFor=\"let node of nodes\">\n    <div class=\"node-content\">\n      <!-- Exibir a seta apenas se o n\u00F3 tiver filhos n\u00E3o vazios -->\n      <span *ngIf=\"node.children && node.children.length > 0\" class=\"toggle-icon\" (click)=\"toggleCollapse(node)\"\n        [ngClass]=\"{'collapsed-icon': node.collapsed, 'expanded-icon': !node.collapsed}\">\n        {{ node.collapsed ? '\u25B6' : '\u25BC' }}\n      </span>\n      <!-- Exibir a bolinha cinza se o n\u00F3 n\u00E3o tiver filhos -->\n      <span *ngIf=\"!node.children || node.children.length === 0\" class=\"dot\"></span>\n      <label class=\"custom-checkbox\">\n        <input type=\"checkbox\" [checked]=\"node.selected\" (change)=\"onNodeSelected(node, $event)\" />\n        <span class=\"checkmark\"></span>\n      </label>\n      <label class=\"node-label\">{{ node.name }}</label>\n    </div>\n    <!-- Renderizar recursivamente apenas se o n\u00F3 tiver filhos n\u00E3o vazios e n\u00E3o estiver colapsado -->\n    <argenta-custom-tree-node *ngIf=\"node.children && node.children.length > 0 && !node.collapsed\" [nodes]=\"node.children\" [isRoot]=\"false\" (nodeSelected)=\"onChildNodeSelected(node)\"></argenta-custom-tree-node>\n  </li>\n</ul>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:Inter,sans-serif}.tree li{margin:0;padding:0 0 0 2em;line-height:2em;position:relative;font-size:14px;transition:all .3s ease}.tree li:before{content:\"\";position:absolute;top:0;left:0;border-left:1px solid #ccc;bottom:.75em;transition:border-color .3s ease}.tree li:after{content:\"\";position:absolute;top:1em;left:0;border-top:1px solid #ccc;width:1em;transition:border-color .3s ease}.tree li:last-child:before{height:1em}.node-content{display:flex;align-items:center;color:#333;transition:color .3s ease}.node-content:hover .node-label{color:#00444c;box-shadow:0 4px 8px #0000001a}.toggle-icon{cursor:pointer;margin-right:.5em;font-size:1em;transition:transform .3s ease,color .3s ease}.collapsed-icon{color:orange}.expanded-icon{color:green}.node-content input[type=checkbox]{display:none}.custom-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.checkmark{position:relative;height:14px;width:14px;background-color:#fff;border:2px solid #00444C;border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:#00444c;border-color:#00444c;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:4px;top:1px;width:3px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease}.custom-checkbox input:checked+.checkmark:after{display:block}.node-label{margin-left:.5em;transition:color .3s ease,box-shadow .3s ease}.node-content input{margin-right:.5em;transition:transform .3s ease}.tree-title{font-weight:600;margin-bottom:10px;font-size:18px;color:#00444c;transition:color .3s ease}.dot{width:8px;height:8px;background-color:#828282;border-radius:50%;margin-right:8px;opacity:1}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TreeNodeComponent, selector: "argenta-custom-tree-node", inputs: ["title", "nodes", "isRoot"], outputs: ["nodeSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeNodeComponent, selector: "argenta-custom-tree-node", inputs: { title: "title", nodes: "nodes", isRoot: "isRoot" }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div *ngIf=\"isRoot\" class=\"tree-title\">{{ title || 'Tree Node' }}</div>\n<ul class=\"tree\">\n  <li *ngFor=\"let node of nodes\">\n    <div class=\"node-content\">\n      <!-- Exibir a seta apenas se o n\u00F3 tiver filhos n\u00E3o vazios -->\n      <span *ngIf=\"node.children && node.children.length > 0\" class=\"toggle-icon\" (click)=\"toggleCollapse(node)\"\n        [ngClass]=\"{'collapsed-icon': node.collapsed, 'expanded-icon': !node.collapsed}\">\n        {{ node.collapsed ? '\u25B6' : '\u25BC' }}\n      </span>\n      <!-- Exibir a bolinha cinza se o n\u00F3 n\u00E3o tiver filhos -->\n      <span *ngIf=\"!node.children || node.children.length === 0\" class=\"dot\"></span>\n      <label class=\"custom-checkbox\">\n        <input type=\"checkbox\" [checked]=\"node.selected\" (change)=\"onNodeSelected(node, $event)\" />\n        <span class=\"checkmark\"></span>\n      </label>\n      <label class=\"node-label\">{{ node.name }}</label>\n    </div>\n    <!-- Renderizar recursivamente apenas se o n\u00F3 tiver filhos n\u00E3o vazios e n\u00E3o estiver colapsado -->\n    <argenta-custom-tree-node *ngIf=\"node.children && node.children.length > 0 && !node.collapsed\" [nodes]=\"node.children\" [isRoot]=\"false\" (nodeSelected)=\"onChildNodeSelected(node)\"></argenta-custom-tree-node>\n  </li>\n</ul>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:Inter,sans-serif}.tree li{margin:0;padding:0 0 0 2em;line-height:2em;position:relative;font-size:14px;transition:all .3s ease}.tree li:before{content:\"\";position:absolute;top:0;left:0;border-left:1px solid #ccc;bottom:.75em;transition:border-color .3s ease}.tree li:after{content:\"\";position:absolute;top:1em;left:0;border-top:1px solid #ccc;width:1em;transition:border-color .3s ease}.tree li:last-child:before{height:1em}.node-content{display:flex;align-items:center;color:#333;transition:color .3s ease}.node-content:hover .node-label{color:#00444c;box-shadow:0 4px 8px #0000001a}.toggle-icon{cursor:pointer;margin-right:.5em;font-size:1em;transition:transform .3s ease,color .3s ease}.collapsed-icon{color:orange}.expanded-icon{color:green}.node-content input[type=checkbox]{display:none}.custom-checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.checkmark{position:relative;height:14px;width:14px;background-color:#fff;border:2px solid #00444C;border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:#00444c;border-color:#00444c;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:4px;top:1px;width:3px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease}.custom-checkbox input:checked+.checkmark:after{display:block}.node-label{margin-left:.5em;transition:color .3s ease,box-shadow .3s ease}.node-content input{margin-right:.5em;transition:transform .3s ease}.tree-title{font-weight:600;margin-bottom:10px;font-size:18px;color:#00444c;transition:color .3s ease}.dot{width:8px;height:8px;background-color:#828282;border-radius:50%;margin-right:8px;opacity:1}\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: "component", type: TreeNodeComponent, selector: "argenta-custom-tree-node", inputs: ["title", "nodes", "isRoot"], outputs: ["nodeSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
@@ -2644,6 +3024,49 @@ 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" }, ngImport: i0, template: "<div class=\"json-viewer-box\">\n    <div class=\"toolbar\">\n      <button *ngIf=\"isRoot\" class=\"action-button copy-button\" (click)=\"copyJson()\">Copiar</button>\n      <button *ngIf=\"isRoot\" class=\"action-button toggle-button\" (click)=\"toggleAll()\">\n        {{ allExpanded ? '\u25BC Ocultar Tudo' : '\u25BA Exibir Tudo' }}\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 [jsonData]=\"jsonData[key]\" [isRoot]=\"false\"></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"] }] }); }
+}
+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 *ngIf=\"isRoot\" class=\"action-button copy-button\" (click)=\"copyJson()\">Copiar</button>\n      <button *ngIf=\"isRoot\" class=\"action-button toggle-button\" (click)=\"toggleAll()\">\n        {{ allExpanded ? '\u25BC Ocultar Tudo' : '\u25BA Exibir Tudo' }}\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 [jsonData]=\"jsonData[key]\" [isRoot]=\"false\"></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
+            }] } });
+
 // 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 }); }
@@ -2686,7 +3109,10 @@ class ComponentsModule {
             SearchCustomerComponent,
             TabComponent,
             FileUploadComponent,
-            MultiSelectCategoryComponent], imports: [CommonModule,
+            MultiSelectCategoryComponent,
+            CalendarArgentaComponent,
+            AccordionArgentaComponent,
+            JsonViewerComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgSelectModule,
@@ -2720,7 +3146,10 @@ class ComponentsModule {
             SearchCustomerComponent,
             TabComponent,
             FileUploadComponent,
-            MultiSelectCategoryComponent] }); }
+            MultiSelectCategoryComponent,
+            CalendarArgentaComponent,
+            AccordionArgentaComponent,
+            JsonViewerComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -2761,6 +3190,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TabComponent,
                         FileUploadComponent,
                         MultiSelectCategoryComponent,
+                        CalendarArgentaComponent,
+                        AccordionArgentaComponent,
+                        JsonViewerComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -2801,6 +3233,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TabComponent,
                         FileUploadComponent,
                         MultiSelectCategoryComponent,
+                        CalendarArgentaComponent,
+                        AccordionArgentaComponent,
+                        JsonViewerComponent,
                     ],
                 }]
         }] });
@@ -2857,7 +3292,7 @@ class ConfirmationService {
             this.modalRef = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationService, deps: [{ token: i1.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationService, deps: [{ token: i1$2.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationService, decorators: [{
@@ -2865,7 +3300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NgbModal }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.NgbModal }]; } });
 
 class DataPaginateService {
     constructor(http) {
@@ -2962,5 +3397,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, FileUploadComponent, InputComponent, LibPortalAngularModule, LucideIconsModule, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent };
+export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent };
 //# sourceMappingURL=lib-portal-angular.mjs.map