@progressio_resources/gravity-design-system 1.0.10 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/esm2020/lib/components/gravity-calendar/gravity-calendar.component.mjs +59 -38
  2. package/esm2020/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +21 -24
  3. package/esm2020/lib/components/gravity-icon/gravity-icon.component.mjs +5 -3
  4. package/esm2020/lib/components/gravity-switch/gravity-switch.component.mjs +18 -7
  5. package/esm2020/lib/components/gravity-text-field/gravity-text-field.component.mjs +24 -25
  6. package/fesm2015/progressio_resources-gravity-design-system.mjs +134 -104
  7. package/fesm2015/progressio_resources-gravity-design-system.mjs.map +1 -1
  8. package/fesm2020/progressio_resources-gravity-design-system.mjs +134 -104
  9. package/fesm2020/progressio_resources-gravity-design-system.mjs.map +1 -1
  10. package/lib/components/gravity-calendar/gravity-calendar.component.d.ts +18 -10
  11. package/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.d.ts +9 -10
  12. package/lib/components/gravity-icon/gravity-icon.component.d.ts +2 -1
  13. package/lib/components/gravity-switch/gravity-switch.component.d.ts +15 -3
  14. package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +4 -4
  15. package/package.json +2 -2
  16. package/src/lib/styles/_datepicker.scss +57 -36
  17. package/src/lib/styles/overwrite/pretty-checkbox/_variables.scss +0 -2
  18. package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_general.scss +9 -7
  19. package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_mixin.scss +1 -1
package/fesm2015/progressio_resources-gravity-design-system.mjs CHANGED
@@ -1,18 +1,17 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable } from '@angular/core';
3
- import * as i2 from '@angular/common';
3
+ import * as i1$1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import * as i3 from '@angular/forms';
6
5
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
7
6
  import * as i1 from 'angular-svg-icon';
8
7
  import { AngularSvgIconModule } from 'angular-svg-icon';
9
- import * as i4 from '@ng-select/ng-select';
8
+ import * as i2 from '@ng-select/ng-select';
10
9
  import { NgSelectModule } from '@ng-select/ng-select';
11
- import * as i2$1 from 'angular-svg-icon-preloader';
10
+ import * as i2$2 from 'angular-svg-icon-preloader';
12
11
  import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
13
- import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
12
+ import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
14
13
  import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
15
- import * as i1$2 from 'ngx-pretty-checkbox';
14
+ import * as i2$1 from 'ngx-pretty-checkbox';
16
15
  import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
17
16
 
18
17
  class GravityButtonComponent {
@@ -25,7 +24,7 @@ class GravityButtonComponent {
25
24
  }
26
25
  }
27
26
  GravityButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
28
- 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;cursor:pointer;font-size:.9375rem;font-weight:700;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:100%}.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"] }] });
27
+ 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;cursor:pointer;font-size:.9375rem;font-weight:700;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:100%}.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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
29
28
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, decorators: [{
30
29
  type: Component,
31
30
  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;cursor:pointer;font-size:.9375rem;font-weight:700;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:100%}.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"] }]
@@ -33,42 +32,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
33
32
  type: Input
34
33
  }] } });
35
34
 
