@progressio_resources/gravity-design-system 1.0.6 → 1.0.8

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

@@ -1,45 +1,1115 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule } from '@angular/core';
+import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from 'angular-svg-icon';
+import { AngularSvgIconModule } from 'angular-svg-icon';
+import * as i4 from '@ng-select/ng-select';
+import { NgSelectModule } from '@ng-select/ng-select';
+import * as i2$1 from 'angular-svg-icon-preloader';
+import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
+import * as i3$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i1$1 from 'ngx-pretty-checkbox';
+import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
 
-class GravityDesignSystemService {
+class GravityButtonComponent {
+    ngOnInit() {
+        this.data.isLoading = false;
+        this.data.disabled = false;
+        if (this.data.icon) {
+            this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
+        }
+    }
 }
-GravityDesignSystemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GravityDesignSystemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+GravityButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravityButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityButtonComponent, selector: "gravity-button", inputs: { data: "data" }, ngImport: i0, template: "<button [attr.data-cy]=\"data.cypressTag\" class=\"gravity-button-{{data.type}} gravity-size-{{data.size}}\"\n        [disabled]=\"data.disabled\">\n  <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n    <ng-content></ng-content>\n  <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</button>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".gravity-button,.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.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;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;font-size:.9375rem;font-weight:700;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:11rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-disabled:not([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]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-disabled:not([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]){--button-height: 2rem}.gravity-button svg-icon,.gravity-button-style svg-icon,.gravity-button-disabled:not([disabled]) svg-icon,.gravity-button[disabled] svg-icon,[disabled].gravity-button-style svg-icon,.gravity-button-alternative:not([disabled]) svg-icon,.gravity-button-negative:not([disabled]) svg-icon,.gravity-button-positive:not([disabled]) svg-icon,.gravity-button-tertiary:not([disabled]) svg-icon,.gravity-button-secondary:not([disabled]) svg-icon,.gravity-button-primary:not([disabled]) svg-icon{height:1rem;line-height:0;width:1rem}.gravity-button svg-icon.placement-left,.gravity-button-style svg-icon.placement-left,.gravity-button-disabled:not([disabled]) svg-icon.placement-left,.gravity-button-alternative:not([disabled]) svg-icon.placement-left,.gravity-button-negative:not([disabled]) svg-icon.placement-left,.gravity-button-positive:not([disabled]) svg-icon.placement-left,.gravity-button-tertiary:not([disabled]) svg-icon.placement-left,.gravity-button-secondary:not([disabled]) svg-icon.placement-left,.gravity-button-primary:not([disabled]) svg-icon.placement-left{margin-right:.5rem}.gravity-button svg-icon.placement-right,.gravity-button-style svg-icon.placement-right,.gravity-button-disabled:not([disabled]) svg-icon.placement-right,.gravity-button-alternative:not([disabled]) svg-icon.placement-right,.gravity-button-negative:not([disabled]) svg-icon.placement-right,.gravity-button-positive:not([disabled]) svg-icon.placement-right,.gravity-button-tertiary:not([disabled]) svg-icon.placement-right,.gravity-button-secondary:not([disabled]) svg-icon.placement-right,.gravity-button-primary:not([disabled]) svg-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.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-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.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-disabled:not([disabled]) p,.gravity-button[disabled] p,[disabled].gravity-button-style 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 svg-icon ::ng-deep svg,.gravity-button-disabled:not([disabled]) svg-icon ::ng-deep svg,.gravity-button[disabled] svg-icon ::ng-deep svg,[disabled].gravity-button-style svg-icon ::ng-deep svg,.gravity-button-alternative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-negative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-positive:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-tertiary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-secondary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-primary:not([disabled]) svg-icon ::ng-deep svg{--icon-color: var(--button-text-color)}.gravity-button-primary:not([disabled]){--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)}.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]){--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)}.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]){--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)}.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]){--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)}.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]){--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)}.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]){--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)}.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-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,[disabled].gravity-button-primary:not([disabled]),[disabled].gravity-button-secondary:not([disabled]),[disabled].gravity-button-tertiary:not([disabled]),[disabled].gravity-button-positive:not([disabled]),[disabled].gravity-button-negative:not([disabled]),[disabled].gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);cursor:default}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-button', template: "<button [attr.data-cy]=\"data.cypressTag\" class=\"gravity-button-{{data.type}} gravity-size-{{data.size}}\"\n        [disabled]=\"data.disabled\">\n  <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n    <ng-content></ng-content>\n  <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</button>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".gravity-button,.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.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;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;font-size:.9375rem;font-weight:700;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:11rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-disabled:not([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]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-disabled:not([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]){--button-height: 2rem}.gravity-button svg-icon,.gravity-button-style svg-icon,.gravity-button-disabled:not([disabled]) svg-icon,.gravity-button[disabled] svg-icon,[disabled].gravity-button-style svg-icon,.gravity-button-alternative:not([disabled]) svg-icon,.gravity-button-negative:not([disabled]) svg-icon,.gravity-button-positive:not([disabled]) svg-icon,.gravity-button-tertiary:not([disabled]) svg-icon,.gravity-button-secondary:not([disabled]) svg-icon,.gravity-button-primary:not([disabled]) svg-icon{height:1rem;line-height:0;width:1rem}.gravity-button svg-icon.placement-left,.gravity-button-style svg-icon.placement-left,.gravity-button-disabled:not([disabled]) svg-icon.placement-left,.gravity-button-alternative:not([disabled]) svg-icon.placement-left,.gravity-button-negative:not([disabled]) svg-icon.placement-left,.gravity-button-positive:not([disabled]) svg-icon.placement-left,.gravity-button-tertiary:not([disabled]) svg-icon.placement-left,.gravity-button-secondary:not([disabled]) svg-icon.placement-left,.gravity-button-primary:not([disabled]) svg-icon.placement-left{margin-right:.5rem}.gravity-button svg-icon.placement-right,.gravity-button-style svg-icon.placement-right,.gravity-button-disabled:not([disabled]) svg-icon.placement-right,.gravity-button-alternative:not([disabled]) svg-icon.placement-right,.gravity-button-negative:not([disabled]) svg-icon.placement-right,.gravity-button-positive:not([disabled]) svg-icon.placement-right,.gravity-button-tertiary:not([disabled]) svg-icon.placement-right,.gravity-button-secondary:not([disabled]) svg-icon.placement-right,.gravity-button-primary:not([disabled]) svg-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.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-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.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-disabled:not([disabled]) p,.gravity-button[disabled] p,[disabled].gravity-button-style 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 svg-icon ::ng-deep svg,.gravity-button-disabled:not([disabled]) svg-icon ::ng-deep svg,.gravity-button[disabled] svg-icon ::ng-deep svg,[disabled].gravity-button-style svg-icon ::ng-deep svg,.gravity-button-alternative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-negative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-positive:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-tertiary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-secondary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-primary:not([disabled]) svg-icon ::ng-deep svg{--icon-color: var(--button-text-color)}.gravity-button-primary:not([disabled]){--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)}.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]){--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)}.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]){--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)}.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]){--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)}.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]){--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)}.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]){--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)}.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-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,[disabled].gravity-button-primary:not([disabled]),[disabled].gravity-button-secondary:not([disabled]),[disabled].gravity-button-tertiary:not([disabled]),[disabled].gravity-button-positive:not([disabled]),[disabled].gravity-button-negative:not([disabled]),[disabled].gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);cursor:default}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class GravityDropdownListComponent {
+    constructor() {
+        this.selectedIdResponse = new EventEmitter();
+        this.dropdownOpen = false;
+    }
+    ngOnInit() {
+        this.data.ngSelectConfig.placeholder = !this.data.ngSelectConfig.placeholder || this.data.ngSelectConfig.placeholder == '' ? 'All' : this.data.ngSelectConfig.placeholder;
+        this.data.ngSelectConfig.clearable = !this.data.ngSelectConfig.clearable ? false : this.data.ngSelectConfig.clearable;
+        this.data.required = this.data.required ? this.data.required : false;
+        this.data.state = this.data.state ? this.data.state : "enabled";
+        this.selectedId = this.data.ngSelectConfig.customId ? this.data.ngSelectConfig.items.find((item) => item.id == this.data.ngSelectConfig.customId).id : undefined;
+        if (this.selectedId) {
+            this.selectedIdResponse.emit(this.selectedId);
+        }
+        if (this.data.supportText) {
+            this.data.supportText.type = this.data.supportText.type ? this.data.supportText.type : "neutro";
+        }
+        if (this.data.icon) {
+            this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
+        }
+    }
+    changeSelectedId(newSelectedItem) {
+        this.selectedId = newSelectedItem ? newSelectedItem.id : undefined;
+        this.selectedIdResponse.emit(this.selectedId ? this.selectedId : -1);
+    }
+}
+GravityDropdownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravityDropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { data: "data" }, outputs: { selectedIdResponse: "selectedIdResponse" }, ngImport: i0, template: "<div class=\"gravity-dropdown-list\">\n  <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n         [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n    {{data.label}}\n    <ng-container *ngIf=\"data.required\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'readonly'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'disabled'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n    </ng-container>\n  </label>\n  <div class=\"dropdown-field {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n    <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n    <ng-select [attr.data-cy]=\"data.cypressTag\"\n               [clearable]=\"data.ngSelectConfig.clearable\"\n               [disabled]=\"data.state == 'disabled' ? true : null\"\n               [items]=\"data.ngSelectConfig.items\"\n               [placeholder]=\"selectedId ? '' : data.ngSelectConfig.placeholder\"\n               [readonly]=\"data.state == 'readonly' ? true : null\"\n\n               [(ngModel)]=\"selectedId\"\n\n               (change)=\"changeSelectedId($event)\"\n               (clear)=\"changeSelectedId()\"\n               (close)=\"dropdownOpen = false\"\n               (open)=\"dropdownOpen = true\"\n\n               bindLabel=\"name\"\n               bindValue=\"id\"\n               class=\"hr-label md-regular\">\n    </ng-select>\n    <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n  </div>\n  <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n    {{data.supportText.content}}\n  </p>\n</div>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n\n", styles: ["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.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,.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.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.sm-regular,.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,.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,.dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.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,.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,.dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.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.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}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.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.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)}.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;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem}.dropdown-field.readonly{--cursor-type: text}.dropdown-field.disabled{--cursor-type: initial}.dropdown-field svg-icon{height:1rem;line-height:0;width:1rem}.dropdown-field svg-icon.placement-left{margin-right:.5rem}.dropdown-field svg-icon.placement-right{margin-left:.5rem}.dropdown-field ng-select{width:-webkit-fill-available}.dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.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}.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}.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:.1875rem 1rem}.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)}.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)}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.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)}.dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.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)}.dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.dropdown-field.full.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)}.dropdown-field.full.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.dropdown-field.full.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)}.dropdown-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.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)}.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: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-dropdown-list', template: "<div class=\"gravity-dropdown-list\">\n  <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n         [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n    {{data.label}}\n    <ng-container *ngIf=\"data.required\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'readonly'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'disabled'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n    </ng-container>\n  </label>\n  <div class=\"dropdown-field {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n    <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n    <ng-select [attr.data-cy]=\"data.cypressTag\"\n               [clearable]=\"data.ngSelectConfig.clearable\"\n               [disabled]=\"data.state == 'disabled' ? true : null\"\n               [items]=\"data.ngSelectConfig.items\"\n               [placeholder]=\"selectedId ? '' : data.ngSelectConfig.placeholder\"\n               [readonly]=\"data.state == 'readonly' ? true : null\"\n\n               [(ngModel)]=\"selectedId\"\n\n               (change)=\"changeSelectedId($event)\"\n               (clear)=\"changeSelectedId()\"\n               (close)=\"dropdownOpen = false\"\n               (open)=\"dropdownOpen = true\"\n\n               bindLabel=\"name\"\n               bindValue=\"id\"\n               class=\"hr-label md-regular\">\n    </ng-select>\n    <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n  </div>\n  <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n    {{data.supportText.content}}\n  </p>\n</div>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n\n", styles: ["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.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,.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.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.sm-regular,.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,.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,.dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.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,.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,.dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.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.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}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.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.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)}.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;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem}.dropdown-field.readonly{--cursor-type: text}.dropdown-field.disabled{--cursor-type: initial}.dropdown-field svg-icon{height:1rem;line-height:0;width:1rem}.dropdown-field svg-icon.placement-left{margin-right:.5rem}.dropdown-field svg-icon.placement-right{margin-left:.5rem}.dropdown-field ng-select{width:-webkit-fill-available}.dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.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}.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}.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:.1875rem 1rem}.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)}.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)}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.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)}.dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.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)}.dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.dropdown-field.full.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)}.dropdown-field.full.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.dropdown-field.full.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)}.dropdown-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.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)}.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: { selectedIdResponse: [{
+                type: Output
+            }], data: [{
+                type: Input
+            }] } });
+
+class GravityTextFieldComponent {
+    constructor() {
+        this.textFieldValueResponse = new EventEmitter();
+        this.focusInput = false;
+        this.inputValue = '';
+        this.placeholders = {
+            'email': 'test@email.com',
+            'url': 'https://www.test.com'
+        };
+    }
+    ngOnInit() {
+        this.data.autocomplete = this.data.autocomplete ? this.data.autocomplete : "off";
+        this.data.placeholderType = this.data.placeholderType ? this.data.placeholderType : "default";
+        this.data.required = this.data.required ? this.data.required : false;
+        this.data.state = this.data.state ? this.data.state : "enabled";
+        this.data.type = this.data.type ? this.data.type : "text";
+        if (this.data.supportText) {
+            this.data.supportText.type = this.data.supportText.type ? this.data.supportText.type : "neutro";
+        }
+        if (this.data.icon) {
+            this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
+        }
+    }
+    ngAfterViewInit() {
+        this.changeInputValue();
+    }
+    getPlaceholder() {
+        if (this.data.customPlaceholder && this.data.customPlaceholder != '') {
+            return this.data.customPlaceholder;
+        }
+        else {
+            if (this.data.placeholderType == 'default') {
+                return this.data.label;
+            }
+            else {
+                return this.placeholders[this.data.placeholderType];
+            }
+        }
+    }
+    changeInputValue() {
+        this.inputValue = this.inputElement.nativeElement.value;
+        this.textFieldValueResponse.emit(this.inputValue);
+    }
+}
+GravityTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { data: "data" }, outputs: { textFieldValueResponse: "textFieldValueResponse" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-text-field\">\n  <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n         [class.focused]=\"focusInput\" [class.full]=\"inputValue != '' && !focusInput\">\n    {{data.label}}\n    <ng-container *ngIf=\"data.required\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'readonly'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'disabled'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n    </ng-container>\n  </label>\n  <div class=\"input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\" [class.focused]=\"focusInput\"\n       [class.full]=\"inputValue != '' && !focusInput\">\n    <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n    <input [attr.data-cy]=\"data.cypressTag\"\n           [attr.disabled]=\"data.state == 'disabled' ? true : null\"\n           [attr.readonly]=\"data.state == 'readonly' ? true : null\"\n           [attr.value]=\"data.customInputValue ? data.customInputValue : null\"\n           [autocomplete]=\"data.autocomplete\"\n           [placeholder]=\"getPlaceholder()\"\n           [type]=\"data.type\"\n\n           (blur)=\"focusInput = false\"\n           (focus)=\"focusInput = true\"\n           (keyup)=\"changeInputValue()\"\n\n           class=\"hr-label md-regular\"\n\n           #inputElement>\n    <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n  </div>\n  <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n    {{data.supportText.content}}\n  </p>\n</div>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}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.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.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)}.input-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;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem}.input-field svg-icon{height:1rem;line-height:0;width:1rem}.input-field svg-icon.placement-left{margin-right:.5rem}.input-field svg-icon.placement-right{margin-left:.5rem}.input-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%}.input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.input-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)}.input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.input-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)}.input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.input-field.full.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)}.input-field.full.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.input-field.full.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)}.input-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.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-input-color: var(--input-text-full-read-only-primary)}.input-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: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-text-field', template: "<div class=\"gravity-text-field\">\n  <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n         [class.focused]=\"focusInput\" [class.full]=\"inputValue != '' && !focusInput\">\n    {{data.label}}\n    <ng-container *ngIf=\"data.required\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'readonly'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'disabled'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n    </ng-container>\n  </label>\n  <div class=\"input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\" [class.focused]=\"focusInput\"\n       [class.full]=\"inputValue != '' && !focusInput\">\n    <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n    <input [attr.data-cy]=\"data.cypressTag\"\n           [attr.disabled]=\"data.state == 'disabled' ? true : null\"\n           [attr.readonly]=\"data.state == 'readonly' ? true : null\"\n           [attr.value]=\"data.customInputValue ? data.customInputValue : null\"\n           [autocomplete]=\"data.autocomplete\"\n           [placeholder]=\"getPlaceholder()\"\n           [type]=\"data.type\"\n\n           (blur)=\"focusInput = false\"\n           (focus)=\"focusInput = true\"\n           (keyup)=\"changeInputValue()\"\n\n           class=\"hr-label md-regular\"\n\n           #inputElement>\n    <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n  </div>\n  <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n    {{data.supportText.content}}\n  </p>\n</div>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}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.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.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)}.input-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;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem}.input-field svg-icon{height:1rem;line-height:0;width:1rem}.input-field svg-icon.placement-left{margin-right:.5rem}.input-field svg-icon.placement-right{margin-left:.5rem}.input-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%}.input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.input-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)}.input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.input-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)}.input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.input-field.full.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)}.input-field.full.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.input-field.full.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)}.input-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.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-input-color: var(--input-text-full-read-only-primary)}.input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
+        }], propDecorators: { textFieldValueResponse: [{
+                type: Output
+            }], data: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement', { static: false }]
+            }] } });
+
+class GravityTooltipComponent {
+    transitionEnd() {
+        if (this.show) {
+            this.events.emit({
+                type: 'shown'
+            });
+        }
+    }
+    set show(value) {
+        if (value) {
+            this.setPosition();
+        }
+        this._show = this.hostClassShow = value;
+    }
+    get show() {
+        return this._show;
+    }
+    get placement() {
+        return this.data.options.placement;
+    }
+    get autoPlacement() {
+        return this.data.options.autoPlacement;
+    }
+    get element() {
+        return this.data.element;
+    }
+    get elementPosition() {
+        return this.data.elementPosition;
+    }
+    get options() {
+        return this.data.options;
+    }
+    get value() {
+        return this.data.value;
+    }
+    get tooltipOffset() {
+        return Number(this.data.options.offset);
+    }
+    get isThemeLight() {
+        return this.options['theme'] === 'light';
+    }
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this._show = false;
+        this.events = new EventEmitter();
+    }
+    ngOnInit() {
+        this.setCustomClass();
+        this.setStyles();
+    }
+    setPosition() {
+        if (this.setHostStyle(this.placement)) {
+            this.setPlacementClass(this.placement);
+            return;
+        }
+        else {
+            /* Is tooltip outside the visible area */
+            const placements = ['top', 'right', 'bottom', 'left'];
+            let isPlacementSet;
+            for (const placement of placements) {
+                if (this.setHostStyle(placement)) {
+                    this.setPlacementClass(placement);
+                    isPlacementSet = true;
+                    return;
+                }
+            }
+            /* Set original placement */
+            if (!isPlacementSet) {
+                this.setHostStyle(this.placement, true);
+                this.setPlacementClass(this.placement);
+            }
+        }
+    }
+    setPlacementClass(placement) {
+        this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-' + placement);
+    }
+    setHostStyle(placement, disableAutoPlacement = false) {
+        const isSvg = this.element instanceof SVGElement;
+        const tooltip = this.elementRef.nativeElement;
+        const isCustomPosition = !this.elementPosition.right;
+        let elementHeight = isSvg ? this.element.getBoundingClientRect().height : this.element.offsetHeight;
+        let elementWidth = isSvg ? this.element.getBoundingClientRect().width : this.element.offsetWidth;
+        const tooltipHeight = tooltip.clientHeight;
+        const tooltipWidth = tooltip.clientWidth;
+        const scrollY = window.pageYOffset;
+        if (isCustomPosition) {
+            elementHeight = 0;
+            elementWidth = 0;
+        }
+        let topStyle;
+        let leftStyle;
+        if (placement === 'top') {
+            topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+        }
+        if (placement === 'bottom') {
+            topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+        }
+        if (placement === 'top' || placement === 'bottom') {
+            leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
+        }
+        if (placement === 'left') {
+            leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+        }
+        if (placement === 'right') {
+            leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+        }
+        if (placement === 'left' || placement === 'right') {
+            topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
+        }
+        /* Is tooltip outside the visible area */
+        if (this.autoPlacement && !disableAutoPlacement) {
+            const topEdge = topStyle;
+            const bottomEdge = topStyle + tooltipHeight;
+            const leftEdge = leftStyle;
+            const rightEdge = leftStyle + tooltipWidth;
+            const bodyHeight = window.innerHeight + scrollY;
+            const bodyWidth = document.body.clientWidth;
+            if (topEdge < 0 || bottomEdge > bodyHeight || leftEdge < 0 || rightEdge > bodyWidth) {
+                return false;
+            }
+        }
+        this.hostStyleTop = topStyle + 'px';
+        this.hostStyleLeft = leftStyle + 'px';
+        return true;
+    }
+    setZIndex() {
+        if (this.options['zIndex'] !== 0) {
+            this.hostStyleZIndex = this.options['zIndex'];
+        }
+    }
+    setPointerEvents() {
+        if (this.options['pointerEvents']) {
+            this.hostStylePointerEvents = this.options['pointerEvents'];
+        }
+    }
+    setCustomClass() {
+        if (this.options['tooltipClass']) {
+            this.options['tooltipClass'].split(' ').forEach((className) => {
+                this.renderer.addClass(this.elementRef.nativeElement, className);
+            });
+        }
+    }
+    setAnimationDuration() {
+        if (Number(this.options['animationDuration']) != this.options['animationDurationDefault']) {
+            this.hostStyleTransition = 'opacity ' + this.options['animationDuration'] + 'ms';
+        }
+    }
+    setStyles() {
+        this.setZIndex();
+        this.setPointerEvents();
+        this.setAnimationDuration();
+        this.hostClassShadow = this.options['shadow'];
+        this.hostClassLight = this.isThemeLight;
+        this.hostStyleMaxWidth = this.options['maxWidth'];
+        this.hostStyleWidth = this.options['width'] ? this.options['width'] : '';
+    }
+}
+GravityTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+GravityTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTooltipComponent, selector: "tooltip", inputs: { data: "data", show: "show" }, host: { listeners: { "transitionend": "transitionEnd($event)" }, properties: { "style.top": "this.hostStyleTop", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" }, classAttribute: "tooltip" }, ngImport: i0, template: "<div *ngIf=\"isThemeLight\" class=\"tooltip-arrow\"></div>\n\n<div *ngIf=\"options['contentType'] === 'template' else htmlOrStringTemplate\">\n  <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n</div>\n\n<ng-template #htmlOrStringTemplate>\n  <div [innerHTML]=\"value\"></div>\n</ng-template>\n", styles: [":host{max-width:200px;background-color:var(--bg-tooltip-primary);color:var(--on-bg-tooltip-primary);text-align:center;border-radius:6px;padding:5px 8px;position:absolute;pointer-events:none;z-index:1000;display:block;opacity:0;transition:opacity .3s;top:0;left:0}:host.tooltip-show{opacity:1}:host.tooltip-shadow{box-shadow:0 7px 15px -5px #0006}:host.tooltip-light.tooltip-shadow{box-shadow:0 5px 15px -5px #0006}:host.tooltip:after{content:\"\";position:absolute;border-style:solid}:host.tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--bg-tooltip-primary) transparent transparent transparent}:host.tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--bg-tooltip-primary) transparent}:host.tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--bg-tooltip-primary)}:host.tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--bg-tooltip-primary) transparent transparent}:host.tooltip-light:after{display:none}:host.tooltip-light{border:1px solid rgba(0,0,0,.06);background-color:#fff;color:#000}:host.tooltip-light .tooltip-arrow{position:absolute;width:10px;height:10px;transform:rotate(135deg);background-color:#00000012}:host.tooltip-light .tooltip-arrow:after{background-color:#fff;content:\"\";display:block;position:absolute;width:10px;height:10px}:host.tooltip-top.tooltip-light{margin-top:-2px}:host.tooltip-top.tooltip-light .tooltip-arrow{top:100%;left:50%;margin-top:-4px;margin-left:-5px;background:linear-gradient(to bottom left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-top.tooltip-light .tooltip-arrow:after{top:1px;right:1px}:host.tooltip-bottom.tooltip-light .tooltip-arrow{bottom:100%;left:50%;margin-bottom:-4px;margin-left:-5px;background:linear-gradient(to top right,rgba(0,0,0,.1) 50%,transparent 50%)}:host.tooltip-bottom.tooltip-light .tooltip-arrow:after{top:-1px;right:-1px}:host.tooltip-left.tooltip-light .tooltip-arrow{top:50%;left:100%;margin-top:-5px;margin-left:-4px;background:linear-gradient(to bottom right,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-left.tooltip-light .tooltip-arrow:after{top:1px;right:-1px}:host.tooltip-right.tooltip-light .tooltip-arrow{top:50%;right:100%;margin-top:-5px;margin-right:-4px;background:linear-gradient(to top left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-right.tooltip-light .tooltip-arrow:after{top:-1px;right:1px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tooltip', host: { 'class': 'tooltip' }, template: "<div *ngIf=\"isThemeLight\" class=\"tooltip-arrow\"></div>\n\n<div *ngIf=\"options['contentType'] === 'template' else htmlOrStringTemplate\">\n  <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n</div>\n\n<ng-template #htmlOrStringTemplate>\n  <div [innerHTML]=\"value\"></div>\n</ng-template>\n", styles: [":host{max-width:200px;background-color:var(--bg-tooltip-primary);color:var(--on-bg-tooltip-primary);text-align:center;border-radius:6px;padding:5px 8px;position:absolute;pointer-events:none;z-index:1000;display:block;opacity:0;transition:opacity .3s;top:0;left:0}:host.tooltip-show{opacity:1}:host.tooltip-shadow{box-shadow:0 7px 15px -5px #0006}:host.tooltip-light.tooltip-shadow{box-shadow:0 5px 15px -5px #0006}:host.tooltip:after{content:\"\";position:absolute;border-style:solid}:host.tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--bg-tooltip-primary) transparent transparent transparent}:host.tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--bg-tooltip-primary) transparent}:host.tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--bg-tooltip-primary)}:host.tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--bg-tooltip-primary) transparent transparent}:host.tooltip-light:after{display:none}:host.tooltip-light{border:1px solid rgba(0,0,0,.06);background-color:#fff;color:#000}:host.tooltip-light .tooltip-arrow{position:absolute;width:10px;height:10px;transform:rotate(135deg);background-color:#00000012}:host.tooltip-light .tooltip-arrow:after{background-color:#fff;content:\"\";display:block;position:absolute;width:10px;height:10px}:host.tooltip-top.tooltip-light{margin-top:-2px}:host.tooltip-top.tooltip-light .tooltip-arrow{top:100%;left:50%;margin-top:-4px;margin-left:-5px;background:linear-gradient(to bottom left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-top.tooltip-light .tooltip-arrow:after{top:1px;right:1px}:host.tooltip-bottom.tooltip-light .tooltip-arrow{bottom:100%;left:50%;margin-bottom:-4px;margin-left:-5px;background:linear-gradient(to top right,rgba(0,0,0,.1) 50%,transparent 50%)}:host.tooltip-bottom.tooltip-light .tooltip-arrow:after{top:-1px;right:-1px}:host.tooltip-left.tooltip-light .tooltip-arrow{top:50%;left:100%;margin-top:-5px;margin-left:-4px;background:linear-gradient(to bottom right,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-left.tooltip-light .tooltip-arrow:after{top:1px;right:-1px}:host.tooltip-right.tooltip-light .tooltip-arrow{top:50%;right:100%;margin-top:-5px;margin-right:-4px;background:linear-gradient(to top left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-right.tooltip-light .tooltip-arrow:after{top:-1px;right:1px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+                type: Input
+            }], hostStyleTop: [{
+                type: HostBinding,
+                args: ['style.top']
+            }], hostStyleLeft: [{
+                type: HostBinding,
+                args: ['style.left']
+            }], hostStyleZIndex: [{
+                type: HostBinding,
+                args: ['style.z-index']
+            }], hostStyleTransition: [{
+                type: HostBinding,
+                args: ['style.transition']
+            }], hostStyleWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostStyleMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], hostStylePointerEvents: [{
+                type: HostBinding,
+                args: ['style.pointer-events']
+            }], hostClassShow: [{
+                type: HostBinding,
+                args: ['class.tooltip-show']
+            }], hostClassShadow: [{
+                type: HostBinding,
+                args: ['class.tooltip-shadow']
+            }], hostClassLight: [{
+                type: HostBinding,
+                args: ['class.tooltip-light']
+            }], transitionEnd: [{
+                type: HostListener,
+                args: ['transitionend', ['$event']]
+            }], show: [{
+                type: Input
+            }] } });
 
