lib-portal-angular 0.0.69 → 0.0.70

package/fesm2022/lib-portal-angular.mjs

@@ -2,15 +2,15 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostListener, forwardRef, ViewChild, Directive, ViewContainerRef, NgModule, createComponent } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from 'lucide-angular';
 import { LucideAngularModule, icons } from 'lucide-angular';
-import * as i4 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import hljs from 'highlight.js';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { Subject, of, Subscription, Observable } from 'rxjs';
 import { debounceTime, startWith, switchMap, map, catchError, takeUntil } from 'rxjs/operators';
-import * as i2 from '@angular/common/http';
+import * as i2$1 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import * as i5 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -642,54 +642,73 @@ class CalendarArgentaComponent {
         this.label = 'Select a date';
         this.minDate = null;
         this.maxDate = null;
-        this.locale = 'pt'; // Suporte para diferentes idiomas
-        this.useTime = false; // Propriedade para definir se inclui hora
-        this.initialDate = null; // Propriedade para receber a data inicial
-        this.dateChange = new EventEmitter();
+        this.locale = 'pt';
+        this.useTime = false; // Incluir ou não a hora
+        this.initialDate = null; // Data inicial no modo de data única
+        this.rangeMode = false; // Ativa o modo de intervalo de datas
+        this.startDate = null; // Data de início do intervalo
+        this.endDate = null; // Data de fim do intervalo
+        this.closeButtonLabel = 'Fechar'; // Texto do botão de fechar
+        this.rangeChange = new EventEmitter(); // Evento que emite data única ou intervalo
         this.currentYear = new Date().getFullYear();
         this.currentMonth = new Date().getMonth();
         this.selectedDate = null;
+        this.selectedStartDate = null;
+        this.selectedEndDate = null;
         this.isCalendarVisible = false;
         this.inputDate = '';
         this.invalidDate = false;
+        this.isSelectingStart = true; // Controla se estamos selecionando a data inicial ou final
+        this.startTime = '';
+        this.endTime = '';
+        this.selectedTime = '';
         this.locales = {
             en: {
                 months: [
-                    'January', 'February', 'March', 'April', 'May', 'June', 'July',
-                    'August', 'September', 'October', 'November', 'December'
+                    'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
                 ],
                 daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-                invalidDateMessage: 'Invalid date. Please enter a date in the format dd/MM/yyyy'
+                invalidDateMessage: 'Invalid date. Please enter a date in the format dd/MM/yyyy',
+                startTimeLabel: 'Start Time',
+                endTimeLabel: 'End Time',
             },
             pt: {
                 months: [
-                    'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho',
-                    'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+                    'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
                 ],
                 daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
-                invalidDateMessage: 'Data inválida. Por favor, insira uma data no formato dd/MM/yyyy'
+                invalidDateMessage: 'Data inválida. Por favor, insira uma data no formato dd/MM/yyyy',
+                startTimeLabel: 'Hora de Início',
+                endTimeLabel: 'Hora de Fim',
             },
             es: {
                 months: [
-                    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
-                    'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+                    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
                 ],
                 daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
-                invalidDateMessage: 'Fecha inválida. Por favor, ingrese una fecha en el formato dd/MM/yyyy'
+                invalidDateMessage: 'Fecha inválida. Por favor, ingrese una fecha en el formato dd/MM/yyyy',
+                startTimeLabel: 'Hora de Inicio',
+                endTimeLabel: 'Hora de Fin',
             }
         };
     }
     ngOnInit() {
-        if (this.initialDate) {
-            // Se a initialDate for fornecida, usamos ela
-            this.updateCalendar(this.initialDate);
+        if (this.rangeMode) {
+            if (this.startDate) {
+                this.selectedStartDate = this.parseDate(this.startDate);
+                this.startTime = this.formatTimeForDisplay(this.selectedStartDate);
+            }
+            if (this.endDate) {
+                this.selectedEndDate = this.parseDate(this.endDate);
+                this.endTime = this.formatTimeForDisplay(this.selectedEndDate);
+            }
+            this.updateInputForRange(); // Atualiza o input no modo range com horas
         }
         else {
-            // Caso contrário, usamos a data atual
-            const today = new Date();
-            this.selectedDate = today;
-            this.inputDate = this.formatDateForDisplay(today);
-            this.dateChange.emit(this.inputDate); // Emite a data inicial
+            if (this.initialDate) {
+                this.updateCalendar(this.initialDate); // Atualiza o input único com a data inicial
+                this.selectedTime = this.formatTimeForDisplay(this.selectedDate);
+            }
         }
     }
     ngOnChanges(changes) {
@@ -697,123 +716,233 @@ class CalendarArgentaComponent {
             this.updateCalendar(changes['initialDate'].currentValue);
         }
     }
-    // Método para atualizar o calendário com a data passada
+    // Atualiza o calendário para exibir a data única e a hora
     updateCalendar(dateString) {
         const parsedDate = this.parseDate(dateString);
-        // Verifica se a data é válida
-        if (parsedDate !== null && this.validateDate(dateString)) {
+        if (parsedDate && this.validateDate(dateString)) {
             this.selectedDate = parsedDate;
             this.currentYear = parsedDate.getFullYear();
             this.currentMonth = parsedDate.getMonth();
-            this.inputDate = this.formatDateForDisplay(parsedDate);
-            this.dateChange.emit(this.inputDate); // Emite a nova data
-            this.invalidDate = false; // Remove o status de data inválida
+            this.inputDate = this.formatDateForDisplay(parsedDate); // Inclui a hora no input principal
+            this.emitSingleOrRange(); // Emite data única ou intervalo
+            this.invalidDate = false;
         }
         else {
-            this.invalidDate = true; // Marca a data como inválida
-            this.dateChange.emit('Data ou hora inválida'); // Emite mensagem de erro
-            console.log('Data ou hora inválida passada para o componente');
+            this.invalidDate = true;
         }
     }
     onInputChange(event) {
         const inputValue = event.target.value;
         this.inputDate = this.applyDateMask(inputValue);
-        // Validação para obrigar a hora quando useTime for verdadeiro
-        if (this.useTime) {
-            // Se a entrada não tiver o comprimento correto para data + hora
-            if (this.inputDate.length < 16) {
-                this.invalidDate = true;
-                this.dateChange.emit('Data ou hora inválida');
-                return;
-            }
-        }
-        // Somente validar a hora se o campo useTime estiver ativo e o formato estiver correto
-        if (this.useTime && this.inputDate.length >= 14) {
-            const [datePart, timePart] = this.inputDate.split(' ');
-            if (timePart) {
-                const [hourStr, minuteStr] = timePart.split(':');
-                const hour = Number(hourStr);
-                const minute = Number(minuteStr);
-                // Corrige somente se a hora/minuto forem inválidos
-                if (hour < 0 || hour > 23 || isNaN(hour)) {
-                    this.invalidDate = true;
-                    this.dateChange.emit('Hora inválida');
-                    return;
+        if (this.rangeMode) {
+            const dateParts = this.inputDate.split(' - ');
+            if (dateParts.length === 2) {
+                const [startDate, endDate] = dateParts;
+                // Valida as duas partes do intervalo
+                if (this.validateDate(startDate) && this.validateDate(endDate)) {
+                    this.invalidDate = false;
+                    const parsedStartDate = this.parseDate(startDate);
+                    const parsedEndDate = this.parseDate(endDate);
+                    if (parsedStartDate && parsedEndDate) {
+                        this.selectedStartDate = parsedStartDate;
+                        this.selectedEndDate = parsedEndDate;
+                        this.emitSingleOrRange(); // Emite o intervalo atualizado
+                    }
                 }
-                else if (minute < 0 || minute > 59 || isNaN(minute)) {
+                else {
                     this.invalidDate = true;
-                    this.dateChange.emit('Hora inválida');
-                    return;
                 }
-                else {
+            }
+        }
+        else {
+            // Valida data única
+            if ((this.useTime && this.inputDate.length === 16) || (!this.useTime && this.inputDate.length === 10)) {
+                if (this.validateDate(this.inputDate)) {
                     this.invalidDate = false;
+                    const parsedDate = this.parseDate(this.inputDate);
+                    if (parsedDate) {
+                        this.selectedDate = parsedDate;
+                        this.emitSingleOrRange(); // Emite a data única atualizada
+                    }
+                }
+                else {
+                    this.invalidDate = true;
                 }
             }
         }
-        // Emitir a data quando for válida
-        if ((this.useTime && this.inputDate.length === 16) || (!this.useTime && this.inputDate.length === 10)) {
-            if (this.validateDate(this.inputDate)) {
-                this.invalidDate = false;
-                const parsedDate = this.parseDate(this.inputDate);
-                // Verificar se parsedDate não é nulo antes de acessar suas propriedades
-                if (parsedDate !== null) {
-                    this.currentYear = parsedDate.getFullYear();
-                    this.currentMonth = parsedDate.getMonth();
-                    this.selectedDate = parsedDate;
-                    // Formatar a data para dd/MM/yyyy - HH:mm
-                    const formattedDate = this.formatDateForEmit(parsedDate);
-                    this.dateChange.emit(formattedDate); // Emite a data válida com o hífen
+    }
+    // Atualiza o input no modo intervalo
+    updateInputForRange() {
+        if (this.selectedStartDate && this.selectedEndDate) {
+            const formattedStart = this.formatDateForDisplay(this.selectedStartDate);
+            const formattedEnd = this.formatDateForDisplay(this.selectedEndDate);
+            this.inputDate = `${formattedStart} - ${formattedEnd}`;
+        }
+        else if (this.selectedStartDate) {
+            this.inputDate = this.formatDateForDisplay(this.selectedStartDate);
+        }
+    }
+    /// Emite data única ou intervalo, incluindo horas
+    emitSingleOrRange() {
+        if (this.rangeMode) {
+            const formattedStart = this.selectedStartDate ? this.formatDateForDisplay(this.selectedStartDate) : '';
+            const formattedEnd = this.selectedEndDate ? this.formatDateForDisplay(this.selectedEndDate) : '';
+            this.inputDate = `${formattedStart} - ${formattedEnd}`; // Atualiza o input principal com o range e horas
+            this.rangeChange.emit({ start: formattedStart, end: formattedEnd });
+        }
+        else {
+            const formattedDate = this.selectedDate ? this.formatDateForDisplay(this.selectedDate) : '';
+            this.inputDate = formattedDate; // Atualiza o input principal com a data única e hora
+            this.rangeChange.emit({ start: formattedDate, end: '' });
+        }
+    }
+    // Função para tratar mudanças nas horas
+    onTimeChange(type) {
+        if (type === 'start') {
+            if (this.selectedStartDate) {
+                const [hours, minutes] = this.startTime ? this.startTime.split(':') : ['00', '00'];
+                this.selectedStartDate.setHours(+hours, +minutes);
+            }
+        }
+        else if (type === 'end') {
+            if (this.selectedEndDate) {
+                const [hours, minutes] = this.endTime ? this.endTime.split(':') : ['00', '00'];
+                this.selectedEndDate.setHours(+hours, +minutes);
+            }
+        }
+        else if (type === 'single') {
+            if (this.selectedDate) {
+                const [hours, minutes] = this.selectedTime ? this.selectedTime.split(':') : ['00', '00'];
+                this.selectedDate.setHours(+hours, +minutes);
+            }
+        }
+        this.emitSingleOrRange(); // Atualiza o valor no input principal
+    }
+    // Função para formatação da hora no input de hora
+    formatTimeForDisplay(date) {
+        if (!date)
+            return '';
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+    }
+    // Método para selecionar uma data no calendário
+    selectDate(day) {
+        const date = new Date(this.currentYear, this.currentMonth, day);
+        if (this.rangeMode) {
+            // Lógica para rangeMode
+            if (this.isSelectingStart) {
+                this.selectedStartDate = date;
+                if (this.startTime) {
+                    const [hours, minutes] = this.startTime.split(':');
+                    this.selectedStartDate.setHours(+hours, +minutes);
                 }
                 else {
-                    console.log('Data inválida passada para o componente.');
-                    this.dateChange.emit('Data inválida');
+                    this.selectedStartDate.setHours(0, 0);
+                    this.startTime = '00:00';
                 }
+                this.isSelectingStart = false;
             }
             else {
-                this.invalidDate = true;
-                this.dateChange.emit('Data inválida'); // Emite o evento com mensagem de erro
+                this.selectedEndDate = date;
+                if (this.endTime) {
+                    const [hours, minutes] = this.endTime.split(':');
+                    this.selectedEndDate.setHours(+hours, +minutes);
+                }
+                else {
+                    this.selectedEndDate.setHours(0, 0);
+                    this.endTime = '00:00';
+                }
+                this.isSelectingStart = true;
+                this.emitSingleOrRange();
             }
+            this.updateInputForRange();
+            // O calendário só será fechado ao clicar no botão "Fechar"
         }
-    }
-    // Formatar a data e hora com hífen
-    formatDateForEmit(date) {
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = (date.getMonth() + 1).toString().padStart(2, '0');
-        const year = date.getFullYear();
-        let formattedDate = `${day}/${month}/${year}`;
-        if (this.useTime) {
-            const hours = date.getHours().toString().padStart(2, '0');
-            const minutes = date.getMinutes().toString().padStart(2, '0');
-            // Adiciona o hífen entre a data e a hora
-            formattedDate += ` - ${hours}:${minutes}`;
+        else {
+            // Lógica para quando não está em rangeMode
+            this.selectedDate = date;
+            if (this.selectedTime) {
+                const [hours, minutes] = this.selectedTime.split(':');
+                this.selectedDate.setHours(+hours, +minutes);
+            }
+            else {
+                this.selectedDate.setHours(0, 0);
+                this.selectedTime = '00:00';
+            }
+            this.inputDate = this.formatDateForDisplay(date);
+            this.emitSingleOrRange();
+            // **Fechar o calendário apenas se `useTime` for false**
+            if (!this.useTime) {
+                this.isCalendarVisible = false; // Fecha o calendário automaticamente se `useTime` for false
+            }
+            // Se `useTime` for true, o calendário permanece aberto para inserir a hora
         }
-        return formattedDate;
     }
     applyDateMask(inputValue) {
+        // Remove qualquer caractere que não seja numérico
         let digitsOnly = inputValue.replace(/\D/g, '');
-        // Limita os dígitos com base no uso de hora
-        const maxLength = this.useTime ? 12 : 8;
-        if (digitsOnly.length > maxLength) {
-            digitsOnly = digitsOnly.substring(0, maxLength);
-        }
-        let day = digitsOnly.substring(0, 2);
-        let month = digitsOnly.substring(2, 4);
-        let year = digitsOnly.substring(4, 8);
-        let hour = digitsOnly.substring(8, 10);
-        let minute = digitsOnly.substring(10, 12);
-        let maskedDate = `${day}/${month}/${year}`;
-        if (this.useTime && hour && minute) {
-            maskedDate += ` ${hour}:${minute}`;
-        }
-        return maskedDate;
+        if (this.rangeMode) {
+            const maxLength = this.useTime ? 28 : 17; // Ajusta o comprimento máximo para intervalo com ou sem tempo
+            // Certifica-se de que a entrada não excede o comprimento permitido
+            if (digitsOnly.length > maxLength) {
+                digitsOnly = digitsOnly.substring(0, maxLength);
+            }
+            // Primeiro intervalo (start date)
+            let day1 = digitsOnly.substring(0, 2);
+            let month1 = digitsOnly.substring(2, 4);
+            let year1 = digitsOnly.substring(4, 8);
+            let hour1 = digitsOnly.substring(8, 10);
+            let minute1 = digitsOnly.substring(10, 12);
+            // Cria a data formatada para a primeira parte (start date)
+            let maskedDate = `${day1}/${month1}/${year1}`;
+            if (this.useTime && hour1 && minute1) {
+                maskedDate += ` ${hour1}:${minute1}`;
+            }
+            // Adiciona o separador ' - ' se houver dados para o segundo intervalo
+            if (digitsOnly.length > 12) {
+                maskedDate += ' - ';
+            }
+            // Segundo intervalo (end date)
+            let day2 = digitsOnly.substring(12, 14);
+            let month2 = digitsOnly.substring(14, 16);
+            let year2 = digitsOnly.substring(16, 20);
+            let hour2 = digitsOnly.substring(20, 22);
+            let minute2 = digitsOnly.substring(22, 24);
+            let endDatePart = `${day2}/${month2}/${year2}`;
+            if (this.useTime && hour2 && minute2) {
+                endDatePart += ` ${hour2}:${minute2}`;
+            }
+            // Adiciona a segunda parte (end date) ao input, se aplicável
+            if (digitsOnly.length > 12) {
+                maskedDate += endDatePart;
+            }
+            return maskedDate;
+        }
+        else {
+            const maxLength = this.useTime ? 16 : 10;
+            if (digitsOnly.length > maxLength) {
+                digitsOnly = digitsOnly.substring(0, maxLength);
+            }
+            let day = digitsOnly.substring(0, 2);
+            let month = digitsOnly.substring(2, 4);
+            let year = digitsOnly.substring(4, 8);
+            let hour = digitsOnly.substring(8, 10);
+            let minute = digitsOnly.substring(10, 12);
+            let maskedDate = `${day}/${month}/${year}`;
+            if (this.useTime && hour && minute) {
+                maskedDate += ` ${hour}:${minute}`;
+            }
+            return maskedDate;
+        }
     }
+    // Validação da data
     validateDate(inputValue) {
         const [datePart, timePart] = inputValue.split(' ');
         const [dayStr, monthStr, yearStr] = datePart.split('/');
         const day = Number(dayStr);
         const month = Number(monthStr);
         const year = Number(yearStr);
-        // Validação de data
         if (month < 1 || month > 12 || yearStr.length !== 4 || isNaN(year)) {
             return false;
         }
@@ -821,30 +950,36 @@ class CalendarArgentaComponent {
         if (day < 1 || day > lastDayOfMonth) {
             return false;
         }
-        // Validação de hora
         if (this.useTime && timePart) {
             const [hourStr, minuteStr] = timePart.split(':');
             const hour = Number(hourStr);
             const minute = Number(minuteStr);
             if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || isNaN(hour) || isNaN(minute)) {
-                return false; // Hora ou minuto inválidos
+                return false;
             }
         }
         return true;
     }
-    parseDate(dateStr) {
-        const [datePart, timePart] = dateStr.split(' ');
-        const [day, month, year] = datePart.split('/').map(Number);
-        if (!day || !month || !year) {
-            return null;
+    handleKeyPress(event) {
+        const charCode = event.key.charCodeAt(0);
+        // Permitir apenas números e barra "/"
+        if ((charCode < 48 || charCode > 57) && charCode !== 47) {
+            event.preventDefault(); // Bloqueia a inserção de caracteres não permitidos
         }
-        const date = new Date(year, month - 1, day);
-        if (this.useTime && timePart) {
-            const [hour, minute] = timePart.split(':').map(Number);
-            date.setHours(hour || 0, minute || 0);
+        // Limita o tamanho da entrada conforme o tipo de dado (com ou sem hora)
+        if (this.inputDate.replace(/\D/g, '').length >= (this.useTime ? 12 : 8)) {
+            event.preventDefault(); // Limita o número de caracteres permitidos
         }
-        return date;
     }
+    // Fecha o calendário
+    closeCalendar() {
+        this.isCalendarVisible = false;
+    }
+    // Alterna a visibilidade do calendário
+    toggleCalendar() {
+        this.isCalendarVisible = !this.isCalendarVisible;
+    }
+    // Formata a data e hora para exibição no input principal
     formatDateForDisplay(date) {
         const day = date.getDate().toString().padStart(2, '0');
         const month = (date.getMonth() + 1).toString().padStart(2, '0');
@@ -857,72 +992,56 @@ class CalendarArgentaComponent {
         }
         return formattedDate;
     }
-    toggleCalendar() {
-        this.isCalendarVisible = !this.isCalendarVisible;
-    }
-    selectDate(day) {
-        const date = new Date(this.currentYear, this.currentMonth, day);
-        this.inputDate = this.formatDateForDisplay(date);
-        this.selectedDate = date; // Armazena a data selecionada
-        this.dateChange.emit(this.inputDate); // Emite a data selecionada ao clicar no calendário
-        this.isCalendarVisible = false; // Fecha o calendário após a seleção
+    // Formata a data para emitir no evento
+    formatDateForEmit(date) {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        let formattedDate = `${day}/${month}/${year}`;
+        if (this.useTime) {
+            const hours = date.getHours().toString().padStart(2, '0');
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            formattedDate += ` - ${hours}:${minutes}`;
+        }
+        return formattedDate;
     }
-    handleKeyPress(event) {
-        const charCode = event.key.charCodeAt(0);
-        if (charCode < 48 || charCode > 57) {
-            event.preventDefault();
+    // Função para parsing de string para Date
+    parseDate(dateStr) {
+        const [datePart, timePart] = dateStr.split(' ');
+        const [day, month, year] = datePart.split('/').map(Number);
+        if (!day || !month || !year) {
+            return null;
         }
-        if (this.inputDate.replace(/\D/g, '').length >= (this.useTime ? 12 : 8)) {
-            event.preventDefault();
+        const date = new Date(year, month - 1, day);
+        if (this.useTime && timePart) {
+            const [hour, minute] = timePart.split(':').map(Number);
+            date.setHours(hour || 0, minute || 0);
         }
+        return date;
     }
+    // Gera a lista de dias no mês atual
     get daysInMonth() {
-        const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay(); // Dia da semana do primeiro dia do mês
-        const totalDaysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate(); // Total de dias no mês
-        const daysArray = Array.from({ length: totalDaysInMonth }, (_, i) => i + 1); // Array com todos os dias do mês
+        const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
+        const totalDaysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
+        const daysArray = Array.from({ length: totalDaysInMonth }, (_, i) => i + 1);
         const leadingEmptyDays = Array(firstDayOfMonth).fill(null); // Dias vazios antes do primeiro dia do mês
-        return [...leadingEmptyDays, ...daysArray]; // Retorna os dias vazios seguidos pelos dias do mês
-    }
-    get months() {
-        return this.locales[this.locale]?.months || this.locales['en'].months;
-    }
-    get daysOfWeek() {
-        return this.locales[this.locale]?.daysOfWeek || this.locales['en'].daysOfWeek;
-    }
-    prevMonth() {
-        if (this.currentMonth === 0) {
-            this.currentMonth = 11;
-            this.currentYear--;
-        }
-        else {
-            this.currentMonth--;
-        }
-    }
-    nextMonth() {
-        if (this.currentMonth === 11) {
-            this.currentMonth = 0;
-            this.currentYear++;
-        }
-        else {
-            this.currentMonth++;
-        }
+        return [...leadingEmptyDays, ...daysArray];
     }
+    // Verifica se um dia está selecionado
     isSelected(day) {
         if (!this.selectedDate)
             return false;
         const selectedDay = this.selectedDate.getDate();
         const selectedMonth = this.selectedDate.getMonth();
         const selectedYear = this.selectedDate.getFullYear();
-        return (selectedDay === day &&
-            selectedMonth === this.currentMonth &&
-            selectedYear === this.currentYear);
+        return selectedDay === day && selectedMonth === this.currentMonth && selectedYear === this.currentYear;
     }
+    // Verifica se o dia é hoje
     isToday(day) {
         const today = new Date();
-        return (today.getFullYear() === this.currentYear &&
-            today.getMonth() === this.currentMonth &&
-            today.getDate() === day);
+        return today.getFullYear() === this.currentYear && today.getMonth() === this.currentMonth && today.getDate() === day;
     }
+    // Verifica se a data está desabilitada
     isDateDisabled(day) {
         const date = new Date(this.currentYear, this.currentMonth, day);
         if (this.minDate && date < this.minDate)
@@ -931,12 +1050,47 @@ class CalendarArgentaComponent {
             return true;
         return false;
     }
+    // Verifica se um dia está no intervalo selecionado
+    isInRange(day) {
+        if (!this.selectedStartDate || !this.selectedEndDate)
+            return false;
+        const date = new Date(this.currentYear, this.currentMonth, day);
+        return date >= this.selectedStartDate && date <= this.selectedEndDate;
+    }
+    // Avança para o próximo mês
+    nextMonth() {
+        if (this.currentMonth === 11) {
+            this.currentMonth = 0;
+            this.currentYear++;
+        }
+        else {
+            this.currentMonth++;
+        }
+    }
+    // Retrocede para o mês anterior
+    prevMonth() {
+        if (this.currentMonth === 0) {
+            this.currentMonth = 11;
+            this.currentYear--;
+        }
+        else {
+            this.currentMonth--;
+        }
+    }
+    // Retorna a lista de meses de acordo com o locale
+    get months() {
+        return this.locales[this.locale]?.months || this.locales['en'].months;
+    }
+    // Retorna a lista de dias da semana de acordo com o locale
+    get daysOfWeek() {
+        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" }, outputs: { dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngClass]=\"'label-styles'\">{{ label }}</label>\n  <div class=\"input-wrapper\">\n    <input\n      id=\"{{ id }}\"\n      type=\"text\"\n      class=\"custom-input\"\n      [attr.placeholder]=\"useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <!-- \u00CDcone de calend\u00E1rio dentro do input -->\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <!-- Mensagem de erro estilo bal\u00E3ozinho -->\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <!-- Mostra a parte de 'HH:mm' apenas se useTime for verdadeiro -->\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              <!-- Somente permite clique em dias v\u00E1lidos -->\n              {{ day ? day : \"\" }}\n              <!-- Exibe o dia se for v\u00E1lido, sen\u00E3o exibe vazio -->\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:#00444c;color:#fff;border:none;padding:8px 12px;cursor:pointer;border-radius:8px;font-size:1.2rem;transition:background-color .2s}.calendar .calendar-header button:hover{background-color:#2ca58d}.calendar .calendar-header span{font-size:1.4rem;color:#00444c;text-align:center;flex-grow:1}.calendar .calendar-body{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar .calendar-body .calendar-day-names{display:contents}.calendar .calendar-body .calendar-day-names span{text-align:center;font-weight:700;margin-bottom:5px;font-size:.9rem}.calendar .calendar-body .calendar-day-names span:nth-child(1){color:#ff8080}.calendar .calendar-body .calendar-day-names span:nth-child(7){color:#555}.calendar .calendar-body .calendar-days{display:contents}.calendar .calendar-body .calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar .calendar-body .calendar-days span.today{background-color:#2ca58d;color:#fff}.calendar .calendar-body .calendar-days span.selected{background-color:#00444c;color:#fff}.calendar .calendar-body .calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar .calendar-body .calendar-days span:hover:not(.disabled){background-color:#2ca58d;color:#fff}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px;padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.error-message{position:relative;background-color:#ff8080;color:#fff;padding:10px;border-radius:8px;font-size:.9rem;max-width:250px;margin-top:5px}.error-message:after{content:\"\";position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#ff8080 transparent transparent transparent}.input-wrapper{position:relative;display:inline-block;width:100%}.input-wrapper .custom-input{width:100%;padding-right:40px;box-sizing:border-box}.input-wrapper .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;color:#b8b8b8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] }); }
+    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"] }] }); }
 }
 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]=\"useTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'\"\n      [value]=\"inputDate\"\n      (input)=\"onInputChange($event)\"\n      (keypress)=\"handleKeyPress($event)\"\n      (click)=\"toggleCalendar()\"\n    />\n    <!-- \u00CDcone de calend\u00E1rio dentro do input -->\n    <lucide-icon name=\"calendar\" class=\"calendar-icon\"></lucide-icon>\n  </div>\n\n  <!-- Mensagem de erro estilo bal\u00E3ozinho -->\n  <div *ngIf=\"invalidDate\" class=\"error-message\">\n    {{ locales[locale].invalidDateMessage }}\n    <!-- Mostra a parte de 'HH:mm' apenas se useTime for verdadeiro -->\n    <span *ngIf=\"useTime\"> HH:mm.</span>\n  </div>\n\n  <div class=\"calendar-wrapper\">\n    <div class=\"calendar-container\" [ngClass]=\"{ open: isCalendarVisible }\">\n      <div class=\"calendar\">\n        <div class=\"calendar-header\">\n          <button (click)=\"prevMonth()\">&#8249;</button>\n          <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n          <button (click)=\"nextMonth()\">&#8250;</button>\n        </div>\n\n        <div class=\"calendar-body\">\n          <div class=\"calendar-day-names\">\n            <span *ngFor=\"let day of daysOfWeek\">{{ day }}</span>\n          </div>\n\n          <div class=\"calendar-days\">\n            <span\n              *ngFor=\"let day of daysInMonth; let i = index\"\n              [class.today]=\"isToday(day)\"\n              [class.selected]=\"isSelected(day)\"\n              [class.disabled]=\"isDateDisabled(day)\"\n              (click)=\"day ? selectDate(day) : null\"\n            >\n              <!-- Somente permite clique em dias v\u00E1lidos -->\n              {{ day ? day : \"\" }}\n              <!-- Exibe o dia se for v\u00E1lido, sen\u00E3o exibe vazio -->\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.calendar-container{overflow:hidden;max-height:0;transition:max-height .4s ease}.calendar-container.open{max-height:500px}.calendar{display:inline-block;border:1px solid #ccc;border-radius:8px;padding:10px;width:450px;font-family:Inter,Arial,sans-serif;transition:max-height .4s ease}.calendar .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.calendar .calendar-header button{background-color:#00444c;color:#fff;border:none;padding:8px 12px;cursor:pointer;border-radius:8px;font-size:1.2rem;transition:background-color .2s}.calendar .calendar-header button:hover{background-color:#2ca58d}.calendar .calendar-header span{font-size:1.4rem;color:#00444c;text-align:center;flex-grow:1}.calendar .calendar-body{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar .calendar-body .calendar-day-names{display:contents}.calendar .calendar-body .calendar-day-names span{text-align:center;font-weight:700;margin-bottom:5px;font-size:.9rem}.calendar .calendar-body .calendar-day-names span:nth-child(1){color:#ff8080}.calendar .calendar-body .calendar-day-names span:nth-child(7){color:#555}.calendar .calendar-body .calendar-days{display:contents}.calendar .calendar-body .calendar-days span{display:flex;justify-content:center;align-items:center;margin:1px;padding:10px;height:45px;width:45px;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s ease}.calendar .calendar-body .calendar-days span.today{background-color:#2ca58d;color:#fff}.calendar .calendar-body .calendar-days span.selected{background-color:#00444c;color:#fff}.calendar .calendar-body .calendar-days span.disabled{background-color:#e9ecef;color:#999;cursor:not-allowed}.calendar .calendar-body .calendar-days span:hover:not(.disabled){background-color:#2ca58d;color:#fff}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px;padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.error-message{position:relative;background-color:#ff8080;color:#fff;padding:10px;border-radius:8px;font-size:.9rem;max-width:250px;margin-top:5px}.error-message:after{content:\"\";position:absolute;top:100%;left:20px;border-width:10px;border-style:solid;border-color:#ff8080 transparent transparent transparent}.input-wrapper{position:relative;display:inline-block;width:100%}.input-wrapper .custom-input{width:100%;padding-right:40px;box-sizing:border-box}.input-wrapper .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);pointer-events:none;color:#b8b8b8}\n"] }]
+            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"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], placeholder: [{
@@ -953,7 +1107,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], initialDate: [{
                 type: Input
-            }], dateChange: [{
+            }], rangeMode: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], closeButtonLabel: [{
+                type: Input
+            }], rangeChange: [{
                 type: Output
             }] } });
 
@@ -1733,7 +1895,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: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CepMaskDirective, selector: "[cepMask]", inputs: ["cepMask"] }, { kind: "directive", type: CnpjMaskDirective, selector: "[cnpjMask]", inputs: ["cnpjMask"] }, { kind: "directive", type: CpfMaskDirective, selector: "[cpfMask]", inputs: ["cpfMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -1995,14 +2157,14 @@ class MultiSelectComponent {
             return true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: AuthService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, selector: "argenta-custom-multi-select", inputs: { label: "label", data: "data", placeholder: "placeholder", selected: "selected", id: "id", bindLabel: "bindLabel", bindValue: "bindValue", permissions: "permissions", closeOnSelect: "closeOnSelect", searchUrl: "searchUrl", multiple: "multiple", searchParams: "searchParams" }, outputs: { keyupEvent: "keyupEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;font-weight:400;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2rem;background-image:none;background-repeat:no-repeat;background-position:right .5rem center;height:46px}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i5.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2013,7 +2175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"hasPermission()\" class=\"form-group\">\n  <label [for]=\"id\" class=\"form-label\" style=\"margin-top: 1rem;\">{{ label }}</label>\n  <ng-select\n    [class.course-entry]=\"isCourseEntered\"\n    class=\"ng-select custom-ng-select\"\n    [items]=\"filteredItems | async\"\n    [multiple]=\"multiple\"\n    [closeOnSelect]=\"closeOnSelect\"\n    [hideSelected]=\"true\"\n    [bindLabel]=\"bindLabel\"\n    [bindValue]=\"bindValue\"\n    [(ngModel)]=\"selected\"\n    [compareWith]=\"compareFn\"\n    (change)=\"onSelectedChange($event)\"\n    (keyup)=\"onKeyUp($event)\"\n    (input)=\"onInputChange($event)\"\n    [id]=\"id\"\n    [placeholder]=\"selected && (multiple ? selected.length === 0 : !selected) ? placeholder : ''\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <ng-template ng-option-tmp let-item=\"item\">\n      {{ item[bindLabel] }}\n    </ng-template>\n  </ng-select>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;font-weight:400;border:1px solid #ccc;border-radius:4px;appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2rem;background-image:none;background-repeat:no-repeat;background-position:right .5rem center;height:46px}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.2rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}.ng-select{display:block;width:100%;font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem}.ng-select .ng-select-container{display:flex;align-items:center;border:1px solid #ccc;border-radius:4px;padding:.5rem;background-color:#fff;color:#333}.ng-select .ng-select-container .ng-value-container{display:flex;align-items:center;flex-grow:1}.ng-select .ng-select-container .ng-clear{display:none}.ng-select .ng-select-container .ng-input{flex-grow:1;border:none;outline:none}.custom-ng-select.ng-select .ng-select-container .ng-input>input{box-sizing:border-box;background:none transparent;border:0 none;box-shadow:none;outline:none;padding:.5rem!important;cursor:default;width:100%}.ng-select .ng-dropdown-panel{border:1px solid #ccc;border-radius:4px;background-color:#fff;color:#333;box-shadow:0 2px 4px #0000001a}.ng-select .ng-dropdown-panel .ng-option{padding:8px;cursor:pointer}.ng-select .ng-dropdown-panel .ng-option:hover{background-color:#f1f1f1}.ng-select .ng-dropdown-panel .ng-option.selected{background-color:#007bff;color:#fff}\n"] }]
-        }], ctorParameters: function () { return [{ type: AuthService }, { type: i2.HttpClient }]; }, propDecorators: { label: [{
+        }], ctorParameters: function () { return [{ type: AuthService }, { type: i2$1.HttpClient }]; }, propDecorators: { label: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -2314,7 +2476,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: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        ], ngImport: i0, template: "<div class=\"form-group\">\n  <label [for]=\"id\" [ngStyle]=\"getLabelStyles()\">{{ label }}</label>\n  <input [type]=\"type\"\n         class=\"form-control custom-input\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         [(ngModel)]=\"value\"\n         (input)=\"onInput($event)\"\n         (change)=\"onChange($event)\"\n         (focus)=\"onFocus($event)\"\n         (blur)=\"onBlur($event)\"\n         (keyup)=\"onKeyup($event)\"\n         (keydown)=\"onKeydown($event)\"\n         (keypress)=\"onKeypress($event)\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.maxlength]=\"maxlength\"\n         [attr.minlength]=\"minlength\"\n         [required]=\"required\"\n         [attr.pattern]=\"pattern\"\n         [autofocus]=\"autofocus\">\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem;width:227px;height:46px}.custom-input::placeholder{font-size:14px;color:#d3d3d3}label{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 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,
@@ -2449,7 +2611,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: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i1$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.form-group{font-family:Inter,Arial,sans-serif;font-size:1rem;font-weight:700}.form-check-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:.9rem}.form-check-label{width:623px;height:19px;top:1608px;left:133px;gap:0px;opacity:0px;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left}.custom-select{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem 2rem .5rem .5rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-repeat:no-repeat;background-position:right .5rem center}.custom-input{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:4px;padding:.5rem}.form-label{font-family:Inter,Arial,sans-serif;color:#333;font-size:1rem;font-weight:700}.label-styles{font-weight:400;font-family:Inter,Arial,sans-serif;font-size:16px;line-height:19.36px;text-align:left;margin-top:1rem;margin-bottom:.5rem}.select-container{position:relative;display:inline-block;width:100%}.select-container lucide-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#5e6366}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -2728,7 +2890,7 @@ class DataTableComponent {
         this.onButtonClick.emit(); // Emitindo o evento
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AuthService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n  <div class=\"left-section\">\n    <div class=\"form-group\">\n      <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n      <select\n        id=\"itemsPerPageSelect\"\n        class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n        [(ngModel)]=\"defaultItemsPerPage\"\n        (ngModelChange)=\"onItemsPerPageChange()\">\n        <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n      </select>\n    </div>\n  </div>\n   <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n    <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n      <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n      {{ buttonLabel }}\n    </button>\n  </div>\n</div>\n\n<div class=\"search-input-container\">\n  <argenta-search-input id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem;\">\n  <table class=\"table table-hover\">\n    <thead>\n      <tr>\n        <ng-container *ngFor=\"let column of columns\">\n          <th *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n            {{ column.label }}\n          </th>\n        </ng-container>\n        <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let item of pagedData; let i = index\">\n        <ng-container *ngFor=\"let column of columns\">\n          <td *ngIf=\"!isColumnHidden(column.prop)\">\n            {{ getNestedProperty(item, column.prop) }}\n          </td>\n        </ng-container>\n        <td *ngIf=\"showActionColumn\" class=\"text-end\">\n          <div class=\"d-flex justify-content-end\">\n            <div *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n            </div>\n            <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n              <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></i-lucide>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n  <custom-pagination\n    [totalItems]=\"totalItems\"\n    [itemsPerPage]=\"defaultItemsPerPage\"\n    [currentPage]=\"currentPage\"\n    [showPageInfo]=\"showPageInfo\"\n    (pageChange)=\"onPageChange($event)\">\n  </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap\";body{font-family:Inter,sans-serif}.clickable-icon{cursor:pointer}:host{font-family:Inter,Arial,sans-serif}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:Inter,Arial,sans-serif;font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:Inter,Arial,sans-serif;font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:Inter,Arial,sans-serif;font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737B7B);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:#00444c;color:#fff;font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:Inter,Arial,sans-serif;font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:Inter,sans-serif;font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:#2ca58d;border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{background-color:#217d6b}.custom-button:active{background-color:#3acaae}.custom-button:focus{outline:none;box-shadow:0 0 0 .2rem #2ca58d40}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -3370,7 +3532,7 @@ class DataPaginateService {
             };
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, decorators: [{
@@ -3378,7 +3540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i2.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i2$1.HttpClient }]; } });
 
 class RouterParameterService {
     constructor() {