@progressio_resources/gravity-design-system 1.1.3 → 1.1.5
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 +22 -11
- package/esm2020/lib/components/gravity-dialog/gravity-dialog.component.mjs +3 -3
- package/esm2020/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +37 -13
- package/esm2020/lib/components/gravity-text-field/gravity-text-field.component.mjs +66 -19
- package/esm2020/lib/gravity-design-system.module.mjs +8 -5
- package/esm2020/lib/services/gravity-dialog-manager.service.mjs +2 -2
- package/fesm2015/progressio_resources-gravity-design-system.mjs +130 -46
- package/fesm2015/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/fesm2020/progressio_resources-gravity-design-system.mjs +130 -46
- package/fesm2020/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-button/gravity-button.component.d.ts +9 -15
- package/lib/components/gravity-dialog/gravity-dialog.component.d.ts +2 -1
- package/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.d.ts +20 -25
- package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +23 -21
- package/lib/gravity-design-system.module.d.ts +1 -1
- package/package.json +1 -1
- package/src/lib/styles/fundamentals/colors/tokens/_hero.tokens.scss +2 -2
- package/src/lib/styles/overwrite/bootstrap/_modal.scss +2 -2
|
@@ -2,15 +2,16 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
+
import * as i2 from '@angular/forms';
|
|
5
6
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
+
import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
|
|
8
|
+
import { NgbDatepickerModule, NgbToastModule, NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
|
|
6
9
|
import * as i1 from 'angular-svg-icon';
|
|
7
10
|
import { AngularSvgIconModule } from 'angular-svg-icon';
|
|
8
|
-
import * as
|
|
11
|
+
import * as i3 from '@ng-select/ng-select';
|
|
9
12
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
10
13
|
import * as i2$2 from 'angular-svg-icon-preloader';
|
|
11
14
|
import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
|
|
12
|
-
import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
|
|
13
|
-
import { NgbDatepickerModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
|
|
14
15
|
import * as i2$1 from 'ngx-pretty-checkbox';
|
|
15
16
|
import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
|
|
16
17
|
|
|
@@ -30,35 +31,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
30
31
|
}] } });
|
|
31
32
|
|
|
32
33
|
class GravityButtonComponent {
|
|
33
|
-
|
|
34
|
-
this.
|
|
35
|
-
this.
|
|
36
|
-
|
|
37
|
-
this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
|
|
38
|
-
}
|
|
34
|
+
constructor() {
|
|
35
|
+
this.iconPlacement = 'left';
|
|
36
|
+
this.isLoading = false;
|
|
37
|
+
this.size = "md";
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
40
|
GravityButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
-
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 <gravity-icon class=\"placement-{{data.icon.placement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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 gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-disabled:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button[disabled] gravity-icon ::ng-deep svg-icon,[disabled].gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-disabled:not([disabled]) gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-disabled:not([disabled]) gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-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-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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
41
|
+
GravityButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", iconNames: "iconNames", iconPlacement: "iconPlacement", isLoading: "isLoading", size: "size", type: "type" }, ngImport: i0, template: "<button [attr.data-cy]=\"cypressTag\" class=\"gravity-button-{{type}} gravity-size-{{size}} hr-label md-bold\"\n [disabled]=\"disabled\" [style]=\"{'pointer-events': isLoading ? 'none' : 'initial'}\">\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-content></ng-content>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngFor=\"let iconName of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;cursor:pointer;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-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-primary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-secondary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-positive[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-negative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-alternative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-disabled gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-primary[disabled] gravity-icon.placement-left,.gravity-button-secondary[disabled] gravity-icon.placement-left,.gravity-button-tertiary[disabled] gravity-icon.placement-left,.gravity-button-positive[disabled] gravity-icon.placement-left,.gravity-button-negative[disabled] gravity-icon.placement-left,.gravity-button-alternative[disabled] gravity-icon.placement-left,.gravity-button-disabled gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-primary[disabled] gravity-icon.placement-right,.gravity-button-secondary[disabled] gravity-icon.placement-right,.gravity-button-tertiary[disabled] gravity-icon.placement-right,.gravity-button-positive[disabled] gravity-icon.placement-right,.gravity-button-negative[disabled] gravity-icon.placement-right,.gravity-button-alternative[disabled] gravity-icon.placement-right,.gravity-button-disabled gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):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);--progressbar-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);--progressbar-color: var(--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);--progressbar-color: var(--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);--progressbar-color: var(--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);--progressbar-color: var(--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-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);--progressbar-color: var(--bg-button-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
43
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, decorators: [{
|
|
44
43
|
type: Component,
|
|
45
|
-
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 <gravity-icon class=\"placement-{{data.icon.placement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-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 gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-disabled:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button[disabled] gravity-icon ::ng-deep svg-icon,[disabled].gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-disabled:not([disabled]) gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-disabled:not([disabled]) gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-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-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"] }]
|
|
46
|
-
}], propDecorators: {
|
|
44
|
+
args: [{ selector: 'gravity-button', template: "<button [attr.data-cy]=\"cypressTag\" class=\"gravity-button-{{type}} gravity-size-{{size}} hr-label md-bold\"\n [disabled]=\"disabled\" [style]=\"{'pointer-events': isLoading ? 'none' : 'initial'}\">\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-content></ng-content>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngFor=\"let iconName of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;cursor:pointer;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-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-primary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-secondary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-positive[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-negative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-alternative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-disabled gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-primary[disabled] gravity-icon.placement-left,.gravity-button-secondary[disabled] gravity-icon.placement-left,.gravity-button-tertiary[disabled] gravity-icon.placement-left,.gravity-button-positive[disabled] gravity-icon.placement-left,.gravity-button-negative[disabled] gravity-icon.placement-left,.gravity-button-alternative[disabled] gravity-icon.placement-left,.gravity-button-disabled gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-primary[disabled] gravity-icon.placement-right,.gravity-button-secondary[disabled] gravity-icon.placement-right,.gravity-button-tertiary[disabled] gravity-icon.placement-right,.gravity-button-positive[disabled] gravity-icon.placement-right,.gravity-button-negative[disabled] gravity-icon.placement-right,.gravity-button-alternative[disabled] gravity-icon.placement-right,.gravity-button-disabled gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):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);--progressbar-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);--progressbar-color: var(--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);--progressbar-color: var(--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);--progressbar-color: var(--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);--progressbar-color: var(--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-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);--progressbar-color: var(--bg-button-disabled);cursor:default}ngb-progressbar{width:100%}\n"] }]
|
|
45
|
+
}], propDecorators: { cypressTag: [{
|
|
46
|
+
type: Input
|
|
47
|
+
}], disabled: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], iconNames: [{
|
|
50
|
+
type: Input
|
|
51
|
+
}], iconPlacement: [{
|
|
52
|
+
type: Input
|
|
53
|
+
}], isLoading: [{
|
|
54
|
+
type: Input
|
|
55
|
+
}], size: [{
|
|
56
|
+
type: Input
|
|
57
|
+
}], type: [{
|
|
47
58
|
type: Input
|
|
48
59
|
}] } });
|
|
49
60
|
|
|
50
61
|
class GravityDropdownListComponent {
|
|
51
62
|
constructor() {
|
|
52
63
|
this.selectedItemResponse = new EventEmitter();
|
|
64
|
+
this.currentLang = 'en';
|
|
65
|
+
this.customPlaceholder = "All";
|
|
66
|
+
this.iconPlacement = "left";
|
|
67
|
+
this.state = "enabled";
|
|
53
68
|
this.dropdownOpen = false;
|
|
54
69
|
}
|
|
55
|
-
ngOnInit() {
|
|
56
|
-
this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
|
|
57
|
-
this.data.state = this.data.state ? this.data.state : "enabled";
|
|
58
|
-
if (this.data.icon) {
|
|
59
|
-
this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
70
|
changeSelectedItem(newSelectedItem) {
|
|
63
71
|
this.selectedItem = newSelectedItem;
|
|
64
72
|
this.selectedItemResponse.emit(this.selectedItem);
|
|
@@ -69,14 +77,40 @@ class GravityDropdownListComponent {
|
|
|
69
77
|
}
|
|
70
78
|
}
|
|
71
79
|
GravityDropdownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
-
GravityDropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { data: "data" }, outputs: { selectedItemResponse: "response" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !dropdownOpen\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-dropdown-field {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !dropdownOpen\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-select [attr.data-cy]=\"data.cypressTag\"\n [bindLabel]=\"data.ngSelectConfig.bindLabel ? data.ngSelectConfig.bindLabel : 'name'\"\n [bindValue]=\"data.ngSelectConfig.bindValue ? data.ngSelectConfig.bindValue : 'id'\"\n [clearable]=\"data.ngSelectConfig.clearable\"\n [items]=\"data.ngSelectConfig.items\"\n [placeholder]=\"selectedItem ? null : data.ngSelectConfig.placeholder ? data.ngSelectConfig.placeholder : 'All'\"\n [readonly]=\"data.state == 'readonly' ? true : null\"\n\n (change)=\"changeSelectedItem($event)\"\n (clear)=\"clearSelectedItem()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n class=\"hr-label md-regular\"\n #ngSelectComponent>\n </ng-select>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n</p>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-icon>\n</ng-template>\n\n", styles: ["body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select{width:-webkit-fill-available}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
80
|
+
GravityDropdownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { currentLang: "currentLang", customPlaceholder: "customPlaceholder", customValue: "customValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconPlacement: "iconPlacement", items: "items", label: "label", ngSelectConfig: "ngSelectConfig", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { selectedItemResponse: "response" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-select [attr.data-cy]=\"cypressTag\"\n [bindLabel]=\"ngSelectConfig.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n [bindValue]=\"ngSelectConfig.bindValue ? ngSelectConfig.bindValue : 'id'\"\n [clearable]=\"ngSelectConfig.clearable\"\n [items]=\"items\"\n [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n [readonly]=\"state == 'readonly' ? true : null\"\n\n [(ngModel)]=\"customValue\"\n\n (change)=\"changeSelectedItem($event)\"\n (clear)=\"clearSelectedItem()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n class=\"hr-label md-regular\"\n #ngSelectComponent>\n </ng-select>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: ["body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
73
81
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
|
|
74
82
|
type: Component,
|
|
75
|
-
args: [{ selector: 'gravity-dropdown-list', template: "<label class=\"hr-body-text md-regular {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !dropdownOpen\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-dropdown-field {{data.state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"selectedItem && !dropdownOpen\">\n <ng-container *ngIf=\"data.icon?.placement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-select [attr.data-cy]=\"data.cypressTag\"\n [bindLabel]=\"data.ngSelectConfig.bindLabel ? data.ngSelectConfig.bindLabel : 'name'\"\n [bindValue]=\"data.ngSelectConfig.bindValue ? data.ngSelectConfig.bindValue : 'id'\"\n [clearable]=\"data.ngSelectConfig.clearable\"\n [items]=\"data.ngSelectConfig.items\"\n [placeholder]=\"selectedItem ? null : data.ngSelectConfig.placeholder ? data.ngSelectConfig.placeholder : 'All'\"\n [readonly]=\"data.state == 'readonly' ? true : null\"\n\n (change)=\"changeSelectedItem($event)\"\n (clear)=\"clearSelectedItem()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n class=\"hr-label md-regular\"\n #ngSelectComponent>\n </ng-select>\n <ng-container *ngIf=\"data.icon?.placement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{data.supportText.type}}\" *ngIf=\"data.supportText\">\n {{data.supportText.content}}\n</p>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{data.icon.placement}}\" [hoverIcon]=\"false\" [iconName]=\"iconName\"\n *ngFor=\"let iconName of data.icon.names\"></gravity-icon>\n</ng-template>\n\n", styles: ["body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select{width:-webkit-fill-available}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"] }]
|
|
83
|
+
args: [{ selector: 'gravity-dropdown-list', template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-select [attr.data-cy]=\"cypressTag\"\n [bindLabel]=\"ngSelectConfig.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n [bindValue]=\"ngSelectConfig.bindValue ? ngSelectConfig.bindValue : 'id'\"\n [clearable]=\"ngSelectConfig.clearable\"\n [items]=\"items\"\n [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n [readonly]=\"state == 'readonly' ? true : null\"\n\n [(ngModel)]=\"customValue\"\n\n (change)=\"changeSelectedItem($event)\"\n (clear)=\"clearSelectedItem()\"\n (close)=\"dropdownOpen = false\"\n (open)=\"dropdownOpen = true\"\n\n class=\"hr-label md-regular\"\n #ngSelectComponent>\n </ng-select>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: ["body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"] }]
|
|
76
84
|
}], propDecorators: { selectedItemResponse: [{
|
|
77
85
|
type: Output,
|
|
78
86
|
args: ['response']
|
|
79
|
-
}],
|
|
87
|
+
}], currentLang: [{
|
|
88
|
+
type: Input
|
|
89
|
+
}], customPlaceholder: [{
|
|
90
|
+
type: Input
|
|
91
|
+
}], customValue: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], cypressTag: [{
|
|
94
|
+
type: Input
|
|
95
|
+
}], iconColor: [{
|
|
96
|
+
type: Input
|
|
97
|
+
}], iconNames: [{
|
|
98
|
+
type: Input
|
|
99
|
+
}], iconPlacement: [{
|
|
100
|
+
type: Input
|
|
101
|
+
}], items: [{
|
|
102
|
+
type: Input
|
|
103
|
+
}], label: [{
|
|
104
|
+
type: Input
|
|
105
|
+
}], ngSelectConfig: [{
|
|
106
|
+
type: Input
|
|
107
|
+
}], required: [{
|
|
108
|
+
type: Input
|
|
109
|
+
}], state: [{
|
|
110
|
+
type: Input
|
|
111
|
+
}], supportTextContent: [{
|
|
112
|
+
type: Input
|
|
113
|
+
}], supportTextType: [{
|
|
80
114
|
type: Input
|
|
81
115
|
}], ngSelectComponent: [{
|
|
82
116
|
type: ViewChild,
|
|
@@ -85,7 +119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
85
119
|
|
|
86
120
|
class GravityTextFieldComponent {
|
|
87
121
|
constructor() {
|
|
122
|
+
this.iconResponse = new EventEmitter();
|
|
88
123
|
this.textFieldValueResponse = new EventEmitter();
|
|
124
|
+
this.autocomplete = 'off';
|
|
125
|
+
this.clickOnIconName = false;
|
|
126
|
+
this.currentLang = 'en';
|
|
127
|
+
this.iconPlacement = "left";
|
|
128
|
+
this.inputContentType = "text";
|
|
129
|
+
this.state = "enabled";
|
|
130
|
+
this.textFieldType = "input";
|
|
89
131
|
this.focusInput = false;
|
|
90
132
|
this.inputValue = '';
|
|
91
133
|
this.placeholders = {
|
|
@@ -94,26 +136,20 @@ class GravityTextFieldComponent {
|
|
|
94
136
|
};
|
|
95
137
|
}
|
|
96
138
|
ngOnInit() {
|
|
97
|
-
this.
|
|
98
|
-
this.data.state = this.data.state ? this.data.state : "enabled";
|
|
99
|
-
this.data.textFieldType = this.data.textFieldType ? this.data.textFieldType : 'input';
|
|
100
|
-
this.inputValue = this.data.customInputValue ? this.data.customInputValue : '';
|
|
101
|
-
if (this.data.icon) {
|
|
102
|
-
this.data.icon.placement = this.data.icon.placement ? this.data.icon.placement : 'left';
|
|
103
|
-
}
|
|
139
|
+
this.inputValue = this.customInputValue ? this.customInputValue : '';
|
|
104
140
|
}
|
|
105
141
|
ngAfterViewInit() {
|
|
106
|
-
this.changeInputValue();
|
|
142
|
+
// this.changeInputValue();
|
|
107
143
|
}
|
|
108
144
|
getPlaceholder() {
|
|
109
|
-
if (this.
|
|
110
|
-
return this.
|
|
145
|
+
if (this.customPlaceholder && this.customPlaceholder != '') {
|
|
146
|
+
return this.customPlaceholder;
|
|
111
147
|
}
|
|
112
|
-
else if (!this.
|
|
113
|
-
return this.
|
|
148
|
+
else if (!this.placeholderType || this.placeholderType == 'default') {
|
|
149
|
+
return this.label;
|
|
114
150
|
}
|
|
115
151
|
else {
|
|
116
|
-
return this.placeholders[this.
|
|
152
|
+
return this.placeholders[this.placeholderType];
|
|
117
153
|
}
|
|
118
154
|
}
|
|
119
155
|
clearInput() {
|
|
@@ -126,7 +162,7 @@ class GravityTextFieldComponent {
|
|
|
126
162
|
if (clearInput) {
|
|
127
163
|
this.inputValue = '';
|
|
128
164
|
}
|
|
129
|
-
else if (this.
|
|
165
|
+
else if (this.textFieldType == 'input') {
|
|
130
166
|
this.inputValue = this.inputElement.nativeElement.value;
|
|
131
167
|
}
|
|
132
168
|
else {
|
|
@@ -134,16 +170,61 @@ class GravityTextFieldComponent {
|
|
|
134
170
|
}
|
|
135
171
|
this.textFieldValueResponse.emit(this.inputValue);
|
|
136
172
|
}
|
|
173
|
+
handleIconClick(iconName) {
|
|
174
|
+
if (this.iconNames.length == 1) {
|
|
175
|
+
this.iconResponse.emit(true);
|
|
176
|
+
}
|
|
177
|
+
else if (this.clickOnIconName == iconName) {
|
|
178
|
+
this.iconResponse.emit(true);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
137
181
|
}
|
|
138
182
|
GravityTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
-
GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: {
|
|
183
|
+
GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { autocomplete: "autocomplete", clickOnIconName: "clickOnIconName", currentLang: "currentLang", customPlaceholder: "customPlaceholder", customInputValue: "customInputValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconPlacement: "iconPlacement", inputContentType: "inputContentType", label: "label", placeholderType: "placeholderType", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType", textFieldType: "textFieldType", validations: "validations" }, outputs: { iconResponse: "clickIcon", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 500\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"handleIconClick(name)\" class=\"placement-{{iconPlacement}} {{clickOnIconName ? 'pointer' : ''}}\"\n [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem;pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;outline:none;padding:0;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
140
184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
141
185
|
type: Component,
|
|
142
|
-
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text md-regular {{
|
|
143
|
-
}], propDecorators: {
|
|
186
|
+
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 500\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"handleIconClick(name)\" class=\"placement-{{iconPlacement}} {{clickOnIconName ? 'pointer' : ''}}\"\n [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem;pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;outline:none;padding:0;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
|
|
187
|
+
}], propDecorators: { iconResponse: [{
|
|
188
|
+
type: Output,
|
|
189
|
+
args: ['clickIcon']
|
|
190
|
+
}], textFieldValueResponse: [{
|
|
144
191
|
type: Output,
|
|
145
192
|
args: ['response']
|
|
146
|
-
}],
|
|
193
|
+
}], autocomplete: [{
|
|
194
|
+
type: Input
|
|
195
|
+
}], clickOnIconName: [{
|
|
196
|
+
type: Input
|
|
197
|
+
}], currentLang: [{
|
|
198
|
+
type: Input
|
|
199
|
+
}], customPlaceholder: [{
|
|
200
|
+
type: Input
|
|
201
|
+
}], customInputValue: [{
|
|
202
|
+
type: Input
|
|
203
|
+
}], cypressTag: [{
|
|
204
|
+
type: Input
|
|
205
|
+
}], iconColor: [{
|
|
206
|
+
type: Input
|
|
207
|
+
}], iconNames: [{
|
|
208
|
+
type: Input
|
|
209
|
+
}], iconPlacement: [{
|
|
210
|
+
type: Input
|
|
211
|
+
}], inputContentType: [{
|
|
212
|
+
type: Input
|
|
213
|
+
}], label: [{
|
|
214
|
+
type: Input
|
|
215
|
+
}], placeholderType: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], required: [{
|
|
218
|
+
type: Input
|
|
219
|
+
}], state: [{
|
|
220
|
+
type: Input
|
|
221
|
+
}], supportTextContent: [{
|
|
222
|
+
type: Input
|
|
223
|
+
}], supportTextType: [{
|
|
224
|
+
type: Input
|
|
225
|
+
}], textFieldType: [{
|
|
226
|
+
type: Input
|
|
227
|
+
}], validations: [{
|
|
147
228
|
type: Input
|
|
148
229
|
}], inputElement: [{
|
|
149
230
|
type: ViewChild,
|
|
@@ -1095,10 +1176,10 @@ class GravityDialogComponent {
|
|
|
1095
1176
|
}
|
|
1096
1177
|
}
|
|
1097
1178
|
GravityDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
1098
|
-
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=\"dialog-header\">\n <div class=\"hr-title lg-bold title\">\n <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n {{dialogContent.title}}\n </div>\n <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'x'\" *ngIf=\"dialogContent.showCloseIcon\"\n [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\">\n <ng-container *ngTemplateOutlet=\"dialogContent.
|
|
1179
|
+
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=\"dialog-header\">\n <div class=\"hr-title lg-bold title\">\n <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n {{dialogContent.title}}\n </div>\n <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'x'\" *ngIf=\"dialogContent.showCloseIcon\"\n [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\">\n <ng-container *ngIf=\"dialogContent.templateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.templateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.templateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.templateComponent\"></ng-container>\n </ng-container>\n</div>\n\n<div class=\"dialog-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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;height:2.5rem;justify-content:center;line-height:0;margin-right:1rem;width:2.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;width:2rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:2rem 3rem;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
1099
1180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, decorators: [{
|
|
1100
1181
|
type: Component,
|
|
1101
|
-
args: [{ template: "<div class=\"dialog-header\">\n <div class=\"hr-title lg-bold title\">\n <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n {{dialogContent.title}}\n </div>\n <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'x'\" *ngIf=\"dialogContent.showCloseIcon\"\n [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\">\n <ng-container *ngTemplateOutlet=\"dialogContent.
|
|
1182
|
+
args: [{ template: "<div class=\"dialog-header\">\n <div class=\"hr-title lg-bold title\">\n <gravity-icon class=\"title-icon\" *ngIf=\"dialogContent.titleIconName && dialogContent.titleIconName.length > 0\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"></gravity-icon>\n {{dialogContent.title}}\n </div>\n <gravity-icon class=\"close\" (click)=\"closeModal()\" [iconName]=\"'x'\" *ngIf=\"dialogContent.showCloseIcon\"\n [title]=\"'Close'\"></gravity-icon>\n</div>\n\n<div class=\"dialog-body\">\n <ng-container *ngIf=\"dialogContent.templateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.templateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.templateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.templateComponent\"></ng-container>\n </ng-container>\n</div>\n\n<div class=\"dialog-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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;height:2.5rem;justify-content:center;line-height:0;margin-right:1rem;width:2.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;width:2rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:2rem 3rem;position:relative}\n"] }]
|
|
1102
1183
|
}], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
|
|
1103
1184
|
type: Input
|
|
1104
1185
|
}] } });
|
|
@@ -1171,7 +1252,8 @@ GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
|
|
|
1171
1252
|
NgbToastModule,
|
|
1172
1253
|
NgSelectModule,
|
|
1173
1254
|
NgxPrettyCheckboxModule,
|
|
1174
|
-
ReactiveFormsModule
|
|
1255
|
+
ReactiveFormsModule,
|
|
1256
|
+
NgbProgressbarModule], exports: [GravityButtonComponent,
|
|
1175
1257
|
GravityCalendarComponent,
|
|
1176
1258
|
GravityCheckboxComponent,
|
|
1177
1259
|
GravityDialogComponent,
|
|
@@ -1193,7 +1275,8 @@ GravityDesignSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0
|
|
|
1193
1275
|
NgbToastModule,
|
|
1194
1276
|
NgSelectModule,
|
|
1195
1277
|
NgxPrettyCheckboxModule,
|
|
1196
|
-
ReactiveFormsModule,
|
|
1278
|
+
ReactiveFormsModule,
|
|
1279
|
+
NgbProgressbarModule, GravityTooltipModule] });
|
|
1197
1280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, decorators: [{
|
|
1198
1281
|
type: NgModule,
|
|
1199
1282
|
args: [{
|
|
@@ -1222,7 +1305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1222
1305
|
NgbToastModule,
|
|
1223
1306
|
NgSelectModule,
|
|
1224
1307
|
NgxPrettyCheckboxModule,
|
|
1225
|
-
ReactiveFormsModule
|
|
1308
|
+
ReactiveFormsModule,
|
|
1309
|
+
NgbProgressbarModule
|
|
1226
1310
|
],
|
|
1227
1311
|
exports: [
|
|
1228
1312
|
GravityButtonComponent,
|
|
@@ -1246,7 +1330,7 @@ class GravityDialogManagerService {
|
|
|
1246
1330
|
this.gravityInstantNotificationsService = gravityInstantNotificationsService;
|
|
1247
1331
|
}
|
|
1248
1332
|
openModal(gravityDialogContentInterface) {
|
|
1249
|
-
const modalRef = this.ngbModal.open(GravityDialogComponent);
|
|
1333
|
+
const modalRef = this.ngbModal.open(GravityDialogComponent, { centered: true });
|
|
1250
1334
|
modalRef.componentInstance.dialogContent = gravityDialogContentInterface;
|
|
1251
1335
|
}
|
|
1252
1336
|
throwInformativeNotification(notificationContent) {
|