@progressio_resources/gravity-design-system 2.5.12 → 2.5.14

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

@@ -4,10 +4,10 @@ import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
-import { NgbOffcanvas, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i1 from 'angular-svg-icon';
 import { AngularSvgIconModule } from 'angular-svg-icon';
+import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
+import { NgbOffcanvas, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i3 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i2$1 from 'angular-svg-icon-preloader';
@@ -20,12 +20,18 @@ import { BehaviorSubject, timer } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 class GravityIconComponent {
+    static isOldIcon(iconName) {
+        return OLD_ICONS[iconName] != undefined;
+    }
+    static isNewIcon(iconName) {
+        return ICONS[iconName] != undefined;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityIconComponent, selector: "gravity-icon", inputs: { customIconColorVariable: "customIconColorVariable", iconName: "iconName", iconSize: "iconSize", hoverIcon: "hoverIcon", size: "size" }, ngImport: i0, template: "<svg-icon [class.with-hover]=\"hoverIcon\" class=\"{{size}} {{iconSize}}\"\n          [name]=\"iconSize ? 'gt-icon-' + iconName + '-' + iconSize : iconName\"\n          [style]=\"customIconColorVariable ? {'--icon-color': customIconColorVariable} : null\"></svg-icon>\n", styles: [":host{--icon-color: var(--icon-active-primary);display:block;height:var(--icon-height);min-height:var(--icon-height);min-width:var(--icon-width);width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}:host:has(.sm){--icon-height: 1rem;--icon-width: 1rem}:host:has(.md){--icon-height: 1.5rem;--icon-width: 1.5rem}:host:has(.lg){--icon-height: 2rem;--icon-width: 2rem}:host:has(.sm-12){--icon-height: 12px;--icon-width: 12px}:host:has(.md-16){--icon-height: 16px;--icon-width: 16px}:host:has(.lg-24){--icon-height: 24px;--icon-width: 24px}:host:has(.xl-32){--icon-height: 32px;--icon-width: 32px}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityIconComponent, selector: "gravity-icon", inputs: { customIconColorVariable: "customIconColorVariable", iconName: "iconName", iconSize: "iconSize", hoverIcon: "hoverIcon", size: "size" }, ngImport: i0, template: "<svg-icon [class.with-hover]=\"hoverIcon\" class=\"{{size}} {{iconSize}}\" [style.--icon-color]=\"customIconColorVariable\"\n          [name]=\"iconSize ? 'gt-icon-' + iconName + '-' + iconSize : iconName\"></svg-icon>\n", styles: [":host{--icon-color: var(--icon-active-primary);display:block;height:var(--icon-height);min-height:var(--icon-height);min-width:var(--icon-width);width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}:host:has(.sm){--icon-height: 1rem;--icon-width: 1rem}:host:has(.md){--icon-height: 1.5rem;--icon-width: 1.5rem}:host:has(.lg){--icon-height: 2rem;--icon-width: 2rem}:host:has(.sm-12){--icon-height: 12px;--icon-width: 12px}:host:has(.md-16){--icon-height: 16px;--icon-width: 16px}:host:has(.lg-24){--icon-height: 24px;--icon-width: 24px}:host:has(.xl-32){--icon-height: 32px;--icon-width: 32px}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-icon', template: "<svg-icon [class.with-hover]=\"hoverIcon\" class=\"{{size}} {{iconSize}}\"\n          [name]=\"iconSize ? 'gt-icon-' + iconName + '-' + iconSize : iconName\"\n          [style]=\"customIconColorVariable ? {'--icon-color': customIconColorVariable} : null\"></svg-icon>\n", styles: [":host{--icon-color: var(--icon-active-primary);display:block;height:var(--icon-height);min-height:var(--icon-height);min-width:var(--icon-width);width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}:host:has(.sm){--icon-height: 1rem;--icon-width: 1rem}:host:has(.md){--icon-height: 1.5rem;--icon-width: 1.5rem}:host:has(.lg){--icon-height: 2rem;--icon-width: 2rem}:host:has(.sm-12){--icon-height: 12px;--icon-width: 12px}:host:has(.md-16){--icon-height: 16px;--icon-width: 16px}:host:has(.lg-24){--icon-height: 24px;--icon-width: 24px}:host:has(.xl-32){--icon-height: 32px;--icon-width: 32px}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"] }]
+            args: [{ selector: 'gravity-icon', template: "<svg-icon [class.with-hover]=\"hoverIcon\" class=\"{{size}} {{iconSize}}\" [style.--icon-color]=\"customIconColorVariable\"\n          [name]=\"iconSize ? 'gt-icon-' + iconName + '-' + iconSize : iconName\"></svg-icon>\n", styles: [":host{--icon-color: var(--icon-active-primary);display:block;height:var(--icon-height);min-height:var(--icon-height);min-width:var(--icon-width);width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}:host:has(.sm){--icon-height: 1rem;--icon-width: 1rem}:host:has(.md){--icon-height: 1.5rem;--icon-width: 1.5rem}:host:has(.lg){--icon-height: 2rem;--icon-width: 2rem}:host:has(.sm-12){--icon-height: 12px;--icon-width: 12px}:host:has(.md-16){--icon-height: 16px;--icon-width: 16px}:host:has(.lg-24){--icon-height: 24px;--icon-width: 24px}:host:has(.xl-32){--icon-height: 32px;--icon-width: 32px}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"] }]
         }], propDecorators: { customIconColorVariable: [{
                 type: Input
             }], iconName: [{
@@ -37,6 +43,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], size: [{
                 type: Input
             }] } });
+var OLD_ICONS;
+(function (OLD_ICONS) {
+    OLD_ICONS[OLD_ICONS["uncheck"] = 0] = "uncheck";
+    OLD_ICONS[OLD_ICONS["arrow-back"] = 1] = "arrow-back";
+})(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["chevron-double-down"] = 8] = "chevron-double-down";
+    ICONS[ICONS["chevron-double-up"] = 9] = "chevron-double-up";
+    ICONS[ICONS["copy"] = 10] = "copy";
+    ICONS[ICONS["download"] = 11] = "download";
+    ICONS[ICONS["eye-closed"] = 12] = "eye-closed";
+    ICONS[ICONS["eye-open"] = 13] = "eye-open";
+    ICONS[ICONS["graphics"] = 14] = "graphics";
+    ICONS[ICONS["happy-face"] = 15] = "happy-face";
+    ICONS[ICONS["home"] = 16] = "home";
+    ICONS[ICONS["information-circle"] = 17] = "information-circle";
+    ICONS[ICONS["internal-processing"] = 18] = "internal-processing";
+    ICONS[ICONS["language"] = 19] = "language";
+    ICONS[ICONS["mail"] = 20] = "mail";
+    ICONS[ICONS["menu"] = 21] = "menu";
+    ICONS[ICONS["more-options"] = 22] = "more-options";
+    ICONS[ICONS["news"] = 23] = "news";
+    ICONS[ICONS["plus"] = 24] = "plus";
+    ICONS[ICONS["question-circle"] = 25] = "question-circle";
+    ICONS[ICONS["rates"] = 26] = "rates";
+    ICONS[ICONS["report"] = 27] = "report";
+    ICONS[ICONS["search"] = 28] = "search";
+    ICONS[ICONS["security"] = 29] = "security";
+    ICONS[ICONS["settings"] = 30] = "settings";
+    ICONS[ICONS["sign-out"] = 31] = "sign-out";
+    ICONS[ICONS["success-circle"] = 32] = "success-circle";
+    ICONS[ICONS["swaps"] = 33] = "swaps";
+    ICONS[ICONS["swaps-arrow-left"] = 34] = "swaps-arrow-left";
+    ICONS[ICONS["swaps-arrow-right"] = 35] = "swaps-arrow-right";
+    ICONS[ICONS["trash"] = 36] = "trash";
+    ICONS[ICONS["unlock"] = 37] = "unlock";
+    ICONS[ICONS["unsuccess"] = 38] = "unsuccess";
+    ICONS[ICONS["update"] = 39] = "update";
+    ICONS[ICONS["user"] = 40] = "user";
+    ICONS[ICONS["warning-circle"] = 41] = "warning-circle";
+})(ICONS || (ICONS = {}));
 
 class GravityButtonComponent {
     constructor() {
@@ -44,12 +100,15 @@ class GravityButtonComponent {
         this.showContent = true;
         this.size = "md";
     }
+    isNewIcon(iconName) {
+        return GravityIconComponent.isNewIcon(iconName);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", customState: "customState", iconName: "iconName", isLoading: "isLoading", showContent: "showContent", size: "size", type: "type" }, ngImport: i0, template: "<button [attr.data-cy]=\"cypressTag\" [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\"\n        class=\"border-radius-sm gravity-button-{{type}} gravity-size-{{size}} hr-label {{size}}-bold {{customState}}\">\n  <ng-container *ngIf=\"!isLoading\">\n    <gravity-icon [customIconColorVariable]=\"'var(--button-text-color)'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"></gravity-icon>\n    <span class=\"button-content-wrapper\" *ngIf=\"showContent\">\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n  <ng-container *ngIf=\"isLoading\">\n    <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n  </ng-container>\n</button>\n", styles: [":host{display:block;width:max-content}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;cursor:pointer;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){border-width:.0625rem;height:1.8125rem;padding:.625rem .75rem}.gravity-button.gravity-size-sm gravity-icon,.gravity-size-sm.gravity-button-style gravity-icon,.gravity-size-sm.gravity-button-primary[disabled] gravity-icon,.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon,.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-sm.gravity-button-positive[disabled] gravity-icon,.gravity-size-sm.gravity-button-negative[disabled] gravity-icon,.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon,.gravity-size-sm.gravity-button-disabled gravity-icon,.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .5625rem;--icon-width: .5625rem}.gravity-button.gravity-size-sm gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){border-width:.125rem;height:2.3125rem;padding:.75rem .875rem}.gravity-button.gravity-size-md gravity-icon,.gravity-size-md.gravity-button-style gravity-icon,.gravity-size-md.gravity-button-primary[disabled] gravity-icon,.gravity-size-md.gravity-button-secondary[disabled] gravity-icon,.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-md.gravity-button-positive[disabled] gravity-icon,.gravity-size-md.gravity-button-negative[disabled] gravity-icon,.gravity-size-md.gravity-button-alternative[disabled] gravity-icon,.gravity-size-md.gravity-button-disabled gravity-icon,.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .8125rem;--icon-width: .8125rem}.gravity-button.gravity-size-md gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-lg,.gravity-size-lg.gravity-button-style,.gravity-size-lg.gravity-button-primary[disabled],.gravity-size-lg.gravity-button-secondary[disabled],.gravity-size-lg.gravity-button-tertiary[disabled],.gravity-size-lg.gravity-button-positive[disabled],.gravity-size-lg.gravity-button-negative[disabled],.gravity-size-lg.gravity-button-alternative[disabled],.gravity-size-lg.gravity-button-disabled,.gravity-size-lg.gravity-button-alternative:not([disabled]),.gravity-size-lg.gravity-button-negative:not([disabled]),.gravity-size-lg.gravity-button-positive:not([disabled]),.gravity-size-lg.gravity-button-tertiary:not([disabled]),.gravity-size-lg.gravity-button-secondary:not([disabled]),.gravity-size-lg.gravity-button-primary:not([disabled]){border-width:.125rem;height:3rem;padding:.875rem 1rem}.gravity-button.gravity-size-lg gravity-icon,.gravity-size-lg.gravity-button-style gravity-icon,.gravity-size-lg.gravity-button-primary[disabled] gravity-icon,.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon,.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-lg.gravity-button-positive[disabled] gravity-icon,.gravity-size-lg.gravity-button-negative[disabled] gravity-icon,.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon,.gravity-size-lg.gravity-button-disabled gravity-icon,.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button.gravity-size-lg gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.625rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]),.gravity-button-primary:not([disabled]).active{--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-primary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]),.gravity-button-secondary:not([disabled]).active{--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-secondary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]),.gravity-button-tertiary:not([disabled]).active{--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-tertiary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]),.gravity-button-positive:not([disabled]).active{--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-positive:not([disabled]).hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]),.gravity-button-negative:not([disabled]).active{--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-negative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]),.gravity-button-alternative:not([disabled]).active{--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-alternative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", customState: "customState", iconName: "iconName", isLoading: "isLoading", showContent: "showContent", size: "size", type: "type" }, ngImport: i0, template: "<button [attr.data-cy]=\"cypressTag\" [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\"\n        class=\"border-radius-sm gravity-button-{{type}} gravity-size-{{size}} hr-label {{size}}-bold {{customState}}\">\n  <ng-container *ngIf=\"!isLoading\">\n    <gravity-icon [style.--icon-color]=\"'var(--button-text-color)'\" [size]=\"isNewIcon(iconName) ? null : 'md'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n                  [iconSize]=\"isNewIcon(iconName) ? 'md-16' : null\"></gravity-icon>\n    <span class=\"button-content-wrapper\" *ngIf=\"showContent\">\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n  <ng-container *ngIf=\"isLoading\">\n    <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n  </ng-container>\n</button>\n", styles: [":host{display:block;width:max-content}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;cursor:pointer;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){border-width:.0625rem;height:1.8125rem;padding:.625rem .75rem}.gravity-button.gravity-size-sm gravity-icon,.gravity-size-sm.gravity-button-style gravity-icon,.gravity-size-sm.gravity-button-primary[disabled] gravity-icon,.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon,.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-sm.gravity-button-positive[disabled] gravity-icon,.gravity-size-sm.gravity-button-negative[disabled] gravity-icon,.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon,.gravity-size-sm.gravity-button-disabled gravity-icon,.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .5625rem;--icon-width: .5625rem}.gravity-button.gravity-size-sm gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){border-width:.125rem;height:2.3125rem;padding:.75rem .875rem}.gravity-button.gravity-size-md gravity-icon,.gravity-size-md.gravity-button-style gravity-icon,.gravity-size-md.gravity-button-primary[disabled] gravity-icon,.gravity-size-md.gravity-button-secondary[disabled] gravity-icon,.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-md.gravity-button-positive[disabled] gravity-icon,.gravity-size-md.gravity-button-negative[disabled] gravity-icon,.gravity-size-md.gravity-button-alternative[disabled] gravity-icon,.gravity-size-md.gravity-button-disabled gravity-icon,.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .8125rem;--icon-width: .8125rem}.gravity-button.gravity-size-md gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-lg,.gravity-size-lg.gravity-button-style,.gravity-size-lg.gravity-button-primary[disabled],.gravity-size-lg.gravity-button-secondary[disabled],.gravity-size-lg.gravity-button-tertiary[disabled],.gravity-size-lg.gravity-button-positive[disabled],.gravity-size-lg.gravity-button-negative[disabled],.gravity-size-lg.gravity-button-alternative[disabled],.gravity-size-lg.gravity-button-disabled,.gravity-size-lg.gravity-button-alternative:not([disabled]),.gravity-size-lg.gravity-button-negative:not([disabled]),.gravity-size-lg.gravity-button-positive:not([disabled]),.gravity-size-lg.gravity-button-tertiary:not([disabled]),.gravity-size-lg.gravity-button-secondary:not([disabled]),.gravity-size-lg.gravity-button-primary:not([disabled]){border-width:.125rem;height:3rem;padding:.875rem 1rem}.gravity-button.gravity-size-lg gravity-icon,.gravity-size-lg.gravity-button-style gravity-icon,.gravity-size-lg.gravity-button-primary[disabled] gravity-icon,.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon,.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-lg.gravity-button-positive[disabled] gravity-icon,.gravity-size-lg.gravity-button-negative[disabled] gravity-icon,.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon,.gravity-size-lg.gravity-button-disabled gravity-icon,.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button.gravity-size-lg gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.625rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]),.gravity-button-primary:not([disabled]).active{--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-primary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]),.gravity-button-secondary:not([disabled]).active{--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-secondary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]),.gravity-button-tertiary:not([disabled]).active{--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-tertiary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]),.gravity-button-positive:not([disabled]).active{--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-positive:not([disabled]).hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]),.gravity-button-negative:not([disabled]).active{--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-negative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]),.gravity-button-alternative:not([disabled]).active{--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-alternative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-button', template: "<button [attr.data-cy]=\"cypressTag\" [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\"\n        class=\"border-radius-sm gravity-button-{{type}} gravity-size-{{size}} hr-label {{size}}-bold {{customState}}\">\n  <ng-container *ngIf=\"!isLoading\">\n    <gravity-icon [customIconColorVariable]=\"'var(--button-text-color)'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"></gravity-icon>\n    <span class=\"button-content-wrapper\" *ngIf=\"showContent\">\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n  <ng-container *ngIf=\"isLoading\">\n    <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n  </ng-container>\n</button>\n", styles: [":host{display:block;width:max-content}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;cursor:pointer;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){border-width:.0625rem;height:1.8125rem;padding:.625rem .75rem}.gravity-button.gravity-size-sm gravity-icon,.gravity-size-sm.gravity-button-style gravity-icon,.gravity-size-sm.gravity-button-primary[disabled] gravity-icon,.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon,.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-sm.gravity-button-positive[disabled] gravity-icon,.gravity-size-sm.gravity-button-negative[disabled] gravity-icon,.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon,.gravity-size-sm.gravity-button-disabled gravity-icon,.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .5625rem;--icon-width: .5625rem}.gravity-button.gravity-size-sm gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){border-width:.125rem;height:2.3125rem;padding:.75rem .875rem}.gravity-button.gravity-size-md gravity-icon,.gravity-size-md.gravity-button-style gravity-icon,.gravity-size-md.gravity-button-primary[disabled] gravity-icon,.gravity-size-md.gravity-button-secondary[disabled] gravity-icon,.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-md.gravity-button-positive[disabled] gravity-icon,.gravity-size-md.gravity-button-negative[disabled] gravity-icon,.gravity-size-md.gravity-button-alternative[disabled] gravity-icon,.gravity-size-md.gravity-button-disabled gravity-icon,.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .8125rem;--icon-width: .8125rem}.gravity-button.gravity-size-md gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-lg,.gravity-size-lg.gravity-button-style,.gravity-size-lg.gravity-button-primary[disabled],.gravity-size-lg.gravity-button-secondary[disabled],.gravity-size-lg.gravity-button-tertiary[disabled],.gravity-size-lg.gravity-button-positive[disabled],.gravity-size-lg.gravity-button-negative[disabled],.gravity-size-lg.gravity-button-alternative[disabled],.gravity-size-lg.gravity-button-disabled,.gravity-size-lg.gravity-button-alternative:not([disabled]),.gravity-size-lg.gravity-button-negative:not([disabled]),.gravity-size-lg.gravity-button-positive:not([disabled]),.gravity-size-lg.gravity-button-tertiary:not([disabled]),.gravity-size-lg.gravity-button-secondary:not([disabled]),.gravity-size-lg.gravity-button-primary:not([disabled]){border-width:.125rem;height:3rem;padding:.875rem 1rem}.gravity-button.gravity-size-lg gravity-icon,.gravity-size-lg.gravity-button-style gravity-icon,.gravity-size-lg.gravity-button-primary[disabled] gravity-icon,.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon,.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-lg.gravity-button-positive[disabled] gravity-icon,.gravity-size-lg.gravity-button-negative[disabled] gravity-icon,.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon,.gravity-size-lg.gravity-button-disabled gravity-icon,.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button.gravity-size-lg gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.625rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]),.gravity-button-primary:not([disabled]).active{--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-primary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]),.gravity-button-secondary:not([disabled]).active{--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-secondary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]),.gravity-button-tertiary:not([disabled]).active{--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-tertiary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]),.gravity-button-positive:not([disabled]).active{--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-positive:not([disabled]).hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]),.gravity-button-negative:not([disabled]).active{--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-negative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]),.gravity-button-alternative:not([disabled]).active{--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-alternative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"] }]
+            args: [{ selector: 'gravity-button', template: "<button [attr.data-cy]=\"cypressTag\" [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\"\n        class=\"border-radius-sm gravity-button-{{type}} gravity-size-{{size}} hr-label {{size}}-bold {{customState}}\">\n  <ng-container *ngIf=\"!isLoading\">\n    <gravity-icon [style.--icon-color]=\"'var(--button-text-color)'\" [size]=\"isNewIcon(iconName) ? null : 'md'\"\n                  [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"\n                  [iconSize]=\"isNewIcon(iconName) ? 'md-16' : null\"></gravity-icon>\n    <span class=\"button-content-wrapper\" *ngIf=\"showContent\">\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n  <ng-container *ngIf=\"isLoading\">\n    <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n  </ng-container>\n</button>\n", styles: [":host{display:block;width:max-content}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;cursor:pointer;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){border-width:.0625rem;height:1.8125rem;padding:.625rem .75rem}.gravity-button.gravity-size-sm gravity-icon,.gravity-size-sm.gravity-button-style gravity-icon,.gravity-size-sm.gravity-button-primary[disabled] gravity-icon,.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon,.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-sm.gravity-button-positive[disabled] gravity-icon,.gravity-size-sm.gravity-button-negative[disabled] gravity-icon,.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon,.gravity-size-sm.gravity-button-disabled gravity-icon,.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .5625rem;--icon-width: .5625rem}.gravity-button.gravity-size-sm gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-sm.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){border-width:.125rem;height:2.3125rem;padding:.75rem .875rem}.gravity-button.gravity-size-md gravity-icon,.gravity-size-md.gravity-button-style gravity-icon,.gravity-size-md.gravity-button-primary[disabled] gravity-icon,.gravity-size-md.gravity-button-secondary[disabled] gravity-icon,.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-md.gravity-button-positive[disabled] gravity-icon,.gravity-size-md.gravity-button-negative[disabled] gravity-icon,.gravity-size-md.gravity-button-alternative[disabled] gravity-icon,.gravity-size-md.gravity-button-disabled gravity-icon,.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: .8125rem;--icon-width: .8125rem}.gravity-button.gravity-size-md gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-md.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.3125rem}.gravity-button.gravity-size-lg,.gravity-size-lg.gravity-button-style,.gravity-size-lg.gravity-button-primary[disabled],.gravity-size-lg.gravity-button-secondary[disabled],.gravity-size-lg.gravity-button-tertiary[disabled],.gravity-size-lg.gravity-button-positive[disabled],.gravity-size-lg.gravity-button-negative[disabled],.gravity-size-lg.gravity-button-alternative[disabled],.gravity-size-lg.gravity-button-disabled,.gravity-size-lg.gravity-button-alternative:not([disabled]),.gravity-size-lg.gravity-button-negative:not([disabled]),.gravity-size-lg.gravity-button-positive:not([disabled]),.gravity-size-lg.gravity-button-tertiary:not([disabled]),.gravity-size-lg.gravity-button-secondary:not([disabled]),.gravity-size-lg.gravity-button-primary:not([disabled]){border-width:.125rem;height:3rem;padding:.875rem 1rem}.gravity-button.gravity-size-lg gravity-icon,.gravity-size-lg.gravity-button-style gravity-icon,.gravity-size-lg.gravity-button-primary[disabled] gravity-icon,.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon,.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon,.gravity-size-lg.gravity-button-positive[disabled] gravity-icon,.gravity-size-lg.gravity-button-negative[disabled] gravity-icon,.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon,.gravity-size-lg.gravity-button-disabled gravity-icon,.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon,.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button.gravity-size-lg gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-style gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative[disabled] gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-disabled gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-alternative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-negative:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-positive:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-tertiary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-secondary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty),.gravity-size-lg.gravity-button-primary:not([disabled]) gravity-icon+span.button-content-wrapper:not(:empty){margin-left:.625rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]),.gravity-button-primary:not([disabled]).active{--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-primary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]),.gravity-button-secondary:not([disabled]).active{--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-secondary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]),.gravity-button-tertiary:not([disabled]).active{--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-tertiary:not([disabled]).hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]),.gravity-button-positive:not([disabled]).active{--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-positive:not([disabled]).hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]),.gravity-button-negative:not([disabled]).active{--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-negative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]),.gravity-button-alternative:not([disabled]).active{--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):not(.active):not(.pressed):hover,.gravity-button-alternative:not([disabled]).hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"] }]
         }], propDecorators: { cypressTag: [{
                 type: Input
             }], disabled: [{
@@ -85,12 +144,20 @@ class GravityDropdownListComponent {
         this.ngSelectComponent.clearItem(this.selectedItem);
         this.changeSelectedItem(undefined);
     }
+    isNewIcon(iconName) {
+        if (this.iconPlacement == 'left') {
+            return GravityIconComponent.isNewIcon(iconName);
+        }
+        else {
+            return GravityIconComponent.isNewIcon(iconName);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { currentLang: "currentLang", customPlaceholder: "customPlaceholder", customValue: "customValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconPlacement: "iconPlacement", items: "items", label: "label", ngSelectConfig: "ngSelectConfig", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { selectedItemResponse: "response" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\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-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n     [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  <ng-container *ngIf=\"iconPlacement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n  <ng-select [attr.data-cy]=\"cypressTag\"\n             [bindLabel]=\"ngSelectConfig?.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n             [bindValue]=\"ngSelectConfig?.bindValue ? ngSelectConfig.bindValue : 'id'\"\n             [class.with-icons]=\"iconNames\"\n             [clearable]=\"ngSelectConfig?.clearable\"\n             [items]=\"items\"\n             [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n             [readonly]=\"state == 'readonly' ? true : null\"\n\n             [(ngModel)]=\"customValue\"\n\n             (change)=\"changeSelectedItem($event)\"\n             (clear)=\"clearSelectedItem()\"\n             (close)=\"dropdownOpen = false\"\n             (open)=\"dropdownOpen = true\"\n\n             class=\"hr-label md-regular\"\n             #ngSelectComponent>\n  </ng-select>\n  <ng-container *ngIf=\"iconPlacement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n  <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n                [iconName]=\"name\" *ngFor=\"let name of iconNames\" [size]=\"'sm'\"></gravity-icon>\n</ng-template>\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}body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text{font-family:Roboto Flex,sans-serif}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.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-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;padding:.5rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container div[role=combobox] input{width:88%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { currentLang: "currentLang", customPlaceholder: "customPlaceholder", customValue: "customValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconPlacement: "iconPlacement", items: "items", label: "label", ngSelectConfig: "ngSelectConfig", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { selectedItemResponse: "response" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\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-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n     [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  <ng-container *ngIf=\"iconPlacement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n  <ng-select [attr.data-cy]=\"cypressTag\"\n             [bindLabel]=\"ngSelectConfig?.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n             [bindValue]=\"ngSelectConfig?.bindValue ? ngSelectConfig.bindValue : 'id'\"\n             [class.with-icons]=\"iconNames\"\n             [clearable]=\"ngSelectConfig?.clearable\"\n             [items]=\"items\"\n             [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n             [readonly]=\"state == 'readonly' ? true : null\"\n\n             [(ngModel)]=\"customValue\"\n\n             (change)=\"changeSelectedItem($event)\"\n             (clear)=\"clearSelectedItem()\"\n             (close)=\"dropdownOpen = false\"\n             (open)=\"dropdownOpen = true\"\n\n             class=\"hr-label md-regular\"\n             #ngSelectComponent>\n  </ng-select>\n  <ng-container *ngIf=\"iconPlacement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n  <gravity-icon class=\"placement-{{iconPlacement}}\" [style.--icon-color]=\"iconColor\" [hoverIcon]=\"false\"\n                [iconName]=\"name\" *ngFor=\"let name of iconNames\"\n                [size]=\"isNewIcon(name) ? null : 'sm'\" [iconSize]=\"isNewIcon(name) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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}body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text{font-family:Roboto Flex,sans-serif}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.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-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;padding:.5rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container div[role=combobox] input{width:88%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-dropdown-list', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\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-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n     [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  <ng-container *ngIf=\"iconPlacement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n  <ng-select [attr.data-cy]=\"cypressTag\"\n             [bindLabel]=\"ngSelectConfig?.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n             [bindValue]=\"ngSelectConfig?.bindValue ? ngSelectConfig.bindValue : 'id'\"\n             [class.with-icons]=\"iconNames\"\n             [clearable]=\"ngSelectConfig?.clearable\"\n             [items]=\"items\"\n             [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n             [readonly]=\"state == 'readonly' ? true : null\"\n\n             [(ngModel)]=\"customValue\"\n\n             (change)=\"changeSelectedItem($event)\"\n             (clear)=\"clearSelectedItem()\"\n             (close)=\"dropdownOpen = false\"\n             (open)=\"dropdownOpen = true\"\n\n             class=\"hr-label md-regular\"\n             #ngSelectComponent>\n  </ng-select>\n  <ng-container *ngIf=\"iconPlacement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n  <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n                [iconName]=\"name\" *ngFor=\"let name of iconNames\" [size]=\"'sm'\"></gravity-icon>\n</ng-template>\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}body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text{font-family:Roboto Flex,sans-serif}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.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-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;padding:.5rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container div[role=combobox] input{width:88%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"] }]
+            args: [{ selector: 'gravity-dropdown-list', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\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-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n     [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  <ng-container *ngIf=\"iconPlacement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n  <ng-select [attr.data-cy]=\"cypressTag\"\n             [bindLabel]=\"ngSelectConfig?.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n             [bindValue]=\"ngSelectConfig?.bindValue ? ngSelectConfig.bindValue : 'id'\"\n             [class.with-icons]=\"iconNames\"\n             [clearable]=\"ngSelectConfig?.clearable\"\n             [items]=\"items\"\n             [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n             [readonly]=\"state == 'readonly' ? true : null\"\n\n             [(ngModel)]=\"customValue\"\n\n             (change)=\"changeSelectedItem($event)\"\n             (clear)=\"clearSelectedItem()\"\n             (close)=\"dropdownOpen = false\"\n             (open)=\"dropdownOpen = true\"\n\n             class=\"hr-label md-regular\"\n             #ngSelectComponent>\n  </ng-select>\n  <ng-container *ngIf=\"iconPlacement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n  <gravity-icon class=\"placement-{{iconPlacement}}\" [style.--icon-color]=\"iconColor\" [hoverIcon]=\"false\"\n                [iconName]=\"name\" *ngFor=\"let name of iconNames\"\n                [size]=\"isNewIcon(name) ? null : 'sm'\" [iconSize]=\"isNewIcon(name) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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}body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text{font-family:Roboto Flex,sans-serif}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.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-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;padding:.5rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container div[role=combobox] input{width:88%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"] }]
         }], propDecorators: { selectedItemResponse: [{
                 type: Output,
                 args: ['response']
@@ -228,12 +295,20 @@ class GravityTextFieldComponent {
             return 'hr-label sm-regular';
         }
     }
+    isNewIcon(iconPosition) {
+        if (iconPosition == 'left') {
+            return GravityIconComponent.isNewIcon(this.iconLeft);
+        }
+        else {
+            return GravityIconComponent.isNewIcon(this.iconRight);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { currentLang: "currentLang", customInputValue: "customInputValue", customState: "customState", cypressTag: "cypressTag", label: "label", prefix: "prefix", required: "required", supportText: "supportText", textFieldType: "textFieldType", clickOnLeftIcon: "clickOnLeftIcon", clickOnRightIcon: "clickOnRightIcon", iconLeft: "iconLeft", iconRight: "iconRight", autocomplete: "autocomplete", inputContentType: "inputContentType", placeholder: "placeholder", validations: "validations", size: "size", width: "width" }, outputs: { leftIconResponse: "clickIconLeft", rightIconResponse: "clickIconRight", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"{{getTextFieldLabelFontSize()}} {{getTextFieldStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == 'readonly' ? true : null\"\n         [autocomplete]=\"autocomplete\"\n         [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n         [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n         [placeholder]=\"getPlaceholder()\"\n         [type]=\"inputContentType\"\n         [value]=\"inputValue\"\n\n         (blur)=\"focusInput = false\"\n         (change)=\"changeInputValue()\"\n         (focus)=\"focusInput = true\"\n         (keyup)=\"changeInputValue()\"\n\n         class=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == 'readonly' ? true : null\"\n            [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n            [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n            [placeholder]=\"getPlaceholder()\"\n            [value]=\"inputValue\"\n\n            (blur)=\"focusInput = false\"\n            (change)=\"changeInputValue()\"\n            (focus)=\"focusInput = true\"\n            (keyup)=\"changeInputValue()\"\n\n            class=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'forgot_password'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == ''\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"></gravity-icon>\n</ng-template>\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,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)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.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);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--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:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{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-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-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-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.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{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.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{--text-field-input-field-width: 416px}.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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--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-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--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);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-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,.supporting-text.autofill{--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.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { currentLang: "currentLang", customInputValue: "customInputValue", customState: "customState", cypressTag: "cypressTag", label: "label", prefix: "prefix", required: "required", supportText: "supportText", textFieldType: "textFieldType", clickOnLeftIcon: "clickOnLeftIcon", clickOnRightIcon: "clickOnRightIcon", iconLeft: "iconLeft", iconRight: "iconRight", autocomplete: "autocomplete", inputContentType: "inputContentType", placeholder: "placeholder", validations: "validations", size: "size", width: "width" }, outputs: { leftIconResponse: "clickIconLeft", rightIconResponse: "clickIconRight", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"{{getTextFieldLabelFontSize()}} {{getTextFieldStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == 'readonly' ? true : null\"\n         [autocomplete]=\"autocomplete\"\n         [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n         [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n         [placeholder]=\"getPlaceholder()\"\n         [type]=\"inputContentType\"\n         [value]=\"inputValue\"\n\n         (blur)=\"focusInput = false\"\n         (change)=\"changeInputValue()\"\n         (focus)=\"focusInput = true\"\n         (keyup)=\"changeInputValue()\"\n\n         class=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == 'readonly' ? true : null\"\n            [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n            [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n            [placeholder]=\"getPlaceholder()\"\n            [value]=\"inputValue\"\n\n            (blur)=\"focusInput = false\"\n            (change)=\"changeInputValue()\"\n            (focus)=\"focusInput = true\"\n            (keyup)=\"changeInputValue()\"\n\n            class=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == ''\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"\n                [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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,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)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.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);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--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:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{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-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-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-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.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{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.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{--text-field-input-field-width: 416px}.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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--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-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--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);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-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,.supporting-text.autofill{--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.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-text-field', template: "<label class=\"{{getTextFieldLabelFontSize()}} {{getTextFieldStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == 'readonly' ? true : null\"\n         [autocomplete]=\"autocomplete\"\n         [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n         [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n         [placeholder]=\"getPlaceholder()\"\n         [type]=\"inputContentType\"\n         [value]=\"inputValue\"\n\n         (blur)=\"focusInput = false\"\n         (change)=\"changeInputValue()\"\n         (focus)=\"focusInput = true\"\n         (keyup)=\"changeInputValue()\"\n\n         class=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == 'readonly' ? true : null\"\n            [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n            [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n            [placeholder]=\"getPlaceholder()\"\n            [value]=\"inputValue\"\n\n            (blur)=\"focusInput = false\"\n            (change)=\"changeInputValue()\"\n            (focus)=\"focusInput = true\"\n            (keyup)=\"changeInputValue()\"\n\n            class=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'forgot_password'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == ''\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"></gravity-icon>\n</ng-template>\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,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)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.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);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--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:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{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-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-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-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.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{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.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{--text-field-input-field-width: 416px}.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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--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-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--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);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-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,.supporting-text.autofill{--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.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-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-text-field', template: "<label class=\"{{getTextFieldLabelFontSize()}} {{getTextFieldStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == 'readonly' ? true : null\"\n         [autocomplete]=\"autocomplete\"\n         [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n         [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n         [placeholder]=\"getPlaceholder()\"\n         [type]=\"inputContentType\"\n         [value]=\"inputValue\"\n\n         (blur)=\"focusInput = false\"\n         (change)=\"changeInputValue()\"\n         (focus)=\"focusInput = true\"\n         (keyup)=\"changeInputValue()\"\n\n         class=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == 'readonly' ? true : null\"\n            [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n            [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n            [placeholder]=\"getPlaceholder()\"\n            [value]=\"inputValue\"\n\n            (blur)=\"focusInput = false\"\n            (change)=\"changeInputValue()\"\n            (focus)=\"focusInput = true\"\n            (keyup)=\"changeInputValue()\"\n\n            class=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == ''\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"\n                [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\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,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)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.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);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--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:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{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-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-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-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.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{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.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{--text-field-input-field-width: 416px}.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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--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-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-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);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--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);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.gravity-input-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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-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,.supporting-text.autofill{--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.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-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"] }]
         }], propDecorators: { leftIconResponse: [{
                 type: Output,
                 args: ['clickIconLeft']
@@ -1089,11 +1164,11 @@ class GravityCalendarComponent {
         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-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n       [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n     [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n  <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [size]=\"'sm'\"></gravity-icon>\n  <input [attr.data-cy]=\"cypressTag\"\n         [disabled]=\"state != 'enabled' ? true : null\"\n\n         [style.cursor]=\"state == 'enabled' ? 'pointer' : 'text'\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false\"\n\n         class=\"hr-label md-regular\"\n         bsDatepicker\n         placeholder=\"Select your {{calendarType == 'day' ? 'date' : 'month'}}\"\n\n         [bsConfig]=\"bsDatepickerConfig\"\n         [container]=\"getBsDatepickerContainer()\"\n         [maxDate]=\"maxDate ? maxDate : null\"\n         [minDate]=\"minDate ? minDate : null\"\n         [minMode]=\"calendarType\"\n\n         [(bsValue)]=\"selectedDate\">\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { calendarType: "calendarType", currentLang: "currentLang", cypressTag: "cypressTag", datesConfig: "datesConfig", label: "label", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n       [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n     [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n  <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [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-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n       [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n     [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n  <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [size]=\"'sm'\"></gravity-icon>\n  <input [attr.data-cy]=\"cypressTag\"\n         [disabled]=\"state != 'enabled' ? true : null\"\n\n         [style.cursor]=\"state == 'enabled' ? 'pointer' : 'text'\"\n\n         (blur)=\"focusInput = false\"\n         (bsValueChange)=\"updateSelectedDate($event)\"\n         (focus)=\"focusInput = true\"\n         (onHidden)=\"focusInput = false\"\n\n         class=\"hr-label md-regular\"\n         bsDatepicker\n         placeholder=\"Select your {{calendarType == 'day' ? 'date' : 'month'}}\"\n\n         [bsConfig]=\"bsDatepickerConfig\"\n         [container]=\"getBsDatepickerContainer()\"\n         [maxDate]=\"maxDate ? maxDate : null\"\n         [minDate]=\"minDate ? minDate : null\"\n         [minMode]=\"calendarType\"\n\n         [(bsValue)]=\"selectedDate\">\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;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"] }]
+            args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n       [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput\"\n     [class.focused]=\"focusInput\" [class.full-input]=\"selectedDate && !focusInput\" [attr.elementId]=\"elementId\">\n  <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\" [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-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;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: [{
                 type: Output,
                 args: ['response']
@@ -1164,11 +1239,11 @@ class GravitySwitchComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { currentLang: "currentLang", customCheck: "customCheck", cypressTag: "cypressTag", label: "label", required: "required", state: "state", toggleOptions: "toggleOptions" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { currentLang: "currentLang", customCheck: "customCheck", cypressTag: "cypressTag", label: "label", required: "required", state: "state", toggleOptions: "toggleOptions" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular\" *ngIf=\"label\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text sm-regular\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"] }]
+            args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text sm-regular\" *ngIf=\"label\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"] }]
         }], propDecorators: { currentLang: [{
                 type: Input
             }], customCheck: [{
@@ -1206,11 +1281,11 @@ class GravityCheckboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'success'\" [size]=\"'sm'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'success'\" [size]=\"'sm'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
+            args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
         }], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
@@ -1230,12 +1305,15 @@ class GravityDialogComponent {
     closeModal() {
         this.ngbActiveModal.close();
     }
+    isNewIcon(iconName) {
+        return GravityIconComponent.isNewIcon(iconName);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [size]=\"'sm'\" [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n                  [size]=\"isNewIcon(dialogContent.titleIconName) ? null : 'md'\"\n                  [iconSize]=\"isNewIcon(dialogContent.titleIconName) ? 'lg-24' : null\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [iconSize]=\"'md-16'\" [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDialogComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [size]=\"'sm'\" [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"] }]
+            args: [{ template: "<div class=\"dialog-header\">\n  <div class=\"hr-title lg-bold title\">\n    <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n                  [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n                  [size]=\"isNewIcon(dialogContent.titleIconName) ? null : 'md'\"\n                  [iconSize]=\"isNewIcon(dialogContent.titleIconName) ? 'lg-24' : null\"></gravity-icon>\n    {{dialogContent.title}}\n  </div>\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'unsuccess'\" *ngIf=\"dialogContent.showCloseIcon\"\n                [iconSize]=\"'md-16'\" [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n    <ng-container\n        *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n  </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n  <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n    <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n    <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n  </ng-container>\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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
                 type: Input
             }] } });
@@ -1248,11 +1326,11 @@ class GravityNotificationComponent {
         this.ngbActiveModal.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationComponent, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\">\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n                [iconName]=\"'unsuccess'\" [size]=\"'sm'\" [title]=\"'Close'\"></gravity-icon>\n\n  <div class=\"title\">\n    <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\"></gravity-icon>\n    <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n  </div>\n\n  <div class=\"content\">\n    <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n    <h2 class=\"hr-body-text md-regular\" *ngIf=\"notificationContent.errorCode\">\n      Error code: <b>{{notificationContent.errorCode}}</b>\n    </h2>\n  </div>\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationComponent, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\">\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n                [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\"></gravity-icon>\n\n  <div class=\"title\">\n    <!--TODO ebiazzetti change icons-->\n    <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\" [size]=\"'md'\"></gravity-icon>\n    <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n  </div>\n\n  <div class=\"content\">\n    <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n    <h2 class=\"hr-body-text md-regular\" *ngIf=\"notificationContent.errorCode\">\n      Error code: <b>{{notificationContent.errorCode}}</b>\n    </h2>\n  </div>\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationComponent, decorators: [{
             type: Component,
-            args: [{ template: "<main class=\"alert-content {{notificationContent.state}}\">\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n                [iconName]=\"'unsuccess'\" [size]=\"'sm'\" [title]=\"'Close'\"></gravity-icon>\n\n  <div class=\"title\">\n    <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\"></gravity-icon>\n    <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n  </div>\n\n  <div class=\"content\">\n    <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n    <h2 class=\"hr-body-text md-regular\" *ngIf=\"notificationContent.errorCode\">\n      Error code: <b>{{notificationContent.errorCode}}</b>\n    </h2>\n  </div>\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
+            args: [{ template: "<main class=\"alert-content {{notificationContent.state}}\">\n  <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n                [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [iconSize]=\"'md-16'\"></gravity-icon>\n\n  <div class=\"title\">\n    <!--TODO ebiazzetti change icons-->\n    <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\" [size]=\"'md'\"></gravity-icon>\n    <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n  </div>\n\n  <div class=\"content\">\n    <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n    <h2 class=\"hr-body-text md-regular\" *ngIf=\"notificationContent.errorCode\">\n      Error code: <b>{{notificationContent.errorCode}}</b>\n    </h2>\n  </div>\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { notificationContent: [{
                 type: Input
             }] } });
@@ -1284,11 +1362,11 @@ class GravityNotificationInstantContainerComponent {
         this.delay = 5000;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, deps: [{ token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\"\n           [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [size]=\"'sm'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\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{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$2.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <!--TODO ebiazzetti change icons-->\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\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{padding:.75rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$2.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\"\n           [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [size]=\"'sm'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\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{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
+            args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <!--TODO ebiazzetti change icons-->\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\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{padding:.75rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
         }], ctorParameters: function () { return [{ type: GravityInstantNotificationsService }]; }, propDecorators: { delay: [{
                 type: Input
             }] } });
@@ -1563,11 +1641,11 @@ class GravityTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}@media (min-width: 993px){.table-container{overflow-x:auto}}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}@media (min-width: 993px){.table-container{overflow-x:auto}}\n"] }]
+            args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { tableDensity: [{
                 type: Input
             }], tableSizeInput: [{
@@ -1801,11 +1879,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class NodeToggleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeToggleComponent, selector: "node-toggle", inputs: { state: "state" }, ngImport: i0, template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n     (click)=\"state.expanded = !state.expanded\">\n  <gravity-icon [iconName]=\"(state.expanded ? 'arrow_down' : 'arrow_right')\" [size]=\"'sm'\"\n                *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeToggleComponent, selector: "node-toggle", inputs: { state: "state" }, ngImport: i0, template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n     (click)=\"state.expanded = !state.expanded\">\n  <gravity-icon [iconName]=\"state.expanded ? 'arrow-down' : 'arrow-right'\" [iconSize]=\"'md-16'\"\n                *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'node-toggle', template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n     (click)=\"state.expanded = !state.expanded\">\n  <gravity-icon [iconName]=\"(state.expanded ? 'arrow_down' : 'arrow_right')\" [size]=\"'sm'\"\n                *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\n"] }]
+            args: [{ selector: 'node-toggle', template: "<div class=\"node-toggle-wrapper\" [class.collapsable]=\"state.nodeItem?.children?.length > 0\"\n     (click)=\"state.expanded = !state.expanded\">\n  <gravity-icon [iconName]=\"state.expanded ? 'arrow-down' : 'arrow-right'\" [iconSize]=\"'md-16'\"\n                *ngIf=\"state.nodeItem?.children?.length > 0\"></gravity-icon>\n</div>\n", styles: [".node-toggle-wrapper{align-items:center;display:inline-flex;height:1.25rem;width:1.75rem}.collapsable{cursor:pointer}\n"] }]
         }], propDecorators: { state: [{
                 type: Input
             }] } });
