@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/fesm2020/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"] }]
@@ -895,50 +905,57 @@ class GravityCalendarComponent {
895
905
  this.calendarResponse = new EventEmitter();
896
906
  this.calendarOpened = false;
897
907
  this.focusInput = false;
898
- this.selectedDate = '';
908
+ this.selectedDateInput = '';
909
+ this.customDateFlag = '';
899
910
  }
900
- ngOnInit() {
911
+ ngOnChanges(changes) {
901
912
  this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
902
- this.data.required = this.data.required ? this.data.required : false;
903
913
  this.data.state = this.data.state ? this.data.state : "enabled";
904
- if (this.data.supportText) {
905
- this.data.supportText.type = this.data.supportText.type ? this.data.supportText.type : "neutro";
906
- }
907
914
  if (this.data.icon) {
908
915
  this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
909
916
  }
910
917
  if (this.data.dates) {
911
918
  if (this.data.dates.defaultDays) {
912
- this.updateDate(null, new Date(new Date().setDate(new Date().getDate() - this.data.dates.defaultDays)));
919
+ let dateWithoutDays = new Date(new Date().setDate(new Date().getDate() - this.data.dates.defaultDays));
920
+ this.focusCustomDate(dateWithoutDays);
913
921
  }
914
922
  if (this.data.dates.customDate) {
915
- this.updateDate(null, this.data.dates.customDate);
923
+ let date = this.data.dates.customDate == 'today' ? (new Date()) : this.data.dates.customDate;
924
+ this.focusCustomDate(date);
916
925
  }
917
926
  if (this.data.dates.minDate) {
918
- this.minDate = {};
919
- this.minDate.year = this.data.dates.minDate.getUTCFullYear();
920
- this.minDate.month = (this.data.dates.minDate.getUTCMonth() + 1);
921
- this.minDate.day = this.data.dates.minDate.getUTCDate();
927
+ this.minDate = GravityCalendarComponent.formatDateToNgbDateStruct(this.data.dates.minDate);
922
928
  }
923
929
  if (this.data.dates.maxDate) {
924
- if (this.data.dates.maxDate == 'today') {
925
- this.data.dates.maxDate = new Date();
926
- }
927
- this.maxDate = {};
928
- this.maxDate.year = this.data.dates.maxDate.getUTCFullYear();
929
- this.maxDate.month = (this.data.dates.maxDate.getUTCMonth() + 1);
930
- this.maxDate.day = this.data.dates.maxDate.getUTCDate();
930
+ let date = this.data.dates.maxDate == 'today' ? (new Date()) : this.data.dates.maxDate;
931
+ this.maxDate = GravityCalendarComponent.formatDateToNgbDateStruct(date);
931
932
  }
932
933
  }
933
934
  }
934
- updateDate($event, customDate) {
935
- if ($event) {
936
- this.selectedDate = GravityCalendarComponent.formatNgbDate($event);
937
- this.calendarResponse.emit(new Date($event.year, ($event.month - 1), $event.day));
938
- }
939
- else if (customDate) {
940
- this.selectedDate = GravityCalendarComponent.formatTSDate(customDate);
941
- this.calendarResponse.emit(customDate);
935
+ ngAfterViewInit() {
936
+ this.changeDateManually();
937
+ }
938
+ updateSelectedDate($event) {
939
+ this.selectedDateInput = GravityCalendarComponent.formatNgbDate($event);
940
+ this.selectedDate = GravityCalendarComponent.convertNgbDateToDate($event);
941
+ this.datepickerInput.nativeElement.value = this.selectedDateInput;
942
+ this.calendarResponse.emit(this.selectedDate);
943
+ }
944
+ focusCustomDate(customDate) {
945
+ this.selectedDateInput = GravityCalendarComponent.formatTSDate(customDate);
946
+ this.selectedDate = customDate;
947
+ this.customDateFlag = customDate.getUTCFullYear() + '-' + (customDate.getUTCMonth() + 1) + '-' + customDate.getUTCDate();
948
+ }
949
+ resetCalendar(newDate) {
950
+ this.focusCustomDate(newDate);
951
+ this.changeDateManually();
952
+ }
953
+ changeDateManually() {
954
+ if (this.customDateFlag) {
955
+ this.datePicker.manualDateChange(this.customDateFlag, true);
956
+ this.datepickerInput.nativeElement.value = this.selectedDateInput;
957
+ this.customDateFlag = undefined;
958
+ this.calendarResponse.emit(this.selectedDate);
942
959
  }
943
960
  }
944
961
  static formatNgbDate(ngbDate) {
@@ -961,19 +978,33 @@ class GravityCalendarComponent {
961
978
  date.getUTCFullYear()
962
979
  ].join('/');
963
980
  }
981
+ static formatDateToNgbDateStruct(date) {
982
+ let object = {};
983
+ object.year = date.getUTCFullYear();
984
+ object.month = (date.getUTCMonth() + 1);
985
+ object.day = date.getUTCDate();
986
+ return object;
987
+ }
988
+ static convertNgbDateToDate(date) {
989
+ return new Date(date.year, (date.month - 1), date.day);
990
+ }
964
991
  }
965
992
  GravityCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
966
- 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"] }] });
993
+ 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"] }] });
967
994
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, decorators: [{
968
995
  type: Component,
969
- 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"] }]
970
- }], propDecorators: { calendarResponse: [{
971
- type: Output
996
+ 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"] }]
997
+ }], propDecorators: { datePicker: [{
998
+ type: ViewChild,
999
+ args: ['datePicker', { static: false }]
1000
+ }], datepickerInput: [{
1001
+ type: ViewChild,
1002
+ args: ['datepickerInput', { static: false }]
1003
+ }], calendarResponse: [{
1004
+ type: Output,
1005
+ args: ['response']
972
1006
  }], data: [{
973
1007
  type: Input
974
- }], inputElement: [{
975
- type: ViewChild,
976
- args: ['inputElement', { static: false }]
977
1008
  }] } });
978
1009
 
979
1010
  class GravityRadioButtonComponent {
@@ -987,7 +1018,7 @@ class GravityRadioButtonComponent {
987
1018
  }
988
1019
  }
989
1020
  GravityRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
990
- 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"] }] });
1021
+ 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"] }] });
991
1022
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, decorators: [{
992
1023
  type: Component,
993
1024
  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" }]
@@ -1005,16 +1036,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
1005
1036
 
1006
1037
  class GravitySwitchComponent {
1007
1038
  constructor() {
1008
- this.disabled = false;
1039
+ this.switchResponse = new EventEmitter();
1040
+ }
1041
+ ngOnInit() {
1042
+ this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
1043
+ this.data.state = this.data.state ? this.data.state : "enabled";
1044
+ }
1045
+ toggleSwitchHandler($event) {
1046
+ this.switchResponse.emit($event.checked);
1009
1047
  }
1010
1048
  }
1011
1049
  GravitySwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1012
- 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"] }] });
1050
+ 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"] }] });
1013
1051
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, decorators: [{
1014
1052
  type: Component,
1015
- args: [{ selector: 'gravity-switch', template: "<p-checkbox [disabled]=\"disabled\" isSwitch=\"true\" stroke=\"fill\">\n <ng-content></ng-content>\n</p-checkbox>\n" }]
1016
- }], propDecorators: { disabled: [{
1053
+ 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"] }]
1054
+ }], propDecorators: { data: [{
1017
1055
  type: Input
1056
+ }], switchResponse: [{
1057
+ type: Output,
1058
+ args: ['response']
1018
1059
  }] } });
1019
1060
 
1020
1061
  class GravityCheckboxComponent {
@@ -1024,7 +1065,7 @@ class GravityCheckboxComponent {
1024
1065
  }
1025
1066
  }
1026
1067
  GravityCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1027
- 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]" }] });
1068
+ 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]" }] });
1028
1069
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
1029
1070
  type: Component,