-class GravityDesignSystemComponent {
-}
-GravityDesignSystemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GravityDesignSystemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDesignSystemComponent, selector: "lib-gravity-design-system", ngImport: i0, template: `
-    <p>
-      gravity-design-system works!
-    </p>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-gravity-design-system', template: `
-    <p>
-      gravity-design-system works!
-    </p>
-  ` }]
+/**
+ * This is not a real service, but it looks like it from the outside.
+ * It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
+ */
+const TooltipOptionsService = new InjectionToken('TooltipOptions');
+
+const defaultOptions = {
+    'placement': 'top',
+    'autoPlacement': true,
+    'contentType': 'string',
+    'showDelay': 0,
+    'hideDelay': 300,
+    'hideDelayMobile': 0,
+    'hideDelayTouchscreen': 0,
+    'zIndex': 0,
+    'animationDuration': 300,
+    'animationDurationDefault': 300,
+    'trigger': 'hover',
+    'tooltipClass': '',
+    'display': true,
+    'displayMobile': true,
+    'displayTouchscreen': true,
+    'shadow': true,
+    'theme': 'dark',
+    'offset': 8,
+    'maxWidth': '',
+    'id': false,
+    'hideDelayAfterClick': 2000
+};
+const backwardCompatibilityOptions = {
+    'delay': 'showDelay',
+    'show-delay': 'showDelay',
+    'hide-delay': 'hideDelay',
+    'hide-delay-mobile': 'hideDelayTouchscreen',
+    'hideDelayMobile': 'hideDelayTouchscreen',
+    'z-index': 'zIndex',
+    'animation-duration': 'animationDuration',
+    'animation-duration-default': 'animationDurationDefault',
+    'tooltip-class': 'tooltipClass',
+    'display-mobile': 'displayTouchscreen',
+    'displayMobile': 'displayTouchscreen',
+    'max-width': 'maxWidth'
+};
+
+class GravityTooltipDirective {
+    set options(value) {
+        if (value && defaultOptions) {
+            this._options = value;
+        }
+    }
+    get options() {
+        return this._options;
+    }
+    // Content type
+    set contentTypeBackwardCompatibility(value) {
+        if (value) {
+            this._contentType = value;
+        }
+    }
+    set contentType(value) {
+        if (value) {
+            this._contentType = value;
+        }
+    }
+    get contentType() {
+        return this._contentType;
+    }
+    // z-index
+    set zIndexBackwardCompatibility(value) {
+        if (value) {
+            this._zIndex = value;
+        }
+    }
+    set zIndex(value) {
+        if (value) {
+            this._zIndex = value;
+        }
+    }
+    get zIndex() {
+        return this._zIndex;
+    }
+    // Animation duration
+    set animationDurationBackwardCompatibility(value) {
+        if (value) {
+            this._animationDuration = value;
+        }
+    }
+    set animationDuration(value) {
+        if (value) {
+            this._animationDuration = value;
+        }
+    }
+    get animationDuration() {
+        return this._animationDuration;
+    }
+    // Tooltip class
+    set tooltipClassBackwardCompatibility(value) {
+        if (value) {
+            this._tooltipClass = value;
+        }
+    }
+    set tooltipClass(value) {
+        if (value) {
+            this._tooltipClass = value;
+        }
+    }
+    get tooltipClass() {
+        return this._tooltipClass;
+    }
+    // Max width
+    set maxWidthBackwardCompatibility(value) {
+        if (value) {
+            this._maxWidth = value;
+        }
+    }
+    set maxWidth(value) {
+        if (value) {
+            this._maxWidth = value;
+        }
+    }
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    // Show delay
+    set showDelayBackwardCompatibility(value) {
+        if (value) {
+            this._showDelay = value;
+        }
+    }
+    set showDelay(value) {
+        if (value) {
+            this._showDelay = value;
+        }
+    }
+    get showDelay() {
+        return this._showDelay;
+    }
+    // Hide delay
+    set hideDelayBackwardCompatibility(value) {
+        if (value) {
+            this._hideDelay = value;
+        }
+    }
+    set hideDelay(value) {
+        if (value) {
+            this._hideDelay = value;
+        }
+    }
+    get hideDelay() {
+        return this._hideDelay;
+    }
+    get isTooltipDestroyed() {
+        return this.componentRef && this.componentRef.hostView.destroyed;
+    }
+    get destroyDelay() {
+        if (this._destroyDelay) {
+            return this._destroyDelay;
+        }
+        else {
+            return Number(this.getHideDelay()) + Number(this.options['animationDuration']);
+        }
+    }
+    set destroyDelay(value) {
+        this._destroyDelay = value;
+    }
+    get tooltipPosition() {
+        if (this.options['position']) {
+            return this.options['position'];
+        }
+        else {
+            return this.elementPosition;
+        }
+    }
+    constructor(initOptions, elementRef, componentFactoryResolver, appRef, injector) {
+        this.initOptions = initOptions;
+        this.elementRef = elementRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.appRef = appRef;
+        this.injector = injector;
+        this._options = {};
+        this._contentType = "string";
+        this.events = new EventEmitter();
+    }
+    onMouseEnter() {
+        if (this.isDisplayOnHover == false) {
+            return;
+        }
+        this.show();
+    }
+    onMouseLeave() {
+        if (this.options['trigger'] === 'hover') {
+            this.destroyTooltip();
+        }
+    }
+    onClick() {
+        if (this.isDisplayOnClick == false) {
+            return;
+        }
+        this.show();
+        this.hideAfterClickTimeoutId = window.setTimeout(() => {
+            this.destroyTooltip();
+        }, this.options['hideDelayAfterClick']);
+    }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        this.initOptions = this.renameProperties(this.initOptions);
+        let changedOptions = this.getProperties(changes);
+        changedOptions = this.renameProperties(changedOptions);
+        this.applyOptionsDefault(defaultOptions, changedOptions);
+    }
+    ngOnDestroy() {
+        this.destroyTooltip({
+            fast: true
+        });
+        if (this.componentSubscribe) {
+            this.componentSubscribe.unsubscribe();
+        }
+    }
+    getShowDelay() {
+        return this.options['showDelay'];
+    }
+    getHideDelay() {
+        const hideDelay = this.options['hideDelay'];
+        const hideDelayTouchscreen = this.options['hideDelayTouchscreen'];
+        return this.isTouchScreen ? hideDelayTouchscreen : hideDelay;
+    }
+    getProperties(changes) {
+        let directiveProperties = {};
+        let customProperties = {};
+        let allProperties;
+        for (var prop in changes) {
+            if (prop !== 'options' && prop !== 'tooltipValue') {
+                directiveProperties[prop] = changes[prop].currentValue;
+            }
+            if (prop === 'options') {
+                customProperties = changes[prop].currentValue;
+            }
+        }
+        allProperties = Object.assign({}, customProperties, directiveProperties);
+        return allProperties;
+    }
+    renameProperties(options) {
+        for (var prop in options) {
+            if (backwardCompatibilityOptions[prop]) {
+                options[backwardCompatibilityOptions[prop]] = options[prop];
+                delete options[prop];
+            }
+        }
+        return options;
+    }
+    getElementPosition() {
+        this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect();
+    }
+    createTooltip() {
+        this.clearTimeouts();
+        this.getElementPosition();
+        this.createTimeoutId = window.setTimeout(() => {
+            this.appendComponentToBody(GravityTooltipComponent);
+        }, this.getShowDelay());
+        this.showTimeoutId = window.setTimeout(() => {
+            this.showTooltipElem();
+        }, this.getShowDelay());
+    }
+    destroyTooltip(options = {
+        fast: false
+    }) {
+        this.clearTimeouts();
+        if (this.isTooltipDestroyed == false) {
+            this.hideTimeoutId = window.setTimeout(() => {
+                this.hideTooltip();
+            }, options.fast ? 0 : this.getHideDelay());
+            this.destroyTimeoutId = window.setTimeout(() => {
+                if (!this.componentRef || this.isTooltipDestroyed) {
+                    return;
+                }
+                this.appRef.detachView(this.componentRef.hostView);
+                this.componentRef.destroy();
+                this.events.emit({
+                    type: 'hidden',
+                    position: this.tooltipPosition
+                });
+            }, options.fast ? 0 : this.destroyDelay);
+        }
+    }
+    showTooltipElem() {
+        this.clearTimeouts();
+        this.componentRef.instance.show = true;
+        this.events.emit({
+            type: 'show',
+            position: this.tooltipPosition
+        });
+    }
+    hideTooltip() {
+        if (!this.componentRef || this.isTooltipDestroyed) {
+            return;
+        }
+        this.componentRef.instance.show = false;
+        this.events.emit({
+            type: 'hide',
+            position: this.tooltipPosition
+        });
+    }
+    appendComponentToBody(component) {
+        this.componentRef = this.componentFactoryResolver
+            .resolveComponentFactory(component)
+            .create(this.injector);
+        this.componentRef.instance.data = {
+            value: this.tooltipValue,
+            element: this.elementRef.nativeElement,
+            elementPosition: this.tooltipPosition,
+            options: this.options
+        };
+        this.appRef.attachView(this.componentRef.hostView);
+        const domElem = this.componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        this.componentSubscribe = this.componentRef.instance.events.subscribe((event) => {
+            this.handleEvents(event);
+        });
+    }
+    clearTimeouts() {
+        if (this.createTimeoutId) {
+            clearTimeout(this.createTimeoutId);
+        }
+        if (this.showTimeoutId) {
+            clearTimeout(this.showTimeoutId);
+        }
+        if (this.hideTimeoutId) {
+            clearTimeout(this.hideTimeoutId);
+        }
+        if (this.destroyTimeoutId) {
+            clearTimeout(this.destroyTimeoutId);
+        }
+    }
+    get isDisplayOnHover() {
+        if (this.options['display'] == false) {
+            return false;
+        }
+        if (this.options['displayTouchscreen'] == false && this.isTouchScreen) {
+            return false;
+        }
+        return this.options['trigger'] === 'hover';
+    }
+    get isDisplayOnClick() {
+        if (this.options['display'] == false) {
+            return false;
+        }
+        if (this.options['displayTouchscreen'] == false && this.isTouchScreen) {
+            return false;
+        }
+        return this.options['trigger'] == 'click';
+    }
+    get isTouchScreen() {
+        var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
+        var mq = function (query) {
+            return window.matchMedia(query).matches;
+        };
+        if (('ontouchstart' in window)) {
+            return true;
+        }
+        // include the 'heartz' as a way to have a non matching MQ to help terminate the join
+        // https://git.io/vznFH
+        var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
+        return mq(query);
+    }
+    applyOptionsDefault(defaultOptions, options) {
+        this.options = Object.assign({}, defaultOptions, this.initOptions || {}, this.options, options);
+    }
+    handleEvents(event) {
+        if (event.type === 'shown') {
+            this.events.emit({
+                type: 'shown',
+                position: this.tooltipPosition
+            });
+        }
+    }
+    show() {
+        if (!this.tooltipValue) {
+            return;
+        }
+        if (!this.componentRef || this.isTooltipDestroyed) {
+            this.createTooltip();
+        }
+        else if (!this.isTooltipDestroyed) {
+            this.showTooltipElem();
+        }
+    }
+    hide() {
+        this.destroyTooltip();
+    }
+}
+GravityTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipDirective, deps: [{ token: TooltipOptionsService, optional: true }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+GravityTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: GravityTooltipDirective, selector: "[tooltip]", inputs: { options: "options", tooltipValue: ["tooltip", "tooltipValue"], placement: "placement", autoPlacement: "autoPlacement", contentTypeBackwardCompatibility: ["content-type", "contentTypeBackwardCompatibility"], contentType: "contentType", hideDelayMobile: ["hide-delay-mobile", "hideDelayMobile"], hideDelayTouchscreen: "hideDelayTouchscreen", zIndexBackwardCompatibility: ["z-index", "zIndexBackwardCompatibility"], zIndex: "zIndex", animationDurationBackwardCompatibility: ["animation-duration", "animationDurationBackwardCompatibility"], animationDuration: "animationDuration", trigger: "trigger", tooltipClassBackwardCompatibility: ["tooltip-class", "tooltipClassBackwardCompatibility"], tooltipClass: "tooltipClass", display: "display", displayMobile: ["display-mobile", "displayMobile"], displayTouchscreen: "displayTouchscreen", shadow: "shadow", theme: "theme", offset: "offset", width: "width", maxWidthBackwardCompatibility: ["max-width", "maxWidthBackwardCompatibility"], maxWidth: "maxWidth", id: "id", showDelayBackwardCompatibility: ["show-delay", "showDelayBackwardCompatibility"], showDelay: "showDelay", hideDelayBackwardCompatibility: ["hide-delay", "hideDelayBackwardCompatibility"], hideDelay: "hideDelay", hideDelayAfterClick: "hideDelayAfterClick", pointerEvents: "pointerEvents", position: "position" }, outputs: { events: "events" }, host: { listeners: { "focusin": "onMouseEnter()", "mouseenter": "onMouseEnter()", "focusout": "onMouseLeave()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, exportAs: ["tooltip"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tooltip]',
+                    exportAs: 'tooltip',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TooltipOptionsService]
+                }] }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; }, propDecorators: { options: [{
+                type: Input,
+                args: ['options']
+            }], tooltipValue: [{
+                type: Input,
+                args: ['tooltip']
+            }], placement: [{
+                type: Input,
+                args: ['placement']
+            }], autoPlacement: [{
+                type: Input,
+                args: ['autoPlacement']
+            }], contentTypeBackwardCompatibility: [{
+                type: Input,
+                args: ['content-type']
+            }], contentType: [{
+                type: Input,
+                args: ['contentType']
+            }], hideDelayMobile: [{
+                type: Input,
+                args: ['hide-delay-mobile']
+            }], hideDelayTouchscreen: [{
+                type: Input,
+                args: ['hideDelayTouchscreen']
+            }], zIndexBackwardCompatibility: [{
+                type: Input,
+                args: ['z-index']
+            }], zIndex: [{
+                type: Input,
+                args: ['zIndex']
+            }], animationDurationBackwardCompatibility: [{
+                type: Input,
+                args: ['animation-duration']
+            }], animationDuration: [{
+                type: Input,
+                args: ['animationDuration']
+            }], trigger: [{
+                type: Input,
+                args: ['trigger']
+            }], tooltipClassBackwardCompatibility: [{
+                type: Input,
+                args: ['tooltip-class']
+            }], tooltipClass: [{
+                type: Input,
+                args: ['tooltipClass']
+            }], display: [{
+                type: Input,
+                args: ['display']
+            }], displayMobile: [{
+                type: Input,
+                args: ['display-mobile']
+            }], displayTouchscreen: [{
+                type: Input,
+                args: ['displayTouchscreen']
+            }], shadow: [{
+                type: Input,
+                args: ['shadow']
+            }], theme: [{
+                type: Input,
+                args: ['theme']
+            }], offset: [{
+                type: Input,
+                args: ['offset']
+            }], width: [{
+                type: Input,
+                args: ['width']
+            }], maxWidthBackwardCompatibility: [{
+                type: Input,
+                args: ['max-width']
+            }], maxWidth: [{
+                type: Input,
+                args: ['maxWidth']
+            }], id: [{
+                type: Input,
+                args: ['id']
+            }], showDelayBackwardCompatibility: [{
+                type: Input,
+                args: ['show-delay']
+            }], showDelay: [{
+                type: Input,
+                args: ['showDelay']
+            }], hideDelayBackwardCompatibility: [{
+                type: Input,
+                args: ['hide-delay']
+            }], hideDelay: [{
+                type: Input,
+                args: ['hideDelay']
+            }], hideDelayAfterClick: [{
+                type: Input,
+                args: ['hideDelayAfterClick']
+            }], pointerEvents: [{
+                type: Input,
+                args: ['pointerEvents']
+            }], position: [{
+                type: Input,
+                args: ['position']
+            }], events: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['focusin']
+            }, {
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['focusout']
+            }, {
+                type: HostListener,
+                args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class GravityTooltipModule {
+    static forRoot(initOptions) {
+        return {
+            ngModule: GravityTooltipModule,
+            providers: [
+                {
+                    provide: TooltipOptionsService,
+                    useValue: initOptions
+                }
+            ]
+        };
+    }
+}
+GravityTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GravityTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, declarations: [GravityTooltipDirective,
+        GravityTooltipComponent], imports: [CommonModule], exports: [GravityTooltipDirective,
+        GravityTooltipComponent] });
+GravityTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        GravityTooltipDirective,
+                        GravityTooltipComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        GravityTooltipDirective,
+                        GravityTooltipComponent
+                    ]
+                }]
         }] });
 
+class GravityCalendarComponent {
+    constructor() {
+        this.calendarResponse = new EventEmitter();
+        this.calendarOpened = false;
+        this.focusInput = false;
+        this.selectedDate = '';
+    }
+    ngOnInit() {
+        this.data.required = this.data.required ? this.data.required : false;
+        this.data.state = this.data.state ? this.data.state : "enabled";
+        if (this.data.supportText) {
+            this.data.supportText.type = this.data.supportText.type ? this.data.supportText.type : "neutro";
+        }
+        if (this.data.icon) {
+            this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
+        }
+        if (this.data.dates) {
+            if (this.data.dates.defaultDays) {
+                this.updateDate(null, new Date(new Date().setDate(new Date().getDate() - this.data.dates.defaultDays)));
+            }
+            if (this.data.dates.customDate) {
+                this.updateDate(null, this.data.dates.customDate);
+            }
+            if (this.data.dates.minDate) {
+                this.minDate = {};
+                this.minDate.year = this.data.dates.minDate.getUTCFullYear();
+                this.minDate.month = (this.data.dates.minDate.getUTCMonth() + 1);
+                this.minDate.day = this.data.dates.minDate.getUTCDate();
+            }
+            if (this.data.dates.maxDate) {
+                if (this.data.dates.maxDate == 'today') {
+                    this.data.dates.maxDate = new Date();
+                }
+                this.maxDate = {};
+                this.maxDate.year = this.data.dates.maxDate.getUTCFullYear();
+                this.maxDate.month = (this.data.dates.maxDate.getUTCMonth() + 1);
+                this.maxDate.day = this.data.dates.maxDate.getUTCDate();
+            }
+        }
+    }
+    updateDate($event, customDate) {
+        if ($event) {
+            this.selectedDate = GravityCalendarComponent.formatNgbDate($event);
+            this.calendarResponse.emit(new Date($event.year, ($event.month - 1), $event.day));
+        }
+        else if (customDate) {
+            this.selectedDate = GravityCalendarComponent.formatTSDate(customDate);
+            this.calendarResponse.emit(customDate);
+        }
+    }
+    static formatNgbDate(ngbDate) {
+        if (!ngbDate) {
+            return null;
+        }
+        return [
+            (ngbDate.month < 10 ? ('0' + ngbDate.month) : ngbDate.month),
+            (ngbDate.day < 10 ? ('0' + ngbDate.day) : ngbDate.day),
+            ngbDate.year
+        ].join('/');
+    }
+    static formatTSDate(date) {
+        if (!date) {
+            return null;
+        }
+        return [
+            ((date.getUTCMonth() + 1) < 10 ? ('0' + (date.getUTCMonth() + 1)) : (date.getUTCMonth() + 1)),
+            (date.getUTCDate() < 10 ? ('0' + date.getUTCDate()) : date.getUTCDate()),
+            date.getUTCFullYear()
+        ].join('/');
+    }
+}
+GravityCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravityCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { data: "data" }, outputs: { calendarResponse: "calendarResponse" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-calendar\">\n  <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n         [class.focused]=\"focusInput || calendarOpened\" [class.full]=\"selectedDate && !focusInput && !calendarOpened\">\n    {{data.label}}\n    <ng-container *ngIf=\"data.required\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'readonly'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'disabled'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n    </ng-container>\n  </label>\n  <div class=\"calendar-field {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n       [class.focused]=\"focusInput || calendarOpened\" [class.full]=\"selectedDate && !focusInput && !calendarOpened\">\n    <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n    <input [attr.data-cy]=\"data.cypressTag\"\n           [disabled]=\"data.state == 'disabled' ? true : null\"\n           [readonly]=\"data.state != 'disabled' ? true : null\"\n           [value]=\"selectedDate\"\n\n           (blur)=\"focusInput = false\"\n           (closed)=\"calendarOpened = false\"\n           (dateSelect)=\"updateDate($event)\"\n           (focus)=\"focusInput = true\"\n\n           class=\"hr-label md-regular\"\n           ngbDatepicker\n           placeholder=\"Select your date\"\n\n           [container]=\"'body'\"\n           [datepickerClass]=\"'gravity-datepicker-dialog'\"\n           [maxDate]=\"maxDate ? maxDate : null\"\n           [minDate]=\"minDate ? minDate : null\"\n           [navigation]=\"'arrows'\"\n           [showWeekNumbers]=\"true\"\n\n           #datePicker=\"ngbDatepicker\">\n    <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && data.state == 'enabled'\"></span>\n    <span (click)=\"datePicker.close(); calendarOpened = false\" *ngIf=\"calendarOpened && data.state == 'enabled'\"></span>\n    <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n  </div>\n  <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n    {{data.supportText.content}}\n  </p>\n</div>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}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.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.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)}.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;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem;position:relative}.calendar-field svg-icon{height:1rem;line-height:0;width:1rem}.calendar-field svg-icon.placement-left{margin-right:.5rem}.calendar-field svg-icon.placement-right{margin-left:.5rem}.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%}.calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.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)}.calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.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)}.calendar-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.calendar-field.full.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)}.calendar-field.full.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.calendar-field.full.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)}.calendar-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.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)}.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: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-calendar', template: "<div class=\"gravity-calendar\">\n  <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n         [class.focused]=\"focusInput || calendarOpened\" [class.full]=\"selectedDate && !focusInput && !calendarOpened\">\n    {{data.label}}\n    <ng-container *ngIf=\"data.required\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'readonly'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"data.state == 'disabled'\">\n      <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n      <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n    </ng-container>\n  </label>\n  <div class=\"calendar-field {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n       [class.focused]=\"focusInput || calendarOpened\" [class.full]=\"selectedDate && !focusInput && !calendarOpened\">\n    <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n    <input [attr.data-cy]=\"data.cypressTag\"\n           [disabled]=\"data.state == 'disabled' ? true : null\"\n           [readonly]=\"data.state != 'disabled' ? true : null\"\n           [value]=\"selectedDate\"\n\n           (blur)=\"focusInput = false\"\n           (closed)=\"calendarOpened = false\"\n           (dateSelect)=\"updateDate($event)\"\n           (focus)=\"focusInput = true\"\n\n           class=\"hr-label md-regular\"\n           ngbDatepicker\n           placeholder=\"Select your date\"\n\n           [container]=\"'body'\"\n           [datepickerClass]=\"'gravity-datepicker-dialog'\"\n           [maxDate]=\"maxDate ? maxDate : null\"\n           [minDate]=\"minDate ? minDate : null\"\n           [navigation]=\"'arrows'\"\n           [showWeekNumbers]=\"true\"\n\n           #datePicker=\"ngbDatepicker\">\n    <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && data.state == 'enabled'\"></span>\n    <span (click)=\"datePicker.close(); calendarOpened = false\" *ngIf=\"calendarOpened && data.state == 'enabled'\"></span>\n    <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n      <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n    </ng-container>\n  </div>\n  <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n    {{data.supportText.content}}\n  </p>\n</div>\n\n<ng-template #icons>\n  <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n            *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}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.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.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)}.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;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem;position:relative}.calendar-field svg-icon{height:1rem;line-height:0;width:1rem}.calendar-field svg-icon.placement-left{margin-right:.5rem}.calendar-field svg-icon.placement-right{margin-left:.5rem}.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%}.calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.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)}.calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.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)}.calendar-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.calendar-field.full.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)}.calendar-field.full.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.calendar-field.full.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)}.calendar-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.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)}.calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
+        }], propDecorators: { calendarResponse: [{
+                type: Output
+            }], data: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement', { static: false }]
+            }] } });
+
+class GravityRadioButtonComponent {
+    constructor() {
+        this.checked = false;
+        this.disabled = false;
+        this.change = new EventEmitter();
+    }
+    onChange(event) {
+        this.change.emit(event);
+    }
+}
+GravityRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravityRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityRadioButtonComponent, selector: "gravity-radio-button", inputs: { checked: "checked", value: "value", disabled: "disabled", name: "name" }, outputs: { change: "change" }, ngImport: i0, template: "<p-radio\n    animation=\"smooth\"\n    name=\"icon\"\n    outline=\"outline\"\n    shape=\"round\"\n\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n\n    (change)=\"onChange($event)\">\n  <ng-content></ng-content>\n</p-radio>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.NgxPrettyRadioComponent, selector: "ngx-pretty-radio:not([will-change]), p-radio:not([will-change])", inputs: ["checked", "disabled", "value", "lock"], outputs: ["change"], exportAs: ["ngxPrettyRadio"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-radio-button', template: "<p-radio\n    animation=\"smooth\"\n    name=\"icon\"\n    outline=\"outline\"\n    shape=\"round\"\n\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [value]=\"value\"\n\n    (change)=\"onChange($event)\">\n  <ng-content></ng-content>\n</p-radio>\n\n\n" }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class GravitySwitchComponent {
+    constructor() {
+        this.disabled = false;
+    }
+}
+GravitySwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravitySwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { disabled: "disabled" }, ngImport: i0, template: "<p-checkbox [disabled]=\"disabled\" isSwitch=\"true\" stroke=\"fill\">\n  <ng-content></ng-content>\n</p-checkbox>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-switch', template: "<p-checkbox [disabled]=\"disabled\" isSwitch=\"true\" stroke=\"fill\">\n  <ng-content></ng-content>\n</p-checkbox>\n" }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+class GravityCheckboxComponent {
+    constructor() {
+        this.disabled = false;
+        this.checked = false;
+    }
+}
+GravityCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravityCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { value: "value", disabled: "disabled", checked: "checked" }, ngImport: i0, template: "<p-checkbox [checked]=\"checked\" color=\"default\" [disabled]=\"disabled\" shape=\"curve\" stroke=\"fill\" [value]=\"value\">\n  <svg-icon p-svg name=\"check\"></svg-icon>\n  <ng-content></ng-content>\n</p-checkbox>\n", styles: ["svg-icon{padding:2%}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: i1$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }, { kind: "directive", type: i1$1.NgxPrettySvgDirective, selector: "[pSvg], [p-svg]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-checkbox', template: "<p-checkbox [checked]=\"checked\" color=\"default\" [disabled]=\"disabled\" shape=\"curve\" stroke=\"fill\" [value]=\"value\">\n  <svg-icon p-svg name=\"check\"></svg-icon>\n  <ng-content></ng-content>\n</p-checkbox>\n", styles: ["svg-icon{padding:2%}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }] } });
+
+class GravityIconComponent {
+}
+GravityIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GravityIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityIconComponent, selector: "gravity-icon", inputs: { iconName: "iconName" }, ngImport: i0, template: "<svg-icon name=\"{{iconName}}\"></svg-icon>\n", styles: ["svg-icon ::ng-deep svg{--icon-color: var(--icon-active-primary);height:1rem;width:1rem}svg-icon:hover,svg-icon *:hover,svg-icon ::ng-deep *:hover{--icon-color: var(--icon-hover-primary)}\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: "15.1.5", ngImport: i0, type: GravityIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-icon', template: "<svg-icon name=\"{{iconName}}\"></svg-icon>\n", styles: ["svg-icon ::ng-deep svg{--icon-color: var(--icon-active-primary);height:1rem;width:1rem}svg-icon:hover,svg-icon *:hover,svg-icon ::ng-deep *:hover{--icon-color: var(--icon-hover-primary)}\n"] }]
+        }], propDecorators: { iconName: [{
+                type: Input
+            }] } });
+
 class GravityDesignSystemModule {
 }
 GravityDesignSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityDesignSystemComponent], exports: [GravityDesignSystemComponent] });
-GravityDesignSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule });
+GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityButtonComponent,
+        GravityCalendarComponent,
+        GravityCheckboxComponent,
+        GravityDropdownListComponent,
+        GravityIconComponent,
+        GravityRadioButtonComponent,
+        GravitySwitchComponent,
+        GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$1.AngularSvgIconPreloaderModule, CommonModule,
+        FormsModule, GravityTooltipModule, NgbDatepickerModule,
+        NgSelectModule,
+        NgxPrettyCheckboxModule,
+        ReactiveFormsModule], exports: [GravityButtonComponent,
+        GravityCalendarComponent,
+        GravityCheckboxComponent,
+        GravityDropdownListComponent,
+        GravityIconComponent,
+        GravityRadioButtonComponent,
+        GravitySwitchComponent,
+        GravityTextFieldComponent,
+        GravityTooltipModule] });
+GravityDesignSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
+        AngularSvgIconPreloaderModule.forRoot({
+            configUrl: './assets/gravity/json/icons.json',
+        }),
+        CommonModule,
+        FormsModule,
+        GravityTooltipModule.forRoot({}),
+        NgbDatepickerModule,
+        NgSelectModule,
+        NgxPrettyCheckboxModule,
+        ReactiveFormsModule, GravityTooltipModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        GravityDesignSystemComponent
+                        GravityButtonComponent,
+                        GravityCalendarComponent,
+                        GravityCheckboxComponent,
+                        GravityDropdownListComponent,
+                        GravityIconComponent,
+                        GravityRadioButtonComponent,
+                        GravitySwitchComponent,
+                        GravityTextFieldComponent
+                    ],
+                    imports: [
+                        AngularSvgIconModule.forRoot(),
+                        AngularSvgIconPreloaderModule.forRoot({
+                            configUrl: './assets/gravity/json/icons.json',
+                        }),
+                        CommonModule,
+                        FormsModule,
+                        GravityTooltipModule.forRoot({}),
+                        NgbDatepickerModule,
+                        NgSelectModule,
+                        NgxPrettyCheckboxModule,
+                        ReactiveFormsModule
                     ],
                     exports: [
-                        GravityDesignSystemComponent
+                        GravityButtonComponent,
+                        GravityCalendarComponent,
+                        GravityCheckboxComponent,
+                        GravityDropdownListComponent,
+                        GravityIconComponent,
+                        GravityRadioButtonComponent,
+                        GravitySwitchComponent,
+                        GravityTextFieldComponent,
+                        GravityTooltipModule
                     ]
                 }]
         }] });
@@ -52,5 +1122,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GravityDesignSystemComponent, GravityDesignSystemModule, GravityDesignSystemService };
+export { GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDropdownListComponent, GravityIconComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
 //# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map