@progressio_resources/gravity-design-system 1.0.8 → 1.0.9
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.
- package/esm2020/lib/components/gravity-button/gravity-button.component.mjs +3 -3
- package/esm2020/lib/components/gravity-calendar/gravity-calendar.component.mjs +4 -3
- package/esm2020/lib/components/gravity-dialog/gravity-dialog.component.mjs +22 -0
- package/esm2020/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +4 -3
- package/esm2020/lib/components/gravity-icon/gravity-icon.component.mjs +2 -2
- package/esm2020/lib/components/gravity-text-field/gravity-text-field.component.mjs +4 -3
- package/esm2020/lib/gravity-design-system.module.mjs +6 -1
- package/esm2020/lib/services/gravity-dialog-manager.service.mjs +20 -0
- package/esm2020/public-api.mjs +4 -1
- package/fesm2015/progressio_resources-gravity-design-system.mjs +57 -17
- package/fesm2015/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/fesm2020/progressio_resources-gravity-design-system.mjs +57 -17
- package/fesm2020/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-dialog/gravity-dialog.component.d.ts +17 -0
- package/lib/gravity-design-system.module.d.ts +15 -14
- package/lib/services/gravity-dialog-manager.service.d.ts +10 -0
- package/package.json +2 -1
- package/public-api.d.ts +2 -0
- package/src/lib/styles/_datepicker.scss +2 -2
- package/src/lib/styles/gravity-design-system.scss +1 -0
- package/src/lib/styles/overwrite/bootstrap/_bootstrap-export.scss +2 -0
- package/src/lib/styles/overwrite/bootstrap/_bootstrap.scss +7 -0
- package/src/lib/styles/overwrite/bootstrap/_modal.scss +115 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
@@ -10,9 +10,9 @@ import * as i4 from '@ng-select/ng-select';
|
|
|
10
10
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
11
11
|
import * as i2$1 from 'angular-svg-icon-preloader';
|
|
12
12
|
import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
14
14
|
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
|
|
15
|
-
import * as i1$
|
|
15
|
+
import * as i1$2 from 'ngx-pretty-checkbox';
|
|
16
16
|
import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
|
|
17
17
|
|
|
18
18
|
class GravityButtonComponent {
|
|
@@ -25,10 +25,10 @@ class GravityButtonComponent {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
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;font-size:.9375rem;font-weight:700;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:11rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-disabled:not([disabled]),.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-disabled:not([disabled]),.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button svg-icon,.gravity-button-style svg-icon,.gravity-button-disabled:not([disabled]) svg-icon,.gravity-button[disabled] svg-icon,[disabled].gravity-button-style svg-icon,.gravity-button-alternative:not([disabled]) svg-icon,.gravity-button-negative:not([disabled]) svg-icon,.gravity-button-positive:not([disabled]) svg-icon,.gravity-button-tertiary:not([disabled]) svg-icon,.gravity-button-secondary:not([disabled]) svg-icon,.gravity-button-primary:not([disabled]) svg-icon{height:1rem;line-height:0;width:1rem}.gravity-button svg-icon.placement-left,.gravity-button-style svg-icon.placement-left,.gravity-button-disabled:not([disabled]) svg-icon.placement-left,.gravity-button-alternative:not([disabled]) svg-icon.placement-left,.gravity-button-negative:not([disabled]) svg-icon.placement-left,.gravity-button-positive:not([disabled]) svg-icon.placement-left,.gravity-button-tertiary:not([disabled]) svg-icon.placement-left,.gravity-button-secondary:not([disabled]) svg-icon.placement-left,.gravity-button-primary:not([disabled]) svg-icon.placement-left{margin-right:.5rem}.gravity-button svg-icon.placement-right,.gravity-button-style svg-icon.placement-right,.gravity-button-disabled:not([disabled]) svg-icon.placement-right,.gravity-button-alternative:not([disabled]) svg-icon.placement-right,.gravity-button-negative:not([disabled]) svg-icon.placement-right,.gravity-button-positive:not([disabled]) svg-icon.placement-right,.gravity-button-tertiary:not([disabled]) svg-icon.placement-right,.gravity-button-secondary:not([disabled]) svg-icon.placement-right,.gravity-button-primary:not([disabled]) svg-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-disabled:not([disabled]) p,.gravity-button[disabled] p,[disabled].gravity-button-style p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style svg-icon ::ng-deep svg,.gravity-button-disabled:not([disabled]) svg-icon ::ng-deep svg,.gravity-button[disabled] svg-icon ::ng-deep svg,[disabled].gravity-button-style svg-icon ::ng-deep svg,.gravity-button-alternative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-negative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-positive:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-tertiary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-secondary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-primary:not([disabled]) svg-icon ::ng-deep svg{--icon-color: var(--button-text-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary)}.gravity-button-primary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]){--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]){--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]){--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive)}.gravity-button-positive:not([disabled]):hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]){--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative)}.gravity-button-negative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,[disabled].gravity-button-primary:not([disabled]),[disabled].gravity-button-secondary:not([disabled]),[disabled].gravity-button-tertiary:not([disabled]),[disabled].gravity-button-positive:not([disabled]),[disabled].gravity-button-negative:not([disabled]),[disabled].gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);cursor:default}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
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"] }] });
|
|
29
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
|
-
args: [{ selector: 'gravity-button', template: "<button [attr.data-cy]=\"data.cypressTag\" class=\"gravity-button-{{data.type}} gravity-size-{{data.size}}\"\n [disabled]=\"data.disabled\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-content></ng-content>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</button>\n\n<ng-template #icons>\n <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".gravity-button,.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;font-size:.9375rem;font-weight:700;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:11rem}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-disabled:not([disabled]),.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-disabled:not([disabled]),.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button svg-icon,.gravity-button-style svg-icon,.gravity-button-disabled:not([disabled]) svg-icon,.gravity-button[disabled] svg-icon,[disabled].gravity-button-style svg-icon,.gravity-button-alternative:not([disabled]) svg-icon,.gravity-button-negative:not([disabled]) svg-icon,.gravity-button-positive:not([disabled]) svg-icon,.gravity-button-tertiary:not([disabled]) svg-icon,.gravity-button-secondary:not([disabled]) svg-icon,.gravity-button-primary:not([disabled]) svg-icon{height:1rem;line-height:0;width:1rem}.gravity-button svg-icon.placement-left,.gravity-button-style svg-icon.placement-left,.gravity-button-disabled:not([disabled]) svg-icon.placement-left,.gravity-button-alternative:not([disabled]) svg-icon.placement-left,.gravity-button-negative:not([disabled]) svg-icon.placement-left,.gravity-button-positive:not([disabled]) svg-icon.placement-left,.gravity-button-tertiary:not([disabled]) svg-icon.placement-left,.gravity-button-secondary:not([disabled]) svg-icon.placement-left,.gravity-button-primary:not([disabled]) svg-icon.placement-left{margin-right:.5rem}.gravity-button svg-icon.placement-right,.gravity-button-style svg-icon.placement-right,.gravity-button-disabled:not([disabled]) svg-icon.placement-right,.gravity-button-alternative:not([disabled]) svg-icon.placement-right,.gravity-button-negative:not([disabled]) svg-icon.placement-right,.gravity-button-positive:not([disabled]) svg-icon.placement-right,.gravity-button-tertiary:not([disabled]) svg-icon.placement-right,.gravity-button-secondary:not([disabled]) svg-icon.placement-right,.gravity-button-primary:not([disabled]) svg-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-disabled:not([disabled]) p,.gravity-button[disabled] p,[disabled].gravity-button-style p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style svg-icon ::ng-deep svg,.gravity-button-disabled:not([disabled]) svg-icon ::ng-deep svg,.gravity-button[disabled] svg-icon ::ng-deep svg,[disabled].gravity-button-style svg-icon ::ng-deep svg,.gravity-button-alternative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-negative:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-positive:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-tertiary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-secondary:not([disabled]) svg-icon ::ng-deep svg,.gravity-button-primary:not([disabled]) svg-icon ::ng-deep svg{--icon-color: var(--button-text-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary)}.gravity-button-primary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]){--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]){--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]){--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive)}.gravity-button-positive:not([disabled]):hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]){--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative)}.gravity-button-negative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-disabled:not([disabled]),.gravity-button[disabled],[disabled].gravity-button-style,[disabled].gravity-button-primary:not([disabled]),[disabled].gravity-button-secondary:not([disabled]),[disabled].gravity-button-tertiary:not([disabled]),[disabled].gravity-button-positive:not([disabled]),[disabled].gravity-button-negative:not([disabled]),[disabled].gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);cursor:default}\n"] }]
|
|
31
|
+
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"] }]
|
|
32
32
|
}], propDecorators: { data: [{
|
|
33
33
|
type: Input
|
|
34
34
|
}] } });
|
|
@@ -41,6 +41,7 @@ class GravityDropdownListComponent {
|
|
|
41
41
|
ngOnInit() {
|
|
42
42
|
this.data.ngSelectConfig.placeholder = !this.data.ngSelectConfig.placeholder || this.data.ngSelectConfig.placeholder == '' ? 'All' : this.data.ngSelectConfig.placeholder;
|
|
43
43
|
this.data.ngSelectConfig.clearable = !this.data.ngSelectConfig.clearable ? false : this.data.ngSelectConfig.clearable;
|
|
44
|
+
this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
|
|
44
45
|
this.data.required = this.data.required ? this.data.required : false;
|
|
45
46
|
this.data.state = this.data.state ? this.data.state : "enabled";
|
|
46
47
|
this.selectedId = this.data.ngSelectConfig.customId ? this.data.ngSelectConfig.items.find((item) => item.id == this.data.ngSelectConfig.customId).id : undefined;
|
|
@@ -60,10 +61,10 @@ class GravityDropdownListComponent {
|
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
63
|
GravityDropdownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
-
GravityDropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { data: "data" }, outputs: { selectedIdResponse: "selectedIdResponse" }, ngImport: i0, template: "<div class=\"gravity-dropdown-list\">\n <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n </label>\n <div class=\"dropdown-field {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-select [attr.data-cy]=\"data.cypressTag\"\n [clearable]=\"data.ngSelectConfig.clearable\"\n [disabled]=\"data.state == 'disabled' ? true : null\"\n [items]=\"data.ngSelectConfig.items\"\n [placeholder]=\"selectedId ? '' : data.ngSelectConfig.placeholder\"\n [readonly]=\"data.state == 'readonly' ? true : null\"\n\n [(ngModel)]=\"selectedId\"\n\n (change)=\"changeSelectedId($event)\"\n (clear)=\"changeSelectedId()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n bindLabel=\"name\"\n bindValue=\"id\"\n class=\"hr-label md-regular\">\n </ng-select>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </div>\n <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n </p>\n</div>\n\n<ng-template #icons>\n <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n\n", styles: ["body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label.sm-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem}.dropdown-field.readonly{--cursor-type: text}.dropdown-field.disabled{--cursor-type: initial}.dropdown-field svg-icon{height:1rem;line-height:0;width:1rem}.dropdown-field svg-icon.placement-left{margin-right:.5rem}.dropdown-field svg-icon.placement-right{margin-left:.5rem}.dropdown-field ng-select{width:-webkit-fill-available}.dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.1875rem 1rem}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.dropdown-field.full.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.dropdown-field.full.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.dropdown-field.full.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.dropdown-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
|
|
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"] }] });
|
|
64
65
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
|
|
65
66
|
type: Component,
|
|
66
|
-
args: [{ selector: 'gravity-dropdown-list', template: "<div class=\"gravity-dropdown-list\">\n <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n </label>\n <div class=\"dropdown-field {{data.state}}\" [class.empty]=\"!selectedId && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full]=\"selectedId && !dropdownOpen\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-select [attr.data-cy]=\"data.cypressTag\"\n [clearable]=\"data.ngSelectConfig.clearable\"\n [disabled]=\"data.state == 'disabled' ? true : null\"\n [items]=\"data.ngSelectConfig.items\"\n [placeholder]=\"selectedId ? '' : data.ngSelectConfig.placeholder\"\n [readonly]=\"data.state == 'readonly' ? true : null\"\n\n [(ngModel)]=\"selectedId\"\n\n (change)=\"changeSelectedId($event)\"\n (clear)=\"changeSelectedId()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n bindLabel=\"name\"\n bindValue=\"id\"\n class=\"hr-label md-regular\">\n </ng-select>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </div>\n <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n </p>\n</div>\n\n<ng-template #icons>\n <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n\n", styles: ["body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label.sm-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;max-height:2rem;min-height:1.5rem;padding:.625rem 1rem}.dropdown-field.readonly{--cursor-type: text}.dropdown-field.disabled{--cursor-type: initial}.dropdown-field svg-icon{height:1rem;line-height:0;width:1rem}.dropdown-field svg-icon.placement-left{margin-right:.5rem}.dropdown-field svg-icon.placement-right{margin-left:.5rem}.dropdown-field ng-select{width:-webkit-fill-available}.dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.1875rem 1rem}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.dropdown-field.full.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.dropdown-field.full.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.dropdown-field.full.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.dropdown-field.full.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"] }]
|
|
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"] }]
|
|
67
68
|
}], propDecorators: { selectedIdResponse: [{
|
|
68
69
|
type: Output
|
|
69
70
|
}], data: [{
|
|
@@ -82,6 +83,7 @@ class GravityTextFieldComponent {
|
|
|
82
83
|
}
|
|
83
84
|
ngOnInit() {
|
|
84
85
|
this.data.autocomplete = this.data.autocomplete ? this.data.autocomplete : "off";
|
|
86
|
+
this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
|
|
85
87
|
this.data.placeholderType = this.data.placeholderType ? this.data.placeholderType : "default";
|
|
86
88
|
this.data.required = this.data.required ? this.data.required : false;
|
|
87
89
|
this.data.state = this.data.state ? this.data.state : "enabled";
|
|
@@ -115,10 +117,10 @@ class GravityTextFieldComponent {
|
|
|
115
117
|
}
|
|
116
118
|
}
|
|
117
119
|
GravityTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
118
|
-
GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { data: "data" }, outputs: { textFieldValueResponse: "textFieldValueResponse" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-text-field\">\n <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full]=\"inputValue != '' && !focusInput\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n </label>\n <div class=\"input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\" [class.focused]=\"focusInput\"\n [class.full]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"data.cypressTag\"\n [attr.disabled]=\"data.state == 'disabled' ? true : null\"\n [attr.readonly]=\"data.state == 'readonly' ? true : null\"\n [attr.value]=\"data.customInputValue ? data.customInputValue : null\"\n [autocomplete]=\"data.autocomplete\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"data.type\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </div>\n <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n </p>\n</div>\n\n<ng-template #icons>\n <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;max-height:
|
|
120
|
+
GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { data: "data" }, outputs: { textFieldValueResponse: "textFieldValueResponse" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"gravity-text-field\">\n <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full]=\"inputValue != '' && !focusInput\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n </label>\n <div class=\"input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\" [class.focused]=\"focusInput\"\n [class.full]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"data.cypressTag\"\n [attr.disabled]=\"data.state == 'disabled' ? true : null\"\n [attr.readonly]=\"data.state == 'readonly' ? true : null\"\n [attr.value]=\"data.customInputValue ? data.customInputValue : null\"\n [autocomplete]=\"data.autocomplete\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"data.type\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </div>\n <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n </p>\n</div>\n\n<ng-template #icons>\n <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.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"] }] });
|
|
119
121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
120
122
|
type: Component,
|
|
121
|
-
args: [{ selector: 'gravity-text-field', template: "<div class=\"gravity-text-field\">\n <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full]=\"inputValue != '' && !focusInput\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n </label>\n <div class=\"input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\" [class.focused]=\"focusInput\"\n [class.full]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"data.cypressTag\"\n [attr.disabled]=\"data.state == 'disabled' ? true : null\"\n [attr.readonly]=\"data.state == 'readonly' ? true : null\"\n [attr.value]=\"data.customInputValue ? data.customInputValue : null\"\n [autocomplete]=\"data.autocomplete\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"data.type\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </div>\n <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n </p>\n</div>\n\n<ng-template #icons>\n <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;max-height:
|
|
123
|
+
args: [{ selector: 'gravity-text-field', template: "<div class=\"gravity-text-field\">\n <label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full]=\"inputValue != '' && !focusInput\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n </label>\n <div class=\"input-field {{data.state}}\" [class.empty]=\"inputValue == '' && !focusInput\" [class.focused]=\"focusInput\"\n [class.full]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"data.cypressTag\"\n [attr.disabled]=\"data.state == 'disabled' ? true : null\"\n [attr.readonly]=\"data.state == 'readonly' ? true : null\"\n [attr.value]=\"data.customInputValue ? data.customInputValue : null\"\n [autocomplete]=\"data.autocomplete\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"data.type\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </div>\n <p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n </p>\n</div>\n\n<ng-template #icons>\n <svg-icon class=\"placement-{{data.icon.placement}}\" [name]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></svg-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.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"] }]
|
|
122
124
|
}], propDecorators: { textFieldValueResponse: [{
|
|
123
125
|
type: Output
|
|
124
126
|
}], data: [{
|
|
@@ -894,6 +896,7 @@ class GravityCalendarComponent {
|
|
|
894
896
|
this.selectedDate = '';
|
|
895
897
|
}
|
|
896
898
|
ngOnInit() {
|
|
899
|
+
this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
|
|
897
900
|
this.data.required = this.data.required ? this.data.required : false;
|
|
898
901
|
this.data.state = this.data.state ? this.data.state : "enabled";
|
|
899
902
|
if (this.data.supportText) {
|
|
@@ -958,10 +961,10 @@ class GravityCalendarComponent {
|
|
|
958
961
|
}
|
|
959
962
|
}
|
|
960
963
|
GravityCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
961
|
-
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:
|
|
964
|
+
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"] }] });
|
|
962
965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, decorators: [{
|
|
963
966
|
type: Component,
|
|
964
|
-
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:
|
|
967
|
+
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"] }]
|
|
965
968
|
}], propDecorators: { calendarResponse: [{
|
|
966
969
|
type: Output
|
|
967
970
|
}], data: [{
|
|
@@ -982,7 +985,7 @@ class GravityRadioButtonComponent {
|
|
|
982
985
|
}
|
|
983
986
|
}
|
|
984
987
|
GravityRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
985
|
-
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$
|
|
988
|
+
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"] }] });
|
|
986
989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, decorators: [{
|
|
987
990
|
type: Component,
|
|
988
991
|
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" }]
|
|
@@ -1004,7 +1007,7 @@ class GravitySwitchComponent {
|
|
|
1004
1007
|
}
|
|
1005
1008
|
}
|
|
1006
1009
|
GravitySwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1007
|
-
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$
|
|
1010
|
+
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"] }] });
|
|
1008
1011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, decorators: [{
|
|
1009
1012
|
type: Component,
|
|
1010
1013
|
args: [{ selector: 'gravity-switch', template: "<p-checkbox [disabled]=\"disabled\" isSwitch=\"true\" stroke=\"fill\">\n <ng-content></ng-content>\n</p-checkbox>\n" }]
|
|
@@ -1019,7 +1022,7 @@ class GravityCheckboxComponent {
|
|
|
1019
1022
|
}
|
|
1020
1023
|
}
|
|
1021
1024
|
GravityCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1022
|
-
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$
|
|
1025
|
+
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]" }] });
|
|
1023
1026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
|
|
1024
1027
|
type: Component,
|
|
1025
1028
|
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"] }]
|
|
@@ -1031,13 +1034,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1031
1034
|
type: Input
|
|
1032
1035
|
}] } });
|
|
1033
1036
|
|
|
1037
|
+
class GravityDialogComponent {
|
|
1038
|
+
constructor(ngbActiveModal) {
|
|
1039
|
+
this.ngbActiveModal = ngbActiveModal;
|
|
1040
|
+
}
|
|
1041
|
+
closeModal() {
|
|
1042
|
+
this.ngbActiveModal.close();
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
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 });
|
|
1046
|
+
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"] }] });
|
|
1047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, decorators: [{
|
|
1048
|
+
type: Component,
|
|
1049
|
+
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"] }]
|
|
1050
|
+
}], ctorParameters: function () { return [{ type: i1$1.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
|
|
1051
|
+
type: Input
|
|
1052
|
+
}] } });
|
|
1053
|
+
|
|
1034
1054
|
class GravityIconComponent {
|
|
1035
1055
|
}
|
|
1036
1056
|
GravityIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1037
|
-
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)
|
|
1057
|
+
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"] }] });
|
|
1038
1058
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, decorators: [{
|
|
1039
1059
|
type: Component,
|
|
1040
|
-
args: [{ selector: 'gravity-icon', template: "<svg-icon name=\"{{iconName}}\"></svg-icon>\n", styles: ["svg-icon ::ng-deep svg{--icon-color: var(--icon-active-primary)
|
|
1060
|
+
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"] }]
|
|
1041
1061
|
}], propDecorators: { iconName: [{
|
|
1042
1062
|
type: Input
|
|
1043
1063
|
}] } });
|
|
@@ -1048,6 +1068,7 @@ GravityDesignSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
|
|
|
1048
1068
|
GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityButtonComponent,
|
|
1049
1069
|
GravityCalendarComponent,
|
|
1050
1070
|
GravityCheckboxComponent,
|
|
1071
|
+
GravityDialogComponent,
|
|
1051
1072
|
GravityDropdownListComponent,
|
|
1052
1073
|
GravityIconComponent,
|
|
1053
1074
|
GravityRadioButtonComponent,
|
|
@@ -1059,6 +1080,7 @@ GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
|
|
|
1059
1080
|
ReactiveFormsModule], exports: [GravityButtonComponent,
|
|
1060
1081
|
GravityCalendarComponent,
|
|
1061
1082
|
GravityCheckboxComponent,
|
|
1083
|
+
GravityDialogComponent,
|
|
1062
1084
|
GravityDropdownListComponent,
|
|
1063
1085
|
GravityIconComponent,
|
|
1064
1086
|
GravityRadioButtonComponent,
|
|
@@ -1083,6 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1083
1105
|
GravityButtonComponent,
|
|
1084
1106
|
GravityCalendarComponent,
|
|
1085
1107
|
GravityCheckboxComponent,
|
|
1108
|
+
GravityDialogComponent,
|
|
1086
1109
|
GravityDropdownListComponent,
|
|
1087
1110
|
GravityIconComponent,
|
|
1088
1111
|
GravityRadioButtonComponent,
|
|
@@ -1106,6 +1129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1106
1129
|
GravityButtonComponent,
|
|
1107
1130
|
GravityCalendarComponent,
|
|
1108
1131
|
GravityCheckboxComponent,
|
|
1132
|
+
GravityDialogComponent,
|
|
1109
1133
|
GravityDropdownListComponent,
|
|
1110
1134
|
GravityIconComponent,
|
|
1111
1135
|
GravityRadioButtonComponent,
|
|
@@ -1116,6 +1140,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1116
1140
|
}]
|
|
1117
1141
|
}] });
|
|
1118
1142
|
|
|
1143
|
+
class GravityDialogManagerService {
|
|
1144
|
+
constructor(ngbModal) {
|
|
1145
|
+
this.ngbModal = ngbModal;
|
|
1146
|
+
}
|
|
1147
|
+
openModal(gravityDialogContentInterface) {
|
|
1148
|
+
const modalRef = this.ngbModal.open(GravityDialogComponent);
|
|
1149
|
+
modalRef.componentInstance.dialogContent = gravityDialogContentInterface;
|
|
1150
|
+
}
|
|
1151
|
+
}
|
|
1152
|
+
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 });
|
|
1153
|
+
GravityDialogManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, providedIn: "any" });
|
|
1154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, decorators: [{
|
|
1155
|
+
type: Injectable,
|
|
1156
|
+
args: [{ providedIn: "any" }]
|
|
1157
|
+
}], ctorParameters: function () { return [{ type: i1$1.NgbModal }]; } });
|
|
1158
|
+
|
|
1119
1159
|
/*
|
|
1120
1160
|
* Public API Surface of gravity-design-system
|
|
1121
1161
|
*/
|
|
@@ -1124,5 +1164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1124
1164
|
* Generated bundle index. Do not edit.
|
|
1125
1165
|
*/
|
|
1126
1166
|
|
|
1127
|
-
export { GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDropdownListComponent, GravityIconComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
|
|
1167
|
+
export { GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
|
|
1128
1168
|
//# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map
|