1030
1071
  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"] }]
@@ -1044,23 +1085,12 @@ class GravityDialogComponent {
1044
1085
  this.ngbActiveModal.close();
1045
1086
  }
1046
1087
  }
1047
- 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 });
1048
- 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"] }] });
1088
+ 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 });
1089
+ 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"] }] });
1049
1090
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, decorators: [{
1050
1091
  type: Component,
1051
1092
  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"] }]
1052
- }], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
1053
- type: Input
1054
- }] } });
1055
-
1056
- class GravityIconComponent {
1057
- }
1058
- GravityIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1059
- 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"] }] });
1060
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, decorators: [{
1061
- type: Component,
1062
- 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"] }]
1063
- }], propDecorators: { iconName: [{
1093
+ }], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
1064
1094
  type: Input
1065
1095
  }] } });
1066
1096
 
@@ -1075,7 +1105,7 @@ GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
1075
1105
  GravityIconComponent,
1076
1106
  GravityRadioButtonComponent,
1077
1107
  GravitySwitchComponent,
1078
- GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$1.AngularSvgIconPreloaderModule, CommonModule,
1108
+ GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, CommonModule,
1079
1109
  FormsModule, GravityTooltipModule, NgbDatepickerModule,
1080
1110
  NgSelectModule,
1081
1111
  NgxPrettyCheckboxModule,
@@ -1151,12 +1181,12 @@ class GravityDialogManagerService {
1151
1181
  modalRef.componentInstance.dialogContent = gravityDialogContentInterface;
1152
1182
  }
1153
1183
  }
1154
- 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 });
1184
+ 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 });
1155
1185
  GravityDialogManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, providedIn: "any" });
1156
1186
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, decorators: [{
1157
1187
  type: Injectable,
1158
1188
  args: [{ providedIn: "any" }]
1159
- }], ctorParameters: function () { return [{ type: i1$1.NgbModal }]; } });
1189
+ }], ctorParameters: function () { return [{ type: i1$2.NgbModal }]; } });
1160
1190
 
1161
1191
  /*
1162
1192
  * Public API Surface of gravity-design-system