35
+ class GravityIconComponent {
36
+ }
37
+ GravityIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
38
+ GravityIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityIconComponent, selector: "gravity-icon", inputs: { iconName: "iconName", hoverIcon: "hoverIcon" }, ngImport: i0, template: "<svg-icon class=\"{{hoverIcon ? 'with-hover' : ''}}\" name=\"{{iconName}}\"></svg-icon>\n", styles: ["svg-icon{--icon-height: 1rem;--icon-width: 1rem;height:var(--icon-height);line-height:0;width:var(--icon-width)}svg-icon ::ng-deep svg{--icon-color: var(--icon-active-primary);height:var(--icon-height);line-height:0;width:var(--icon-width)}svg-icon.with-hover:hover,svg-icon.with-hover ::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"] }] });
39
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, decorators: [{
40
+ type: Component,
41
+ args: [{ selector: 'gravity-icon', template: "<svg-icon class=\"{{hoverIcon ? 'with-hover' : ''}}\" name=\"{{iconName}}\"></svg-icon>\n", styles: ["svg-icon{--icon-height: 1rem;--icon-width: 1rem;height:var(--icon-height);line-height:0;width:var(--icon-width)}svg-icon ::ng-deep svg{--icon-color: var(--icon-active-primary);height:var(--icon-height);line-height:0;width:var(--icon-width)}svg-icon.with-hover:hover,svg-icon.with-hover ::ng-deep *:hover{--icon-color: var(--icon-hover-primary)}\n"] }]
42
+ }], propDecorators: { iconName: [{
43
+ type: Input
44
+ }], hoverIcon: [{
45
+ type: Input
46
+ }] } });
47
+
36
48
  class GravityDropdownListComponent {
37
49
  constructor() {
38
- this.selectedIdResponse = new EventEmitter();
50
+ this.selectedItemResponse = new EventEmitter();
39
51
  this.dropdownOpen = false;
40
52
  }
41
53
  ngOnInit() {
42
- this.data.ngSelectConfig.placeholder = !this.data.ngSelectConfig.placeholder || this.data.ngSelectConfig.placeholder == '' ? 'All' : this.data.ngSelectConfig.placeholder;
43
- this.data.ngSelectConfig.clearable = !this.data.ngSelectConfig.clearable ? false : this.data.ngSelectConfig.clearable;
44
54
  this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
45
- this.data.required = this.data.required ? this.data.required : false;
46
55
  this.data.state = this.data.state ? this.data.state : "enabled";
47
- this.selectedId = this.data.ngSelectConfig.customId ? this.data.ngSelectConfig.items.find((item) => item.id == this.data.ngSelectConfig.customId).id : undefined;
48
- if (this.selectedId) {
49
- this.selectedIdResponse.emit(this.selectedId);
50
- }
51
- if (this.data.supportText) {
52
- this.data.supportText.type = this.data.supportText.type ? this.data.supportText.type : "neutro";
53
- }
54
56
  if (this.data.icon) {
55
57
  this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
56
58
  }
57
59
  }
58
- changeSelectedId(newSelectedItem) {
59
- this.selectedId = newSelectedItem ? newSelectedItem.id : undefined;
60
- this.selectedIdResponse.emit(this.selectedId ? this.selectedId : -1);
60
+ changeSelectedItem(newSelectedItem) {
61
+ this.selectedItem = newSelectedItem;
62
+ this.selectedItemResponse.emit(this.selectedItem);
63
+ }
64
+ clearSelectedItem() {
65
+ this.ngSelectComponent.clearItem(this.selectedItem);
66
+ this.changeSelectedItem(undefined);
61
67
  }
62
68
  }
63
69
  GravityDropdownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
64
- 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:3rem;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"] }] });
70
+ GravityDropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { data: "data" }, outputs: { selectedItemResponse: "response" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !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=\"gravity-dropdown-field {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !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 [bindLabel]=\"data.ngSelectConfig.bindLabel ? data.ngSelectConfig.bindLabel : 'name'\"\n [bindValue]=\"data.ngSelectConfig.bindValue ? data.ngSelectConfig.bindValue : 'id'\"\n [clearable]=\"data.ngSelectConfig.clearable\"\n [items]=\"data.ngSelectConfig.items\"\n [placeholder]=\"selectedItem ? null : data.ngSelectConfig.placeholder ? data.ngSelectConfig.placeholder : 'All'\"\n [readonly]=\"data.state == 'readonly' ? true : null\"\n\n (change)=\"changeSelectedItem($event)\"\n (clear)=\"clearSelectedItem()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n class=\"hr-label md-regular\"\n #ngSelectComponent>\n </ng-select>\n <ng-container *ngIf=\"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\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.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,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.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-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select{width:-webkit-fill-available}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["iconName", "hoverIcon"] }] });
65
71
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
66
72
  type: Component,
67
- 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:3rem;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"] }]
68
- }], propDecorators: { selectedIdResponse: [{
69
- type: Output
73
+ args: [{ selector: 'gravity-dropdown-list', template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !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=\"gravity-dropdown-field {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !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 [bindLabel]=\"data.ngSelectConfig.bindLabel ? data.ngSelectConfig.bindLabel : 'name'\"\n [bindValue]=\"data.ngSelectConfig.bindValue ? data.ngSelectConfig.bindValue : 'id'\"\n [clearable]=\"data.ngSelectConfig.clearable\"\n [items]=\"data.ngSelectConfig.items\"\n [placeholder]=\"selectedItem ? null : data.ngSelectConfig.placeholder ? data.ngSelectConfig.placeholder : 'All'\"\n [readonly]=\"data.state == 'readonly' ? true : null\"\n\n (change)=\"changeSelectedItem($event)\"\n (clear)=\"clearSelectedItem()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n class=\"hr-label md-regular\"\n #ngSelectComponent>\n </ng-select>\n <ng-container *ngIf=\"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\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.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,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.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-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select{width:-webkit-fill-available}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.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"] }]
74
+ }], propDecorators: { selectedItemResponse: [{
75
+ type: Output,
76
+ args: ['response']
70
77
  }], data: [{
71
78
  type: Input
79
+ }], ngSelectComponent: [{
80
+ type: ViewChild,
81
+ args: ['ngSelectComponent', { static: false }]
72
82
  }] } });