@@ -1823,11 +1901,11 @@ class NodeCheckboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeCheckboxComponent, deps: [{ token: TreeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeCheckboxComponent, selector: "node-checkbox", inputs: { state: "state" }, ngImport: i0, template: "<gravity-icon class=\"border-radius-sm checkbox-icon\"\n              [class]=\"state.selectedState == 1 ? 'unselect' : 'select'\"\n              [class.disabled]=\"state.disabled\"\n\n              (click)=\"clickOnCheckbox()\"\n\n              [iconName]=\"state.selectedState == 2 ? 'uncheck' : 'success'\"></gravity-icon>\n", styles: [".checkbox-icon{background-color:var(--cta-primary);cursor:pointer;height:1.5rem;--icon-color: var(--surface-secondary);padding:.35rem;width:1.5rem}.checkbox-icon.unselect{opacity:.5}.checkbox-icon.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeCheckboxComponent, selector: "node-checkbox", inputs: { state: "state" }, ngImport: i0, template: "<gravity-icon class=\"border-radius-sm checkbox-icon\" [class.unselect]=\"state.selectedState == 1\"\n              [class.select]=\"state.selectedState != 1\" [class.disabled]=\"state.disabled\"\n\n              (click)=\"clickOnCheckbox()\"\n\n              [iconName]=\"state.selectedState == 2 ? 'uncheck' : 'check'\"\n              [iconSize]=\"state.selectedState == 2 ? null : 'lg-24'\"\n              [size]=\"state.selectedState == 2 ? 'md' : null\"></gravity-icon>\n", styles: [".checkbox-icon{background-color:var(--cta-primary);cursor:pointer;--icon-color: var(--surface-secondary);padding:.35rem}.checkbox-icon.unselect{opacity:.5}.checkbox-icon.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'node-checkbox', template: "<gravity-icon class=\"border-radius-sm checkbox-icon\"\n              [class]=\"state.selectedState == 1 ? 'unselect' : 'select'\"\n              [class.disabled]=\"state.disabled\"\n\n              (click)=\"clickOnCheckbox()\"\n\n              [iconName]=\"state.selectedState == 2 ? 'uncheck' : 'success'\"></gravity-icon>\n", styles: [".checkbox-icon{background-color:var(--cta-primary);cursor:pointer;height:1.5rem;--icon-color: var(--surface-secondary);padding:.35rem;width:1.5rem}.checkbox-icon.unselect{opacity:.5}.checkbox-icon.disabled{cursor:not-allowed}\n"] }]
+            args: [{ selector: 'node-checkbox', template: "<gravity-icon class=\"border-radius-sm checkbox-icon\" [class.unselect]=\"state.selectedState == 1\"\n              [class.select]=\"state.selectedState != 1\" [class.disabled]=\"state.disabled\"\n\n              (click)=\"clickOnCheckbox()\"\n\n              [iconName]=\"state.selectedState == 2 ? 'uncheck' : 'check'\"\n              [iconSize]=\"state.selectedState == 2 ? null : 'lg-24'\"\n              [size]=\"state.selectedState == 2 ? 'md' : null\"></gravity-icon>\n", styles: [".checkbox-icon{background-color:var(--cta-primary);cursor:pointer;--icon-color: var(--surface-secondary);padding:.35rem}.checkbox-icon.unselect{opacity:.5}.checkbox-icon.disabled{cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: TreeService }]; }, propDecorators: { state: [{
                 type: Input
             }] } });
