npm - @progressio_resources/gravity-design-system - Versions diffs - 3.0.25 → 3.0.27 - Mend

@progressio_resources/gravity-design-system 3.0.25 → 3.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Component, Input, Pipe, EventEmitter, Output, ViewChild, HostListener, HostBinding, InjectionToken, Directive, Optional, Inject, NgModule, Injectable, ChangeDetectionStrategy, inject, ContentChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from 'angular-svg-icon';
 import { AngularSvgIconModule } from 'angular-svg-icon';
@@ -10,17 +10,17 @@ import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbOffcanvas, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i2$3 from 'angular-svg-icon-preloader';
 import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
-import * as i1$3 from 'ngx-bootstrap/datepicker';
+import { BehaviorSubject, Subscription, combineLatest, Subject, timer } from 'rxjs';
+import * as i2 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { Subscription, combineLatest, BehaviorSubject, Subject, timer } from 'rxjs';
 import { filter, map, take, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { isFirstDayOfWeek, getDay, shiftDate, isBefore, endOf, isAfter, startOf, getFirstDayOfMonth, formatDate, isSameMonth, isSameDay, isSameYear, isDateValid, isArray, setFullDate, getLocale, isSame, getMonth, getFullYear } from 'ngx-bootstrap/chronos';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
-import * as i6 from 'ngx-bootstrap/positioning';
-import * as i2$1 from 'ngx-bootstrap/component-loader';
-import * as i2$2 from '@angular/router';
+import * as i7 from 'ngx-bootstrap/positioning';
+import * as i2$1 from '@angular/router';
 import { RouterLink } from '@angular/router';
+import * as i2$2 from 'ngx-bootstrap/component-loader';
 class GravityIconComponent {
     static isOldIcon(iconName) {
@@ -55,59 +55,63 @@ var OLD_ICONS;
 })(OLD_ICONS || (OLD_ICONS = {}));
 var ICONS;
 (function (ICONS) {
-    ICONS[ICONS["addressbook"] = 0] = "addressbook";
-    ICONS[ICONS["arrow-down"] = 1] = "arrow-down";
-    ICONS[ICONS["arrow-left"] = 2] = "arrow-left";
-    ICONS[ICONS["arrow-right"] = 3] = "arrow-right";
-    ICONS[ICONS["arrow-up"] = 4] = "arrow-up";
-    ICONS[ICONS["bell"] = 5] = "bell";
-    ICONS[ICONS["calendar"] = 6] = "calendar";
-    ICONS[ICONS["check"] = 7] = "check";
-    ICONS[ICONS["clock"] = 8] = "clock";
-    ICONS[ICONS["chevron-double-down"] = 9] = "chevron-double-down";
-    ICONS[ICONS["chevron-double-up"] = 10] = "chevron-double-up";
-    ICONS[ICONS["copy"] = 11] = "copy";
-    ICONS[ICONS["deposit"] = 12] = "deposit";
-    ICONS[ICONS["download"] = 13] = "download";
-    ICONS[ICONS["eye-closed"] = 14] = "eye-closed";
-    ICONS[ICONS["eye-open"] = 15] = "eye-open";
-    ICONS[ICONS["exchange-provider"] = 16] = "exchange-provider";
-    ICONS[ICONS["graphics"] = 17] = "graphics";
-    ICONS[ICONS["happy-face"] = 18] = "happy-face";
-    ICONS[ICONS["home"] = 19] = "home";
-    ICONS[ICONS["information-circle"] = 20] = "information-circle";
-    ICONS[ICONS["internal-processing"] = 21] = "internal-processing";
-    ICONS[ICONS["language"] = 22] = "language";
-    ICONS[ICONS["mail"] = 23] = "mail";
-    ICONS[ICONS["menu"] = 24] = "menu";
-    ICONS[ICONS["more-options"] = 25] = "more-options";
-    ICONS[ICONS["new-tab"] = 26] = "new-tab";
-    ICONS[ICONS["news"] = 27] = "news";
-    ICONS[ICONS["off"] = 28] = "off";
-    ICONS[ICONS["on"] = 29] = "on";
-    ICONS[ICONS["payout"] = 30] = "payout";
-    ICONS[ICONS["plus"] = 31] = "plus";
-    ICONS[ICONS["question-circle"] = 32] = "question-circle";
-    ICONS[ICONS["queue"] = 33] = "queue";
-    ICONS[ICONS["rates"] = 34] = "rates";
-    ICONS[ICONS["report"] = 35] = "report";
-    ICONS[ICONS["search"] = 36] = "search";
-    ICONS[ICONS["security"] = 37] = "security";
-    ICONS[ICONS["settings"] = 38] = "settings";
-    ICONS[ICONS["sign-out"] = 39] = "sign-out";
-    ICONS[ICONS["stop"] = 40] = "stop";
-    ICONS[ICONS["success-circle"] = 41] = "success-circle";
-    ICONS[ICONS["swaps"] = 42] = "swaps";
-    ICONS[ICONS["swaps-arrow-left"] = 43] = "swaps-arrow-left";
-    ICONS[ICONS["swaps-arrow-right"] = 44] = "swaps-arrow-right";
-    ICONS[ICONS["switch"] = 45] = "switch";
-    ICONS[ICONS["tool"] = 46] = "tool";
-    ICONS[ICONS["trash"] = 47] = "trash";
-    ICONS[ICONS["unlock"] = 48] = "unlock";
-    ICONS[ICONS["unsuccess"] = 49] = "unsuccess";
-    ICONS[ICONS["update"] = 50] = "update";
-    ICONS[ICONS["user"] = 51] = "user";
-    ICONS[ICONS["warning-circle"] = 52] = "warning-circle";
+    ICONS[ICONS["add-update"] = 0] = "add-update";
+    ICONS[ICONS["addressbook"] = 1] = "addressbook";
+    ICONS[ICONS["arrow-down"] = 2] = "arrow-down";
+    ICONS[ICONS["arrow-left"] = 3] = "arrow-left";
+    ICONS[ICONS["arrow-right"] = 4] = "arrow-right";
+    ICONS[ICONS["arrow-up"] = 5] = "arrow-up";
+    ICONS[ICONS["bell"] = 6] = "bell";
+    ICONS[ICONS["calendar"] = 7] = "calendar";
+    ICONS[ICONS["check"] = 8] = "check";
+    ICONS[ICONS["clock"] = 9] = "clock";
+    ICONS[ICONS["chevron-double-down"] = 10] = "chevron-double-down";
+    ICONS[ICONS["chevron-double-up"] = 11] = "chevron-double-up";
+    ICONS[ICONS["copy"] = 12] = "copy";
+    ICONS[ICONS["deposit"] = 13] = "deposit";
+    ICONS[ICONS["download"] = 14] = "download";
+    ICONS[ICONS["eye-closed"] = 15] = "eye-closed";
+    ICONS[ICONS["eye-open"] = 16] = "eye-open";
+    ICONS[ICONS["exchange-provider"] = 17] = "exchange-provider";
+    ICONS[ICONS["graphics"] = 18] = "graphics";
+    ICONS[ICONS["happy-face"] = 19] = "happy-face";
+    ICONS[ICONS["home"] = 20] = "home";
+    ICONS[ICONS["information-circle"] = 21] = "information-circle";
+    ICONS[ICONS["internal-processing"] = 22] = "internal-processing";
+    ICONS[ICONS["language"] = 23] = "language";
+    ICONS[ICONS["mail"] = 24] = "mail";
+    ICONS[ICONS["menu"] = 25] = "menu";
+    ICONS[ICONS["money-in"] = 26] = "money-in";
+    ICONS[ICONS["monitor"] = 27] = "monitor";
+    ICONS[ICONS["more-options"] = 28] = "more-options";
+    ICONS[ICONS["new-tab"] = 29] = "new-tab";
+    ICONS[ICONS["news"] = 30] = "news";
+    ICONS[ICONS["off"] = 31] = "off";
+    ICONS[ICONS["on"] = 32] = "on";
+    ICONS[ICONS["payout"] = 33] = "payout";
+    ICONS[ICONS["plus"] = 34] = "plus";
+    ICONS[ICONS["question-circle"] = 35] = "question-circle";
+    ICONS[ICONS["queue"] = 36] = "queue";
+    ICONS[ICONS["rates"] = 37] = "rates";
+    ICONS[ICONS["report"] = 38] = "report";
+    ICONS[ICONS["right-angle-arrow"] = 39] = "right-angle-arrow";
+    ICONS[ICONS["search"] = 40] = "search";
+    ICONS[ICONS["security"] = 41] = "security";
+    ICONS[ICONS["settings"] = 42] = "settings";
+    ICONS[ICONS["sign-out"] = 43] = "sign-out";
+    ICONS[ICONS["stop"] = 44] = "stop";
+    ICONS[ICONS["success-circle"] = 45] = "success-circle";
+    ICONS[ICONS["swaps"] = 46] = "swaps";
+    ICONS[ICONS["swaps-arrow-left"] = 47] = "swaps-arrow-left";
+    ICONS[ICONS["swaps-arrow-right"] = 48] = "swaps-arrow-right";
+    ICONS[ICONS["switch"] = 49] = "switch";
+    ICONS[ICONS["tool"] = 50] = "tool";
+    ICONS[ICONS["trash"] = 51] = "trash";
+    ICONS[ICONS["unlock"] = 52] = "unlock";
+    ICONS[ICONS["unsuccess"] = 53] = "unsuccess";
+    ICONS[ICONS["update"] = 54] = "update";
+    ICONS[ICONS["user"] = 55] = "user";
+    ICONS[ICONS["warning-circle"] = 56] = "warning-circle";
 })(ICONS || (ICONS = {}));
 class GravityButtonComponent {
@@ -292,6 +296,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
+class GravityDropdownLabelComponent {
+    constructor() {
+        this.isOpen = false;
+        this.stopPropagation = true;
+        this.size = 'sm';
+        this.onClickLabel = new EventEmitter();
+    }
+    getLabelClass() {
+        switch (this.size) {
+            case "sm": return 'hr-title md-bold';
+            case "md": return 'hr-headline sm-bold';
+            case "lg": return 'hr-headline md-bold';
+        }
+    }
+    onClick(event) {
+        if (this.stopPropagation) {
+            event.stopPropagation();
+        }
+        this.onClickLabel.emit();
+    }
+    getIconSize() {
+        let newIconsSize;
+        let oldIconsSize;
+        switch (this.size) {
+            case "lg":
+            case "md":
+                newIconsSize = 'lg';
+                oldIconsSize = 'lg-24';
+                break;
+            case "sm":
+                newIconsSize = 'md';
+                oldIconsSize = 'md-16';
+                break;
+        }
+        return { newIconsSize, oldIconsSize };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: { label: "label", isOpen: "isOpen", stopPropagation: "stopPropagation", size: "size" }, outputs: { onClickLabel: "onClickLabel" }, ngImport: i0, template: "<div class=\"gravity-dropdown-label\" [class.open]=\"isOpen\" (click)=\"onClick($event)\">\n    <p [ngClass]=\"getLabelClass()\">{{label}}</p>\n    <gravity-icon [style.--icon-color]=\"'var(--label-icon-color)'\"\n                  [iconName]=\"isOpen ? 'arrow-up' : 'arrow-down'\" [size]=\"getIconSize().newIconsSize\"\n                  [iconSize]=\"getIconSize().oldIconsSize\">\n    </gravity-icon>\n</div>\n", styles: [".gravity-dropdown-label{display:flex;align-items:center;color:var(--label-color);gap:var(--gravity-spacing-xs);--label-color: var(--text-primary);--label-icon-color: var(--icon-active-primary)}.gravity-dropdown-label.open{--label-icon-color: var(--on-bg-button-pressed-tertiary);--label-color: var(--on-bg-button-pressed-tertiary)}.gravity-dropdown-label:hover{--label-icon-color: var(--icon-hover-primary);--label-color: var(--on-bg-button-hover-tertiary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-dropdown-label', template: "<div class=\"gravity-dropdown-label\" [class.open]=\"isOpen\" (click)=\"onClick($event)\">\n    <p [ngClass]=\"getLabelClass()\">{{label}}</p>\n    <gravity-icon [style.--icon-color]=\"'var(--label-icon-color)'\"\n                  [iconName]=\"isOpen ? 'arrow-up' : 'arrow-down'\" [size]=\"getIconSize().newIconsSize\"\n                  [iconSize]=\"getIconSize().oldIconsSize\">\n    </gravity-icon>\n</div>\n", styles: [".gravity-dropdown-label{display:flex;align-items:center;color:var(--label-color);gap:var(--gravity-spacing-xs);--label-color: var(--text-primary);--label-icon-color: var(--icon-active-primary)}.gravity-dropdown-label.open{--label-icon-color: var(--on-bg-button-pressed-tertiary);--label-color: var(--on-bg-button-pressed-tertiary)}.gravity-dropdown-label:hover{--label-icon-color: var(--icon-hover-primary);--label-color: var(--on-bg-button-hover-tertiary)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], stopPropagation: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], onClickLabel: [{
+                type: Output
+            }] } });
 class GravityDropdownListComponent {
     set watch(searchInput) {
         if (searchInput) {
@@ -303,6 +361,7 @@ class GravityDropdownListComponent {
         this.filterByPipe = filterByPipe;
         this._eref = _eref;
         this.selectedItemsResponse = new EventEmitter();
+        // Component features
         this.clearable = true;
         this.currentLang = 'en';
         this.hasError = false;
@@ -310,8 +369,10 @@ class GravityDropdownListComponent {
         this.isReadonly = false;
         this.multiple = false;
         this.required = false;
-        // Size and Width
+        // Appearance settings
+        this.labelSize = 'sm';
         this.size = 'md';
+        this.inputType = 'field';
         this.width = 'short';
         this.availableOptions = [];
         this.dropdownOpened = false;
@@ -475,24 +536,33 @@ class GravityDropdownListComponent {
     }
     getSpacingClass(size) {
         switch (size) {
-            case 'sm':
-                return 'gravity-margin-right-xxs';
-            case 'md':
-                return 'gravity-margin-right-xs';
-            case 'lg':
-                return 'gravity-margin-right-sm';
-            case 'xl':
-                return 'gravity-margin-right-md';
-            default:
-                return '';
+            case 'sm': return 'gravity-margin-right-xxs';
+            case 'md': return 'gravity-margin-right-xs';
+            case 'lg': return 'gravity-margin-right-sm';
+            case 'xl': return 'gravity-margin-right-md';
+            default: return '';
+        }
+    }
+    getLabelText() {
+        let result = '';
+        if (this.selectedItems.length === 0) {
+            result = this.label;
+        }
+        else {
+            this.selectedItems.forEach((item, i) => {
+                let displayValue = this.config ? item[this.config.label] : item;
+                let separator = i !== this.selectedItems.length - 1 ? ',' : '';
+                result = result + displayValue + separator;
+            });
         }
+        return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, deps: [{ token: FilterByPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { clearable: "clearable", config: "config", currentLang: "currentLang", customValues: "customValues", cypressTag: "cypressTag", hasError: "hasError", iconLeft: "iconLeft", isDisabled: "isDisabled", isReadonly: "isReadonly", items: "items", label: "label", multiple: "multiple", placeholder: "placeholder", required: "required", supportText: "supportText", currency_id: "currency_id", network_iso: "network_iso", network_id: "network_id", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n  <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n                *ngIf=\"iconLeft\"></gravity-icon>\n  <p class=\"hr-label {{size}}-regular value\">\n    <ng-container *ngIf=\"selectedItems.length == 0\">\n      {{ placeholder ? placeholder : label }}\n    </ng-container>\n    <ng-container *ngIf=\"selectedItems.length > 0\">\n      <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n        {{ config ? item[config.label] : item }}{{ i != selectedItems.length - 1 ? ',' : '' }}\n      </ng-container>\n    </ng-container>\n  </p>\n  <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                *ngIf=\"!isReadonly\"></gravity-icon>\n  <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n       [attr.data-cy]=\"cypressTag + '_panel'\">\n    <div class=\"search-input\">\n      <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n             [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput\n             [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar' : 'Search input'}}\">\n      <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n    </div>\n\n    <div class=\"items-container\">\n      <div class=\"items\">\n        <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n             (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n          <gravity-checkbox *ngIf=\"multiple\" [ngClass]=\"getSpacingClass(size)\"\n                            [checked]=\"checkIfSelected(item)\"></gravity-checkbox>\n          <gravity-currency *ngIf=\"currency_id\" [ngClass]=\"getSpacingClass(size)\" [size]=\"getCurrencyIconSize(size)\"\n                            [currency]=\"{currency_id: this.currency_id}\"></gravity-currency>\n          <div [ngClass]=\"getSpacingClass(size)\">{{ config ? item[config.label] : item }}</div>\n          <gravity-network-pill *ngIf=\"network_id && network_iso\" [network]=\"{ iso: this.network_iso, id: this.network_id }\" ></gravity-network-pill>\n        </div>\n        <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n          {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n      <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\"\n         [attr.data-cy]=\"cypressTag + '_clear'\">\n        {{ currentLang == 'es' ? 'Limpiar' : 'Clear selection' }}\n      </p>\n      <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n         *ngIf=\"availableOptions.length != 0\" [attr.data-cy]=\"cypressTag + '_apply'\">\n        {{ currentLang == 'es' ? 'Aplicar' : 'Apply' }}\n      </p>\n    </div>\n  </div>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n  {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:normal;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--icon-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-input-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto}.dropdown-panel .items-container .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;padding:var(--dropdown-items-padding-top) 12px;width:100%}.dropdown-panel .items-container .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px;cursor:pointer;white-space:nowrap}.dropdown-panel .items-container .items .item:hover:not(.no-results),.dropdown-panel .items-container .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items-container .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: ["checked", "disabled", "name", "size", "value"], outputs: ["change"] }, { kind: "component", type: GravityCurrencyComponent, selector: "gravity-currency", inputs: ["cypressTag", "disabled", "size", "currency", "showLayers"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityNetworkPillComponent, selector: "gravity-network-pill", inputs: ["cypressTag", "disabled", "showNetworkIcon", "network", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { clearable: "clearable", config: "config", currentLang: "currentLang", customValues: "customValues", cypressTag: "cypressTag", hasError: "hasError", iconLeft: "iconLeft", isDisabled: "isDisabled", isReadonly: "isReadonly", items: "items", label: "label", multiple: "multiple", placeholder: "placeholder", required: "required", supportText: "supportText", currency_id: "currency_id", network_iso: "network_iso", network_id: "network_id", labelSize: "labelSize", size: "size", inputType: "inputType", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"inputType === 'field'\">\n<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n</ng-container>\n\n<div class=\"gravity-input-field {{inputType}}-{{labelSize}} {{size}} {{width}}-width {{getStatus()}}\"\n     [attr.data-cy]=\"cypressTag\" (click)=\"toggleDropdown()\">\n\n  <ng-container *ngIf=\"inputType === 'field'\">\n      <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n                    *ngIf=\"iconLeft\"></gravity-icon>\n      <p class=\"hr-label {{size}}-regular value\">\n        <ng-container *ngIf=\"selectedItems.length == 0\">\n          {{ placeholder ? placeholder : label }}\n        </ng-container>\n        <ng-container *ngIf=\"selectedItems.length > 0\">\n          <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n            {{ config ? item[config.label] : item }}{{ i != selectedItems.length - 1 ? ',' : '' }}\n          </ng-container>\n        </ng-container>\n      </p>\n      <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\"\n                    [iconSize]=\"'md-16'\" *ngIf=\"!isReadonly\"></gravity-icon>\n  </ng-container>\n\n  <ng-container *ngIf=\"inputType === 'label'\">\n      <gravity-dropdown-label (onClickLabel)=\"toggleDropdown()\" [label]=\"getLabelText()\"\n                              [size]=\"labelSize\" [isOpen]=\"dropdownOpened\">\n      </gravity-dropdown-label>\n  </ng-container>\n\n  <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n       [attr.data-cy]=\"cypressTag + '_panel'\">\n    <div class=\"search-input\">\n      <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n             [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput\n             [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar' : 'Search input'}}\">\n      <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n    </div>\n\n    <div class=\"items-container\">\n      <div class=\"items\">\n        <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n             (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n          <gravity-checkbox *ngIf=\"multiple\" [ngClass]=\"getSpacingClass(size)\"\n                            [checked]=\"checkIfSelected(item)\"></gravity-checkbox>\n          <gravity-currency *ngIf=\"currency_id\" [ngClass]=\"getSpacingClass(size)\" [size]=\"getCurrencyIconSize(size)\"\n                            [currency]=\"{currency_id: this.currency_id}\"></gravity-currency>\n          <div [ngClass]=\"getSpacingClass(size)\">{{ config ? item[config.label] : item }}</div>\n          <gravity-network-pill *ngIf=\"network_id && network_iso\" [network]=\"{ iso: this.network_iso, id: this.network_id }\" ></gravity-network-pill>\n        </div>\n        <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n          {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n      <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\"\n         [attr.data-cy]=\"cypressTag + '_clear'\">\n        {{ currentLang == 'es' ? 'Limpiar' : 'Clear selection' }}\n      </p>\n      <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n         *ngIf=\"availableOptions.length != 0\" [attr.data-cy]=\"cypressTag + '_apply'\">\n        {{ currentLang == 'es' ? 'Aplicar' : 'Apply' }}\n      </p>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"inputType === 'field'\">\n    <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n      <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n      {{ supportText }}\n    </p>\n    <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n       *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n      {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n    </p>\n</ng-container>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:normal;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--icon-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-input-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto}.dropdown-panel .items-container .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;padding:var(--dropdown-items-padding-top) 12px;width:100%}.dropdown-panel .items-container .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px;cursor:pointer;white-space:nowrap}.dropdown-panel .items-container .items .item:hover:not(.no-results),.dropdown-panel .items-container .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items-container .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.gravity-input-field.label-sm,.gravity-input-field.label-md,.gravity-input-field.label-lg{padding:0;border:none;display:flex;justify-content:center}.gravity-input-field.label-sm{height:24px}.gravity-input-field.label-md{height:36px}.gravity-input-field.label-lg{height:42px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: ["checked", "disabled", "name", "size", "value"], outputs: ["change"] }, { kind: "component", type: GravityCurrencyComponent, selector: "gravity-currency", inputs: ["cypressTag", "disabled", "size", "currency", "showLayers"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityNetworkPillComponent, selector: "gravity-network-pill", inputs: ["cypressTag", "disabled", "showNetworkIcon", "network", "type"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "isOpen", "stopPropagation", "size"], outputs: ["onClickLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-dropdown-list', providers: [FilterByPipe], template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n  <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n                *ngIf=\"iconLeft\"></gravity-icon>\n  <p class=\"hr-label {{size}}-regular value\">\n    <ng-container *ngIf=\"selectedItems.length == 0\">\n      {{ placeholder ? placeholder : label }}\n    </ng-container>\n    <ng-container *ngIf=\"selectedItems.length > 0\">\n      <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n        {{ config ? item[config.label] : item }}{{ i != selectedItems.length - 1 ? ',' : '' }}\n      </ng-container>\n    </ng-container>\n  </p>\n  <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                *ngIf=\"!isReadonly\"></gravity-icon>\n  <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n       [attr.data-cy]=\"cypressTag + '_panel'\">\n    <div class=\"search-input\">\n      <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n             [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput\n             [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar' : 'Search input'}}\">\n      <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n    </div>\n\n    <div class=\"items-container\">\n      <div class=\"items\">\n        <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n             (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n          <gravity-checkbox *ngIf=\"multiple\" [ngClass]=\"getSpacingClass(size)\"\n                            [checked]=\"checkIfSelected(item)\"></gravity-checkbox>\n          <gravity-currency *ngIf=\"currency_id\" [ngClass]=\"getSpacingClass(size)\" [size]=\"getCurrencyIconSize(size)\"\n                            [currency]=\"{currency_id: this.currency_id}\"></gravity-currency>\n          <div [ngClass]=\"getSpacingClass(size)\">{{ config ? item[config.label] : item }}</div>\n          <gravity-network-pill *ngIf=\"network_id && network_iso\" [network]=\"{ iso: this.network_iso, id: this.network_id }\" ></gravity-network-pill>\n        </div>\n        <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n          {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n      <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\"\n         [attr.data-cy]=\"cypressTag + '_clear'\">\n        {{ currentLang == 'es' ? 'Limpiar' : 'Clear selection' }}\n      </p>\n      <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n         *ngIf=\"availableOptions.length != 0\" [attr.data-cy]=\"cypressTag + '_apply'\">\n        {{ currentLang == 'es' ? 'Aplicar' : 'Apply' }}\n      </p>\n    </div>\n  </div>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n  {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:normal;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--icon-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-input-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto}.dropdown-panel .items-container .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;padding:var(--dropdown-items-padding-top) 12px;width:100%}.dropdown-panel .items-container .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px;cursor:pointer;white-space:nowrap}.dropdown-panel .items-container .items .item:hover:not(.no-results),.dropdown-panel .items-container .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items-container .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"] }]
+            args: [{ selector: 'gravity-dropdown-list', providers: [FilterByPipe], template: "<ng-container *ngIf=\"inputType === 'field'\">\n<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n</ng-container>\n\n<div class=\"gravity-input-field {{inputType}}-{{labelSize}} {{size}} {{width}}-width {{getStatus()}}\"\n     [attr.data-cy]=\"cypressTag\" (click)=\"toggleDropdown()\">\n\n  <ng-container *ngIf=\"inputType === 'field'\">\n      <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n                    *ngIf=\"iconLeft\"></gravity-icon>\n      <p class=\"hr-label {{size}}-regular value\">\n        <ng-container *ngIf=\"selectedItems.length == 0\">\n          {{ placeholder ? placeholder : label }}\n        </ng-container>\n        <ng-container *ngIf=\"selectedItems.length > 0\">\n          <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n            {{ config ? item[config.label] : item }}{{ i != selectedItems.length - 1 ? ',' : '' }}\n          </ng-container>\n        </ng-container>\n      </p>\n      <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\"\n                    [iconSize]=\"'md-16'\" *ngIf=\"!isReadonly\"></gravity-icon>\n  </ng-container>\n\n  <ng-container *ngIf=\"inputType === 'label'\">\n      <gravity-dropdown-label (onClickLabel)=\"toggleDropdown()\" [label]=\"getLabelText()\"\n                              [size]=\"labelSize\" [isOpen]=\"dropdownOpened\">\n      </gravity-dropdown-label>\n  </ng-container>\n\n  <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n       [attr.data-cy]=\"cypressTag + '_panel'\">\n    <div class=\"search-input\">\n      <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n             [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput\n             [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar' : 'Search input'}}\">\n      <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n    </div>\n\n    <div class=\"items-container\">\n      <div class=\"items\">\n        <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n             (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n          <gravity-checkbox *ngIf=\"multiple\" [ngClass]=\"getSpacingClass(size)\"\n                            [checked]=\"checkIfSelected(item)\"></gravity-checkbox>\n          <gravity-currency *ngIf=\"currency_id\" [ngClass]=\"getSpacingClass(size)\" [size]=\"getCurrencyIconSize(size)\"\n                            [currency]=\"{currency_id: this.currency_id}\"></gravity-currency>\n          <div [ngClass]=\"getSpacingClass(size)\">{{ config ? item[config.label] : item }}</div>\n          <gravity-network-pill *ngIf=\"network_id && network_iso\" [network]=\"{ iso: this.network_iso, id: this.network_id }\" ></gravity-network-pill>\n        </div>\n        <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n          {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n      <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\"\n         [attr.data-cy]=\"cypressTag + '_clear'\">\n        {{ currentLang == 'es' ? 'Limpiar' : 'Clear selection' }}\n      </p>\n      <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n         *ngIf=\"availableOptions.length != 0\" [attr.data-cy]=\"cypressTag + '_apply'\">\n        {{ currentLang == 'es' ? 'Aplicar' : 'Apply' }}\n      </p>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"inputType === 'field'\">\n    <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n      <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n      {{ supportText }}\n    </p>\n    <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n       *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n      {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n    </p>\n</ng-container>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:normal;margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--icon-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-input-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto}.dropdown-panel .items-container .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;padding:var(--dropdown-items-padding-top) 12px;width:100%}.dropdown-panel .items-container .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px;cursor:pointer;white-space:nowrap}.dropdown-panel .items-container .items .item:hover:not(.no-results),.dropdown-panel .items-container .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items-container .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.gravity-input-field.label-sm,.gravity-input-field.label-md,.gravity-input-field.label-lg{padding:0;border:none;display:flex;justify-content:center}.gravity-input-field.label-sm{height:24px}.gravity-input-field.label-md{height:36px}.gravity-input-field.label-lg{height:42px}\n"] }]
         }], ctorParameters: function () { return [{ type: FilterByPipe }, { type: i0.ElementRef }]; }, propDecorators: { selectedItemsResponse: [{
                 type: Output,
                 args: ['response']
@@ -532,8 +602,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], network_id: [{
                 type: Input
+            }], labelSize: [{
+                type: Input
             }], size: [{
                 type: Input
+            }], inputType: [{
+                type: Input
             }], width: [{
                 type: Input
             }], watch: [{
@@ -665,11 +739,11 @@ class GravityDropdownListDisplayComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListDisplayComponent, deps: [{ token: FilterByPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListDisplayComponent, selector: "gravity-dropdown-list-display", inputs: { cypressTag: "cypressTag", placeholder: "placeholder", currentLang: "currentLang", isReadonly: "isReadonly", isDisabled: "isDisabled", customValues: "customValues", disableSearch: "disableSearch", defaultSelectedItemIndex: "defaultSelectedItemIndex", items: "items", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n\n    <p class=\"hr-label {{size}}-regular value\">\n        <ng-container *ngIf=\"selectedItems.length == 0\">{{ placeholder }}</ng-container>\n        <ng-container *ngIf=\"selectedItems.length > 0\">\n            <gravity-currency-display\n                    [type]=\"'explicit'\" [size]=\"'md'\" [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [currency]=\"{currency_id: this.selectedItem.currency_id,\n                        currency_name: this.selectedItem.currency_name,\n                        currency_iso: this.selectedItem.currency_iso,\n                        network_id: this.selectedItem.network_id,\n                        network_iso: this.selectedItem.network_iso}\">\n            </gravity-currency-display>\n        </ng-container>\n    </p>\n\n    <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                  *ngIf=\"!isReadonly\"></gravity-icon>\n    <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n         [attr.data-cy]=\"cypressTag + '_panel'\">\n\n        <div class=\"search-input\" [class.disabled]=\"disableSearch\">\n            <gravity-icon [style.--icon-color]=\"disableSearch ? 'var(--on-bg-disabled)' : null\"\n                          class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\">\n            </gravity-icon>\n            <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n                   [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput [disabled]=\"disableSearch\"\n                   [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar moneda' : 'Search currency'}}\">\n            <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                          [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\">\n            </gravity-icon>\n        </div>\n\n        <div class=\"items-container\">\n            <div class=\"items\">\n                <div class=\"item-container\" *ngFor=\"let item of availableOptions\" [class.expanded]=\"item.is_expanded\">\n                    <div class=\"hr-label item {{size}}-regular pointer\" [class.disabled]=\"item?.disabled\"\n                         [class.selected]=\"item.sub_items?.length > 0 ? null : checkIfSelected(item)\"\n                         (click)=\"item.sub_items?.length > 0 ? item.is_expanded = !item.is_expanded : selectItem(item)\">\n\n                        <gravity-currency-display\n                                [currency]=\"{currency_id: item.currency_id, currency_name: item.currency_name, currency_iso: item.currency_iso,\n                                network_id: item.network_id, network_iso: item.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"item?.disabled\">\n                        </gravity-currency-display>\n\n                        <span *ngIf=\"!item.sub_items\" class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                            {{ item?.balance_amount }} {{ item?.balance_currency }}\n                        </span>\n\n                        <gravity-icon *ngIf=\"item.sub_items?.length > 0 && item?.disabled !== true\" class=\"pointer expand-icon\"\n                                      [iconSize]=\"'sm-12'\" [iconName]=\"item.is_expanded ? 'arrow-up' : 'arrow-down'\">\n                        </gravity-icon>\n                    </div>\n\n                    <ng-container *ngIf=\"item.is_expanded && item.sub_items\">\n                        <div class=\"hr-label item {{size}}-regular pointer\" *ngFor=\"let subItem of item.sub_items\"\n                             [class.selected]=\"checkIfSelected(subItem)\" (click)=\"selectItem(subItem)\" [class.disabled]=\"subItem?.disabled\">\n\n                            <div class=\"subitem-line\"></div>\n                            <gravity-currency-display\n                                    [currency]=\"{currency_id: subItem.currency_id, currency_name: subItem.currency_name, currency_iso: subItem.currency_iso,\n                                        network_id: subItem.network_id, network_iso: subItem.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                    [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"subItem?.disabled\">\n                            </gravity-currency-display>\n\n                            <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                                    {{ subItem.balance_amount }} {{ subItem.balance_currency }}\n                                </span>\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n                    {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"wallet-balance-info\" *ngIf=\"selectedItems.length > 0\">\n    <p class=\"hr-label sm-regular\">{{ currentLang == 'es' ? 'Saldo de cartera' : 'Wallet balance' }}\n        : {{ this.selectedItem.balance_amount }} {{ this.selectedItem.balance_currency }}</p>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block;--dropdown-cd-field-input-width: 350px}.gravity-input-field{display:flex;cursor:pointer;padding:10px 12px;position:relative;align-items:center;border-radius:.3125rem;width:var(--dropdown-cd-field-input-width);height:var(--dropdown-cd-field-input-height);--text-field-input-field-border-width: .5px;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{width:100%}.gravity-input-field.md{--dropdown-margin: 8px;--dropdown-items-padding: 6px;--text-field-input-field-content: 15px}.gravity-input-field.md.standard-width{--dropdown-cd-field-input-width: 350px;--dropdown-cd-field-input-height: 58px;--dropdown-cd-items-container-height: 502px}.gravity-input-field.closed{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.open{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.disabled{cursor:default;pointer-events:none;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.selected{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-primary)}.dropdown-panel{left:-2px;z-index:5;cursor:initial;position:absolute;width:var(--dropdown-cd-field-input-width);border-radius:.3125rem;top:calc(100% + var(--dropdown-margin));background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-dropdown-list-dc-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input search-input:focus-within{border-bottom:1px solid var(--text-primary)}.dropdown-panel .search-input.disabled{border-bottom:1px solid var(--outline-disabled)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto;margin:var(--dropdown-margin) 0;max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:0 var(--dropdown-items-padding);max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items .item-container.expanded{display:grid;gap:var(--gravity-spacing-xxs);border-bottom:1px solid var(--bg-disabled)}.dropdown-panel .items-container .items .item-container .item{height:61px;display:flex;cursor:pointer;position:relative;white-space:nowrap;align-items:flex-end;justify-content:space-between;padding:.75rem var(--gravity-spacing-sm);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item .expand-icon{position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-sm)}.dropdown-panel .items-container .items .item-container .item .subitem-line{top:-18px;height:40px;position:absolute;border-left:1px solid var(--on-bg-disabled);left:calc(var(--gravity-spacing-md) + var(--gravity-spacing-xxs))}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled),.dropdown-panel .items-container .items .item-container .item.selected{border-radius:.3125rem;color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled) ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary,.dropdown-panel .items-container .items .item-container .item.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)!important}.dropdown-panel .items-container .items .item-container .item.disabled{cursor:default;pointer-events:none}.dropdown-panel .items-container .items .item-container .item.disabled .currency-info{color:var(--on-bg-disabled)}.dropdown-panel .items-container .items .item-container .item .currency-info{right:0;bottom:.3125rem;position:absolute}.wallet-balance-info{text-align:end;margin-top:12px;margin-right:12px;width:calc(var(--dropdown-cd-field-input-width) - 12px)}.no-results{cursor:default!important}\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"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCurrencyDisplayComponent, selector: "gravity-currency-display", inputs: ["disabled", "cypressTag", "size", "showNetworkIcon", "type", "alignment", "currency"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListDisplayComponent, selector: "gravity-dropdown-list-display", inputs: { cypressTag: "cypressTag", placeholder: "placeholder", currentLang: "currentLang", isReadonly: "isReadonly", isDisabled: "isDisabled", customValues: "customValues", disableSearch: "disableSearch", defaultSelectedItemIndex: "defaultSelectedItemIndex", items: "items", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n\n    <p class=\"hr-label {{size}}-regular value\">\n        <ng-container *ngIf=\"selectedItems.length == 0\">{{ placeholder }}</ng-container>\n        <ng-container *ngIf=\"selectedItems.length > 0\">\n            <gravity-currency-display\n                    [type]=\"'explicit'\" [size]=\"'md'\" [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [currency]=\"{currency_id: this.selectedItem.currency_id,\n                        currency_name: this.selectedItem.currency_name,\n                        currency_iso: this.selectedItem.currency_iso,\n                        network_id: this.selectedItem.network_id,\n                        network_iso: this.selectedItem.network_iso}\">\n            </gravity-currency-display>\n        </ng-container>\n    </p>\n\n    <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                  *ngIf=\"!isReadonly\"></gravity-icon>\n    <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n         [attr.data-cy]=\"cypressTag + '_panel'\">\n\n        <div class=\"search-input\" [class.disabled]=\"disableSearch\">\n            <gravity-icon [style.--icon-color]=\"disableSearch ? 'var(--on-bg-disabled)' : null\"\n                          class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\">\n            </gravity-icon>\n            <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n                   [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput [disabled]=\"disableSearch\"\n                   [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar moneda' : 'Search currency'}}\">\n            <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                          [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\">\n            </gravity-icon>\n        </div>\n\n        <div class=\"items-container\">\n            <div class=\"items\">\n                <div class=\"item-container\" *ngFor=\"let item of availableOptions\" [class.expanded]=\"item.is_expanded\">\n                    <div class=\"hr-label item {{size}}-regular pointer\" [class.disabled]=\"item?.disabled\"\n                         [class.selected]=\"item.sub_items?.length > 0 ? null : checkIfSelected(item)\"\n                         (click)=\"item.sub_items?.length > 0 ? item.is_expanded = !item.is_expanded : selectItem(item)\">\n\n                        <gravity-currency-display\n                                [currency]=\"{currency_id: item.currency_id, currency_name: item.currency_name, currency_iso: item.currency_iso,\n                                network_id: item.network_id, network_iso: item.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"item?.disabled\">\n                        </gravity-currency-display>\n\n                        <span *ngIf=\"!item.sub_items\" class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                            {{ item?.balance_amount }} {{ item?.balance_currency }}\n                        </span>\n\n                        <gravity-icon *ngIf=\"item.sub_items?.length > 0 && item?.disabled !== true\" class=\"pointer expand-icon\"\n                                      [iconSize]=\"'sm-12'\" [iconName]=\"item.is_expanded ? 'arrow-up' : 'arrow-down'\">\n                        </gravity-icon>\n                    </div>\n\n                    <ng-container *ngIf=\"item.is_expanded && item.sub_items\">\n                        <div class=\"hr-label item {{size}}-regular pointer\" *ngFor=\"let subItem of item.sub_items\"\n                             [class.selected]=\"checkIfSelected(subItem)\" (click)=\"selectItem(subItem)\" [class.disabled]=\"subItem?.disabled\">\n\n                            <div class=\"subitem-line\"></div>\n                            <gravity-currency-display\n                                    [currency]=\"{currency_id: subItem.currency_id, currency_name: subItem.currency_name, currency_iso: subItem.currency_iso,\n                                        network_id: subItem.network_id, network_iso: subItem.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                    [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"subItem?.disabled\">\n                            </gravity-currency-display>\n\n                            <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                                    {{ subItem.balance_amount }} {{ subItem.balance_currency }}\n                                </span>\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n                    {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"wallet-balance-info\" *ngIf=\"selectedItems.length > 0\">\n    <p class=\"hr-label sm-regular\">{{ currentLang == 'es' ? 'Saldo de cartera' : 'Wallet balance' }}\n        : {{ this.selectedItem.balance_amount }} {{ this.selectedItem.balance_currency }}</p>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block;--dropdown-cd-field-input-width: 350px}.gravity-input-field{display:flex;cursor:pointer;padding:10px 12px;position:relative;align-items:center;border-radius:.3125rem;width:var(--dropdown-cd-field-input-width);height:var(--dropdown-cd-field-input-height);--text-field-input-field-border-width: .5px;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.right{margin-right:var(--icon-margin)}.gravity-input-field p.value{width:100%}.gravity-input-field.md{--dropdown-margin: 8px;--dropdown-items-padding: 6px;--text-field-input-field-content: 15px}.gravity-input-field.md.standard-width{--dropdown-cd-field-input-width: 350px;--dropdown-cd-field-input-height: 58px;--dropdown-cd-items-container-height: 502px}.gravity-input-field.closed{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.open{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.disabled{cursor:default;pointer-events:none;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.selected{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-primary)}.dropdown-panel{left:-2px;z-index:5;cursor:initial;position:absolute;width:var(--dropdown-cd-field-input-width);border-radius:.3125rem;top:calc(100% + var(--dropdown-margin));background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-dropdown-list-dc-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input search-input:focus-within{border-bottom:1px solid var(--text-primary)}.dropdown-panel .search-input.disabled{border-bottom:1px solid var(--outline-disabled)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto;margin:var(--dropdown-margin) 0;max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:0 var(--dropdown-items-padding);max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items .item-container.expanded{display:grid;gap:var(--gravity-spacing-xxs);border-bottom:1px solid var(--bg-disabled)}.dropdown-panel .items-container .items .item-container .item{height:61px;display:flex;cursor:pointer;position:relative;white-space:nowrap;align-items:flex-end;justify-content:space-between;padding:.75rem var(--gravity-spacing-sm);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item .expand-icon{position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-sm)}.dropdown-panel .items-container .items .item-container .item .subitem-line{top:-18px;height:40px;position:absolute;border-left:1px solid var(--on-bg-disabled);left:calc(var(--gravity-spacing-md) + var(--gravity-spacing-xxs))}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled),.dropdown-panel .items-container .items .item-container .item.selected{border-radius:.3125rem;color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled) ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary,.dropdown-panel .items-container .items .item-container .item.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)!important}.dropdown-panel .items-container .items .item-container .item.disabled{cursor:default;pointer-events:none}.dropdown-panel .items-container .items .item-container .item.disabled .currency-info{color:var(--on-bg-disabled)}.dropdown-panel .items-container .items .item-container .item .currency-info{right:0;bottom:.3125rem;position:absolute}.wallet-balance-info{text-align:end;margin-top:12px;margin-right:12px;width:calc(var(--dropdown-cd-field-input-width) - 12px)}.no-results{cursor:default!important}\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"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCurrencyDisplayComponent, selector: "gravity-currency-display", inputs: ["disabled", "cypressTag", "size", "showNetworkIcon", "type", "alignment", "currency"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-dropdown-list-display', providers: [FilterByPipe], template: "<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n\n    <p class=\"hr-label {{size}}-regular value\">\n        <ng-container *ngIf=\"selectedItems.length == 0\">{{ placeholder }}</ng-container>\n        <ng-container *ngIf=\"selectedItems.length > 0\">\n            <gravity-currency-display\n                    [type]=\"'explicit'\" [size]=\"'md'\" [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [currency]=\"{currency_id: this.selectedItem.currency_id,\n                        currency_name: this.selectedItem.currency_name,\n                        currency_iso: this.selectedItem.currency_iso,\n                        network_id: this.selectedItem.network_id,\n                        network_iso: this.selectedItem.network_iso}\">\n            </gravity-currency-display>\n        </ng-container>\n    </p>\n\n    <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                  *ngIf=\"!isReadonly\"></gravity-icon>\n    <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n         [attr.data-cy]=\"cypressTag + '_panel'\">\n\n        <div class=\"search-input\" [class.disabled]=\"disableSearch\">\n            <gravity-icon [style.--icon-color]=\"disableSearch ? 'var(--on-bg-disabled)' : null\"\n                          class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\">\n            </gravity-icon>\n            <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n                   [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput [disabled]=\"disableSearch\"\n                   [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar moneda' : 'Search currency'}}\">\n            <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                          [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\">\n            </gravity-icon>\n        </div>\n\n        <div class=\"items-container\">\n            <div class=\"items\">\n                <div class=\"item-container\" *ngFor=\"let item of availableOptions\" [class.expanded]=\"item.is_expanded\">\n                    <div class=\"hr-label item {{size}}-regular pointer\" [class.disabled]=\"item?.disabled\"\n                         [class.selected]=\"item.sub_items?.length > 0 ? null : checkIfSelected(item)\"\n                         (click)=\"item.sub_items?.length > 0 ? item.is_expanded = !item.is_expanded : selectItem(item)\">\n\n                        <gravity-currency-display\n                                [currency]=\"{currency_id: item.currency_id, currency_name: item.currency_name, currency_iso: item.currency_iso,\n                                network_id: item.network_id, network_iso: item.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"item?.disabled\">\n                        </gravity-currency-display>\n\n                        <span *ngIf=\"!item.sub_items\" class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                            {{ item?.balance_amount }} {{ item?.balance_currency }}\n                        </span>\n\n                        <gravity-icon *ngIf=\"item.sub_items?.length > 0 && item?.disabled !== true\" class=\"pointer expand-icon\"\n                                      [iconSize]=\"'sm-12'\" [iconName]=\"item.is_expanded ? 'arrow-up' : 'arrow-down'\">\n                        </gravity-icon>\n                    </div>\n\n                    <ng-container *ngIf=\"item.is_expanded && item.sub_items\">\n                        <div class=\"hr-label item {{size}}-regular pointer\" *ngFor=\"let subItem of item.sub_items\"\n                             [class.selected]=\"checkIfSelected(subItem)\" (click)=\"selectItem(subItem)\" [class.disabled]=\"subItem?.disabled\">\n\n                            <div class=\"subitem-line\"></div>\n                            <gravity-currency-display\n                                    [currency]=\"{currency_id: subItem.currency_id, currency_name: subItem.currency_name, currency_iso: subItem.currency_iso,\n                                        network_id: subItem.network_id, network_iso: subItem.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                    [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"subItem?.disabled\">\n                            </gravity-currency-display>\n\n                            <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                                    {{ subItem.balance_amount }} {{ subItem.balance_currency }}\n                                </span>\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n                    {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"wallet-balance-info\" *ngIf=\"selectedItems.length > 0\">\n    <p class=\"hr-label sm-regular\">{{ currentLang == 'es' ? 'Saldo de cartera' : 'Wallet balance' }}\n        : {{ this.selectedItem.balance_amount }} {{ this.selectedItem.balance_currency }}</p>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block;--dropdown-cd-field-input-width: 350px}.gravity-input-field{display:flex;cursor:pointer;padding:10px 12px;position:relative;align-items:center;border-radius:.3125rem;width:var(--dropdown-cd-field-input-width);height:var(--dropdown-cd-field-input-height);--text-field-input-field-border-width: .5px;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{width:100%}.gravity-input-field.md{--dropdown-margin: 8px;--dropdown-items-padding: 6px;--text-field-input-field-content: 15px}.gravity-input-field.md.standard-width{--dropdown-cd-field-input-width: 350px;--dropdown-cd-field-input-height: 58px;--dropdown-cd-items-container-height: 502px}.gravity-input-field.closed{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.open{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.disabled{cursor:default;pointer-events:none;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.selected{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-primary)}.dropdown-panel{left:-2px;z-index:5;cursor:initial;position:absolute;width:var(--dropdown-cd-field-input-width);border-radius:.3125rem;top:calc(100% + var(--dropdown-margin));background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-dropdown-list-dc-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input search-input:focus-within{border-bottom:1px solid var(--text-primary)}.dropdown-panel .search-input.disabled{border-bottom:1px solid var(--outline-disabled)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto;margin:var(--dropdown-margin) 0;max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:0 var(--dropdown-items-padding);max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items .item-container.expanded{display:grid;gap:var(--gravity-spacing-xxs);border-bottom:1px solid var(--bg-disabled)}.dropdown-panel .items-container .items .item-container .item{height:61px;display:flex;cursor:pointer;position:relative;white-space:nowrap;align-items:flex-end;justify-content:space-between;padding:.75rem var(--gravity-spacing-sm);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item .expand-icon{position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-sm)}.dropdown-panel .items-container .items .item-container .item .subitem-line{top:-18px;height:40px;position:absolute;border-left:1px solid var(--on-bg-disabled);left:calc(var(--gravity-spacing-md) + var(--gravity-spacing-xxs))}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled),.dropdown-panel .items-container .items .item-container .item.selected{border-radius:.3125rem;color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled) ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary,.dropdown-panel .items-container .items .item-container .item.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)!important}.dropdown-panel .items-container .items .item-container .item.disabled{cursor:default;pointer-events:none}.dropdown-panel .items-container .items .item-container .item.disabled .currency-info{color:var(--on-bg-disabled)}.dropdown-panel .items-container .items .item-container .item .currency-info{right:0;bottom:.3125rem;position:absolute}.wallet-balance-info{text-align:end;margin-top:12px;margin-right:12px;width:calc(var(--dropdown-cd-field-input-width) - 12px)}.no-results{cursor:default!important}\n"] }]
+            args: [{ selector: 'gravity-dropdown-list-display', providers: [FilterByPipe], template: "<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n\n    <p class=\"hr-label {{size}}-regular value\">\n        <ng-container *ngIf=\"selectedItems.length == 0\">{{ placeholder }}</ng-container>\n        <ng-container *ngIf=\"selectedItems.length > 0\">\n            <gravity-currency-display\n                    [type]=\"'explicit'\" [size]=\"'md'\" [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [currency]=\"{currency_id: this.selectedItem.currency_id,\n                        currency_name: this.selectedItem.currency_name,\n                        currency_iso: this.selectedItem.currency_iso,\n                        network_id: this.selectedItem.network_id,\n                        network_iso: this.selectedItem.network_iso}\">\n            </gravity-currency-display>\n        </ng-container>\n    </p>\n\n    <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                  *ngIf=\"!isReadonly\"></gravity-icon>\n    <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\"\n         [attr.data-cy]=\"cypressTag + '_panel'\">\n\n        <div class=\"search-input\" [class.disabled]=\"disableSearch\">\n            <gravity-icon [style.--icon-color]=\"disableSearch ? 'var(--on-bg-disabled)' : null\"\n                          class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\">\n            </gravity-icon>\n            <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n                   [attr.data-cy]=\"cypressTag + '_search_input'\" #searchInput [disabled]=\"disableSearch\"\n                   [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Buscar moneda' : 'Search currency'}}\">\n            <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                          [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\">\n            </gravity-icon>\n        </div>\n\n        <div class=\"items-container\">\n            <div class=\"items\">\n                <div class=\"item-container\" *ngFor=\"let item of availableOptions\" [class.expanded]=\"item.is_expanded\">\n                    <div class=\"hr-label item {{size}}-regular pointer\" [class.disabled]=\"item?.disabled\"\n                         [class.selected]=\"item.sub_items?.length > 0 ? null : checkIfSelected(item)\"\n                         (click)=\"item.sub_items?.length > 0 ? item.is_expanded = !item.is_expanded : selectItem(item)\">\n\n                        <gravity-currency-display\n                                [currency]=\"{currency_id: item.currency_id, currency_name: item.currency_name, currency_iso: item.currency_iso,\n                                network_id: item.network_id, network_iso: item.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"item?.disabled\">\n                        </gravity-currency-display>\n\n                        <span *ngIf=\"!item.sub_items\" class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                            {{ item?.balance_amount }} {{ item?.balance_currency }}\n                        </span>\n\n                        <gravity-icon *ngIf=\"item.sub_items?.length > 0 && item?.disabled !== true\" class=\"pointer expand-icon\"\n                                      [iconSize]=\"'sm-12'\" [iconName]=\"item.is_expanded ? 'arrow-up' : 'arrow-down'\">\n                        </gravity-icon>\n                    </div>\n\n                    <ng-container *ngIf=\"item.is_expanded && item.sub_items\">\n                        <div class=\"hr-label item {{size}}-regular pointer\" *ngFor=\"let subItem of item.sub_items\"\n                             [class.selected]=\"checkIfSelected(subItem)\" (click)=\"selectItem(subItem)\" [class.disabled]=\"subItem?.disabled\">\n\n                            <div class=\"subitem-line\"></div>\n                            <gravity-currency-display\n                                    [currency]=\"{currency_id: subItem.currency_id, currency_name: subItem.currency_name, currency_iso: subItem.currency_iso,\n                                        network_id: subItem.network_id, network_iso: subItem.network_iso}\" [type]=\"'explicit'\" [size]=\"size\"\n                                    [showNetworkIcon]=\"false\" [alignment]=\"'invert'\" [disabled]=\"subItem?.disabled\">\n                            </gravity-currency-display>\n\n                            <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n                                    {{ subItem.balance_amount }} {{ subItem.balance_currency }}\n                                </span>\n                        </div>\n                    </ng-container>\n                </div>\n\n                <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length === 0\">\n                    {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"wallet-balance-info\" *ngIf=\"selectedItems.length > 0\">\n    <p class=\"hr-label sm-regular\">{{ currentLang == 'es' ? 'Saldo de cartera' : 'Wallet balance' }}\n        : {{ this.selectedItem.balance_amount }} {{ this.selectedItem.balance_currency }}</p>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block;--dropdown-cd-field-input-width: 350px}.gravity-input-field{display:flex;cursor:pointer;padding:10px 12px;position:relative;align-items:center;border-radius:.3125rem;width:var(--dropdown-cd-field-input-width);height:var(--dropdown-cd-field-input-height);--text-field-input-field-border-width: .5px;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.right{margin-right:var(--icon-margin)}.gravity-input-field p.value{width:100%}.gravity-input-field.md{--dropdown-margin: 8px;--dropdown-items-padding: 6px;--text-field-input-field-content: 15px}.gravity-input-field.md.standard-width{--dropdown-cd-field-input-width: 350px;--dropdown-cd-field-input-height: 58px;--dropdown-cd-items-container-height: 502px}.gravity-input-field.closed{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.open{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.disabled{cursor:default;pointer-events:none;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.selected{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-primary)}.dropdown-panel{left:-2px;z-index:5;cursor:initial;position:absolute;width:var(--dropdown-cd-field-input-width);border-radius:.3125rem;top:calc(100% + var(--dropdown-margin));background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-dropdown-list-dc-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input search-input:focus-within{border-bottom:1px solid var(--text-primary)}.dropdown-panel .search-input.disabled{border-bottom:1px solid var(--outline-disabled)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto;margin:var(--dropdown-margin) 0;max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:0 var(--dropdown-items-padding);max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items .item-container.expanded{display:grid;gap:var(--gravity-spacing-xxs);border-bottom:1px solid var(--bg-disabled)}.dropdown-panel .items-container .items .item-container .item{height:61px;display:flex;cursor:pointer;position:relative;white-space:nowrap;align-items:flex-end;justify-content:space-between;padding:.75rem var(--gravity-spacing-sm);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item .expand-icon{position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-sm)}.dropdown-panel .items-container .items .item-container .item .subitem-line{top:-18px;height:40px;position:absolute;border-left:1px solid var(--on-bg-disabled);left:calc(var(--gravity-spacing-md) + var(--gravity-spacing-xxs))}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled),.dropdown-panel .items-container .items .item-container .item.selected{border-radius:.3125rem;color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled) ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary,.dropdown-panel .items-container .items .item-container .item.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)!important}.dropdown-panel .items-container .items .item-container .item.disabled{cursor:default;pointer-events:none}.dropdown-panel .items-container .items .item-container .item.disabled .currency-info{color:var(--on-bg-disabled)}.dropdown-panel .items-container .items .item-container .item .currency-info{right:0;bottom:.3125rem;position:absolute}.wallet-balance-info{text-align:end;margin-top:12px;margin-right:12px;width:calc(var(--dropdown-cd-field-input-width) - 12px)}.no-results{cursor:default!important}\n"] }]
         }], ctorParameters: function () { return [{ type: FilterByPipe }, { type: i0.ElementRef }]; }, propDecorators: { selectedItemsResponse: [{
                 type: Output,
                 args: ['response']
@@ -1671,8 +1745,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
-class GravityCalendarComponent {
+class HeaderTypeService {
     constructor() {
+        this.isMobileSubject = new BehaviorSubject(false);
+        this.calendarTypeSubject = new BehaviorSubject('days');
+        this.headerTypeSubject = new BehaviorSubject('self');
+    }
+    getCalendarType$() { return this.calendarTypeSubject.asObservable(); }
+    setCalendarType(value) { this.calendarTypeSubject.next(value); }
+    getCalendarType() { return this.calendarTypeSubject.value; }
+    getHeaderType$() { return this.headerTypeSubject.asObservable(); }
+    setHeaderType(value) { this.headerTypeSubject.next(value); }
+    getHeaderType() { return this.headerTypeSubject.value; }
+    getIsMobile$() { return this.isMobileSubject.asObservable(); }
+    setIsMobile(value) { this.isMobileSubject.next(value); }
+    getIsMobile() { return this.isMobileSubject.value; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTypeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTypeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+class GravityCalendarComponent {
+    constructor(headerTypeService) {
+        this.headerTypeService = headerTypeService;
         this.calendarResponse = new EventEmitter();
         this.calendarType = 'day';
         this.currentLang = 'en';
@@ -1716,13 +1816,18 @@ class GravityCalendarComponent {
     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", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body 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'\" [iconSize]=\"'md-16'\"></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 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;padding:.5rem 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", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
+    restartCalendarType() {
+        this.headerTypeService.setIsMobile(false);
+        this.headerTypeService.setHeaderType('self');
+        this.headerTypeService.setCalendarType('days');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, deps: [{ token: HeaderTypeService }], 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", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body 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'\" [iconSize]=\"'md-16'\"></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; restartCalendarType()\"\n         (onShown)=\"restartCalendarType()\"\n\n         class=\"hr-label md-regular\"\n         bsDatepicker\n         placeholder=\"Select a {{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 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;padding:.5rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:5px}.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: i2.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: i2.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", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
 }
 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 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'\" [iconSize]=\"'md-16'\"></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 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;padding:.5rem 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: [{
+            args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body 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'\" [iconSize]=\"'md-16'\"></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; restartCalendarType()\"\n         (onShown)=\"restartCalendarType()\"\n\n         class=\"hr-label md-regular\"\n         bsDatepicker\n         placeholder=\"Select a {{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 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;padding:.5rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:5px}.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 [{ type: HeaderTypeService }]; }, propDecorators: { calendarResponse: [{
                 type: Output,
                 args: ['response']
             }], calendarType: [{
@@ -1813,6 +1918,17 @@ class BsDatepickerAbstractComponent {
             return 'sm';
         }
     }
+    get calendarSpacing() {
+        if (!this._config.isMobile && (!this.isRangePicker || this._config.displayMonths == 1)) {
+            return 'spacing-' + this._config.calendarSize;
+        }
+        else if (this.isRangePicker || this._config.displayMonths != 1) {
+            return 'spacing-' + this._config.calendarSize;
+        }
+        else {
+            return 'spacing-sm';
+        }
+    }
     get daysCalendar$() {
         return this._daysCalendar$;
     }
@@ -2733,11 +2849,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 class BsDatepickerNavigationViewComponent {
-    constructor() {
-        this.showNavigationArrows = false;
+    constructor(headerTypeService, cdr) {
+        this.headerTypeService = headerTypeService;
+        this.cdr = cdr;
         this.isDisabled = false;
+        this.showNavigationArrows = false;
         this.onNavigate = new EventEmitter();
         this.onViewMode = new EventEmitter();
+        this.isMobile = false;
+        this.headerType = 'self';
+    }
+    ngOnInit() {
+        this.headerTypeSubscription = this.headerTypeService.getHeaderType$()
+            .subscribe(type => {
+            this.headerType = type;
+        });
+        this.isMobileSubscription = this.headerTypeService.getIsMobile$()
+            .subscribe(is => {
+            this.isMobile = is;
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.headerTypeSubscription) {
+            this.headerTypeSubscription.unsubscribe();
+        }
+        if (this.isMobileSubscription) {
+            this.isMobileSubscription.unsubscribe();
+        }
     }
     navTo(down, disabled) {
         if (disabled)
@@ -2748,23 +2887,24 @@ class BsDatepickerNavigationViewComponent {
         if (this.isDisabled)
             return;
         this.onViewMode.emit(viewMode);
+        this.headerTypeService.setCalendarType(viewMode);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerNavigationViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", showNavigationArrows: "showNavigationArrows", isDisabled: "isDisabled", type: "type" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode" }, ngImport: i0, template: "<ng-container *ngIf=\"calendar\">\n  <ng-container *ngIf=\"type == 'days'\">\n    <div class=\"previous gravity-icon-button\"\n         (click)=\"navTo(true, calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1))\"\n         [class.disabled]=\"calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1)\">\n      <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n                    *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 0)\"></gravity-icon>\n    </div>\n\n    <div class=\"current hr-title month sm-bold\" [class.disabled]=\"isDisabled\" (click)=\"view('month')\"\n         *ngIf=\"calendar?.monthTitle\">\n      {{ calendar.monthTitle }}\n      <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n         *ngIf=\"calendar?.monthTitle\">\n      {{ calendar.yearTitle }}\n      <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"next gravity-icon-button\"\n         (click)=\"navTo(false, calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0))\"\n         [class.disabled]=\"calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0)\">\n      <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n                    *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 1)\"></gravity-icon>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"type == 'months'\">\n    <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n         *ngIf=\"calendar?.yearTitle\">\n      {{ calendar.yearTitle }}\n      <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"arrows\">\n      <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n           (click)=\"navTo(true, calendar.disableLeftArrow)\">\n        <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n\n      <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n           (click)=\"navTo(false, calendar.disableRightArrow)\">\n        <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"type == 'years'\">\n    <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n         *ngIf=\"calendar?.yearTitle\">\n      {{ calendar.yearTitle }}\n      <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"arrows\">\n      <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n           (click)=\"navTo(true, calendar.disableLeftArrow)\">\n        <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n\n      <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n           (click)=\"navTo(false, calendar.disableRightArrow)\">\n        <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\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{align-items:center;background-color:var(--bg-calender-primary);display:flex;justify-content:space-between;width:var(--calendar-width)}.gravity-icon-button{border-radius:.3125rem;height:28px;padding:8px;width:28px}.gravity-icon-button:not(.disabled){cursor:pointer}.gravity-icon-button:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gravity-icon-button:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.current{align-items:center;border-radius:.3125rem;display:flex;gap:8px;height:25px;padding:8px}.current:not(.disabled){color:var(--bg-calendar-nav-primary);cursor:pointer}.current:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.current:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.current.disabled{color:var(--on-bg-disabled)}.current.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.arrows{align-items:center;display:flex;gap:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerNavigationViewComponent, deps: [{ token: HeaderTypeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: { calendarIndex: "calendarIndex", isDisabled: "isDisabled", calendar: "calendar", type: "type", showNavigationArrows: "showNavigationArrows" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode" }, ngImport: i0, template: "<ng-container *ngIf=\"calendar\">\n    <ng-container *ngIf=\"type == 'days'\">\n        <div class=\"previous gravity-icon-button\" *ngIf=\"!isMobile\"\n             (click)=\"navTo(true, calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1))\"\n             [class.disabled]=\"calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1)\">\n            <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n                          *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 0)\"></gravity-icon>\n        </div>\n\n        <div class=\"current hr-title month sm-bold\" [class.disabled]=\"isDisabled\" (click)=\"view('month')\"\n             *ngIf=\"calendar?.monthTitle\">\n            {{ calendar.monthTitle }}\n            <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n             *ngIf=\"calendar?.monthTitle\">\n            {{ calendar.yearTitle }}\n            <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"next gravity-icon-button\" *ngIf=\"!isMobile\"\n             (click)=\"navTo(false, calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0))\"\n             [class.disabled]=\"calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0)\">\n            <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n                          *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 1)\"></gravity-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'months' && (headerType == 'self' || isMobile)\">\n        <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n             (click)=\"navTo(true, calendar.disableLeftArrow)\">\n            <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"current no-action hr-title sm-bold year\" [class.disabled]=\"isDisabled\"\n             *ngIf=\"calendar?.yearTitle\"> {{ calendar.yearTitle }}\n        </div>\n\n        <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n             (click)=\"navTo(false, calendar.disableRightArrow)\">\n            <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'months' && headerType == 'integrate' && isMobile === false\">\n        <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n             *ngIf=\"calendar?.yearTitle\">\n            {{ calendar.yearTitle }}\n            <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"arrows\">\n            <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n                 (click)=\"navTo(true, calendar.disableLeftArrow)\">\n                <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n\n            <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n                 (click)=\"navTo(false, calendar.disableRightArrow)\">\n                <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'years' && (headerType == 'self' || isMobile)\">\n        <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n             (click)=\"navTo(true, calendar.disableLeftArrow)\">\n            <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"current no-action hr-title sm-bold year\" [class.disabled]=\"isDisabled\"\n             *ngIf=\"calendar?.yearTitle\"> {{ calendar.yearTitle }}\n        </div>\n\n        <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n             (click)=\"navTo(false, calendar.disableRightArrow)\">\n            <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'years' && headerType == 'integrate' && isMobile === false\">\n        <div class=\"current no-action hr-title sm-bold year\" [class.disabled]=\"isDisabled\"\n             *ngIf=\"calendar?.yearTitle\">\n            {{ calendar.yearTitle }}\n\n        </div>\n\n        <div class=\"arrows\">\n            <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n                 (click)=\"navTo(true, calendar.disableLeftArrow)\">\n                <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n\n            <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n                 (click)=\"navTo(false, calendar.disableRightArrow)\">\n                <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n        </div>\n    </ng-container>\n</ng-container>\n\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{align-items:center;background-color:var(--bg-calender-primary);display:flex;justify-content:space-between;width:var(--calendar-width)}.gravity-icon-button{border-radius:.3125rem;height:28px;padding:8px;width:28px}.gravity-icon-button:not(.disabled){cursor:pointer}.gravity-icon-button:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gravity-icon-button:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.current{align-items:center;border-radius:.3125rem;display:flex;gap:8px;height:25px;padding:8px}.current:not(.disabled){color:var(--bg-calendar-nav-primary)}.current:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.current:not(.disabled):not(.no-action):hover{cursor:pointer;background-color:var(--bg-button-active-tertiary)}.current.disabled{color:var(--on-bg-disabled)}.current.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.arrows{align-items:center;display:flex;gap:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerNavigationViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-datepicker-navigation-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"calendar\">\n  <ng-container *ngIf=\"type == 'days'\">\n    <div class=\"previous gravity-icon-button\"\n         (click)=\"navTo(true, calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1))\"\n         [class.disabled]=\"calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1)\">\n      <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n                    *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 0)\"></gravity-icon>\n    </div>\n\n    <div class=\"current hr-title month sm-bold\" [class.disabled]=\"isDisabled\" (click)=\"view('month')\"\n         *ngIf=\"calendar?.monthTitle\">\n      {{ calendar.monthTitle }}\n      <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n         *ngIf=\"calendar?.monthTitle\">\n      {{ calendar.yearTitle }}\n      <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"next gravity-icon-button\"\n         (click)=\"navTo(false, calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0))\"\n         [class.disabled]=\"calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0)\">\n      <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n                    *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 1)\"></gravity-icon>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"type == 'months'\">\n    <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n         *ngIf=\"calendar?.yearTitle\">\n      {{ calendar.yearTitle }}\n      <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"arrows\">\n      <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n           (click)=\"navTo(true, calendar.disableLeftArrow)\">\n        <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n\n      <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n           (click)=\"navTo(false, calendar.disableRightArrow)\">\n        <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"type == 'years'\">\n    <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n         *ngIf=\"calendar?.yearTitle\">\n      {{ calendar.yearTitle }}\n      <gravity-icon [iconName]=\"'arrow-up'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n    </div>\n\n    <div class=\"arrows\">\n      <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n           (click)=\"navTo(true, calendar.disableLeftArrow)\">\n        <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n\n      <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n           (click)=\"navTo(false, calendar.disableRightArrow)\">\n        <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\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{align-items:center;background-color:var(--bg-calender-primary);display:flex;justify-content:space-between;width:var(--calendar-width)}.gravity-icon-button{border-radius:.3125rem;height:28px;padding:8px;width:28px}.gravity-icon-button:not(.disabled){cursor:pointer}.gravity-icon-button:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gravity-icon-button:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.current{align-items:center;border-radius:.3125rem;display:flex;gap:8px;height:25px;padding:8px}.current:not(.disabled){color:var(--bg-calendar-nav-primary);cursor:pointer}.current:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.current:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.current.disabled{color:var(--on-bg-disabled)}.current.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.arrows{align-items:center;display:flex;gap:24px}\n"] }]
-        }], propDecorators: { calendar: [{
-                type: Input
-            }], calendarIndex: [{
-                type: Input
-            }], showNavigationArrows: [{
+            args: [{ selector: 'bs-datepicker-navigation-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"calendar\">\n    <ng-container *ngIf=\"type == 'days'\">\n        <div class=\"previous gravity-icon-button\" *ngIf=\"!isMobile\"\n             (click)=\"navTo(true, calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1))\"\n             [class.disabled]=\"calendar.disableLeftArrow || (!showNavigationArrows && calendarIndex == 1)\">\n            <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"\n                          *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 0)\"></gravity-icon>\n        </div>\n\n        <div class=\"current hr-title month sm-bold\" [class.disabled]=\"isDisabled\" (click)=\"view('month')\"\n             *ngIf=\"calendar?.monthTitle\">\n            {{ calendar.monthTitle }}\n            <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n             *ngIf=\"calendar?.monthTitle\">\n            {{ calendar.yearTitle }}\n            <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"next gravity-icon-button\" *ngIf=\"!isMobile\"\n             (click)=\"navTo(false, calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0))\"\n             [class.disabled]=\"calendar.disableRightArrow || (!showNavigationArrows && calendarIndex == 0)\">\n            <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"\n                          *ngIf=\"showNavigationArrows || (!showNavigationArrows && calendarIndex == 1)\"></gravity-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'months' && (headerType == 'self' || isMobile)\">\n        <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n             (click)=\"navTo(true, calendar.disableLeftArrow)\">\n            <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"current no-action hr-title sm-bold year\" [class.disabled]=\"isDisabled\"\n             *ngIf=\"calendar?.yearTitle\"> {{ calendar.yearTitle }}\n        </div>\n\n        <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n             (click)=\"navTo(false, calendar.disableRightArrow)\">\n            <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'months' && headerType == 'integrate' && isMobile === false\">\n        <div class=\"current hr-title sm-bold year\" [class.disabled]=\"isDisabled\" (click)=\"view('year')\"\n             *ngIf=\"calendar?.yearTitle\">\n            {{ calendar.yearTitle }}\n            <gravity-icon [iconName]=\"'arrow-down'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"arrows\">\n            <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n                 (click)=\"navTo(true, calendar.disableLeftArrow)\">\n                <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n\n            <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n                 (click)=\"navTo(false, calendar.disableRightArrow)\">\n                <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'years' && (headerType == 'self' || isMobile)\">\n        <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n             (click)=\"navTo(true, calendar.disableLeftArrow)\">\n            <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n\n        <div class=\"current no-action hr-title sm-bold year\" [class.disabled]=\"isDisabled\"\n             *ngIf=\"calendar?.yearTitle\"> {{ calendar.yearTitle }}\n        </div>\n\n        <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n             (click)=\"navTo(false, calendar.disableRightArrow)\">\n            <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"type == 'years' && headerType == 'integrate' && isMobile === false\">\n        <div class=\"current no-action hr-title sm-bold year\" [class.disabled]=\"isDisabled\"\n             *ngIf=\"calendar?.yearTitle\">\n            {{ calendar.yearTitle }}\n\n        </div>\n\n        <div class=\"arrows\">\n            <div class=\"previous gravity-icon-button\" [class.disabled]=\"calendar.disableLeftArrow\"\n                 (click)=\"navTo(true, calendar.disableLeftArrow)\">\n                <gravity-icon [iconName]=\"'arrow-left'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n\n            <div class=\"next gravity-icon-button\" [class.disabled]=\"calendar.disableRightArrow\"\n                 (click)=\"navTo(false, calendar.disableRightArrow)\">\n                <gravity-icon [iconName]=\"'arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n            </div>\n        </div>\n    </ng-container>\n</ng-container>\n\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{align-items:center;background-color:var(--bg-calender-primary);display:flex;justify-content:space-between;width:var(--calendar-width)}.gravity-icon-button{border-radius:.3125rem;height:28px;padding:8px;width:28px}.gravity-icon-button:not(.disabled){cursor:pointer}.gravity-icon-button:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gravity-icon-button:not(.disabled):hover{background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.current{align-items:center;border-radius:.3125rem;display:flex;gap:8px;height:25px;padding:8px}.current:not(.disabled){color:var(--bg-calendar-nav-primary)}.current:not(.disabled) gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.current:not(.disabled):not(.no-action):hover{cursor:pointer;background-color:var(--bg-button-active-tertiary)}.current.disabled{color:var(--on-bg-disabled)}.current.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.arrows{align-items:center;display:flex;gap:24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { calendarIndex: [{
                 type: Input
             }], isDisabled: [{
                 type: Input
+            }], calendar: [{
+                type: Input
             }], type: [{
                 type: Input
+            }], showNavigationArrows: [{
+                type: Input
             }], onNavigate: [{
                 type: Output
             }], onViewMode: [{
@@ -2772,7 +2912,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 class BsDaysCalendarViewComponent {
-    constructor() {
+    constructor(headerTypeService) {
+        this.headerTypeService = headerTypeService;
         this.onNavigate = new EventEmitter();
         this.onViewMode = new EventEmitter();
         this.onSelect = new EventEmitter();
@@ -2783,6 +2924,7 @@ class BsDaysCalendarViewComponent {
         this.onNavigate.emit({ step: { month: BsNavigationDirection.DOWN === event ? -1 : 1 } });
     }
     changeViewMode(event) {
+        this.headerTypeService.setHeaderType('integrate');
         this.onViewMode.emit(event);
     }
     selectDay(event) {
@@ -2791,13 +2933,13 @@ class BsDaysCalendarViewComponent {
     hoverDay(cell, isHovered) {
         this.onHover.emit({ cell, isHovered });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaysCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", isDisabled: "isDisabled", options: "options", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" [isDisabled]=\"!!isDisabled\"\n                                 (onNavigate)=\"navigateTo($event)\" (onViewMode)=\"changeViewMode($event)\"\n                                 [type]=\"'days'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <div class=\"weekdays\">\n      <article aria-label=\"weekday\" class=\"hr-body {{size}}-regular\" *ngFor=\"let weekday of calendar.weekdays\">\n        {{ weekday }}\n      </article>\n    </div>\n    <hr>\n    <div class=\"week\" *ngFor=\"let week of calendar.weeks\">\n      <ng-container *ngFor=\"let day of week.days\">\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"!isiOS\" (mouseenter)=\"hoverDay(day, true)\"\n                 (mouseleave)=\"hoverDay(day, false)\"></article>\n\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"isiOS\"></article>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<div class=\"\"></div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}.weekdays{align-items:center;display:flex;justify-content:space-between}.weekdays article{align-items:center;color:var(--text-highlight-primary);display:flex;height:var(--weekdays-article-height);justify-content:center;padding:8px;width:var(--weekdays-article-width)}hr{border:2px solid var(--divider-menu-active-primary);margin:8px 0;opacity:1}.week{align-items:center;display:flex;justify-content:space-between}.week article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--week-article-height);justify-content:center;width:var(--week-article-width)}.week article.is-other-month,.week article.disabled{color:var(--on-bg-disabled);cursor:default}.week article.today{border-color:var(--bg-number-calendar-hover-primary)}.week article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.week article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}.week article.in-range:not(.select-end){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);border-radius:0;color:var(--on-bg-button-pressed-tertiary)}.week article.select-start{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-right-radius:0;border-top-right-radius:0;color:var(--on-bg-button-pressed-primary)}.week article.select-end{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--on-bg-button-pressed-primary)}\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"] }, { kind: "component", type: BsDatepickerDayDecoratorComponent, selector: "[bsDatepickerDayDecorator]", inputs: ["day"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "isDisabled", "type"], outputs: ["onNavigate", "onViewMode"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaysCalendarViewComponent, deps: [{ token: HeaderTypeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", isDisabled: "isDisabled", options: "options", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\" [class.mobile]=\"headerTypeService.getIsMobile()\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" [isDisabled]=\"!!isDisabled\"\n                                 (onNavigate)=\"navigateTo($event)\" (onViewMode)=\"changeViewMode($event)\" [type]=\"'days'\">\n  </bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <div class=\"weekdays\">\n      <article aria-label=\"weekday\" class=\"hr-body {{size}}-regular\" *ngFor=\"let weekday of calendar.weekdays\">\n        {{ weekday }}\n      </article>\n    </div>\n    <hr>\n    <div class=\"week\" *ngFor=\"let week of calendar.weeks\">\n      <ng-container *ngFor=\"let day of week.days\">\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"!isiOS\" (mouseenter)=\"hoverDay(day, true)\"\n                 (mouseleave)=\"hoverDay(day, false)\"></article>\n\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"isiOS\"></article>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<div class=\"\"></div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.gt-calendar-view-head.mobile bs-datepicker-navigation-view{display:flex;justify-content:center;gap:var(--gravity-spacing-sm)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}.weekdays{align-items:center;display:flex;justify-content:space-between}.weekdays article{align-items:center;color:var(--text-highlight-primary);display:flex;height:var(--weekdays-article-height);justify-content:center;padding:8px;width:var(--weekdays-article-width)}hr{border:1px solid var(--divider-menu-active-primary)}.week{align-items:center;display:flex;justify-content:space-between}.week article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--week-article-height);justify-content:center;width:var(--week-article-width)}.week article.is-other-month,.week article.disabled{color:var(--on-bg-disabled);cursor:default}.week article.today{border-color:var(--bg-number-calendar-hover-primary)}.week article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.week article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}.week article.in-range:not(.select-end){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);border-radius:0;color:var(--on-bg-button-pressed-tertiary)}.week article.select-start{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-right-radius:0;border-top-right-radius:0;color:var(--on-bg-button-pressed-primary)}.week article.select-end{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--on-bg-button-pressed-primary)}\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"] }, { kind: "component", type: BsDatepickerDayDecoratorComponent, selector: "[bsDatepickerDayDecorator]", inputs: ["day"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendarIndex", "isDisabled", "calendar", "type", "showNavigationArrows"], outputs: ["onNavigate", "onViewMode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaysCalendarViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-days-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" [isDisabled]=\"!!isDisabled\"\n                                 (onNavigate)=\"navigateTo($event)\" (onViewMode)=\"changeViewMode($event)\"\n                                 [type]=\"'days'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <div class=\"weekdays\">\n      <article aria-label=\"weekday\" class=\"hr-body {{size}}-regular\" *ngFor=\"let weekday of calendar.weekdays\">\n        {{ weekday }}\n      </article>\n    </div>\n    <hr>\n    <div class=\"week\" *ngFor=\"let week of calendar.weeks\">\n      <ng-container *ngFor=\"let day of week.days\">\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"!isiOS\" (mouseenter)=\"hoverDay(day, true)\"\n                 (mouseleave)=\"hoverDay(day, false)\"></article>\n\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"isiOS\"></article>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<div class=\"\"></div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}.weekdays{align-items:center;display:flex;justify-content:space-between}.weekdays article{align-items:center;color:var(--text-highlight-primary);display:flex;height:var(--weekdays-article-height);justify-content:center;padding:8px;width:var(--weekdays-article-width)}hr{border:2px solid var(--divider-menu-active-primary);margin:8px 0;opacity:1}.week{align-items:center;display:flex;justify-content:space-between}.week article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--week-article-height);justify-content:center;width:var(--week-article-width)}.week article.is-other-month,.week article.disabled{color:var(--on-bg-disabled);cursor:default}.week article.today{border-color:var(--bg-number-calendar-hover-primary)}.week article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.week article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}.week article.in-range:not(.select-end){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);border-radius:0;color:var(--on-bg-button-pressed-tertiary)}.week article.select-start{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-right-radius:0;border-top-right-radius:0;color:var(--on-bg-button-pressed-primary)}.week article.select-end{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--on-bg-button-pressed-primary)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { calendar: [{
+            args: [{ selector: 'bs-days-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\" [class.mobile]=\"headerTypeService.getIsMobile()\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" [isDisabled]=\"!!isDisabled\"\n                                 (onNavigate)=\"navigateTo($event)\" (onViewMode)=\"changeViewMode($event)\" [type]=\"'days'\">\n  </bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <div class=\"weekdays\">\n      <article aria-label=\"weekday\" class=\"hr-body {{size}}-regular\" *ngFor=\"let weekday of calendar.weekdays\">\n        {{ weekday }}\n      </article>\n    </div>\n    <hr>\n    <div class=\"week\" *ngFor=\"let week of calendar.weeks\">\n      <ng-container *ngFor=\"let day of week.days\">\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"!isiOS\" (mouseenter)=\"hoverDay(day, true)\"\n                 (mouseleave)=\"hoverDay(day, false)\"></article>\n\n        <article bsDatepickerDayDecorator class=\"hr-body {{size}}-regular\" (click)=\"selectDay(day)\" [day]=\"day\"\n                 *ngIf=\"isiOS\"></article>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<div class=\"\"></div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.gt-calendar-view-head.mobile bs-datepicker-navigation-view{display:flex;justify-content:center;gap:var(--gravity-spacing-sm)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}.weekdays{align-items:center;display:flex;justify-content:space-between}.weekdays article{align-items:center;color:var(--text-highlight-primary);display:flex;height:var(--weekdays-article-height);justify-content:center;padding:8px;width:var(--weekdays-article-width)}hr{border:1px solid var(--divider-menu-active-primary)}.week{align-items:center;display:flex;justify-content:space-between}.week article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--week-article-height);justify-content:center;width:var(--week-article-width)}.week article.is-other-month,.week article.disabled{color:var(--on-bg-disabled);cursor:default}.week article.today{border-color:var(--bg-number-calendar-hover-primary)}.week article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.week article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}.week article.in-range:not(.select-end){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);border-radius:0;color:var(--on-bg-button-pressed-tertiary)}.week article.select-start{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-right-radius:0;border-top-right-radius:0;color:var(--on-bg-button-pressed-primary)}.week article.select-end{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--on-bg-button-pressed-primary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }]; }, propDecorators: { calendar: [{
                 type: Input
             }], calendarIndex: [{
                 type: Input
@@ -2819,12 +2961,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
-class BsMonthCalendarViewComponent {
+class DateAbbreviationPipe {
     constructor() {
+        // Define month abbreviations for different languages
+        this.monthAbbreviations = {
+            'en': {
+                'January': 'Jan', 'February': 'Feb', 'March': 'Mar', 'April': 'Apr', 'May': 'May', 'June': 'Jun',
+                'July': 'Jul', 'August': 'Aug', 'September': 'Sep', 'October': 'Oct', 'November': 'Nov', 'December': 'Dec'
+            },
+            'es': {
+                'January': 'Ene', 'February': 'Feb', 'March': 'Mar', 'April': 'Abr', 'May': 'May', 'June': 'Jun',
+                'July': 'Jul', 'August': 'Ago', 'September': 'Sep', 'October': 'Oct', 'November': 'Nov', 'December': 'Dic'
+            }
+        };
+    }
+    transform(date, lang = 'en', monthAbbreviation = true) {
+        if (!date)
+            return '';
+        // Check if it's a range of dates
+        if (date.includes(' - ')) {
+            const [startDate, endDate] = date.split(' - ');
+            return `${this.formatDate(startDate, lang, monthAbbreviation)} - ${this.formatDate(endDate, lang, monthAbbreviation)}`;
+        }
+        // If it's a single date
+        return this.formatDate(date, lang, monthAbbreviation);
+    }
+    formatDate(date, lang, monthAbbreviation) {
+        let parsedDate;
+        // Only year
+        if (date.length === 4 && !isNaN(Number(date))) {
+            return `${date}`;
+        }
+        // Only month
+        if (this.monthAbbreviations[lang] && this.monthAbbreviations[lang][date]) {
+            return monthAbbreviation ? this.monthAbbreviations[lang][date] : date;
+        }
+        // Convert the date string into a Date object
+        parsedDate = new Date(date);
+        // If the date is not valid
+        if (isNaN(parsedDate.getTime())) {
+            const parts = date.split('/');
+            if (parts.length === 2) {
+                const month = parseInt(parts[0], 10) - 1;
+                const year = parseInt(parts[1], 10);
+                parsedDate = new Date(year, month, 1);
+            }
+        }
+        // If the date is still invalid, return an empty string
+        if (isNaN(parsedDate.getTime())) {
+            return '';
+        }
+        // Get the full month name from the Date object
+        const monthName = parsedDate.toLocaleString('en', { month: 'long' });
+        const abbreviatedMonth = monthAbbreviation ? this.monthAbbreviations[lang]?.[monthName] : monthName;
+        const day = parsedDate.getDate();
+        const year = parsedDate.getFullYear();
+        // Month and year
+        if (date.indexOf('/') !== -1 && date.split('/').length === 2) {
+            return monthAbbreviation ? `${abbreviatedMonth}, ${year}` : `${abbreviatedMonth} ${year}`;
+        }
+        // Day, month, and year
+        return `${abbreviatedMonth} ${day}, ${year}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateAbbreviationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DateAbbreviationPipe, name: "dateFormating" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateAbbreviationPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateFormating'
+                }]
+        }] });
+class BsMonthCalendarViewComponent {
+    constructor(headerTypeService) {
+        this.headerTypeService = headerTypeService;
+        this.calendarLang = 'en';
+        this.onHover = new EventEmitter();
         this.onNavigate = new EventEmitter();
-        this.onViewMode = new EventEmitter();
         this.onSelect = new EventEmitter();
-        this.onHover = new EventEmitter();
+        this.onViewMode = new EventEmitter();
     }
     navigateTo(event) {
         const step = BsNavigationDirection.DOWN === event ? -1 : 1;
@@ -2832,39 +3048,44 @@ class BsMonthCalendarViewComponent {
     }
     viewMonth(month) {
         this.onSelect.emit(month);
+        this.headerTypeService.setCalendarType('days');
     }
     hoverMonth(cell, isHovered) {
         this.onHover.emit({ cell, isHovered });
     }
     changeViewMode(event) {
+        this.headerTypeService.setHeaderType('integrate');
         this.onViewMode.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsMonthCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\"\n                                 [type]=\"'months'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <hr>\n    <div class=\"months\" *ngFor=\"let row of calendar?.months\">\n      <article class=\"hr-body sm-regular\"\n               [class.disabled]=\"month.isDisabled\"\n               [class.is-highlighted]=\"month.isHovered\"\n               [class.selected]=\"month.isSelected\"\n               [class.today]=\"month.isToday\"\n\n               (click)=\"viewMonth(month)\" *ngFor=\"let month of row\"\n               (mouseenter)=\"hoverMonth(month, true)\" (mouseleave)=\"hoverMonth(month, false)\">\n        {{ month.label }}\n      </article>\n    </div>\n  </div>\n</div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.months{align-items:center;display:flex;justify-content:space-between}.months article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--month-article-height);justify-content:center;width:var(--month-article-width)}.months article.disabled{color:var(--on-bg-disabled);cursor:default}.months article.today{border-color:var(--bg-number-calendar-hover-primary)}.months article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.months article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "isDisabled", "type"], outputs: ["onNavigate", "onViewMode"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsMonthCalendarViewComponent, deps: [{ token: HeaderTypeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: { calendarIndex: "calendarIndex", size: "size", calendarLang: "calendarLang", showNavigationArrows: "showNavigationArrows", calendar: "calendar" }, outputs: { onHover: "onHover", onNavigate: "onNavigate", onSelect: "onSelect", onViewMode: "onViewMode" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\" [type]=\"'months'\">\n  </bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\"> <hr>\n    <div class=\"calendar-body\">\n      <ng-container *ngFor=\"let row of calendar?.months\">\n        <div class=\"months\" *ngFor=\"let month of row\">\n          <article class=\"hr-body sm-regular\"\n                   [class.disabled]=\"month.isDisabled\"\n                   [class.is-highlighted]=\"month.isHovered\"\n                   [class.selected]=\"month.isSelected\"\n                   [class.today]=\"month.isToday\"\n\n                   (click)=\"viewMonth(month)\"\n                   (mouseenter)=\"hoverMonth(month, true)\" (mouseleave)=\"hoverMonth(month, false)\">\n              {{ month.label | dateFormating: calendarLang : true }}\n          </article>\n        </div>\n      </ng-container>\n  </div>\n</div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:var(--gravity-spacing-xs);background-color:var(--bg-calender-primary);gap:var(--height-gap) var(--width-gap)}hr{margin-bottom:var(--gravity-spacing-sm);border:1px solid var(--divider-menu-active-primary)}.months{align-items:center;display:flex;justify-content:space-between}.months article{display:flex;cursor:pointer;border-radius:8px;align-items:center;justify-content:center;border:2px solid transparent;width:var(--month-article-width);height:var(--month-article-height);color:var(--on-bg-button-pressed-tertiary)}.months article.disabled{cursor:default;color:var(--on-bg-disabled)}.months article.today{border-color:var(--bg-number-calendar-hover-primary)}.months article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.months article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendarIndex", "isDisabled", "calendar", "type", "showNavigationArrows"], outputs: ["onNavigate", "onViewMode"] }, { kind: "pipe", type: DateAbbreviationPipe, name: "dateFormating" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsMonthCalendarViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-month-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\"\n                                 [type]=\"'months'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <hr>\n    <div class=\"months\" *ngFor=\"let row of calendar?.months\">\n      <article class=\"hr-body sm-regular\"\n               [class.disabled]=\"month.isDisabled\"\n               [class.is-highlighted]=\"month.isHovered\"\n               [class.selected]=\"month.isSelected\"\n               [class.today]=\"month.isToday\"\n\n               (click)=\"viewMonth(month)\" *ngFor=\"let month of row\"\n               (mouseenter)=\"hoverMonth(month, true)\" (mouseleave)=\"hoverMonth(month, false)\">\n        {{ month.label }}\n      </article>\n    </div>\n  </div>\n</div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.months{align-items:center;display:flex;justify-content:space-between}.months article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:var(--month-article-height);justify-content:center;width:var(--month-article-width)}.months article.disabled{color:var(--on-bg-disabled);cursor:default}.months article.today{border-color:var(--bg-number-calendar-hover-primary)}.months article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.months article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"] }]
-        }], propDecorators: { calendar: [{
+            args: [{ selector: 'bs-month-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\" [type]=\"'months'\">\n  </bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\"> <hr>\n    <div class=\"calendar-body\">\n      <ng-container *ngFor=\"let row of calendar?.months\">\n        <div class=\"months\" *ngFor=\"let month of row\">\n          <article class=\"hr-body sm-regular\"\n                   [class.disabled]=\"month.isDisabled\"\n                   [class.is-highlighted]=\"month.isHovered\"\n                   [class.selected]=\"month.isSelected\"\n                   [class.today]=\"month.isToday\"\n\n                   (click)=\"viewMonth(month)\"\n                   (mouseenter)=\"hoverMonth(month, true)\" (mouseleave)=\"hoverMonth(month, false)\">\n              {{ month.label | dateFormating: calendarLang : true }}\n          </article>\n        </div>\n      </ng-container>\n  </div>\n</div>\n", styles: [".gt-calendar-view-head,.gt-calendar-view-body{width:var(--calendar-width)}.calendar-body{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:var(--gravity-spacing-xs);background-color:var(--bg-calender-primary);gap:var(--height-gap) var(--width-gap)}hr{margin-bottom:var(--gravity-spacing-sm);border:1px solid var(--divider-menu-active-primary)}.months{align-items:center;display:flex;justify-content:space-between}.months article{display:flex;cursor:pointer;border-radius:8px;align-items:center;justify-content:center;border:2px solid transparent;width:var(--month-article-width);height:var(--month-article-height);color:var(--on-bg-button-pressed-tertiary)}.months article.disabled{cursor:default;color:var(--on-bg-disabled)}.months article.today{border-color:var(--bg-number-calendar-hover-primary)}.months article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.months article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }]; }, propDecorators: { calendarIndex: [{
                 type: Input
-            }], calendarIndex: [{
+            }], size: [{
+                type: Input
+            }], calendarLang: [{
                 type: Input
             }], showNavigationArrows: [{
                 type: Input
-            }], size: [{
+            }], calendar: [{
                 type: Input
-            }], onNavigate: [{
+            }], onHover: [{
                 type: Output
-            }], onViewMode: [{
+            }], onNavigate: [{
                 type: Output
             }], onSelect: [{
                 type: Output
-            }], onHover: [{
+            }], onViewMode: [{
                 type: Output
             }] } });
 class BsYearsCalendarViewComponent {
-    constructor() {
+    constructor(headerTypeService) {
+        this.headerTypeService = headerTypeService;
         this.onNavigate = new EventEmitter();
         this.onViewMode = new EventEmitter();
         this.onSelect = new EventEmitter();
@@ -2876,20 +3097,25 @@ class BsYearsCalendarViewComponent {
     }
     viewYear(year) {
         this.onSelect.emit(year);
+        this.headerTypeService.setCalendarType('months');
+        if (this.headerTypeService.getCalendarType() === 'days') {
+            this.headerTypeService.setHeaderType('self');
+        }
     }
     hoverYear(cell, isHovered) {
         this.onHover.emit({ cell, isHovered });
     }
     changeViewMode(event) {
         this.onViewMode.emit(event);
+        this.headerTypeService.setHeaderType('integrate');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsYearsCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\" [type]=\"'years'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <hr>\n    <div class=\"years\" *ngFor=\"let row of calendar?.years\">\n      <article class=\"hr-body sm-regular\"\n               [class.disabled]=\"year.isDisabled\"\n               [class.is-highlighted]=\"year.isHovered\"\n               [class.selected]=\"year.isSelected\"\n               [class.today]=\"year.isToday\"\n\n               (click)=\"viewYear(year)\" *ngFor=\"let year of row\"\n               (mouseenter)=\"hoverYear(year, true)\" (mouseleave)=\"hoverYear(year, false)\">\n        {{ year.label }}\n      </article>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.years{align-items:center;display:flex;justify-content:space-between}.years article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:35px;justify-content:center;width:45px}.years article.disabled{color:var(--on-bg-disabled);cursor:default}.years article.today{border-color:var(--bg-number-calendar-hover-primary)}.years article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.years article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "isDisabled", "type"], outputs: ["onNavigate", "onViewMode"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsYearsCalendarViewComponent, deps: [{ token: HeaderTypeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: { calendar: "calendar", calendarIndex: "calendarIndex", showNavigationArrows: "showNavigationArrows", size: "size" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\" [type]=\"'years'\">\n  </bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n    <hr>\n    <div class=\"calendar-body\">\n    <div class=\"years\" *ngFor=\"let row of calendar?.years\">\n        <article class=\"hr-body sm-regular\"\n               [class.disabled]=\"year.isDisabled\"\n               [class.is-highlighted]=\"year.isHovered\"\n               [class.selected]=\"year.isSelected\"\n               [class.today]=\"year.isToday\"\n\n               (click)=\"viewYear(year)\" *ngFor=\"let year of row\"\n               (mouseenter)=\"hoverYear(year, true)\" (mouseleave)=\"hoverYear(year, false)\">\n        {{ year.label }}\n      </article>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-body{display:grid;margin-top:8px;background-color:var(--bg-calender-primary);gap:var(--height-gap) var(--width-gap)}hr{margin-bottom:var(--gravity-spacing-sm);border:1px solid var(--divider-menu-active-primary)}.years{display:flex;align-items:center;justify-content:space-between}.years article{display:flex;cursor:pointer;border-radius:8px;align-items:center;justify-content:center;border:2px solid transparent;width:var(--month-article-width);height:var(--month-article-height);color:var(--on-bg-button-pressed-tertiary)}.years article.disabled{cursor:default;color:var(--on-bg-disabled)}.years article.today{border-color:var(--bg-number-calendar-hover-primary)}.years article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.years article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendarIndex", "isDisabled", "calendar", "type", "showNavigationArrows"], outputs: ["onNavigate", "onViewMode"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsYearsCalendarViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-years-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\" [type]=\"'years'\"></bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n  <div class=\"calendar-body\">\n    <hr>\n    <div class=\"years\" *ngFor=\"let row of calendar?.years\">\n      <article class=\"hr-body sm-regular\"\n               [class.disabled]=\"year.isDisabled\"\n               [class.is-highlighted]=\"year.isHovered\"\n               [class.selected]=\"year.isSelected\"\n               [class.today]=\"year.isToday\"\n\n               (click)=\"viewYear(year)\" *ngFor=\"let year of row\"\n               (mouseenter)=\"hoverYear(year, true)\" (mouseleave)=\"hoverYear(year, false)\">\n        {{ year.label }}\n      </article>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-body{background-color:var(--bg-calender-primary);margin-top:8px}hr{border:2px solid var(--divider-menu-active-primary);margin:0 0 20px;opacity:1}.years{align-items:center;display:flex;justify-content:space-between}.years article{align-items:center;border:2px solid transparent;border-radius:8px;color:var(--on-bg-button-pressed-tertiary);cursor:pointer;display:flex;height:35px;justify-content:center;width:45px}.years article.disabled{color:var(--on-bg-disabled);cursor:default}.years article.today{border-color:var(--bg-number-calendar-hover-primary)}.years article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.years article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"] }]
-        }], propDecorators: { calendar: [{
+            args: [{ selector: 'bs-years-calendar-view', template: "<!--navigation-->\n<div class=\"gt-calendar-view-head\">\n  <bs-datepicker-navigation-view [calendar]=\"calendar\" [calendarIndex]=\"calendarIndex\"\n                                 [showNavigationArrows]=\"showNavigationArrows\" (onNavigate)=\"navigateTo($event)\"\n                                 (onViewMode)=\"changeViewMode($event)\" [type]=\"'years'\">\n  </bs-datepicker-navigation-view>\n</div>\n\n<div class=\"gt-calendar-view-body\">\n    <hr>\n    <div class=\"calendar-body\">\n    <div class=\"years\" *ngFor=\"let row of calendar?.years\">\n        <article class=\"hr-body sm-regular\"\n               [class.disabled]=\"year.isDisabled\"\n               [class.is-highlighted]=\"year.isHovered\"\n               [class.selected]=\"year.isSelected\"\n               [class.today]=\"year.isToday\"\n\n               (click)=\"viewYear(year)\" *ngFor=\"let year of row\"\n               (mouseenter)=\"hoverYear(year, true)\" (mouseleave)=\"hoverYear(year, false)\">\n        {{ year.label }}\n      </article>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-body{display:grid;margin-top:8px;background-color:var(--bg-calender-primary);gap:var(--height-gap) var(--width-gap)}hr{margin-bottom:var(--gravity-spacing-sm);border:1px solid var(--divider-menu-active-primary)}.years{display:flex;align-items:center;justify-content:space-between}.years article{display:flex;cursor:pointer;border-radius:8px;align-items:center;justify-content:center;border:2px solid transparent;width:var(--month-article-width);height:var(--month-article-height);color:var(--on-bg-button-pressed-tertiary)}.years article.disabled{cursor:default;color:var(--on-bg-disabled)}.years article.today{border-color:var(--bg-number-calendar-hover-primary)}.years article.is-highlighted:not(.disabled){background-color:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary);color:var(--on-bg-button-pressed-tertiary)}.years article.selected{background-color:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary);color:var(--on-bg-button-pressed-primary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }]; }, propDecorators: { calendar: [{
                 type: Input
             }], calendarIndex: [{
                 type: Input
@@ -2907,12 +3133,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
+class GravityLinkComponent {
+    constructor() {
+        this.link = '';
+        this.target = '_self';
+        this.iconPosition = 'left';
+        this.iconSize = 'md-16';
+        this.state = 'active';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityLinkComponent, selector: "gravity-link", inputs: { linkText: "linkText", fontSize: "fontSize", link: "link", cypressTag: "cypressTag", iconName: "iconName", target: "target", iconPosition: "iconPosition", iconSize: "iconSize", state: "state" }, ngImport: i0, template: "<div class=\"gravity-link-container {{iconPosition}} {{state}}\">\n\n    <a *ngIf=\"!(link.startsWith('http') || link.startsWith('https'))\"\n       [routerLink]=\"state === 'disabled' || link === '' ? null : link\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}}\">\n        {{linkText}}\n    </a>\n\n    <a *ngIf=\"link.startsWith('http') || link.startsWith('https')\"\n       [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}}\">\n        {{linkText}}\n    </a>\n\n    <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n                  [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n    </gravity-icon>\n</div>", 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}.gravity-link-container{display:flex;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container.active{--link-text-color: var(--link-active-primary)}.gravity-link-container.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container.disabled{--link-text-color: var(--link-disabled-primary);cursor:not-allowed}.gravity-link-container:hover:not(.disabled){background-color:var(--link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container a{border:none;width:max-content;align-items:center;display:inline-flex;justify-content:center;text-decoration:underline;color:var(--link-text-color);gap:var(--gravity-spacing-xxs);border-radius:.0625rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-link', template: "<div class=\"gravity-link-container {{iconPosition}} {{state}}\">\n\n    <a *ngIf=\"!(link.startsWith('http') || link.startsWith('https'))\"\n       [routerLink]=\"state === 'disabled' || link === '' ? null : link\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}}\">\n        {{linkText}}\n    </a>\n\n    <a *ngIf=\"link.startsWith('http') || link.startsWith('https')\"\n       [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}}\">\n        {{linkText}}\n    </a>\n\n    <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n                  [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n    </gravity-icon>\n</div>", 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}.gravity-link-container{display:flex;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container.active{--link-text-color: var(--link-active-primary)}.gravity-link-container.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container.disabled{--link-text-color: var(--link-disabled-primary);cursor:not-allowed}.gravity-link-container:hover:not(.disabled){background-color:var(--link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container a{border:none;width:max-content;align-items:center;display:inline-flex;justify-content:center;text-decoration:underline;color:var(--link-text-color);gap:var(--gravity-spacing-xxs);border-radius:.0625rem}\n"] }]
+        }], propDecorators: { linkText: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], cypressTag: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }] } });
 class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
     set value(value) {
         this._effects?.setValue(value);
     }
-    constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positionService) {
+    constructor(headerTypeService, _renderer, _config, _callbacks, _store, _element, _actions, _effects, _positionService) {
         super(_config);
+        this.headerTypeService = headerTypeService;
         this._config = _config;
         this._callbacks = _callbacks;
         this._store = _store;
@@ -3009,8 +3270,8 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerContainerComponent, selector: "gt-datepicker-container", host: { attributes: { "aria-label": "calendar", "role": "dialog" }, listeners: { "click": "$event.stopPropagation()" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerContainerComponent, deps: [{ token: HeaderTypeService }, { token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i7.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerContainerComponent, selector: "gt-datepicker-container", host: { attributes: { "aria-label": "calendar", "role": "dialog" }, listeners: { "click": "$event.stopPropagation()" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendarIndex", "size", "calendarLang", "showNavigationArrows", "calendar"], outputs: ["onHover", "onNavigate", "onSelect", "onViewMode"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontSize", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerContainerComponent, decorators: [{
             type: Component,
@@ -3019,8 +3280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         class: 'bottom',
                         '(click)': '$event.stopPropagation()',
                         role: 'dialog'
-                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
+                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }, { type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i7.PositioningService }]; } });
 let previousDate$1;
 class BsDatepickerDirective {
@@ -3039,7 +3300,8 @@ class BsDatepickerDirective {
         this._bsValue = value;
         this.bsValueChange.emit(value);
     }
-    constructor(_config, _elementRef, _renderer, _viewContainerRef, cis) {
+    constructor(headerTypeService, _config, _elementRef, _renderer, _viewContainerRef, cis) {
+        this.headerTypeService = headerTypeService;
         this._config = _config;
         this._elementRef = _elementRef;
         this._renderer = _renderer;
@@ -3105,7 +3367,6 @@ class BsDatepickerDirective {
             this._subs.push(this._datepickerRef.instance.valueChange.subscribe((value) => {
                 this.initPreviousValue();
                 this.bsValue = value;
-                // TODO ebiazzetti keep modal open after select a date
                 if (this.keepDatepickerModalOpened())
                     return;
                 this.hide();
@@ -3185,7 +3446,7 @@ class BsDatepickerDirective {
         }
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerDirective, deps: [{ token: BsDatepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerDirective, deps: [{ token: HeaderTypeService }, { token: BsDatepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$2.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerDirective, selector: "[gravityDatePicker]", inputs: { bsConfig: "bsConfig", container: "container", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", minMode: "minMode", isOpen: "isOpen", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit", onHidden: "onHidden", onShown: "onShown" }, exportAs: ["gravityDatePicker"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerDirective, decorators: [{
@@ -3194,7 +3455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[gravityDatePicker]',
                     exportAs: 'gravityDatePicker'
                 }]
-        }], ctorParameters: function () { return [{ type: BsDatepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }, { type: BsDatepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
                 type: Input
             }], container: [{
                 type: Input
@@ -3223,20 +3484,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 class BsDatepickerInlineContainerComponent extends BsDatepickerContainerComponent {
-    constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService) {
-        super(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService);
+    constructor(headerTypeService, _renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService) {
+        super(headerTypeService, _renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService);
         _renderer.setStyle(_element.nativeElement, 'display', 'inline-block');
         _renderer.setStyle(_element.nativeElement, 'position', 'static');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerInlineContainerComponent, selector: "gt-datepicker-inline-container", host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineContainerComponent, deps: [{ token: HeaderTypeService }, { token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i7.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerInlineContainerComponent, selector: "gt-datepicker-inline-container", host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendarIndex", "size", "calendarLang", "showNavigationArrows", "calendar"], outputs: ["onHover", "onNavigate", "onSelect", "onViewMode"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontSize", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gt-datepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
                         '(click)': '$event.stopPropagation()'
-                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
+                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }, { type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i7.PositioningService }]; } });
 class BsDatepickerInlineConfig extends BsDatepickerConfig {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3342,7 +3603,7 @@ class BsDatepickerInlineDirective {
         this._datepicker.dispose();
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineDirective, deps: [{ token: BsDatepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineDirective, deps: [{ token: BsDatepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$2.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDatepickerInlineDirective, selector: "[gravityDatePickerInline]", inputs: { bsConfig: "bsConfig", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", minMode: "minMode", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit" }, exportAs: ["gravityDatePickerInline"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDatepickerInlineDirective, decorators: [{
@@ -3351,7 +3612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[gravityDatePickerInline]',
                     exportAs: 'gravityDatePickerInline'
                 }]
-        }], ctorParameters: function () { return [{ type: BsDatepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
+        }], ctorParameters: function () { return [{ type: BsDatepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
                 type: Input
             }], isDisabled: [{
                 type: Input
@@ -3375,8 +3636,9 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
     set value(value) {
         this._effects?.setRangeValue(value);
     }
-    constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positionService) {
+    constructor(headerTypeService, _renderer, _config, _callbacks, _store, _element, _actions, _effects, _positionService) {
         super(_config);
+        this.headerTypeService = headerTypeService;
         this._config = _config;
         this._callbacks = _callbacks;
         this._store = _store;
@@ -3528,8 +3790,8 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerContainerComponent, selector: "gt-daterangepicker-container", host: { attributes: { "aria-label": "calendar", "role": "dialog" }, listeners: { "click": "$event.stopPropagation()" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerContainerComponent, deps: [{ token: HeaderTypeService }, { token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i7.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerContainerComponent, selector: "gt-daterangepicker-container", host: { attributes: { "aria-label": "calendar", "role": "dialog" }, listeners: { "click": "$event.stopPropagation()" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendarIndex", "size", "calendarLang", "showNavigationArrows", "calendar"], outputs: ["onHover", "onNavigate", "onSelect", "onViewMode"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontSize", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerContainerComponent, decorators: [{
             type: Component,
@@ -3538,8 +3800,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         class: 'bottom',
                         '(click)': '$event.stopPropagation()',
                         role: 'dialog',
-                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
+                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }, { type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i7.PositioningService }]; } });
 class BsDaterangepickerConfig extends BsDatepickerConfig {
     constructor() {
@@ -3729,7 +3991,7 @@ class BsDaterangepickerDirective {
         }
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerDirective, deps: [{ token: BsDaterangepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerDirective, deps: [{ token: BsDaterangepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$2.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerDirective, selector: "[gravityRangePicker]", inputs: { bsConfig: "bsConfig", container: "container", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", isOpen: "isOpen", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit", onHidden: "onHidden", onShown: "onShown" }, exportAs: ["gravityRangePicker"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerDirective, decorators: [{
@@ -3738,7 +4000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[gravityRangePicker]',
                     exportAs: 'gravityRangePicker'
                 }]
-        }], ctorParameters: function () { return [{ type: BsDaterangepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
+        }], ctorParameters: function () { return [{ type: BsDaterangepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
                 type: Input
             }], container: [{
                 type: Input
@@ -3765,20 +4027,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 class BsDaterangepickerInlineContainerComponent extends BsDaterangepickerContainerComponent {
-    constructor(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService) {
-        super(_renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService);
+    constructor(headerTypeService, _renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService) {
+        super(headerTypeService, _renderer, _config, _callbacks, _store, _element, _actions, _effects, _positioningService);
         _renderer.setStyle(_element.nativeElement, 'display', 'inline-block');
         _renderer.setStyle(_element.nativeElement, 'position', 'static');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i6.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerInlineContainerComponent, selector: "gt-daterangepicker-inline-container", host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, deps: [{ token: HeaderTypeService }, { token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerCallbacks }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i7.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerInlineContainerComponent, selector: "gt-daterangepicker-inline-container", host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\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"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "calendarIndex", "isDisabled", "options", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendarIndex", "size", "calendarLang", "showNavigationArrows", "calendar"], outputs: ["onHover", "onNavigate", "onSelect", "onViewMode"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar", "calendarIndex", "showNavigationArrows", "size"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontSize", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], animations: [datepickerAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gt-daterangepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
                         '(click)': '$event.stopPropagation()'
-                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n  <ng-container *ngIf=\"isRangePicker || _config.isMobile\">\n    <div class=\"gt-calendar-topbar-indicator\">\n      <ng-container *ngIf=\"isRangePicker\">\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n           [class.sm-bold]=\"chosenRange?.length == 0\">\n          <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n        </p>\n        <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n        <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n           [class.sm-bold]=\"chosenRange?.length == 1\">\n          <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n          <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n      <ng-container *ngIf=\"!isRangePicker\">\n        <p class=\"hr-title sm-bold\">\n          <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n          <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n        </p>\n      </ng-container>\n    </div>\n\n    <hr class=\"gt-calendar-topbar-line\">\n  </ng-container>\n\n  <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n    <!--days calendar-->\n    <ng-container *ngSwitchCase=\"'day'\">\n      <bs-days-calendar-view [calendar]=\"calendar\"\n                             [calendarIndex]=\"i\"\n                             [isDisabled]=\"isDisabled\"\n                             [options]=\"options$ | async\"\n                             [showNavigationArrows]=\"showNavigationArrows\"\n                             [size]=\"calendarSize\"\n\n                             *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                             (onHover)=\"dayHoverHandler($event)\"\n                             (onNavigate)=\"navigateTo($event)\"\n                             (onSelect)=\"daySelectHandler($event)\"\n                             (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n    </ng-container>\n\n    <!--months calendar-->\n    <ng-container *ngSwitchCase=\"'month'\">\n      <bs-month-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of monthsCalendar | async; let i = index\"\n\n                              (onHover)=\"monthHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"monthSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-month-calendar-view>\n    </ng-container>\n\n    <!--years calendar-->\n    <ng-container *ngSwitchCase=\"'year'\">\n      <bs-years-calendar-view [calendar]=\"calendar\"\n                              [calendarIndex]=\"i\"\n                              [showNavigationArrows]=\"showNavigationArrows\"\n                              [size]=\"calendarSize\"\n\n                              *ngFor=\"let calendar of yearsCalendar | async; let i = index\"\n\n                              (onHover)=\"yearHoverHandler($event)\"\n                              (onNavigate)=\"navigateTo($event)\"\n                              (onSelect)=\"yearSelectHandler($event)\"\n                              (onViewMode)=\"setViewMode($event)\"></bs-years-calendar-view>\n    </ng-container>\n  </div>\n\n  <div class=\"gt-calendar-footer\" [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\"\n       [class.not-clearable]=\"!_config.clearable\">\n    <p class=\"clear hr-label pointer sm-regular\" [class.empty]=\"isEmpty\" (click)=\"clearDate()\"\n       *ngIf=\"_config.clearable\">\n      Clear selection\n    </p>\n    <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n  </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;padding:16px}.gt-calendar.is-mobile{border-width:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;margin:auto;max-width:450px;padding:0 16px;width:100%}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{border:2px solid var(--divider-menu-active-primary);margin:1rem 0 24px;opacity:1}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{margin-left:auto;width:45%}.gt-calendar.sm:not(.is-mobile){--calendar-width: 268px;--month-article-height: 35px;--month-article-width: 75px;--week-article-height: 30px;--week-article-width: 39px;--weekdays-article-height: 25px;--weekdays-article-width: 39px}.gt-calendar.md:not(.is-mobile){--calendar-width: 327px;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 43px;--week-article-width: 47px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}.gt-calendar.is-mobile{--calendar-width: 100%;--month-article-height: 35px;--month-article-width: 65px;--week-article-height: 45px;--week-article-width: 60px;--weekdays-article-height: 27px;--weekdays-article-width: 45px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i6.PositioningService }]; } });
+                    }, animations: [datepickerAnimation], template: "<div class=\"gt-calendar {{calendarSize}} {{calendarSpacing}} {{viewMode | async}}\" [class.is-mobile]=\"_config.isMobile\" *ngIf=\"viewMode | async\"\n     [@datepickerAnimation]=\"animationState\" (@datepickerAnimation.done)=\"positionServiceEnable()\">\n\n    <ng-container *ngIf=\"(isRangePicker || _config.isMobile) && headerTypeService.getCalendarType() === 'days'\">\n        <div class=\"gt-calendar-topbar-indicator\">\n            <ng-container *ngIf=\"isRangePicker\">\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 0\">\n                    <ng-container *ngIf=\"chosenRange?.length == 0\">Start date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 0\">{{ chosenRange[0] | date : 'MMM d, y' }}</ng-container>\n                </p>\n                <gravity-icon [iconName]=\"'swaps-arrow-right'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n                <p class=\"hr-title\" [class.sm-regular]=\"chosenRange?.length > 1 || chosenRange?.length == 0\"\n                   [class.sm-bold]=\"chosenRange?.length == 1\">\n                    <ng-container *ngIf=\"chosenRange?.length < 2\">End date</ng-container>\n                    <ng-container *ngIf=\"chosenRange?.length > 1\">{{ chosenRange[1] | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n            <ng-container *ngIf=\"!isRangePicker\">\n                <p class=\"hr-title sm-bold\">\n                    <ng-container *ngIf=\"!_config.value\">Select date</ng-container>\n                    <ng-container *ngIf=\"_config.value\">{{ _config.value.toString() | date : 'MMM d, y' }}</ng-container>\n                </p>\n            </ng-container>\n        </div>\n\n        <hr class=\"gt-calendar-topbar-line\">\n    </ng-container>\n\n    <div class=\"gt-calendars\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n\n        <!--days calendar-->\n        <ng-container *ngSwitchCase=\"'day'\">\n            <bs-days-calendar-view [calendar]=\"calendar\"\n                                   [calendarIndex]=\"i\"\n                                   [isDisabled]=\"isDisabled\"\n                                   [options]=\"options$ | async\"\n                                   [showNavigationArrows]=\"showNavigationArrows\"\n                                   [size]=\"_config.isMobile ? 'md' : calendarSize\"\n\n                                   *ngFor=\"let calendar of daysCalendar$ | async; let i = index\"\n\n                                   (onHover)=\"dayHoverHandler($event)\"\n                                   (onNavigate)=\"navigateTo($event)\"\n                                   (onSelect)=\"daySelectHandler($event)\"\n                                   (onViewMode)=\"setViewMode($event)\"></bs-days-calendar-view>\n        </ng-container>\n\n        <!--months calendar-->\n        <ng-container *ngSwitchCase=\"'month'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of monthsCalendar | async; let i = index\">\n                    <bs-month-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            [calendarLang]=\"_config.calendarLang\"\n                                            (onHover)=\"monthHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"monthSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-month-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n\n        <!--years calendar-->\n        <ng-container *ngSwitchCase=\"'year'\">\n            <ng-container *ngIf=\"_config.isMobile; else nonMobile\">\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view *ngIf=\"i === 0\"\n                                            [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-container>\n            <ng-template #nonMobile>\n                <ng-container *ngFor=\"let calendar of yearsCalendar | async; let i = index\">\n                    <bs-years-calendar-view [calendar]=\"calendar\"\n                                            [calendarIndex]=\"i\"\n                                            [showNavigationArrows]=\"showNavigationArrows\"\n                                            [size]=\"_config.isMobile ? 'md' : calendarSize\"\n                                            (onHover)=\"yearHoverHandler($event)\"\n                                            (onNavigate)=\"navigateTo($event)\"\n                                            (onSelect)=\"yearSelectHandler($event)\"\n                                            (onViewMode)=\"setViewMode($event)\">\n                    </bs-years-calendar-view>\n                </ng-container>\n            </ng-template>\n        </ng-container>\n    </div>\n\n    <div class=\"gt-calendar-footer\" *ngIf=\"(viewMode | async) == 'day'\"\n         [class.bs-datepicker-multiple]=\"isRangePicker && _config.displayMonths > 1\" [class.not-clearable]=\"!_config.clearable\">\n        <gravity-link [linkText]=\"_config.calendarLang == 'es' ? 'Limpiar' : 'Clear selection'\"  [link]=\"''\"\n                      [state]=\"isEmpty ? 'disabled' : 'active'\" (click)=\"clearDate()\"></gravity-link>\n        <p class=\"apply hr-label pointer sm-bold\" [class.empty]=\"isEmpty\" (click)=\"apply()\">Apply</p>\n    </div>\n</div>\n\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gt-calendar{border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-calender-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.gt-calendar-topbar-indicator{align-items:center;display:flex;gap:8px}.is-mobile .gt-calendar-topbar-indicator{justify-content:center}.gt-calendar-topbar-indicator p{color:var(--bg-calendar-nav-primary);margin:0}.gt-calendar-topbar-indicator gravity-icon{--icon-color: var(--bg-calendar-nav-primary)}.gt-calendar-topbar-line{opacity:1;margin:1rem 0 24px;border:1px solid var(--divider-menu-active-primary)}.gt-calendars{display:flex;gap:24px}.is-mobile .gt-calendars{flex-direction:column;height:100%;overflow:auto}.gt-calendar-footer{align-items:center;cursor:default;display:flex;justify-content:space-between;padding:16px 0 0}.is-mobile .gt-calendar-footer{border-top:1px solid var(--divider-primary);padding-top:8px}.is-mobile .gt-calendar-footer.bs-datepicker-multiple{width:100%}.gt-calendar-footer.not-clearable{justify-content:end}.gt-calendar-footer p{border-radius:.3125rem;cursor:pointer;color:var(--on-bg-button-active-secondary);margin-left:0}.gt-calendar-footer p:not(.empty):hover{background-color:var(--bg-button-active-tertiary);color:var(--bg-button-active-primary)}.gt-calendar-footer p.empty{color:var(--on-bg-disabled);cursor:default}.gt-calendar-footer p.clear{padding:4px}.gt-calendar-footer p.apply{padding:8px}.gt-calendar-footer.bs-datepicker-multiple{width:46%;margin-left:auto}.gt-calendar.sm:not(.is-mobile){--height-gap: 0px;--calendar-width: 300px;--month-article-width: 75px;--week-article-height: 30px;--month-article-height: 35px;--week-article-width: 38.29px;--weekdays-article-height: 25px;--weekdays-article-width: 39px;--width-gap: var(--gravity-spacing-sm)}.gt-calendar.sm.year:not(.is-mobile),.gt-calendar.sm.month:not(.is-mobile){--height-gap: 0px;--calendar-width: 313px;--month-article-height: 25px;--month-article-width: 37px;--width-gap: var(--gravity-spacing-xl)}.gt-calendar.md:not(.is-mobile){--calendar-width: 359px;--week-article-width: 47px;--month-article-width: 65px;--week-article-height: 43px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.md.year:not(.is-mobile),.gt-calendar.md.month:not(.is-mobile){--calendar-width: 328px;--month-article-width: 59px;--month-article-height: 43px;--width-gap: var(--gravity-spacing-sm);--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile{--width-gap: 14px;--calendar-width: 100%;--week-article-width: 60px;--month-article-width: 65px;--week-article-height: 45px;--month-article-height: 35px;--weekdays-article-width: 45px;--weekdays-article-height: 27px;--height-gap: var(--gravity-spacing-sm)}.gt-calendar.is-mobile.day{flex-direction:column;padding-top:var(--gravity-spacing-xxxl);border:1px solid var(--bg-calender-primary);box-shadow:0 1px 4px #151c2933;border-radius:.9375rem .9375rem 0 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }, { type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerCallbacks }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i7.PositioningService }]; } });
 class BsDaterangepickerInlineConfig extends BsDatepickerConfig {
     constructor() {
@@ -3890,7 +4152,7 @@ class BsDaterangepickerInlineDirective {
         this._datepicker.dispose();
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineDirective, deps: [{ token: BsDaterangepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineDirective, deps: [{ token: BsDaterangepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$2.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BsDaterangepickerInlineDirective, selector: "[gravityRangePickerInline]", inputs: { bsConfig: "bsConfig", isDisabled: "isDisabled", isMobile: "isMobile", maxDate: "maxDate", minDate: "minDate", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange", onApplyEmit: "onApplyEmit" }, exportAs: ["gravityRangePickerInline"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BsDaterangepickerInlineDirective, decorators: [{
@@ -3899,7 +4161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[gravityRangePickerInline]',
                     exportAs: 'gravityRangePickerInline'
                 }]
-        }], ctorParameters: function () { return [{ type: BsDaterangepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
+        }], ctorParameters: function () { return [{ type: BsDaterangepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$2.ComponentLoaderFactory }]; }, propDecorators: { bsConfig: [{
                 type: Input
             }], isDisabled: [{
                 type: Input
@@ -3918,7 +4180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 class GravityCalendarV2Component {
-    constructor() {
+    constructor(headerTypeService) {
+        this.headerTypeService = headerTypeService;
         // Component configuration
         this.clearable = true;
         this.currentLang = 'en';
@@ -3926,8 +4189,9 @@ class GravityCalendarV2Component {
         this.isDisabled = false;
         this.isReadonly = false;
         this.required = false;
-        // Input size
+        // Appearance settings
         this.size = 'sm';
+        this.inputType = 'field';
         this.width = 'short';
         // Calendar
         this.calendarType = 'day';
@@ -3944,6 +4208,7 @@ class GravityCalendarV2Component {
         this.maxDate = new Date();
         this.minDate = new Date(new Date().getUTCFullYear() - 11, 0, 1);
         this.showMobileCalendar = false;
+        this.isCalendarOpen = false;
         let milliseconds = new Date().getTime();
         let randomNumber = Math.random() * 10;
         this.elementId = '' + (milliseconds * randomNumber / 2);
@@ -4082,18 +4347,25 @@ class GravityCalendarV2Component {
     openMobileCalendar() {
         this.showMobileCalendar = true;
         this.focusInput = true;
+        this.headerTypeService.setIsMobile(true);
     }
     closeMobileCalendar() {
         this.showMobileCalendar = false;
         this.focusInput = false;
+        this.restartCalendarType();
+    }
+    restartCalendarType() {
+        this.headerTypeService.setIsMobile(false);
+        this.headerTypeService.setHeaderType('self');
+        this.headerTypeService.setCalendarType('days');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarV2Component, selector: "gravity-calendar-v2", inputs: { clearable: "clearable", currentLang: "currentLang", cypressTag: "cypressTag", hasError: "hasError", isDisabled: "isDisabled", isReadonly: "isReadonly", label: "label", placeholder: "placeholder", required: "required", supportText: "supportText", size: "size", width: "width", calendarType: "calendarType", calendarMode: "calendarMode", selectionMode: "selectionMode", customDate: "customDate", customDates: "customDates" }, outputs: { calendarResponse: "response" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}}\">\n  <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n    <div class=\"mobile-calendar-topbar\">\n      <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n    <div class=\"mobile-calendar-body\">\n      <div class=\"calendar-container\"\n           gravityDatePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n           [minMode]=\"calendarType\"\n\n           [(bsValue)]=\"selectedDate\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"!displayRangePicker\"></div>\n\n      <div class=\"calendar-container\"\n           gravityRangePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n\n           [(bsValue)]=\"selectedDates\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"displayRangePicker\"></div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isMobile\">\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n\n         (click)=\"openMobileCalendar()\"\n\n         (blur)=\"focusInput = false\"\n         (focus)=\"focusInput = true\">\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select your dates' : 'Select your dates' + calendarType\">\n      <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!isMobile\">\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n         gravityDatePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n         [minMode]=\"calendarType\"\n\n         [(bsValue)]=\"selectedDate\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false\"\n\n         *ngIf=\"!displayRangePicker\">\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your ' + calendarType\">\n      <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled\"\n         [class.readonly]=\"isReadonly\"\n         gravityRangePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n\n         [(bsValue)]=\"selectedDates\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false\"\n\n         *ngIf=\"displayRangePicker\">\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your dates'\">\n      <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required\">\n  {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\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);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content);margin-left:var(--icon-margin)}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-calendar-field.sm{--icon-margin: 5px;--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width,.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width,.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-calendar-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.mobile-calendar-container{background-color:var(--surface-secondary);height:100%;overflow:auto;position:fixed;width:100%;z-index:1}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{left:0;top:0;visibility:visible}.mobile-calendar-container .mobile-calendar-topbar{height:54px;padding:14px 19px 24px}.mobile-calendar-container .mobile-calendar-topbar gravity-icon{--icon-color: var(--bg-calendar-nav-primary);margin-left:auto}.mobile-calendar-container .mobile-calendar-body{height:calc(100vh - 65px);width:100%}.mobile-calendar-container .mobile-calendar-body .calendar-container{height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: BsDatepickerDirective, selector: "[gravityDatePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityDatePicker"] }, { kind: "directive", type: BsDatepickerInlineDirective, selector: "[gravityDatePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityDatePickerInline"] }, { kind: "directive", type: BsDaterangepickerDirective, selector: "[gravityRangePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityRangePicker"] }, { kind: "directive", type: BsDaterangepickerInlineDirective, selector: "[gravityRangePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityRangePickerInline"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarV2Component, deps: [{ token: HeaderTypeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarV2Component, selector: "gravity-calendar-v2", inputs: { clearable: "clearable", currentLang: "currentLang", cypressTag: "cypressTag", hasError: "hasError", isDisabled: "isDisabled", isReadonly: "isReadonly", label: "label", placeholder: "placeholder", required: "required", supportText: "supportText", size: "size", labelSize: "labelSize", inputType: "inputType", width: "width", calendarType: "calendarType", calendarMode: "calendarMode", selectionMode: "selectionMode", customDate: "customDate", customDates: "customDates" }, outputs: { calendarResponse: "response" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}} {{inputType}}-{{labelSize}}\">\n  <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n    <div class=\"mobile-calendar-body\">\n      <div class=\"calendar-container\"\n           gravityDatePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n           [minMode]=\"calendarType\"\n\n           [(bsValue)]=\"selectedDate\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"!displayRangePicker\">\n\n          <div class=\"calendar-close-icon\" *ngIf=\"headerTypeService.getCalendarType() === 'days'\">\n            <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n          </div>\n      </div>\n\n      <div class=\"calendar-container\"\n           gravityRangePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n\n           [(bsValue)]=\"selectedDates\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"displayRangePicker\">\n\n          <div class=\"calendar-close-icon\" *ngIf=\"headerTypeService.getCalendarType() === 'days'\">\n              <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n          </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isMobile && inputType === 'field'\">\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n\n         (click)=\"openMobileCalendar()\"\n\n         (blur)=\"focusInput = false\"\n         (focus)=\"focusInput = true\">\n      <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select date range' : 'Select a ' + calendarType\">\n        <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!isMobile || inputType === 'label'\">\n\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n         gravityDatePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n         [minMode]=\"calendarType\"\n\n         [(bsValue)]=\"selectedDate\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false; restartCalendarType(); isCalendarOpen = false;\"\n         (onShown)=\"restartCalendarType(); isCalendarOpen = true;\"\n\n         *ngIf=\"!displayRangePicker\">\n\n        <gravity-dropdown-label *ngIf=\"inputType === 'label'\" [size]=\"labelSize\" [stopPropagation]=\"false\" [isOpen]=\"isCalendarOpen\"\n                                [label]=\"inputLabel ? (inputLabel | dateFormating: currentLang : false): 'Select a ' + calendarType\" >\n        </gravity-dropdown-label>\n\n        <ng-container  *ngIf=\"inputType === 'field'\">\n            <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n            <input [attr.data-cy]=\"cypressTag + '_input'\"\n                 [attr.readonly]=\"isReadonly\"\n                 [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n                 [(ngModel)]=\"inputLabel\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n\n                 class=\"hr-label {{size}}-regular\"\n                 [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a ' + calendarType\">\n            <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n        </ng-container>\n    </div>\n\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled\"\n         [class.readonly]=\"isReadonly\"\n         gravityRangePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n\n         [(bsValue)]=\"selectedDates\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false; restartCalendarType()\"\n         (onShown)=\"restartCalendarType()\"\n\n         *ngIf=\"displayRangePicker\">\n\n      <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a date range'\">\n        <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required\">\n  {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\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);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width);display:flex;align-items:center}.gravity-calendar-field .placement-left{margin-right:5px}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-calendar-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width,.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width,.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-calendar-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.label-sm,.gravity-calendar-field.label-md,.gravity-calendar-field.label-lg{border:none}.gravity-calendar-field.label-sm .gravity-calendar-field-trigger,.gravity-calendar-field.label-md .gravity-calendar-field-trigger,.gravity-calendar-field.label-lg .gravity-calendar-field-trigger{justify-content:center;padding:0}.gravity-calendar-field.label-sm{border:none;height:40px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-md{border:none;height:30px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-lg{border:none;height:12px;--text-field-input-field-width: 344px !important}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.mobile-calendar-container{z-index:1;width:100%;height:100%;display:flex;overflow:auto;position:fixed;justify-content:center;background-color:var(--surface-secondary)}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{top:0;left:0;visibility:visible}.mobile-calendar-container .mobile-calendar-body{max-width:400px;min-width:328px;position:relative;margin:var(--gravity-spacing-sm);width:calc(100% - var(--gravity-spacing-lg));height:calc(100% - var(--gravity-spacing-lg))}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon{display:flex;position:absolute;justify-content:flex-end;right:var(--gravity-spacing-sm)}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon gravity-icon{margin:var(--gravity-spacing-sm) var(--gravity-spacing-xxs) 0 0;--icon-color: var(--bg-calendar-nav-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: BsDatepickerDirective, selector: "[gravityDatePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityDatePicker"] }, { kind: "directive", type: BsDatepickerInlineDirective, selector: "[gravityDatePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityDatePickerInline"] }, { kind: "directive", type: BsDaterangepickerDirective, selector: "[gravityRangePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityRangePicker"] }, { kind: "directive", type: BsDaterangepickerInlineDirective, selector: "[gravityRangePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityRangePickerInline"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "isOpen", "stopPropagation", "size"], outputs: ["onClickLabel"] }, { kind: "pipe", type: DateAbbreviationPipe, name: "dateFormating" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-calendar-v2', template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}}\">\n  <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n    <div class=\"mobile-calendar-topbar\">\n      <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n    <div class=\"mobile-calendar-body\">\n      <div class=\"calendar-container\"\n           gravityDatePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n           [minMode]=\"calendarType\"\n\n           [(bsValue)]=\"selectedDate\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"!displayRangePicker\"></div>\n\n      <div class=\"calendar-container\"\n           gravityRangePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n\n           [(bsValue)]=\"selectedDates\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"displayRangePicker\"></div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isMobile\">\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n\n         (click)=\"openMobileCalendar()\"\n\n         (blur)=\"focusInput = false\"\n         (focus)=\"focusInput = true\">\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select your dates' : 'Select your dates' + calendarType\">\n      <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!isMobile\">\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n         gravityDatePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n         [minMode]=\"calendarType\"\n\n         [(bsValue)]=\"selectedDate\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false\"\n\n         *ngIf=\"!displayRangePicker\">\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your ' + calendarType\">\n      <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled\"\n         [class.readonly]=\"isReadonly\"\n         gravityRangePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n\n         [(bsValue)]=\"selectedDates\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false\"\n\n         *ngIf=\"displayRangePicker\">\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select your dates'\">\n      <gravity-icon class=\"right\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required\">\n  {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\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);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content);margin-left:var(--icon-margin)}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-calendar-field.sm{--icon-margin: 5px;--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width,.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width,.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-calendar-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.mobile-calendar-container{background-color:var(--surface-secondary);height:100%;overflow:auto;position:fixed;width:100%;z-index:1}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{left:0;top:0;visibility:visible}.mobile-calendar-container .mobile-calendar-topbar{height:54px;padding:14px 19px 24px}.mobile-calendar-container .mobile-calendar-topbar gravity-icon{--icon-color: var(--bg-calendar-nav-primary);margin-left:auto}.mobile-calendar-container .mobile-calendar-body{height:calc(100vh - 65px);width:100%}.mobile-calendar-container .mobile-calendar-body .calendar-container{height:100%;width:100%}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { clearable: [{
+            args: [{ selector: 'gravity-calendar-v2', template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{ label }} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}} {{inputType}}-{{labelSize}}\">\n  <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n    <div class=\"mobile-calendar-body\">\n      <div class=\"calendar-container\"\n           gravityDatePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n           [minMode]=\"calendarType\"\n\n           [(bsValue)]=\"selectedDate\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"!displayRangePicker\">\n\n          <div class=\"calendar-close-icon\" *ngIf=\"headerTypeService.getCalendarType() === 'days'\">\n            <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n          </div>\n      </div>\n\n      <div class=\"calendar-container\"\n           gravityRangePickerInline\n\n           [bsConfig]=\"calendarConfiguration\"\n           [isDisabled]=\"isDisabled || isReadonly\"\n           [isMobile]=\"isMobile\"\n           [maxDate]=\"maxDate\"\n           [minDate]=\"minDate\"\n\n           [(bsValue)]=\"selectedDates\"\n           (bsValueChange)=\"updateSelectedDate($event)\"\n           (onApplyEmit)=\"closeMobileCalendar()\"\n\n           *ngIf=\"displayRangePicker\">\n\n          <div class=\"calendar-close-icon\" *ngIf=\"headerTypeService.getCalendarType() === 'days'\">\n              <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n          </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isMobile && inputType === 'field'\">\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n\n         (click)=\"openMobileCalendar()\"\n\n         (blur)=\"focusInput = false\"\n         (focus)=\"focusInput = true\">\n      <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select date range' : 'Select a ' + calendarType\">\n        <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!isMobile || inputType === 'label'\">\n\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled || isReadonly\"\n         [class.readonly]=\"isReadonly\"\n         gravityDatePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n         [minMode]=\"calendarType\"\n\n         [(bsValue)]=\"selectedDate\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false; restartCalendarType(); isCalendarOpen = false;\"\n         (onShown)=\"restartCalendarType(); isCalendarOpen = true;\"\n\n         *ngIf=\"!displayRangePicker\">\n\n        <gravity-dropdown-label *ngIf=\"inputType === 'label'\" [size]=\"labelSize\" [stopPropagation]=\"false\" [isOpen]=\"isCalendarOpen\"\n                                [label]=\"inputLabel ? (inputLabel | dateFormating: currentLang : false): 'Select a ' + calendarType\" >\n        </gravity-dropdown-label>\n\n        <ng-container  *ngIf=\"inputType === 'field'\">\n            <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n            <input [attr.data-cy]=\"cypressTag + '_input'\"\n                 [attr.readonly]=\"isReadonly\"\n                 [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n                 [(ngModel)]=\"inputLabel\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n\n                 class=\"hr-label {{size}}-regular\"\n                 [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a ' + calendarType\">\n            <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n        </ng-container>\n    </div>\n\n    <div [attr.data-cy]=\"cypressTag\"\n         [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n         class=\"gravity-calendar-field-trigger\"\n         [class.disabled]=\"isDisabled\"\n         [class.readonly]=\"isReadonly\"\n         gravityRangePicker\n\n         [bsConfig]=\"calendarConfiguration\"\n         [container]=\"getGtCalendarContainer()\"\n         [isDisabled]=\"isDisabled || isReadonly\"\n         [isMobile]=\"isMobile\"\n         [maxDate]=\"maxDate\"\n         [minDate]=\"minDate\"\n\n         [(bsValue)]=\"selectedDates\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false; restartCalendarType()\"\n         (onShown)=\"restartCalendarType()\"\n\n         *ngIf=\"displayRangePicker\">\n\n      <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n      <input [attr.data-cy]=\"cypressTag + '_input'\"\n             [attr.readonly]=\"isReadonly\"\n             [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n\n             [(ngModel)]=\"inputLabel\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n\n             class=\"hr-label {{size}}-regular\"\n             [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a date range'\">\n        <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n    </div>\n  </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{ supportText }}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required\">\n  {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\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);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width);display:flex;align-items:center}.gravity-calendar-field .placement-left{margin-right:5px}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-calendar-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width,.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width,.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-calendar-field.readonly{cursor:initial;--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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.label-sm,.gravity-calendar-field.label-md,.gravity-calendar-field.label-lg{border:none}.gravity-calendar-field.label-sm .gravity-calendar-field-trigger,.gravity-calendar-field.label-md .gravity-calendar-field-trigger,.gravity-calendar-field.label-lg .gravity-calendar-field-trigger{justify-content:center;padding:0}.gravity-calendar-field.label-sm{border:none;height:40px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-md{border:none;height:30px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-lg{border:none;height:12px;--text-field-input-field-width: 344px !important}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.mobile-calendar-container{z-index:1;width:100%;height:100%;display:flex;overflow:auto;position:fixed;justify-content:center;background-color:var(--surface-secondary)}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{top:0;left:0;visibility:visible}.mobile-calendar-container .mobile-calendar-body{max-width:400px;min-width:328px;position:relative;margin:var(--gravity-spacing-sm);width:calc(100% - var(--gravity-spacing-lg));height:calc(100% - var(--gravity-spacing-lg))}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon{display:flex;position:absolute;justify-content:flex-end;right:var(--gravity-spacing-sm)}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon gravity-icon{margin:var(--gravity-spacing-sm) var(--gravity-spacing-xxs) 0 0;--icon-color: var(--bg-calendar-nav-primary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: HeaderTypeService }]; }, propDecorators: { clearable: [{
                 type: Input
             }], currentLang: [{
                 type: Input
@@ -4115,6 +4387,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], labelSize: [{
+                type: Input
+            }], inputType: [{
+                type: Input
             }], width: [{
                 type: Input
             }], calendarType: [{
@@ -5042,7 +5318,7 @@ class GravityTextFieldNumberOnlyComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldNumberOnlyComponent, selector: "gravity-text-field-number-only", inputs: { currentLang: "currentLang", customState: "customState", cypressTag: "cypressTag", label: "label", required: "required", size: "size", supportText: "supportText" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "digitContainer0", first: true, predicate: ["digitContainer0"], descendants: true }, { propertyName: "digitContainer1", first: true, predicate: ["digitContainer1"], descendants: true }, { propertyName: "digitContainer2", first: true, predicate: ["digitContainer2"], descendants: true }, { propertyName: "digitContainer3", first: true, predicate: ["digitContainer3"], descendants: true }, { propertyName: "digitContainer4", first: true, predicate: ["digitContainer4"], descendants: true }, { propertyName: "digitContainer5", first: true, predicate: ["digitContainer5"], descendants: true }], ngImport: i0, template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n  <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n    {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n  </label>\n  <div class=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n    <textarea [attr.data-cy]=\"cypressTag\"\n              [attr.disabled]=\"customState == 'disabled' ? true : null\"\n              [attr.readonly]=\"customState == 'readonly' ? true : null\"\n              #textAreaElement\n\n              autocomplete=\"off\"\n              class=\"hr-label {{size}}-regular\"\n              cols=\"6\"\n              maxlength=\"6\"\n              minlength=\"6\"\n              inputmode=\"numeric\"\n              placeholder=\"______\"\n              rows=\"1\"\n              type=\"text\"\n\n              [(ngModel)]=\"inputValue\"\n\n              (blur)=\"focusInput = false\"\n              (click)=\"setFocus(textAreaElement)\"\n              (focus)=\"focusInput = true\"\n              (keydown)=\"onKeyDownEvent($event)\"\n              (keyup)=\"setFocus(textAreaElement); returnValue()\"></textarea>\n    <div class=\"digit-container\" #digitContainer0></div>\n    <div class=\"digit-container\" #digitContainer1></div>\n    <div class=\"digit-container\" #digitContainer2></div>\n    <div class=\"digit-container\" #digitContainer3></div>\n    <div class=\"digit-container\" #digitContainer4></div>\n    <div class=\"digit-container\" #digitContainer5></div>\n    <div class=\"overflow\"></div>\n  </div>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"supportText\">\n    <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                  [iconSize]=\"'sm-12'\"></gravity-icon>\n    {{supportText}}\n  </p>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n    {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n  </p>\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}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-left:0;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 290px}.md .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 260px}.sm .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldNumberOnlyComponent, selector: "gravity-text-field-number-only", inputs: { currentLang: "currentLang", customState: "customState", cypressTag: "cypressTag", label: "label", required: "required", size: "size", supportText: "supportText" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "digitContainer0", first: true, predicate: ["digitContainer0"], descendants: true }, { propertyName: "digitContainer1", first: true, predicate: ["digitContainer1"], descendants: true }, { propertyName: "digitContainer2", first: true, predicate: ["digitContainer2"], descendants: true }, { propertyName: "digitContainer3", first: true, predicate: ["digitContainer3"], descendants: true }, { propertyName: "digitContainer4", first: true, predicate: ["digitContainer4"], descendants: true }, { propertyName: "digitContainer5", first: true, predicate: ["digitContainer5"], descendants: true }], ngImport: i0, template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n  <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n    {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n  </label>\n  <div class=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n    <textarea [attr.data-cy]=\"cypressTag\"\n              [attr.disabled]=\"customState == 'disabled' ? true : null\"\n              [attr.readonly]=\"customState == 'readonly' ? true : null\"\n              #textAreaElement\n\n              autocomplete=\"off\"\n              class=\"hr-label {{size}}-regular\"\n              cols=\"6\"\n              maxlength=\"6\"\n              minlength=\"6\"\n              inputmode=\"numeric\"\n              placeholder=\"______\"\n              rows=\"1\"\n              type=\"text\"\n\n              [(ngModel)]=\"inputValue\"\n\n              (blur)=\"focusInput = false\"\n              (click)=\"setFocus(textAreaElement)\"\n              (focus)=\"focusInput = true\"\n              (keydown)=\"onKeyDownEvent($event)\"\n              (keyup)=\"setFocus(textAreaElement); returnValue()\"></textarea>\n    <div class=\"digit-container\" #digitContainer0></div>\n    <div class=\"digit-container\" #digitContainer1></div>\n    <div class=\"digit-container\" #digitContainer2></div>\n    <div class=\"digit-container\" #digitContainer3></div>\n    <div class=\"digit-container\" #digitContainer4></div>\n    <div class=\"digit-container\" #digitContainer5></div>\n    <div class=\"overflow\"></div>\n  </div>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"supportText\">\n    <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                  [iconSize]=\"'sm-12'\"></gravity-icon>\n    {{supportText}}\n  </p>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n    {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n  </p>\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}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-left:0;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 290px}.md .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 260px}.sm .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, decorators: [{
             type: Component,
@@ -5132,11 +5408,11 @@ class GravityStatusIndicatorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", size: "size", type: "type", status: "status" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}}\" *ngIf=\"type === 'primary'\">\n    {{text}} <gravity-icon [iconName]=\"icon\" [iconSize]=\"getIconSizeClass(size)\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n    <div></div> {{text}}\n</div>", 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-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--on-bg-button-active-neutro);--gravity-status-indicator-background-color: var(--bg-button-active-neutro)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", size: "size", type: "type", status: "status" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}}\" *ngIf=\"type === 'primary'\">\n    {{text}} <gravity-icon [iconName]=\"icon\" [iconSize]=\"getIconSizeClass(size)\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n    <div></div> {{text}}\n</div>", 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-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-status-indicator', template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}}\" *ngIf=\"type === 'primary'\">\n    {{text}} <gravity-icon [iconName]=\"icon\" [iconSize]=\"getIconSizeClass(size)\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n    <div></div> {{text}}\n</div>", 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-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--on-bg-button-active-neutro);--gravity-status-indicator-background-color: var(--bg-button-active-neutro)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"] }]
+            args: [{ selector: 'gravity-status-indicator', template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}}\" *ngIf=\"type === 'primary'\">\n    {{text}} <gravity-icon [iconName]=\"icon\" [iconSize]=\"getIconSizeClass(size)\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n    <div></div> {{text}}\n</div>", 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-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], text: [{
@@ -5303,39 +5579,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['window:resize', ['$event']]
             }] } });
-class GravityLinkComponent {
-    constructor() {
-        this.target = '_self';
-        this.iconPosition = 'left';
-        this.iconSize = 'md-16';
-        this.state = 'active';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityLinkComponent, selector: "gravity-link", inputs: { link: "link", linkText: "linkText", fontSize: "fontSize", cypressTag: "cypressTag", iconName: "iconName", target: "target", iconPosition: "iconPosition", iconSize: "iconSize", state: "state" }, ngImport: i0, template: "<div class=\"gravity-link-container {{iconPosition}}\">\n\n    <a *ngIf=\"!(link.startsWith('http') || link.startsWith('https'))\"\n       [routerLink]=\"state === 'disabled' || link === '' ? null : link\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}} {{state}}\">\n        {{linkText}}\n    </a>\n\n    <a *ngIf=\"link.startsWith('http') || link.startsWith('https')\"\n       [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}} {{state}}\">\n        {{linkText}}\n    </a>\n\n    <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n                  [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n    </gravity-icon>\n</div>", 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}.gravity-link-container{display:flex;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container a{border:none;cursor:pointer;width:max-content;align-items:center;display:inline-flex;justify-content:center;text-decoration:underline;color:var(--link-text-color);gap:var(--gravity-spacing-xxs);border-radius:.0625rem;padding:var(--gravity-spacing-xxs)}.gravity-link-container a.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container a.active{--link-text-color: var(--link-active-primary)}.gravity-link-container a.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container a.disabled{--link-text-color: var(--link-disabled-primary);cursor:not-allowed}.gravity-link-container a:hover:not(.disabled){background-color:var(--link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityLinkComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gravity-link', template: "<div class=\"gravity-link-container {{iconPosition}}\">\n\n    <a *ngIf=\"!(link.startsWith('http') || link.startsWith('https'))\"\n       [routerLink]=\"state === 'disabled' || link === '' ? null : link\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}} {{state}}\">\n        {{linkText}}\n    </a>\n\n    <a *ngIf=\"link.startsWith('http') || link.startsWith('https')\"\n       [href]=\"state === 'disabled' || link === '' ? null : link\" [target]=\"target\"\n       class=\"{{fontSize ? fontSize : 'hr-body sm-regular'}} {{state}}\">\n        {{linkText}}\n    </a>\n\n    <gravity-icon [style.--icon-color]=\"'var(--link-text-color)'\" [size]=\"'md'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n                  [iconSize]=\"iconSize\" class=\"icon-{{iconPosition}}\">\n    </gravity-icon>\n</div>", 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}.gravity-link-container{display:flex;width:-moz-fit-content;width:fit-content;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-link-container.right{flex-direction:row}.gravity-link-container.left{flex-direction:row-reverse}.gravity-link-container a{border:none;cursor:pointer;width:max-content;align-items:center;display:inline-flex;justify-content:center;text-decoration:underline;color:var(--link-text-color);gap:var(--gravity-spacing-xxs);border-radius:.0625rem;padding:var(--gravity-spacing-xxs)}.gravity-link-container a.pressed{border:1px solid var(--bg-link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}.gravity-link-container a.active{--link-text-color: var(--link-active-primary)}.gravity-link-container a.visited{font-weight:650;--link-text-color: var(--link-visited-primary)}.gravity-link-container a.disabled{--link-text-color: var(--link-disabled-primary);cursor:not-allowed}.gravity-link-container a:hover:not(.disabled){background-color:var(--link-hover-primary);--link-text-color: var(--bg-link-hover-primary)}\n"] }]
-        }], propDecorators: { link: [{
-                type: Input
-            }], linkText: [{
-                type: Input
-            }], fontSize: [{
-                type: Input
-            }], cypressTag: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }], iconSize: [{
-                type: Input
-            }], state: [{
-                type: Input
-            }] } });
 class GravityModalComponent {
     constructor() {
         this.isVisible = false;
@@ -5353,7 +5596,7 @@ class GravityModalComponent {
         this.close.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityModalComponent, selector: "gravity-modal", inputs: { title: "title", iconName: "iconName", preTitle: "preTitle", subTitle: "subTitle", isVisible: "isVisible", state: "state", primaryBtnText: "primaryBtnText", primaryBtnIcon: "primaryBtnIcon", secondaryBtnTxt: "secondaryBtnTxt", secondaryBtnIcon: "secondaryBtnIcon", iconPosition: "iconPosition", link: "link", linkText: "linkText", linkIcon: "linkIcon", linkState: "linkState", linkCallback: "linkCallback", primaryBtnCallback: "primaryBtnCallback", secondaryBtnCallback: "secondaryBtnCallback" }, outputs: { close: "close" }, ngImport: i0, template: "<div *ngIf=\"isVisible\" class=\"gravity-modal-cover\"></div>\n<div *ngIf=\"isVisible\" class=\"gravity-modal-container elevation-sm\">\n    <div class=\"modal-header {{state}}\">\n        <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ preTitle }}</span>\n        <div class=\"title\">\n            <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--state-color)'\"\n                          [size]=\"'md'\" [iconName]=\"iconName\" [iconSize]=\"'md-16'\" class=\"icon-left\">\n            </gravity-icon>\n            <h1 class=\"hr-title md-bold\">{{ title }}</h1>\n        </div>\n        <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ subTitle }}</span>\n        <div class=\"close-button\">\n            <gravity-icon  [style.--icon-color]=\"'var(--text-primary)'\" [size]=\"'md'\" (click)=\"closeModal()\"\n                           class=\"close\" [iconName]=\"'unsuccess'\"  [iconSize]=\"'md-16'\" [title]=\"'Close'\">\n            </gravity-icon>\n        </div>\n    </div>\n    <div class=\"modal-body\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"modal-footer\">\n        <gravity-button *ngIf=\"primaryBtnText || primaryBtnIcon\" [customState]=\"'active'\" [iconName]=\"primaryBtnIcon\"\n                        [size]=\"'sm'\" [type]=\"'primary'\" [iconPosition]=\"iconPosition\"\n                        (click)=\"primaryBtnCallback?.()\">{{ primaryBtnText }}\n        </gravity-button>\n        <gravity-button *ngIf=\"secondaryBtnTxt || secondaryBtnIcon\" [customState]=\"'active'\" [iconName]=\"secondaryBtnIcon\"\n                        [size]=\"'sm'\" [type]=\"'tertiary'\"  [iconPosition]=\"iconPosition\"\n                        (click)=\"secondaryBtnCallback?.()\">{{ secondaryBtnTxt }}\n        </gravity-button>\n        <gravity-link *ngIf=\"linkText || linkIcon\" [linkText]=\"linkText\" [iconName]=\"linkIcon\" (click)=\"linkCallback?.()\"\n                      [iconPosition]=\"iconPosition\" [state]=\"linkState\" [link]=\"link\">\n        </gravity-link>\n    </div>\n</div>\n\n\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:root{--state-color: --positive-primary}.gravity-modal-cover{top:0;left:0;width:100%;height:100%;z-index:999;position:fixed;opacity:var(--surface-opacity);background-color:var(--surface-tertiary)}.gravity-modal-container{top:50%;left:50%;width:100%;height:auto;z-index:1000;display:flex;position:fixed;min-width:288px;max-width:540px;align-items:center;flex-direction:column;gap:var(--gravity-spacing-sm);transform:translate(-50%,-50%);border-radius:.625rem;padding:var(--gravity-spacing-md);background-color:var(--surface-secondary)}.gravity-modal-container .modal-header{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--gravity-spacing-sm);border-bottom:solid 1px var(--state-color)}.gravity-modal-container .modal-header.positive{--state-color: var(--positive-primary)}.gravity-modal-container .modal-header.negative{--state-color: var(--negative-primary)}.gravity-modal-container .modal-header.warning{--state-color: var(--alternative-primary)}.gravity-modal-container .modal-header.neutral{--state-color: var(--cta-primary)}.gravity-modal-container .modal-header .title{display:flex;align-items:center}.gravity-modal-container .modal-header .title gravity-icon{margin-right:var(--gravity-spacing-xs)}.gravity-modal-container .modal-header .close-button{cursor:pointer;position:absolute;right:var(--gravity-spacing-md);top:var(--gravity-spacing-md)}.gravity-modal-container .modal-header .span-margin{margin-left:var(--gravity-spacing-md)}.gravity-modal-container .modal-body{width:100%;overflow-y:auto;max-height:calc(80vh - 120px)}.gravity-modal-container .modal-footer{width:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;gap:var(--gravity-spacing-sm);padding-top:var(--gravity-spacing-sm)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconPosition", "iconName", "isLoading", "showContent", "size", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["link", "linkText", "fontSize", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityModalComponent, selector: "gravity-modal", inputs: { title: "title", iconName: "iconName", preTitle: "preTitle", subTitle: "subTitle", isVisible: "isVisible", state: "state", primaryBtnText: "primaryBtnText", primaryBtnIcon: "primaryBtnIcon", secondaryBtnTxt: "secondaryBtnTxt", secondaryBtnIcon: "secondaryBtnIcon", iconPosition: "iconPosition", link: "link", linkText: "linkText", linkIcon: "linkIcon", linkState: "linkState", linkCallback: "linkCallback", primaryBtnCallback: "primaryBtnCallback", secondaryBtnCallback: "secondaryBtnCallback" }, outputs: { close: "close" }, ngImport: i0, template: "<div *ngIf=\"isVisible\" class=\"gravity-modal-cover\"></div>\n<div *ngIf=\"isVisible\" class=\"gravity-modal-container elevation-sm\">\n    <div class=\"modal-header {{state}}\">\n        <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ preTitle }}</span>\n        <div class=\"title\">\n            <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--state-color)'\"\n                          [size]=\"'md'\" [iconName]=\"iconName\" [iconSize]=\"'md-16'\" class=\"icon-left\">\n            </gravity-icon>\n            <h1 class=\"hr-title md-bold\">{{ title }}</h1>\n        </div>\n        <span class=\"hr-body sm-regular\" [class.span-margin]=\"iconName\">{{ subTitle }}</span>\n        <div class=\"close-button\">\n            <gravity-icon  [style.--icon-color]=\"'var(--text-primary)'\" [size]=\"'md'\" (click)=\"closeModal()\"\n                           class=\"close\" [iconName]=\"'unsuccess'\"  [iconSize]=\"'md-16'\" [title]=\"'Close'\">\n            </gravity-icon>\n        </div>\n    </div>\n    <div class=\"modal-body\">\n        <ng-content></ng-content>\n    </div>\n    <div class=\"modal-footer\">\n        <gravity-button *ngIf=\"primaryBtnText || primaryBtnIcon\" [customState]=\"'active'\" [iconName]=\"primaryBtnIcon\"\n                        [size]=\"'sm'\" [type]=\"'primary'\" [iconPosition]=\"iconPosition\"\n                        (click)=\"primaryBtnCallback?.()\">{{ primaryBtnText }}\n        </gravity-button>\n        <gravity-button *ngIf=\"secondaryBtnTxt || secondaryBtnIcon\" [customState]=\"'active'\" [iconName]=\"secondaryBtnIcon\"\n                        [size]=\"'sm'\" [type]=\"'tertiary'\"  [iconPosition]=\"iconPosition\"\n                        (click)=\"secondaryBtnCallback?.()\">{{ secondaryBtnTxt }}\n        </gravity-button>\n        <gravity-link *ngIf=\"linkText || linkIcon\" [linkText]=\"linkText\" [iconName]=\"linkIcon\" (click)=\"linkCallback?.()\"\n                      [iconPosition]=\"iconPosition\" [state]=\"linkState\" [link]=\"link\">\n        </gravity-link>\n    </div>\n</div>\n\n\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:root{--state-color: --positive-primary}.gravity-modal-cover{top:0;left:0;width:100%;height:100%;z-index:999;position:fixed;opacity:var(--surface-opacity);background-color:var(--surface-tertiary)}.gravity-modal-container{top:50%;left:50%;width:100%;height:auto;z-index:1000;display:flex;position:fixed;min-width:288px;max-width:540px;align-items:center;flex-direction:column;gap:var(--gravity-spacing-sm);transform:translate(-50%,-50%);border-radius:.625rem;padding:var(--gravity-spacing-md);background-color:var(--surface-secondary)}.gravity-modal-container .modal-header{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:var(--gravity-spacing-sm);border-bottom:solid 1px var(--state-color)}.gravity-modal-container .modal-header.positive{--state-color: var(--positive-primary)}.gravity-modal-container .modal-header.negative{--state-color: var(--negative-primary)}.gravity-modal-container .modal-header.warning{--state-color: var(--alternative-primary)}.gravity-modal-container .modal-header.neutral{--state-color: var(--cta-primary)}.gravity-modal-container .modal-header .title{display:flex;align-items:center}.gravity-modal-container .modal-header .title gravity-icon{margin-right:var(--gravity-spacing-xs)}.gravity-modal-container .modal-header .close-button{cursor:pointer;position:absolute;right:var(--gravity-spacing-md);top:var(--gravity-spacing-md)}.gravity-modal-container .modal-header .span-margin{margin-left:var(--gravity-spacing-md)}.gravity-modal-container .modal-body{width:100%;overflow-y:auto;max-height:calc(80vh - 120px)}.gravity-modal-container .modal-footer{width:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;gap:var(--gravity-spacing-sm);padding-top:var(--gravity-spacing-sm)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconPosition", "iconName", "isLoading", "showContent", "size", "type"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontSize", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityModalComponent, decorators: [{
             type: Component,
@@ -5567,6 +5810,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
+class GravityNavigationCardComponent {
+    constructor() {
+        this.size = 'sm';
+        this.state = 'active';
+        this.statusIndicator = 'neutro';
+        this.navigatorCardClicked = new EventEmitter();
+    }
+    onNavigationCardClick() {
+        this.navigatorCardClicked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNavigationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNavigationCardComponent, selector: "gravity-navigation-card", inputs: { size: "size", state: "state", statusIndicator: "statusIndicator", title: "title", iconName: "iconName", actionText: "actionText", description: "description", statusIndicatorText: "statusIndicatorText", statusIndicatorIcon: "statusIndicatorIcon" }, outputs: { navigatorCardClicked: "navigatorCardClicked" }, ngImport: i0, template: "<div class=\"gravity-navigation-card {{size}} {{state}}\" (click)=\"onNavigationCardClick()\">\n    <div class=\"information-content\">\n        <div class=\"icon-wrapper\">\n            <gravity-icon [style.--icon-color]=\"'var(--navigation-card-icon-color)'\"\n                          [iconName]=\"iconName\" [size]=\"'lg'\" [iconSize]=\"'lg-24'\">\n            </gravity-icon>\n        </div>\n        <div class=\"text-content\">\n            <h1 class=\"hr-title md-bold\">{{title}}</h1>\n            <p class=\"hr-body md-regular\">{{description}}</p>\n        </div>\n    </div>\n    <div class=\"action-section\">\n        <gravity-status-indicator *ngIf=\"size === 'sm'\" [status]=\"statusIndicator\" [text]=\"statusIndicatorText\" [icon]=\"statusIndicatorIcon\"></gravity-status-indicator>\n        <p class=\"hr-body md-regular\">{{actionText}}</p>\n        <gravity-icon *ngIf=\"!(state === 'readonly')\" [style.--icon-color]=\"'var(--text-primary)'\"\n                      [iconName]=\"'arrow-right'\" [size]=\"'sm'\" [iconSize]=\"'sm-12'\">\n        </gravity-icon>\n    </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gravity-navigation-card{display:flex;cursor:pointer;flex-direction:column;align-items:flex-start;border-radius:.3125rem;background:var(--surface-secondary);--navigation-card-icon-color: var(--text-primary);border:1.5px solid var(--outline-button-active-secondary)}.gravity-navigation-card:not(.sm):not(.readonly):hover{border:1.5px solid var(--bg-button-active-primary)}.gravity-navigation-card .information-content{display:flex;align-items:center;align-self:stretch;gap:var(--gravity-spacing-xs)}.gravity-navigation-card .information-content .text-content{flex:1 0 0;display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);gap:var(--gravity-spacing-sm)}.gravity-navigation-card .information-content .text-content h1{height:14px}.gravity-navigation-card .information-content .icon-wrapper{display:flex;align-items:flex-start;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm);background:var(--surface-primary);border-radius:6.25rem;border:1px solid var(--surface-primary)}.gravity-navigation-card .action-section{display:flex;align-self:stretch;align-items:center;justify-content:flex-end}.gravity-navigation-card .action-section p{margin-right:var(--gravity-spacing-sm)}.gravity-navigation-card .action-section gravity-icon,.gravity-navigation-card .action-section p{color:var(--text-primary)}.gravity-navigation-card .action-section gravity-status-indicator{margin-right:var(--gravity-spacing-xs)}.gravity-navigation-card.sm{width:560px;min-width:304px;gap:var(--gravity-spacing-xxxl);padding:var(--gravity-spacing-sm)}.gravity-navigation-card.md{width:100%;display:flex;min-width:780px;flex-direction:row;justify-content:space-between;padding:var(--gravity-spacing-md);border:1.5px solid var(--surface-secondary)}.gravity-navigation-card.md .information-content{height:56px;gap:var(--gravity-spacing-sm)}.gravity-navigation-card.md .information-content .icon-wrapper{background:var(--surface-primary);border-radius:6.25rem}.gravity-navigation-card.pressed{background:var(--surface-primary);border:1.5px solid var(--surface-primary)}.gravity-navigation-card.pressed .information-content .icon-wrapper{background:var(--surface-secondary)}.gravity-navigation-card.readonly{cursor:default;background:var(--bg-disabled);border:1.5px solid var(--bg-disabled);--navigation-card-icon-color: var(--on-bg-disabled)}.gravity-navigation-card.readonly .information-content .text-content{color:var(--on-bg-disabled)}.gravity-navigation-card.readonly .information-content .icon-wrapper{background:none;border:1px solid var(--on-bg-disabled)}.gravity-navigation-card.readonly .action-section p{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", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: ["icon", "text", "size", "type", "status"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNavigationCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-navigation-card', template: "<div class=\"gravity-navigation-card {{size}} {{state}}\" (click)=\"onNavigationCardClick()\">\n    <div class=\"information-content\">\n        <div class=\"icon-wrapper\">\n            <gravity-icon [style.--icon-color]=\"'var(--navigation-card-icon-color)'\"\n                          [iconName]=\"iconName\" [size]=\"'lg'\" [iconSize]=\"'lg-24'\">\n            </gravity-icon>\n        </div>\n        <div class=\"text-content\">\n            <h1 class=\"hr-title md-bold\">{{title}}</h1>\n            <p class=\"hr-body md-regular\">{{description}}</p>\n        </div>\n    </div>\n    <div class=\"action-section\">\n        <gravity-status-indicator *ngIf=\"size === 'sm'\" [status]=\"statusIndicator\" [text]=\"statusIndicatorText\" [icon]=\"statusIndicatorIcon\"></gravity-status-indicator>\n        <p class=\"hr-body md-regular\">{{actionText}}</p>\n        <gravity-icon *ngIf=\"!(state === 'readonly')\" [style.--icon-color]=\"'var(--text-primary)'\"\n                      [iconName]=\"'arrow-right'\" [size]=\"'sm'\" [iconSize]=\"'sm-12'\">\n        </gravity-icon>\n    </div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.gravity-navigation-card{display:flex;cursor:pointer;flex-direction:column;align-items:flex-start;border-radius:.3125rem;background:var(--surface-secondary);--navigation-card-icon-color: var(--text-primary);border:1.5px solid var(--outline-button-active-secondary)}.gravity-navigation-card:not(.sm):not(.readonly):hover{border:1.5px solid var(--bg-button-active-primary)}.gravity-navigation-card .information-content{display:flex;align-items:center;align-self:stretch;gap:var(--gravity-spacing-xs)}.gravity-navigation-card .information-content .text-content{flex:1 0 0;display:flex;flex-direction:column;align-items:flex-start;color:var(--text-primary);gap:var(--gravity-spacing-sm)}.gravity-navigation-card .information-content .text-content h1{height:14px}.gravity-navigation-card .information-content .icon-wrapper{display:flex;align-items:flex-start;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm);background:var(--surface-primary);border-radius:6.25rem;border:1px solid var(--surface-primary)}.gravity-navigation-card .action-section{display:flex;align-self:stretch;align-items:center;justify-content:flex-end}.gravity-navigation-card .action-section p{margin-right:var(--gravity-spacing-sm)}.gravity-navigation-card .action-section gravity-icon,.gravity-navigation-card .action-section p{color:var(--text-primary)}.gravity-navigation-card .action-section gravity-status-indicator{margin-right:var(--gravity-spacing-xs)}.gravity-navigation-card.sm{width:560px;min-width:304px;gap:var(--gravity-spacing-xxxl);padding:var(--gravity-spacing-sm)}.gravity-navigation-card.md{width:100%;display:flex;min-width:780px;flex-direction:row;justify-content:space-between;padding:var(--gravity-spacing-md);border:1.5px solid var(--surface-secondary)}.gravity-navigation-card.md .information-content{height:56px;gap:var(--gravity-spacing-sm)}.gravity-navigation-card.md .information-content .icon-wrapper{background:var(--surface-primary);border-radius:6.25rem}.gravity-navigation-card.pressed{background:var(--surface-primary);border:1.5px solid var(--surface-primary)}.gravity-navigation-card.pressed .information-content .icon-wrapper{background:var(--surface-secondary)}.gravity-navigation-card.readonly{cursor:default;background:var(--bg-disabled);border:1.5px solid var(--bg-disabled);--navigation-card-icon-color: var(--on-bg-disabled)}.gravity-navigation-card.readonly .information-content .text-content{color:var(--on-bg-disabled)}.gravity-navigation-card.readonly .information-content .icon-wrapper{background:none;border:1px solid var(--on-bg-disabled)}.gravity-navigation-card.readonly .action-section p{color:var(--on-bg-disabled)}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], state: [{
+                type: Input
+            }], statusIndicator: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], actionText: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], statusIndicatorText: [{
+                type: Input
+            }], statusIndicatorIcon: [{
+                type: Input
+            }], navigatorCardClicked: [{
+                type: Output
+            }] } });
 class GravityDesignSystemModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
@@ -5602,6 +5883,7 @@ class GravityDesignSystemModule {
             NodeCheckboxComponent,
             NodeNameComponent,
             FilterByPipe,
+            DateAbbreviationPipe,
             BsDatepickerDayDecoratorComponent,
             BsDatepickerNavigationViewComponent,
             BsDaysCalendarViewComponent,
@@ -5621,7 +5903,9 @@ class GravityDesignSystemModule {
             GravityTabSecondaryComponent,
             GravityChipComponent,
             GravityEditableInputComponent,
-            GravityCardButtonComponent], imports: [i1.AngularSvgIconModule, i2$3.AngularSvgIconPreloaderModule, BsDatepickerModule,
+            GravityCardButtonComponent,
+            GravityDropdownLabelComponent,
+            GravityNavigationCardComponent], imports: [i1.AngularSvgIconModule, i2$3.AngularSvgIconPreloaderModule, BsDatepickerModule,
             CommonModule,
             FormsModule, GravityTooltipModule, NgbDatepickerModule,
             NgbOffcanvasModule,
@@ -5662,7 +5946,8 @@ class GravityDesignSystemModule {
             GravityTabSecondaryComponent,
             GravityChipComponent,
             GravityEditableInputComponent,
-            GravityCardButtonComponent] }); }
+            GravityCardButtonComponent,
+            GravityNavigationCardComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
             AngularSvgIconPreloaderModule.forRoot({
                 configUrl: './assets/gravity/json/icons.json',
@@ -5714,6 +5999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NodeCheckboxComponent,
                         NodeNameComponent,
                         FilterByPipe,
+                        DateAbbreviationPipe,
                         BsDatepickerDayDecoratorComponent,
                         BsDatepickerNavigationViewComponent,
                         BsDaysCalendarViewComponent,
@@ -5734,6 +6020,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityChipComponent,
                         GravityEditableInputComponent,
                         GravityCardButtonComponent,
+                        GravityDropdownLabelComponent,
+                        GravityNavigationCardComponent,
                     ],
                     imports: [
                         AngularSvgIconModule.forRoot(),
@@ -5786,7 +6074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravityTabSecondaryComponent,
                         GravityChipComponent,
                         GravityEditableInputComponent,
-                        GravityCardButtonComponent
+                        GravityCardButtonComponent,
+                        GravityNavigationCardComponent,
                     ]
                 }]
         }] });
@@ -5841,5 +6130,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityButtonComponent, GravityCalendarComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCardListComponent, GravityCheckboxComponent, GravityChipComponent, GravityCurrencyComponent, GravityCurrencyDisplayComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityGenericAvatarComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
+export { BsNavigationDirection, GravityAttachFileComponent, GravityAvatarStackComponent, GravityButtonComponent, GravityCalendarComponent, GravityCalendarV2Component, GravityCardButtonComponent, GravityCardListComponent, GravityCheckboxComponent, GravityChipComponent, GravityCurrencyComponent, GravityCurrencyDisplayComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownLabelComponent, GravityDropdownListComponent, GravityDropdownListDisplayComponent, GravityEditableInputComponent, GravityGenericAvatarComponent, GravityIconButtonComponent, GravityIconComponent, GravityLinkComponent, GravityModalComponent, GravityMultiLanguageComponent, GravityNavigationCardComponent, GravityNetworkPillComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStatusIndicatorComponent, GravityStepperComponent, GravitySwitchComponent, GravityTabPrimaryComponent, GravityTabSecondaryComponent, GravityTableComponent, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
 //# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map