@progressio_resources/gravity-design-system 1.1.7 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/gravity-attach-file/gravity-attach-file.component.mjs +63 -0
- package/esm2020/lib/components/gravity-button/gravity-button.component.mjs +3 -3
- package/esm2020/lib/components/gravity-text-field/gravity-text-field.component.mjs +2 -2
- package/esm2020/lib/gravity-design-system.module.mjs +8 -3
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/progressio_resources-gravity-design-system.mjs +70 -7
- package/fesm2015/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/fesm2020/progressio_resources-gravity-design-system.mjs +70 -7
- package/fesm2020/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-attach-file/gravity-attach-file.component.d.ts +18 -0
- package/lib/gravity-design-system.module.d.ts +21 -20
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/src/lib/assets/icons/clip.svg +6 -0
- package/src/lib/assets/json/icons.json +4 -0
|
@@ -38,10 +38,10 @@ class GravityButtonComponent {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
GravityButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
41
|
-
GravityButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", iconNames: "iconNames", iconPlacement: "iconPlacement", isLoading: "isLoading", size: "size", type: "type" }, ngImport: i0, template: "<button [attr.data-cy]=\"cypressTag\" class=\"gravity-button-{{type}} gravity-size-{{size}} hr-label md-bold\"\n [disabled]=\"disabled\" [style]=\"{'pointer-events': isLoading ? 'none' : 'initial'}\">\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-content></ng-content>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngFor=\"let iconName of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;cursor:pointer;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-primary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-secondary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-positive[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-negative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-alternative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-disabled gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-primary[disabled] gravity-icon.placement-left,.gravity-button-secondary[disabled] gravity-icon.placement-left,.gravity-button-tertiary[disabled] gravity-icon.placement-left,.gravity-button-positive[disabled] gravity-icon.placement-left,.gravity-button-negative[disabled] gravity-icon.placement-left,.gravity-button-alternative[disabled] gravity-icon.placement-left,.gravity-button-disabled gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-primary[disabled] gravity-icon.placement-right,.gravity-button-secondary[disabled] gravity-icon.placement-right,.gravity-button-tertiary[disabled] gravity-icon.placement-right,.gravity-button-positive[disabled] gravity-icon.placement-right,.gravity-button-negative[disabled] gravity-icon.placement-right,.gravity-button-alternative[disabled] gravity-icon.placement-right,.gravity-button-disabled gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]){--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]){--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]){--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]){--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);--progressbar-color: var(--bg-button-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
41
|
+
GravityButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityButtonComponent, selector: "gravity-button", inputs: { cypressTag: "cypressTag", disabled: "disabled", iconNames: "iconNames", iconPlacement: "iconPlacement", isLoading: "isLoading", size: "size", type: "type" }, ngImport: i0, template: "<button [attr.data-cy]=\"cypressTag\" class=\"gravity-button-{{type}} gravity-size-{{size}} hr-label md-bold\"\n [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\">\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-content></ng-content>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngFor=\"let iconName of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [":host{display:block}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;cursor:pointer;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-primary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-secondary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-positive[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-negative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-alternative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-disabled gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-primary[disabled] gravity-icon.placement-left,.gravity-button-secondary[disabled] gravity-icon.placement-left,.gravity-button-tertiary[disabled] gravity-icon.placement-left,.gravity-button-positive[disabled] gravity-icon.placement-left,.gravity-button-negative[disabled] gravity-icon.placement-left,.gravity-button-alternative[disabled] gravity-icon.placement-left,.gravity-button-disabled gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-primary[disabled] gravity-icon.placement-right,.gravity-button-secondary[disabled] gravity-icon.placement-right,.gravity-button-tertiary[disabled] gravity-icon.placement-right,.gravity-button-positive[disabled] gravity-icon.placement-right,.gravity-button-negative[disabled] gravity-icon.placement-right,.gravity-button-alternative[disabled] gravity-icon.placement-right,.gravity-button-disabled gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]){--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]){--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]){--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]){--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);--progressbar-color: var(--bg-button-disabled);cursor:default}ngb-progressbar{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.NgbProgressbar, selector: "ngb-progressbar", inputs: ["max", "animated", "ariaLabel", "striped", "showValue", "textType", "type", "value", "height"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
42
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityButtonComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
44
|
-
args: [{ selector: 'gravity-button', template: "<button [attr.data-cy]=\"cypressTag\" class=\"gravity-button-{{type}} gravity-size-{{size}} hr-label md-bold\"\n [disabled]=\"disabled\" [style]=\"{'pointer-events': isLoading ? 'none' : 'initial'}\">\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-content></ng-content>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngFor=\"let iconName of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;cursor:pointer;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-primary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-secondary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-positive[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-negative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-alternative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-disabled gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-primary[disabled] gravity-icon.placement-left,.gravity-button-secondary[disabled] gravity-icon.placement-left,.gravity-button-tertiary[disabled] gravity-icon.placement-left,.gravity-button-positive[disabled] gravity-icon.placement-left,.gravity-button-negative[disabled] gravity-icon.placement-left,.gravity-button-alternative[disabled] gravity-icon.placement-left,.gravity-button-disabled gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-primary[disabled] gravity-icon.placement-right,.gravity-button-secondary[disabled] gravity-icon.placement-right,.gravity-button-tertiary[disabled] gravity-icon.placement-right,.gravity-button-positive[disabled] gravity-icon.placement-right,.gravity-button-negative[disabled] gravity-icon.placement-right,.gravity-button-alternative[disabled] gravity-icon.placement-right,.gravity-button-disabled gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]){--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]){--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]){--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]){--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);--progressbar-color: var(--bg-button-disabled);cursor:default}ngb-progressbar{width:100%}\n"] }]
|
|
44
|
+
args: [{ selector: 'gravity-button', template: "<button [attr.data-cy]=\"cypressTag\" class=\"gravity-button-{{type}} gravity-size-{{size}} hr-label md-bold\"\n [disabled]=\"disabled\" [style]=\"isLoading ? {'pointer-events': 'none'} : {}\">\n <ng-container *ngIf=\"!isLoading\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <ng-content></ng-content>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"isLoading\">\n <ngb-progressbar [animated]=\"true\" [striped]=\"true\" [value]=\"100\"></ngb-progressbar>\n </ng-container>\n</button>\n\n<ng-template #icons>\n <gravity-icon class=\"placement-{{iconPlacement}}\" [customIconColorVariable]=\"'var(--button-text-color)'\"\n [hoverIcon]=\"false\" [iconName]=\"iconName\" *ngFor=\"let iconName of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [":host{display:block}.gravity-button,.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){align-items:center;display:flex;border-style:solid;border-width:.125rem;border-radius:.625rem;box-shadow:0 3px 6px #00000029;cursor:pointer;height:var(--button-height);justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:100%}.gravity-button.gravity-size-md,.gravity-size-md.gravity-button-style,.gravity-size-md.gravity-button-primary[disabled],.gravity-size-md.gravity-button-secondary[disabled],.gravity-size-md.gravity-button-tertiary[disabled],.gravity-size-md.gravity-button-positive[disabled],.gravity-size-md.gravity-button-negative[disabled],.gravity-size-md.gravity-button-alternative[disabled],.gravity-size-md.gravity-button-disabled,.gravity-size-md.gravity-button-alternative:not([disabled]),.gravity-size-md.gravity-button-negative:not([disabled]),.gravity-size-md.gravity-button-positive:not([disabled]),.gravity-size-md.gravity-button-tertiary:not([disabled]),.gravity-size-md.gravity-button-secondary:not([disabled]),.gravity-size-md.gravity-button-primary:not([disabled]){--button-height: 2.75rem}.gravity-button.gravity-size-sm,.gravity-size-sm.gravity-button-style,.gravity-size-sm.gravity-button-primary[disabled],.gravity-size-sm.gravity-button-secondary[disabled],.gravity-size-sm.gravity-button-tertiary[disabled],.gravity-size-sm.gravity-button-positive[disabled],.gravity-size-sm.gravity-button-negative[disabled],.gravity-size-sm.gravity-button-alternative[disabled],.gravity-size-sm.gravity-button-disabled,.gravity-size-sm.gravity-button-alternative:not([disabled]),.gravity-size-sm.gravity-button-negative:not([disabled]),.gravity-size-sm.gravity-button-positive:not([disabled]),.gravity-size-sm.gravity-button-tertiary:not([disabled]),.gravity-size-sm.gravity-button-secondary:not([disabled]),.gravity-size-sm.gravity-button-primary:not([disabled]){--button-height: 2rem}.gravity-button gravity-icon ::ng-deep svg-icon,.gravity-button-style gravity-icon ::ng-deep svg-icon,.gravity-button-primary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-secondary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-positive[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-negative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-alternative[disabled] gravity-icon ::ng-deep svg-icon,.gravity-button-disabled gravity-icon ::ng-deep svg-icon,.gravity-button-alternative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-negative:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-positive:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-tertiary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-secondary:not([disabled]) gravity-icon ::ng-deep svg-icon,.gravity-button-primary:not([disabled]) gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem}.gravity-button gravity-icon.placement-left,.gravity-button-style gravity-icon.placement-left,.gravity-button-primary[disabled] gravity-icon.placement-left,.gravity-button-secondary[disabled] gravity-icon.placement-left,.gravity-button-tertiary[disabled] gravity-icon.placement-left,.gravity-button-positive[disabled] gravity-icon.placement-left,.gravity-button-negative[disabled] gravity-icon.placement-left,.gravity-button-alternative[disabled] gravity-icon.placement-left,.gravity-button-disabled gravity-icon.placement-left,.gravity-button-alternative:not([disabled]) gravity-icon.placement-left,.gravity-button-negative:not([disabled]) gravity-icon.placement-left,.gravity-button-positive:not([disabled]) gravity-icon.placement-left,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-left,.gravity-button-secondary:not([disabled]) gravity-icon.placement-left,.gravity-button-primary:not([disabled]) gravity-icon.placement-left{margin-right:.5rem}.gravity-button gravity-icon.placement-right,.gravity-button-style gravity-icon.placement-right,.gravity-button-primary[disabled] gravity-icon.placement-right,.gravity-button-secondary[disabled] gravity-icon.placement-right,.gravity-button-tertiary[disabled] gravity-icon.placement-right,.gravity-button-positive[disabled] gravity-icon.placement-right,.gravity-button-negative[disabled] gravity-icon.placement-right,.gravity-button-alternative[disabled] gravity-icon.placement-right,.gravity-button-disabled gravity-icon.placement-right,.gravity-button-alternative:not([disabled]) gravity-icon.placement-right,.gravity-button-negative:not([disabled]) gravity-icon.placement-right,.gravity-button-positive:not([disabled]) gravity-icon.placement-right,.gravity-button-tertiary:not([disabled]) gravity-icon.placement-right,.gravity-button-secondary:not([disabled]) gravity-icon.placement-right,.gravity-button-primary:not([disabled]) gravity-icon.placement-right{margin-left:.5rem}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]){background-color:var(--button-background-color);border-color:var(--button-border-color)}.gravity-button-style,.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled,.gravity-button-alternative:not([disabled]),.gravity-button-negative:not([disabled]),.gravity-button-positive:not([disabled]),.gravity-button-tertiary:not([disabled]),.gravity-button-secondary:not([disabled]),.gravity-button-primary:not([disabled]),.gravity-button-style p,.gravity-button-primary[disabled] p,.gravity-button-secondary[disabled] p,.gravity-button-tertiary[disabled] p,.gravity-button-positive[disabled] p,.gravity-button-negative[disabled] p,.gravity-button-alternative[disabled] p,.gravity-button-disabled p,.gravity-button-alternative:not([disabled]) p,.gravity-button-negative:not([disabled]) p,.gravity-button-positive:not([disabled]) p,.gravity-button-tertiary:not([disabled]) p,.gravity-button-secondary:not([disabled]) p,.gravity-button-primary:not([disabled]) p{color:var(--button-text-color)}.gravity-button-style ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative[disabled] ngb-progressbar ::ng-deep .progress-bar,.gravity-button-disabled ngb-progressbar ::ng-deep .progress-bar,.gravity-button-alternative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-negative:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-positive:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-tertiary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-secondary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar,.gravity-button-primary:not([disabled]) ngb-progressbar ::ng-deep .progress-bar{background-color:var(--progressbar-color)}.gravity-button-primary:not([disabled]){--button-background-color: var(--bg-button-active-primary);--button-border-color: var(--bg-button-active-primary);--button-text-color: var(--on-bg-button-active-primary);--progressbar-color: var(--bg-button-active-primary)}.gravity-button-primary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-primary);--button-border-color: var(--bg-button-hover-primary);--button-text-color: var(--on-bg-button-hover-primary)}.gravity-button-primary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-primary);--button-border-color: var(--bg-button-pressed-primary);--button-text-color: var(--on-bg-button-pressed-primary)}.gravity-button-secondary:not([disabled]){--button-background-color: var(--bg-button-active-secondary);--button-border-color: var(--outline-button-active-secondary);--button-text-color: var(--on-bg-button-active-secondary);--progressbar-color: var(--on-bg-button-active-secondary)}.gravity-button-secondary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-secondary);--button-border-color: var(--outline-button-hover-secondary);--button-text-color: var(--on-bg-button-hover-secondary)}.gravity-button-secondary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-secondary);--button-border-color: var(--outline-button-pressed-secondary);--button-text-color: var(--on-bg-button-pressed-secondary)}.gravity-button-tertiary:not([disabled]){--button-background-color: var(--bg-button-active-tertiary);--button-border-color: var(--bg-button-active-tertiary);--button-text-color: var(--on-bg-button-active-tertiary);--progressbar-color: var(--bg-button-active-tertiary)}.gravity-button-tertiary:not([disabled]):hover{--button-background-color: var(--bg-button-hover-tertiary);--button-border-color: var(--bg-button-hover-tertiary);--button-text-color: var(--on-bg-button-hover-tertiary)}.gravity-button-tertiary:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-tertiary);--button-border-color: var(--bg-button-pressed-tertiary);--button-text-color: var(--on-bg-button-pressed-tertiary)}.gravity-button-positive:not([disabled]){--button-background-color: var(--bg-button-active-positive);--button-border-color: var(--bg-button-active-positive);--button-text-color: var(--on-bg-button-active-positive);--progressbar-color: var(--bg-button-active-positive)}.gravity-button-positive:not([disabled]):hover{--button-background-color: var(--bg-button-hover-positive);--button-border-color: var(--bg-button-hover-positive);--button-text-color: var(--on-bg-button-hover-positive)}.gravity-button-positive:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-positive);--button-border-color: var(--bg-button-pressed-positive);--button-text-color: var(--on-bg-button-pressed-positive)}.gravity-button-negative:not([disabled]){--button-background-color: var(--bg-button-active-negative);--button-border-color: var(--bg-button-active-negative);--button-text-color: var(--on-bg-button-active-negative);--progressbar-color: var(--bg-button-active-negative)}.gravity-button-negative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-negative);--button-border-color: var(--bg-button-hover-negative);--button-text-color: var(--on-bg-button-hover-negative)}.gravity-button-negative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-negative);--button-border-color: var(--bg-button-pressed-negative);--button-text-color: var(--on-bg-button-pressed-negative)}.gravity-button-alternative:not([disabled]){--button-background-color: var(--bg-button-active-alternative);--button-border-color: var(--bg-button-active-alternative);--button-text-color: var(--on-bg-button-active-alternative);--progressbar-color: var(--bg-button-active-alternative)}.gravity-button-alternative:not([disabled]):hover{--button-background-color: var(--bg-button-hover-alternative);--button-border-color: var(--bg-button-hover-alternative);--button-text-color: var(--on-bg-button-hover-alternative)}.gravity-button-alternative:not([disabled]).pressed{--button-background-color: var(--bg-button-pressed-alternative);--button-border-color: var(--bg-button-pressed-alternative);--button-text-color: var(--on-bg-button-pressed-alternative)}.gravity-button-primary[disabled],.gravity-button-secondary[disabled],.gravity-button-tertiary[disabled],.gravity-button-positive[disabled],.gravity-button-negative[disabled],.gravity-button-alternative[disabled],.gravity-button-disabled{--button-background-color: var(--bg-button-disabled);--button-border-color: var(--bg-button-disabled);--button-text-color: var(--on-bg-button-disabled);--progressbar-color: var(--bg-button-disabled);cursor:default}ngb-progressbar{width:100%}\n"] }]
|
|
45
45
|
}], propDecorators: { cypressTag: [{
|
|
46
46
|
type: Input
|
|
47
47
|
}], disabled: [{
|
|
@@ -177,10 +177,10 @@ class GravityTextFieldComponent {
|
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
GravityTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
-
GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { autocomplete: "autocomplete", clickOnIconName: "clickOnIconName", currentLang: "currentLang", customPlaceholder: "customPlaceholder", customInputValue: "customInputValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconPlacement: "iconPlacement", inputContentType: "inputContentType", label: "label", placeholderType: "placeholderType", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType", textFieldType: "textFieldType", validations: "validations" }, outputs: { iconResponse: "clickIcon", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 500\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"handleIconClick(name)\" class=\"placement-{{iconPlacement}} {{clickOnIconName ? 'pointer' : ''}}\"\n [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem;pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;outline:none;padding:0;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
180
|
+
GravityTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { autocomplete: "autocomplete", clickOnIconName: "clickOnIconName", currentLang: "currentLang", customPlaceholder: "customPlaceholder", customInputValue: "customInputValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconPlacement: "iconPlacement", inputContentType: "inputContentType", label: "label", placeholderType: "placeholderType", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType", textFieldType: "textFieldType", validations: "validations" }, outputs: { iconResponse: "clickIcon", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 500\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"handleIconClick(name)\" class=\"placement-{{iconPlacement}} {{clickOnIconName ? 'pointer' : ''}}\"\n [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem;pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;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 svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon"] }] });
|
|
181
181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
182
182
|
type: Component,
|
|
183
|
-
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 500\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"handleIconClick(name)\" class=\"placement-{{iconPlacement}} {{clickOnIconName ? 'pointer' : ''}}\"\n [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem;pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;outline:none;padding:0;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
|
|
183
|
+
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text md-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 500\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"handleIconClick(name)\" class=\"placement-{{iconPlacement}} {{clickOnIconName ? 'pointer' : ''}}\"\n [customIconColorVariable]=\"iconColor\" [hoverIcon]=\"false\"\n [iconName]=\"name\" *ngFor=\"let name of iconNames\"></gravity-icon>\n</ng-template>\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{--icon-height: 1.25rem;--icon-width: 1.25rem;pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;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 svg-icon ::ng-deep svg{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled svg-icon ::ng-deep svg{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
|
|
184
184
|
}], propDecorators: { iconResponse: [{
|
|
185
185
|
type: Output,
|
|
186
186
|
args: ['clickIcon']
|
|
@@ -1233,10 +1233,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1233
1233
|
args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\"\n [delay]=\"5000\"\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: [".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{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"] }]
|
|
1234
1234
|
}], ctorParameters: function () { return [{ type: GravityInstantNotificationsService }]; } });
|
|
1235
1235
|
|
|
1236
|
+
class GravityAttachFileComponent {
|
|
1237
|
+
constructor() {
|
|
1238
|
+
this.fileValueResponse = new EventEmitter();
|
|
1239
|
+
this.currentLang = 'en';
|
|
1240
|
+
this.state = "enabled";
|
|
1241
|
+
}
|
|
1242
|
+
handleFileInput($event) {
|
|
1243
|
+
this.file = $event.target.files[0];
|
|
1244
|
+
if (this.file) {
|
|
1245
|
+
GravityAttachFileComponent.convertFileToBase64(this.file).then((base64String) => {
|
|
1246
|
+
this.fileValueResponse.emit(base64String);
|
|
1247
|
+
}).catch((error) => {
|
|
1248
|
+
console.error('Error loading file:', error.message);
|
|
1249
|
+
});
|
|
1250
|
+
}
|
|
1251
|
+
}
|
|
1252
|
+
static convertFileToBase64(file) {
|
|
1253
|
+
return new Promise((resolve, reject) => {
|
|
1254
|
+
const reader = new FileReader();
|
|
1255
|
+
reader.onload = () => {
|
|
1256
|
+
const base64String = reader.result;
|
|
1257
|
+
const base64WithoutPrefix = base64String.split(',')[1];
|
|
1258
|
+
resolve(base64WithoutPrefix);
|
|
1259
|
+
};
|
|
1260
|
+
reader.onerror = () => {
|
|
1261
|
+
reject(new Error('Failed to read the file.'));
|
|
1262
|
+
};
|
|
1263
|
+
reader.readAsDataURL(file);
|
|
1264
|
+
});
|
|
1265
|
+
}
|
|
1266
|
+
removeFile() {
|
|
1267
|
+
this.file = null;
|
|
1268
|
+
this.fileValueResponse.emit('');
|
|
1269
|
+
}
|
|
1270
|
+
}
|
|
1271
|
+
GravityAttachFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityAttachFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1272
|
+
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 md-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 [iconNames]=\"['clip']\" [iconPlacement]=\"'right'\" [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()\" [iconNames]=\"['clip']\"\n [iconPlacement]=\"'right'\" [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}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-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", "iconNames", "iconPlacement", "isLoading", "size", "type"] }] });
|
|
1273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityAttachFileComponent, decorators: [{
|
|
1274
|
+
type: Component,
|
|
1275
|
+
args: [{ selector: 'gravity-attach-file', template: "<label class=\"hr-body-text md-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 [iconNames]=\"['clip']\" [iconPlacement]=\"'right'\" [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()\" [iconNames]=\"['clip']\"\n [iconPlacement]=\"'right'\" [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}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-button{width:11rem}gravity-button,gravity-button ::ng-deep button{pointer-events:none}\n"] }]
|
|
1276
|
+
}], propDecorators: { fileValueResponse: [{
|
|
1277
|
+
type: Output,
|
|
1278
|
+
args: ['response']
|
|
1279
|
+
}], currentLang: [{
|
|
1280
|
+
type: Input
|
|
1281
|
+
}], cypressTag: [{
|
|
1282
|
+
type: Input
|
|
1283
|
+
}], label: [{
|
|
1284
|
+
type: Input
|
|
1285
|
+
}], required: [{
|
|
1286
|
+
type: Input
|
|
1287
|
+
}], state: [{
|
|
1288
|
+
type: Input
|
|
1289
|
+
}], supportTextContent: [{
|
|
1290
|
+
type: Input
|
|
1291
|
+
}], supportTextType: [{
|
|
1292
|
+
type: Input
|
|
1293
|
+
}] } });
|
|
1294
|
+
|
|
1236
1295
|
class GravityDesignSystemModule {
|
|
1237
1296
|
}
|
|
1238
1297
|
GravityDesignSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1239
|
-
GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, declarations: [
|
|
1298
|
+
GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
|
|
1299
|
+
GravityButtonComponent,
|
|
1240
1300
|
GravityCalendarComponent,
|
|
1241
1301
|
GravityCheckboxComponent,
|
|
1242
1302
|
GravityDialogComponent,
|
|
@@ -1252,7 +1312,8 @@ GravityDesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
|
|
|
1252
1312
|
NgSelectModule,
|
|
1253
1313
|
NgxPrettyCheckboxModule,
|
|
1254
1314
|
ReactiveFormsModule,
|
|
1255
|
-
NgbProgressbarModule], exports: [
|
|
1315
|
+
NgbProgressbarModule], exports: [GravityAttachFileComponent,
|
|
1316
|
+
GravityButtonComponent,
|
|
1256
1317
|
GravityCalendarComponent,
|
|
1257
1318
|
GravityCheckboxComponent,
|
|
1258
1319
|
GravityDialogComponent,
|
|
@@ -1280,6 +1341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1280
1341
|
type: NgModule,
|
|
1281
1342
|
args: [{
|
|
1282
1343
|
declarations: [
|
|
1344
|
+
GravityAttachFileComponent,
|
|
1283
1345
|
GravityButtonComponent,
|
|
1284
1346
|
GravityCalendarComponent,
|
|
1285
1347
|
GravityCheckboxComponent,
|
|
@@ -1308,6 +1370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1308
1370
|
NgbProgressbarModule
|
|
1309
1371
|
],
|
|
1310
1372
|
exports: [
|
|
1373
|
+
GravityAttachFileComponent,
|
|
1311
1374
|
GravityButtonComponent,
|
|
1312
1375
|
GravityCalendarComponent,
|
|
1313
1376
|
GravityCheckboxComponent,
|
|
@@ -1358,5 +1421,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImpor
|
|
|
1358
1421
|
* Generated bundle index. Do not edit.
|
|
1359
1422
|
*/
|
|
1360
1423
|
|
|
1361
|
-
export { GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
|
|
1424
|
+
export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravitySwitchComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule };
|
|
1362
1425
|
//# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map
|