73
83
 
74
84
  class GravityTextFieldComponent {
@@ -82,15 +92,9 @@ class GravityTextFieldComponent {
82
92
  };
83
93
  }
84
94
  ngOnInit() {
85
- this.data.autocomplete = this.data.autocomplete ? this.data.autocomplete : "off";
86
95
  this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
87
- this.data.placeholderType = this.data.placeholderType ? this.data.placeholderType : "default";
88
- this.data.required = this.data.required ? this.data.required : false;
89
96
  this.data.state = this.data.state ? this.data.state : "enabled";
90
- this.data.type = this.data.type ? this.data.type : "text";
91
- if (this.data.supportText) {
92
- this.data.supportText.type = this.data.supportText.type ? this.data.supportText.type : "neutro";
93
- }
97
+ this.inputValue = this.data.customInputValue ? this.data.customInputValue : '';
94
98
  if (this.data.icon) {
95
99
  this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
96
100
  }
@@ -102,31 +106,37 @@ class GravityTextFieldComponent {
102
106
  if (this.data.customPlaceholder && this.data.customPlaceholder != '') {
103
107
  return this.data.customPlaceholder;
104
108
  }
109
+ else if (!this.data.placeholderType || this.data.placeholderType == 'default') {
110
+ return this.data.label;
111
+ }
105
112
  else {
106
- if (this.data.placeholderType == 'default') {
107
- return this.data.label;
108
- }
109
- else {
110
- return this.placeholders[this.data.placeholderType];
111
- }
113
+ return this.placeholders[this.data.placeholderType];
112
114
  }
113
115
  }
114
- changeInputValue() {
115
- this.inputValue = this.inputElement.nativeElement.value;
116
- this.textFieldValueResponse.emit(this.inputValue);
117
- }
118
116
  clearInput() {
119
- this.inputValue = null;
117
+ this.changeInputValue(true);
118
+ }
119
+ onInputKeyup() {
120
+ this.changeInputValue();
121
+ }
122
+ changeInputValue(clearInput = false) {
123
+ if (clearInput) {
124
+ this.inputValue = '';
125
+ }
126
+ else {
127
+ this.inputValue = this.inputElement.nativeElement.value;
128
+ }
120
129
  this.textFieldValueResponse.emit(this.inputValue);
121
130
  }
122
131
  }
123
132
  GravityTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
