@progressio_resources/gravity-design-system 1.1.21 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{esm2020 → esm2022}/lib/components/gravity-attach-file/gravity-attach-file.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-button/gravity-button.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-calendar/gravity-calendar.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-checkbox/gravity-checkbox.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-dialog/gravity-dialog.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-icon/gravity-icon.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-notification/gravity-notification.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-notification-instant/gravity-notification-instant-container.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-radio-button/gravity-radio-button.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-switch/gravity-switch.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/components/gravity-text-field/gravity-text-field.component.mjs +4 -4
- package/esm2022/lib/gravity-design-system.module.mjs +119 -0
- package/{esm2020 → esm2022}/lib/services/gravity-dialog-manager.service.mjs +4 -4
- package/{esm2020 → esm2022}/lib/services/gravity-instant-notifications.service.mjs +4 -4
- package/{esm2020 → esm2022}/lib/vendor/gravity-tooltip/gravity-tooltip.component.mjs +4 -4
- package/{esm2020 → esm2022}/lib/vendor/gravity-tooltip/gravity-tooltip.directive.mjs +4 -4
- package/{esm2020 → esm2022}/lib/vendor/gravity-tooltip/gravity-tooltip.module.mjs +7 -7
- package/{fesm2020 → fesm2022}/progressio_resources-gravity-design-system.mjs +98 -98
- package/{fesm2020 → fesm2022}/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-attach-file/gravity-attach-file.component.d.ts +1 -1
- package/lib/components/gravity-button/gravity-button.component.d.ts +1 -1
- package/lib/components/gravity-calendar/gravity-calendar.component.d.ts +1 -1
- package/lib/components/gravity-checkbox/gravity-checkbox.component.d.ts +1 -1
- package/lib/components/gravity-dialog/gravity-dialog.component.d.ts +1 -1
- package/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.d.ts +1 -1
- package/lib/components/gravity-icon/gravity-icon.component.d.ts +1 -1
- package/lib/components/gravity-notification/gravity-notification.component.d.ts +1 -1
- package/lib/components/gravity-notification-instant/gravity-notification-instant-container.component.d.ts +1 -1
- package/lib/components/gravity-radio-button/gravity-radio-button.component.d.ts +1 -1
- package/lib/components/gravity-switch/gravity-switch.component.d.ts +1 -1
- package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +1 -1
- package/lib/vendor/gravity-tooltip/gravity-tooltip.component.d.ts +1 -1
- package/lib/vendor/gravity-tooltip/gravity-tooltip.directive.d.ts +1 -1
- package/package.json +15 -21
- package/esm2020/lib/gravity-design-system.module.mjs +0 -119
- package/fesm2015/progressio_resources-gravity-design-system.mjs +0 -1451
- package/fesm2015/progressio_resources-gravity-design-system.mjs.map +0 -1
- /package/{esm2020 → esm2022}/lib/components/gravity-notification/gravity-notification-content.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/vendor/gravity-tooltip/index.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/vendor/gravity-tooltip/options.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/vendor/gravity-tooltip/options.mjs +0 -0
- /package/{esm2020 → esm2022}/lib/vendor/gravity-tooltip/options.service.mjs +0 -0
- /package/{esm2020 → esm2022}/progressio_resources-gravity-design-system.mjs +0 -0
- /package/{esm2020 → esm2022}/public-api.mjs +0 -0
|
@@ -1,1451 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable } from '@angular/core';
|
|
3
|
-
import * as i1$1 from '@angular/common';
|
|
4
|
-
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i2 from '@angular/forms';
|
|
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';
|
|
9
|
-
import * as i1 from 'angular-svg-icon';
|
|
10
|
-
import { AngularSvgIconModule } from 'angular-svg-icon';
|
|
11
|
-
import * as i3 from '@ng-select/ng-select';
|
|
12
|
-
import { NgSelectModule } from '@ng-select/ng-select';
|
|
13
|
-
import * as i2$2 from 'angular-svg-icon-preloader';
|
|
14
|
-
import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
|
|
15
|
-
import * as i2$1 from 'ngx-pretty-checkbox';
|
|
16
|
-
import { NgxPrettyCheckboxModule } from 'ngx-pretty-checkbox';
|
|
17
|
-
|
|
18
|
-
class GravityIconComponent {
|
|
19
|
-
}
|
|
20
|
-
GravityIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
-
GravityIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityIconComponent, selector: "gravity-icon", inputs: { customIconColorVariable: "customIconColorVariable", iconName: "iconName", hoverIcon: "hoverIcon" }, ngImport: i0, template: "<svg-icon class=\"{{hoverIcon ? 'with-hover' : ''}}\"\n name=\"{{iconName}}\"\n\n [style]=\"customIconColorVariable ? {'--icon-color': customIconColorVariable} : null\"></svg-icon>\n", styles: [":host{display:block;height:var(--icon-height);--icon-color: var(--icon-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem;width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }] });
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityIconComponent, decorators: [{
|
|
23
|
-
type: Component,
|
|
24
|
-
args: [{ selector: 'gravity-icon', template: "<svg-icon class=\"{{hoverIcon ? 'with-hover' : ''}}\"\n name=\"{{iconName}}\"\n\n [style]=\"customIconColorVariable ? {'--icon-color': customIconColorVariable} : null\"></svg-icon>\n", styles: [":host{display:block;height:var(--icon-height);--icon-color: var(--icon-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem;width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"] }]
|
|
25
|
-
}], propDecorators: { customIconColorVariable: [{
|
|
26
|
-
type: Input
|
|
27
|
-
}], iconName: [{
|
|
28
|
-
type: Input
|
|
29
|
-
}], hoverIcon: [{
|
|
30
|
-
type: Input
|
|
31
|
-
}] } });
|
|
32
|
-
|
|
33
|
-
class GravityButtonComponent {
|
|
34
|
-
constructor() {
|
|
35
|
-
this.isLoading = false;
|
|
36
|
-
this.size = "md";
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
GravityButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
-
GravityButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", iconName: "iconName", 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]=\"isLoading ? {'pointer-events': 'none'} : {}\">\n <ng-container *ngIf=\"!isLoading\">\n <gravity-icon class=\"placement-left\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"></gravity-icon>\n <ng-content></ng-content>\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", styles: [":host{display:block;width:max-content}.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.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-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-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, decorators: [{
|
|
42
|
-
type: Component,
|
|
43
|
-
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]=\"isLoading ? {'pointer-events': 'none'} : {}\">\n <ng-container *ngIf=\"!isLoading\">\n <gravity-icon class=\"placement-left\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngIf=\"iconName\"></gravity-icon>\n <ng-content></ng-content>\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", styles: [":host{display:block;width:max-content}.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.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-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-disabled);--button-border-color: var(--bg-disabled);--button-text-color: var(--on-bg-disabled);--progressbar-color: var(--bg-disabled);cursor:default}ngb-progressbar{width:100%}\n"] }]
|
|
44
|
-
}], propDecorators: { cypressTag: [{
|
|
45
|
-
type: Input
|
|
46
|
-
}], disabled: [{
|
|
47
|
-
type: Input
|
|
48
|
-
}], iconName: [{
|
|
49
|
-
type: Input
|
|
50
|
-
}], isLoading: [{
|
|
51
|
-
type: Input
|
|
52
|
-
}], size: [{
|
|
53
|
-
type: Input
|
|
54
|
-
}], type: [{
|
|
55
|
-
type: Input
|
|
56
|
-
}] } });
|
|
57
|
-
|
|
58
|
-
class GravityDropdownListComponent {
|
|
59
|
-
constructor() {
|
|
60
|
-
this.selectedItemResponse = new EventEmitter();
|
|
61
|
-
this.currentLang = 'en';
|
|
62
|
-
this.customPlaceholder = "All";
|
|
63
|
-
this.iconPlacement = "left";
|
|
64
|
-
this.state = "enabled";
|
|
65
|
-
this.dropdownOpen = false;
|
|
66
|
-
}
|
|
67
|
-
changeSelectedItem(newSelectedItem) {
|
|
68
|
-
this.selectedItem = newSelectedItem;
|
|
69
|
-
this.selectedItemResponse.emit(this.selectedItem);
|
|
70
|
-
}
|
|
71
|
-
clearSelectedItem() {
|
|
72
|
-
this.ngSelectComponent.clearItem(this.selectedItem);
|
|
73
|
-
this.changeSelectedItem(undefined);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
GravityDropdownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
77
|
-
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 sm-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 [class.with-icons]=\"iconNames\"\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: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}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}:host{display:block}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.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.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 div[role=combobox]{visibility:hidden}.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 gravity-icon{--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 gravity-icon{--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.readonly gravity-icon{--icon-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"] }] });
|
|
78
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
|
|
79
|
-
type: Component,
|
|
80
|
-
args: [{ selector: 'gravity-dropdown-list', template: "<label class=\"hr-body-text sm-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 [class.with-icons]=\"iconNames\"\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: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}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}:host{display:block}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.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.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 div[role=combobox]{visibility:hidden}.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 gravity-icon{--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 gravity-icon{--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.readonly gravity-icon{--icon-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"] }]
|
|
81
|
-
}], propDecorators: { selectedItemResponse: [{
|
|
82
|
-
type: Output,
|
|
83
|
-
args: ['response']
|
|
84
|
-
}], currentLang: [{
|
|
85
|
-
type: Input
|
|
86
|
-
}], customPlaceholder: [{
|
|
87
|
-
type: Input
|
|
88
|
-
}], customValue: [{
|
|
89
|
-
type: Input
|
|
90
|
-
}], cypressTag: [{
|
|
91
|
-
type: Input
|
|
92
|
-
}], iconColor: [{
|
|
93
|
-
type: Input
|
|
94
|
-
}], iconNames: [{
|
|
95
|
-
type: Input
|
|
96
|
-
}], iconPlacement: [{
|
|
97
|
-
type: Input
|
|
98
|
-
}], items: [{
|
|
99
|
-
type: Input
|
|
100
|
-
}], label: [{
|
|
101
|
-
type: Input
|
|
102
|
-
}], ngSelectConfig: [{
|
|
103
|
-
type: Input
|
|
104
|
-
}], required: [{
|
|
105
|
-
type: Input
|
|
106
|
-
}], state: [{
|
|
107
|
-
type: Input
|
|
108
|
-
}], supportTextContent: [{
|
|
109
|
-
type: Input
|
|
110
|
-
}], supportTextType: [{
|
|
111
|
-
type: Input
|
|
112
|
-
}], ngSelectComponent: [{
|
|
113
|
-
type: ViewChild,
|
|
114
|
-
args: ['ngSelectComponent', { static: false }]
|
|
115
|
-
}] } });
|
|
116
|
-
|
|
117
|
-
class GravityTextFieldComponent {
|
|
118
|
-
constructor() {
|
|
119
|
-
this.iconResponse = new EventEmitter();
|
|
120
|
-
this.textFieldValueResponse = new EventEmitter();
|
|
121
|
-
this.autocomplete = 'off';
|
|
122
|
-
this.clickOnIconName = false;
|
|
123
|
-
this.currentLang = 'en';
|
|
124
|
-
this.iconPlacement = "left";
|
|
125
|
-
this.inputContentType = "text";
|
|
126
|
-
this.placeholderType = "default";
|
|
127
|
-
this.prefix = "";
|
|
128
|
-
this.state = "enabled";
|
|
129
|
-
this.supportTextType = "neutro";
|
|
130
|
-
this.textFieldType = "input";
|
|
131
|
-
this.focusInput = false;
|
|
132
|
-
this.inputValue = '';
|
|
133
|
-
this.placeholders = {
|
|
134
|
-
'email': 'test@email.com',
|
|
135
|
-
'url': 'https://www.test.com'
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
ngOnInit() {
|
|
139
|
-
this.inputValue = this.customInputValue ? this.customInputValue : '';
|
|
140
|
-
}
|
|
141
|
-
getPlaceholder() {
|
|
142
|
-
if (this.customPlaceholder && this.customPlaceholder != '') {
|
|
143
|
-
return this.customPlaceholder;
|
|
144
|
-
}
|
|
145
|
-
else if (this.placeholderType == 'default') {
|
|
146
|
-
return this.label;
|
|
147
|
-
}
|
|
148
|
-
else {
|
|
149
|
-
return this.placeholders[this.placeholderType];
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
clearInput() {
|
|
153
|
-
this.changeInputValue(true);
|
|
154
|
-
}
|
|
155
|
-
onInputKeyup() {
|
|
156
|
-
this.changeInputValue();
|
|
157
|
-
}
|
|
158
|
-
changeInputValue(clearInput = false) {
|
|
159
|
-
if (clearInput) {
|
|
160
|
-
this.inputValue = '';
|
|
161
|
-
}
|
|
162
|
-
else if (this.textFieldType == 'input') {
|
|
163
|
-
this.inputValue = this.inputElement.nativeElement.value;
|
|
164
|
-
}
|
|
165
|
-
else {
|
|
166
|
-
this.inputValue = this.textAreaElement.nativeElement.value;
|
|
167
|
-
}
|
|
168
|
-
if (this.inputValue == '') {
|
|
169
|
-
this.textFieldValueResponse.emit('');
|
|
170
|
-
}
|
|
171
|
-
else {
|
|
172
|
-
this.textFieldValueResponse.emit(this.prefix + this.inputValue);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
handleIconClick(iconName) {
|
|
176
|
-
if (this.iconNames.length == 1) {
|
|
177
|
-
this.iconResponse.emit(true);
|
|
178
|
-
}
|
|
179
|
-
else if (this.clickOnIconName == iconName) {
|
|
180
|
-
this.iconResponse.emit(true);
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
GravityTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
185
|
-
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", prefix: "prefix", 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 sm-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 <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\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)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"iconColor\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.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}:host{display:block}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 .prefix{color:var(--text-field-input-field-input-color)}.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{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;min-height:1rem;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 gravity-icon{--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 gravity-icon{--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.readonly gravity-icon{--icon-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"] }] });
|
|
186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
187
|
-
type: Component,
|
|
188
|
-
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text sm-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 <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\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)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"iconColor\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.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}:host{display:block}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 .prefix{color:var(--text-field-input-field-input-color)}.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{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;min-height:1rem;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 gravity-icon{--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 gravity-icon{--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.readonly gravity-icon{--icon-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"] }]
|
|
189
|
-
}], propDecorators: { iconResponse: [{
|
|
190
|
-
type: Output,
|
|
191
|
-
args: ['clickIcon']
|
|
192
|
-
}], textFieldValueResponse: [{
|
|
193
|
-
type: Output,
|
|
194
|
-
args: ['response']
|
|
195
|
-
}], autocomplete: [{
|
|
196
|
-
type: Input
|
|
197
|
-
}], clickOnIconName: [{
|
|
198
|
-
type: Input
|
|
199
|
-
}], currentLang: [{
|
|
200
|
-
type: Input
|
|
201
|
-
}], customPlaceholder: [{
|
|
202
|
-
type: Input
|
|
203
|
-
}], customInputValue: [{
|
|
204
|
-
type: Input
|
|
205
|
-
}], cypressTag: [{
|
|
206
|
-
type: Input
|
|
207
|
-
}], iconColor: [{
|
|
208
|
-
type: Input
|
|
209
|
-
}], iconNames: [{
|
|
210
|
-
type: Input
|
|
211
|
-
}], iconPlacement: [{
|
|
212
|
-
type: Input
|
|
213
|
-
}], inputContentType: [{
|
|
214
|
-
type: Input
|
|
215
|
-
}], label: [{
|
|
216
|
-
type: Input
|
|
217
|
-
}], placeholderType: [{
|
|
218
|
-
type: Input
|
|
219
|
-
}], prefix: [{
|
|
220
|
-
type: Input
|
|
221
|
-
}], required: [{
|
|
222
|
-
type: Input
|
|
223
|
-
}], state: [{
|
|
224
|
-
type: Input
|
|
225
|
-
}], supportTextContent: [{
|
|
226
|
-
type: Input
|
|
227
|
-
}], supportTextType: [{
|
|
228
|
-
type: Input
|
|
229
|
-
}], textFieldType: [{
|
|
230
|
-
type: Input
|
|
231
|
-
}], validations: [{
|
|
232
|
-
type: Input
|
|
233
|
-
}], inputElement: [{
|
|
234
|
-
type: ViewChild,
|
|
235
|
-
args: ['inputElement', { static: false }]
|
|
236
|
-
}], textAreaElement: [{
|
|
237
|
-
type: ViewChild,
|
|
238
|
-
args: ['textAreaElement', { static: false }]
|
|
239
|
-
}] } });
|
|
240
|
-
|
|
241
|
-
class GravityTooltipComponent {
|
|
242
|
-
transitionEnd() {
|
|
243
|
-
if (this.show) {
|
|
244
|
-
this.events.emit({
|
|
245
|
-
type: 'shown'
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
set show(value) {
|
|
250
|
-
if (value) {
|
|
251
|
-
this.setPosition();
|
|
252
|
-
}
|
|
253
|
-
this._show = this.hostClassShow = value;
|
|
254
|
-
}
|
|
255
|
-
get show() {
|
|
256
|
-
return this._show;
|
|
257
|
-
}
|
|
258
|
-
get placement() {
|
|
259
|
-
return this.data.options.placement;
|
|
260
|
-
}
|
|
261
|
-
get autoPlacement() {
|
|
262
|
-
return this.data.options.autoPlacement;
|
|
263
|
-
}
|
|
264
|
-
get element() {
|
|
265
|
-
return this.data.element;
|
|
266
|
-
}
|
|
267
|
-
get elementPosition() {
|
|
268
|
-
return this.data.elementPosition;
|
|
269
|
-
}
|
|
270
|
-
get options() {
|
|
271
|
-
return this.data.options;
|
|
272
|
-
}
|
|
273
|
-
get value() {
|
|
274
|
-
return this.data.value;
|
|
275
|
-
}
|
|
276
|
-
get tooltipOffset() {
|
|
277
|
-
return Number(this.data.options.offset);
|
|
278
|
-
}
|
|
279
|
-
get isThemeLight() {
|
|
280
|
-
return this.options['theme'] === 'light';
|
|
281
|
-
}
|
|
282
|
-
constructor(elementRef, renderer) {
|
|
283
|
-
this.elementRef = elementRef;
|
|
284
|
-
this.renderer = renderer;
|
|
285
|
-
this._show = false;
|
|
286
|
-
this.events = new EventEmitter();
|
|
287
|
-
}
|
|
288
|
-
ngOnInit() {
|
|
289
|
-
this.setCustomClass();
|
|
290
|
-
this.setStyles();
|
|
291
|
-
}
|
|
292
|
-
setPosition() {
|
|
293
|
-
if (this.setHostStyle(this.placement)) {
|
|
294
|
-
this.setPlacementClass(this.placement);
|
|
295
|
-
return;
|
|
296
|
-
}
|
|
297
|
-
else {
|
|
298
|
-
/* Is tooltip outside the visible area */
|
|
299
|
-
const placements = ['top', 'right', 'bottom', 'left'];
|
|
300
|
-
let isPlacementSet;
|
|
301
|
-
for (const placement of placements) {
|
|
302
|
-
if (this.setHostStyle(placement)) {
|
|
303
|
-
this.setPlacementClass(placement);
|
|
304
|
-
isPlacementSet = true;
|
|
305
|
-
return;
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
/* Set original placement */
|
|
309
|
-
if (!isPlacementSet) {
|
|
310
|
-
this.setHostStyle(this.placement, true);
|
|
311
|
-
this.setPlacementClass(this.placement);
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
setPlacementClass(placement) {
|
|
316
|
-
this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-' + placement);
|
|
317
|
-
}
|
|
318
|
-
setHostStyle(placement, disableAutoPlacement = false) {
|
|
319
|
-
const isSvg = this.element instanceof SVGElement;
|
|
320
|
-
const tooltip = this.elementRef.nativeElement;
|
|
321
|
-
const isCustomPosition = !this.elementPosition.right;
|
|
322
|
-
let elementHeight = isSvg ? this.element.getBoundingClientRect().height : this.element.offsetHeight;
|
|
323
|
-
let elementWidth = isSvg ? this.element.getBoundingClientRect().width : this.element.offsetWidth;
|
|
324
|
-
const tooltipHeight = tooltip.clientHeight;
|
|
325
|
-
const tooltipWidth = tooltip.clientWidth;
|
|
326
|
-
const scrollY = window.pageYOffset;
|
|
327
|
-
if (isCustomPosition) {
|
|
328
|
-
elementHeight = 0;
|
|
329
|
-
elementWidth = 0;
|
|
330
|
-
}
|
|
331
|
-
let topStyle;
|
|
332
|
-
let leftStyle;
|
|
333
|
-
if (placement === 'top') {
|
|
334
|
-
topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
|
|
335
|
-
}
|
|
336
|
-
if (placement === 'bottom') {
|
|
337
|
-
topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
|
|
338
|
-
}
|
|
339
|
-
if (placement === 'top' || placement === 'bottom') {
|
|
340
|
-
leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
|
|
341
|
-
}
|
|
342
|
-
if (placement === 'left') {
|
|
343
|
-
leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
|
|
344
|
-
}
|
|
345
|
-
if (placement === 'right') {
|
|
346
|
-
leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
|
|
347
|
-
}
|
|
348
|
-
if (placement === 'left' || placement === 'right') {
|
|
349
|
-
topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
|
|
350
|
-
}
|
|
351
|
-
/* Is tooltip outside the visible area */
|
|
352
|
-
if (this.autoPlacement && !disableAutoPlacement) {
|
|
353
|
-
const topEdge = topStyle;
|
|
354
|
-
const bottomEdge = topStyle + tooltipHeight;
|
|
355
|
-
const leftEdge = leftStyle;
|
|
356
|
-
const rightEdge = leftStyle + tooltipWidth;
|
|
357
|
-
const bodyHeight = window.innerHeight + scrollY;
|
|
358
|
-
const bodyWidth = document.body.clientWidth;
|
|
359
|
-
if (topEdge < 0 || bottomEdge > bodyHeight || leftEdge < 0 || rightEdge > bodyWidth) {
|
|
360
|
-
return false;
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
this.hostStyleTop = topStyle + 'px';
|
|
364
|
-
this.hostStyleLeft = leftStyle + 'px';
|
|
365
|
-
return true;
|
|
366
|
-
}
|
|
367
|
-
setZIndex() {
|
|
368
|
-
if (this.options['zIndex'] !== 0) {
|
|
369
|
-
this.hostStyleZIndex = this.options['zIndex'];
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
setPointerEvents() {
|
|
373
|
-
if (this.options['pointerEvents']) {
|
|
374
|
-
this.hostStylePointerEvents = this.options['pointerEvents'];
|
|
375
|
-
}
|
|
376
|
-
}
|
|
377
|
-
setCustomClass() {
|
|
378
|
-
if (this.options['tooltipClass']) {
|
|
379
|
-
this.options['tooltipClass'].split(' ').forEach((className) => {
|
|
380
|
-
this.renderer.addClass(this.elementRef.nativeElement, className);
|
|
381
|
-
});
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
setAnimationDuration() {
|
|
385
|
-
if (Number(this.options['animationDuration']) != this.options['animationDurationDefault']) {
|
|
386
|
-
this.hostStyleTransition = 'opacity ' + this.options['animationDuration'] + 'ms';
|
|
387
|
-
}
|
|
388
|
-
}
|
|
389
|
-
setStyles() {
|
|
390
|
-
this.setZIndex();
|
|
391
|
-
this.setPointerEvents();
|
|
392
|
-
this.setAnimationDuration();
|
|
393
|
-
this.hostClassShadow = this.options['shadow'];
|
|
394
|
-
this.hostClassLight = this.isThemeLight;
|
|
395
|
-
this.hostStyleMaxWidth = this.options['maxWidth'];
|
|
396
|
-
this.hostStyleWidth = this.options['width'] ? this.options['width'] : '';
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
GravityTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
-
GravityTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTooltipComponent, selector: "tooltip", inputs: { data: "data", show: "show" }, host: { listeners: { "transitionend": "transitionEnd($event)" }, properties: { "style.top": "this.hostStyleTop", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" }, classAttribute: "tooltip" }, ngImport: i0, template: "<div *ngIf=\"isThemeLight\" class=\"tooltip-arrow\"></div>\n\n<div *ngIf=\"options['contentType'] === 'template' else htmlOrStringTemplate\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n</div>\n\n<ng-template #htmlOrStringTemplate>\n <div [innerHTML]=\"value\"></div>\n</ng-template>\n", styles: [":host{max-width:200px;background-color:var(--bg-tooltip-primary);color:var(--on-bg-tooltip-primary);text-align:center;border-radius:6px;padding:5px 8px;position:absolute;pointer-events:none;z-index:1000;display:block;opacity:0;transition:opacity .3s;top:0;left:0}:host.tooltip-show{opacity:1}:host.tooltip-shadow{box-shadow:0 7px 15px -5px #0006}:host.tooltip-light.tooltip-shadow{box-shadow:0 5px 15px -5px #0006}:host.tooltip:after{content:\"\";position:absolute;border-style:solid}:host.tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--bg-tooltip-primary) transparent transparent transparent}:host.tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--bg-tooltip-primary) transparent}:host.tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--bg-tooltip-primary)}:host.tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--bg-tooltip-primary) transparent transparent}:host.tooltip-light:after{display:none}:host.tooltip-light{border:1px solid rgba(0,0,0,.06);background-color:#fff;color:#000}:host.tooltip-light .tooltip-arrow{position:absolute;width:10px;height:10px;transform:rotate(135deg);background-color:#00000012}:host.tooltip-light .tooltip-arrow:after{background-color:#fff;content:\"\";display:block;position:absolute;width:10px;height:10px}:host.tooltip-top.tooltip-light{margin-top:-2px}:host.tooltip-top.tooltip-light .tooltip-arrow{top:100%;left:50%;margin-top:-4px;margin-left:-5px;background:linear-gradient(to bottom left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-top.tooltip-light .tooltip-arrow:after{top:1px;right:1px}:host.tooltip-bottom.tooltip-light .tooltip-arrow{bottom:100%;left:50%;margin-bottom:-4px;margin-left:-5px;background:linear-gradient(to top right,rgba(0,0,0,.1) 50%,transparent 50%)}:host.tooltip-bottom.tooltip-light .tooltip-arrow:after{top:-1px;right:-1px}:host.tooltip-left.tooltip-light .tooltip-arrow{top:50%;left:100%;margin-top:-5px;margin-left:-4px;background:linear-gradient(to bottom right,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-left.tooltip-light .tooltip-arrow:after{top:1px;right:-1px}:host.tooltip-right.tooltip-light .tooltip-arrow{top:50%;right:100%;margin-top:-5px;margin-right:-4px;background:linear-gradient(to top left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-right.tooltip-light .tooltip-arrow:after{top:-1px;right:1px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipComponent, decorators: [{
|
|
402
|
-
type: Component,
|
|
403
|
-
args: [{ selector: 'tooltip', host: { 'class': 'tooltip' }, template: "<div *ngIf=\"isThemeLight\" class=\"tooltip-arrow\"></div>\n\n<div *ngIf=\"options['contentType'] === 'template' else htmlOrStringTemplate\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n</div>\n\n<ng-template #htmlOrStringTemplate>\n <div [innerHTML]=\"value\"></div>\n</ng-template>\n", styles: [":host{max-width:200px;background-color:var(--bg-tooltip-primary);color:var(--on-bg-tooltip-primary);text-align:center;border-radius:6px;padding:5px 8px;position:absolute;pointer-events:none;z-index:1000;display:block;opacity:0;transition:opacity .3s;top:0;left:0}:host.tooltip-show{opacity:1}:host.tooltip-shadow{box-shadow:0 7px 15px -5px #0006}:host.tooltip-light.tooltip-shadow{box-shadow:0 5px 15px -5px #0006}:host.tooltip:after{content:\"\";position:absolute;border-style:solid}:host.tooltip-top:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--bg-tooltip-primary) transparent transparent transparent}:host.tooltip-bottom:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--bg-tooltip-primary) transparent}:host.tooltip-left:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--bg-tooltip-primary)}:host.tooltip-right:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--bg-tooltip-primary) transparent transparent}:host.tooltip-light:after{display:none}:host.tooltip-light{border:1px solid rgba(0,0,0,.06);background-color:#fff;color:#000}:host.tooltip-light .tooltip-arrow{position:absolute;width:10px;height:10px;transform:rotate(135deg);background-color:#00000012}:host.tooltip-light .tooltip-arrow:after{background-color:#fff;content:\"\";display:block;position:absolute;width:10px;height:10px}:host.tooltip-top.tooltip-light{margin-top:-2px}:host.tooltip-top.tooltip-light .tooltip-arrow{top:100%;left:50%;margin-top:-4px;margin-left:-5px;background:linear-gradient(to bottom left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-top.tooltip-light .tooltip-arrow:after{top:1px;right:1px}:host.tooltip-bottom.tooltip-light .tooltip-arrow{bottom:100%;left:50%;margin-bottom:-4px;margin-left:-5px;background:linear-gradient(to top right,rgba(0,0,0,.1) 50%,transparent 50%)}:host.tooltip-bottom.tooltip-light .tooltip-arrow:after{top:-1px;right:-1px}:host.tooltip-left.tooltip-light .tooltip-arrow{top:50%;left:100%;margin-top:-5px;margin-left:-4px;background:linear-gradient(to bottom right,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-left.tooltip-light .tooltip-arrow:after{top:1px;right:-1px}:host.tooltip-right.tooltip-light .tooltip-arrow{top:50%;right:100%;margin-top:-5px;margin-right:-4px;background:linear-gradient(to top left,rgba(0,0,0,.07) 50%,transparent 50%)}:host.tooltip-right.tooltip-light .tooltip-arrow:after{top:-1px;right:1px}\n"] }]
|
|
404
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
|
|
405
|
-
type: Input
|
|
406
|
-
}], hostStyleTop: [{
|
|
407
|
-
type: HostBinding,
|
|
408
|
-
args: ['style.top']
|
|
409
|
-
}], hostStyleLeft: [{
|
|
410
|
-
type: HostBinding,
|
|
411
|
-
args: ['style.left']
|
|
412
|
-
}], hostStyleZIndex: [{
|
|
413
|
-
type: HostBinding,
|
|
414
|
-
args: ['style.z-index']
|
|
415
|
-
}], hostStyleTransition: [{
|
|
416
|
-
type: HostBinding,
|
|
417
|
-
args: ['style.transition']
|
|
418
|
-
}], hostStyleWidth: [{
|
|
419
|
-
type: HostBinding,
|
|
420
|
-
args: ['style.width']
|
|
421
|
-
}], hostStyleMaxWidth: [{
|
|
422
|
-
type: HostBinding,
|
|
423
|
-
args: ['style.max-width']
|
|
424
|
-
}], hostStylePointerEvents: [{
|
|
425
|
-
type: HostBinding,
|
|
426
|
-
args: ['style.pointer-events']
|
|
427
|
-
}], hostClassShow: [{
|
|
428
|
-
type: HostBinding,
|
|
429
|
-
args: ['class.tooltip-show']
|
|
430
|
-
}], hostClassShadow: [{
|
|
431
|
-
type: HostBinding,
|
|
432
|
-
args: ['class.tooltip-shadow']
|
|
433
|
-
}], hostClassLight: [{
|
|
434
|
-
type: HostBinding,
|
|
435
|
-
args: ['class.tooltip-light']
|
|
436
|
-
}], transitionEnd: [{
|
|
437
|
-
type: HostListener,
|
|
438
|
-
args: ['transitionend', ['$event']]
|
|
439
|
-
}], show: [{
|
|
440
|
-
type: Input
|
|
441
|
-
}] } });
|
|
442
|
-
|
|
443
|
-
/**
|
|
444
|
-
* This is not a real service, but it looks like it from the outside.
|
|
445
|
-
* It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
|
|
446
|
-
*/
|
|
447
|
-
const TooltipOptionsService = new InjectionToken('TooltipOptions');
|
|
448
|
-
|
|
449
|
-
const defaultOptions = {
|
|
450
|
-
'placement': 'top',
|
|
451
|
-
'autoPlacement': true,
|
|
452
|
-
'contentType': 'string',
|
|
453
|
-
'showDelay': 0,
|
|
454
|
-
'hideDelay': 300,
|
|
455
|
-
'hideDelayMobile': 0,
|
|
456
|
-
'hideDelayTouchscreen': 0,
|
|
457
|
-
'zIndex': 0,
|
|
458
|
-
'animationDuration': 300,
|
|
459
|
-
'animationDurationDefault': 300,
|
|
460
|
-
'trigger': 'hover',
|
|
461
|
-
'tooltipClass': '',
|
|
462
|
-
'display': true,
|
|
463
|
-
'displayMobile': true,
|
|
464
|
-
'displayTouchscreen': true,
|
|
465
|
-
'shadow': true,
|
|
466
|
-
'theme': 'dark',
|
|
467
|
-
'offset': 8,
|
|
468
|
-
'maxWidth': '',
|
|
469
|
-
'id': false,
|
|
470
|
-
'hideDelayAfterClick': 2000
|
|
471
|
-
};
|
|
472
|
-
const backwardCompatibilityOptions = {
|
|
473
|
-
'delay': 'showDelay',
|
|
474
|
-
'show-delay': 'showDelay',
|
|
475
|
-
'hide-delay': 'hideDelay',
|
|
476
|
-
'hide-delay-mobile': 'hideDelayTouchscreen',
|
|
477
|
-
'hideDelayMobile': 'hideDelayTouchscreen',
|
|
478
|
-
'z-index': 'zIndex',
|
|
479
|
-
'animation-duration': 'animationDuration',
|
|
480
|
-
'animation-duration-default': 'animationDurationDefault',
|
|
481
|
-
'tooltip-class': 'tooltipClass',
|
|
482
|
-
'display-mobile': 'displayTouchscreen',
|
|
483
|
-
'displayMobile': 'displayTouchscreen',
|
|
484
|
-
'max-width': 'maxWidth'
|
|
485
|
-
};
|
|
486
|
-
|
|
487
|
-
class GravityTooltipDirective {
|
|
488
|
-
set options(value) {
|
|
489
|
-
if (value && defaultOptions) {
|
|
490
|
-
this._options = value;
|
|
491
|
-
}
|
|
492
|
-
}
|
|
493
|
-
get options() {
|
|
494
|
-
return this._options;
|
|
495
|
-
}
|
|
496
|
-
// Content type
|
|
497
|
-
set contentTypeBackwardCompatibility(value) {
|
|
498
|
-
if (value) {
|
|
499
|
-
this._contentType = value;
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
set contentType(value) {
|
|
503
|
-
if (value) {
|
|
504
|
-
this._contentType = value;
|
|
505
|
-
}
|
|
506
|
-
}
|
|
507
|
-
get contentType() {
|
|
508
|
-
return this._contentType;
|
|
509
|
-
}
|
|
510
|
-
// z-index
|
|
511
|
-
set zIndexBackwardCompatibility(value) {
|
|
512
|
-
if (value) {
|
|
513
|
-
this._zIndex = value;
|
|
514
|
-
}
|
|
515
|
-
}
|
|
516
|
-
set zIndex(value) {
|
|
517
|
-
if (value) {
|
|
518
|
-
this._zIndex = value;
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
get zIndex() {
|
|
522
|
-
return this._zIndex;
|
|
523
|
-
}
|
|
524
|
-
// Animation duration
|
|
525
|
-
set animationDurationBackwardCompatibility(value) {
|
|
526
|
-
if (value) {
|
|
527
|
-
this._animationDuration = value;
|
|
528
|
-
}
|
|
529
|
-
}
|
|
530
|
-
set animationDuration(value) {
|
|
531
|
-
if (value) {
|
|
532
|
-
this._animationDuration = value;
|
|
533
|
-
}
|
|
534
|
-
}
|
|
535
|
-
get animationDuration() {
|
|
536
|
-
return this._animationDuration;
|
|
537
|
-
}
|
|
538
|
-
// Tooltip class
|
|
539
|
-
set tooltipClassBackwardCompatibility(value) {
|
|
540
|
-
if (value) {
|
|
541
|
-
this._tooltipClass = value;
|
|
542
|
-
}
|
|
543
|
-
}
|
|
544
|
-
set tooltipClass(value) {
|
|
545
|
-
if (value) {
|
|
546
|
-
this._tooltipClass = value;
|
|
547
|
-
}
|
|
548
|
-
}
|
|
549
|
-
get tooltipClass() {
|
|
550
|
-
return this._tooltipClass;
|
|
551
|
-
}
|
|
552
|
-
// Max width
|
|
553
|
-
set maxWidthBackwardCompatibility(value) {
|
|
554
|
-
if (value) {
|
|
555
|
-
this._maxWidth = value;
|
|
556
|
-
}
|
|
557
|
-
}
|
|
558
|
-
set maxWidth(value) {
|
|
559
|
-
if (value) {
|
|
560
|
-
this._maxWidth = value;
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
get maxWidth() {
|
|
564
|
-
return this._maxWidth;
|
|
565
|
-
}
|
|
566
|
-
// Show delay
|
|
567
|
-
set showDelayBackwardCompatibility(value) {
|
|
568
|
-
if (value) {
|
|
569
|
-
this._showDelay = value;
|
|
570
|
-
}
|
|
571
|
-
}
|
|
572
|
-
set showDelay(value) {
|
|
573
|
-
if (value) {
|
|
574
|
-
this._showDelay = value;
|
|
575
|
-
}
|
|
576
|
-
}
|
|
577
|
-
get showDelay() {
|
|
578
|
-
return this._showDelay;
|
|
579
|
-
}
|
|
580
|
-
// Hide delay
|
|
581
|
-
set hideDelayBackwardCompatibility(value) {
|
|
582
|
-
if (value) {
|
|
583
|
-
this._hideDelay = value;
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
set hideDelay(value) {
|
|
587
|
-
if (value) {
|
|
588
|
-
this._hideDelay = value;
|
|
589
|
-
}
|
|
590
|
-
}
|
|
591
|
-
get hideDelay() {
|
|
592
|
-
return this._hideDelay;
|
|
593
|
-
}
|
|
594
|
-
get isTooltipDestroyed() {
|
|
595
|
-
return this.componentRef && this.componentRef.hostView.destroyed;
|
|
596
|
-
}
|
|
597
|
-
get destroyDelay() {
|
|
598
|
-
if (this._destroyDelay) {
|
|
599
|
-
return this._destroyDelay;
|
|
600
|
-
}
|
|
601
|
-
else {
|
|
602
|
-
return Number(this.getHideDelay()) + Number(this.options['animationDuration']);
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
|
-
set destroyDelay(value) {
|
|
606
|
-
this._destroyDelay = value;
|
|
607
|
-
}
|
|
608
|
-
get tooltipPosition() {
|
|
609
|
-
if (this.options['position']) {
|
|
610
|
-
return this.options['position'];
|
|
611
|
-
}
|
|
612
|
-
else {
|
|
613
|
-
return this.elementPosition;
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
constructor(initOptions, elementRef, componentFactoryResolver, appRef, injector) {
|
|
617
|
-
this.initOptions = initOptions;
|
|
618
|
-
this.elementRef = elementRef;
|
|
619
|
-
this.componentFactoryResolver = componentFactoryResolver;
|
|
620
|
-
this.appRef = appRef;
|
|
621
|
-
this.injector = injector;
|
|
622
|
-
this._options = {};
|
|
623
|
-
this._contentType = "string";
|
|
624
|
-
this.events = new EventEmitter();
|
|
625
|
-
}
|
|
626
|
-
onMouseEnter() {
|
|
627
|
-
if (this.isDisplayOnHover == false) {
|
|
628
|
-
return;
|
|
629
|
-
}
|
|
630
|
-
this.show();
|
|
631
|
-
}
|
|
632
|
-
onMouseLeave() {
|
|
633
|
-
if (this.options['trigger'] === 'hover') {
|
|
634
|
-
this.destroyTooltip();
|
|
635
|
-
}
|
|
636
|
-
}
|
|
637
|
-
onClick() {
|
|
638
|
-
if (this.isDisplayOnClick == false) {
|
|
639
|
-
return;
|
|
640
|
-
}
|
|
641
|
-
this.show();
|
|
642
|
-
this.hideAfterClickTimeoutId = window.setTimeout(() => {
|
|
643
|
-
this.destroyTooltip();
|
|
644
|
-
}, this.options['hideDelayAfterClick']);
|
|
645
|
-
}
|
|
646
|
-
ngOnInit() {
|
|
647
|
-
}
|
|
648
|
-
ngOnChanges(changes) {
|
|
649
|
-
this.initOptions = this.renameProperties(this.initOptions);
|
|
650
|
-
let changedOptions = this.getProperties(changes);
|
|
651
|
-
changedOptions = this.renameProperties(changedOptions);
|
|
652
|
-
this.applyOptionsDefault(defaultOptions, changedOptions);
|
|
653
|
-
}
|
|
654
|
-
ngOnDestroy() {
|
|
655
|
-
this.destroyTooltip({
|
|
656
|
-
fast: true
|
|
657
|
-
});
|
|
658
|
-
if (this.componentSubscribe) {
|
|
659
|
-
this.componentSubscribe.unsubscribe();
|
|
660
|
-
}
|
|
661
|
-
}
|
|
662
|
-
getShowDelay() {
|
|
663
|
-
return this.options['showDelay'];
|
|
664
|
-
}
|
|
665
|
-
getHideDelay() {
|
|
666
|
-
const hideDelay = this.options['hideDelay'];
|
|
667
|
-
const hideDelayTouchscreen = this.options['hideDelayTouchscreen'];
|
|
668
|
-
return this.isTouchScreen ? hideDelayTouchscreen : hideDelay;
|
|
669
|
-
}
|
|
670
|
-
getProperties(changes) {
|
|
671
|
-
let directiveProperties = {};
|
|
672
|
-
let customProperties = {};
|
|
673
|
-
let allProperties;
|
|
674
|
-
for (var prop in changes) {
|
|
675
|
-
if (prop !== 'options' && prop !== 'tooltipValue') {
|
|
676
|
-
directiveProperties[prop] = changes[prop].currentValue;
|
|
677
|
-
}
|
|
678
|
-
if (prop === 'options') {
|
|
679
|
-
customProperties = changes[prop].currentValue;
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
allProperties = Object.assign({}, customProperties, directiveProperties);
|
|
683
|
-
return allProperties;
|
|
684
|
-
}
|
|
685
|
-
renameProperties(options) {
|
|
686
|
-
for (var prop in options) {
|
|
687
|
-
if (backwardCompatibilityOptions[prop]) {
|
|
688
|
-
options[backwardCompatibilityOptions[prop]] = options[prop];
|
|
689
|
-
delete options[prop];
|
|
690
|
-
}
|
|
691
|
-
}
|
|
692
|
-
return options;
|
|
693
|
-
}
|
|
694
|
-
getElementPosition() {
|
|
695
|
-
this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect();
|
|
696
|
-
}
|
|
697
|
-
createTooltip() {
|
|
698
|
-
this.clearTimeouts();
|
|
699
|
-
this.getElementPosition();
|
|
700
|
-
this.createTimeoutId = window.setTimeout(() => {
|
|
701
|
-
this.appendComponentToBody(GravityTooltipComponent);
|
|
702
|
-
}, this.getShowDelay());
|
|
703
|
-
this.showTimeoutId = window.setTimeout(() => {
|
|
704
|
-
this.showTooltipElem();
|
|
705
|
-
}, this.getShowDelay());
|
|
706
|
-
}
|
|
707
|
-
destroyTooltip(options = {
|
|
708
|
-
fast: false
|
|
709
|
-
}) {
|
|
710
|
-
this.clearTimeouts();
|
|
711
|
-
if (this.isTooltipDestroyed == false) {
|
|
712
|
-
this.hideTimeoutId = window.setTimeout(() => {
|
|
713
|
-
this.hideTooltip();
|
|
714
|
-
}, options.fast ? 0 : this.getHideDelay());
|
|
715
|
-
this.destroyTimeoutId = window.setTimeout(() => {
|
|
716
|
-
if (!this.componentRef || this.isTooltipDestroyed) {
|
|
717
|
-
return;
|
|
718
|
-
}
|
|
719
|
-
this.appRef.detachView(this.componentRef.hostView);
|
|
720
|
-
this.componentRef.destroy();
|
|
721
|
-
this.events.emit({
|
|
722
|
-
type: 'hidden',
|
|
723
|
-
position: this.tooltipPosition
|
|
724
|
-
});
|
|
725
|
-
}, options.fast ? 0 : this.destroyDelay);
|
|
726
|
-
}
|
|
727
|
-
}
|
|
728
|
-
showTooltipElem() {
|
|
729
|
-
this.clearTimeouts();
|
|
730
|
-
this.componentRef.instance.show = true;
|
|
731
|
-
this.events.emit({
|
|
732
|
-
type: 'show',
|
|
733
|
-
position: this.tooltipPosition
|
|
734
|
-
});
|
|
735
|
-
}
|
|
736
|
-
hideTooltip() {
|
|
737
|
-
if (!this.componentRef || this.isTooltipDestroyed) {
|
|
738
|
-
return;
|
|
739
|
-
}
|
|
740
|
-
this.componentRef.instance.show = false;
|
|
741
|
-
this.events.emit({
|
|
742
|
-
type: 'hide',
|
|
743
|
-
position: this.tooltipPosition
|
|
744
|
-
});
|
|
745
|
-
}
|
|
746
|
-
appendComponentToBody(component) {
|
|
747
|
-
this.componentRef = this.componentFactoryResolver
|
|
748
|
-
.resolveComponentFactory(component)
|
|
749
|
-
.create(this.injector);
|
|
750
|
-
this.componentRef.instance.data = {
|
|
751
|
-
value: this.tooltipValue,
|
|
752
|
-
element: this.elementRef.nativeElement,
|
|
753
|
-
elementPosition: this.tooltipPosition,
|
|
754
|
-
options: this.options
|
|
755
|
-
};
|
|
756
|
-
this.appRef.attachView(this.componentRef.hostView);
|
|
757
|
-
const domElem = this.componentRef.hostView.rootNodes[0];
|
|
758
|
-
document.body.appendChild(domElem);
|
|
759
|
-
this.componentSubscribe = this.componentRef.instance.events.subscribe((event) => {
|
|
760
|
-
this.handleEvents(event);
|
|
761
|
-
});
|
|
762
|
-
}
|
|
763
|
-
clearTimeouts() {
|
|
764
|
-
if (this.createTimeoutId) {
|
|
765
|
-
clearTimeout(this.createTimeoutId);
|
|
766
|
-
}
|
|
767
|
-
if (this.showTimeoutId) {
|
|
768
|
-
clearTimeout(this.showTimeoutId);
|
|
769
|
-
}
|
|
770
|
-
if (this.hideTimeoutId) {
|
|
771
|
-
clearTimeout(this.hideTimeoutId);
|
|
772
|
-
}
|
|
773
|
-
if (this.destroyTimeoutId) {
|
|
774
|
-
clearTimeout(this.destroyTimeoutId);
|
|
775
|
-
}
|
|
776
|
-
}
|
|
777
|
-
get isDisplayOnHover() {
|
|
778
|
-
if (this.options['display'] == false) {
|
|
779
|
-
return false;
|
|
780
|
-
}
|
|
781
|
-
if (this.options['displayTouchscreen'] == false && this.isTouchScreen) {
|
|
782
|
-
return false;
|
|
783
|
-
}
|
|
784
|
-
return this.options['trigger'] === 'hover';
|
|
785
|
-
}
|
|
786
|
-
get isDisplayOnClick() {
|
|
787
|
-
if (this.options['display'] == false) {
|
|
788
|
-
return false;
|
|
789
|
-
}
|
|
790
|
-
if (this.options['displayTouchscreen'] == false && this.isTouchScreen) {
|
|
791
|
-
return false;
|
|
792
|
-
}
|
|
793
|
-
return this.options['trigger'] == 'click';
|
|
794
|
-
}
|
|
795
|
-
get isTouchScreen() {
|
|
796
|
-
var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
|
|
797
|
-
var mq = function (query) {
|
|
798
|
-
return window.matchMedia(query).matches;
|
|
799
|
-
};
|
|
800
|
-
if (('ontouchstart' in window)) {
|
|
801
|
-
return true;
|
|
802
|
-
}
|
|
803
|
-
// include the 'heartz' as a way to have a non matching MQ to help terminate the join
|
|
804
|
-
// https://git.io/vznFH
|
|
805
|
-
var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
|
|
806
|
-
return mq(query);
|
|
807
|
-
}
|
|
808
|
-
applyOptionsDefault(defaultOptions, options) {
|
|
809
|
-
this.options = Object.assign({}, defaultOptions, this.initOptions || {}, this.options, options);
|
|
810
|
-
}
|
|
811
|
-
handleEvents(event) {
|
|
812
|
-
if (event.type === 'shown') {
|
|
813
|
-
this.events.emit({
|
|
814
|
-
type: 'shown',
|
|
815
|
-
position: this.tooltipPosition
|
|
816
|
-
});
|
|
817
|
-
}
|
|
818
|
-
}
|
|
819
|
-
show() {
|
|
820
|
-
if (!this.tooltipValue) {
|
|
821
|
-
return;
|
|
822
|
-
}
|
|
823
|
-
if (!this.componentRef || this.isTooltipDestroyed) {
|
|
824
|
-
this.createTooltip();
|
|
825
|
-
}
|
|
826
|
-
else if (!this.isTooltipDestroyed) {
|
|
827
|
-
this.showTooltipElem();
|
|
828
|
-
}
|
|
829
|
-
}
|
|
830
|
-
hide() {
|
|
831
|
-
this.destroyTooltip();
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
|
-
GravityTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipDirective, deps: [{ token: TooltipOptionsService, optional: true }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
835
|
-
GravityTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: GravityTooltipDirective, selector: "[tooltip]", inputs: { options: "options", tooltipValue: ["tooltip", "tooltipValue"], placement: "placement", autoPlacement: "autoPlacement", contentTypeBackwardCompatibility: ["content-type", "contentTypeBackwardCompatibility"], contentType: "contentType", hideDelayMobile: ["hide-delay-mobile", "hideDelayMobile"], hideDelayTouchscreen: "hideDelayTouchscreen", zIndexBackwardCompatibility: ["z-index", "zIndexBackwardCompatibility"], zIndex: "zIndex", animationDurationBackwardCompatibility: ["animation-duration", "animationDurationBackwardCompatibility"], animationDuration: "animationDuration", trigger: "trigger", tooltipClassBackwardCompatibility: ["tooltip-class", "tooltipClassBackwardCompatibility"], tooltipClass: "tooltipClass", display: "display", displayMobile: ["display-mobile", "displayMobile"], displayTouchscreen: "displayTouchscreen", shadow: "shadow", theme: "theme", offset: "offset", width: "width", maxWidthBackwardCompatibility: ["max-width", "maxWidthBackwardCompatibility"], maxWidth: "maxWidth", id: "id", showDelayBackwardCompatibility: ["show-delay", "showDelayBackwardCompatibility"], showDelay: "showDelay", hideDelayBackwardCompatibility: ["hide-delay", "hideDelayBackwardCompatibility"], hideDelay: "hideDelay", hideDelayAfterClick: "hideDelayAfterClick", pointerEvents: "pointerEvents", position: "position" }, outputs: { events: "events" }, host: { listeners: { "focusin": "onMouseEnter()", "mouseenter": "onMouseEnter()", "focusout": "onMouseLeave()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, exportAs: ["tooltip"], usesOnChanges: true, ngImport: i0 });
|
|
836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipDirective, decorators: [{
|
|
837
|
-
type: Directive,
|
|
838
|
-
args: [{
|
|
839
|
-
selector: '[tooltip]',
|
|
840
|
-
exportAs: 'tooltip',
|
|
841
|
-
}]
|
|
842
|
-
}], ctorParameters: function () {
|
|
843
|
-
return [{ type: undefined, decorators: [{
|
|
844
|
-
type: Optional
|
|
845
|
-
}, {
|
|
846
|
-
type: Inject,
|
|
847
|
-
args: [TooltipOptionsService]
|
|
848
|
-
}] }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }];
|
|
849
|
-
}, propDecorators: { options: [{
|
|
850
|
-
type: Input,
|
|
851
|
-
args: ['options']
|
|
852
|
-
}], tooltipValue: [{
|
|
853
|
-
type: Input,
|
|
854
|
-
args: ['tooltip']
|
|
855
|
-
}], placement: [{
|
|
856
|
-
type: Input,
|
|
857
|
-
args: ['placement']
|
|
858
|
-
}], autoPlacement: [{
|
|
859
|
-
type: Input,
|
|
860
|
-
args: ['autoPlacement']
|
|
861
|
-
}], contentTypeBackwardCompatibility: [{
|
|
862
|
-
type: Input,
|
|
863
|
-
args: ['content-type']
|
|
864
|
-
}], contentType: [{
|
|
865
|
-
type: Input,
|
|
866
|
-
args: ['contentType']
|
|
867
|
-
}], hideDelayMobile: [{
|
|
868
|
-
type: Input,
|
|
869
|
-
args: ['hide-delay-mobile']
|
|
870
|
-
}], hideDelayTouchscreen: [{
|
|
871
|
-
type: Input,
|
|
872
|
-
args: ['hideDelayTouchscreen']
|
|
873
|
-
}], zIndexBackwardCompatibility: [{
|
|
874
|
-
type: Input,
|
|
875
|
-
args: ['z-index']
|
|
876
|
-
}], zIndex: [{
|
|
877
|
-
type: Input,
|
|
878
|
-
args: ['zIndex']
|
|
879
|
-
}], animationDurationBackwardCompatibility: [{
|
|
880
|
-
type: Input,
|
|
881
|
-
args: ['animation-duration']
|
|
882
|
-
}], animationDuration: [{
|
|
883
|
-
type: Input,
|
|
884
|
-
args: ['animationDuration']
|
|
885
|
-
}], trigger: [{
|
|
886
|
-
type: Input,
|
|
887
|
-
args: ['trigger']
|
|
888
|
-
}], tooltipClassBackwardCompatibility: [{
|
|
889
|
-
type: Input,
|
|
890
|
-
args: ['tooltip-class']
|
|
891
|
-
}], tooltipClass: [{
|
|
892
|
-
type: Input,
|
|
893
|
-
args: ['tooltipClass']
|
|
894
|
-
}], display: [{
|
|
895
|
-
type: Input,
|
|
896
|
-
args: ['display']
|
|
897
|
-
}], displayMobile: [{
|
|
898
|
-
type: Input,
|
|
899
|
-
args: ['display-mobile']
|
|
900
|
-
}], displayTouchscreen: [{
|
|
901
|
-
type: Input,
|
|
902
|
-
args: ['displayTouchscreen']
|
|
903
|
-
}], shadow: [{
|
|
904
|
-
type: Input,
|
|
905
|
-
args: ['shadow']
|
|
906
|
-
}], theme: [{
|
|
907
|
-
type: Input,
|
|
908
|
-
args: ['theme']
|
|
909
|
-
}], offset: [{
|
|
910
|
-
type: Input,
|
|
911
|
-
args: ['offset']
|
|
912
|
-
}], width: [{
|
|
913
|
-
type: Input,
|
|
914
|
-
args: ['width']
|
|
915
|
-
}], maxWidthBackwardCompatibility: [{
|
|
916
|
-
type: Input,
|
|
917
|
-
args: ['max-width']
|
|
918
|
-
}], maxWidth: [{
|
|
919
|
-
type: Input,
|
|
920
|
-
args: ['maxWidth']
|
|
921
|
-
}], id: [{
|
|
922
|
-
type: Input,
|
|
923
|
-
args: ['id']
|
|
924
|
-
}], showDelayBackwardCompatibility: [{
|
|
925
|
-
type: Input,
|
|
926
|
-
args: ['show-delay']
|
|
927
|
-
}], showDelay: [{
|
|
928
|
-
type: Input,
|
|
929
|
-
args: ['showDelay']
|
|
930
|
-
}], hideDelayBackwardCompatibility: [{
|
|
931
|
-
type: Input,
|
|
932
|
-
args: ['hide-delay']
|
|
933
|
-
}], hideDelay: [{
|
|
934
|
-
type: Input,
|
|
935
|
-
args: ['hideDelay']
|
|
936
|
-
}], hideDelayAfterClick: [{
|
|
937
|
-
type: Input,
|
|
938
|
-
args: ['hideDelayAfterClick']
|
|
939
|
-
}], pointerEvents: [{
|
|
940
|
-
type: Input,
|
|
941
|
-
args: ['pointerEvents']
|
|
942
|
-
}], position: [{
|
|
943
|
-
type: Input,
|
|
944
|
-
args: ['position']
|
|
945
|
-
}], events: [{
|
|
946
|
-
type: Output
|
|
947
|
-
}], onMouseEnter: [{
|
|
948
|
-
type: HostListener,
|
|
949
|
-
args: ['focusin']
|
|
950
|
-
}, {
|
|
951
|
-
type: HostListener,
|
|
952
|
-
args: ['mouseenter']
|
|
953
|
-
}], onMouseLeave: [{
|
|
954
|
-
type: HostListener,
|
|
955
|
-
args: ['focusout']
|
|
956
|
-
}, {
|
|
957
|
-
type: HostListener,
|
|
958
|
-
args: ['mouseleave']
|
|
959
|
-
}], onClick: [{
|
|
960
|
-
type: HostListener,
|
|
961
|
-
args: ['click']
|
|
962
|
-
}] } });
|
|
963
|
-
|
|
964
|
-
class GravityTooltipModule {
|
|
965
|
-
static forRoot(initOptions) {
|
|
966
|
-
return {
|
|
967
|
-
ngModule: GravityTooltipModule,
|
|
968
|
-
providers: [
|
|
969
|
-
{
|
|
970
|
-
provide: TooltipOptionsService,
|
|
971
|
-
useValue: initOptions
|
|
972
|
-
}
|
|
973
|
-
]
|
|
974
|
-
};
|
|
975
|
-
}
|
|
976
|
-
}
|
|
977
|
-
GravityTooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
978
|
-
GravityTooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, declarations: [GravityTooltipDirective,
|
|
979
|
-
GravityTooltipComponent], imports: [CommonModule], exports: [GravityTooltipDirective,
|
|
980
|
-
GravityTooltipComponent] });
|
|
981
|
-
GravityTooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, imports: [CommonModule] });
|
|
982
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTooltipModule, decorators: [{
|
|
983
|
-
type: NgModule,
|
|
984
|
-
args: [{
|
|
985
|
-
declarations: [
|
|
986
|
-
GravityTooltipDirective,
|
|
987
|
-
GravityTooltipComponent
|
|
988
|
-
],
|
|
989
|
-
imports: [
|
|
990
|
-
CommonModule
|
|
991
|
-
],
|
|
992
|
-
exports: [
|
|
993
|
-
GravityTooltipDirective,
|
|
994
|
-
GravityTooltipComponent
|
|
995
|
-
]
|
|
996
|
-
}]
|
|
997
|
-
}] });
|
|
998
|
-
|
|
999
|
-
class GravityCalendarComponent {
|
|
1000
|
-
constructor() {
|
|
1001
|
-
this.calendarResponse = new EventEmitter();
|
|
1002
|
-
this.currentLang = 'en';
|
|
1003
|
-
this.state = "enabled";
|
|
1004
|
-
this.supportTextType = "neutro";
|
|
1005
|
-
this.calendarOpened = false;
|
|
1006
|
-
this.focusInput = false;
|
|
1007
|
-
this.selectedDateInput = '';
|
|
1008
|
-
this.customDateFlag = '';
|
|
1009
|
-
}
|
|
1010
|
-
ngOnChanges(changes) {
|
|
1011
|
-
if (this.dates) {
|
|
1012
|
-
if (this.dates.defaultDays) {
|
|
1013
|
-
let dateWithoutDays = new Date(new Date().setDate(new Date().getDate() - this.dates.defaultDays));
|
|
1014
|
-
this.focusCustomDate(dateWithoutDays);
|
|
1015
|
-
}
|
|
1016
|
-
if (this.dates.customDate) {
|
|
1017
|
-
let date = this.dates.customDate == 'today' ? (new Date()) : this.dates.customDate;
|
|
1018
|
-
this.focusCustomDate(date);
|
|
1019
|
-
}
|
|
1020
|
-
if (this.dates.minDate) {
|
|
1021
|
-
this.minDate = GravityCalendarComponent.formatDateToNgbDateStruct(this.dates.minDate);
|
|
1022
|
-
}
|
|
1023
|
-
if (this.dates.maxDate) {
|
|
1024
|
-
let date = this.dates.maxDate == 'today' ? (new Date()) : this.dates.maxDate;
|
|
1025
|
-
this.maxDate = GravityCalendarComponent.formatDateToNgbDateStruct(date);
|
|
1026
|
-
}
|
|
1027
|
-
}
|
|
1028
|
-
}
|
|
1029
|
-
ngAfterViewInit() {
|
|
1030
|
-
this.changeDateManually();
|
|
1031
|
-
}
|
|
1032
|
-
updateSelectedDate($event) {
|
|
1033
|
-
this.selectedDateInput = GravityCalendarComponent.formatNgbDate($event);
|
|
1034
|
-
this.selectedDate = GravityCalendarComponent.convertNgbDateToDate($event);
|
|
1035
|
-
this.datepickerInput.nativeElement.value = this.selectedDateInput;
|
|
1036
|
-
this.calendarResponse.emit(this.selectedDate);
|
|
1037
|
-
}
|
|
1038
|
-
focusCustomDate(customDate) {
|
|
1039
|
-
this.selectedDateInput = GravityCalendarComponent.formatTSDate(customDate);
|
|
1040
|
-
this.selectedDate = customDate;
|
|
1041
|
-
this.customDateFlag = customDate.getUTCFullYear() + '-' + (customDate.getUTCMonth() + 1) + '-' + customDate.getUTCDate();
|
|
1042
|
-
}
|
|
1043
|
-
resetCalendar(newDate) {
|
|
1044
|
-
this.focusCustomDate(newDate);
|
|
1045
|
-
this.changeDateManually();
|
|
1046
|
-
}
|
|
1047
|
-
changeDateManually() {
|
|
1048
|
-
if (this.customDateFlag) {
|
|
1049
|
-
this.datePicker.manualDateChange(this.customDateFlag, true);
|
|
1050
|
-
this.datepickerInput.nativeElement.value = this.selectedDateInput;
|
|
1051
|
-
this.customDateFlag = undefined;
|
|
1052
|
-
this.calendarResponse.emit(this.selectedDate);
|
|
1053
|
-
}
|
|
1054
|
-
}
|
|
1055
|
-
static formatNgbDate(ngbDate) {
|
|
1056
|
-
if (!ngbDate) {
|
|
1057
|
-
return null;
|
|
1058
|
-
}
|
|
1059
|
-
return [
|
|
1060
|
-
(ngbDate.month < 10 ? ('0' + ngbDate.month) : ngbDate.month),
|
|
1061
|
-
(ngbDate.day < 10 ? ('0' + ngbDate.day) : ngbDate.day),
|
|
1062
|
-
ngbDate.year
|
|
1063
|
-
].join('/');
|
|
1064
|
-
}
|
|
1065
|
-
static formatTSDate(date) {
|
|
1066
|
-
if (!date) {
|
|
1067
|
-
return null;
|
|
1068
|
-
}
|
|
1069
|
-
return [
|
|
1070
|
-
((date.getUTCMonth() + 1) < 10 ? ('0' + (date.getUTCMonth() + 1)) : (date.getUTCMonth() + 1)),
|
|
1071
|
-
(date.getUTCDate() < 10 ? ('0' + date.getUTCDate()) : date.getUTCDate()),
|
|
1072
|
-
date.getUTCFullYear()
|
|
1073
|
-
].join('/');
|
|
1074
|
-
}
|
|
1075
|
-
static formatDateToNgbDateStruct(date) {
|
|
1076
|
-
let object = {};
|
|
1077
|
-
object.year = date.getUTCFullYear();
|
|
1078
|
-
object.month = (date.getUTCMonth() + 1);
|
|
1079
|
-
object.day = date.getUTCDate();
|
|
1080
|
-
return object;
|
|
1081
|
-
}
|
|
1082
|
-
static convertNgbDateToDate(date) {
|
|
1083
|
-
return new Date(date.year, (date.month - 1), date.day);
|
|
1084
|
-
}
|
|
1085
|
-
}
|
|
1086
|
-
GravityCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1087
|
-
GravityCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityCalendarComponent, selector: "gravity-calendar", inputs: { currentLang: "currentLang", cypressTag: "cypressTag", dates: "dates", label: "label", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { calendarResponse: "response" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\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-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state == 'disabled' ? true : null\"\n [readonly]=\"state != 'disabled' ? true : null\"\n\n (blur)=\"focusInput = false\"\n (closed)=\"calendarOpened = false\"\n (dateSelect)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n ngbDatepicker\n placeholder=\"Select your date\"\n\n [container]=\"'body'\"\n [datepickerClass]=\"'gravity-datepicker-dialog'\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [navigation]=\"'arrows'\"\n [showWeekNumbers]=\"true\"\n\n #datepickerInput\n #datePicker=\"ngbDatepicker\">\n <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && state == 'enabled'\"></span>\n <span (click)=\"datePicker.close(); calendarOpened = false\" *ngIf=\"calendarOpened && state == 'enabled'\"></span>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.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}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
1088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCalendarComponent, decorators: [{
|
|
1089
|
-
type: Component,
|
|
1090
|
-
args: [{ selector: 'gravity-calendar', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\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-calendar-field {{state}}\" [class.empty]=\"!selectedDate && !focusInput && !calendarOpened\"\n [class.focused]=\"focusInput || calendarOpened\" [class.full-input]=\"selectedDate && !focusInput && !calendarOpened\">\n <gravity-icon class=\"placement-left\" [hoverIcon]=\"false\" [iconName]=\"'calendar'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag\"\n [disabled]=\"state == 'disabled' ? true : null\"\n [readonly]=\"state != 'disabled' ? true : null\"\n\n (blur)=\"focusInput = false\"\n (closed)=\"calendarOpened = false\"\n (dateSelect)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n\n class=\"hr-label md-regular\"\n ngbDatepicker\n placeholder=\"Select your date\"\n\n [container]=\"'body'\"\n [datepickerClass]=\"'gravity-datepicker-dialog'\"\n [maxDate]=\"maxDate ? maxDate : null\"\n [minDate]=\"minDate ? minDate : null\"\n [navigation]=\"'arrows'\"\n [showWeekNumbers]=\"true\"\n\n #datepickerInput\n #datePicker=\"ngbDatepicker\">\n <span (click)=\"datePicker.open(); calendarOpened = true\" *ngIf=\"!calendarOpened && state == 'enabled'\"></span>\n <span (click)=\"datePicker.close(); calendarOpened = false\" *ngIf=\"calendarOpened && state == 'enabled'\"></span>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.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}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-calendar-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;height:3rem;max-height:3rem;min-height:1.5rem;padding:.75rem 1rem;position:relative}.gravity-calendar-field gravity-icon.placement-left{margin-right:.5rem}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field span{cursor:pointer;height:100%;left:0;position:absolute;width:100%}.gravity-calendar-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-calendar-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-calendar-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-calendar-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-calendar-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-calendar-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-calendar-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
|
|
1091
|
-
}], propDecorators: { calendarResponse: [{
|
|
1092
|
-
type: Output,
|
|
1093
|
-
args: ['response']
|
|
1094
|
-
}], currentLang: [{
|
|
1095
|
-
type: Input
|
|
1096
|
-
}], cypressTag: [{
|
|
1097
|
-
type: Input
|
|
1098
|
-
}], dates: [{
|
|
1099
|
-
type: Input
|
|
1100
|
-
}], label: [{
|
|
1101
|
-
type: Input
|
|
1102
|
-
}], required: [{
|
|
1103
|
-
type: Input
|
|
1104
|
-
}], state: [{
|
|
1105
|
-
type: Input
|
|
1106
|
-
}], supportTextContent: [{
|
|
1107
|
-
type: Input
|
|
1108
|
-
}], supportTextType: [{
|
|
1109
|
-
type: Input
|
|
1110
|
-
}], datePicker: [{
|
|
1111
|
-
type: ViewChild,
|
|
1112
|
-
args: ['datePicker', { static: false }]
|
|
1113
|
-
}], datepickerInput: [{
|
|
1114
|
-
type: ViewChild,
|
|
1115
|
-
args: ['datepickerInput', { static: false }]
|
|
1116
|
-
}] } });
|
|
1117
|
-
|
|
1118
|
-
class GravityRadioButtonComponent {
|
|
1119
|
-
constructor() {
|
|
1120
|
-
this.checked = false;
|
|
1121
|
-
this.disabled = false;
|
|
1122
|
-
this.change = new EventEmitter();
|
|
1123
|
-
}
|
|
1124
|
-
onChange(event) {
|
|
1125
|
-
this.change.emit(event);
|
|
1126
|
-
}
|
|
1127
|
-
}
|
|
1128
|
-
GravityRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1129
|
-
GravityRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityRadioButtonComponent, selector: "gravity-radio-button", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: "<ngx-pretty-radio\n will-change\n\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [outline]=\"true\"\n [value]=\"value\"\n\n (change)=\"onChange($event)\">\n <ng-content></ng-content>\n</ngx-pretty-radio>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i2$1.NgxPrettyRadioWillChangeComponent, selector: "ngx-pretty-radio[will-change], p-radio[will-change]", inputs: ["stroke", "shape", "animation", "color", "outline", "checked", "disabled", "value", "name", "isSwitch", "lock", "bigger", "enableFocus", "plain"], outputs: ["change"], exportAs: ["ngxPrettyRadio"] }] });
|
|
1130
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityRadioButtonComponent, decorators: [{
|
|
1131
|
-
type: Component,
|
|
1132
|
-
args: [{ selector: 'gravity-radio-button', template: "<ngx-pretty-radio\n will-change\n\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [outline]=\"true\"\n [value]=\"value\"\n\n (change)=\"onChange($event)\">\n <ng-content></ng-content>\n</ngx-pretty-radio>\n", styles: [":host{display:block}\n"] }]
|
|
1133
|
-
}], propDecorators: { checked: [{
|
|
1134
|
-
type: Input
|
|
1135
|
-
}], disabled: [{
|
|
1136
|
-
type: Input
|
|
1137
|
-
}], name: [{
|
|
1138
|
-
type: Input
|
|
1139
|
-
}], value: [{
|
|
1140
|
-
type: Input
|
|
1141
|
-
}], change: [{
|
|
1142
|
-
type: Output
|
|
1143
|
-
}] } });
|
|
1144
|
-
|
|
1145
|
-
class GravitySwitchComponent {
|
|
1146
|
-
constructor() {
|
|
1147
|
-
this.switchResponse = new EventEmitter();
|
|
1148
|
-
}
|
|
1149
|
-
ngOnInit() {
|
|
1150
|
-
this.data.currentLang = this.data.currentLang ? this.data.currentLang : "en";
|
|
1151
|
-
this.data.state = this.data.state ? this.data.state : "enabled";
|
|
1152
|
-
}
|
|
1153
|
-
toggleSwitchHandler($event) {
|
|
1154
|
-
this.switchResponse.emit($event.checked);
|
|
1155
|
-
}
|
|
1156
|
-
}
|
|
1157
|
-
GravitySwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1158
|
-
GravitySwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { data: "data" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-switch\">\n <p-checkbox [attr.data-cy]=\"data.cypressTag\" [checked]=\"data.customCheck\" [disabled]=\"data.state == 'disabled'\" isSwitch=\"true\" stroke=\"fill\" (change)=\"toggleSwitchHandler($event)\">\n <ng-content></ng-content>\n </p-checkbox>\n</div>\n", styles: [".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}:host{display:block}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{height:3rem;padding:.625rem 1rem}.gravity-switch p-checkbox{height:100%;width:3.125rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }] });
|
|
1159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravitySwitchComponent, decorators: [{
|
|
1160
|
-
type: Component,
|
|
1161
|
-
args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text sm-regular\">\n {{data.label}}\n <ng-container *ngIf=\"data.required\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'readonly'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"data.state == 'disabled'\">\n <ng-container *ngIf=\"data.currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"data.currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-switch\">\n <p-checkbox [attr.data-cy]=\"data.cypressTag\" [checked]=\"data.customCheck\" [disabled]=\"data.state == 'disabled'\" isSwitch=\"true\" stroke=\"fill\" (change)=\"toggleSwitchHandler($event)\">\n <ng-content></ng-content>\n </p-checkbox>\n</div>\n", styles: [".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}:host{display:block}label{color:var(--text-primary);margin-inline:1rem}.gravity-switch{height:3rem;padding:.625rem 1rem}.gravity-switch p-checkbox{height:100%;width:3.125rem}\n"] }]
|
|
1162
|
-
}], propDecorators: { data: [{
|
|
1163
|
-
type: Input
|
|
1164
|
-
}], switchResponse: [{
|
|
1165
|
-
type: Output,
|
|
1166
|
-
args: ['response']
|
|
1167
|
-
}] } });
|
|
1168
|
-
|
|
1169
|
-
class GravityCheckboxComponent {
|
|
1170
|
-
constructor() {
|
|
1171
|
-
this.disabled = false;
|
|
1172
|
-
this.checked = false;
|
|
1173
|
-
}
|
|
1174
|
-
}
|
|
1175
|
-
GravityCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1176
|
-
GravityCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { value: "value", disabled: "disabled", checked: "checked" }, ngImport: i0, template: "<p-checkbox [checked]=\"checked\" color=\"default\" [disabled]=\"disabled\" shape=\"curve\" stroke=\"fill\" [value]=\"value\">\n <svg-icon p-svg name=\"check\"></svg-icon>\n <ng-content></ng-content>\n</p-checkbox>\n", styles: [":host{display:block}svg-icon{padding:2%}\n"], dependencies: [{ kind: "component", type: i1.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }, { kind: "component", type: i2$1.NgxPrettyCheckboxComponent, selector: "ngx-pretty-checkbox:not([will-change]), p-checkbox:not([will-change])", inputs: ["checked", "disabled", "value", "lock", "stateless"], outputs: ["change"], exportAs: ["ngxPrettyCheckbox"] }, { kind: "directive", type: i2$1.NgxPrettySvgDirective, selector: "[pSvg], [p-svg]" }] });
|
|
1177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
|
|
1178
|
-
type: Component,
|
|
1179
|
-
args: [{ selector: 'gravity-checkbox', template: "<p-checkbox [checked]=\"checked\" color=\"default\" [disabled]=\"disabled\" shape=\"curve\" stroke=\"fill\" [value]=\"value\">\n <svg-icon p-svg name=\"check\"></svg-icon>\n <ng-content></ng-content>\n</p-checkbox>\n", styles: [":host{display:block}svg-icon{padding:2%}\n"] }]
|
|
1180
|
-
}], propDecorators: { value: [{
|
|
1181
|
-
type: Input
|
|
1182
|
-
}], disabled: [{
|
|
1183
|
-
type: Input
|
|
1184
|
-
}], checked: [{
|
|
1185
|
-
type: Input
|
|
1186
|
-
}] } });
|
|
1187
|
-
|
|
1188
|
-
class GravityDialogComponent {
|
|
1189
|
-
constructor(ngbActiveModal) {
|
|
1190
|
-
this.ngbActiveModal = ngbActiveModal;
|
|
1191
|
-
}
|
|
1192
|
-
closeModal() {
|
|
1193
|
-
this.ngbActiveModal.close();
|
|
1194
|
-
}
|
|
1195
|
-
}
|
|
1196
|
-
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 });
|
|
1197
|
-
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\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.contentTemplateComponent\"></ng-container>\n </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.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:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\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"] }] });
|
|
1198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogComponent, decorators: [{
|
|
1199
|
-
type: Component,
|
|
1200
|
-
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\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.contentTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.contentTemplateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.contentTemplateComponent\"></ng-container>\n </ng-container>\n</div>\n\n<div class=\"dialog-footer\" *ngIf=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\">\n <ng-container *ngIf=\"dialogContent.footerTemplateRef\">\n <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"dialogContent.footerTemplateComponent\">\n <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n </ng-container>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.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:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"] }]
|
|
1201
|
-
}], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { dialogContent: [{
|
|
1202
|
-
type: Input
|
|
1203
|
-
}] } });
|
|
1204
|
-
|
|
1205
|
-
class GravityNotificationComponent {
|
|
1206
|
-
constructor(ngbActiveModal) {
|
|
1207
|
-
this.ngbActiveModal = ngbActiveModal;
|
|
1208
|
-
}
|
|
1209
|
-
closeModal() {
|
|
1210
|
-
this.ngbActiveModal.close();
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
GravityNotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityNotificationComponent, deps: [{ token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
1214
|
-
GravityNotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityNotificationComponent, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'x'\" [title]=\"'Close'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n </div>\n</main>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;position:absolute;right:.75rem;top:.625rem;width:2rem}gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
1215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityNotificationComponent, decorators: [{
|
|
1216
|
-
type: Component,
|
|
1217
|
-
args: [{ template: "<main class=\"alert-content {{notificationContent.state}}\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'x'\" [title]=\"'Close'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notificationContent.state\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notificationContent.text}}</h2>\n </div>\n</main>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;padding:1.5rem 1.5rem 1rem;position:relative}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;position:absolute;right:.75rem;top:.625rem;width:2rem}gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
|
|
1218
|
-
}], ctorParameters: function () { return [{ type: i1$2.NgbActiveModal }]; }, propDecorators: { notificationContent: [{
|
|
1219
|
-
type: Input
|
|
1220
|
-
}] } });
|
|
1221
|
-
|
|
1222
|
-
class GravityInstantNotificationsService {
|
|
1223
|
-
constructor() {
|
|
1224
|
-
this.notifications = [];
|
|
1225
|
-
}
|
|
1226
|
-
showNotification(content) {
|
|
1227
|
-
this.notifications.push(content);
|
|
1228
|
-
}
|
|
1229
|
-
hideNotification(index) {
|
|
1230
|
-
this.notifications.splice(index, 1);
|
|
1231
|
-
}
|
|
1232
|
-
clearNotifications() {
|
|
1233
|
-
this.notifications.splice(0, this.notifications.length);
|
|
1234
|
-
}
|
|
1235
|
-
}
|
|
1236
|
-
GravityInstantNotificationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityInstantNotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1237
|
-
GravityInstantNotificationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityInstantNotificationsService, providedIn: 'root' });
|
|
1238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityInstantNotificationsService, decorators: [{
|
|
1239
|
-
type: Injectable,
|
|
1240
|
-
args: [{ providedIn: 'root' }]
|
|
1241
|
-
}] });
|
|
1242
|
-
|
|
1243
|
-
class GravityNotificationInstantContainerComponent {
|
|
1244
|
-
constructor(gravityInstantNotificationsService) {
|
|
1245
|
-
this.gravityInstantNotificationsService = gravityInstantNotificationsService;
|
|
1246
|
-
this.delay = 5000;
|
|
1247
|
-
}
|
|
1248
|
-
}
|
|
1249
|
-
GravityNotificationInstantContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityNotificationInstantContainerComponent, deps: [{ token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1250
|
-
GravityNotificationInstantContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\"\n [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'x'\" [title]=\"'Close'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;position:absolute;right:.75rem;top:.625rem;width:2rem}gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$2.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
1251
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityNotificationInstantContainerComponent, decorators: [{
|
|
1252
|
-
type: Component,
|
|
1253
|
-
args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\"\n [delay]=\"delay\"\n\n (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n <main class=\"alert-content {{notification.state}}\">\n <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'x'\" [title]=\"'Close'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n </div>\n </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}:host{padding:1rem;position:fixed;right:0;top:0;z-index:1200}main.alert-content{background-color:var(--bg-notification-primary);border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;box-shadow:0 27px 34px #000c208f;color:var(--on-bg-notification-primary);margin-bottom:1rem;padding:1rem 1.5rem;position:relative;width:23rem}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:2rem;line-height:0;justify-content:center;position:absolute;right:.75rem;top:.625rem;width:2rem}gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary);--icon-height: 1.25rem;--icon-width: 1.25rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"] }]
|
|
1254
|
-
}], ctorParameters: function () { return [{ type: GravityInstantNotificationsService }]; }, propDecorators: { delay: [{
|
|
1255
|
-
type: Input
|
|
1256
|
-
}] } });
|
|
1257
|
-
|
|
1258
|
-
class GravityAttachFileComponent {
|
|
1259
|
-
constructor() {
|
|
1260
|
-
this.fileValueResponse = new EventEmitter();
|
|
1261
|
-
this.currentLang = 'en';
|
|
1262
|
-
this.state = "enabled";
|
|
1263
|
-
}
|
|
1264
|
-
handleFileInput($event) {
|
|
1265
|
-
this.file = $event.target.files[0];
|
|
1266
|
-
if (this.file) {
|
|
1267
|
-
GravityAttachFileComponent.convertFileToBase64(this.file).then((base64String) => {
|
|
1268
|
-
this.fileValueResponse.emit(base64String);
|
|
1269
|
-
}).catch((error) => {
|
|
1270
|
-
console.error('Error loading file:', error.message);
|
|
1271
|
-
});
|
|
1272
|
-
}
|
|
1273
|
-
}
|
|
1274
|
-
static convertFileToBase64(file) {
|
|
1275
|
-
return new Promise((resolve, reject) => {
|
|
1276
|
-
const reader = new FileReader();
|
|
1277
|
-
reader.onload = () => {
|
|
1278
|
-
const base64String = reader.result;
|
|
1279
|
-
const base64WithoutPrefix = base64String.split(',')[1];
|
|
1280
|
-
resolve(base64WithoutPrefix);
|
|
1281
|
-
};
|
|
1282
|
-
reader.onerror = () => {
|
|
1283
|
-
reject(new Error('Failed to read the file.'));
|
|
1284
|
-
};
|
|
1285
|
-
reader.readAsDataURL(file);
|
|
1286
|
-
});
|
|
1287
|
-
}
|
|
1288
|
-
removeFile() {
|
|
1289
|
-
this.file = null;
|
|
1290
|
-
this.fileValueResponse.emit('');
|
|
1291
|
-
}
|
|
1292
|
-
}
|
|
1293
|
-
GravityAttachFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityAttachFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1294
|
-
GravityAttachFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityAttachFileComponent, selector: "gravity-attach-file", inputs: { currentLang: "currentLang", cypressTag: "cypressTag", label: "label", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { fileValueResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\" *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-attach-file {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\">\n <ng-container *ngIf=\"!file\">\n <input autocomplete=\"off\" class=\"hr-label md-regular\" hidden id=\"fileInput\" type=\"file\"\n [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n\n (change)=\"handleFileInput($event)\">\n <label for=\"fileInput\">\n <gravity-button [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{label}}\n </gravity-button>\n </label>\n </ng-container>\n <ng-container *ngIf=\"file\">\n <label>\n <gravity-button (click)=\"removeFile()\" [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{currentLang == 'en' ? 'Remove file' : 'Remover archivo'}}\n </gravity-button>\n </label>\n <h3>{{currentLang == 'en' ? 'File' : 'Archivo'}}: {{file.name}}</h3>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\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}:host{display:block}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)}.gravity-attach-file{align-items:center;display:flex}.gravity-attach-file label{cursor:pointer}.gravity-attach-file label:hover gravity-button ::ng-deep button{--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{width:11rem}gravity-button,gravity-button ::ng-deep button{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "size", "type"] }] });
|
|
1295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityAttachFileComponent, decorators: [{
|
|
1296
|
-
type: Component,
|
|
1297
|
-
args: [{ selector: 'gravity-attach-file', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\" *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-attach-file {{state}}\" [class.empty]=\"!file\" [class.full-input]=\"file\">\n <ng-container *ngIf=\"!file\">\n <input autocomplete=\"off\" class=\"hr-label md-regular\" hidden id=\"fileInput\" type=\"file\"\n [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n\n (change)=\"handleFileInput($event)\">\n <label for=\"fileInput\">\n <gravity-button [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{label}}\n </gravity-button>\n </label>\n </ng-container>\n <ng-container *ngIf=\"file\">\n <label>\n <gravity-button (click)=\"removeFile()\" [iconName]=\"'clip'\" [type]=\"'tertiary'\" [size]=\"'md'\">\n {{currentLang == 'en' ? 'Remove file' : 'Remover archivo'}}\n </gravity-button>\n </label>\n <h3>{{currentLang == 'en' ? 'File' : 'Archivo'}}: {{file.name}}</h3>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\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}:host{display:block}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)}.gravity-attach-file{align-items:center;display:flex}.gravity-attach-file label{cursor:pointer}.gravity-attach-file label:hover gravity-button ::ng-deep button{--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{width:11rem}gravity-button,gravity-button ::ng-deep button{pointer-events:none}\n"] }]
|
|
1298
|
-
}], propDecorators: { fileValueResponse: [{
|
|
1299
|
-
type: Output,
|
|
1300
|
-
args: ['response']
|
|
1301
|
-
}], currentLang: [{
|
|
1302
|
-
type: Input
|
|
1303
|
-
}], cypressTag: [{
|
|
1304
|
-
type: Input
|
|
1305
|
-
}], label: [{
|
|
1306
|
-
type: Input
|
|
1307
|
-
}], required: [{
|
|
1308
|
-
type: Input
|
|
1309
|
-
}], state: [{
|
|
1310
|
-
type: Input
|
|
1311
|
-
}], supportTextContent: [{
|
|
1312
|
-
type: Input
|
|
1313
|
-
}], supportTextType: [{
|
|
1314
|
-
type: Input
|
|
1315
|
-
}] } });
|
|
1316
|
-
|
|
1317
|
-
class GravityDesignSystemModule {
|
|
1318
|
-
}
|
|
1319
|
-
GravityDesignSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1320
|
-
GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
|
|
1321
|
-
GravityButtonComponent,
|
|
1322
|
-
GravityCalendarComponent,
|
|
1323
|
-
GravityCheckboxComponent,
|
|
1324
|
-
GravityDialogComponent,
|
|
1325
|
-
GravityDropdownListComponent,
|
|
1326
|
-
GravityIconComponent,
|
|
1327
|
-
GravityNotificationComponent,
|
|
1328
|
-
GravityNotificationInstantContainerComponent,
|
|
1329
|
-
GravityRadioButtonComponent,
|
|
1330
|
-
GravitySwitchComponent,
|
|
1331
|
-
GravityTextFieldComponent], imports: [i1.AngularSvgIconModule, i2$2.AngularSvgIconPreloaderModule, CommonModule,
|
|
1332
|
-
FormsModule, GravityTooltipModule, NgbDatepickerModule,
|
|
1333
|
-
NgbToastModule,
|
|
1334
|
-
NgSelectModule,
|
|
1335
|
-
NgxPrettyCheckboxModule,
|
|
1336
|
-
ReactiveFormsModule,
|
|
1337
|
-
NgbProgressbarModule], exports: [GravityAttachFileComponent,
|
|
1338
|
-
GravityButtonComponent,
|
|
1339
|
-
GravityCalendarComponent,
|
|
1340
|
-
GravityCheckboxComponent,
|
|
1341
|
-
GravityDialogComponent,
|
|
1342
|
-
GravityDropdownListComponent,
|
|
1343
|
-
GravityIconComponent,
|
|
1344
|
-
GravityNotificationInstantContainerComponent,
|
|
1345
|
-
GravityRadioButtonComponent,
|
|
1346
|
-
GravitySwitchComponent,
|
|
1347
|
-
GravityTextFieldComponent,
|
|
1348
|
-
GravityTooltipModule] });
|
|
1349
|
-
GravityDesignSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
|
|
1350
|
-
AngularSvgIconPreloaderModule.forRoot({
|
|
1351
|
-
configUrl: './assets/gravity/json/icons.json',
|
|
1352
|
-
}),
|
|
1353
|
-
CommonModule,
|
|
1354
|
-
FormsModule,
|
|
1355
|
-
GravityTooltipModule.forRoot({}),
|
|
1356
|
-
NgbDatepickerModule,
|
|
1357
|
-
NgbToastModule,
|
|
1358
|
-
NgSelectModule,
|
|
1359
|
-
NgxPrettyCheckboxModule,
|
|
1360
|
-
ReactiveFormsModule,
|
|
1361
|
-
NgbProgressbarModule, GravityTooltipModule] });
|
|
1362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, decorators: [{
|
|
1363
|
-
type: NgModule,
|
|
1364
|
-
args: [{
|
|
1365
|
-
declarations: [
|
|
1366
|
-
GravityAttachFileComponent,
|
|
1367
|
-
GravityButtonComponent,
|
|
1368
|
-
GravityCalendarComponent,
|
|
1369
|
-
GravityCheckboxComponent,
|
|
1370
|
-
GravityDialogComponent,
|
|
1371
|
-
GravityDropdownListComponent,
|
|
1372
|
-
GravityIconComponent,
|
|
1373
|
-
GravityNotificationComponent,
|
|
1374
|
-
GravityNotificationInstantContainerComponent,
|
|
1375
|
-
GravityRadioButtonComponent,
|
|
1376
|
-
GravitySwitchComponent,
|
|
1377
|
-
GravityTextFieldComponent
|
|
1378
|
-
],
|
|
1379
|
-
imports: [
|
|
1380
|
-
AngularSvgIconModule.forRoot(),
|
|
1381
|
-
AngularSvgIconPreloaderModule.forRoot({
|
|
1382
|
-
configUrl: './assets/gravity/json/icons.json',
|
|
1383
|
-
}),
|
|
1384
|
-
CommonModule,
|
|
1385
|
-
FormsModule,
|
|
1386
|
-
GravityTooltipModule.forRoot({}),
|
|
1387
|
-
NgbDatepickerModule,
|
|
1388
|
-
NgbToastModule,
|
|
1389
|
-
NgSelectModule,
|
|
1390
|
-
NgxPrettyCheckboxModule,
|
|
1391
|
-
ReactiveFormsModule,
|
|
1392
|
-
NgbProgressbarModule
|
|
1393
|
-
],
|
|
1394
|
-
exports: [
|
|
1395
|
-
GravityAttachFileComponent,
|
|
1396
|
-
GravityButtonComponent,
|
|
1397
|
-
GravityCalendarComponent,
|
|
1398
|
-
GravityCheckboxComponent,
|
|
1399
|
-
GravityDialogComponent,
|
|
1400
|
-
GravityDropdownListComponent,
|
|
1401
|
-
GravityIconComponent,
|
|
1402
|
-
GravityNotificationInstantContainerComponent,
|
|
1403
|
-
GravityRadioButtonComponent,
|
|
1404
|
-
GravitySwitchComponent,
|
|
1405
|
-
GravityTextFieldComponent,
|
|
1406
|
-
GravityTooltipModule
|
|
1407
|
-
]
|
|
1408
|
-
}]
|
|
1409
|
-
}] });
|
|
1410
|
-
|
|
1411
|
-
class GravityDialogManagerService {
|
|
1412
|
-
constructor(ngbModal, gravityInstantNotificationsService) {
|
|
1413
|
-
this.ngbModal = ngbModal;
|
|
1414
|
-
this.gravityInstantNotificationsService = gravityInstantNotificationsService;
|
|
1415
|
-
}
|
|
1416
|
-
openModal(gravityDialogContentInterface, scrollableDialog = false, modalSize = 'md') {
|
|
1417
|
-
const modalRef = this.ngbModal.open(GravityDialogComponent, {
|
|
1418
|
-
centered: true,
|
|
1419
|
-
scrollable: scrollableDialog,
|
|
1420
|
-
size: modalSize
|
|
1421
|
-
});
|
|
1422
|
-
modalRef.componentInstance.dialogContent = gravityDialogContentInterface;
|
|
1423
|
-
}
|
|
1424
|
-
throwInformativeNotification(notificationContent) {
|
|
1425
|
-
const modalRef = this.ngbModal.open(GravityNotificationComponent, {
|
|
1426
|
-
modalDialogClass: 'informative-notification',
|
|
1427
|
-
centered: true
|
|
1428
|
-
});
|
|
1429
|
-
modalRef.componentInstance.notificationContent = notificationContent;
|
|
1430
|
-
}
|
|
1431
|
-
throwInstantNotification(notificationContent) {
|
|
1432
|
-
this.gravityInstantNotificationsService.showNotification(notificationContent);
|
|
1433
|
-
}
|
|
1434
|
-
}
|
|
1435
|
-
GravityDialogManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, deps: [{ token: i1$2.NgbModal }, { token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1436
|
-
GravityDialogManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, providedIn: "root" });
|
|
1437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDialogManagerService, decorators: [{
|
|
1438
|
-
type: Injectable,
|
|
1439
|
-
args: [{ providedIn: "root" }]
|
|
1440
|
-
}], ctorParameters: function () { return [{ type: i1$2.NgbModal }, { type: GravityInstantNotificationsService }]; } });
|
|
1441
|
-
|
|
1442
|
-
/*
|
|
1443
|
-
* Public API Surface of gravity-design-system
|
|
1444
|
-
*/
|
|
1445
|
-
|
|
1446
|
-
/**
|
|
1447
|
-
* Generated bundle index. Do not edit.
|
|
1448
|
-
*/
|
|
1449
|
-
|
|
1450
|
-
export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
|
|
1451
|
-
//# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map
|