@progressio_resources/gravity-design-system 2.0.7 → 2.0.8
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/gravity-calendar/gravity-calendar.component.mjs +40 -13
- package/esm2022/lib/components/gravity-calendar/gravity-month-picker/gravity-month-picker.component.mjs +136 -0
- package/esm2022/lib/components/gravity-text-field/gravity-text-field.component.mjs +1 -1
- package/esm2022/lib/gravity-design-system.module.mjs +4 -1
- package/fesm2022/progressio_resources-gravity-design-system.mjs +173 -12
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-calendar/gravity-calendar.component.d.ts +13 -2
- package/lib/components/gravity-calendar/gravity-month-picker/gravity-month-picker.component.d.ts +40 -0
- package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +1 -1
- package/lib/gravity-design-system.module.d.ts +15 -14
- package/package.json +1 -1
|
@@ -996,9 +996,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
996
996
|
}]
|
|
997
997
|
}] });
|
|
998
998
|
|
|
999
|
+
class GravityMonthPickerComponent {
|
|
1000
|
+
constructor() {
|
|
1001
|
+
this.closeCalendar = new EventEmitter();
|
|
1002
|
+
this.monthSelected = new EventEmitter();
|
|
1003
|
+
this.currentLang = 'en';
|
|
1004
|
+
this.monthsEn = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
|
|
1005
|
+
this.monthsEs = ["En", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ag", "Set", "Oct", "Nov", "Dic"];
|
|
1006
|
+
this.isShowingCalendar = false;
|
|
1007
|
+
this.isShowingMonths = true;
|
|
1008
|
+
this.monthPickerData = {};
|
|
1009
|
+
this.monthIndex = new Date().getUTCMonth();
|
|
1010
|
+
this.yearDisplayed = new Date().getUTCFullYear();
|
|
1011
|
+
this.yearBase = GravityMonthPickerComponent.getYearsRangeBase(this.yearDisplayed);
|
|
1012
|
+
}
|
|
1013
|
+
ngOnInit() {
|
|
1014
|
+
if (this.monthConfig?.customMonthDate) {
|
|
1015
|
+
this.monthPickerData.month = this.monthConfig.customMonthDate.month;
|
|
1016
|
+
this.monthPickerData.year = this.monthConfig.customMonthDate.year;
|
|
1017
|
+
}
|
|
1018
|
+
}
|
|
1019
|
+
showCalendar() {
|
|
1020
|
+
this.isShowingCalendar = true;
|
|
1021
|
+
}
|
|
1022
|
+
hideCalendar() {
|
|
1023
|
+
this.isShowingCalendar = false;
|
|
1024
|
+
}
|
|
1025
|
+
updateYear(changeRange, newYear) {
|
|
1026
|
+
if (changeRange) {
|
|
1027
|
+
this.yearDisplayed += changeRange;
|
|
1028
|
+
}
|
|
1029
|
+
else if (newYear) {
|
|
1030
|
+
this.yearDisplayed = newYear;
|
|
1031
|
+
}
|
|
1032
|
+
this.yearBase = GravityMonthPickerComponent.getYearsRangeBase(this.yearDisplayed);
|
|
1033
|
+
}
|
|
1034
|
+
addYear() {
|
|
1035
|
+
this.updateYear(this.isShowingMonths ? 1 : 10);
|
|
1036
|
+
}
|
|
1037
|
+
subtractYear() {
|
|
1038
|
+
this.updateYear(this.isShowingMonths ? -1 : -10);
|
|
1039
|
+
}
|
|
1040
|
+
changeYear(newYear, disabled) {
|
|
1041
|
+
if (!disabled) {
|
|
1042
|
+
this.updateYear(null, newYear);
|
|
1043
|
+
this.isShowingMonths = true;
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
static getYearsRangeBase(year) {
|
|
1047
|
+
return (year - year % 10) - 1;
|
|
1048
|
+
}
|
|
1049
|
+
changeMonth(monthIndex, disabled) {
|
|
1050
|
+
if (!disabled) {
|
|
1051
|
+
this.monthPickerData.month = monthIndex + 1;
|
|
1052
|
+
this.monthPickerData.year = this.yearDisplayed;
|
|
1053
|
+
this.isShowingCalendar = false;
|
|
1054
|
+
this.closeCalendar.emit(false);
|
|
1055
|
+
this.monthSelected.emit(this.monthPickerData);
|
|
1056
|
+
}
|
|
1057
|
+
}
|
|
1058
|
+
getMonths() {
|
|
1059
|
+
switch (this.currentLang) {
|
|
1060
|
+
case 'es':
|
|
1061
|
+
return this.monthsEs;
|
|
1062
|
+
default:
|
|
1063
|
+
return this.monthsEn;
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
getDisabled(currentIndex) {
|
|
1067
|
+
let minMonthDisabled = false;
|
|
1068
|
+
if (this.monthConfig?.minMonthDate) {
|
|
1069
|
+
if (this.isShowingMonths) {
|
|
1070
|
+
minMonthDisabled = this.yearDisplayed < this.monthConfig.minMonthDate.year || (this.yearDisplayed == this.monthConfig.minMonthDate.year && currentIndex + 1 < this.monthConfig.minMonthDate.month);
|
|
1071
|
+
}
|
|
1072
|
+
else {
|
|
1073
|
+
minMonthDisabled = this.yearBase + currentIndex < this.monthConfig.minMonthDate.year;
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
let maxMonthDisabled = false;
|
|
1077
|
+
if (this.monthConfig?.maxMonthDate) {
|
|
1078
|
+
if (this.isShowingMonths) {
|
|
1079
|
+
maxMonthDisabled = this.yearDisplayed > this.monthConfig.maxMonthDate.year || (this.yearDisplayed == this.monthConfig.maxMonthDate.year && currentIndex + 1 > this.monthConfig.maxMonthDate.month);
|
|
1080
|
+
}
|
|
1081
|
+
else {
|
|
1082
|
+
maxMonthDisabled = this.yearBase + currentIndex > this.monthConfig.maxMonthDate.year;
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
return minMonthDisabled || maxMonthDisabled;
|
|
1086
|
+
}
|
|
1087
|
+
getArrowDisabled(arrow) {
|
|
1088
|
+
if (arrow == 'left' && this.monthConfig?.minMonthDate) {
|
|
1089
|
+
if (this.isShowingMonths) {
|
|
1090
|
+
return this.yearDisplayed <= this.monthConfig.minMonthDate.year;
|
|
1091
|
+
}
|
|
1092
|
+
else {
|
|
1093
|
+
return this.yearBase < this.monthConfig.minMonthDate.year;
|
|
1094
|
+
}
|
|
1095
|
+
}
|
|
1096
|
+
if (arrow == 'right' && this.monthConfig?.maxMonthDate) {
|
|
1097
|
+
if (this.isShowingMonths) {
|
|
1098
|
+
return this.yearDisplayed >= this.monthConfig.maxMonthDate.year;
|
|
1099
|
+
}
|
|
1100
|
+
else {
|
|
1101
|
+
return this.yearBase + 12 > this.monthConfig.maxMonthDate.year;
|
|
1102
|
+
}
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
onDocumentClick() {
|
|
1106
|
+
if (this.isShowingCalendar) {
|
|
1107
|
+
this.isShowingCalendar = false;
|
|
1108
|
+
this.closeCalendar.emit(false);
|
|
1109
|
+
}
|
|
1110
|
+
}
|
|
1111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityMonthPickerComponent, selector: "gravity-month-picker", inputs: { currentLang: "currentLang", monthConfig: "monthConfig" }, outputs: { closeCalendar: "closeCalendar", monthSelected: "monthSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<ng-container *ngIf=\"isShowingCalendar\">\n <div class=\"calendar-header\">\n <div class=\"month-picker-arrow month-picker-arrow-previous\">\n <button class=\"hr-label sm-regular\" [disabled]=\"getArrowDisabled('left')\" (click)=\"subtractYear()\">\n <span></span>\n </button>\n </div>\n <div class=\"hr-label md-regular month-picker-year\">\n <span (click)=\"$event.stopPropagation(); isShowingMonths = false\" *ngIf=\"isShowingMonths\">\n {{yearDisplayed}}\n </span>\n <span (click)=\"$event.stopPropagation(); isShowingMonths = true\" *ngIf=\"!isShowingMonths\">\n {{yearBase + 1}} - {{yearBase + 10}}\n </span>\n </div>\n <div class=\"month-picker-arrow month-picker-arrow-next\">\n <button class=\"hr-label sm-regular\" [disabled]=\"getArrowDisabled('right')\" (click)=\"addYear()\">\n <span></span>\n </button>\n </div>\n </div>\n <div class=\"calendar-body hr-label sm-regular\">\n <article [class.active]=\"(isShowingMonths && monthPickerData.month == i + 1 && monthPickerData.year == yearDisplayed) || (!isShowingMonths && monthPickerData.year == i + yearBase)\"\n [class.disabled]=\"getDisabled(i)\"\n (click)=\"isShowingMonths ? changeMonth(i, getDisabled(i)) : changeYear(i + yearBase, getDisabled(i))\"\n *ngFor=\"let month of getMonths(); let i = index\">\n <span *ngIf=\"isShowingMonths\">{{month}}</span>\n <span *ngIf=\"!isShowingMonths\">{{i + yearBase}}</span>\n </article>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{background-color:var(--bg-calender-primary);border-radius:.625rem;box-shadow:0 0 10px #aaa;color:var(--on-bg-calender-primary);left:2.6rem;position:absolute;top:77%;width:15rem;z-index:1055}.calendar-header{align-items:center;background-color:var(--bg-calendar-nav-primary);border-top-left-radius:.625rem;border-top-right-radius:.625rem;color:var(--on-bg-calendar-nav-primary);display:flex;height:3.125rem;min-width:15rem;padding:.625rem}.month-picker-arrow{display:flex;flex:1 1 auto;height:2rem;margin:0;padding-left:0;padding-right:0;width:2rem}.month-picker-arrow button{background-color:var(--bg-calendar-nav-primary);border:none;border-radius:50%;color:var(--arrow-calendar-active-primary);cursor:pointer;height:2rem;margin:0;outline:none;padding:0;width:2rem}.month-picker-arrow button span{border:none;display:inline-block;font-size:1.75rem;height:100%;line-height:1;margin:0;position:relative;transform:none;width:100%}.month-picker-arrow button:not([disabled]):hover{background-color:var(--bg-arrow-calendar-hover-primary);color:var(--arrow-calendar-hover-primary)}.month-picker-arrow button[disabled]{color:var(--arrow-calendar-disabled-primary);cursor:not-allowed}.month-picker-arrow.month-picker-arrow-previous button span:before{content:\"\\2039\"}.month-picker-arrow.month-picker-arrow-next button span:after{content:\"\\203a\"}.month-picker-year{cursor:pointer}.month-picker-arrow-next{justify-content:flex-end}.calendar-body{display:flex;flex-wrap:wrap;justify-content:space-between;min-width:15rem;padding:.625rem;text-align:center}.calendar-body article{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2.5rem;justify-content:center;margin-inline:.25rem;width:2.5rem}.calendar-body article:not(.disabled):hover{background-color:var(--bg-number-calendar-hover-primary);color:var(--number-calendar-hover-primary)}.calendar-body article.active{background-color:var(--bg-number-calendar-pressed-primary)!important;color:var(--number-calendar-pressed-primary)!important}.calendar-body article.disabled{color:var(--number-calendar-disabled-primary);cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1113
|
+
}
|
|
1114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMonthPickerComponent, decorators: [{
|
|
1115
|
+
type: Component,
|
|
1116
|
+
args: [{ selector: 'gravity-month-picker', template: "<ng-container *ngIf=\"isShowingCalendar\">\n <div class=\"calendar-header\">\n <div class=\"month-picker-arrow month-picker-arrow-previous\">\n <button class=\"hr-label sm-regular\" [disabled]=\"getArrowDisabled('left')\" (click)=\"subtractYear()\">\n <span></span>\n </button>\n </div>\n <div class=\"hr-label md-regular month-picker-year\">\n <span (click)=\"$event.stopPropagation(); isShowingMonths = false\" *ngIf=\"isShowingMonths\">\n {{yearDisplayed}}\n </span>\n <span (click)=\"$event.stopPropagation(); isShowingMonths = true\" *ngIf=\"!isShowingMonths\">\n {{yearBase + 1}} - {{yearBase + 10}}\n </span>\n </div>\n <div class=\"month-picker-arrow month-picker-arrow-next\">\n <button class=\"hr-label sm-regular\" [disabled]=\"getArrowDisabled('right')\" (click)=\"addYear()\">\n <span></span>\n </button>\n </div>\n </div>\n <div class=\"calendar-body hr-label sm-regular\">\n <article [class.active]=\"(isShowingMonths && monthPickerData.month == i + 1 && monthPickerData.year == yearDisplayed) || (!isShowingMonths && monthPickerData.year == i + yearBase)\"\n [class.disabled]=\"getDisabled(i)\"\n (click)=\"isShowingMonths ? changeMonth(i, getDisabled(i)) : changeYear(i + yearBase, getDisabled(i))\"\n *ngFor=\"let month of getMonths(); let i = index\">\n <span *ngIf=\"isShowingMonths\">{{month}}</span>\n <span *ngIf=\"!isShowingMonths\">{{i + yearBase}}</span>\n </article>\n </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{background-color:var(--bg-calender-primary);border-radius:.625rem;box-shadow:0 0 10px #aaa;color:var(--on-bg-calender-primary);left:2.6rem;position:absolute;top:77%;width:15rem;z-index:1055}.calendar-header{align-items:center;background-color:var(--bg-calendar-nav-primary);border-top-left-radius:.625rem;border-top-right-radius:.625rem;color:var(--on-bg-calendar-nav-primary);display:flex;height:3.125rem;min-width:15rem;padding:.625rem}.month-picker-arrow{display:flex;flex:1 1 auto;height:2rem;margin:0;padding-left:0;padding-right:0;width:2rem}.month-picker-arrow button{background-color:var(--bg-calendar-nav-primary);border:none;border-radius:50%;color:var(--arrow-calendar-active-primary);cursor:pointer;height:2rem;margin:0;outline:none;padding:0;width:2rem}.month-picker-arrow button span{border:none;display:inline-block;font-size:1.75rem;height:100%;line-height:1;margin:0;position:relative;transform:none;width:100%}.month-picker-arrow button:not([disabled]):hover{background-color:var(--bg-arrow-calendar-hover-primary);color:var(--arrow-calendar-hover-primary)}.month-picker-arrow button[disabled]{color:var(--arrow-calendar-disabled-primary);cursor:not-allowed}.month-picker-arrow.month-picker-arrow-previous button span:before{content:\"\\2039\"}.month-picker-arrow.month-picker-arrow-next button span:after{content:\"\\203a\"}.month-picker-year{cursor:pointer}.month-picker-arrow-next{justify-content:flex-end}.calendar-body{display:flex;flex-wrap:wrap;justify-content:space-between;min-width:15rem;padding:.625rem;text-align:center}.calendar-body article{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2.5rem;justify-content:center;margin-inline:.25rem;width:2.5rem}.calendar-body article:not(.disabled):hover{background-color:var(--bg-number-calendar-hover-primary);color:var(--number-calendar-hover-primary)}.calendar-body article.active{background-color:var(--bg-number-calendar-pressed-primary)!important;color:var(--number-calendar-pressed-primary)!important}.calendar-body article.disabled{color:var(--number-calendar-disabled-primary);cursor:default}\n"] }]
|
|
1117
|
+
}], ctorParameters: function () { return []; }, propDecorators: { closeCalendar: [{
|
|
1118
|
+
type: Output,
|
|
1119
|
+
args: ['closeCalendar']
|
|
1120
|
+
}], monthSelected: [{
|
|
1121
|
+
type: Output,
|
|
1122
|
+
args: ['monthSelected']
|
|
1123
|
+
}], currentLang: [{
|
|
1124
|
+
type: Input
|
|
1125
|
+
}], monthConfig: [{
|
|
1126
|
+
type: Input
|
|
1127
|
+
}], onDocumentClick: [{
|
|
1128
|
+
type: HostListener,
|
|
1129
|
+
args: ['document:click', ['$event']]
|
|
1130
|
+
}] } });
|
|
1131
|
+
|
|
999
1132
|
class GravityCalendarComponent {
|
|
1000
1133
|
constructor() {
|
|
1001
1134
|
this.calendarResponse = new EventEmitter();
|
|
1135
|
+
this.calendarType = 'date';
|
|
1002
1136
|
this.currentLang = 'en';
|
|
1003
1137
|
this.state = "enabled";
|
|
1004
1138
|
this.supportTextType = "neutro";
|
|
@@ -1008,20 +1142,20 @@ class GravityCalendarComponent {
|
|
|
1008
1142
|
this.customDateFlag = '';
|
|
1009
1143
|
}
|
|
1010
1144
|
ngOnChanges(changes) {
|
|
1011
|
-
if (this.
|
|
1012
|
-
if (this.
|
|
1013
|
-
let dateWithoutDays = new Date(new Date().setDate(new Date().getDate() - this.
|
|
1145
|
+
if (this.datesConfig) {
|
|
1146
|
+
if (this.datesConfig.defaultDays) {
|
|
1147
|
+
let dateWithoutDays = new Date(new Date().setDate(new Date().getDate() - this.datesConfig.defaultDays));
|
|
1014
1148
|
this.focusCustomDate(dateWithoutDays);
|
|
1015
1149
|
}
|
|
1016
|
-
if (this.
|
|
1017
|
-
let date = this.
|
|
1150
|
+
if (this.datesConfig.customDate) {
|
|
1151
|
+
let date = this.datesConfig.customDate == 'today' ? (new Date()) : this.datesConfig.customDate;
|
|
1018
1152
|
this.focusCustomDate(date);
|
|
1019
1153
|
}
|
|
1020
|
-
if (this.
|
|
1021
|
-
this.minDate = GravityCalendarComponent.formatDateToNgbDateStruct(this.
|
|
1154
|
+
if (this.datesConfig.minDate) {
|
|
1155
|
+
this.minDate = GravityCalendarComponent.formatDateToNgbDateStruct(this.datesConfig.minDate);
|
|
1022
1156
|
}
|
|
1023
|
-
if (this.
|
|
1024
|
-
let date = this.
|
|
1157
|
+
if (this.datesConfig.maxDate) {
|
|
1158
|
+
let date = this.datesConfig.maxDate == 'today' ? (new Date()) : this.datesConfig.maxDate;
|
|
1025
1159
|
this.maxDate = GravityCalendarComponent.formatDateToNgbDateStruct(date);
|
|
1026
1160
|
}
|
|
1027
1161
|
}
|
|
@@ -1062,6 +1196,15 @@ class GravityCalendarComponent {
|
|
|
1062
1196
|
ngbDate.year
|
|
1063
1197
|
].join('/');
|
|
1064
1198
|
}
|
|
1199
|
+
static formatMonthDate(monthDate) {
|
|
1200
|
+
if (!monthDate) {
|
|
1201
|
+
return null;
|
|
1202
|
+
}
|
|
1203
|
+
return [
|
|
1204
|
+
(monthDate.month < 10 ? ('0' + monthDate.month) : monthDate.month),
|
|
1205
|
+
monthDate.year
|
|
1206
|
+
].join('/');
|
|
1207
|
+
}
|
|
1065
1208
|
static formatTSDate(date) {
|
|
1066
1209
|
if (!date) {
|
|
1067
1210
|
return null;
|
|
@@ -1082,23 +1225,36 @@ class GravityCalendarComponent {
|
|
|
1082
1225
|
static convertNgbDateToDate(date) {
|
|
1083
1226
|
return new Date(date.year, (date.month - 1), date.day);
|
|
1084
1227
|
}
|
|
1228
|
+
static convertMonthDateToDate(date) {
|
|
1229
|
+
return new Date(date.year, (date.month - 1));
|
|
1230
|
+
}
|
|
1231
|
+
handleMonthPickerResponse(response) {
|
|
1232
|
+
this.selectedDateInput = GravityCalendarComponent.formatMonthDate(response);
|
|
1233
|
+
this.selectedDate = GravityCalendarComponent.convertMonthDateToDate(response);
|
|
1234
|
+
this.monthPickerInput.nativeElement.value = this.selectedDateInput;
|
|
1235
|
+
this.calendarResponse.emit(this.selectedDate);
|
|
1236
|
+
}
|
|
1085
1237
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { currentLang: "currentLang", cypressTag: "cypressTag",
|
|
1238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { calendarType: "calendarType", currentLang: "currentLang", cypressTag: "cypressTag", datesConfig: "datesConfig", label: "label", monthConfig: "monthConfig", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "monthPickerInput", first: true, predicate: ["monthPickerInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\"\n [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\"></gravity-icon>\n <ng-container *ngIf=\"calendarType == 'date'\">\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state == 'disabled' ? true : null\"\n [readonly]=\"state != 'disabled' ? true : null\"\n\n (blur)=\"focusInput = false\"\n (closed)=\"calendarOpened = false\"\n (dateSelect)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n ngbDatepicker\n placeholder=\"Select your date\"\n\n [container]=\"'body'\"\n [datepickerClass]=\"'gravity-datepicker-dialog'\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [navigation]=\"'arrows'\"\n [showWeekNumbers]=\"true\"\n\n #datepickerInput\n #datePicker=\"ngbDatepicker\">\n <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && state == 'enabled'\"></span>\n <span (click)=\"datePicker.close(); calendarOpened = false\" *ngIf=\"calendarOpened && state == 'enabled'\"></span>\n </ng-container>\n <ng-container *ngIf=\"calendarType == 'month'\">\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state == 'disabled' ? true : null\"\n [readonly]=\"state != 'disabled' ? true : null\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n placeholder=\"Select your month\"\n\n #monthPickerInput>\n <span (click)=\"$event.stopPropagation(); gravityMonthPicker.showCalendar(); calendarOpened = true\"\n *ngIf=\"!calendarOpened && state == 'enabled'\"></span>\n <span (click)=\"$event.stopPropagation(); gravityMonthPicker.hideCalendar(); calendarOpened = false\"\n *ngIf=\"calendarOpened && state == 'enabled'\"></span>\n <gravity-month-picker #gravityMonthPicker\n\n [currentLang]=\"currentLang\"\n [monthConfig]=\"monthConfig\"\n\n (click)=\"$event.stopPropagation()\"\n (closeCalendar)=\"calendarOpened = false\"\n (monthSelected)=\"handleMonthPickerResponse($event)\"></gravity-month-picker>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }, { kind: "component", type: GravityMonthPickerComponent, selector: "gravity-month-picker", inputs: ["currentLang", "monthConfig"], outputs: ["closeCalendar", "monthSelected"] }] }); }
|
|
1087
1239
|
}
|
|
1088
1240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, decorators: [{
|
|
1089
1241
|
type: Component,
|
|
1090
|
-
args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\"
|
|
1242
|
+
args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\"\n [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\"></gravity-icon>\n <ng-container *ngIf=\"calendarType == 'date'\">\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state == 'disabled' ? true : null\"\n [readonly]=\"state != 'disabled' ? true : null\"\n\n (blur)=\"focusInput = false\"\n (closed)=\"calendarOpened = false\"\n (dateSelect)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n ngbDatepicker\n placeholder=\"Select your date\"\n\n [container]=\"'body'\"\n [datepickerClass]=\"'gravity-datepicker-dialog'\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [navigation]=\"'arrows'\"\n [showWeekNumbers]=\"true\"\n\n #datepickerInput\n #datePicker=\"ngbDatepicker\">\n <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && state == 'enabled'\"></span>\n <span (click)=\"datePicker.close(); calendarOpened = false\" *ngIf=\"calendarOpened && state == 'enabled'\"></span>\n </ng-container>\n <ng-container *ngIf=\"calendarType == 'month'\">\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state == 'disabled' ? true : null\"\n [readonly]=\"state != 'disabled' ? true : null\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n placeholder=\"Select your month\"\n\n #monthPickerInput>\n <span (click)=\"$event.stopPropagation(); gravityMonthPicker.showCalendar(); calendarOpened = true\"\n *ngIf=\"!calendarOpened && state == 'enabled'\"></span>\n <span (click)=\"$event.stopPropagation(); gravityMonthPicker.hideCalendar(); calendarOpened = false\"\n *ngIf=\"calendarOpened && state == 'enabled'\"></span>\n <gravity-month-picker #gravityMonthPicker\n\n [currentLang]=\"currentLang\"\n [monthConfig]=\"monthConfig\"\n\n (click)=\"$event.stopPropagation()\"\n (closeCalendar)=\"calendarOpened = false\"\n (monthSelected)=\"handleMonthPickerResponse($event)\"></gravity-month-picker>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
|
|
1091
1243
|
}], propDecorators: { calendarResponse: [{
|
|
1092
1244
|
type: Output,
|
|
1093
1245
|
args: ['response']
|
|
1246
|
+
}], calendarType: [{
|
|
1247
|
+
type: Input
|
|
1094
1248
|
}], currentLang: [{
|
|
1095
1249
|
type: Input
|
|
1096
1250
|
}], cypressTag: [{
|
|
1097
1251
|
type: Input
|
|
1098
|
-
}],
|
|
1252
|
+
}], datesConfig: [{
|
|
1099
1253
|
type: Input
|
|
1100
1254
|
}], label: [{
|
|
1101
1255
|
type: Input
|
|
1256
|
+
}], monthConfig: [{
|
|
1257
|
+
type: Input
|
|
1102
1258
|
}], required: [{
|
|
1103
1259
|
type: Input
|
|
1104
1260
|
}], state: [{
|
|
@@ -1113,6 +1269,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1113
1269
|
}], datepickerInput: [{
|
|
1114
1270
|
type: ViewChild,
|
|
1115
1271
|
args: ['datepickerInput', { static: false }]
|
|
1272
|
+
}], monthPickerInput: [{
|
|
1273
|
+
type: ViewChild,
|
|
1274
|
+
args: ['monthPickerInput', { static: false }]
|
|
1116
1275
|
}] } });
|
|
1117
1276
|
|
|
1118
1277
|
class GravityRadioButtonComponent {
|
|
@@ -1335,6 +1494,7 @@ class GravityDesignSystemModule {
|
|
|
1335
1494
|
GravityDialogComponent,
|
|
1336
1495
|
GravityDropdownListComponent,
|
|
1337
1496
|
GravityIconComponent,
|
|
1497
|
+
GravityMonthPickerComponent,
|
|
1338
1498
|
GravityNotificationComponent,
|
|
1339
1499
|
GravityNotificationInstantContainerComponent,
|
|
1340
1500
|
GravityRadioButtonComponent,
|
|
@@ -1382,6 +1542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1382
1542
|
GravityDialogComponent,
|
|
1383
1543
|
GravityDropdownListComponent,
|
|
1384
1544
|
GravityIconComponent,
|
|
1545
|
+
GravityMonthPickerComponent,
|
|
1385
1546
|
GravityNotificationComponent,
|
|
1386
1547
|
GravityNotificationInstantContainerComponent,
|
|
1387
1548
|
GravityRadioButtonComponent,
|