124
- 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 [ngModel]=\"data.ngModel ? data.ngModel : null\"\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)}.gravity-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:3rem;min-height:1.5rem;padding:.625rem 1rem}.gravity-input-field svg-icon{height:1rem;line-height:0;width:1rem}.gravity-input-field svg-icon.placement-left{margin-right:.5rem}.gravity-input-field svg-icon.placement-right{margin-left:.5rem}.gravity-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%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-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)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-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)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-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)}.gravity-input-field.full.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-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)}.gravity-input-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-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"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
133
+ GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { data: "data" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"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=\"gravity-input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"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 [autocomplete]=\"data.autocomplete ? data.autocomplete : 'off'\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"data.type ? data.type : 'text'\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\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\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-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:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-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%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-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)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-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)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["iconName", "hoverIcon"] }] });
125
134
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
126
135
  type: Component,
127
- 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 [ngModel]=\"data.ngModel ? data.ngModel : null\"\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)}.gravity-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:3rem;min-height:1.5rem;padding:.625rem 1rem}.gravity-input-field svg-icon{height:1rem;line-height:0;width:1rem}.gravity-input-field svg-icon.placement-left{margin-right:.5rem}.gravity-input-field svg-icon.placement-right{margin-left:.5rem}.gravity-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%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-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)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-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)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-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)}.gravity-input-field.full.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-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)}.gravity-input-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-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"] }]
136
+ args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"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=\"gravity-input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"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 [autocomplete]=\"data.autocomplete ? data.autocomplete : 'off'\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"data.type ? data.type : 'text'\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\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\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-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:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-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%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-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)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-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)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-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"] }]
128
137
  }], propDecorators: { textFieldValueResponse: [{
129
- type: Output
138
+ type: Output,
139
+ args: ['response']
130
140
  }], data: [{
131
141
  type: Input
132
142
  }], inputElement: [{
@@ -293,7 +303,7 @@ class GravityTooltipComponent {
293
303
  }
294
304
  }
295
305
  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 });
