lib-portal-angular 0.0.73 → 0.0.74

package/fesm2022/lib-portal-angular.mjs

@@ -4,10 +4,10 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from 'lucide-angular';
+import * as i3 from 'lucide-angular';
 import { LucideAngularModule, icons } from 'lucide-angular';
 import hljs from 'highlight.js';
-import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
+import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
 import { Subject, of, Subscription, Observable } from 'rxjs';
 import { debounceTime, startWith, switchMap, map, catchError, takeUntil } from 'rxjs/operators';
 import * as i2$1 from '@angular/common/http';
@@ -91,11 +91,11 @@ class AccordionArgentaComponent {
         }
     }
     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"] }] }); }
+    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\";.accordion{border:1px solid #ccc;border-radius:8px;margin-bottom:15px;font-family:var(--font-family);transition:max-height .4s ease;overflow:hidden}.accordion .accordion-header{background-color:var(--primary-color);color:var(--text-color);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: AccordionArgentaComponent, decorators: [{
             type: Component,
-            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"] }]
+            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\";.accordion{border:1px solid #ccc;border-radius:8px;margin-bottom:15px;font-family:var(--font-family);transition:max-height .4s ease;overflow:hidden}.accordion .accordion-header{background-color:var(--primary-color);color:var(--text-color);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
             }], isOpen: [{
@@ -226,8 +226,8 @@ var ButtonClasses;
 
 class BadgeComponent {
     constructor() {
-        this.label = 'Mensagem';
-        this.badgeContent = '+45';
+        this.label = "Mensagem";
+        this.badgeContent = "+45";
         this.marginTop = 0;
         this.marginBottom = 0;
         this.marginLeft = 0;
@@ -239,56 +239,61 @@ class BadgeComponent {
         this.isActive = false;
     }
     getDynamicStyles() {
-        let backgroundColor = '';
-        let textColor = '#fff'; // Default text color
-        let borderColor = '';
+        let backgroundColor = "";
+        let textColor = getComputedStyle(document.documentElement)
+            .getPropertyValue("--text-color")
+            .trim();
+        let borderColor = "";
+        const getCSSVariable = (variable) => getComputedStyle(document.documentElement)
+            .getPropertyValue(variable)
+            .trim();
         switch (this.btnClass) {
             case ButtonClasses.Primary:
-                backgroundColor = '#00444C';
+                backgroundColor = getCSSVariable("--primary-color");
                 break;
             case ButtonClasses.Secondary:
-                backgroundColor = '#2CA58D';
+                backgroundColor = getCSSVariable("--secondary-color");
                 break;
             case ButtonClasses.Success:
-                backgroundColor = '#00C853';
+                backgroundColor = getCSSVariable("--success-color");
                 break;
             case ButtonClasses.Danger:
-                backgroundColor = '#D32F2F';
+                backgroundColor = getCSSVariable("--danger-color");
                 break;
             case ButtonClasses.Warning:
-                backgroundColor = '#FFC107';
+                backgroundColor = getCSSVariable("--warning-color");
                 break;
             case ButtonClasses.Info:
-                backgroundColor = '#3EC9D6';
+                backgroundColor = getCSSVariable("--info-color");
                 break;
             case ButtonClasses.Light:
-                backgroundColor = '#EEF2F6';
-                textColor = '#00444C'; // Custom text color for Light
+                backgroundColor = getCSSVariable("--light-color");
+                textColor = getCSSVariable("--primary-color");
                 break;
             case ButtonClasses.Dark:
-                backgroundColor = '#111936';
+                backgroundColor = getCSSVariable("--dark-color");
                 break;
             case ButtonClasses.Link:
-                backgroundColor = 'transparent';
-                borderColor = '#DDE5E9';
-                textColor = '#00444C'; // Custom text color for Link
+                backgroundColor = "transparent";
+                borderColor = getCSSVariable("--link-border-color");
+                textColor = getCSSVariable("--primary-color");
                 break;
             default:
-                backgroundColor = '#00444C';
+                backgroundColor = getCSSVariable("--primary-color");
                 break;
         }
-        const hoverFilter = this.isHovered ? 'brightness(80%)' : 'none'; // Adjusted hover brightness
-        const activeFilter = this.isClicked ? 'brightness(60%)' : hoverFilter; // Adjusted active brightness
+        const hoverFilter = this.isHovered ? "brightness(80%)" : "none";
+        const activeFilter = this.isClicked ? "brightness(60%)" : hoverFilter;
         return {
-            'margin-top': `${this.marginTop}rem`,
-            'margin-bottom': `${this.marginBottom}rem`,
-            'margin-left': `${this.marginLeft}rem`,
-            'margin-right': `${this.marginRight}rem`,
-            'background-color': backgroundColor,
-            'color': textColor,
-            'border': borderColor ? `1px solid ${borderColor}` : 'none',
-            'transition': 'background-color 0.3s, border-color 0.3s, filter 0.3s',
-            'filter': activeFilter
+            "margin-top": `${this.marginTop}rem`,
+            "margin-bottom": `${this.marginBottom}rem`,
+            "margin-left": `${this.marginLeft}rem`,
+            "margin-right": `${this.marginRight}rem`,
+            "background-color": backgroundColor,
+            color: textColor,
+            border: borderColor ? `1px solid ${borderColor}` : "none",
+            transition: "background-color 0.3s, border-color 0.3s, filter 0.3s",
+            filter: activeFilter,
         };
     }
     onClick() {
@@ -308,39 +313,11 @@ class BadgeComponent {
         this.isClicked = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "sim-app-badge", inputs: { label: "label", badgeContent: "badgeContent", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", btnClass: "btnClass" }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()" } }, ngImport: i0, template: `
-    <button
-      class="notification-button"
-      [ngStyle]="getDynamicStyles()"
-      (click)="onClick()"
-      [class.hovered]="isHovered"
-      [class.clicked]="isClicked"
-      (mousedown)="onMouseDown()"
-      (mouseup)="onMouseUp()"
-      (mouseleave)="onMouseLeave()"
-      (mouseenter)="onMouseEnter()">
-      {{ 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, selector: "sim-app-badge", inputs: { label: "label", badgeContent: "badgeContent", marginTop: "marginTop", marginBottom: "marginBottom", marginLeft: "marginLeft", marginRight: "marginRight", btnClass: "btnClass" }, outputs: { buttonClick: "buttonClick" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()" } }, ngImport: i0, template: "<button\n  class=\"notification-button\"\n  [ngStyle]=\"getDynamicStyles()\"\n  (click)=\"onClick()\"\n  [class.hovered]=\"isHovered\"\n  [class.clicked]=\"isClicked\"\n  (mousedown)=\"onMouseDown()\"\n  (mouseup)=\"onMouseUp()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  {{ label }}\n  <span class=\"badge\">{{ badgeContent }}</span>\n</button>\n", 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:var(--danger-color);color:var(--text-color);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:var(--font-family)}.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,
-            args: [{ selector: 'sim-app-badge', template: `
-    <button
-      class="notification-button"
-      [ngStyle]="getDynamicStyles()"
-      (click)="onClick()"
-      [class.hovered]="isHovered"
-      [class.clicked]="isClicked"
-      (mousedown)="onMouseDown()"
-      (mouseup)="onMouseUp()"
-      (mouseleave)="onMouseLeave()"
-      (mouseenter)="onMouseEnter()">
-      {{ label }}
-      <span class="badge">{{ badgeContent }}</span>
-    </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: "sim-app-badge", changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"notification-button\"\n  [ngStyle]=\"getDynamicStyles()\"\n  (click)=\"onClick()\"\n  [class.hovered]=\"isHovered\"\n  [class.clicked]=\"isClicked\"\n  (mousedown)=\"onMouseDown()\"\n  (mouseup)=\"onMouseUp()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (mouseenter)=\"onMouseEnter()\"\n>\n  {{ label }}\n  <span class=\"badge\">{{ badgeContent }}</span>\n</button>\n", 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:var(--danger-color);color:var(--text-color);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:var(--font-family)}.notification-button.hovered{opacity:.8}.notification-button.clicked{opacity:.6}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], badgeContent: [{
@@ -359,25 +336,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], onMouseEnter: [{
                 type: HostListener,
-                args: ['mouseenter']
+                args: ["mouseenter"]
             }], onMouseLeave: [{
                 type: HostListener,
-                args: ['mouseleave']
+                args: ["mouseleave"]
             }], onMouseDown: [{
                 type: HostListener,
-                args: ['mousedown']
+                args: ["mousedown"]
             }], onMouseUp: [{
                 type: HostListener,
-                args: ['mouseup']
+                args: ["mouseup"]
             }] } });
 
 class ButtonComponent {
-    constructor(authService) {
+    constructor(authService, cdr) {
         this.authService = authService;
-        this.type = 'button';
-        this.label = 'Submit';
+        this.cdr = cdr;
+        this.type = "button";
+        this.label = "Submit";
         this.btnClass = ButtonClasses.Primary;
-        this.fontSize = '1rem';
+        this.fontSize = "1rem";
         this.disabled = false;
         this.autofocus = false;
         this.form = null;
@@ -392,6 +370,7 @@ class ButtonComponent {
         this.onButtonClick = new EventEmitter();
         this.isHovered = false;
         this.isActive = false;
+        this.clicked = false;
     }
     ngOnInit() {
         this.validateInputs();
@@ -402,18 +381,18 @@ class ButtonComponent {
         }
     }
     validateInputs() {
-        const validTypes = ['button', 'submit', 'reset'];
+        const validTypes = ["button", "submit", "reset"];
         const validClasses = Object.values(ButtonClasses);
         if (!validTypes.includes(this.type)) {
-            throw new Error(`Invalid type: ${this.type}. Allowed values are: ${validTypes.join(', ')}`);
+            throw new Error(`Invalid type: ${this.type}. Allowed values are: ${validTypes.join(", ")}`);
         }
         if (!validClasses.includes(this.btnClass)) {
-            throw new Error(`Invalid btnClass: ${this.btnClass}. Allowed values are: ${validClasses.join(', ')}`);
+            throw new Error(`Invalid btnClass: ${this.btnClass}. Allowed values are: ${validClasses.join(", ")}`);
         }
-        if (typeof this.disabled !== 'boolean') {
+        if (typeof this.disabled !== "boolean") {
             throw new Error(`Invalid disabled value: ${this.disabled}. It should be a boolean.`);
         }
-        if (typeof this.autofocus !== 'boolean') {
+        if (typeof this.autofocus !== "boolean") {
             throw new Error(`Invalid autofocus value: ${this.autofocus}. It should be a boolean.`);
         }
         if (this.permissions && !Array.isArray(this.permissions)) {
@@ -421,59 +400,74 @@ class ButtonComponent {
         }
     }
     onClick(event) {
+        this.clicked = true;
         this.onButtonClick.emit(event);
+        setTimeout(() => {
+            this.clicked = false;
+            this.cdr.detectChanges();
+        }, 80);
     }
     get dynamicStyles() {
         return this.calculateDynamicStyles();
     }
     calculateDynamicStyles() {
-        let backgroundColor = '';
-        let textColor = '#fff'; // Default text color
-        let borderColor = '';
-        switch (this.btnClass) {
-            case ButtonClasses.Primary:
-                backgroundColor = '#00444C';
-                break;
-            case ButtonClasses.Secondary:
-                backgroundColor = '#2CA58D';
-                break;
-            case ButtonClasses.Success:
-                backgroundColor = '#00C853';
-                break;
-            case ButtonClasses.Danger:
-                backgroundColor = '#D32F2F';
-                break;
-            case ButtonClasses.Warning:
-                backgroundColor = '#FFC107';
-                break;
-            case ButtonClasses.Info:
-                backgroundColor = '#3EC9D6';
-                break;
-            case ButtonClasses.Light:
-                backgroundColor = '#EEF2F6';
-                textColor = '#00444C'; // Custom text color for Light
-                break;
-            case ButtonClasses.Dark:
-                backgroundColor = '#111936';
-                break;
-            case ButtonClasses.Link:
-                backgroundColor = 'transparent';
-                borderColor = '#DDE5E9';
-                textColor = '#00444C'; // Custom text color for Link
-                break;
-            default:
-                backgroundColor = '#00444C';
-                break;
+        let backgroundColor = "";
+        let textColor = getComputedStyle(document.documentElement)
+            .getPropertyValue("--text-color")
+            .trim(); // Cor de texto padrão
+        let borderColor = "";
+        const getCSSVariable = (variable) => getComputedStyle(document.documentElement)
+            .getPropertyValue(variable)
+            .trim();
+        if (this.clicked) {
+            backgroundColor = "rgba(126, 126, 126, 0.25)"; // Cor temporária ao clicar
         }
-        const hoverFilter = this.isHovered ? 'brightness(80%)' : 'none'; // Adjusted hover brightness
-        const activeFilter = this.isActive ? 'brightness(60%)' : hoverFilter; // Adjusted active brightness
+        else {
+            switch (this.btnClass) {
+                case ButtonClasses.Primary:
+                    backgroundColor = getCSSVariable("--primary-color");
+                    break;
+                case ButtonClasses.Secondary:
+                    backgroundColor = getCSSVariable("--secondary-color");
+                    break;
+                case ButtonClasses.Success:
+                    backgroundColor = getCSSVariable("--success-color");
+                    break;
+                case ButtonClasses.Danger:
+                    backgroundColor = getCSSVariable("--danger-color");
+                    break;
+                case ButtonClasses.Warning:
+                    backgroundColor = getCSSVariable("--warning-color");
+                    break;
+                case ButtonClasses.Info:
+                    backgroundColor = getCSSVariable("--info-color");
+                    break;
+                case ButtonClasses.Light:
+                    backgroundColor = getCSSVariable("--light-color");
+                    textColor = getCSSVariable("--primary-color");
+                    break;
+                case ButtonClasses.Dark:
+                    backgroundColor = getCSSVariable("--dark-color");
+                    break;
+                case ButtonClasses.Link:
+                    backgroundColor = "transparent";
+                    borderColor = getCSSVariable("--link-border-color");
+                    textColor = getCSSVariable("--primary-color");
+                    break;
+                default:
+                    backgroundColor = getCSSVariable("--primary-color");
+                    break;
+            }
+        }
+        const hoverFilter = this.isHovered ? "brightness(80%)" : "none";
+        const activeFilter = this.isActive ? "brightness(60%)" : hoverFilter;
         return {
-            'font-size': this.fontSize,
-            'background-color': backgroundColor,
-            'color': textColor,
-            'border': borderColor ? `1px solid ${borderColor}` : 'none',
-            'transition': 'background-color 0.3s, border-color 0.3s, filter 0.3s',
-            'filter': activeFilter
+            "font-size": this.fontSize,
+            "background-color": backgroundColor,
+            color: textColor,
+            border: borderColor ? `1px solid ${borderColor}` : "none",
+            transition: "background-color 0.3s, border-color 0.3s, filter 0.3s",
+            filter: activeFilter,
         };
     }
     hasPermission() {
@@ -485,69 +479,29 @@ class ButtonComponent {
         }
         catch (error) {
             if (error instanceof Error) {
-                console.error('Permission error:', error.message);
+                console.error("Permission error:", error.message);
             }
             else {
-                console.error('Unknown error occurred during permission check');
+                console.error("Unknown error occurred during permission check");
             }
             return true;
         }
     }
     onCancel(event) {
-        console.log('Cancel button clicked', event);
+        console.log("Cancel button clicked", event);
         // Lógica para o cancelamento
     }
     onSave(event) {
-        console.log('Save button clicked', event);
+        console.log("Save button clicked", event);
         // Lógica para salvar alterações
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "argenta-custom-button", inputs: { type: "type", label: "label", btnClass: "btnClass", fontSize: "fontSize", disabled: "disabled", autofocus: "autofocus", form: "form", formaction: "formaction", formenctype: "formenctype", formmethod: "formmethod", formnovalidate: "formnovalidate", formtarget: "formtarget", name: "name", value: "value", permissions: "permissions" }, outputs: { onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: `
-    <ng-container *ngIf="hasPermission()">
-      <button [type]="type"
-              class="btn"
-              [ngClass]="btnClass"
-              [ngStyle]="dynamicStyles"
-              (click)="onClick($event)"
-              [disabled]="disabled"
-              [attr.autofocus]="autofocus ? true : null"
-              [attr.form]="form"
-              [attr.formaction]="formaction"
-              [attr.formenctype]="formenctype"
-              [attr.formmethod]="formmethod"
-              [attr.formnovalidate]="formnovalidate"
-              [attr.formtarget]="formtarget"
-              [attr.name]="name"
-              [attr.value]="value">
-        {{ 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: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [{ token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "argenta-custom-button", inputs: { type: "type", label: "label", btnClass: "btnClass", fontSize: "fontSize", disabled: "disabled", autofocus: "autofocus", form: "form", formaction: "formaction", formenctype: "formenctype", formmethod: "formmethod", formnovalidate: "formnovalidate", formtarget: "formtarget", name: "name", value: "value", permissions: "permissions" }, outputs: { onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"hasPermission()\">\n  <button\n    [type]=\"type\"\n    class=\"btn\"\n    [ngClass]=\"btnClass\"\n    [ngStyle]=\"dynamicStyles\"\n    (click)=\"onClick($event)\"\n    [disabled]=\"disabled\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [attr.form]=\"form\"\n    [attr.formaction]=\"formaction\"\n    [attr.formenctype]=\"formenctype\"\n    [attr.formmethod]=\"formmethod\"\n    [attr.formnovalidate]=\"formnovalidate\"\n    [attr.formtarget]=\"formtarget\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    {{ label }}\n  </button>\n</ng-container>\n", styles: [".btn{padding:.5rem 1rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;line-height:24px;letter-spacing:.005em;text-align:left;box-shadow:none}.btn:hover{box-shadow:0 0 0 .2rem #7e7e7e40}.btn:active{background-color:#7e7e7e40}.btn:focus{outline:none;box-shadow:0 0 0 .2rem #7e7e7e40}\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,
-            args: [{ selector: 'argenta-custom-button', template: `
-    <ng-container *ngIf="hasPermission()">
-      <button [type]="type"
-              class="btn"
-              [ngClass]="btnClass"
-              [ngStyle]="dynamicStyles"
-              (click)="onClick($event)"
-              [disabled]="disabled"
-              [attr.autofocus]="autofocus ? true : null"
-              [attr.form]="form"
-              [attr.formaction]="formaction"
-              [attr.formenctype]="formenctype"
-              [attr.formmethod]="formmethod"
-              [attr.formnovalidate]="formnovalidate"
-              [attr.formtarget]="formtarget"
-              [attr.name]="name"
-              [attr.value]="value">
-        {{ label }}
-      </button>
-    </ng-container>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { type: [{
+            args: [{ selector: "argenta-custom-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"hasPermission()\">\n  <button\n    [type]=\"type\"\n    class=\"btn\"\n    [ngClass]=\"btnClass\"\n    [ngStyle]=\"dynamicStyles\"\n    (click)=\"onClick($event)\"\n    [disabled]=\"disabled\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [attr.form]=\"form\"\n    [attr.formaction]=\"formaction\"\n    [attr.formenctype]=\"formenctype\"\n    [attr.formmethod]=\"formmethod\"\n    [attr.formnovalidate]=\"formnovalidate\"\n    [attr.formtarget]=\"formtarget\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    {{ label }}\n  </button>\n</ng-container>\n", styles: [".btn{padding:.5rem 1rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;line-height:24px;letter-spacing:.005em;text-align:left;box-shadow:none}.btn:hover{box-shadow:0 0 0 .2rem #7e7e7e40}.btn:active{background-color:#7e7e7e40}.btn:focus{outline:none;box-shadow:0 0 0 .2rem #7e7e7e40}\n"] }]
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { type: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -1086,11 +1040,11 @@ class CalendarArgentaComponent {
         return this.locales[this.locale]?.daysOfWeek || this.locales['en'].daysOfWeek;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarArgentaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarArgentaComponent, selector: "argenta-calendar", inputs: { id: "id", placeholder: "placeholder", label: "label", minDate: "minDate", maxDate: "maxDate", locale: "locale", useTime: "useTime", initialDate: "initialDate", rangeMode: "rangeMode", startDate: "startDate", endDate: "endDate", closeButtonLabel: "closeButtonLabel" }, outputs: { rangeChange: "rangeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <div class=\"input-wrapper\">\n    <input\n      id=\"{{ id }}\"\n      type=\"text\"\n      class=\"custom-input\"\n      [attr.placeholder]=\"rangeMode && useTime ? 'dd/MM/yyyy HH:mm - dd/MM/yyyy HH:mm' : \n      rangeMode && !useTime ? 'dd/MM/yyyy - dd/MM/yyyy' :(!rangeMode && useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy')\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.in-range]=\"isInRange(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              {{ day ? day : \"\" }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Inputs para inser\u00E7\u00E3o das horas -->\n        <div *ngIf=\"useTime\" class=\"time-inputs\">\n          <!-- Campo de hora de in\u00EDcio -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora de In\u00EDcio' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"startTime\" (change)=\"onTimeChange('start')\" />\n          </div>\n\n          <!-- Campo de hora de fim -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.endTimeLabel || 'Hora de Fim' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"endTime\" (change)=\"onTimeChange('end')\" />\n          </div>\n\n          <!-- Campo de hora \u00FAnica (se n\u00E3o for range) -->\n          <div *ngIf=\"!rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora' }}</label> <!-- Usando o label de in\u00EDcio -->\n            <input type=\"time\" [(ngModel)]=\"selectedTime\" (change)=\"onTimeChange('single')\" />\n          </div>\n        </div>\n\n        <!-- Bot\u00E3o de fechar o calend\u00E1rio -->\n        <button class=\"close-button\" (click)=\"closeCalendar()\">{{ closeButtonLabel }}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@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;position:absolute;top:100%;left:0;z-index:9999;background-color:#fff;box-shadow:0 4px 12px #0000001a;width:auto;max-width:none}.calendar-wrapper{position:relative}@media (max-width: 300px){.calendar-container{width:100vw;left:0}}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease;background-color:#f5f5f5}.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}.calendar-days{display:contents}.calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar-days span.today{background-color:#2ca58d;color:#fff;text-decoration:underline}.calendar-days span.selected{background-color:#00444c;color:#fff}.calendar-days span.in-range{background-color:#fd9;color:#000}.calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar-days span:hover:not(.disabled){background-color:#2ca58d;color:#fff}.calendar-body{position:relative}.close-button{float:right;margin-top:10px;background-color:#fff3cd;color:#383838;border:none;padding:6px 12px;cursor:pointer;border-radius:20px;font-size:12px;font-weight:500;transition:all .2s ease}.close-button:hover{background-color:#e9ebec;box-shadow:0 2px 4px #00000026}.close-button:active{transform:translateY(1px)}.time-inputs{display:flex;justify-content:space-between;margin-top:10px}.time-input{display:flex;flex-direction:column;width:45%}.time-input label{font-size:.9rem;margin-bottom:5px}.time-input input{padding:8px;font-size:.9rem;border:1px solid #ccc;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarArgentaComponent, selector: "argenta-calendar", inputs: { id: "id", placeholder: "placeholder", label: "label", minDate: "minDate", maxDate: "maxDate", locale: "locale", useTime: "useTime", initialDate: "initialDate", rangeMode: "rangeMode", startDate: "startDate", endDate: "endDate", closeButtonLabel: "closeButtonLabel" }, outputs: { rangeChange: "rangeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <div class=\"input-wrapper\">\n    <input\n      id=\"{{ id }}\"\n      type=\"text\"\n      class=\"custom-input\"\n      [attr.placeholder]=\"rangeMode && useTime ? 'dd/MM/yyyy HH:mm - dd/MM/yyyy HH:mm' : \n      rangeMode && !useTime ? 'dd/MM/yyyy - dd/MM/yyyy' :(!rangeMode && useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy')\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.in-range]=\"isInRange(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              {{ day ? day : \"\" }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Inputs para inser\u00E7\u00E3o das horas -->\n        <div *ngIf=\"useTime\" class=\"time-inputs\">\n          <!-- Campo de hora de in\u00EDcio -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora de In\u00EDcio' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"startTime\" (change)=\"onTimeChange('start')\" />\n          </div>\n\n          <!-- Campo de hora de fim -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.endTimeLabel || 'Hora de Fim' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"endTime\" (change)=\"onTimeChange('end')\" />\n          </div>\n\n          <!-- Campo de hora \u00FAnica (se n\u00E3o for range) -->\n          <div *ngIf=\"!rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora' }}</label> <!-- Usando o label de in\u00EDcio -->\n            <input type=\"time\" [(ngModel)]=\"selectedTime\" (change)=\"onTimeChange('single')\" />\n          </div>\n        </div>\n\n        <!-- Bot\u00E3o de fechar o calend\u00E1rio -->\n        <button class=\"close-button\" (click)=\"closeCalendar()\">{{ closeButtonLabel }}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease;position:absolute;top:100%;left:0;z-index:9999;background-color:#fff;box-shadow:0 4px 12px #0000001a;width:auto;max-width:none}.calendar-wrapper{position:relative}@media (max-width: 300px){.calendar-container{width:100vw;left:0}}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:var(--font-family);transition:max-height .4s ease;background-color:#fdfdfd}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:var(--primary-color);color:var(--text-color);border:none;padding:8px 12px;cursor:pointer;border-radius:8px;font-size:1.2rem;transition:background-color .2s}.calendar .calendar-header button:hover{background-color:var(--secondary-color)}.calendar .calendar-header span{font-size:1.4rem;color:var(--primary-color);text-align:center;flex-grow:1}.calendar .calendar-body{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar .calendar-body .calendar-day-names{display:contents}.calendar .calendar-body .calendar-day-names span{text-align:center;font-weight:700;margin-bottom:5px;font-size:.9rem}.calendar .calendar-body .calendar-day-names span:nth-child(1){color:#ff8080}.calendar .calendar-body .calendar-day-names span:nth-child(7){color:#555}.calendar .calendar-body .calendar-days{display:contents}.calendar .calendar-body .calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar .calendar-body .calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar .calendar-body .calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px;padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.custom-input:focus{outline:none;border-color:#ccc}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.error-message{position:relative;background-color:#ff8080;color:#fff;padding:10px;border-radius:8px;font-size:.9rem;max-width:250px;margin-top:5px}.error-message:after{content:\"\";position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#ff8080 transparent transparent transparent}.input-wrapper{position:relative;display:inline-block;width:100%}.input-wrapper .custom-input{width:100%;padding-right:40px;box-sizing:border-box}.input-wrapper .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;color:#b8b8b8}.calendar-days{display:contents}.calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color);text-decoration:underline}.calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar-days span.in-range{background-color:#fd9;color:#000}.calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.calendar-body{position:relative}.close-button{float:right;margin-top:10px;background-color:#fff3cd;color:#383838;border:none;padding:6px 12px;cursor:pointer;border-radius:20px;font-size:12px;font-weight:500;transition:all .2s ease}.close-button:hover{background-color:#e9ebec;box-shadow:0 2px 4px #eeebeb26}.close-button:active{transform:translateY(1px)}.time-inputs{display:flex;justify-content:space-between;margin-top:10px}.time-input{display:flex;flex-direction:column;width:45%}.time-input label{font-size:.9rem;margin-bottom:5px}.time-input input{padding:8px;font-size:.9rem;border:1px solid #ccc;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarArgentaComponent, decorators: [{
             type: Component,
-            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]=\"rangeMode && useTime ? 'dd/MM/yyyy HH:mm - dd/MM/yyyy HH:mm' : \n      rangeMode && !useTime ? 'dd/MM/yyyy - dd/MM/yyyy' :(!rangeMode && useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy')\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.in-range]=\"isInRange(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              {{ day ? day : \"\" }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Inputs para inser\u00E7\u00E3o das horas -->\n        <div *ngIf=\"useTime\" class=\"time-inputs\">\n          <!-- Campo de hora de in\u00EDcio -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora de In\u00EDcio' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"startTime\" (change)=\"onTimeChange('start')\" />\n          </div>\n\n          <!-- Campo de hora de fim -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.endTimeLabel || 'Hora de Fim' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"endTime\" (change)=\"onTimeChange('end')\" />\n          </div>\n\n          <!-- Campo de hora \u00FAnica (se n\u00E3o for range) -->\n          <div *ngIf=\"!rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora' }}</label> <!-- Usando o label de in\u00EDcio -->\n            <input type=\"time\" [(ngModel)]=\"selectedTime\" (change)=\"onTimeChange('single')\" />\n          </div>\n        </div>\n\n        <!-- Bot\u00E3o de fechar o calend\u00E1rio -->\n        <button class=\"close-button\" (click)=\"closeCalendar()\">{{ closeButtonLabel }}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@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;position:absolute;top:100%;left:0;z-index:9999;background-color:#fff;box-shadow:0 4px 12px #0000001a;width:auto;max-width:none}.calendar-wrapper{position:relative}@media (max-width: 300px){.calendar-container{width:100vw;left:0}}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease;background-color:#f5f5f5}.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}.calendar-days{display:contents}.calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar-days span.today{background-color:#2ca58d;color:#fff;text-decoration:underline}.calendar-days span.selected{background-color:#00444c;color:#fff}.calendar-days span.in-range{background-color:#fd9;color:#000}.calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar-days span:hover:not(.disabled){background-color:#2ca58d;color:#fff}.calendar-body{position:relative}.close-button{float:right;margin-top:10px;background-color:#fff3cd;color:#383838;border:none;padding:6px 12px;cursor:pointer;border-radius:20px;font-size:12px;font-weight:500;transition:all .2s ease}.close-button:hover{background-color:#e9ebec;box-shadow:0 2px 4px #00000026}.close-button:active{transform:translateY(1px)}.time-inputs{display:flex;justify-content:space-between;margin-top:10px}.time-input{display:flex;flex-direction:column;width:45%}.time-input label{font-size:.9rem;margin-bottom:5px}.time-input input{padding:8px;font-size:.9rem;border:1px solid #ccc;border-radius:4px}\n"] }]
+            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]=\"rangeMode && useTime ? 'dd/MM/yyyy HH:mm - dd/MM/yyyy HH:mm' : \n      rangeMode && !useTime ? 'dd/MM/yyyy - dd/MM/yyyy' :(!rangeMode && useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy')\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.in-range]=\"isInRange(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              {{ day ? day : \"\" }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Inputs para inser\u00E7\u00E3o das horas -->\n        <div *ngIf=\"useTime\" class=\"time-inputs\">\n          <!-- Campo de hora de in\u00EDcio -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora de In\u00EDcio' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"startTime\" (change)=\"onTimeChange('start')\" />\n          </div>\n\n          <!-- Campo de hora de fim -->\n          <div *ngIf=\"rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.endTimeLabel || 'Hora de Fim' }}</label> <!-- Usando tradu\u00E7\u00E3o -->\n            <input type=\"time\" [(ngModel)]=\"endTime\" (change)=\"onTimeChange('end')\" />\n          </div>\n\n          <!-- Campo de hora \u00FAnica (se n\u00E3o for range) -->\n          <div *ngIf=\"!rangeMode\" class=\"time-input\">\n            <label>{{ locales[locale]?.startTimeLabel || 'Hora' }}</label> <!-- Usando o label de in\u00EDcio -->\n            <input type=\"time\" [(ngModel)]=\"selectedTime\" (change)=\"onTimeChange('single')\" />\n          </div>\n        </div>\n\n        <!-- Bot\u00E3o de fechar o calend\u00E1rio -->\n        <button class=\"close-button\" (click)=\"closeCalendar()\">{{ closeButtonLabel }}</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease;position:absolute;top:100%;left:0;z-index:9999;background-color:#fff;box-shadow:0 4px 12px #0000001a;width:auto;max-width:none}.calendar-wrapper{position:relative}@media (max-width: 300px){.calendar-container{width:100vw;left:0}}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:var(--font-family);transition:max-height .4s ease;background-color:#fdfdfd}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:var(--primary-color);color:var(--text-color);border:none;padding:8px 12px;cursor:pointer;border-radius:8px;font-size:1.2rem;transition:background-color .2s}.calendar .calendar-header button:hover{background-color:var(--secondary-color)}.calendar .calendar-header span{font-size:1.4rem;color:var(--primary-color);text-align:center;flex-grow:1}.calendar .calendar-body{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar .calendar-body .calendar-day-names{display:contents}.calendar .calendar-body .calendar-day-names span{text-align:center;font-weight:700;margin-bottom:5px;font-size:.9rem}.calendar .calendar-body .calendar-day-names span:nth-child(1){color:#ff8080}.calendar .calendar-body .calendar-day-names span:nth-child(7){color:#555}.calendar .calendar-body .calendar-days{display:contents}.calendar .calendar-body .calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar .calendar-body .calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar .calendar-body .calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar .calendar-body .calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px;padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.custom-input:focus{outline:none;border-color:#ccc}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.error-message{position:relative;background-color:#ff8080;color:#fff;padding:10px;border-radius:8px;font-size:.9rem;max-width:250px;margin-top:5px}.error-message:after{content:\"\";position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#ff8080 transparent transparent transparent}.input-wrapper{position:relative;display:inline-block;width:100%}.input-wrapper .custom-input{width:100%;padding-right:40px;box-sizing:border-box}.input-wrapper .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;color:#b8b8b8}.calendar-days{display:contents}.calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar-days span.today{background-color:var(--secondary-color);color:var(--text-color);text-decoration:underline}.calendar-days span.selected{background-color:var(--primary-color);color:var(--text-color)}.calendar-days span.in-range{background-color:#fd9;color:#000}.calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar-days span:hover:not(.disabled){background-color:var(--secondary-color);color:var(--text-color)}.calendar-body{position:relative}.close-button{float:right;margin-top:10px;background-color:#fff3cd;color:#383838;border:none;padding:6px 12px;cursor:pointer;border-radius:20px;font-size:12px;font-weight:500;transition:all .2s ease}.close-button:hover{background-color:#e9ebec;box-shadow:0 2px 4px #eeebeb26}.close-button:active{transform:translateY(1px)}.time-inputs{display:flex;justify-content:space-between;margin-top:10px}.time-input{display:flex;flex-direction:column;width:45%}.time-input label{font-size:.9rem;margin-bottom:5px}.time-input input{padding:8px;font-size:.9rem;border:1px solid #ccc;border-radius:4px}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], placeholder: [{
@@ -1344,13 +1298,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$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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmationComponent, deps: [{ token: i1$1.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:var(--font-family);color:#151920;font-size:19px}.modal-body{text-align:left}.modal-body p{color:#15192080;font-family:var(--font-family);font-size:14px}.btn-primary{font-family:var(--font-family);background-color:var(--primary-color);border:1px solid var(--primary-color);border-radius:8px;width:130px;height:42px;color:var(--text-color);transition:opacity .3s,transform .1s}.btn-primary:hover{opacity:.8}.btn-primary:active{transform:scale(.98);background-color:var(--primary-color);border:1px solid var(--primary-color)}.btn-secondary{font-family:var(--font-family);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$2.NgbActiveModal }]; }, propDecorators: { title: [{
+            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:var(--font-family);color:#151920;font-size:19px}.modal-body{text-align:left}.modal-body p{color:#15192080;font-family:var(--font-family);font-size:14px}.btn-primary{font-family:var(--font-family);background-color:var(--primary-color);border:1px solid var(--primary-color);border-radius:8px;width:130px;height:42px;color:var(--text-color);transition:opacity .3s,transform .1s}.btn-primary:hover{opacity:.8}.btn-primary:active{transform:scale(.98);background-color:var(--primary-color);border:1px solid var(--primary-color)}.btn-secondary{font-family:var(--font-family);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$1.NgbActiveModal }]; }, propDecorators: { title: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -1398,11 +1352,11 @@ 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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:var(--primary-color);color:var(--text-color)}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:var(--primary-color);cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#e5e5e5;color:var(--primary-color)}.page-info{margin-left:1rem;font-size:1rem;color:var(--primary-color);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,
-            args: [{ selector: 'custom-pagination', 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"] }]
+            args: [{ selector: 'custom-pagination', 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:var(--primary-color);color:var(--text-color)}.page-item .page-link{padding:.5rem .75rem;border:1px solid #dee2e6;border-radius:.25rem;text-decoration:none;color:var(--primary-color);cursor:pointer;transition:background-color .2s}.page-item .page-link:hover{background-color:#e5e5e5;color:var(--primary-color)}.page-info{margin-left:1rem;font-size:1rem;color:var(--primary-color);font-weight:700}\n"] }]
         }], propDecorators: { totalItems: [{
                 type: Input
             }], itemsPerPage: [{
@@ -1445,11 +1399,11 @@ 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: i1.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 var(--primary-color);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:var(--primary-color);border-color:var(--primary-color)}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:var(--primary-color);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:var(--primary-color);font-family:var(--font-family);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,
-            args: [{ selector: 'argenta-custom-switch', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'argenta-custom-switch', changeDetection: ChangeDetectionStrategy.OnPush, 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 var(--primary-color);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:var(--primary-color);border-color:var(--primary-color)}.form-check-input:before{content:\"\";position:absolute;width:26px;height:26px;background-color:var(--primary-color);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:var(--primary-color);font-family:var(--font-family);font-size:16px;font-weight:600;height:24px;line-height:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { checked: [{
                 type: Input
             }], label: [{
@@ -1507,11 +1461,11 @@ 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: i1.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: [".file-upload-container{margin-top:10px;font-family:var(--font-family)}.file-upload-container .form-label{font-weight:400;font-family:var(--font-family);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:var(--font-family);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,
-            args: [{ selector: 'argenta-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'argenta-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, 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: [".file-upload-container{margin-top:10px;font-family:var(--font-family)}.file-upload-container .form-label{font-weight:400;font-family:var(--font-family);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:var(--font-family);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"] }]
         }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { accept: [{
                 type: Input
             }], multiple: [{
@@ -1895,7 +1849,7 @@ class InputComponent {
                 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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 }); }
+        ], 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\";.form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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,
@@ -1905,7 +1859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             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"] }]
+                    ], 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\";.form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.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: [{
@@ -2164,7 +2118,7 @@ class MultiSelectComponent {
                 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";.form-group{font-family:var(--font-family);font-size:1rem}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:.9rem;font-weight:400;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2rem;background-image:none;background-repeat:no-repeat;background-position:right .5rem center;height:46px}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:var(--font-family);color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:var(--font-family);color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2174,7 +2128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";.form-group{font-family:var(--font-family);font-size:1rem}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:.9rem;font-weight:400;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2rem;background-image:none;background-repeat:no-repeat;background-position:right .5rem center;height:46px}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:var(--font-family);color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:var(--font-family);color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }, { type: i2$1.HttpClient }]; }, propDecorators: { label: [{
                 type: Input
             }], data: [{
@@ -2243,12 +2197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class RadioComponent {
     constructor() {
-        this.name = 'defaultRadio';
-        this.id = 'radioId';
-        this.value = 'default';
+        this.name = "defaultRadio";
+        this.id = "radioId";
+        this.value = "default";
         this.checked = false;
         this.disabled = false;
-        this.label = 'Radio label';
+        this.label = "Radio label";
         this.marginTop = 0;
         this.marginBottom = 0;
         this.marginLeft = 0;
@@ -2280,53 +2234,19 @@ class RadioComponent {
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: `
-    <div class="form-check" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <input class="form-check-input"
-             type="radio"
-             [name]="name"
-             [id]="id"
-             [value]="value"
-             [checked]="checked"
-             (change)="handleRadioChange($event)"
-             [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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"form-check\"\n  [ngStyle]=\"{\n    'margin-top': marginTop + 'rem',\n    'margin-bottom': marginBottom + 'rem',\n    'margin-left': marginLeft + 'rem',\n    'margin-right': marginRight + 'rem'\n  }\"\n>\n  <input\n    class=\"form-check-input\"\n    type=\"radio\"\n    [name]=\"name\"\n    [id]=\"id\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    (change)=\"handleRadioChange($event)\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"form-check-label\" [for]=\"id\">{{ label }}</label>\n</div>\n", styles: ["@charset \"UTF-8\";.form-check{font-family:var(--font-family);font-size:1rem}.form-check-input{font-family:var(--font-family);color:#333;font-size:1rem;margin-right:.5rem}.form-check-label{font-family:var(--font-family);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,
-            args: [{ selector: 'sim-app-radio', template: `
-    <div class="form-check" [ngStyle]="{
-      'margin-top': marginTop + 'rem',
-      'margin-bottom': marginBottom + 'rem',
-      'margin-left': marginLeft + 'rem',
-      'margin-right': marginRight + 'rem'
-    }">
-      <input class="form-check-input"
-             type="radio"
-             [name]="name"
-             [id]="id"
-             [value]="value"
-             [checked]="checked"
-             (change)="handleRadioChange($event)"
-             [disabled]="disabled">
-      <label class="form-check-label" [for]="id">{{ label }}</label>
-    </div>
-  `, providers: [
+            args: [{ selector: "sim-app-radio", providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RadioComponent),
-                            multi: true
-                        }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"form-check\"\n  [ngStyle]=\"{\n    'margin-top': marginTop + 'rem',\n    'margin-bottom': marginBottom + 'rem',\n    'margin-left': marginLeft + 'rem',\n    'margin-right': marginRight + 'rem'\n  }\"\n>\n  <input\n    class=\"form-check-input\"\n    type=\"radio\"\n    [name]=\"name\"\n    [id]=\"id\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    (change)=\"handleRadioChange($event)\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"form-check-label\" [for]=\"id\">{{ label }}</label>\n</div>\n", styles: ["@charset \"UTF-8\";.form-check{font-family:var(--font-family);font-size:1rem}.form-check-input{font-family:var(--font-family);color:#333;font-size:1rem;margin-right:.5rem}.form-check-label{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:700}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], id: [{
@@ -2367,11 +2287,11 @@ class SearchCustomerComponent {
         this.searchTerm.emit(inputElement.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchCustomerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchCustomerComponent, selector: "argenta-search-customer", inputs: { placeholder: "placeholder", id: "id", disabled: "disabled", readonly: "readonly", autofocus: "autofocus" }, outputs: { searchTerm: "searchTerm" }, ngImport: i0, template: "<div class=\"search-container\">\n  <span class=\"search-icon\">\n   <lucide-icon name=\"search\" [size]=\"16\" color=\"#2CA58D\"></lucide-icon>\n  </span>\n  <input \n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [autofocus]=\"autofocus\"\n    (input)=\"onSearch($event)\" \n    class=\"search-input custom-input\"\n  />\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.search-container{display:flex;align-items:center;border:1px solid #2CA58D;border-radius:8px;padding:5px;background-color:#f7f9fc}.search-icon{padding:0 10px;color:#b0b0b0}.search-input{border:none;outline:none;padding:8px;flex:1;background-color:transparent;font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:35px}.search-input::placeholder{color:#b0b0b0}\n"], dependencies: [{ kind: "component", type: i1$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchCustomerComponent, selector: "argenta-search-customer", inputs: { placeholder: "placeholder", id: "id", disabled: "disabled", readonly: "readonly", autofocus: "autofocus" }, outputs: { searchTerm: "searchTerm" }, ngImport: i0, template: "<div class=\"search-container\">\n  <span class=\"search-icon\" [ngClass]=\"'search-icon-green'\">\n    <lucide-icon name=\"search\" [size]=\"16\"></lucide-icon>\n  </span>\n  <input\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [autofocus]=\"autofocus\"\n    (input)=\"onSearch($event)\"\n    class=\"search-input custom-input\"\n  />\n</div>\n", styles: [".search-container{display:flex;align-items:center;border:1px solid var(--secondary-color);border-radius:8px;padding:5px;background-color:#f7f9fc}.search-icon{padding:0 10px;color:#b0b0b0}.search-input{border:none;outline:none;padding:8px;flex:1;background-color:transparent;font-family:var(--font-family);color:#333;font-size:.9rem;height:35px}.search-input::placeholder{color:#b0b0b0}.search-icon-green{color:var(--secondary-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchCustomerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-search-customer', template: "<div class=\"search-container\">\n  <span class=\"search-icon\">\n   <lucide-icon name=\"search\" [size]=\"16\" color=\"#2CA58D\"></lucide-icon>\n  </span>\n  <input \n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [autofocus]=\"autofocus\"\n    (input)=\"onSearch($event)\" \n    class=\"search-input custom-input\"\n  />\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.search-container{display:flex;align-items:center;border:1px solid #2CA58D;border-radius:8px;padding:5px;background-color:#f7f9fc}.search-icon{padding:0 10px;color:#b0b0b0}.search-input{border:none;outline:none;padding:8px;flex:1;background-color:transparent;font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:35px}.search-input::placeholder{color:#b0b0b0}\n"] }]
+            args: [{ selector: 'argenta-search-customer', template: "<div class=\"search-container\">\n  <span class=\"search-icon\" [ngClass]=\"'search-icon-green'\">\n    <lucide-icon name=\"search\" [size]=\"16\"></lucide-icon>\n  </span>\n  <input\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [autofocus]=\"autofocus\"\n    (input)=\"onSearch($event)\"\n    class=\"search-input custom-input\"\n  />\n</div>\n", styles: [".search-container{display:flex;align-items:center;border:1px solid var(--secondary-color);border-radius:8px;padding:5px;background-color:#f7f9fc}.search-icon{padding:0 10px;color:#b0b0b0}.search-input{border:none;outline:none;padding:8px;flex:1;background-color:transparent;font-family:var(--font-family);color:#333;font-size:.9rem;height:35px}.search-input::placeholder{color:#b0b0b0}.search-icon-green{color:var(--secondary-color)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], id: [{
@@ -2476,7 +2396,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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        ], 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: [".form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
@@ -2486,7 +2406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SearchInputComponent),
                             multi: true
                         }
-                    ], 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"] }]
+                    ], 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: [".form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.custom-input{font-family:var(--font-family);color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }], label: [{
@@ -2611,7 +2531,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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: 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\";.form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -2635,7 +2555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";.form-group{font-family:var(--font-family);font-size:1rem;font-weight:700}.form-check-input{font-family:var(--font-family);color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:var(--font-family);color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:var(--font-family);font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { label: [{
                 type: Input
             }], id: [{
@@ -2696,11 +2616,11 @@ 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: 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 }); }
+    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: [".nav-tabs .nav-item .nav-link{cursor:pointer;font-family:var(--font-family);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}.nav-tabs .nav-item .nav-link{color:var(--primary-color)}.nav-tabs .nav-item .nav-link.active{background-color:var(--primary-color);color:var(--text-color)}\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,
-            args: [{ selector: 'argenta-tab', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'argenta-tab', changeDetection: ChangeDetectionStrategy.OnPush, 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: [".nav-tabs .nav-item .nav-link{cursor:pointer;font-family:var(--font-family);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}.nav-tabs .nav-item .nav-link{color:var(--primary-color)}.nav-tabs .nav-item .nav-link.active{background-color:var(--primary-color);color:var(--text-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }]; }, propDecorators: { tabs: [{
                 type: Input
             }], activeTabIndex: [{
@@ -2890,11 +2810,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 *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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .2rem #7e7e7e40}.custom-button:active{background-color:#7e7e7e40}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #7e7e7e40}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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 *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"] }]
+            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\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .2rem #7e7e7e40}.custom-button:active{background-color:#7e7e7e40}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #7e7e7e40}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
                 type: Input
             }], hiddenColumns: [{
@@ -3171,11 +3091,11 @@ 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: 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"] }] }); }
+    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\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:var(--font-family)}.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:var(--primary-color);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:var(--text-color);border:2px solid var(--primary-color);border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:var(--primary-color);border-color:var(--primary-color);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:var(--primary-color);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,
-            args: [{ selector: 'argenta-custom-tree-node', 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"] }]
+            args: [{ selector: 'argenta-custom-tree-node', 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\";.tree{list-style-type:none;margin:0;padding:0;position:relative;font-family:var(--font-family)}.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:var(--primary-color);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:var(--text-color);border:2px solid var(--primary-color);border-radius:3px;transition:background-color .3s ease,border-color .3s ease}.custom-checkbox input:checked+.checkmark{background-color:var(--primary-color);border-color:var(--primary-color);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:var(--primary-color);transition:color .3s ease}.dot{width:8px;height:8px;background-color:#828282;border-radius:50%;margin-right:8px;opacity:1}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], nodes: [{
@@ -3255,13 +3175,13 @@ class ModalComponent {
     buttonClicked() {
         this.onButtonClick.emit(); // Emitindo o evento
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", componentInputs: "componentInputs", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:#00444c;color:#fff;border-bottom:none;display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:#fff;font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:#fff}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:#00444c;color:#fff;border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", componentInputs: "componentInputs", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'argenta-modal', template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:#00444c;color:#fff;border-bottom:none;display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:#fff;font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:#fff}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:#00444c;color:#fff;border-bottom:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { title: [{
+            args: [{ selector: 'argenta-modal', template: "<div class=\"modal-header custom-modal-header\">\n  <h4 class=\"modal-title\">{{ title }}</h4>\n  <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n  <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n  <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n    {{ closeButtonLabel }}\n  </button>\n  <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n    {{ buttonLabel }}\n  </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:var(--primary-color);color:var(--text-color);border-bottom:none;font-family:var(--font-family);display:flex;justify-content:space-between;align-items:center;padding:1rem}.modal-title{color:var(--text-color);font-size:20px}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:var(--text-color)}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:var(--primary-color);color:var(--text-color);border-bottom:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { title: [{
                 type: Input
             }], component: [{
                 type: Input
@@ -3281,7 +3201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 // Select some icons (use an object, not an array)
 class LucideIconsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i1$1.LucideAngularModule], exports: [LucideAngularModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [i3.LucideAngularModule], exports: [LucideAngularModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, imports: [LucideAngularModule.pick(icons), LucideAngularModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LucideIconsModule, decorators: [{
@@ -3507,7 +3427,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$2.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$1.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: [{
@@ -3515,7 +3435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.NgbModal }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.NgbModal }]; } });
 
 class DataPaginateService {
     constructor(http) {
@@ -3600,6 +3520,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+function setThemeColors(config) {
+    if (config.primary) {
+        document.documentElement.style.setProperty("--primary-color", config.primary);
+    }
+    if (config.secondary) {
+        document.documentElement.style.setProperty("--secondary-color", config.secondary);
+    }
+    if (config.success) {
+        document.documentElement.style.setProperty("--success-color", config.success);
+    }
+    if (config.danger) {
+        document.documentElement.style.setProperty("--danger-color", config.danger);
+    }
+    if (config.warning) {
+        document.documentElement.style.setProperty("--warning-color", config.warning);
+    }
+    if (config.info) {
+        document.documentElement.style.setProperty("--info-color", config.info);
+    }
+    if (config.light) {
+        document.documentElement.style.setProperty("--light-color", config.light);
+    }
+    if (config.dark) {
+        document.documentElement.style.setProperty("--dark-color", config.dark);
+    }
+    if (config.linkBorder) {
+        document.documentElement.style.setProperty("--link-border-color", config.linkBorder);
+    }
+    if (config.background) {
+        document.documentElement.style.setProperty("--background-color", config.background);
+    }
+    if (config.text) {
+        document.documentElement.style.setProperty("--text-color", config.text);
+    }
+    if (config.font) {
+        document.documentElement.style.setProperty("--font-family", config.font);
+    }
+}
+
 /*
  * Public API Surface of sim-lib
  *
@@ -3612,5 +3571,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, ModalComponent, 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, ModalComponent, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent, setThemeColors };
 //# sourceMappingURL=lib-portal-angular.mjs.map