lib-portal-angular 0.0.69 → 0.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/calendar-argenta/calendar-argenta.component.mjs +328 -165
- package/esm2022/lib/components/modal/modal.component.mjs +11 -4
- package/fesm2022/lib-portal-angular.mjs +349 -180
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/calendar-argenta/calendar-argenta.component.d.ts +30 -11
- package/lib/components/modal/modal.component.d.ts +2 -1
- package/package.json +1 -1
@@ -2,15 +2,15 @@ import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostListener, forwardRef, ViewChild, Directive, ViewContainerRef, NgModule, createComponent } from '@angular/core';
|
3
3
|
import * as i1 from '@angular/common';
|
4
4
|
import { CommonModule } from '@angular/common';
|
5
|
+
import * as i2 from '@angular/forms';
|
6
|
+
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
5
7
|
import * as i1$1 from 'lucide-angular';
|
6
8
|
import { LucideAngularModule, icons } from 'lucide-angular';
|
7
|
-
import * as i4 from '@angular/forms';
|
8
|
-
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
9
9
|
import hljs from 'highlight.js';
|
10
10
|
import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
|
11
11
|
import { Subject, of, Subscription, Observable } from 'rxjs';
|
12
12
|
import { debounceTime, startWith, switchMap, map, catchError, takeUntil } from 'rxjs/operators';
|
13
|
-
import * as i2 from '@angular/common/http';
|
13
|
+
import * as i2$1 from '@angular/common/http';
|
14
14
|
import { HttpParams } from '@angular/common/http';
|
15
15
|
import * as i5 from '@ng-select/ng-select';
|
16
16
|
import { NgSelectModule } from '@ng-select/ng-select';
|
@@ -642,54 +642,73 @@ class CalendarArgentaComponent {
|
|
642
642
|
this.label = 'Select a date';
|
643
643
|
this.minDate = null;
|
644
644
|
this.maxDate = null;
|
645
|
-
this.locale = 'pt';
|
646
|
-
this.useTime = false; //
|
647
|
-
this.initialDate = null; //
|
648
|
-
this.
|
645
|
+
this.locale = 'pt';
|
646
|
+
this.useTime = false; // Incluir ou não a hora
|
647
|
+
this.initialDate = null; // Data inicial no modo de data única
|
648
|
+
this.rangeMode = false; // Ativa o modo de intervalo de datas
|
649
|
+
this.startDate = null; // Data de início do intervalo
|
650
|
+
this.endDate = null; // Data de fim do intervalo
|
651
|
+
this.closeButtonLabel = 'Fechar'; // Texto do botão de fechar
|
652
|
+
this.rangeChange = new EventEmitter(); // Evento que emite data única ou intervalo
|
649
653
|
this.currentYear = new Date().getFullYear();
|
650
654
|
this.currentMonth = new Date().getMonth();
|
651
655
|
this.selectedDate = null;
|
656
|
+
this.selectedStartDate = null;
|
657
|
+
this.selectedEndDate = null;
|
652
658
|
this.isCalendarVisible = false;
|
653
659
|
this.inputDate = '';
|
654
660
|
this.invalidDate = false;
|
661
|
+
this.isSelectingStart = true; // Controla se estamos selecionando a data inicial ou final
|
662
|
+
this.startTime = '';
|
663
|
+
this.endTime = '';
|
664
|
+
this.selectedTime = '';
|
655
665
|
this.locales = {
|
656
666
|
en: {
|
657
667
|
months: [
|
658
|
-
'January', 'February', 'March', 'April', 'May', 'June', 'July',
|
659
|
-
'August', 'September', 'October', 'November', 'December'
|
668
|
+
'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
|
660
669
|
],
|
661
670
|
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
662
|
-
invalidDateMessage: 'Invalid date. Please enter a date in the format dd/MM/yyyy'
|
671
|
+
invalidDateMessage: 'Invalid date. Please enter a date in the format dd/MM/yyyy',
|
672
|
+
startTimeLabel: 'Start Time',
|
673
|
+
endTimeLabel: 'End Time',
|
663
674
|
},
|
664
675
|
pt: {
|
665
676
|
months: [
|
666
|
-
'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho',
|
667
|
-
'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
|
677
|
+
'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
|
668
678
|
],
|
669
679
|
daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
|
670
|
-
invalidDateMessage: 'Data inválida. Por favor, insira uma data no formato dd/MM/yyyy'
|
680
|
+
invalidDateMessage: 'Data inválida. Por favor, insira uma data no formato dd/MM/yyyy',
|
681
|
+
startTimeLabel: 'Hora de Início',
|
682
|
+
endTimeLabel: 'Hora de Fim',
|
671
683
|
},
|
672
684
|
es: {
|
673
685
|
months: [
|
674
|
-
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
|
675
|
-
'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
686
|
+
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
676
687
|
],
|
677
688
|
daysOfWeek: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
|
678
|
-
invalidDateMessage: 'Fecha inválida. Por favor, ingrese una fecha en el formato dd/MM/yyyy'
|
689
|
+
invalidDateMessage: 'Fecha inválida. Por favor, ingrese una fecha en el formato dd/MM/yyyy',
|
690
|
+
startTimeLabel: 'Hora de Inicio',
|
691
|
+
endTimeLabel: 'Hora de Fin',
|
679
692
|
}
|
680
693
|
};
|
681
694
|
}
|
682
695
|
ngOnInit() {
|
683
|
-
if (this.
|
684
|
-
|
685
|
-
|
696
|
+
if (this.rangeMode) {
|
697
|
+
if (this.startDate) {
|
698
|
+
this.selectedStartDate = this.parseDate(this.startDate);
|
699
|
+
this.startTime = this.formatTimeForDisplay(this.selectedStartDate);
|
700
|
+
}
|
701
|
+
if (this.endDate) {
|
702
|
+
this.selectedEndDate = this.parseDate(this.endDate);
|
703
|
+
this.endTime = this.formatTimeForDisplay(this.selectedEndDate);
|
704
|
+
}
|
705
|
+
this.updateInputForRange(); // Atualiza o input no modo range com horas
|
686
706
|
}
|
687
707
|
else {
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
this.dateChange.emit(this.inputDate); // Emite a data inicial
|
708
|
+
if (this.initialDate) {
|
709
|
+
this.updateCalendar(this.initialDate); // Atualiza o input único com a data inicial
|
710
|
+
this.selectedTime = this.formatTimeForDisplay(this.selectedDate);
|
711
|
+
}
|
693
712
|
}
|
694
713
|
}
|
695
714
|
ngOnChanges(changes) {
|
@@ -697,123 +716,233 @@ class CalendarArgentaComponent {
|
|
697
716
|
this.updateCalendar(changes['initialDate'].currentValue);
|
698
717
|
}
|
699
718
|
}
|
700
|
-
//
|
719
|
+
// Atualiza o calendário para exibir a data única e a hora
|
701
720
|
updateCalendar(dateString) {
|
702
721
|
const parsedDate = this.parseDate(dateString);
|
703
|
-
|
704
|
-
if (parsedDate !== null && this.validateDate(dateString)) {
|
722
|
+
if (parsedDate && this.validateDate(dateString)) {
|
705
723
|
this.selectedDate = parsedDate;
|
706
724
|
this.currentYear = parsedDate.getFullYear();
|
707
725
|
this.currentMonth = parsedDate.getMonth();
|
708
|
-
this.inputDate = this.formatDateForDisplay(parsedDate);
|
709
|
-
this.
|
710
|
-
this.invalidDate = false;
|
726
|
+
this.inputDate = this.formatDateForDisplay(parsedDate); // Inclui a hora no input principal
|
727
|
+
this.emitSingleOrRange(); // Emite data única ou intervalo
|
728
|
+
this.invalidDate = false;
|
711
729
|
}
|
712
730
|
else {
|
713
|
-
this.invalidDate = true;
|
714
|
-
this.dateChange.emit('Data ou hora inválida'); // Emite mensagem de erro
|
715
|
-
console.log('Data ou hora inválida passada para o componente');
|
731
|
+
this.invalidDate = true;
|
716
732
|
}
|
717
733
|
}
|
718
734
|
onInputChange(event) {
|
719
735
|
const inputValue = event.target.value;
|
720
736
|
this.inputDate = this.applyDateMask(inputValue);
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
this.
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
const hour = Number(hourStr);
|
736
|
-
const minute = Number(minuteStr);
|
737
|
-
// Corrige somente se a hora/minuto forem inválidos
|
738
|
-
if (hour < 0 || hour > 23 || isNaN(hour)) {
|
739
|
-
this.invalidDate = true;
|
740
|
-
this.dateChange.emit('Hora inválida');
|
741
|
-
return;
|
737
|
+
if (this.rangeMode) {
|
738
|
+
const dateParts = this.inputDate.split(' - ');
|
739
|
+
if (dateParts.length === 2) {
|
740
|
+
const [startDate, endDate] = dateParts;
|
741
|
+
// Valida as duas partes do intervalo
|
742
|
+
if (this.validateDate(startDate) && this.validateDate(endDate)) {
|
743
|
+
this.invalidDate = false;
|
744
|
+
const parsedStartDate = this.parseDate(startDate);
|
745
|
+
const parsedEndDate = this.parseDate(endDate);
|
746
|
+
if (parsedStartDate && parsedEndDate) {
|
747
|
+
this.selectedStartDate = parsedStartDate;
|
748
|
+
this.selectedEndDate = parsedEndDate;
|
749
|
+
this.emitSingleOrRange(); // Emite o intervalo atualizado
|
750
|
+
}
|
742
751
|
}
|
743
|
-
else
|
752
|
+
else {
|
744
753
|
this.invalidDate = true;
|
745
|
-
this.dateChange.emit('Hora inválida');
|
746
|
-
return;
|
747
754
|
}
|
748
|
-
|
755
|
+
}
|
756
|
+
}
|
757
|
+
else {
|
758
|
+
// Valida data única
|
759
|
+
if ((this.useTime && this.inputDate.length === 16) || (!this.useTime && this.inputDate.length === 10)) {
|
760
|
+
if (this.validateDate(this.inputDate)) {
|
749
761
|
this.invalidDate = false;
|
762
|
+
const parsedDate = this.parseDate(this.inputDate);
|
763
|
+
if (parsedDate) {
|
764
|
+
this.selectedDate = parsedDate;
|
765
|
+
this.emitSingleOrRange(); // Emite a data única atualizada
|
766
|
+
}
|
750
767
|
}
|
768
|
+
else {
|
769
|
+
this.invalidDate = true;
|
770
|
+
}
|
771
|
+
}
|
772
|
+
}
|
773
|
+
}
|
774
|
+
// Atualiza o input no modo intervalo
|
775
|
+
updateInputForRange() {
|
776
|
+
if (this.selectedStartDate && this.selectedEndDate) {
|
777
|
+
const formattedStart = this.formatDateForDisplay(this.selectedStartDate);
|
778
|
+
const formattedEnd = this.formatDateForDisplay(this.selectedEndDate);
|
779
|
+
this.inputDate = `${formattedStart} - ${formattedEnd}`;
|
780
|
+
}
|
781
|
+
else if (this.selectedStartDate) {
|
782
|
+
this.inputDate = this.formatDateForDisplay(this.selectedStartDate);
|
783
|
+
}
|
784
|
+
}
|
785
|
+
/// Emite data única ou intervalo, incluindo horas
|
786
|
+
emitSingleOrRange() {
|
787
|
+
if (this.rangeMode) {
|
788
|
+
const formattedStart = this.selectedStartDate ? this.formatDateForDisplay(this.selectedStartDate) : '';
|
789
|
+
const formattedEnd = this.selectedEndDate ? this.formatDateForDisplay(this.selectedEndDate) : '';
|
790
|
+
this.inputDate = `${formattedStart} - ${formattedEnd}`; // Atualiza o input principal com o range e horas
|
791
|
+
this.rangeChange.emit({ start: formattedStart, end: formattedEnd });
|
792
|
+
}
|
793
|
+
else {
|
794
|
+
const formattedDate = this.selectedDate ? this.formatDateForDisplay(this.selectedDate) : '';
|
795
|
+
this.inputDate = formattedDate; // Atualiza o input principal com a data única e hora
|
796
|
+
this.rangeChange.emit({ start: formattedDate, end: '' });
|
797
|
+
}
|
798
|
+
}
|
799
|
+
// Função para tratar mudanças nas horas
|
800
|
+
onTimeChange(type) {
|
801
|
+
if (type === 'start') {
|
802
|
+
if (this.selectedStartDate) {
|
803
|
+
const [hours, minutes] = this.startTime ? this.startTime.split(':') : ['00', '00'];
|
804
|
+
this.selectedStartDate.setHours(+hours, +minutes);
|
751
805
|
}
|
752
806
|
}
|
753
|
-
|
754
|
-
|
755
|
-
|
756
|
-
this.
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
|
765
|
-
|
807
|
+
else if (type === 'end') {
|
808
|
+
if (this.selectedEndDate) {
|
809
|
+
const [hours, minutes] = this.endTime ? this.endTime.split(':') : ['00', '00'];
|
810
|
+
this.selectedEndDate.setHours(+hours, +minutes);
|
811
|
+
}
|
812
|
+
}
|
813
|
+
else if (type === 'single') {
|
814
|
+
if (this.selectedDate) {
|
815
|
+
const [hours, minutes] = this.selectedTime ? this.selectedTime.split(':') : ['00', '00'];
|
816
|
+
this.selectedDate.setHours(+hours, +minutes);
|
817
|
+
}
|
818
|
+
}
|
819
|
+
this.emitSingleOrRange(); // Atualiza o valor no input principal
|
820
|
+
}
|
821
|
+
// Função para formatação da hora no input de hora
|
822
|
+
formatTimeForDisplay(date) {
|
823
|
+
if (!date)
|
824
|
+
return '';
|
825
|
+
const hours = date.getHours().toString().padStart(2, '0');
|
826
|
+
const minutes = date.getMinutes().toString().padStart(2, '0');
|
827
|
+
return `${hours}:${minutes}`;
|
828
|
+
}
|
829
|
+
// Método para selecionar uma data no calendário
|
830
|
+
selectDate(day) {
|
831
|
+
const date = new Date(this.currentYear, this.currentMonth, day);
|
832
|
+
if (this.rangeMode) {
|
833
|
+
// Lógica para rangeMode
|
834
|
+
if (this.isSelectingStart) {
|
835
|
+
this.selectedStartDate = date;
|
836
|
+
if (this.startTime) {
|
837
|
+
const [hours, minutes] = this.startTime.split(':');
|
838
|
+
this.selectedStartDate.setHours(+hours, +minutes);
|
766
839
|
}
|
767
840
|
else {
|
768
|
-
|
769
|
-
this.
|
841
|
+
this.selectedStartDate.setHours(0, 0);
|
842
|
+
this.startTime = '00:00';
|
770
843
|
}
|
844
|
+
this.isSelectingStart = false;
|
771
845
|
}
|
772
846
|
else {
|
773
|
-
this.
|
774
|
-
this.
|
847
|
+
this.selectedEndDate = date;
|
848
|
+
if (this.endTime) {
|
849
|
+
const [hours, minutes] = this.endTime.split(':');
|
850
|
+
this.selectedEndDate.setHours(+hours, +minutes);
|
851
|
+
}
|
852
|
+
else {
|
853
|
+
this.selectedEndDate.setHours(0, 0);
|
854
|
+
this.endTime = '00:00';
|
855
|
+
}
|
856
|
+
this.isSelectingStart = true;
|
857
|
+
this.emitSingleOrRange();
|
775
858
|
}
|
859
|
+
this.updateInputForRange();
|
860
|
+
// O calendário só será fechado ao clicar no botão "Fechar"
|
776
861
|
}
|
777
|
-
|
778
|
-
|
779
|
-
|
780
|
-
|
781
|
-
|
782
|
-
|
783
|
-
|
784
|
-
|
785
|
-
|
786
|
-
|
787
|
-
|
788
|
-
|
862
|
+
else {
|
863
|
+
// Lógica para quando não está em rangeMode
|
864
|
+
this.selectedDate = date;
|
865
|
+
if (this.selectedTime) {
|
866
|
+
const [hours, minutes] = this.selectedTime.split(':');
|
867
|
+
this.selectedDate.setHours(+hours, +minutes);
|
868
|
+
}
|
869
|
+
else {
|
870
|
+
this.selectedDate.setHours(0, 0);
|
871
|
+
this.selectedTime = '00:00';
|
872
|
+
}
|
873
|
+
this.inputDate = this.formatDateForDisplay(date);
|
874
|
+
this.emitSingleOrRange();
|
875
|
+
// **Fechar o calendário apenas se `useTime` for false**
|
876
|
+
if (!this.useTime) {
|
877
|
+
this.isCalendarVisible = false; // Fecha o calendário automaticamente se `useTime` for false
|
878
|
+
}
|
879
|
+
// Se `useTime` for true, o calendário permanece aberto para inserir a hora
|
789
880
|
}
|
790
|
-
return formattedDate;
|
791
881
|
}
|
792
882
|
applyDateMask(inputValue) {
|
883
|
+
// Remove qualquer caractere que não seja numérico
|
793
884
|
let digitsOnly = inputValue.replace(/\D/g, '');
|
794
|
-
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
799
|
-
|
800
|
-
|
801
|
-
|
802
|
-
|
803
|
-
|
804
|
-
|
805
|
-
|
806
|
-
|
807
|
-
|
808
|
-
|
885
|
+
if (this.rangeMode) {
|
886
|
+
const maxLength = this.useTime ? 28 : 17; // Ajusta o comprimento máximo para intervalo com ou sem tempo
|
887
|
+
// Certifica-se de que a entrada não excede o comprimento permitido
|
888
|
+
if (digitsOnly.length > maxLength) {
|
889
|
+
digitsOnly = digitsOnly.substring(0, maxLength);
|
890
|
+
}
|
891
|
+
// Primeiro intervalo (start date)
|
892
|
+
let day1 = digitsOnly.substring(0, 2);
|
893
|
+
let month1 = digitsOnly.substring(2, 4);
|
894
|
+
let year1 = digitsOnly.substring(4, 8);
|
895
|
+
let hour1 = digitsOnly.substring(8, 10);
|
896
|
+
let minute1 = digitsOnly.substring(10, 12);
|
897
|
+
// Cria a data formatada para a primeira parte (start date)
|
898
|
+
let maskedDate = `${day1}/${month1}/${year1}`;
|
899
|
+
if (this.useTime && hour1 && minute1) {
|
900
|
+
maskedDate += ` ${hour1}:${minute1}`;
|
901
|
+
}
|
902
|
+
// Adiciona o separador ' - ' se houver dados para o segundo intervalo
|
903
|
+
if (digitsOnly.length > 12) {
|
904
|
+
maskedDate += ' - ';
|
905
|
+
}
|
906
|
+
// Segundo intervalo (end date)
|
907
|
+
let day2 = digitsOnly.substring(12, 14);
|
908
|
+
let month2 = digitsOnly.substring(14, 16);
|
909
|
+
let year2 = digitsOnly.substring(16, 20);
|
910
|
+
let hour2 = digitsOnly.substring(20, 22);
|
911
|
+
let minute2 = digitsOnly.substring(22, 24);
|
912
|
+
let endDatePart = `${day2}/${month2}/${year2}`;
|
913
|
+
if (this.useTime && hour2 && minute2) {
|
914
|
+
endDatePart += ` ${hour2}:${minute2}`;
|
915
|
+
}
|
916
|
+
// Adiciona a segunda parte (end date) ao input, se aplicável
|
917
|
+
if (digitsOnly.length > 12) {
|
918
|
+
maskedDate += endDatePart;
|
919
|
+
}
|
920
|
+
return maskedDate;
|
921
|
+
}
|
922
|
+
else {
|
923
|
+
const maxLength = this.useTime ? 16 : 10;
|
924
|
+
if (digitsOnly.length > maxLength) {
|
925
|
+
digitsOnly = digitsOnly.substring(0, maxLength);
|
926
|
+
}
|
927
|
+
let day = digitsOnly.substring(0, 2);
|
928
|
+
let month = digitsOnly.substring(2, 4);
|
929
|
+
let year = digitsOnly.substring(4, 8);
|
930
|
+
let hour = digitsOnly.substring(8, 10);
|
931
|
+
let minute = digitsOnly.substring(10, 12);
|
932
|
+
let maskedDate = `${day}/${month}/${year}`;
|
933
|
+
if (this.useTime && hour && minute) {
|
934
|
+
maskedDate += ` ${hour}:${minute}`;
|
935
|
+
}
|
936
|
+
return maskedDate;
|
937
|
+
}
|
809
938
|
}
|
939
|
+
// Validação da data
|
810
940
|
validateDate(inputValue) {
|
811
941
|
const [datePart, timePart] = inputValue.split(' ');
|
812
942
|
const [dayStr, monthStr, yearStr] = datePart.split('/');
|
813
943
|
const day = Number(dayStr);
|
814
944
|
const month = Number(monthStr);
|
815
945
|
const year = Number(yearStr);
|
816
|
-
// Validação de data
|
817
946
|
if (month < 1 || month > 12 || yearStr.length !== 4 || isNaN(year)) {
|
818
947
|
return false;
|
819
948
|
}
|
@@ -821,30 +950,36 @@ class CalendarArgentaComponent {
|
|
821
950
|
if (day < 1 || day > lastDayOfMonth) {
|
822
951
|
return false;
|
823
952
|
}
|
824
|
-
// Validação de hora
|
825
953
|
if (this.useTime && timePart) {
|
826
954
|
const [hourStr, minuteStr] = timePart.split(':');
|
827
955
|
const hour = Number(hourStr);
|
828
956
|
const minute = Number(minuteStr);
|
829
957
|
if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || isNaN(hour) || isNaN(minute)) {
|
830
|
-
return false;
|
958
|
+
return false;
|
831
959
|
}
|
832
960
|
}
|
833
961
|
return true;
|
834
962
|
}
|
835
|
-
|
836
|
-
const
|
837
|
-
|
838
|
-
if (
|
839
|
-
|
963
|
+
handleKeyPress(event) {
|
964
|
+
const charCode = event.key.charCodeAt(0);
|
965
|
+
// Permitir apenas números e barra "/"
|
966
|
+
if ((charCode < 48 || charCode > 57) && charCode !== 47) {
|
967
|
+
event.preventDefault(); // Bloqueia a inserção de caracteres não permitidos
|
840
968
|
}
|
841
|
-
|
842
|
-
if (this.useTime
|
843
|
-
|
844
|
-
date.setHours(hour || 0, minute || 0);
|
969
|
+
// Limita o tamanho da entrada conforme o tipo de dado (com ou sem hora)
|
970
|
+
if (this.inputDate.replace(/\D/g, '').length >= (this.useTime ? 12 : 8)) {
|
971
|
+
event.preventDefault(); // Limita o número de caracteres permitidos
|
845
972
|
}
|
846
|
-
return date;
|
847
973
|
}
|
974
|
+
// Fecha o calendário
|
975
|
+
closeCalendar() {
|
976
|
+
this.isCalendarVisible = false;
|
977
|
+
}
|
978
|
+
// Alterna a visibilidade do calendário
|
979
|
+
toggleCalendar() {
|
980
|
+
this.isCalendarVisible = !this.isCalendarVisible;
|
981
|
+
}
|
982
|
+
// Formata a data e hora para exibição no input principal
|
848
983
|
formatDateForDisplay(date) {
|
849
984
|
const day = date.getDate().toString().padStart(2, '0');
|
850
985
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
@@ -857,72 +992,56 @@ class CalendarArgentaComponent {
|
|
857
992
|
}
|
858
993
|
return formattedDate;
|
859
994
|
}
|
860
|
-
|
861
|
-
|
862
|
-
|
863
|
-
|
864
|
-
const
|
865
|
-
|
866
|
-
this.
|
867
|
-
|
868
|
-
|
995
|
+
// Formata a data para emitir no evento
|
996
|
+
formatDateForEmit(date) {
|
997
|
+
const day = date.getDate().toString().padStart(2, '0');
|
998
|
+
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
999
|
+
const year = date.getFullYear();
|
1000
|
+
let formattedDate = `${day}/${month}/${year}`;
|
1001
|
+
if (this.useTime) {
|
1002
|
+
const hours = date.getHours().toString().padStart(2, '0');
|
1003
|
+
const minutes = date.getMinutes().toString().padStart(2, '0');
|
1004
|
+
formattedDate += ` - ${hours}:${minutes}`;
|
1005
|
+
}
|
1006
|
+
return formattedDate;
|
869
1007
|
}
|
870
|
-
|
871
|
-
|
872
|
-
|
873
|
-
|
1008
|
+
// Função para parsing de string para Date
|
1009
|
+
parseDate(dateStr) {
|
1010
|
+
const [datePart, timePart] = dateStr.split(' ');
|
1011
|
+
const [day, month, year] = datePart.split('/').map(Number);
|
1012
|
+
if (!day || !month || !year) {
|
1013
|
+
return null;
|
874
1014
|
}
|
875
|
-
|
876
|
-
|
1015
|
+
const date = new Date(year, month - 1, day);
|
1016
|
+
if (this.useTime && timePart) {
|
1017
|
+
const [hour, minute] = timePart.split(':').map(Number);
|
1018
|
+
date.setHours(hour || 0, minute || 0);
|
877
1019
|
}
|
1020
|
+
return date;
|
878
1021
|
}
|
1022
|
+
// Gera a lista de dias no mês atual
|
879
1023
|
get daysInMonth() {
|
880
|
-
const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
|
881
|
-
const totalDaysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
|
882
|
-
const daysArray = Array.from({ length: totalDaysInMonth }, (_, i) => i + 1);
|
1024
|
+
const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
|
1025
|
+
const totalDaysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
|
1026
|
+
const daysArray = Array.from({ length: totalDaysInMonth }, (_, i) => i + 1);
|
883
1027
|
const leadingEmptyDays = Array(firstDayOfMonth).fill(null); // Dias vazios antes do primeiro dia do mês
|
884
|
-
return [...leadingEmptyDays, ...daysArray];
|
885
|
-
}
|
886
|
-
get months() {
|
887
|
-
return this.locales[this.locale]?.months || this.locales['en'].months;
|
888
|
-
}
|
889
|
-
get daysOfWeek() {
|
890
|
-
return this.locales[this.locale]?.daysOfWeek || this.locales['en'].daysOfWeek;
|
891
|
-
}
|
892
|
-
prevMonth() {
|
893
|
-
if (this.currentMonth === 0) {
|
894
|
-
this.currentMonth = 11;
|
895
|
-
this.currentYear--;
|
896
|
-
}
|
897
|
-
else {
|
898
|
-
this.currentMonth--;
|
899
|
-
}
|
900
|
-
}
|
901
|
-
nextMonth() {
|
902
|
-
if (this.currentMonth === 11) {
|
903
|
-
this.currentMonth = 0;
|
904
|
-
this.currentYear++;
|
905
|
-
}
|
906
|
-
else {
|
907
|
-
this.currentMonth++;
|
908
|
-
}
|
1028
|
+
return [...leadingEmptyDays, ...daysArray];
|
909
1029
|
}
|
1030
|
+
// Verifica se um dia está selecionado
|
910
1031
|
isSelected(day) {
|
911
1032
|
if (!this.selectedDate)
|
912
1033
|
return false;
|
913
1034
|
const selectedDay = this.selectedDate.getDate();
|
914
1035
|
const selectedMonth = this.selectedDate.getMonth();
|
915
1036
|
const selectedYear = this.selectedDate.getFullYear();
|
916
|
-
return
|
917
|
-
selectedMonth === this.currentMonth &&
|
918
|
-
selectedYear === this.currentYear);
|
1037
|
+
return selectedDay === day && selectedMonth === this.currentMonth && selectedYear === this.currentYear;
|
919
1038
|
}
|
1039
|
+
// Verifica se o dia é hoje
|
920
1040
|
isToday(day) {
|
921
1041
|
const today = new Date();
|
922
|
-
return
|
923
|
-
today.getMonth() === this.currentMonth &&
|
924
|
-
today.getDate() === day);
|
1042
|
+
return today.getFullYear() === this.currentYear && today.getMonth() === this.currentMonth && today.getDate() === day;
|
925
1043
|
}
|
1044
|
+
// Verifica se a data está desabilitada
|
926
1045
|
isDateDisabled(day) {
|
927
1046
|
const date = new Date(this.currentYear, this.currentMonth, day);
|
928
1047
|
if (this.minDate && date < this.minDate)
|
@@ -931,12 +1050,47 @@ class CalendarArgentaComponent {
|
|
931
1050
|
return true;
|
932
1051
|
return false;
|
933
1052
|
}
|
1053
|
+
// Verifica se um dia está no intervalo selecionado
|
1054
|
+
isInRange(day) {
|
1055
|
+
if (!this.selectedStartDate || !this.selectedEndDate)
|
1056
|
+
return false;
|
1057
|
+
const date = new Date(this.currentYear, this.currentMonth, day);
|
1058
|
+
return date >= this.selectedStartDate && date <= this.selectedEndDate;
|
1059
|
+
}
|
1060
|
+
// Avança para o próximo mês
|
1061
|
+
nextMonth() {
|
1062
|
+
if (this.currentMonth === 11) {
|
1063
|
+
this.currentMonth = 0;
|
1064
|
+
this.currentYear++;
|
1065
|
+
}
|
1066
|
+
else {
|
1067
|
+
this.currentMonth++;
|
1068
|
+
}
|
1069
|
+
}
|
1070
|
+
// Retrocede para o mês anterior
|
1071
|
+
prevMonth() {
|
1072
|
+
if (this.currentMonth === 0) {
|
1073
|
+
this.currentMonth = 11;
|
1074
|
+
this.currentYear--;
|
1075
|
+
}
|
1076
|
+
else {
|
1077
|
+
this.currentMonth--;
|
1078
|
+
}
|
1079
|
+
}
|
1080
|
+
// Retorna a lista de meses de acordo com o locale
|
1081
|
+
get months() {
|
1082
|
+
return this.locales[this.locale]?.months || this.locales['en'].months;
|
1083
|
+
}
|
1084
|
+
// Retorna a lista de dias da semana de acordo com o locale
|
1085
|
+
get daysOfWeek() {
|
1086
|
+
return this.locales[this.locale]?.daysOfWeek || this.locales['en'].daysOfWeek;
|
1087
|
+
}
|
934
1088
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarArgentaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
935
|
-
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: {
|
1089
|
+
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()\">‹</button>\n <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n <button (click)=\"nextMonth()\">›</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"] }] }); }
|
936
1090
|
}
|
937
1091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarArgentaComponent, decorators: [{
|
938
1092
|
type: Component,
|
939
|
-
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
|
1093
|
+
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()\">‹</button>\n <span>{{ months[currentMonth] }} {{ currentYear }}</span>\n <button (click)=\"nextMonth()\">›</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"] }]
|
940
1094
|
}], propDecorators: { id: [{
|
941
1095
|
type: Input
|
942
1096
|
}], placeholder: [{
|
@@ -953,7 +1107,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
953
1107
|
type: Input
|
954
1108
|
}], initialDate: [{
|
955
1109
|
type: Input
|
956
|
-
}],
|
1110
|
+
}], rangeMode: [{
|
1111
|
+
type: Input
|
1112
|
+
}], startDate: [{
|
1113
|
+
type: Input
|
1114
|
+
}], endDate: [{
|
1115
|
+
type: Input
|
1116
|
+
}], closeButtonLabel: [{
|
1117
|
+
type: Input
|
1118
|
+
}], rangeChange: [{
|
957
1119
|
type: Output
|
958
1120
|
}] } });
|
959
1121
|
|
@@ -1733,7 +1895,7 @@ class InputComponent {
|
|
1733
1895
|
useExisting: forwardRef(() => InputComponent),
|
1734
1896
|
multi: true
|
1735
1897
|
}
|
1736
|
-
], 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()\">×</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:
|
1898
|
+
], 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()\">×</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 }); }
|
1737
1899
|
}
|
1738
1900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputComponent, decorators: [{
|
1739
1901
|
type: Component,
|
@@ -1995,14 +2157,14 @@ class MultiSelectComponent {
|
|
1995
2157
|
return true;
|
1996
2158
|
}
|
1997
2159
|
}
|
1998
|
-
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 }); }
|
2160
|
+
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 }); }
|
1999
2161
|
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: [
|
2000
2162
|
{
|
2001
2163
|
provide: NG_VALUE_ACCESSOR,
|
2002
2164
|
useExisting: forwardRef(() => MultiSelectComponent),
|
2003
2165
|
multi: true
|
2004
2166
|
}
|
2005
|
-
], 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:
|
2167
|
+
], 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 }); }
|
2006
2168
|
}
|
2007
2169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
2008
2170
|
type: Component,
|
@@ -2013,7 +2175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2013
2175
|
multi: true
|
2014
2176
|
}
|
2015
2177
|
], 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"] }]
|
2016
|
-
}], ctorParameters: function () { return [{ type: AuthService }, { type: i2.HttpClient }]; }, propDecorators: { label: [{
|
2178
|
+
}], ctorParameters: function () { return [{ type: AuthService }, { type: i2$1.HttpClient }]; }, propDecorators: { label: [{
|
2017
2179
|
type: Input
|
2018
2180
|
}], data: [{
|
2019
2181
|
type: Input
|
@@ -2314,7 +2476,7 @@ class SearchInputComponent {
|
|
2314
2476
|
useExisting: forwardRef(() => SearchInputComponent),
|
2315
2477
|
multi: true
|
2316
2478
|
}
|
2317
|
-
], 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:
|
2479
|
+
], 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"] }] }); }
|
2318
2480
|
}
|
2319
2481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInputComponent, decorators: [{
|
2320
2482
|
type: Component,
|
@@ -2449,7 +2611,7 @@ class SelectComponent {
|
|
2449
2611
|
<lucide-icon name="chevron-down" [size]="16" color="#5E6366" [strokeWidth]="1.75"></lucide-icon>
|
2450
2612
|
</div>
|
2451
2613
|
</div>
|
2452
|
-
`, 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:
|
2614
|
+
`, 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 }); }
|
2453
2615
|
}
|
2454
2616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectComponent, decorators: [{
|
2455
2617
|
type: Component,
|
@@ -2728,7 +2890,7 @@ class DataTableComponent {
|
|
2728
2890
|
this.onButtonClick.emit(); // Emitindo o evento
|
2729
2891
|
}
|
2730
2892
|
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 }); }
|
2731
|
-
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:
|
2893
|
+
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 }); }
|
2732
2894
|
}
|
2733
2895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
2734
2896
|
type: Component,
|
@@ -3079,8 +3241,13 @@ class ModalComponent {
|
|
3079
3241
|
this.onButtonClick = new EventEmitter(); // Novo evento
|
3080
3242
|
}
|
3081
3243
|
ngOnInit() {
|
3082
|
-
|
3083
|
-
|
3244
|
+
const componentRef = this.dynamicComponent.createComponent(this.component);
|
3245
|
+
const instance = componentRef.instance;
|
3246
|
+
if (this.componentInputs) {
|
3247
|
+
Object.keys(this.componentInputs).forEach(inputName => {
|
3248
|
+
instance[inputName] = this.componentInputs[inputName];
|
3249
|
+
});
|
3250
|
+
}
|
3084
3251
|
}
|
3085
3252
|
closeModal() {
|
3086
3253
|
this.activeModal.close();
|
@@ -3089,7 +3256,7 @@ class ModalComponent {
|
|
3089
3256
|
this.onButtonClick.emit(); // Emitindo o evento
|
3090
3257
|
}
|
3091
3258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
3092
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n <h4 class=\"modal-title\">{{ title }}</h4>\n <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n {{ closeButtonLabel }}\n </button>\n <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n {{ buttonLabel }}\n </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:#00444c;color:#fff;border-bottom:none;display:flex;justify-content:space-between;align-items:center;padding:1rem}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:#fff}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:#00444c;color:#fff;border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
3259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "argenta-modal", inputs: { title: "title", component: "component", componentInputs: "componentInputs", closeButtonLabel: "closeButtonLabel", buttonLabel: "buttonLabel" }, outputs: { onButtonClick: "onButtonClick" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div class=\"modal-header custom-modal-header\">\n <h4 class=\"modal-title\">{{ title }}</h4>\n <p class=\"float-right close-modal\" (click)=\"closeModal()\">X</p>\n</div>\n<div class=\"modal-body\">\n <ng-container #dynamicComponent></ng-container>\n</div>\n<div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"closeModal()\">\n {{ closeButtonLabel }}\n </button>\n <button *ngIf=\"buttonLabel\" class=\"btn btn-custom\" (click)=\"buttonClicked()\">\n {{ buttonLabel }}\n </button>\n</div>\n", styles: [".modal-content{border-radius:15px;overflow:hidden}.custom-modal-header{background-color:#00444c;color:#fff;border-bottom:none;display:flex;justify-content:space-between;align-items:center;padding:1rem}.close-modal{margin:0;cursor:pointer;font-size:1.5rem;color:#fff}.close-modal:hover{color:#ccc}.modal-footer{border-top:none}.btn-custom{background-color:#00444c;color:#fff;border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
3093
3260
|
}
|
3094
3261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
|
3095
3262
|
type: Component,
|
@@ -3098,6 +3265,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3098
3265
|
type: Input
|
3099
3266
|
}], component: [{
|
3100
3267
|
type: Input
|
3268
|
+
}], componentInputs: [{
|
3269
|
+
type: Input
|
3101
3270
|
}], closeButtonLabel: [{
|
3102
3271
|
type: Input
|
3103
3272
|
}], buttonLabel: [{
|
@@ -3370,7 +3539,7 @@ class DataPaginateService {
|
|
3370
3539
|
};
|
3371
3540
|
}));
|
3372
3541
|
}
|
3373
|
-
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 }); }
|
3542
|
+
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 }); }
|
3374
3543
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn: 'root' }); }
|
3375
3544
|
}
|
3376
3545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, decorators: [{
|
@@ -3378,7 +3547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3378
3547
|
args: [{
|
3379
3548
|
providedIn: 'root'
|
3380
3549
|
}]
|
3381
|
-
}], ctorParameters: function () { return [{ type: i2.HttpClient }]; } });
|
3550
|
+
}], ctorParameters: function () { return [{ type: i2$1.HttpClient }]; } });
|
3382
3551
|
|
3383
3552
|
class RouterParameterService {
|
3384
3553
|
constructor() {
|