296
- 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"] }] });
306
+ 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
297
307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipComponent, decorators: [{
298
308
  type: Component,
299
309
  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"] }]
@@ -897,50 +907,57 @@ class GravityCalendarComponent {
897
907
  this.calendarResponse = new EventEmitter();
898
908
  this.calendarOpened = false;
899
909
  this.focusInput = false;
900
- this.selectedDate = '';
910
+ this.selectedDateInput = '';
911
+ this.customDateFlag = '';
901
912
  }
902
- ngOnInit() {
913
+ ngOnChanges(changes) {
903
914
  this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
904
- this.data.required = this.data.required ? this.data.required : false;
905
915
  this.data.state = this.data.state ? this.data.state : "enabled";
906
- if (this.data.supportText) {
907
- this.data.supportText.type = this.data.supportText.type ? this.data.supportText.type : "neutro";
908
- }
909
916
  if (this.data.icon) {
910
917
  this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
911
918
  }
912
919
  if (this.data.dates) {
913
920
  if (this.data.dates.defaultDays) {
914
- this.updateDate(null, new Date(new Date().setDate(new Date().getDate() - this.data.dates.defaultDays)));
921
+ let dateWithoutDays = new Date(new Date().setDate(new Date().getDate() - this.data.dates.defaultDays));
922
+ this.focusCustomDate(dateWithoutDays);
915
923
  }
916
924
  if (this.data.dates.customDate) {
917
- this.updateDate(null, this.data.dates.customDate);
925
+ let date = this.data.dates.customDate == 'today' ? (new Date()) : this.data.dates.customDate;
926
+ this.focusCustomDate(date);
918
927
  }
919
928
  if (this.data.dates.minDate) {
920
- this.minDate = {};
921
- this.minDate.year = this.data.dates.minDate.getUTCFullYear();
922
- this.minDate.month = (this.data.dates.minDate.getUTCMonth() + 1);
923
- this.minDate.day = this.data.dates.minDate.getUTCDate();
929
+ this.minDate = GravityCalendarComponent.formatDateToNgbDateStruct(this.data.dates.minDate);
924
930
  }
925
931
  if (this.data.dates.maxDate) {
926
- if (this.data.dates.maxDate == 'today') {
927
- this.data.dates.maxDate = new Date();
928
- }
929
- this.maxDate = {};
930
- this.maxDate.year = this.data.dates.maxDate.getUTCFullYear();
931
- this.maxDate.month = (this.data.dates.maxDate.getUTCMonth() + 1);
932
- this.maxDate.day = this.data.dates.maxDate.getUTCDate();
932
+ let date = this.data.dates.maxDate == 'today' ? (new Date()) : this.data.dates.maxDate;
933
+ this.maxDate = GravityCalendarComponent.formatDateToNgbDateStruct(date);
933
934
  }
934
935
  }
935
936
  }
936
- updateDate($event, customDate) {
937
- if ($event) {
938
- this.selectedDate = GravityCalendarComponent.formatNgbDate($event);
939
- this.calendarResponse.emit(new Date($event.year, ($event.month - 1), $event.day));
940
- }
941
- else if (customDate) {
942
- this.selectedDate = GravityCalendarComponent.formatTSDate(customDate);
943
- this.calendarResponse.emit(customDate);
937
+ ngAfterViewInit() {
938
+ this.changeDateManually();
939
+ }
940
+ updateSelectedDate($event) {
941
+ this.selectedDateInput = GravityCalendarComponent.formatNgbDate($event);
942
+ this.selectedDate = GravityCalendarComponent.convertNgbDateToDate($event);
943
+ this.datepickerInput.nativeElement.value = this.selectedDateInput;
944
+ this.calendarResponse.emit(this.selectedDate);
945
+ }
946
+ focusCustomDate(customDate) {
947
+ this.selectedDateInput = GravityCalendarComponent.formatTSDate(customDate);
948
+ this.selectedDate = customDate;
949
+ this.customDateFlag = customDate.getUTCFullYear() + '-' + (customDate.getUTCMonth() + 1) + '-' + customDate.getUTCDate();
950
+ }
951
+ resetCalendar(newDate) {
952
+ this.focusCustomDate(newDate);
953
+ this.changeDateManually();
954
+ }
955
+ changeDateManually() {
956
+ if (this.customDateFlag) {
957
+ this.datePicker.manualDateChange(this.customDateFlag, true);
958
+ this.datepickerInput.nativeElement.value = this.selectedDateInput;
959
+ this.customDateFlag = undefined;
960
+ this.calendarResponse.emit(this.selectedDate);
944
961
  }
945
962
  }
946
963
  static formatNgbDate(ngbDate) {
@@ -963,19 +980,33 @@ class GravityCalendarComponent {
963
980
  date.getUTCFullYear()
964
981
  ].join('/');
965
982
  }
983
+ static formatDateToNgbDateStruct(date) {
984
+ let object = {};
985
+ object.year = date.getUTCFullYear();
986
+ object.month = (date.getUTCMonth() + 1);
987
+ object.day = date.getUTCDate();
988
+ return object;
989
+ }
990
+ static convertNgbDateToDate(date) {
991
+ return new Date(date.year, (date.month - 1), date.day);
992
+ }
966
993
  }
967
994
  GravityCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
968
- 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:3rem;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: i1$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"] }] });
995
+ GravityCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { data: "data" }, outputs: { calendarResponse: "response" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"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=\"gravity-calendar-field {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"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\n (blur)=\"focusInput = false\"\n (closed)=\"calendarOpened = false\"\n (dateSelect)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n ngbDatepicker\n placeholder=\"Select your date\"\n\n [container]=\"'body'\"\n [datepickerClass]=\"'gravity-datepicker-dialog'\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [navigation]=\"'arrows'\"\n [showWeekNumbers]=\"true\"\n\n #datepickerInput\n #datePicker=\"ngbDatepicker\">\n <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && 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\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem;position:relative}.gravity-calendar-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field gravity-icon.placement-right{margin-left:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["iconName", "hoverIcon"] }] });
969
996
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, decorators: [{
970
997
  type: Component,
971
- 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:3rem;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"] }]
972
- }], propDecorators: { calendarResponse: [{
973
- type: Output
998
+ args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"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=\"gravity-calendar-field {{data.state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"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\n (blur)=\"focusInput = false\"\n (closed)=\"calendarOpened = false\"\n (dateSelect)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n ngbDatepicker\n placeholder=\"Select your date\"\n\n [container]=\"'body'\"\n [datepickerClass]=\"'gravity-datepicker-dialog'\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [navigation]=\"'arrows'\"\n [showWeekNumbers]=\"true\"\n\n #datepickerInput\n #datePicker=\"ngbDatepicker\">\n <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && 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\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem;position:relative}.gravity-calendar-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field gravity-icon.placement-right{margin-left:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.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"] }]
999
+ }], propDecorators: { datePicker: [{
1000
+ type: ViewChild,
1001
+ args: ['datePicker', { static: false }]
1002
+ }], datepickerInput: [{
1003
+ type: ViewChild,
1004
+ args: ['datepickerInput', { static: false }]
1005
+ }], calendarResponse: [{
1006
+ type: Output,
1007
+ args: ['response']
974
1008
  }], data: [{
975
1009
  type: Input
976
- }], inputElement: [{
977
- type: ViewChild,
978
- args: ['inputElement', { static: false }]
979
1010
  }] } });
980
1011
 
981
1012
  class GravityRadioButtonComponent {
@@ -989,7 +1020,7 @@ class GravityRadioButtonComponent {
989
1020
  }
990
1021
  }
991
1022
  GravityRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
992
- 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$2.NgxPrettyRadioComponent, selector: "ngx-pretty-radio:not([will-change]), p-radio:not([will-change])", inputs: ["checked", "disabled", "value", "lock"], outputs: ["change"], exportAs: ["ngxPrettyRadio"] }] });
1023
+ 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: i2$1.NgxPrettyRadioComponent, selector: "ngx-pretty-radio:not([will-change]), p-radio:not([will-change])", inputs: ["checked", "disabled", "value", "lock"], outputs: ["change"], exportAs: ["ngxPrettyRadio"] }] });
993
1024
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, decorators: [{
994
1025
  type: Component,
995
1026
  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" }]
@@ -1007,16 +1038,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
1007
1038
 
1008
1039
  class GravitySwitchComponent {
1009
1040
  constructor() {
1010
- this.disabled = false;
1041
+ this.switchResponse = new EventEmitter();
1042
+ }
1043
+ ngOnInit() {
1044
+ this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
1045
+ this.data.state = this.data.state ? this.data.state : "enabled";
1046
+ }
1047
+ toggleSwitchHandler($event) {
1048
+ this.switchResponse.emit($event.checked);
1011
1049
  }
1012
1050
  }
1013
1051
  GravitySwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1014
- 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$2.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }] });
1052
+ GravitySwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { data: "data" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text md-regular\">\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=\"gravity-switch\">\n <p-checkbox [attr.data-cy]=\"data.cypressTag\" [checked]=\"data.customCheck\" [disabled]=\"data.state == 'disabled'\" isSwitch=\"true\" stroke=\"fill\" (change)=\"toggleSwitchHandler($event)\">\n <ng-content></ng-content>\n </p-checkbox>\n</div>\n", styles: [":host{display:flex;flex-direction:column}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{height:100%;padding:.625rem 1rem}.gravity-switch p-checkbox{height:100%;width:3.125rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }] });
1015
1053
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, decorators: [{
1016
1054
  type: Component,
1017
- args: [{ selector: 'gravity-switch', template: "<p-checkbox [disabled]=\"disabled\" isSwitch=\"true\" stroke=\"fill\">\n <ng-content></ng-content>\n</p-checkbox>\n" }]
1018
- }], propDecorators: { disabled: [{
1055
+ args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text md-regular\">\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=\"gravity-switch\">\n <p-checkbox [attr.data-cy]=\"data.cypressTag\" [checked]=\"data.customCheck\" [disabled]=\"data.state == 'disabled'\" isSwitch=\"true\" stroke=\"fill\" (change)=\"toggleSwitchHandler($event)\">\n <ng-content></ng-content>\n </p-checkbox>\n</div>\n", styles: [":host{display:flex;flex-direction:column}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{height:100%;padding:.625rem 1rem}.gravity-switch p-checkbox{height:100%;width:3.125rem}\n"] }]
1056
+ }], propDecorators: { data: [{
1019
1057
  type: Input
1058
+ }], switchResponse: [{
1059
+ type: Output,
1060
+ args: ['response']
1020
1061
  }] } });
