@progressio_resources/gravity-design-system 2.3.3 → 2.4.1
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 +31 -103
- package/esm2022/lib/components/gravity-checkbox/gravity-checkbox.component.mjs +20 -10
- package/esm2022/lib/components/gravity-stepper/gravity-stepper.component.mjs +2 -2
- package/esm2022/lib/components/gravity-switch/gravity-switch.component.mjs +13 -6
- package/esm2022/lib/gravity-design-system.module.mjs +6 -5
- package/fesm2022/progressio_resources-gravity-design-system.mjs +67 -250
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-calendar/gravity-calendar.component.d.ts +16 -30
- package/lib/components/gravity-checkbox/gravity-checkbox.component.d.ts +13 -8
- package/lib/components/gravity-switch/gravity-switch.component.d.ts +5 -4
- package/lib/gravity-design-system.module.d.ts +16 -16
- package/package.json +2 -1
- package/src/lib/styles/components/_datepicker.scss +122 -70
- package/esm2022/lib/components/gravity-calendar/gravity-month-picker/gravity-month-picker.component.mjs +0 -136
- package/lib/components/gravity-calendar/gravity-month-picker/gravity-month-picker.component.d.ts +0 -40
|
@@ -10,9 +10,11 @@ import * as i1 from 'angular-svg-icon';
|
|
|
10
10
|
import { AngularSvgIconModule } from 'angular-svg-icon';
|
|
11
11
|
import * as i3 from '@ng-select/ng-select';
|
|
12
12
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
13
|
-
import * as i2$
|
|
13
|
+
import * as i2$1 from 'angular-svg-icon-preloader';
|
|
14
14
|
import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i1$3 from 'ngx-bootstrap/datepicker';
|
|
16
|
+
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
|
17
|
+
import * as i1$4 from 'ngx-pretty-checkbox';
|
|
16
18
|
import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
|
|
17
19
|
import { BehaviorSubject, timer } from 'rxjs';
|
|
18
20
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
@@ -1020,251 +1022,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1020
1022
|
}]
|
|
1021
1023
|
}] });
|
|
1022
1024
|
|
|
1023
|
-
class GravityMonthPickerComponent {
|
|
1024
|
-
constructor() {
|
|
1025
|
-
this.closeCalendar = new EventEmitter();
|
|
1026
|
-
this.monthSelected = new EventEmitter();
|
|
1027
|
-
this.currentLang = 'en';
|
|
1028
|
-
this.monthsEn = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
|
|
1029
|
-
this.monthsEs = ["En", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ag", "Set", "Oct", "Nov", "Dic"];
|
|
1030
|
-
this.isShowingCalendar = false;
|
|
1031
|
-
this.isShowingMonths = true;
|
|
1032
|
-
this.monthPickerData = {};
|
|
1033
|
-
this.monthIndex = new Date().getUTCMonth();
|
|
1034
|
-
this.yearDisplayed = new Date().getUTCFullYear();
|
|
1035
|
-
this.yearBase = GravityMonthPickerComponent.getYearsRangeBase(this.yearDisplayed);
|
|
1036
|
-
}
|
|
1037
|
-
ngOnInit() {
|
|
1038
|
-
if (this.monthConfig?.customMonthDate) {
|
|
1039
|
-
this.monthPickerData.month = this.monthConfig.customMonthDate.month;
|
|
1040
|
-
this.monthPickerData.year = this.monthConfig.customMonthDate.year;
|
|
1041
|
-
}
|
|
1042
|
-
}
|
|
1043
|
-
showCalendar() {
|
|
1044
|
-
this.isShowingCalendar = true;
|
|
1045
|
-
}
|
|
1046
|
-
hideCalendar() {
|
|
1047
|
-
this.isShowingCalendar = false;
|
|
1048
|
-
}
|
|
1049
|
-
updateYear(changeRange, newYear) {
|
|
1050
|
-
if (changeRange) {
|
|
1051
|
-
this.yearDisplayed += changeRange;
|
|
1052
|
-
}
|
|
1053
|
-
else if (newYear) {
|
|
1054
|
-
this.yearDisplayed = newYear;
|
|
1055
|
-
}
|
|
1056
|
-
this.yearBase = GravityMonthPickerComponent.getYearsRangeBase(this.yearDisplayed);
|
|
1057
|
-
}
|
|
1058
|
-
addYear() {
|
|
1059
|
-
this.updateYear(this.isShowingMonths ? 1 : 10);
|
|
1060
|
-
}
|
|
1061
|
-
subtractYear() {
|
|
1062
|
-
this.updateYear(this.isShowingMonths ? -1 : -10);
|
|
1063
|
-
}
|
|
1064
|
-
changeYear(newYear, disabled) {
|
|
1065
|
-
if (!disabled) {
|
|
1066
|
-
this.updateYear(null, newYear);
|
|
1067
|
-
this.isShowingMonths = true;
|
|
1068
|
-
}
|
|
1069
|
-
}
|
|
1070
|
-
static getYearsRangeBase(year) {
|
|
1071
|
-
return (year - year % 10) - 1;
|
|
1072
|
-
}
|
|
1073
|
-
changeMonth(monthIndex, disabled) {
|
|
1074
|
-
if (!disabled) {
|
|
1075
|
-
this.monthPickerData.month = monthIndex + 1;
|
|
1076
|
-
this.monthPickerData.year = this.yearDisplayed;
|
|
1077
|
-
this.isShowingCalendar = false;
|
|
1078
|
-
this.closeCalendar.emit(false);
|
|
1079
|
-
this.monthSelected.emit(this.monthPickerData);
|
|
1080
|
-
}
|
|
1081
|
-
}
|
|
1082
|
-
getMonths() {
|
|
1083
|
-
switch (this.currentLang) {
|
|
1084
|
-
case 'es':
|
|
1085
|
-
return this.monthsEs;
|
|
1086
|
-
default:
|
|
1087
|
-
return this.monthsEn;
|
|
1088
|
-
}
|
|
1089
|
-
}
|
|
1090
|
-
getDisabled(currentIndex) {
|
|
1091
|
-
let minMonthDisabled = false;
|
|
1092
|
-
if (this.monthConfig?.minMonthDate) {
|
|
1093
|
-
if (this.isShowingMonths) {
|
|
1094
|
-
minMonthDisabled = this.yearDisplayed < this.monthConfig.minMonthDate.year || (this.yearDisplayed == this.monthConfig.minMonthDate.year && currentIndex + 1 < this.monthConfig.minMonthDate.month);
|
|
1095
|
-
}
|
|
1096
|
-
else {
|
|
1097
|
-
minMonthDisabled = this.yearBase + currentIndex < this.monthConfig.minMonthDate.year;
|
|
1098
|
-
}
|
|
1099
|
-
}
|
|
1100
|
-
let maxMonthDisabled = false;
|
|
1101
|
-
if (this.monthConfig?.maxMonthDate) {
|
|
1102
|
-
if (this.isShowingMonths) {
|
|
1103
|
-
maxMonthDisabled = this.yearDisplayed > this.monthConfig.maxMonthDate.year || (this.yearDisplayed == this.monthConfig.maxMonthDate.year && currentIndex + 1 > this.monthConfig.maxMonthDate.month);
|
|
1104
|
-
}
|
|
1105
|
-
else {
|
|
1106
|
-
maxMonthDisabled = this.yearBase + currentIndex > this.monthConfig.maxMonthDate.year;
|
|
1107
|
-
}
|
|
1108
|
-
}
|
|
1109
|
-
return minMonthDisabled || maxMonthDisabled;
|
|
1110
|
-
}
|
|
1111
|
-
getArrowDisabled(arrow) {
|
|
1112
|
-
if (arrow == 'left' && this.monthConfig?.minMonthDate) {
|
|
1113
|
-
if (this.isShowingMonths) {
|
|
1114
|
-
return this.yearDisplayed <= this.monthConfig.minMonthDate.year;
|
|
1115
|
-
}
|
|
1116
|
-
else {
|
|
1117
|
-
return this.yearBase < this.monthConfig.minMonthDate.year;
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1120
|
-
if (arrow == 'right' && this.monthConfig?.maxMonthDate) {
|
|
1121
|
-
if (this.isShowingMonths) {
|
|
1122
|
-
return this.yearDisplayed >= this.monthConfig.maxMonthDate.year;
|
|
1123
|
-
}
|
|
1124
|
-
else {
|
|
1125
|
-
return this.yearBase + 12 > this.monthConfig.maxMonthDate.year;
|
|
1126
|
-
}
|
|
1127
|
-
}
|
|
1128
|
-
}
|
|
1129
|
-
onDocumentClick() {
|
|
1130
|
-
if (this.isShowingCalendar) {
|
|
1131
|
-
this.isShowingCalendar = false;
|
|
1132
|
-
this.closeCalendar.emit(false);
|
|
1133
|
-
}
|
|
1134
|
-
}
|
|
1135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1136
|
-
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:6.25rem}: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"] }] }); }
|
|
1137
|
-
}
|
|
1138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMonthPickerComponent, decorators: [{
|
|
1139
|
-
type: Component,
|
|
1140
|
-
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:6.25rem}: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"] }]
|
|
1141
|
-
}], ctorParameters: function () { return []; }, propDecorators: { closeCalendar: [{
|
|
1142
|
-
type: Output,
|
|
1143
|
-
args: ['closeCalendar']
|
|
1144
|
-
}], monthSelected: [{
|
|
1145
|
-
type: Output,
|
|
1146
|
-
args: ['monthSelected']
|
|
1147
|
-
}], currentLang: [{
|
|
1148
|
-
type: Input
|
|
1149
|
-
}], monthConfig: [{
|
|
1150
|
-
type: Input
|
|
1151
|
-
}], onDocumentClick: [{
|
|
1152
|
-
type: HostListener,
|
|
1153
|
-
args: ['document:click', ['$event']]
|
|
1154
|
-
}] } });
|
|
1155
|
-
|
|
1156
1025
|
class GravityCalendarComponent {
|
|
1157
1026
|
constructor() {
|
|
1158
1027
|
this.calendarResponse = new EventEmitter();
|
|
1159
|
-
this.calendarType = '
|
|
1028
|
+
this.calendarType = 'day';
|
|
1160
1029
|
this.currentLang = 'en';
|
|
1161
1030
|
this.state = "enabled";
|
|
1162
1031
|
this.supportTextType = "neutro";
|
|
1163
|
-
this.
|
|
1032
|
+
this.bsDatepickerConfig = {
|
|
1033
|
+
containerClass: 'gravity-datepicker-dialog',
|
|
1034
|
+
isAnimated: true,
|
|
1035
|
+
selectFromOtherMonth: true,
|
|
1036
|
+
showWeekNumbers: false
|
|
1037
|
+
};
|
|
1164
1038
|
this.focusInput = false;
|
|
1165
|
-
|
|
1166
|
-
|
|
1039
|
+
let milliseconds = new Date().getTime();
|
|
1040
|
+
let randomNumber = Math.random() * 10;
|
|
1041
|
+
this.elementId = '' + (milliseconds * randomNumber / 2);
|
|
1167
1042
|
}
|
|
1168
1043
|
ngOnChanges(changes) {
|
|
1169
|
-
if (
|
|
1170
|
-
if (
|
|
1171
|
-
|
|
1172
|
-
this.focusCustomDate(dateWithoutDays);
|
|
1044
|
+
if (changes['datesConfig']) {
|
|
1045
|
+
if (changes['datesConfig'].currentValue.defaultDays) {
|
|
1046
|
+
this.selectedDate = new Date(new Date().setDate(new Date().getDate() - changes['datesConfig'].currentValue.defaultDays));
|
|
1173
1047
|
}
|
|
1174
|
-
if (
|
|
1175
|
-
|
|
1176
|
-
this.focusCustomDate(date);
|
|
1048
|
+
if (changes['datesConfig'].currentValue.customDate) {
|
|
1049
|
+
this.selectedDate = changes['datesConfig'].currentValue.customDate == 'today' ? new Date() : changes['datesConfig'].currentValue.customDate;
|
|
1177
1050
|
}
|
|
1178
|
-
if (
|
|
1179
|
-
this.minDate =
|
|
1051
|
+
if (changes['datesConfig'].currentValue.minDate) {
|
|
1052
|
+
this.minDate = changes['datesConfig'].currentValue.minDate;
|
|
1180
1053
|
}
|
|
1181
|
-
if (
|
|
1182
|
-
|
|
1183
|
-
this.maxDate = GravityCalendarComponent.formatDateToNgbDateStruct(date);
|
|
1054
|
+
if (changes['datesConfig'].currentValue.maxDate) {
|
|
1055
|
+
this.maxDate = changes['datesConfig'].currentValue.maxDate == 'today' ? new Date() : changes['datesConfig'].currentValue.maxDate;
|
|
1184
1056
|
}
|
|
1185
1057
|
}
|
|
1186
1058
|
}
|
|
1187
|
-
ngAfterViewInit() {
|
|
1188
|
-
this.changeDateManually();
|
|
1189
|
-
}
|
|
1190
1059
|
updateSelectedDate($event) {
|
|
1191
|
-
this.
|
|
1192
|
-
this.selectedDate = GravityCalendarComponent.convertNgbDateToDate($event);
|
|
1193
|
-
this.datepickerInput.nativeElement.value = this.selectedDateInput;
|
|
1060
|
+
this.selectedDate = $event;
|
|
1194
1061
|
this.calendarResponse.emit(this.selectedDate);
|
|
1195
1062
|
}
|
|
1196
|
-
focusCustomDate(customDate) {
|
|
1197
|
-
this.selectedDateInput = GravityCalendarComponent.formatTSDate(customDate);
|
|
1198
|
-
this.selectedDate = customDate;
|
|
1199
|
-
this.customDateFlag = customDate.getUTCFullYear() + '-' + (customDate.getUTCMonth() + 1) + '-' + customDate.getUTCDate();
|
|
1200
|
-
}
|
|
1201
1063
|
resetCalendar(newDate) {
|
|
1202
|
-
this.
|
|
1203
|
-
this.changeDateManually();
|
|
1204
|
-
}
|
|
1205
|
-
changeDateManually() {
|
|
1206
|
-
if (this.customDateFlag) {
|
|
1207
|
-
this.datePicker.manualDateChange(this.customDateFlag, true);
|
|
1208
|
-
this.datepickerInput.nativeElement.value = this.selectedDateInput;
|
|
1209
|
-
this.customDateFlag = undefined;
|
|
1210
|
-
this.calendarResponse.emit(this.selectedDate);
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
static formatNgbDate(ngbDate) {
|
|
1214
|
-
if (!ngbDate) {
|
|
1215
|
-
return null;
|
|
1216
|
-
}
|
|
1217
|
-
return [
|
|
1218
|
-
(ngbDate.month < 10 ? ('0' + ngbDate.month) : ngbDate.month),
|
|
1219
|
-
(ngbDate.day < 10 ? ('0' + ngbDate.day) : ngbDate.day),
|
|
1220
|
-
ngbDate.year
|
|
1221
|
-
].join('/');
|
|
1222
|
-
}
|
|
1223
|
-
static formatMonthDate(monthDate) {
|
|
1224
|
-
if (!monthDate) {
|
|
1225
|
-
return null;
|
|
1226
|
-
}
|
|
1227
|
-
return [
|
|
1228
|
-
(monthDate.month < 10 ? ('0' + monthDate.month) : monthDate.month),
|
|
1229
|
-
monthDate.year
|
|
1230
|
-
].join('/');
|
|
1231
|
-
}
|
|
1232
|
-
static formatTSDate(date) {
|
|
1233
|
-
if (!date) {
|
|
1234
|
-
return null;
|
|
1235
|
-
}
|
|
1236
|
-
return [
|
|
1237
|
-
((date.getUTCMonth() + 1) < 10 ? ('0' + (date.getUTCMonth() + 1)) : (date.getUTCMonth() + 1)),
|
|
1238
|
-
(date.getUTCDate() < 10 ? ('0' + date.getUTCDate()) : date.getUTCDate()),
|
|
1239
|
-
date.getUTCFullYear()
|
|
1240
|
-
].join('/');
|
|
1241
|
-
}
|
|
1242
|
-
static formatDateToNgbDateStruct(date) {
|
|
1243
|
-
let object = {};
|
|
1244
|
-
object.year = date.getUTCFullYear();
|
|
1245
|
-
object.month = (date.getUTCMonth() + 1);
|
|
1246
|
-
object.day = date.getUTCDate();
|
|
1247
|
-
return object;
|
|
1248
|
-
}
|
|
1249
|
-
static convertNgbDateToDate(date) {
|
|
1250
|
-
return new Date(date.year, (date.month - 1), date.day);
|
|
1251
|
-
}
|
|
1252
|
-
static convertMonthDateToDate(date) {
|
|
1253
|
-
return new Date(date.year, (date.month - 1));
|
|
1254
|
-
}
|
|
1255
|
-
handleMonthPickerResponse(response) {
|
|
1256
|
-
this.selectedDateInput = GravityCalendarComponent.formatMonthDate(response);
|
|
1257
|
-
this.selectedDate = GravityCalendarComponent.convertMonthDateToDate(response);
|
|
1258
|
-
this.monthPickerInput.nativeElement.value = this.selectedDateInput;
|
|
1064
|
+
this.selectedDate = newDate;
|
|
1259
1065
|
this.calendarResponse.emit(this.selectedDate);
|
|
1260
1066
|
}
|
|
1067
|
+
getBsDatepickerContainer() {
|
|
1068
|
+
return '.gravity-calendar-field[elementId="' + this.elementId + '"]';
|
|
1069
|
+
}
|
|
1261
1070
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1262
|
-
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",
|
|
1071
|
+
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", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\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\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [size]=\"'sm'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state != 'enabled' ? true : null\"\n\n [style.cursor]=\"state == 'enabled' ? 'pointer' : 'text'\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n class=\"hr-label md-regular\"\n bsDatepicker\n placeholder=\"Select your {{calendarType == 'day' ? 'date' : 'month'}}\"\n\n [bsConfig]=\"bsDatepickerConfig\"\n [container]=\"getBsDatepickerContainer()\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\">\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:6.25rem}.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$3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i1$3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
1263
1072
|
}
|
|
1264
1073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, decorators: [{
|
|
1265
1074
|
type: Component,
|
|
1266
|
-
args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput
|
|
1267
|
-
}], propDecorators: { calendarResponse: [{
|
|
1075
|
+
args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\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\"\n [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [size]=\"'sm'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state != 'enabled' ? true : null\"\n\n [style.cursor]=\"state == 'enabled' ? 'pointer' : 'text'\"\n\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false\"\n\n class=\"hr-label md-regular\"\n bsDatepicker\n placeholder=\"Select your {{calendarType == 'day' ? 'date' : 'month'}}\"\n\n [bsConfig]=\"bsDatepickerConfig\"\n [container]=\"getBsDatepickerContainer()\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [minMode]=\"calendarType\"\n\n [(bsValue)]=\"selectedDate\">\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:6.25rem}.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"] }]
|
|
1076
|
+
}], ctorParameters: function () { return []; }, propDecorators: { calendarResponse: [{
|
|
1268
1077
|
type: Output,
|
|
1269
1078
|
args: ['response']
|
|
1270
1079
|
}], calendarType: [{
|
|
@@ -1277,8 +1086,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1277
1086
|
type: Input
|
|
1278
1087
|
}], label: [{
|
|
1279
1088
|
type: Input
|
|
1280
|
-
}], monthConfig: [{
|
|
1281
|
-
type: Input
|
|
1282
1089
|
}], required: [{
|
|
1283
1090
|
type: Input
|
|
1284
1091
|
}], state: [{
|
|
@@ -1287,15 +1094,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1287
1094
|
type: Input
|
|
1288
1095
|
}], supportTextType: [{
|
|
1289
1096
|
type: Input
|
|
1290
|
-
}], datePicker: [{
|
|
1291
|
-
type: ViewChild,
|
|
1292
|
-
args: ['datePicker', { static: false }]
|
|
1293
|
-
}], datepickerInput: [{
|
|
1294
|
-
type: ViewChild,
|
|
1295
|
-
args: ['datepickerInput', { static: false }]
|
|
1296
|
-
}], monthPickerInput: [{
|
|
1297
|
-
type: ViewChild,
|
|
1298
|
-
args: ['monthPickerInput', { static: false }]
|
|
1299
1097
|
}] } });
|
|
1300
1098
|
|
|
1301
1099
|
class GravityRadioButtonComponent {
|
|
@@ -1308,7 +1106,7 @@ class GravityRadioButtonComponent {
|
|
|
1308
1106
|
this.change.emit(event);
|
|
1309
1107
|
}
|
|
1310
1108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityRadioButtonComponent, selector: "gravity-radio-button", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<ngx-pretty-radio\n will-change\n\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [outline]=\"true\"\n [value]=\"value\"\n\n (change)=\"onChange($event)\">\n <ng-content></ng-content>\n</ngx-pretty-radio>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type:
|
|
1109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityRadioButtonComponent, selector: "gravity-radio-button", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<ngx-pretty-radio\n will-change\n\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [outline]=\"true\"\n [value]=\"value\"\n\n (change)=\"onChange($event)\">\n <ng-content></ng-content>\n</ngx-pretty-radio>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i1$4.NgxPrettyRadioWillChangeComponent, selector: "ngx-pretty-radio[will-change], p-radio[will-change]", inputs: ["stroke", "shape", "animation", "color", "outline", "checked", "disabled", "value", "name", "isSwitch", "lock", "bigger", "enableFocus", "plain"], outputs: ["change"], exportAs: ["ngxPrettyRadio"] }] }); }
|
|
1312
1110
|
}
|
|
1313
1111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityRadioButtonComponent, decorators: [{
|
|
1314
1112
|
type: Component,
|
|
@@ -1332,16 +1130,24 @@ class GravitySwitchComponent {
|
|
|
1332
1130
|
this.required = false;
|
|
1333
1131
|
this.state = "enabled";
|
|
1334
1132
|
this.switchResponse = new EventEmitter();
|
|
1133
|
+
this.isSwitchActive = false;
|
|
1335
1134
|
}
|
|
1336
|
-
|
|
1337
|
-
this.
|
|
1135
|
+
ngAfterViewInit() {
|
|
1136
|
+
this.isSwitchActive = this.customCheck;
|
|
1137
|
+
this.switchResponse.emit(this.isSwitchActive);
|
|
1138
|
+
}
|
|
1139
|
+
toggleSwitch() {
|
|
1140
|
+
if (this.state == 'enabled') {
|
|
1141
|
+
this.isSwitchActive = !this.isSwitchActive;
|
|
1142
|
+
this.switchResponse.emit(this.isSwitchActive);
|
|
1143
|
+
}
|
|
1338
1144
|
}
|
|
1339
1145
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1340
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { currentLang: "currentLang", customCheck: "customCheck", cypressTag: "cypressTag", label: "label", required: "required", state: "state", toggleOptions: "toggleOptions" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular\">\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-switch\" [class.toggle-options]=\"toggleOptions\">\n <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n {{toggleOptions[0]}}\n </span>\n <
|
|
1146
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { currentLang: "currentLang", customCheck: "customCheck", cypressTag: "cypressTag", label: "label", required: "required", state: "state", toggleOptions: "toggleOptions" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular\">\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-switch\" [class.toggle-options]=\"toggleOptions\">\n <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n {{toggleOptions[0]}}\n </span>\n <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n <span class=\"slider round\"></span>\n </div>\n <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n {{toggleOptions[1]}}\n </span>\n</div>\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:6.25rem}.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-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1341
1147
|
}
|
|
1342
1148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, decorators: [{
|
|
1343
1149
|
type: Component,
|
|
1344
|
-
args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text sm-regular\">\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-switch\" [class.toggle-options]=\"toggleOptions\">\n <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n {{toggleOptions[0]}}\n </span>\n <
|
|
1150
|
+
args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text sm-regular\">\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-switch\" [class.toggle-options]=\"toggleOptions\">\n <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n {{toggleOptions[0]}}\n </span>\n <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n <span class=\"slider round\"></span>\n </div>\n <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n {{toggleOptions[1]}}\n </span>\n</div>\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:6.25rem}.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-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"] }]
|
|
1345
1151
|
}], propDecorators: { currentLang: [{
|
|
1346
1152
|
type: Input
|
|
1347
1153
|
}], customCheck: [{
|
|
@@ -1363,24 +1169,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1363
1169
|
|
|
1364
1170
|
class GravityCheckboxComponent {
|
|
1365
1171
|
constructor() {
|
|
1366
|
-
this.disabled = false;
|
|
1367
1172
|
this.checked = false;
|
|
1173
|
+
this.disabled = false;
|
|
1368
1174
|
this.change = new EventEmitter();
|
|
1175
|
+
this.isCheckboxActive = false;
|
|
1369
1176
|
}
|
|
1370
|
-
|
|
1371
|
-
this.
|
|
1177
|
+
ngAfterViewInit() {
|
|
1178
|
+
this.isCheckboxActive = this.checked;
|
|
1179
|
+
this.change.emit({ value: this.value, checked: this.isCheckboxActive });
|
|
1180
|
+
}
|
|
1181
|
+
toggleCheckbox() {
|
|
1182
|
+
if (!this.disabled) {
|
|
1183
|
+
this.isCheckboxActive = !this.isCheckboxActive;
|
|
1184
|
+
this.change.emit({ value: this.value, checked: this.isCheckboxActive });
|
|
1185
|
+
}
|
|
1372
1186
|
}
|
|
1373
1187
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: {
|
|
1188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'success'\" [size]=\"'sm'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\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:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
1375
1189
|
}
|
|
1376
1190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
|
|
1377
1191
|
type: Component,
|
|
1378
|
-
args: [{ selector: 'gravity-checkbox', template: "<
|
|
1379
|
-
}], propDecorators: {
|
|
1192
|
+
args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n <input [checked]=\"isCheckboxActive\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n\n type=\"checkbox\">\n <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n <gravity-icon [iconName]=\"'success'\" [size]=\"'sm'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n </span>\n <ng-content></ng-content>\n</div>\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:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
|
|
1193
|
+
}], propDecorators: { checked: [{
|
|
1380
1194
|
type: Input
|
|
1381
1195
|
}], disabled: [{
|
|
1382
1196
|
type: Input
|
|
1383
|
-
}],
|
|
1197
|
+
}], name: [{
|
|
1198
|
+
type: Input
|
|
1199
|
+
}], value: [{
|
|
1384
1200
|
type: Input
|
|
1385
1201
|
}], change: [{
|
|
1386
1202
|
type: Output
|
|
@@ -2082,11 +1898,11 @@ class GravityStepperComponent {
|
|
|
2082
1898
|
this.currentStepResponse.emit(this.currentStep);
|
|
2083
1899
|
}
|
|
2084
1900
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [customIconColorVariable]=\"'var(--gravity-icon-color)'\" [iconName]=\"'success'\"\n [size]=\"'lg'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);padding:.3125rem;z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
1901
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [customIconColorVariable]=\"'var(--gravity-icon-color)'\" [iconName]=\"'success'\"\n [size]=\"'lg'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);padding:.3125rem;z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
2086
1902
|
}
|
|
2087
1903
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, decorators: [{
|
|
2088
1904
|
type: Component,
|
|
2089
|
-
args: [{ selector: 'gravity-stepper', template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [customIconColorVariable]=\"'var(--gravity-icon-color)'\" [iconName]=\"'success'\"\n [size]=\"'lg'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);padding:.3125rem;z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"] }]
|
|
1905
|
+
args: [{ selector: 'gravity-stepper', template: "<div class=\"stepper-header\">\n <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\"\n [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n <hr>\n <div class=\"step-content gravity-padding-right-md\">\n <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n [customIconColorVariable]=\"'var(--gravity-icon-color)'\" [iconName]=\"'success'\"\n [size]=\"'lg'\"></gravity-icon>\n <div>\n <p class=\"step-number hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n <p class=\"border-radius-rounded hr-label md-regular step-state\"\n [class.current]=\"(index + 1) == currentStep\"\n [class.pending]=\"(index + 1) > currentStep\"\n [class.completed]=\"(index + 1) < currentStep\">\n {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n </p>\n </div>\n </div>\n </div>\n <div class=\"gravity-margin-top-xs mobile\">\n <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n </p>\n <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n </p>\n <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n </div>\n</div>\n<div class=\"stepper-content\">\n <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);padding:.3125rem;z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"] }]
|
|
2090
1906
|
}], propDecorators: { currentLang: [{
|
|
2091
1907
|
type: Input
|
|
2092
1908
|
}], stepLabels: [{
|
|
@@ -2105,7 +1921,6 @@ class GravityDesignSystemModule {
|
|
|
2105
1921
|
GravityDialogComponent,
|
|
2106
1922
|
GravityDropdownListComponent,
|
|
2107
1923
|
GravityIconComponent,
|
|
2108
|
-
GravityMonthPickerComponent,
|
|
2109
1924
|
GravityNotificationComponent,
|
|
2110
1925
|
GravityNotificationInstantContainerComponent,
|
|
2111
1926
|
GravityRadioButtonComponent,
|
|
@@ -2117,7 +1932,8 @@ class GravityDesignSystemModule {
|
|
|
2117
1932
|
NodeComponent,
|
|
2118
1933
|
NodeToggleComponent,
|
|
2119
1934
|
NodeCheckboxComponent,
|
|
2120
|
-
NodeNameComponent], imports: [i1.AngularSvgIconModule, i2$
|
|
1935
|
+
NodeNameComponent], imports: [i1.AngularSvgIconModule, i2$1.AngularSvgIconPreloaderModule, BsDatepickerModule,
|
|
1936
|
+
CommonModule,
|
|
2121
1937
|
FormsModule, GravityTooltipModule, NgbDatepickerModule,
|
|
2122
1938
|
NgbProgressbarModule,
|
|
2123
1939
|
NgbToastModule,
|
|
@@ -2142,6 +1958,7 @@ class GravityDesignSystemModule {
|
|
|
2142
1958
|
AngularSvgIconPreloaderModule.forRoot({
|
|
2143
1959
|
configUrl: './assets/gravity/json/icons.json',
|
|
2144
1960
|
}),
|
|
1961
|
+
BsDatepickerModule,
|
|
2145
1962
|
CommonModule,
|
|
2146
1963
|
FormsModule,
|
|
2147
1964
|
GravityTooltipModule.forRoot({}),
|
|
@@ -2163,7 +1980,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2163
1980
|
GravityDialogComponent,
|
|
2164
1981
|
GravityDropdownListComponent,
|
|
2165
1982
|
GravityIconComponent,
|
|
2166
|
-
GravityMonthPickerComponent,
|
|
2167
1983
|
GravityNotificationComponent,
|
|
2168
1984
|
GravityNotificationInstantContainerComponent,
|
|
2169
1985
|
GravityRadioButtonComponent,
|
|
@@ -2182,6 +1998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2182
1998
|
AngularSvgIconPreloaderModule.forRoot({
|
|
2183
1999
|
configUrl: './assets/gravity/json/icons.json',
|
|
2184
2000
|
}),
|
|
2001
|
+
BsDatepickerModule,
|
|
2185
2002
|
CommonModule,
|
|
2186
2003
|
FormsModule,
|
|
2187
2004
|
GravityTooltipModule.forRoot({}),
|