@@ -1934,11 +2012,11 @@ class GravityStepperComponent {
         this.currentStepResponse.emit(this.currentStep);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n  <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n       [class.current]=\"(index + 1) == currentStep\"\n       [class.pending]=\"(index + 1) > currentStep\"\n       [class.completed]=\"(index + 1) < currentStep\"\n       [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n    <hr>\n    <div class=\"step-content gravity-padding-right-md\">\n      <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n                    [customIconColorVariable]=\"'var(--gravity-icon-color)'\" [iconName]=\"'success'\"\n                    [size]=\"'lg'\"></gravity-icon>\n      <div>\n        <p class=\"step-number hr-label md-regular\">\n          {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n        </p>\n        <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n        <p class=\"border-radius-rounded hr-label md-regular step-state\"\n           [class.current]=\"(index + 1) == currentStep\"\n           [class.pending]=\"(index + 1) > currentStep\"\n           [class.completed]=\"(index + 1) < currentStep\">\n          {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n          {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"gravity-margin-top-xs mobile\">\n    <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n      {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n    </p>\n    <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n      {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n    </p>\n    <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n  </div>\n</div>\n<div class=\"stepper-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);padding:.3125rem;z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStepperComponent, selector: "gravity-stepper", inputs: { currentLang: "currentLang", stepLabels: "stepLabels" }, outputs: { currentStepResponse: "currentStep" }, ngImport: i0, template: "<div class=\"stepper-header\">\n  <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n       [class.current]=\"(index + 1) == currentStep\"\n       [class.pending]=\"(index + 1) > currentStep\"\n       [class.completed]=\"(index + 1) < currentStep\"\n       [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n    <hr>\n    <div class=\"step-content gravity-padding-right-md\">\n      <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n                    [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n                    [iconSize]=\"'xl-32'\"></gravity-icon>\n      <div>\n        <p class=\"step-number hr-label md-regular\">\n          {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n        </p>\n        <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n        <p class=\"border-radius-rounded hr-label md-regular step-state\"\n           [class.current]=\"(index + 1) == currentStep\"\n           [class.pending]=\"(index + 1) > currentStep\"\n           [class.completed]=\"(index + 1) < currentStep\">\n          {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n          {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"gravity-margin-top-xs mobile\">\n    <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n      {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n    </p>\n    <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n      {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n    </p>\n    <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n  </div>\n</div>\n<div class=\"stepper-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-stepper', template: "<div class=\"stepper-header\">\n  <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n       [class.current]=\"(index + 1) == currentStep\"\n       [class.pending]=\"(index + 1) > currentStep\"\n       [class.completed]=\"(index + 1) < currentStep\"\n       [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n    <hr>\n    <div class=\"step-content gravity-padding-right-md\">\n      <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n                    [customIconColorVariable]=\"'var(--gravity-icon-color)'\" [iconName]=\"'success'\"\n                    [size]=\"'lg'\"></gravity-icon>\n      <div>\n        <p class=\"step-number hr-label md-regular\">\n          {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n        </p>\n        <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n        <p class=\"border-radius-rounded hr-label md-regular step-state\"\n           [class.current]=\"(index + 1) == currentStep\"\n           [class.pending]=\"(index + 1) > currentStep\"\n           [class.completed]=\"(index + 1) < currentStep\">\n          {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n          {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"gravity-margin-top-xs mobile\">\n    <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n      {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n    </p>\n    <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n      {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n    </p>\n    <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n  </div>\n</div>\n<div class=\"stepper-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);padding:.3125rem;z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"] }]