1021
1062
 
1022
1063
  class GravityCheckboxComponent {
@@ -1026,7 +1067,7 @@ class GravityCheckboxComponent {
1026
1067
  }
1027
1068
  }
1028
1069
  GravityCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1029
- 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$2.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$2.NgxPrettySvgDirective, selector: "[pSvg], [p-svg]" }] });
1070
+ 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: i2$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }, { kind: "directive", type: i2$1.NgxPrettySvgDirective, selector: "[pSvg], [p-svg]" }] });
1030
1071
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
1031
1072
  type: Component,
1032
1073
  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"] }]
@@ -1046,23 +1087,12 @@ class GravityDialogComponent {
1046
1087
  this.ngbActiveModal.close();
1047
1088
  }
1048
1089
  }
1049
- GravityDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
1050
- GravityDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"modal-header\">\n <div class=\"hr-title lg-bold title\">\n <div class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\">\n <svg-icon [name]=\"dialogContent.titleIconName\"></svg-icon>\n </div>\n {{dialogContent.title}}\n </div>\n <div class=\"close\" *ngIf=\"dialogContent.showCloseIcon\">\n <svg-icon (click)=\"closeModal()\" name=\"x\"></svg-icon>\n </div>\n</div>\n\n<div class=\"modal-body\">\n <ng-container *ngTemplateOutlet=\"dialogContent.template\"></ng-container>\n</div>\n\n<div class=\"modal-footer\"></div>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}.modal-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.modal-header .title{align-items:center;display:flex}.modal-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;height:2.5rem;justify-content:center;line-height:0;margin-right:1rem;width:2.5rem}.modal-header .title .title-icon svg-icon svg{--icon-color: var(--on-bg-icon-dialog-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.modal-header .title .title-icon svg-icon:hover,.modal-header .title .title-icon svg-icon *:hover{--icon-color: var(--on-bg-icon-dialog-primary)}.modal-header .close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;width:2rem}.modal-header .close svg-icon ::ng-deep svg{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.modal-header .close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.modal-header .close:hover svg-icon ::ng-deep svg{--icon-color: var(--close-dialog-header-hover-primary)}.modal-body{padding:2rem 3rem;position:relative}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
1090
+ GravityDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
1091
+ GravityDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDialogComponent, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"modal-header\">\n <div class=\"hr-title lg-bold title\">\n <div class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\">\n <svg-icon [name]=\"dialogContent.titleIconName\"></svg-icon>\n </div>\n {{dialogContent.title}}\n </div>\n <div class=\"close\" *ngIf=\"dialogContent.showCloseIcon\">\n <svg-icon (click)=\"closeModal()\" name=\"x\"></svg-icon>\n </div>\n</div>\n\n<div class=\"modal-body\">\n <ng-container *ngTemplateOutlet=\"dialogContent.template\"></ng-container>\n</div>\n\n<div class=\"modal-footer\"></div>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}.modal-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.modal-header .title{align-items:center;display:flex}.modal-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;height:2.5rem;justify-content:center;line-height:0;margin-right:1rem;width:2.5rem}.modal-header .title .title-icon svg-icon svg{--icon-color: var(--on-bg-icon-dialog-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.modal-header .title .title-icon svg-icon:hover,.modal-header .title .title-icon svg-icon *:hover{--icon-color: var(--on-bg-icon-dialog-primary)}.modal-header .close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;width:2rem}.modal-header .close svg-icon ::ng-deep svg{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.modal-header .close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.modal-header .close:hover svg-icon ::ng-deep svg{--icon-color: var(--close-dialog-header-hover-primary)}.modal-body{padding:2rem 3rem;position:relative}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
1051
1092
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, decorators: [{
1052
1093
  type: Component,
1053
1094
  args: [{ template: "<div class=\"modal-header\">\n <div class=\"hr-title lg-bold title\">\n <div class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\">\n <svg-icon [name]=\"dialogContent.titleIconName\"></svg-icon>\n </div>\n {{dialogContent.title}}\n </div>\n <div class=\"close\" *ngIf=\"dialogContent.showCloseIcon\">\n <svg-icon (click)=\"closeModal()\" name=\"x\"></svg-icon>\n </div>\n</div>\n\n<div class=\"modal-body\">\n <ng-container *ngTemplateOutlet=\"dialogContent.template\"></ng-container>\n</div>\n\n<div class=\"modal-footer\"></div>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}.modal-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.modal-header .title{align-items:center;display:flex}.modal-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;height:2.5rem;justify-content:center;line-height:0;margin-right:1rem;width:2.5rem}.modal-header .title .title-icon svg-icon svg{--icon-color: var(--on-bg-icon-dialog-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.modal-header .title .title-icon svg-icon:hover,.modal-header .title .title-icon svg-icon *:hover{--icon-color: var(--on-bg-icon-dialog-primary)}.modal-header .close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;width:2rem}.modal-header .close svg-icon ::ng-deep svg{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.modal-header .close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.modal-header .close:hover svg-icon ::ng-deep svg{--icon-color: var(--close-dialog-header-hover-primary)}.modal-body{padding:2rem 3rem;position:relative}\n"] }]
1054
- }], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
1055
- type: Input
1056
- }] } });
1057
-
1058
- class GravityIconComponent {
1059
- }
1060
- GravityIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1061
- 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);--icon-height: 1rem;--icon-width: 1rem;height:var(--icon-height);width:var(--icon-width)}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"] }] });
1062
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, decorators: [{
1063
- type: Component,
1064
- args: [{ selector: 'gravity-icon', template: "<svg-icon name=\"{{iconName}}\"></svg-icon>\n", styles: ["svg-icon ::ng-deep svg{--icon-color: var(--icon-active-primary);--icon-height: 1rem;--icon-width: 1rem;height:var(--icon-height);width:var(--icon-width)}svg-icon:hover,svg-icon *:hover,svg-icon ::ng-deep *:hover{--icon-color: var(--icon-hover-primary)}\n"] }]
1065
- }], propDecorators: { iconName: [{
1095
+ }], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
1066
1096
  type: Input
1067
1097
  }] } });
