@progressio_resources/gravity-design-system 2.4.3 → 2.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/gravity-offcanvas/gravity-offcanvas.component.mjs +24 -0
- package/esm2022/lib/components/gravity-table/gravity-table.component.mjs +53 -42
- package/esm2022/lib/components/gravity-text-field/gravity-text-field.component.mjs +3 -3
- package/esm2022/lib/gravity-design-system.module.mjs +10 -2
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/progressio_resources-gravity-design-system.mjs +85 -46
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-offcanvas/gravity-offcanvas.component.d.ts +10 -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/styles/components/_offcanvas.scss +72 -0
- package/src/lib/styles/components/_tables.scss +1 -2
- package/src/lib/styles/gravity-design-system.scss +1 -0
package/esm2022/public-api.mjs
CHANGED
|
@@ -11,6 +11,7 @@ export * from './lib/components/gravity-dialog/gravity-dialog.component';
|
|
|
11
11
|
export * from './lib/components/gravity-dropdown-list/gravity-dropdown-list.component';
|
|
12
12
|
export * from './lib/components/gravity-icon/gravity-icon.component';
|
|
13
13
|
export * from './lib/components/gravity-notification-instant/gravity-notification-instant-container.component';
|
|
14
|
+
export * from './lib/components/gravity-offcanvas/gravity-offcanvas.component';
|
|
14
15
|
export * from './lib/components/gravity-radio-button/gravity-radio-button.component';
|
|
15
16
|
export * from './lib/components/gravity-stepper/gravity-stepper.component';
|
|
16
17
|
export * from './lib/components/gravity-switch/gravity-switch.component';
|
|
@@ -23,4 +24,4 @@ export * from './lib/services/gravity-dialog-manager.service';
|
|
|
23
24
|
export * from './lib/vendor/gravity-tooltip';
|
|
24
25
|
//Models and interfaces
|
|
25
26
|
export * from './lib/components/gravity-notification/gravity-notification-content.interface';
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
27
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2dyYXZpdHktZGVzaWduLXN5c3RlbS9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsb0NBQW9DLENBQUM7QUFFbkQsWUFBWTtBQUNaLGNBQWMsb0VBQW9FLENBQUM7QUFDbkYsY0FBYywwREFBMEQsQ0FBQztBQUN6RSxjQUFjLDhEQUE4RCxDQUFDO0FBQzdFLGNBQWMsOERBQThELENBQUM7QUFDN0UsY0FBYywwREFBMEQsQ0FBQztBQUN6RSxjQUFjLHdFQUF3RSxDQUFDO0FBQ3ZGLGNBQWMsc0RBQXNELENBQUM7QUFDckUsY0FBYyxnR0FBZ0csQ0FBQztBQUMvRyxjQUFjLGdFQUFnRSxDQUFDO0FBQy9FLGNBQWMsc0VBQXNFLENBQUM7QUFDckYsY0FBYyw0REFBNEQsQ0FBQztBQUMzRSxjQUFjLDBEQUEwRCxDQUFDO0FBQ3pFLGNBQWMsd0RBQXdELENBQUM7QUFDdkUsY0FBYyxrRUFBa0UsQ0FBQztBQUNqRixjQUFjLGdFQUFnRSxDQUFDO0FBRS9FLFVBQVU7QUFDVixjQUFjLCtDQUErQyxDQUFDO0FBRTlELFFBQVE7QUFDUixjQUFjLDhCQUE4QixDQUFDO0FBRTdDLHVCQUF1QjtBQUN2QixjQUFjLDhFQUE4RSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBncmF2aXR5LWRlc2lnbi1zeXN0ZW1cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0ubW9kdWxlJztcblxuLy9Db21wb25lbnRzXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2dyYXZpdHktYXR0YWNoLWZpbGUvZ3Jhdml0eS1hdHRhY2gtZmlsZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9ncmF2aXR5LWJ1dHRvbi9ncmF2aXR5LWJ1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9ncmF2aXR5LWNhbGVuZGFyL2dyYXZpdHktY2FsZW5kYXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZ3Jhdml0eS1jaGVja2JveC9ncmF2aXR5LWNoZWNrYm94LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2dyYXZpdHktZGlhbG9nL2dyYXZpdHktZGlhbG9nLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2dyYXZpdHktZHJvcGRvd24tbGlzdC9ncmF2aXR5LWRyb3Bkb3duLWxpc3QuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZ3Jhdml0eS1pY29uL2dyYXZpdHktaWNvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9ncmF2aXR5LW5vdGlmaWNhdGlvbi1pbnN0YW50L2dyYXZpdHktbm90aWZpY2F0aW9uLWluc3RhbnQtY29udGFpbmVyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2dyYXZpdHktb2ZmY2FudmFzL2dyYXZpdHktb2ZmY2FudmFzLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2dyYXZpdHktcmFkaW8tYnV0dG9uL2dyYXZpdHktcmFkaW8tYnV0dG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2dyYXZpdHktc3RlcHBlci9ncmF2aXR5LXN0ZXBwZXIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZ3Jhdml0eS1zd2l0Y2gvZ3Jhdml0eS1zd2l0Y2guY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZ3Jhdml0eS10YWJsZS9ncmF2aXR5LXRhYmxlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2dyYXZpdHktdGV4dC1maWVsZC9ncmF2aXR5LXRleHQtZmllbGQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZ3Jhdml0eS10cmVlLXZpZXcvZ3Jhdml0eS10cmVlLXZpZXcuY29tcG9uZW50JztcblxuLy9TZXJ2aWNlc1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VydmljZXMvZ3Jhdml0eS1kaWFsb2ctbWFuYWdlci5zZXJ2aWNlJztcblxuLy9WZW5kb3JcbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZlbmRvci9ncmF2aXR5LXRvb2x0aXAnO1xuXG4vL01vZGVscyBhbmQgaW50ZXJmYWNlc1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9ncmF2aXR5LW5vdGlmaWNhdGlvbi9ncmF2aXR5LW5vdGlmaWNhdGlvbi1jb250ZW50LmludGVyZmFjZSc7XG4iXX0=
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable } from '@angular/core';
|
|
2
|
+
import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable, inject } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
|
|
8
|
-
import { NgbDatepickerModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
|
|
8
|
+
import { NgbOffcanvas, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
|
|
9
9
|
import * as i1 from 'angular-svg-icon';
|
|
10
10
|
import { AngularSvgIconModule } from 'angular-svg-icon';
|
|
11
11
|
import * as i3 from '@ng-select/ng-select';
|
|
@@ -209,11 +209,11 @@ class GravityTextFieldComponent {
|
|
|
209
209
|
}
|
|
210
210
|
}
|
|
211
211
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
212
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { autocomplete: "autocomplete", clickOnIconName: "clickOnIconName", currentLang: "currentLang", customPlaceholder: "customPlaceholder", customInputValue: "customInputValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconsSizes: "iconsSizes", iconPlacement: "iconPlacement", inputContentType: "inputContentType", label: "label", placeholderType: "placeholderType", prefix: "prefix", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType", textFieldType: "textFieldType", validations: "validations" }, outputs: { iconResponse: "clickIcon", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\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 : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n rows=\"3\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"getIconColor(i)\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames; let i = index\"\n [size]=\"iconsSizes[i]\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field .prefix{color:var(--text-field-input-field-input-color)}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--text-field-input-field-background-color) inset!important;-webkit-text-fill-color:var(--text-field-input-field-input-color)!important}.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;max-height:5rem;max-width:100%;min-height:1rem;outline:none;padding:0;resize:none;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
212
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { autocomplete: "autocomplete", clickOnIconName: "clickOnIconName", currentLang: "currentLang", customPlaceholder: "customPlaceholder", customInputValue: "customInputValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconsSizes: "iconsSizes", iconPlacement: "iconPlacement", inputContentType: "inputContentType", label: "label", placeholderType: "placeholderType", prefix: "prefix", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType", textFieldType: "textFieldType", validations: "validations" }, outputs: { iconResponse: "clickIcon", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\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 : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n rows=\"3\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"getIconColor(i)\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames; let i = index\"\n [size]=\"iconsSizes[i % iconsSizes.length]\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field .prefix{color:var(--text-field-input-field-input-color)}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--text-field-input-field-background-color) inset!important;-webkit-text-fill-color:var(--text-field-input-field-input-color)!important}.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;max-height:5rem;max-width:100%;min-height:1rem;outline:none;padding:0;resize:none;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
213
213
|
}
|
|
214
214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
215
215
|
type: Component,
|
|
216
|
-
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\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 : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n rows=\"3\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"getIconColor(i)\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames; let i = index\"\n [size]=\"iconsSizes[i]\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field .prefix{color:var(--text-field-input-field-input-color)}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--text-field-input-field-background-color) inset!important;-webkit-text-fill-color:var(--text-field-input-field-input-color)!important}.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;max-height:5rem;max-width:100%;min-height:1rem;outline:none;padding:0;resize:none;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
|
|
216
|
+
args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\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 : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keyup)=\"changeInputValue()\"\n\n class=\"hr-label md-regular\"\n rows=\"3\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"getIconColor(i)\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames; let i = index\"\n [size]=\"iconsSizes[i % iconsSizes.length]\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field .prefix{color:var(--text-field-input-field-input-color)}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--text-field-input-field-background-color) inset!important;-webkit-text-fill-color:var(--text-field-input-field-input-color)!important}.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;max-height:5rem;max-width:100%;min-height:1rem;outline:none;padding:0;resize:none;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"] }]
|
|
217
217
|
}], propDecorators: { iconResponse: [{
|
|
218
218
|
type: Output,
|
|
219
219
|
args: ['clickIcon']
|
|
@@ -1402,37 +1402,43 @@ class GravityTableComponent {
|
|
|
1402
1402
|
let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
|
|
1403
1403
|
let closeButtons = document.querySelectorAll('gravity-button[id-reference="close-button"]');
|
|
1404
1404
|
tableBodyRows.forEach((tr, index) => {
|
|
1405
|
-
let
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1405
|
+
let actionColum = null;
|
|
1406
|
+
if (tr.firstChild) {
|
|
1407
|
+
actionColum = tr.firstChild.parentElement.querySelectorAll('td.actions-column');
|
|
1408
|
+
}
|
|
1409
|
+
if (actionColum?.length > 0) {
|
|
1410
|
+
let mobileMenuTrigger = document.createElement('div');
|
|
1411
|
+
this.renderer.addClass(mobileMenuTrigger, 'mobile-menu-trigger');
|
|
1412
|
+
this.renderer.setAttribute(mobileMenuTrigger, 'cloned-node', 'true');
|
|
1413
|
+
let menuToggle = document.createElement('div');
|
|
1414
|
+
this.renderer.addClass(menuToggle, 'menu-toggle');
|
|
1415
|
+
menuToggle.appendChild(document.createElement('span'));
|
|
1416
|
+
menuToggle.appendChild(document.createElement('span'));
|
|
1417
|
+
menuToggle.appendChild(document.createElement('span'));
|
|
1418
|
+
menuToggle.addEventListener("click", () => {
|
|
1419
|
+
if (menuToggle.classList.contains('open')) {
|
|
1420
|
+
this.renderer.removeClass(menuToggle, 'open');
|
|
1421
|
+
this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1422
|
+
}
|
|
1423
|
+
else {
|
|
1424
|
+
this.renderer.addClass(menuToggle, 'open');
|
|
1425
|
+
this.renderer.addClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1426
|
+
}
|
|
1427
|
+
});
|
|
1428
|
+
mobileMenuTrigger.appendChild(menuToggle);
|
|
1429
|
+
let panel = document.createElement('div');
|
|
1430
|
+
this.renderer.addClass(panel, 'panel');
|
|
1431
|
+
let closeButtonFromNodeList = closeButtons.item(index);
|
|
1432
|
+
let closeButtonRemoved = closeButtonFromNodeList.parentNode.removeChild(closeButtonFromNodeList);
|
|
1433
|
+
this.renderer.setAttribute(closeButtonRemoved, 'cloned-button', 'true');
|
|
1434
|
+
closeButtonRemoved.addEventListener("click", () => {
|
|
1415
1435
|
this.renderer.removeClass(menuToggle, 'open');
|
|
1416
1436
|
this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1417
|
-
}
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
});
|
|
1423
|
-
mobileMenuTrigger.appendChild(menuToggle);
|
|
1424
|
-
let panel = document.createElement('div');
|
|
1425
|
-
this.renderer.addClass(panel, 'panel');
|
|
1426
|
-
let closeButtonFromNodeList = closeButtons.item(index);
|
|
1427
|
-
let closeButtonRemoved = closeButtonFromNodeList.parentNode.removeChild(closeButtonFromNodeList);
|
|
1428
|
-
this.renderer.setAttribute(closeButtonRemoved, 'cloned-button', 'true');
|
|
1429
|
-
closeButtonRemoved.addEventListener("click", () => {
|
|
1430
|
-
this.renderer.removeClass(menuToggle, 'open');
|
|
1431
|
-
this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1432
|
-
});
|
|
1433
|
-
panel.append(closeButtonRemoved);
|
|
1434
|
-
mobileMenuTrigger.appendChild(panel);
|
|
1435
|
-
tr.insertBefore(mobileMenuTrigger, tr.firstChild);
|
|
1437
|
+
});
|
|
1438
|
+
panel.append(closeButtonRemoved);
|
|
1439
|
+
mobileMenuTrigger.appendChild(panel);
|
|
1440
|
+
tr.insertBefore(mobileMenuTrigger, tr.firstChild);
|
|
1441
|
+
}
|
|
1436
1442
|
});
|
|
1437
1443
|
}
|
|
1438
1444
|
adjustTableDensity(densityValue) {
|
|
@@ -1485,23 +1491,28 @@ class GravityTableComponent {
|
|
|
1485
1491
|
adjustTable() {
|
|
1486
1492
|
if (this.tableSize == 'md' || this.tableSize == 'sm') {
|
|
1487
1493
|
let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1494
|
+
tableBodyRows.forEach((tr) => {
|
|
1495
|
+
if (tr.firstChild) {
|
|
1496
|
+
let trActionsColum = tr.firstChild.parentElement.querySelectorAll('td.actions-column')[0];
|
|
1497
|
+
let mobileMenuTrigger = tr.firstChild.parentElement.querySelectorAll('.mobile-menu-trigger[cloned-node="true"]')[0];
|
|
1498
|
+
if (mobileMenuTrigger) {
|
|
1499
|
+
let mobileMenuTriggerPanel = mobileMenuTrigger.lastChild;
|
|
1500
|
+
if (trActionsColum && mobileMenuTriggerPanel) {
|
|
1501
|
+
this.appendNodesList(mobileMenuTriggerPanel, trActionsColum.childNodes);
|
|
1502
|
+
}
|
|
1503
|
+
}
|
|
1495
1504
|
}
|
|
1496
1505
|
});
|
|
1497
1506
|
}
|
|
1498
1507
|
if (this.tableSize == 'lg' || this.tableSize == 'xl') {
|
|
1499
1508
|
let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1509
|
+
tableBodyRows.forEach((tr) => {
|
|
1510
|
+
if (tr.firstChild) {
|
|
1511
|
+
let trActionsColum = tr.firstChild.parentElement.querySelectorAll('td.actions-column')[0];
|
|
1512
|
+
let mobileMenuTrigger = tr.firstChild.parentElement.querySelectorAll('.mobile-menu-trigger[cloned-node="true"]')[0];
|
|
1513
|
+
if (trActionsColum && mobileMenuTrigger) {
|
|
1514
|
+
this.appendNodesList(trActionsColum, mobileMenuTrigger.lastChild.childNodes);
|
|
1515
|
+
}
|
|
1505
1516
|
}
|
|
1506
1517
|
});
|
|
1507
1518
|
}
|
|
@@ -1912,6 +1923,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1912
1923
|
args: ['currentStep']
|
|
1913
1924
|
}] } });
|
|
1914
1925
|
|
|
1926
|
+
class GravityOffcanvasComponent {
|
|
1927
|
+
constructor() {
|
|
1928
|
+
this.offcanvasService = inject(NgbOffcanvas);
|
|
1929
|
+
}
|
|
1930
|
+
open(options) {
|
|
1931
|
+
this.offcanvasService.open(this.offcanvasContent, options);
|
|
1932
|
+
}
|
|
1933
|
+
dismiss() {
|
|
1934
|
+
this.offcanvasService.dismiss();
|
|
1935
|
+
}
|
|
1936
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityOffcanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1937
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityOffcanvasComponent, selector: "gravity-offcanvas", viewQueries: [{ propertyName: "offcanvasContent", first: true, predicate: ["offcanvasContent"], descendants: true }], ngImport: i0, template: "<ng-template #offcanvasContent>\n <ng-content></ng-content>\n</ng-template>\n", styles: [""] }); }
|
|
1938
|
+
}
|
|
1939
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityOffcanvasComponent, decorators: [{
|
|
1940
|
+
type: Component,
|
|
1941
|
+
args: [{ selector: 'gravity-offcanvas', template: "<ng-template #offcanvasContent>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
1942
|
+
}], propDecorators: { offcanvasContent: [{
|
|
1943
|
+
type: ViewChild,
|
|
1944
|
+
args: ['offcanvasContent', { static: false }]
|
|
1945
|
+
}] } });
|
|
1946
|
+
|
|
1915
1947
|
class GravityDesignSystemModule {
|
|
1916
1948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1917
1949
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
|
|
@@ -1923,6 +1955,7 @@ class GravityDesignSystemModule {
|
|
|
1923
1955
|
GravityIconComponent,
|
|
1924
1956
|
GravityNotificationComponent,
|
|
1925
1957
|
GravityNotificationInstantContainerComponent,
|
|
1958
|
+
GravityOffcanvasComponent,
|
|
1926
1959
|
GravityRadioButtonComponent,
|
|
1927
1960
|
GravityStepperComponent,
|
|
1928
1961
|
GravitySwitchComponent,
|
|
@@ -1935,6 +1968,7 @@ class GravityDesignSystemModule {
|
|
|
1935
1968
|
NodeNameComponent], imports: [i1.AngularSvgIconModule, i2$1.AngularSvgIconPreloaderModule, BsDatepickerModule,
|
|
1936
1969
|
CommonModule,
|
|
1937
1970
|
FormsModule, GravityTooltipModule, NgbDatepickerModule,
|
|
1971
|
+
NgbOffcanvasModule,
|
|
1938
1972
|
NgbProgressbarModule,
|
|
1939
1973
|
NgbToastModule,
|
|
1940
1974
|
NgSelectModule,
|
|
@@ -1947,6 +1981,7 @@ class GravityDesignSystemModule {
|
|
|
1947
1981
|
GravityDropdownListComponent,
|
|
1948
1982
|
GravityIconComponent,
|
|
1949
1983
|
GravityNotificationInstantContainerComponent,
|
|
1984
|
+
GravityOffcanvasComponent,
|
|
1950
1985
|
GravityRadioButtonComponent,
|
|
1951
1986
|
GravityStepperComponent,
|
|
1952
1987
|
GravitySwitchComponent,
|
|
@@ -1963,6 +1998,7 @@ class GravityDesignSystemModule {
|
|
|
1963
1998
|
FormsModule,
|
|
1964
1999
|
GravityTooltipModule.forRoot({}),
|
|
1965
2000
|
NgbDatepickerModule,
|
|
2001
|
+
NgbOffcanvasModule,
|
|
1966
2002
|
NgbProgressbarModule,
|
|
1967
2003
|
NgbToastModule,
|
|
1968
2004
|
NgSelectModule,
|
|
@@ -1982,6 +2018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1982
2018
|
GravityIconComponent,
|
|
1983
2019
|
GravityNotificationComponent,
|
|
1984
2020
|
GravityNotificationInstantContainerComponent,
|
|
2021
|
+
GravityOffcanvasComponent,
|
|
1985
2022
|
GravityRadioButtonComponent,
|
|
1986
2023
|
GravityStepperComponent,
|
|
1987
2024
|
GravitySwitchComponent,
|
|
@@ -2003,6 +2040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2003
2040
|
FormsModule,
|
|
2004
2041
|
GravityTooltipModule.forRoot({}),
|
|
2005
2042
|
NgbDatepickerModule,
|
|
2043
|
+
NgbOffcanvasModule,
|
|
2006
2044
|
NgbProgressbarModule,
|
|
2007
2045
|
NgbToastModule,
|
|
2008
2046
|
NgSelectModule,
|
|
@@ -2018,6 +2056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2018
2056
|
GravityDropdownListComponent,
|
|
2019
2057
|
GravityIconComponent,
|
|
2020
2058
|
GravityNotificationInstantContainerComponent,
|
|
2059
|
+
GravityOffcanvasComponent,
|
|
2021
2060
|
GravityRadioButtonComponent,
|
|
2022
2061
|
GravityStepperComponent,
|
|
2023
2062
|
GravitySwitchComponent,
|
|
@@ -2079,5 +2118,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2079
2118
|
* Generated bundle index. Do not edit.
|
|
2080
2119
|
*/
|
|
2081
2120
|
|
|
2082
|
-
export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityRadioButtonComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent };
|
|
2121
|
+
export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent };
|
|
2083
2122
|
//# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map
|