@progressio_resources/gravity-design-system 2.5.13 → 2.5.15

package/fesm2022/progressio_resources-gravity-design-system.mjs

@@ -276,25 +276,9 @@ class GravityTextFieldComponent {
             return this.customState;
         }
     }
-    getTextFieldLabelFontSize() {
-        if (this.size == 'sm') {
-            return 'hr-label sm-bold custom-label-size';
-        }
-        else {
-            return 'hr-label sm-bold';
-        }
-    }
     getTextFieldInputFontSize() {
         return 'hr-label ' + this.size + '-regular';
     }
-    getTextFieldSupportTextFontSize() {
-        if (this.size == 'sm') {
-            return 'hr-label sm-regular custom-label-size';
-        }
-        else {
-            return 'hr-label sm-regular';
-        }
-    }
     isNewIcon(iconPosition) {
         if (iconPosition == 'left') {
             return GravityIconComponent.isNewIcon(this.iconLeft);
@@ -304,11 +288,11 @@ class GravityTextFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { currentLang: "currentLang", customInputValue: "customInputValue", customState: "customState", cypressTag: "cypressTag", label: "label", prefix: "prefix", required: "required", supportText: "supportText", textFieldType: "textFieldType", clickOnLeftIcon: "clickOnLeftIcon", clickOnRightIcon: "clickOnRightIcon", iconLeft: "iconLeft", iconRight: "iconRight", autocomplete: "autocomplete", inputContentType: "inputContentType", placeholder: "placeholder", validations: "validations", size: "size", width: "width" }, outputs: { leftIconResponse: "clickIconLeft", rightIconResponse: "clickIconRight", 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=\"{{getTextFieldLabelFontSize()}} {{getTextFieldStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == ''\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"\n                [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></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);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width{--text-field-input-field-width: 416px}.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { currentLang: "currentLang", customInputValue: "customInputValue", customState: "customState", cypressTag: "cypressTag", label: "label", prefix: "prefix", required: "required", supportText: "supportText", textFieldType: "textFieldType", clickOnLeftIcon: "clickOnLeftIcon", clickOnRightIcon: "clickOnRightIcon", iconLeft: "iconLeft", iconRight: "iconRight", autocomplete: "autocomplete", inputContentType: "inputContentType", placeholder: "placeholder", validations: "validations", size: "size", width: "width" }, outputs: { leftIconResponse: "clickIconLeft", rightIconResponse: "clickIconRight", 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-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n   [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n   [class.custom-label-size]=\"size == 'sm'\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"\n                [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></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);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width{--text-field-input-field-width: 416px}.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-text-field', template: "<label class=\"{{getTextFieldLabelFontSize()}} {{getTextFieldStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"{{getTextFieldSupportTextFontSize()}} supporting-text {{getTextFieldStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == ''\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"\n                [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></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);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width{--text-field-input-field-width: 416px}.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"] }]
+            args: [{ selector: 'gravity-text-field', template: "<label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n</label>\n<div class=\"gravity-input-field {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n  <ng-container *ngIf=\"iconLeft\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n  </ng-container>\n  <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{prefix}}</span>\n  <input [attr.data-cy]=\"cypressTag\"\n         [attr.disabled]=\"customState == 'disabled' ? true : null\"\n         [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n\n         #inputElement\n\n         *ngIf=\"textFieldType == 'input'\">\n  <textarea [attr.data-cy]=\"cypressTag\"\n            [attr.disabled]=\"customState == 'disabled' ? true : null\"\n            [attr.readonly]=\"customState == '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=\"{{getTextFieldInputFontSize()}}\"\n            rows=\"1\"\n\n            #textAreaElement\n\n            *ngIf=\"textFieldType == 'textarea'\"></textarea>\n  <ng-container *ngIf=\"iconRight\">\n    <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n   [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n   [class.custom-label-size]=\"size == 'sm'\"\n   *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n\n<ng-template #icons let-iconPosition=\"iconPosition\">\n  <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(iconPosition)\" class=\"{{iconPosition}}\"\n                [class.pointer]=\"(iconPosition == 'left' && clickOnLeftIcon) || (iconPosition == 'right' && clickOnRightIcon)\"\n                [iconName]=\"iconPosition == 'left' ? iconLeft : iconRight\"\n                [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\"></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);display:block;margin:0 12px 5px}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.hr-label.sm-bold.custom-label-size,.hr-label.sm-regular.custom-label-size{font-size:10px;letter-spacing:.25px}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);display:flex;height:var(--text-field-input-field-height);padding:10px 12px;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:5px}.gravity-input-field gravity-icon.right{margin-left:5px}.gravity-input-field .prefix{color:var(--text-field-input-field-content-color)}.gravity-input-field input,.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-input-field input::placeholder,.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field input:-webkit-autofill,.gravity-input-field textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-input-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width{--text-field-input-field-width: 416px}.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.hover{--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-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill{--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-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.autofill:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.autofill input,.gravity-input-field.autofill textarea{background-color:var(--bg-field-autofill);color:var(--label-text-full-enabled-primary)}.gravity-input-field.typing{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-pressed-primary);--text-field-input-field-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.typing:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.typed-positive{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--positive-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-placeholder-color: var(--label-text-full-enabled-primary)}.gravity-input-field.typed-positive:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-placeholder-color: var(--on-bg-disabled)}.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-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"] }]
         }], propDecorators: { leftIconResponse: [{
                 type: Output,
                 args: ['clickIconLeft']
@@ -1239,11 +1223,11 @@ class GravitySwitchComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { currentLang: "currentLang", customCheck: "customCheck", cypressTag: "cypressTag", label: "label", required: "required", state: "state", toggleOptions: "toggleOptions" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular\">\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-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius: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-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravitySwitchComponent, selector: "gravity-switch", inputs: { currentLang: "currentLang", customCheck: "customCheck", cypressTag: "cypressTag", label: "label", required: "required", state: "state", toggleOptions: "toggleOptions" }, outputs: { switchResponse: "response" }, ngImport: i0, template: "<label class=\"hr-body-text sm-regular\" *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-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius: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-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravitySwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text sm-regular\">\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-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius: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-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"] }]
+            args: [{ selector: 'gravity-switch', template: "<label class=\"hr-body-text sm-regular\" *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-switch\" [class.toggle-options]=\"toggleOptions\">\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[0]}}\n  </span>\n  <div [attr.data-cy]=\"cypressTag\" class=\"switch\" (click)=\"toggleSwitch()\" [class.disabled]=\"state == 'disabled'\">\n    <input type=\"checkbox\" [checked]=\"isSwitchActive\" [disabled]=\"state == 'disabled'\">\n    <span class=\"slider round\"></span>\n  </div>\n  <span class=\"hr-body-text sm-regular\" *ngIf=\"toggleOptions\">\n    {{toggleOptions[1]}}\n  </span>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius: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-primary);margin-inline:1rem}.gravity-switch{align-items:center;display:flex;height:3rem;padding:.625rem 1rem}.gravity-switch.toggle-options .switch{margin-inline:.5rem .75rem}.gravity-switch .switch{display:inline-block;height:1.75rem;position:relative;width:3rem}.gravity-switch .switch input{opacity:0;width:0;height:0}.gravity-switch .switch input:checked+.slider{background-color:var(--bg-switch-on-primary)}.gravity-switch .switch input:checked+.slider:before{background-color:var(--on-bg-switch-on-primary);transform:translate(110%);-webkit-transform:translateX(110%)}.gravity-switch .switch span.slider{background-color:var(--bg-switch-off-primary);border-radius:6.25rem;cursor:pointer;inset:0;position:absolute;transition:.4s;-webkit-transition:.4s}.gravity-switch .switch span.slider:before{background-color:var(--on-bg-switch-off-primary);border-radius:6.25rem;content:\"\";height:1.1rem;left:10%;position:absolute;top:18%;transition:.4s;width:1.1rem;-webkit-transition:.4s}.gravity-switch .switch.disabled span.slider{background-color:var(--bg-switch-disabled-primary);cursor:initial}.gravity-switch .switch.disabled span.slider:before{background-color:var(--on-bg-switch-disabled-primary)}\n"] }]
         }], propDecorators: { currentLang: [{
                 type: Input
             }], customCheck: [{
@@ -1362,11 +1346,11 @@ class GravityNotificationInstantContainerComponent {
         this.delay = 5000;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, deps: [{ token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <!--TODO ebiazzetti change icons-->\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}: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{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$2.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityNotificationInstantContainerComponent, selector: "gravity-notification-instant-container", inputs: { delay: "delay" }, ngImport: i0, template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <!--TODO ebiazzetti change icons-->\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;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{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{align-items:center;display:flex}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1$2.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityNotificationInstantContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <!--TODO ebiazzetti change icons-->\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}: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{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}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"] }]
+            args: [{ selector: 'gravity-notification-instant-container', template: "<ngb-toast [autohide]=\"true\" [delay]=\"delay\"\n\n           (hidden)=\"gravityInstantNotificationsService.hideNotification(i)\"\n\n           *ngFor=\"let notification of gravityInstantNotificationsService.notifications; index as i\">\n  <main class=\"alert-content {{notification.state}}\">\n    <gravity-icon class=\"close\" (click)=\"gravityInstantNotificationsService.hideNotification(i)\"\n                  data-cy=\"gravity_notification_instant_close_icon\" [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n                  [title]=\"'Close'\"></gravity-icon>\n\n    <div class=\"title\">\n      <!--TODO ebiazzetti change icons-->\n      <gravity-icon class=\"title-icon\" [iconName]=\"'notification_' + notification.state\" [size]=\"'md'\"></gravity-icon>\n      <h1 class=\"hr-title lg-bold\">{{notification.title}}</h1>\n    </div>\n\n    <div class=\"content\">\n      <h2 class=\"hr-body-text md-regular\">{{notification.text}}</h2>\n    </div>\n  </main>\n</ngb-toast>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{padding:.75rem;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{cursor:pointer;height:1rem;position:absolute;right:.75rem;top:.625rem;width:1rem}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"] }]
         }], ctorParameters: function () { return [{ type: GravityInstantNotificationsService }]; }, propDecorators: { delay: [{
                 type: Input
             }] } });
@@ -1641,11 +1625,11 @@ class GravityTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}@media (min-width: 993px){.table-container{overflow-x:auto}}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}@media (min-width: 993px){.table-container{overflow-x:auto}}\n"] }]
+            args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n  <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { tableDensity: [{
                 type: Input
             }], tableSizeInput: [{
@@ -2047,6 +2031,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['offcanvasContent', { static: false }]
             }] } });
 
+class GravityTextFieldNumberOnlyComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.textFieldValueResponse = new EventEmitter();
+        // Component
+        this.currentLang = 'en';
+        this.customState = 'default';
+        this.size = 'md';
+        this.focusInput = false;
+        this.inputValue = '';
+    }
+    clearInput() {
+        this.changeInputValue(true);
+    }
+    changeInputValue(clearInput = false, textareaElement) {
+        if (clearInput) {
+            this.inputValue = '';
+        }
+        else {
+            this.inputValue = textareaElement.value;
+        }
+        if (this.inputValue == '') {
+            this.textFieldValueResponse.emit('');
+        }
+        else {
+            this.textFieldValueResponse.emit(this.inputValue);
+        }
+    }
+    getTextFieldStatus() {
+        if (this.customState == 'default') {
+            if (!this.focusInput && !this.inputValue) {
+                return 'active';
+            }
+            else if (!this.focusInput && this.inputValue) {
+                return 'typed';
+            }
+            else {
+                return 'typing';
+            }
+        }
+        else {
+            return this.customState;
+        }
+    }
+    onKeyDownEvent($event) {
+        let navigationKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'Home', 'End', 'ArrowLeft', 'ArrowRight', 'Clear', 'Copy', 'Paste'];
+        if (navigationKeys.indexOf($event.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
+            ($event.key === 'a' && $event.ctrlKey === true) || // Allow: Ctrl+A
+            ($event.key === 'c' && $event.ctrlKey === true) || // Allow: Ctrl+C
+            ($event.key === 'v' && $event.ctrlKey === true) || // Allow: Ctrl+V
+            ($event.key === 'x' && $event.ctrlKey === true) || // Allow: Ctrl+X
+            ($event.key === 'a' && $event.metaKey === true) || // Allow: Cmd+A (Mac)
+            ($event.key === 'c' && $event.metaKey === true) || // Allow: Cmd+C (Mac)
+            ($event.key === 'v' && $event.metaKey === true) || // Allow: Cmd+V (Mac)
+            ($event.key === 'x' && $event.metaKey === true) // Allow: Cmd+X (Mac)
+        ) {
+            // let it happen, don't do anything
+            return;
+        }
+        // Ensure that it is a number and stop the keypress
+        if (($event.shiftKey || ($event.keyCode < 48 || $event.keyCode > 57)) &&
+            ($event.keyCode < 96 || $event.keyCode > 105)) {
+            $event.preventDefault();
+        }
+    }
+    setFocus(textareaElement) {
+        let containers = [this.digitContainer0, this.digitContainer1, this.digitContainer2, this.digitContainer3, this.digitContainer4, this.digitContainer5];
+        for (let index = 0; index < containers.length; index++) {
+            if (index == textareaElement.selectionStart) {
+                this.renderer.addClass(containers[index].nativeElement, 'focused');
+            }
+            else {
+                this.renderer.removeClass(containers[index].nativeElement, 'focused');
+            }
+        }
+        if (textareaElement.selectionStart == 6) {
+            this.renderer.addClass(textareaElement, 'hide-caret');
+        }
+        else {
+            this.renderer.removeClass(textareaElement, 'hide-caret');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldNumberOnlyComponent, selector: "gravity-text-field-number-only", inputs: { currentLang: "currentLang", customState: "customState", cypressTag: "cypressTag", label: "label", required: "required", size: "size", supportText: "supportText" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "digitContainer0", first: true, predicate: ["digitContainer0"], descendants: true }, { propertyName: "digitContainer1", first: true, predicate: ["digitContainer1"], descendants: true }, { propertyName: "digitContainer2", first: true, predicate: ["digitContainer2"], descendants: true }, { propertyName: "digitContainer3", first: true, predicate: ["digitContainer3"], descendants: true }, { propertyName: "digitContainer4", first: true, predicate: ["digitContainer4"], descendants: true }, { propertyName: "digitContainer5", first: true, predicate: ["digitContainer5"], descendants: true }], ngImport: i0, template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n  <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n    {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n  </label>\n  <div class=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n    <textarea [attr.data-cy]=\"cypressTag\"\n              [attr.disabled]=\"customState == 'disabled' ? true : null\"\n              [attr.readonly]=\"customState == 'readonly' ? true : null\"\n              #textAreaElement\n\n              autocomplete=\"off\"\n              class=\"hr-label {{size}}-regular\"\n              cols=\"6\"\n              maxlength=\"6\"\n              minlength=\"6\"\n              inputmode=\"numeric\"\n              placeholder=\"______\"\n              rows=\"1\"\n              type=\"text\"\n\n              (blur)=\"focusInput = false\"\n              (change)=\"changeInputValue(false, textAreaElement)\"\n              (click)=\"setFocus(textAreaElement)\"\n              (focus)=\"focusInput = true\"\n              (keydown)=\"onKeyDownEvent($event)\"\n              (keyup)=\"setFocus(textAreaElement)\"></textarea>\n    <div class=\"digit-container\" #digitContainer0></div>\n    <div class=\"digit-container\" #digitContainer1></div>\n    <div class=\"digit-container\" #digitContainer2></div>\n    <div class=\"digit-container\" #digitContainer3></div>\n    <div class=\"digit-container\" #digitContainer4></div>\n    <div class=\"digit-container\" #digitContainer5></div>\n    <div class=\"overflow\"></div>\n  </div>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"supportText\">\n    <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                  [iconSize]=\"'sm-12'\"></gravity-icon>\n    {{supportText}}\n  </p>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n    {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n  </p>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 266px}.md .text-field-number-only-wrapper.active,.md .text-field-number-only-wrapper.typing textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 250px}.sm .text-field-number-only-wrapper.active,.sm .text-field-number-only-wrapper.typing textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-text-field-number-only', template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n  <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\" *ngIf=\"label\">\n    {{label}} <span *ngIf=\"required || getTextFieldStatus() == 'typed-error'\">*</span>\n  </label>\n  <div class=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n    <textarea [attr.data-cy]=\"cypressTag\"\n              [attr.disabled]=\"customState == 'disabled' ? true : null\"\n              [attr.readonly]=\"customState == 'readonly' ? true : null\"\n              #textAreaElement\n\n              autocomplete=\"off\"\n              class=\"hr-label {{size}}-regular\"\n              cols=\"6\"\n              maxlength=\"6\"\n              minlength=\"6\"\n              inputmode=\"numeric\"\n              placeholder=\"______\"\n              rows=\"1\"\n              type=\"text\"\n\n              (blur)=\"focusInput = false\"\n              (change)=\"changeInputValue(false, textAreaElement)\"\n              (click)=\"setFocus(textAreaElement)\"\n              (focus)=\"focusInput = true\"\n              (keydown)=\"onKeyDownEvent($event)\"\n              (keyup)=\"setFocus(textAreaElement)\"></textarea>\n    <div class=\"digit-container\" #digitContainer0></div>\n    <div class=\"digit-container\" #digitContainer1></div>\n    <div class=\"digit-container\" #digitContainer2></div>\n    <div class=\"digit-container\" #digitContainer3></div>\n    <div class=\"digit-container\" #digitContainer4></div>\n    <div class=\"digit-container\" #digitContainer5></div>\n    <div class=\"overflow\"></div>\n  </div>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"supportText\">\n    <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"getTextFieldStatus() == 'typed-error'\"\n                  [iconSize]=\"'sm-12'\"></gravity-icon>\n    {{supportText}}\n  </p>\n  <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n     *ngIf=\"!supportText && getTextFieldStatus() == 'active' && inputValue == '' && required\">\n    {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n  </p>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 266px}.md .text-field-number-only-wrapper.active,.md .text-field-number-only-wrapper.typing textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 250px}.sm .text-field-number-only-wrapper.active,.sm .text-field-number-only-wrapper.typing textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { textFieldValueResponse: [{
+                type: Output,
+                args: ['response']
+            }], digitContainer0: [{
+                type: ViewChild,
+                args: ['digitContainer0', { static: false }]
+            }], digitContainer1: [{
+                type: ViewChild,
+                args: ['digitContainer1', { static: false }]
+            }], digitContainer2: [{
+                type: ViewChild,
+                args: ['digitContainer2', { static: false }]
+            }], digitContainer3: [{
+                type: ViewChild,
+                args: ['digitContainer3', { static: false }]
+            }], digitContainer4: [{
+                type: ViewChild,
+                args: ['digitContainer4', { static: false }]
+            }], digitContainer5: [{
+                type: ViewChild,
+                args: ['digitContainer5', { static: false }]
+            }], currentLang: [{
+                type: Input
+            }], customState: [{
+                type: Input
+            }], cypressTag: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], supportText: [{
+                type: Input
+            }] } });
+
 class GravityDesignSystemModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, declarations: [GravityAttachFileComponent,
@@ -2064,6 +2173,7 @@ class GravityDesignSystemModule {
             GravitySwitchComponent,
             GravityTableComponent,
             GravityTextFieldComponent,
+            GravityTextFieldNumberOnlyComponent,
             GravityTreeViewComponent,
             NodeComponent,
             NodeToggleComponent,
@@ -2090,6 +2200,7 @@ class GravityDesignSystemModule {
             GravitySwitchComponent,
             GravityTableComponent,
             GravityTextFieldComponent,
+            GravityTextFieldNumberOnlyComponent,
             GravityTooltipModule,
             GravityTreeViewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
@@ -2127,6 +2238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravitySwitchComponent,
                         GravityTableComponent,
                         GravityTextFieldComponent,
+                        GravityTextFieldNumberOnlyComponent,
                         GravityTreeViewComponent,
                         NodeComponent,
                         NodeToggleComponent,
@@ -2165,6 +2277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         GravitySwitchComponent,
                         GravityTableComponent,
                         GravityTextFieldComponent,
+                        GravityTextFieldNumberOnlyComponent,
                         GravityTooltipModule,
                         GravityTreeViewComponent
                     ]
@@ -2221,5 +2334,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
+export { GravityAttachFileComponent, GravityButtonComponent, GravityCalendarComponent, GravityCheckboxComponent, GravityDesignSystemModule, GravityDialogComponent, GravityDialogManagerService, GravityDropdownListComponent, GravityIconComponent, GravityNotificationInstantContainerComponent, GravityOffcanvasComponent, GravityRadioButtonComponent, GravityStepperComponent, GravitySwitchComponent, GravityTableComponent, GravityTextFieldComponent, GravityTextFieldNumberOnlyComponent, GravityTooltipComponent, GravityTooltipDirective, GravityTooltipModule, GravityTreeViewComponent, ICONS, OLD_ICONS };
 //# sourceMappingURL=progressio_resources-gravity-design-system.mjs.map