1068
1098
 
@@ -1077,7 +1107,7 @@ GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
1077
1107
  GravityIconComponent,
1078
1108
  GravityRadioButtonComponent,
1079
1109
  GravitySwitchComponent,
1080
- GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$1.AngularSvgIconPreloaderModule, CommonModule,
1110
+ GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, CommonModule,
1081
1111
  FormsModule, GravityTooltipModule, NgbDatepickerModule,
1082
1112
  NgSelectModule,
1083
1113
  NgxPrettyCheckboxModule,
@@ -1153,12 +1183,12 @@ class GravityDialogManagerService {
1153
1183
  modalRef.componentInstance.dialogContent = gravityDialogContentInterface;
1154
1184
  }
1155
1185
  }
1156
- GravityDialogManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, deps: [{ token: i1$1.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable });
1186
+ GravityDialogManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, deps: [{ token: i1$2.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable });
1157
1187
  GravityDialogManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, providedIn: "any" });
1158
1188
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, decorators: [{
1159
1189
  type: Injectable,
1160
1190
  args: [{ providedIn: "any" }]
1161
- }], ctorParameters: function () { return [{ type: i1$1.NgbModal }]; } });
1191
+ }], ctorParameters: function () { return [{ type: i1$2.NgbModal }]; } });
1162
1192
 
1163
1193
  /*
1164
1194
  * Public API Surface of gravity-design-system