@progressio_resources/gravity-design-system 2.3.2 → 2.4.0

package/fesm2022/progressio_resources-gravity-design-system.mjs

@@ -10,9 +10,11 @@ import * as i1 from 'angular-svg-icon';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import * as i3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i2$2 from 'angular-svg-icon-preloader';
+import * as i2$1 from 'angular-svg-icon-preloader';
 import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
-import * as i2$1 from 'ngx-pretty-checkbox';
+import * as i1$3 from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import * as i1$4 from 'ngx-pretty-checkbox';
 import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
 import { BehaviorSubject, timer } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -1020,251 +1022,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class GravityMonthPickerComponent {
-    constructor() {
-        this.closeCalendar = new EventEmitter();
-        this.monthSelected = new EventEmitter();
-        this.currentLang = 'en';
-        this.monthsEn = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
-        this.monthsEs = ["En", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ag", "Set", "Oct", "Nov", "Dic"];
-        this.isShowingCalendar = false;
-        this.isShowingMonths = true;
-        this.monthPickerData = {};
-        this.monthIndex = new Date().getUTCMonth();
-        this.yearDisplayed = new Date().getUTCFullYear();
-        this.yearBase = GravityMonthPickerComponent.getYearsRangeBase(this.yearDisplayed);
-    }
-    ngOnInit() {
-        if (this.monthConfig?.customMonthDate) {
-            this.monthPickerData.month = this.monthConfig.customMonthDate.month;
-            this.monthPickerData.year = this.monthConfig.customMonthDate.year;
-        }
-    }
-    showCalendar() {
-        this.isShowingCalendar = true;
-    }
-    hideCalendar() {
-        this.isShowingCalendar = false;
-    }
-    updateYear(changeRange, newYear) {
-        if (changeRange) {
-            this.yearDisplayed += changeRange;
-        }
-        else if (newYear) {
-            this.yearDisplayed = newYear;
-        }
-        this.yearBase = GravityMonthPickerComponent.getYearsRangeBase(this.yearDisplayed);
-    }
-    addYear() {
-        this.updateYear(this.isShowingMonths ? 1 : 10);
-    }
-    subtractYear() {
-        this.updateYear(this.isShowingMonths ? -1 : -10);
-    }
-    changeYear(newYear, disabled) {
-        if (!disabled) {
-            this.updateYear(null, newYear);
-            this.isShowingMonths = true;
-        }
-    }
-    static getYearsRangeBase(year) {
-        return (year - year % 10) - 1;
-    }
-    changeMonth(monthIndex, disabled) {
-        if (!disabled) {
-            this.monthPickerData.month = monthIndex + 1;
-            this.monthPickerData.year = this.yearDisplayed;
-            this.isShowingCalendar = false;
-            this.closeCalendar.emit(false);
-            this.monthSelected.emit(this.monthPickerData);
-        }
-    }
-    getMonths() {
-        switch (this.currentLang) {
-            case 'es':
-                return this.monthsEs;
-            default:
-                return this.monthsEn;
-        }
-    }
-    getDisabled(currentIndex) {
-        let minMonthDisabled = false;
-        if (this.monthConfig?.minMonthDate) {
-            if (this.isShowingMonths) {
-                minMonthDisabled = this.yearDisplayed < this.monthConfig.minMonthDate.year || (this.yearDisplayed == this.monthConfig.minMonthDate.year && currentIndex + 1 < this.monthConfig.minMonthDate.month);
-            }
-            else {
-                minMonthDisabled = this.yearBase + currentIndex < this.monthConfig.minMonthDate.year;
-            }
-        }
-        let maxMonthDisabled = false;
-        if (this.monthConfig?.maxMonthDate) {
-            if (this.isShowingMonths) {
-                maxMonthDisabled = this.yearDisplayed > this.monthConfig.maxMonthDate.year || (this.yearDisplayed == this.monthConfig.maxMonthDate.year && currentIndex + 1 > this.monthConfig.maxMonthDate.month);
-            }
-            else {
-                maxMonthDisabled = this.yearBase + currentIndex > this.monthConfig.maxMonthDate.year;
-            }
-        }
-        return minMonthDisabled || maxMonthDisabled;
-    }
-    getArrowDisabled(arrow) {
-        if (arrow == 'left' && this.monthConfig?.minMonthDate) {
-            if (this.isShowingMonths) {
-                return this.yearDisplayed <= this.monthConfig.minMonthDate.year;
-            }
-            else {
-                return this.yearBase < this.monthConfig.minMonthDate.year;
-            }
-        }
-        if (arrow == 'right' && this.monthConfig?.maxMonthDate) {
-            if (this.isShowingMonths) {
-                return this.yearDisplayed >= this.monthConfig.maxMonthDate.year;
-            }
-            else {
-                return this.yearBase + 12 > this.monthConfig.maxMonthDate.year;
-            }
-        }
-    }
-    onDocumentClick() {
-        if (this.isShowingCalendar) {
-            this.isShowingCalendar = false;
-            this.closeCalendar.emit(false);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityMonthPickerComponent, decorators: [{
-            type: Component,
-            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"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { closeCalendar: [{
-                type: Output,
-                args: ['closeCalendar']
-            }], monthSelected: [{
-                type: Output,
-                args: ['monthSelected']
-            }], currentLang: [{
-                type: Input
-            }], monthConfig: [{
-                type: Input
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
 class GravityCalendarComponent {
     constructor() {
         this.calendarResponse = new EventEmitter();
-        this.calendarType = 'date';
+        this.calendarType = 'day';
         this.currentLang = 'en';
         this.state = "enabled";
         this.supportTextType = "neutro";
-        this.calendarOpened = false;
+        this.bsDatepickerConfig = {
+            containerClass: 'gravity-datepicker-dialog',
+            isAnimated: true,
+            selectFromOtherMonth: true,
+            showWeekNumbers: false
+        };
         this.focusInput = false;
-        this.selectedDateInput = '';
-        this.customDateFlag = '';
+        let milliseconds = new Date().getTime();
+        let randomNumber = Math.random() * 10;
+        this.elementId = '' + (milliseconds * randomNumber / 2);
     }
     ngOnChanges(changes) {
-        if (this.datesConfig) {
-            if (this.datesConfig.defaultDays) {
-                let dateWithoutDays = new Date(new Date().setDate(new Date().getDate() - this.datesConfig.defaultDays));
-                this.focusCustomDate(dateWithoutDays);
+        if (changes['datesConfig']) {
+            if (changes['datesConfig'].currentValue.defaultDays) {
+                this.selectedDate = new Date(new Date().setDate(new Date().getDate() - changes['datesConfig'].currentValue.defaultDays));
             }
-            if (this.datesConfig.customDate) {
-                let date = this.datesConfig.customDate == 'today' ? (new Date()) : this.datesConfig.customDate;
-                this.focusCustomDate(date);
+            if (changes['datesConfig'].currentValue.customDate) {
+                this.selectedDate = changes['datesConfig'].currentValue.customDate == 'today' ? new Date() : changes['datesConfig'].currentValue.customDate;
             }
-            if (this.datesConfig.minDate) {
-                this.minDate = GravityCalendarComponent.formatDateToNgbDateStruct(this.datesConfig.minDate);
+            if (changes['datesConfig'].currentValue.minDate) {
+                this.minDate = changes['datesConfig'].currentValue.minDate;
             }
-            if (this.datesConfig.maxDate) {
-                let date = this.datesConfig.maxDate == 'today' ? (new Date()) : this.datesConfig.maxDate;
-                this.maxDate = GravityCalendarComponent.formatDateToNgbDateStruct(date);
+            if (changes['datesConfig'].currentValue.maxDate) {
+                this.maxDate = changes['datesConfig'].currentValue.maxDate == 'today' ? new Date() : changes['datesConfig'].currentValue.maxDate;
             }
         }
     }
-    ngAfterViewInit() {
-        this.changeDateManually();
-    }
     updateSelectedDate($event) {
-        this.selectedDateInput = GravityCalendarComponent.formatNgbDate($event);
-        this.selectedDate = GravityCalendarComponent.convertNgbDateToDate($event);
-        this.datepickerInput.nativeElement.value = this.selectedDateInput;
+        this.selectedDate = $event;
         this.calendarResponse.emit(this.selectedDate);
     }
-    focusCustomDate(customDate) {
-        this.selectedDateInput = GravityCalendarComponent.formatTSDate(customDate);
-        this.selectedDate = customDate;
-        this.customDateFlag = customDate.getUTCFullYear() + '-' + (customDate.getUTCMonth() + 1) + '-' + customDate.getUTCDate();
-    }
     resetCalendar(newDate) {
-        this.focusCustomDate(newDate);
-        this.changeDateManually();
-    }
-    changeDateManually() {
-        if (this.customDateFlag) {
-            this.datePicker.manualDateChange(this.customDateFlag, true);
-            this.datepickerInput.nativeElement.value = this.selectedDateInput;
-            this.customDateFlag = undefined;
-            this.calendarResponse.emit(this.selectedDate);
-        }
-    }
-    static formatNgbDate(ngbDate) {
-        if (!ngbDate) {
-            return null;
-        }
-        return [
-            (ngbDate.month < 10 ? ('0' + ngbDate.month) : ngbDate.month),
-            (ngbDate.day < 10 ? ('0' + ngbDate.day) : ngbDate.day),
-            ngbDate.year
-        ].join('/');
-    }
-    static formatMonthDate(monthDate) {
-        if (!monthDate) {
-            return null;
-        }
-        return [
-            (monthDate.month < 10 ? ('0' + monthDate.month) : monthDate.month),
-            monthDate.year
-        ].join('/');
-    }
-    static formatTSDate(date) {
-        if (!date) {
-            return null;
-        }
-        return [
-            ((date.getUTCMonth() + 1) < 10 ? ('0' + (date.getUTCMonth() + 1)) : (date.getUTCMonth() + 1)),
-            (date.getUTCDate() < 10 ? ('0' + date.getUTCDate()) : date.getUTCDate()),
-            date.getUTCFullYear()
-        ].join('/');
-    }
-    static formatDateToNgbDateStruct(date) {
-        let object = {};
-        object.year = date.getUTCFullYear();
-        object.month = (date.getUTCMonth() + 1);
-        object.day = date.getUTCDate();
-        return object;
-    }
-    static convertNgbDateToDate(date) {
-        return new Date(date.year, (date.month - 1), date.day);
-    }
-    static convertMonthDateToDate(date) {
-        return new Date(date.year, (date.month - 1));
-    }
-    handleMonthPickerResponse(response) {
-        this.selectedDateInput = GravityCalendarComponent.formatMonthDate(response);
-        this.selectedDate = GravityCalendarComponent.convertMonthDateToDate(response);
-        this.monthPickerInput.nativeElement.value = this.selectedDateInput;
+        this.selectedDate = newDate;
         this.calendarResponse.emit(this.selectedDate);
     }
+    getBsDatepickerContainer() {
+        return '.gravity-calendar-field[elementId="' + this.elementId + '"]';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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'\" [size]=\"'sm'\"></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: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$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", "size"] }, { kind: "component", type: GravityMonthPickerComponent, selector: "gravity-month-picker", inputs: ["currentLang", "monthConfig"], outputs: ["closeCalendar", "monthSelected"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, decorators: [{
             type: Component,
-            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'\" [size]=\"'sm'\"></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: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"] }]
-        }], propDecorators: { calendarResponse: [{
+            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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { calendarResponse: [{
                 type: Output,
                 args: ['response']
             }], calendarType: [{
@@ -1277,8 +1086,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], label: [{
                 type: Input
-            }], monthConfig: [{
-                type: Input
             }], required: [{
                 type: Input
             }], state: [{
@@ -1287,15 +1094,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], supportTextType: [{
                 type: Input
-            }], datePicker: [{
-                type: ViewChild,
-                args: ['datePicker', { static: false }]
-            }], datepickerInput: [{
-                type: ViewChild,
-                args: ['datepickerInput', { static: false }]
-            }], monthPickerInput: [{
-                type: ViewChild,
-                args: ['monthPickerInput', { static: false }]
             }] } });
 
 class GravityRadioButtonComponent {
@@ -1308,7 +1106,7 @@ class GravityRadioButtonComponent {
         this.change.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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: i2$1.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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityRadioButtonComponent, decorators: [{
             type: Component,
@@ -1332,16 +1130,24 @@ class GravitySwitchComponent {
         this.required = false;
         this.state = "enabled";
         this.switchResponse = new EventEmitter();
+        this.isSwitchActive = false;
     }
-    toggleSwitchHandler($event) {
-        this.switchResponse.emit($event.checked);
+    ngAfterViewInit() {
+        this.isSwitchActive = this.customCheck;
+        this.switchResponse.emit(this.isSwitchActive);
+    }
+    toggleSwitch() {
+        if (this.state == 'enabled') {
+            this.isSwitchActive = !this.isSwitchActive;
+            this.switchResponse.emit(this.isSwitchActive);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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  <p-checkbox [attr.data-cy]=\"cypressTag\"\n              [checked]=\"customCheck\"\n              [disabled]=\"state == 'disabled'\"\n\n              isSwitch=\"true\"\n              stroke=\"fill\"\n\n              (change)=\"toggleSwitchHandler($event)\">\n  </p-checkbox>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".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 p-checkbox{margin-inline:.5rem .75rem}.gravity-switch p-checkbox{height:100%;width:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, decorators: [{
             type: Component,
-            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  <p-checkbox [attr.data-cy]=\"cypressTag\"\n              [checked]=\"customCheck\"\n              [disabled]=\"state == 'disabled'\"\n\n              isSwitch=\"true\"\n              stroke=\"fill\"\n\n              (change)=\"toggleSwitchHandler($event)\">\n  </p-checkbox>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".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 p-checkbox{margin-inline:.5rem .75rem}.gravity-switch p-checkbox{height:100%;width:3rem}\n"] }]
+            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"] }]
         }], propDecorators: { currentLang: [{
                 type: Input
             }], customCheck: [{
@@ -1363,24 +1169,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class GravityCheckboxComponent {
     constructor() {
-        this.disabled = false;
         this.checked = false;
+        this.disabled = false;
         this.change = new EventEmitter();
+        this.isCheckboxActive = false;
     }
-    onChange(event) {
-        this.change.emit(event);
+    ngAfterViewInit() {
+        this.isCheckboxActive = this.checked;
+        this.change.emit({ value: this.value, checked: this.isCheckboxActive });
+    }
+    toggleCheckbox() {
+        if (!this.disabled) {
+            this.isCheckboxActive = !this.isCheckboxActive;
+            this.change.emit({ value: this.value, checked: this.isCheckboxActive });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { value: "value", disabled: "disabled", checked: "checked" }, outputs: { change: "change" }, ngImport: i0, template: "<p-checkbox [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            [value]=\"value\"\n\n            color=\"default\"\n            shape=\"curve\"\n            stroke=\"fill\"\n\n            (change)=\"onChange($event)\">\n  <svg-icon p-svg name=\"success\"></svg-icon>\n  <ng-content></ng-content>\n</p-checkbox>\n", styles: [":host{display:block}svg-icon{padding:2%}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: i2$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }, { kind: "directive", type: i2$1.NgxPrettySvgDirective, selector: "[pSvg], [p-svg]" }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-checkbox', template: "<p-checkbox [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            [value]=\"value\"\n\n            color=\"default\"\n            shape=\"curve\"\n            stroke=\"fill\"\n\n            (change)=\"onChange($event)\">\n  <svg-icon p-svg name=\"success\"></svg-icon>\n  <ng-content></ng-content>\n</p-checkbox>\n", styles: [":host{display:block}svg-icon{padding:2%}\n"] }]
-        }], propDecorators: { value: [{
+            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"] }]
+        }], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], checked: [{
+            }], name: [{
+                type: Input
+            }], value: [{
                 type: Input
             }], change: [{
                 type: Output
@@ -2082,11 +1898,11 @@ class GravityStepperComponent {
         this.currentStepResponse.emit(this.currentStep);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { currentLang: [{
                 type: Input
             }], stepLabels: [{
@@ -2105,7 +1921,6 @@ class GravityDesignSystemModule {
             GravityDialogComponent,
             GravityDropdownListComponent,
             GravityIconComponent,
-            GravityMonthPickerComponent,
             GravityNotificationComponent,
             GravityNotificationInstantContainerComponent,
             GravityRadioButtonComponent,
@@ -2117,7 +1932,8 @@ class GravityDesignSystemModule {
             NodeComponent,
             NodeToggleComponent,
             NodeCheckboxComponent,
-            NodeNameComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, CommonModule,
+            NodeNameComponent], imports: [i1.AngularSvgIconModule, i2$1.AngularSvgIconPreloaderModule, BsDatepickerModule,
+            CommonModule,
             FormsModule, GravityTooltipModule, NgbDatepickerModule,
             NgbProgressbarModule,
             NgbToastModule,
@@ -2142,6 +1958,7 @@ class GravityDesignSystemModule {
             AngularSvgIconPreloaderModule.forRoot({
                 configUrl: './assets/gravity/json/icons.json',
             }),
+            BsDatepickerModule,
             CommonModule,
             FormsModule,
             GravityTooltipModule.forRoot({}),
@@ -2163,7 +1980,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityDialogComponent,
                         GravityDropdownListComponent,
                         GravityIconComponent,
-                        GravityMonthPickerComponent,
                         GravityNotificationComponent,
                         GravityNotificationInstantContainerComponent,
                         GravityRadioButtonComponent,
@@ -2182,6 +1998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         AngularSvgIconPreloaderModule.forRoot({
                             configUrl: './assets/gravity/json/icons.json',
                         }),
+                        BsDatepickerModule,
                         CommonModule,
                         FormsModule,
                         GravityTooltipModule.forRoot({}),
@@ -2217,11 +2034,12 @@ class GravityDialogManagerService {
         this.ngbModal = ngbModal;
         this.gravityInstantNotificationsService = gravityInstantNotificationsService;
     }
-    openModal(gravityDialogContentInterface, scrollableDialog = false, modalSize = 'md') {
+    openModal(gravityDialogContentInterface, scrollableDialog = false, modalSize = 'md', backdrop = true) {
         const modalRef = this.ngbModal.open(GravityDialogComponent, {
             centered: true,
             scrollable: scrollableDialog,
-            size: modalSize
+            size: modalSize,
+            backdrop: backdrop
         });
         modalRef.componentInstance.dialogContent = gravityDialogContentInterface;
         return modalRef;