+            args: [{ selector: 'gravity-stepper', template: "<div class=\"stepper-header\">\n  <div class=\"step\" *ngFor=\"let stepLabel of stepLabels; let index = index\"\n       [class.current]=\"(index + 1) == currentStep\"\n       [class.pending]=\"(index + 1) > currentStep\"\n       [class.completed]=\"(index + 1) < currentStep\"\n       [style.--step-width]=\"(100 / stepLabels.length) + '%'\">\n    <hr>\n    <div class=\"step-content gravity-padding-right-md\">\n      <gravity-icon class=\"border-radius-rounded gravity-margin-top-xs gravity-margin-right-sm gravity-padding-xs\"\n                    [style.--icon-color]=\"'var(--gravity-icon-color)'\" [iconName]=\"'check'\"\n                    [iconSize]=\"'xl-32'\"></gravity-icon>\n      <div>\n        <p class=\"step-number hr-label md-regular\">\n          {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{index + 1}}\n        </p>\n        <p class=\"step-text hr-label md-bold\">{{stepLabel}}</p>\n        <p class=\"border-radius-rounded hr-label md-regular step-state\"\n           [class.current]=\"(index + 1) == currentStep\"\n           [class.pending]=\"(index + 1) > currentStep\"\n           [class.completed]=\"(index + 1) < currentStep\">\n          {{currentLang == 'en' ? ((index + 1) == currentStep ? 'In progress' : (index + 1) > currentStep ? 'Pending' : 'Completed') : ''}}\n          {{currentLang == 'es' ? ((index + 1) == currentStep ? 'En progreso' : (index + 1) > currentStep ? 'Pendiente' : 'Completado') : ''}}\n        </p>\n      </div>\n    </div>\n  </div>\n  <div class=\"gravity-margin-top-xs mobile\">\n    <p class=\"border-radius-xs current gravity-margin-right-xs hr-label md-regular step-state\">\n      {{currentLang == 'en' ? 'In progress' : 'En progreso'}}\n    </p>\n    <p class=\"step-number gravity-margin-right-xs hr-label md-regular\">\n      {{currentLang == 'es' ? 'Paso' : 'Step'}} 0{{currentStep}}:\n    </p>\n    <p class=\"step-text hr-label md-bold\">{{stepLabels[currentStep - 1]}}</p>\n  </div>\n</div>\n<div class=\"stepper-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".stepper-header{align-items:center;display:flex;justify-content:space-between}@media (max-width: 992px){.stepper-header{flex-wrap:wrap}}.step{display:flex;position:relative;width:var(--step-width)}@media (min-width: 993px){.step{justify-content:flex-end}}hr{background-color:var(--step-hr-background);border:none;height:.375rem;margin:0;opacity:1}@media (min-width: 993px){hr{left:0;position:absolute;top:1.4rem;width:100%}}@media (max-width: 992px){hr{width:95%}}.step.current hr{--step-hr-background: var(--line-stepper-current-primary)}.step.pending hr{--step-hr-background: var(--line-stepper-pending-primary)}.step.completed hr{--step-hr-background: var(--line-stepper-completed-primary)}.step-content{background-color:var(--surface-secondary);display:flex;z-index:1}@media (max-width: 992px){.step-content{display:none}}gravity-icon{background-color:var(--step-icon-background);z-index:1}.step.current gravity-icon{--gravity-icon-color: var(--on-bg-stepper-current-primary);--step-icon-background: var(--line-stepper-current-primary)}.step.pending gravity-icon{--gravity-icon-color: var(--on-bg-stepper-pending-primary);--step-icon-background: var(--line-stepper-pending-primary)}.step.completed gravity-icon{--gravity-icon-color: var(--on-bg-stepper-completed-primary);--step-icon-background: var(--line-stepper-completed-primary)}.step-number,.step-text{color:var(--step-text-color)}.step.current .step-content .step-number,.step.current .step-content .step-text{--step-text-color: var(--text-stepper-current-primary)}.step.pending .step-content .step-number,.step.pending .step-content .step-text{--step-text-color: var(--text-stepper-pending-primary)}.step.completed .step-content .step-number,.step.completed .step-content .step-text{--step-text-color: var(--text-stepper-completed-primary)}.step-state{background-color:var(--step-state-background-color);color:var(--step-state-color);padding:.25rem 1rem;text-align:center;width:-moz-fit-content;width:fit-content}.step.current .step-content .step-state,.step-state.current{--step-state-background-color: var(--bg-stepper-current-primary);--step-state-color: var(--on-bg-stepper-current-primary)}.step.pending .step-content .step-state,.step-state.pending{--step-state-background-color: var(--bg-stepper-pending-primary);--step-state-color: var(--on-bg-stepper-pending-primary)}.step.completed .step-content .step-state,.step-state.completed{--step-state-background-color: var(--bg-stepper-completed-primary);--step-state-color: var(--on-bg-stepper-completed-primary)}.mobile{align-items:center}@media (min-width: 993px){.mobile{display:none}}@media (max-width: 992px){.mobile{display:flex}}\n"] }]
         }], propDecorators: { currentLang: [{
                 type: Input
             }], stepLabels: [{
@@ -2143,5 +2221,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent };
+export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
 //# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map