@progressio_resources/gravity-design-system 4.0.8 → 4.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/progressio_resources-gravity-design-system.mjs +30 -34
  2. package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/progressio_resources-gravity-design-system.d.ts +18 -18
package/fesm2022/progressio_resources-gravity-design-system.mjs CHANGED
@@ -1182,29 +1182,25 @@ class GravityTextFieldComponent {
1182
1182
  this.leftIconResponse = new EventEmitter();
1183
1183
  this.rightIconResponse = new EventEmitter();
1184
1184
  this.textFieldValueResponse = new EventEmitter();
1185
- // Component
1186
- this.currentLang = 'en';
1187
- this.customState = 'default';
1188
1185
  this.prefix = "";
1186
+ this.currentLang = 'en';
1189
1187
  this.textFieldType = "input";
1190
- // Icons
1188
+ this.customState = 'default';
1189
+ this.supportTextIcon = '';
1191
1190
  this.clickOnLeftIcon = false;
1192
1191
  this.clickOnRightIcon = false;
1193
- // Input | Textarea
1194
- this.autocomplete = 'off';
1195
- this.inputContentType = "text";
1196
- // Sizes
1197
1192
  this.size = 'md';
1198
- this.width = 'short';
1193
+ this.autocomplete = 'off';
1199
1194
  this.characterCounter = false;
1195
+ this.width = 'short';
1200
1196
  this.passwordRequirements = [];
1201
- this.supportTextIcon = '';
1197
+ this.inputContentType = "text";
1198
+ this.inputValue = '';
1202
1199
  this.focusInput = false;
1203
1200
  this.hasUserTyped = false;
1204
- this.isPasswordField = false;
1205
1201
  this.characterLimit = false;
1202
+ this.isPasswordField = false;
1206
1203
  this.allPasswordRequirementsValid = false;
1207
- this.inputValue = '';
1208
1204
  }
1209
1205
  ngOnInit() {
1210
1206
  this.inputValue = this.customInputValue ? this.customInputValue : '';
@@ -1396,11 +1392,11 @@ class GravityTextFieldComponent {
1396
1392
  this.changeInputValue();
1397
1393
  }
1398
1394
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1399
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTextFieldComponent, isStandalone: true, 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", iconColor: "iconColor", iconLeft: "iconLeft", iconRight: "iconRight", autocomplete: "autocomplete", inputContentType: "inputContentType", placeholder: "placeholder", validations: "validations", size: "size", width: "width", labelExtraText: "labelExtraText", characterCounter: "characterCounter", passwordRequirements: "passwordRequirements", supportTextIcon: "supportTextIcon" }, 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: "@if (label) {\n <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\">\n {{ label }}\n @if (required || getTextFieldStatus() == 'typed-error') {\n <span>* </span>\n }\n @if (labelExtraText) {\n <span [class.extra-text]=\"labelExtraText\">{{ labelExtraText }}</span>\n }\n </label>\n}\n<div class=\"gravity-input-field {{textFieldType}} {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n @if (iconLeft) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n }\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{ prefix }}</span>\n @if (textFieldType == 'input') {\n <input [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"inputContentType === 'date' ? 10 : (validations?.maxLength || 100)\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType === 'date' ? 'text' : (inputContentType !== 'number' ? inputContentType : 'text')\"\n [value]=\"inputValue\"\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\" onKeyDownEvent($event)\"\n (keyup)=\"inputContentType === 'date' ?\n formatDateInput($event) : changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n #inputElement\n >\n }\n\n @if (textFieldType == 'textarea') {\n <textarea [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\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 (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n #textAreaElement\n ></textarea>\n }\n @if (iconRight) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n }\n</div>\n<div class=\"support-text-container {{size}} {{width}}-width\">\n @if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\">\n @if (getTextFieldStatus() == 'typed-error' || characterLimit) {\n <gravity-icon [class.negative]=\"getTextFieldStatus() == 'typed-error'\" [iconName]=\"'question-circle'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (!hasInvalidPasswordRequirements && isPasswordField) {\n <gravity-icon class=\"positive\" [iconName]=\"'check'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (supportTextIcon) {\n <gravity-icon [ngClass]=\"{negative: getTextFieldStatus() === 'typed-error',positive: getTextFieldStatus() === 'typed-positive'}\"\n [iconName]=\"supportTextIcon\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n {{ supportText }}\n </p>\n }\n @if (characterCounter) {\n <p class=\"hr-label sm-regular character-counter {{getTextFieldStatus()}}\"\n >{{ inputValue.length }}/200</p>\n }\n</div>\n\n\n@if (passwordRequirements.length> 0 && hasInvalidPasswordRequirements) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ currentLang == 'en' ? 'Password requirements:' : 'Requisitos de contrase\u00F1a:' }}</p>\n <ul class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement) {\n <li class=\"hr-label sm-regular\"\n [ngClass]=\"{valid: hasUserTyped && requirement.isValid, invalid: hasUserTyped && !focusInput && !requirement.isValid}\">\n {{ requirement.label }}\n </li>\n }\n </ul>\n </div>\n}\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\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\" [attr.data-cy]=\"'textField_icon'\"></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}.scrollbar-sm::-webkit-scrollbar,.gravity-input-field textarea::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.gravity-input-field textarea::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.gravity-input-field textarea::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.gravity-input-field textarea::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}: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)}label .extra-text{font-weight:343!important;color:var(--placeholder-empty-enabled-primary)!important}.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,.support-text-container.sm{--text-field-input-field-content: 9px}.gravity-input-field.sm.input,.support-text-container.sm.input{--text-field-input-field-height: 29px;--text-field-input-field-input: 13px}.gravity-input-field.sm.textarea,.support-text-container.sm.textarea{--text-field-input-field-height: 64px;--text-field-input-field-input: 44px}.gravity-input-field.sm.short-width,.support-text-container.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width,.support-text-container.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.support-text-container.sm.full-width,.gravity-input-field.sm.fit-width,.support-text-container.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md,.support-text-container.md{--text-field-input-field-content: 15px}.gravity-input-field.md.input,.support-text-container.md.input{--text-field-input-field-height: 35px;--text-field-input-field-input: 18px}.gravity-input-field.md.textarea,.support-text-container.md.textarea{--text-field-input-field-height: 80px;--text-field-input-field-input: 60px}.gravity-input-field.md.short-width,.support-text-container.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width,.support-text-container.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.support-text-container.md.full-width,.gravity-input-field.md.fit-width,.support-text-container.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)}.support-text-container{display:flex;justify-content:space-between;width:var(--text-field-input-field-width)}.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-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.supporting-text gravity-icon.negative{--icon-color: var(--negative-primary)}.supporting-text gravity-icon.positive{--icon-color: var(--positive-primary)}.password-requirements{display:flex;padding-left:12px;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}.password-requirements .requirements{padding-left:12px;margin:0!important}.password-requirements .requirements li.valid{color:var(--positive-primary)}.password-requirements .requirements li.invalid{color:var(--negative-primary)}.character-counter{margin-left:auto;margin-top:5px}.character-counter.disabled{color:var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1395
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTextFieldComponent, isStandalone: true, selector: "gravity-text-field", inputs: { label: "label", required: "required", cypressTag: "cypressTag", supportText: "supportText", prefix: "prefix", customInputValue: "customInputValue", currentLang: "currentLang", textFieldType: "textFieldType", customState: "customState", iconLeft: "iconLeft", iconColor: "iconColor", iconRight: "iconRight", supportTextIcon: "supportTextIcon", clickOnLeftIcon: "clickOnLeftIcon", clickOnRightIcon: "clickOnRightIcon", placeholder: "placeholder", labelExtraText: "labelExtraText", size: "size", autocomplete: "autocomplete", characterCounter: "characterCounter", width: "width", validations: "validations", passwordRequirements: "passwordRequirements", inputContentType: "inputContentType" }, 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: "@if (label) {\n <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\">\n {{ label }}\n @if (required || getTextFieldStatus() == 'typed-error') {\n <span>* </span>\n }\n @if (labelExtraText) {\n <span [class.extra-text]=\"labelExtraText\">{{ labelExtraText }}</span>\n }\n </label>\n}\n<div class=\"gravity-input-field {{textFieldType}} {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n @if (iconLeft) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n }\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{ prefix }}</span>\n @if (textFieldType == 'input') {\n <input [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"inputContentType === 'date' ? 10 : (validations?.maxLength || 100)\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType === 'date' ? 'text' : (inputContentType !== 'number' ? inputContentType : 'text')\"\n [value]=\"inputValue\"\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\" onKeyDownEvent($event)\"\n (keyup)=\"inputContentType === 'date' ?\n formatDateInput($event) : changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n #inputElement\n >\n }\n\n @if (textFieldType == 'textarea') {\n <textarea [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\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 (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n #textAreaElement\n ></textarea>\n }\n @if (iconRight) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n }\n</div>\n<div class=\"support-text-container {{size}} {{width}}-width\">\n @if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}} {{textFieldType}}\"\n [class.custom-label-size]=\"size == 'sm'\">\n @if (getTextFieldStatus() == 'typed-error' || characterLimit) {\n <gravity-icon [class.negative]=\"getTextFieldStatus() == 'typed-error'\" [iconName]=\"'question-circle'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (!hasInvalidPasswordRequirements && isPasswordField) {\n <gravity-icon class=\"positive\" [iconName]=\"'check'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (supportTextIcon) {\n <gravity-icon [ngClass]=\"{negative: getTextFieldStatus() === 'typed-error', positive: getTextFieldStatus() === 'typed-positive', disabled: getTextFieldStatus() === 'disabled'}\"\n [iconName]=\"supportTextIcon\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n {{ supportText }}\n </p>\n }\n @if (characterCounter) {\n <p class=\"hr-label sm-regular character-counter {{getTextFieldStatus()}}\"\n >{{ inputValue.length }}/200</p>\n }\n</div>\n\n\n@if (passwordRequirements.length> 0 && hasInvalidPasswordRequirements) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ currentLang == 'en' ? 'Password requirements:' : 'Requisitos de contrase\u00F1a:' }}</p>\n <ul class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement) {\n <li class=\"hr-label sm-regular\"\n [ngClass]=\"{valid: hasUserTyped && requirement.isValid, invalid: hasUserTyped && !focusInput && !requirement.isValid}\">\n {{ requirement.label }}\n </li>\n }\n </ul>\n </div>\n}\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\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\" [attr.data-cy]=\"'textField_icon'\"></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}.scrollbar-sm::-webkit-scrollbar,.gravity-input-field textarea::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.gravity-input-field textarea::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.gravity-input-field textarea::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.gravity-input-field textarea::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}: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)}label .extra-text{font-weight:343!important;color:var(--placeholder-empty-enabled-primary)!important}.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,.support-text-container.sm{--text-field-input-field-content: 9px}.gravity-input-field.sm.input,.support-text-container.sm.input{--text-field-input-field-height: 29px;--text-field-input-field-input: 13px}.gravity-input-field.sm.textarea,.support-text-container.sm.textarea{--text-field-input-field-height: 64px;--text-field-input-field-input: 44px}.gravity-input-field.sm.short-width,.support-text-container.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width,.support-text-container.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.support-text-container.sm.full-width,.gravity-input-field.sm.fit-width,.support-text-container.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md,.support-text-container.md{--text-field-input-field-content: 15px}.gravity-input-field.md.input,.support-text-container.md.input{--text-field-input-field-height: 35px;--text-field-input-field-input: 18px}.gravity-input-field.md.textarea,.support-text-container.md.textarea{--text-field-input-field-height: 80px;--text-field-input-field-input: 60px}.gravity-input-field.md.short-width,.support-text-container.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width,.support-text-container.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.support-text-container.md.full-width,.gravity-input-field.md.fit-width,.support-text-container.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)}.support-text-container{display:flex;justify-content:space-between;width:var(--text-field-input-field-width)}.supporting-text{width:14px;display:flex;align-items:center;color:var(--text-field-supporting-text-color);margin:var(--gravity-spacing-xxs) var(--gravity-spacing-xs) 0}.supporting-text.textarea{margin:var(--gravity-spacing-xxs) 0 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-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.supporting-text gravity-icon.negative{--icon-color: var(--negative-primary)}.supporting-text gravity-icon.positive{--icon-color: var(--positive-primary)}.supporting-text gravity-icon.disabled{--icon-color: var(--on-bg-disabled)}.password-requirements{display:flex;padding-left:12px;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}.password-requirements .requirements{padding-left:12px;margin:0!important}.password-requirements .requirements li.valid{color:var(--positive-primary)}.password-requirements .requirements li.invalid{color:var(--negative-primary)}.character-counter{margin-left:auto;margin-top:var(--gravity-spacing-xxs)}.character-counter.disabled{color:var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
1400
1396
  }
1401
1397
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
1402
1398
  type: Component,
1403
- args: [{ selector: 'gravity-text-field', standalone: true, imports: [NgTemplateOutlet, GravityIconComponent, NgClass], template: "@if (label) {\n <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\">\n {{ label }}\n @if (required || getTextFieldStatus() == 'typed-error') {\n <span>* </span>\n }\n @if (labelExtraText) {\n <span [class.extra-text]=\"labelExtraText\">{{ labelExtraText }}</span>\n }\n </label>\n}\n<div class=\"gravity-input-field {{textFieldType}} {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n @if (iconLeft) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n }\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{ prefix }}</span>\n @if (textFieldType == 'input') {\n <input [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"inputContentType === 'date' ? 10 : (validations?.maxLength || 100)\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType === 'date' ? 'text' : (inputContentType !== 'number' ? inputContentType : 'text')\"\n [value]=\"inputValue\"\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\" onKeyDownEvent($event)\"\n (keyup)=\"inputContentType === 'date' ?\n formatDateInput($event) : changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n #inputElement\n >\n }\n\n @if (textFieldType == 'textarea') {\n <textarea [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\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 (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n #textAreaElement\n ></textarea>\n }\n @if (iconRight) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n }\n</div>\n<div class=\"support-text-container {{size}} {{width}}-width\">\n @if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}}\"\n [class.custom-label-size]=\"size == 'sm'\">\n @if (getTextFieldStatus() == 'typed-error' || characterLimit) {\n <gravity-icon [class.negative]=\"getTextFieldStatus() == 'typed-error'\" [iconName]=\"'question-circle'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (!hasInvalidPasswordRequirements && isPasswordField) {\n <gravity-icon class=\"positive\" [iconName]=\"'check'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (supportTextIcon) {\n <gravity-icon [ngClass]=\"{negative: getTextFieldStatus() === 'typed-error',positive: getTextFieldStatus() === 'typed-positive'}\"\n [iconName]=\"supportTextIcon\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n {{ supportText }}\n </p>\n }\n @if (characterCounter) {\n <p class=\"hr-label sm-regular character-counter {{getTextFieldStatus()}}\"\n >{{ inputValue.length }}/200</p>\n }\n</div>\n\n\n@if (passwordRequirements.length> 0 && hasInvalidPasswordRequirements) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ currentLang == 'en' ? 'Password requirements:' : 'Requisitos de contrase\u00F1a:' }}</p>\n <ul class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement) {\n <li class=\"hr-label sm-regular\"\n [ngClass]=\"{valid: hasUserTyped && requirement.isValid, invalid: hasUserTyped && !focusInput && !requirement.isValid}\">\n {{ requirement.label }}\n </li>\n }\n </ul>\n </div>\n}\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\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\" [attr.data-cy]=\"'textField_icon'\"></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}.scrollbar-sm::-webkit-scrollbar,.gravity-input-field textarea::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.gravity-input-field textarea::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.gravity-input-field textarea::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.gravity-input-field textarea::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}: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)}label .extra-text{font-weight:343!important;color:var(--placeholder-empty-enabled-primary)!important}.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,.support-text-container.sm{--text-field-input-field-content: 9px}.gravity-input-field.sm.input,.support-text-container.sm.input{--text-field-input-field-height: 29px;--text-field-input-field-input: 13px}.gravity-input-field.sm.textarea,.support-text-container.sm.textarea{--text-field-input-field-height: 64px;--text-field-input-field-input: 44px}.gravity-input-field.sm.short-width,.support-text-container.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width,.support-text-container.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.support-text-container.sm.full-width,.gravity-input-field.sm.fit-width,.support-text-container.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md,.support-text-container.md{--text-field-input-field-content: 15px}.gravity-input-field.md.input,.support-text-container.md.input{--text-field-input-field-height: 35px;--text-field-input-field-input: 18px}.gravity-input-field.md.textarea,.support-text-container.md.textarea{--text-field-input-field-height: 80px;--text-field-input-field-input: 60px}.gravity-input-field.md.short-width,.support-text-container.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width,.support-text-container.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.support-text-container.md.full-width,.gravity-input-field.md.fit-width,.support-text-container.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)}.support-text-container{display:flex;justify-content:space-between;width:var(--text-field-input-field-width)}.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-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.supporting-text gravity-icon.negative{--icon-color: var(--negative-primary)}.supporting-text gravity-icon.positive{--icon-color: var(--positive-primary)}.password-requirements{display:flex;padding-left:12px;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}.password-requirements .requirements{padding-left:12px;margin:0!important}.password-requirements .requirements li.valid{color:var(--positive-primary)}.password-requirements .requirements li.invalid{color:var(--negative-primary)}.character-counter{margin-left:auto;margin-top:5px}.character-counter.disabled{color:var(--on-bg-disabled)}\n"] }]
1399
+ args: [{ selector: 'gravity-text-field', standalone: true, imports: [NgTemplateOutlet, GravityIconComponent, NgClass], template: "@if (label) {\n <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\">\n {{ label }}\n @if (required || getTextFieldStatus() == 'typed-error') {\n <span>* </span>\n }\n @if (labelExtraText) {\n <span [class.extra-text]=\"labelExtraText\">{{ labelExtraText }}</span>\n }\n </label>\n}\n<div class=\"gravity-input-field {{textFieldType}} {{size}} {{width}}-width {{getTextFieldStatus()}}\">\n @if (iconLeft) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'left'}\"></ng-container>\n }\n <span class=\"{{getTextFieldInputFontSize()}} prefix\">{{ prefix }}</span>\n @if (textFieldType == 'input') {\n <input [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"inputContentType === 'date' ? 10 : (validations?.maxLength || 100)\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType === 'date' ? 'text' : (inputContentType !== 'number' ? inputContentType : 'text')\"\n [value]=\"inputValue\"\n (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\" onKeyDownEvent($event)\"\n (keyup)=\"inputContentType === 'date' ?\n formatDateInput($event) : changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n #inputElement\n >\n }\n\n @if (textFieldType == 'textarea') {\n <textarea [attr.data-cy]=\"cypressTag ? 'textField_' + cypressTag : null\"\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 (blur)=\"focusInput = false\"\n (change)=\"changeInputValue()\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"changeInputValue()\"\n class=\"{{getTextFieldInputFontSize()}}\"\n rows=\"1\"\n #textAreaElement\n ></textarea>\n }\n @if (iconRight) {\n <ng-container [ngTemplateOutlet]=\"icons\" [ngTemplateOutletContext]=\"{iconPosition: 'right'}\"></ng-container>\n }\n</div>\n<div class=\"support-text-container {{size}} {{width}}-width\">\n @if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}} {{size}} {{textFieldType}}\"\n [class.custom-label-size]=\"size == 'sm'\">\n @if (getTextFieldStatus() == 'typed-error' || characterLimit) {\n <gravity-icon [class.negative]=\"getTextFieldStatus() == 'typed-error'\" [iconName]=\"'question-circle'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (!hasInvalidPasswordRequirements && isPasswordField) {\n <gravity-icon class=\"positive\" [iconName]=\"'check'\"\n [iconSize]=\"'md-16'\"></gravity-icon>\n }\n @if (supportTextIcon) {\n <gravity-icon [ngClass]=\"{negative: getTextFieldStatus() === 'typed-error', positive: getTextFieldStatus() === 'typed-positive', disabled: getTextFieldStatus() === 'disabled'}\"\n [iconName]=\"supportTextIcon\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n {{ supportText }}\n </p>\n }\n @if (characterCounter) {\n <p class=\"hr-label sm-regular character-counter {{getTextFieldStatus()}}\"\n >{{ inputValue.length }}/200</p>\n }\n</div>\n\n\n@if (passwordRequirements.length> 0 && hasInvalidPasswordRequirements) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ currentLang == 'en' ? 'Password requirements:' : 'Requisitos de contrase\u00F1a:' }}</p>\n <ul class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement) {\n <li class=\"hr-label sm-regular\"\n [ngClass]=\"{valid: hasUserTyped && requirement.isValid, invalid: hasUserTyped && !focusInput && !requirement.isValid}\">\n {{ requirement.label }}\n </li>\n }\n </ul>\n </div>\n}\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\" [style.--icon-color]=\"iconColor\"\n [iconSize]=\"isNewIcon(iconPosition) ? 'md-16' : null\" [attr.data-cy]=\"'textField_icon'\"></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}.scrollbar-sm::-webkit-scrollbar,.gravity-input-field textarea::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.gravity-input-field textarea::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.gravity-input-field textarea::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.gravity-input-field textarea::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}: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)}label .extra-text{font-weight:343!important;color:var(--placeholder-empty-enabled-primary)!important}.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,.support-text-container.sm{--text-field-input-field-content: 9px}.gravity-input-field.sm.input,.support-text-container.sm.input{--text-field-input-field-height: 29px;--text-field-input-field-input: 13px}.gravity-input-field.sm.textarea,.support-text-container.sm.textarea{--text-field-input-field-height: 64px;--text-field-input-field-input: 44px}.gravity-input-field.sm.short-width,.support-text-container.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width,.support-text-container.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.support-text-container.sm.full-width,.gravity-input-field.sm.fit-width,.support-text-container.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md,.support-text-container.md{--text-field-input-field-content: 15px}.gravity-input-field.md.input,.support-text-container.md.input{--text-field-input-field-height: 35px;--text-field-input-field-input: 18px}.gravity-input-field.md.textarea,.support-text-container.md.textarea{--text-field-input-field-height: 80px;--text-field-input-field-input: 60px}.gravity-input-field.md.short-width,.support-text-container.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width,.support-text-container.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.support-text-container.md.full-width,.gravity-input-field.md.fit-width,.support-text-container.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)}.support-text-container{display:flex;justify-content:space-between;width:var(--text-field-input-field-width)}.supporting-text{width:14px;display:flex;align-items:center;color:var(--text-field-supporting-text-color);margin:var(--gravity-spacing-xxs) var(--gravity-spacing-xs) 0}.supporting-text.textarea{margin:var(--gravity-spacing-xxs) 0 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-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.supporting-text gravity-icon.negative{--icon-color: var(--negative-primary)}.supporting-text gravity-icon.positive{--icon-color: var(--positive-primary)}.supporting-text gravity-icon.disabled{--icon-color: var(--on-bg-disabled)}.password-requirements{display:flex;padding-left:12px;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}.password-requirements .requirements{padding-left:12px;margin:0!important}.password-requirements .requirements li.valid{color:var(--positive-primary)}.password-requirements .requirements li.invalid{color:var(--negative-primary)}.character-counter{margin-left:auto;margin-top:var(--gravity-spacing-xxs)}.character-counter.disabled{color:var(--on-bg-disabled)}\n"] }]
1404
1400
  }], propDecorators: { leftIconResponse: [{
1405
1401
  type: Output,
1406
1402
  args: ['clickIconLeft']
@@ -1416,53 +1412,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
1416
1412
  }], textAreaElement: [{
1417
1413
  type: ViewChild,
1418
1414
  args: ['textAreaElement', { static: false }]
1419
- }], currentLang: [{
1420
- type: Input
1421
- }], customInputValue: [{
1415
+ }], label: [{
1422
1416
  type: Input
1423
- }], customState: [{
1417
+ }], required: [{
1424
1418
  type: Input
1425
1419
  }], cypressTag: [{
1426
1420
  type: Input
1427
- }], label: [{
1421
+ }], supportText: [{
1428
1422
  type: Input
1429
1423
  }], prefix: [{
1430
1424
  type: Input
1431
- }], required: [{
1425
+ }], customInputValue: [{
1432
1426
  type: Input
1433
- }], supportText: [{
1427
+ }], currentLang: [{
1434
1428
  type: Input
1435
1429
  }], textFieldType: [{
1436
1430
  type: Input
1437
- }], clickOnLeftIcon: [{
1431
+ }], customState: [{
1438
1432
  type: Input
1439
- }], clickOnRightIcon: [{
1433
+ }], iconLeft: [{
1440
1434
  type: Input
1441
1435
  }], iconColor: [{
1442
1436
  type: Input
1443
- }], iconLeft: [{
1444
- type: Input
1445
1437
  }], iconRight: [{
1446
1438
  type: Input
1447
- }], autocomplete: [{
1439
+ }], supportTextIcon: [{
1448
1440
  type: Input
1449
- }], inputContentType: [{
1441
+ }], clickOnLeftIcon: [{
1442
+ type: Input
1443
+ }], clickOnRightIcon: [{
1450
1444
  type: Input
1451
1445
  }], placeholder: [{
1452
1446
  type: Input
1453
- }], validations: [{
1447
+ }], labelExtraText: [{
1454
1448
  type: Input
1455
1449
  }], size: [{
1456
1450
  type: Input
1457
- }], width: [{
1458
- type: Input
1459
- }], labelExtraText: [{
1451
+ }], autocomplete: [{
1460
1452
  type: Input
1461
1453
  }], characterCounter: [{
1462
1454
  type: Input
1455
+ }], width: [{
1456
+ type: Input
1457
+ }], validations: [{
1458
+ type: Input
1463
1459
  }], passwordRequirements: [{
1464
1460
  type: Input
1465
- }], supportTextIcon: [{
1461
+ }], inputContentType: [{
1466
1462
  type: Input
1467
1463
  }] } });
1468
1464
 
@@ -5682,7 +5678,7 @@ class GravityTreeViewComponent {
5682
5678
  this.treeService.filterChanged(newValue.toLowerCase());
5683
5679
  }
5684
5680
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTreeViewComponent, deps: [{ token: TreeService }], target: i0.ɵɵFactoryTarget.Component }); }
5685
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTreeViewComponent, isStandalone: true, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems", showFilterInput: "showFilterInput" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "@if (showFilterInput) {\n <gravity-text-field [label]=\"'Change filter'\"\n (response)=\"changeFilter($event)\"></gravity-text-field>\n}\n@for (state of treeService.treeState; track state) {\n <tree-node [nodeState]=\"state\"></tree-node>\n}\n", styles: [""], dependencies: [{ kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["currentLang", "customInputValue", "customState", "cypressTag", "label", "prefix", "required", "supportText", "textFieldType", "clickOnLeftIcon", "clickOnRightIcon", "iconColor", "iconLeft", "iconRight", "autocomplete", "inputContentType", "placeholder", "validations", "size", "width", "labelExtraText", "characterCounter", "passwordRequirements", "supportTextIcon"], outputs: ["clickIconLeft", "clickIconRight", "response"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }] }); }
5681
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTreeViewComponent, isStandalone: true, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems", showFilterInput: "showFilterInput" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "@if (showFilterInput) {\n <gravity-text-field [label]=\"'Change filter'\"\n (response)=\"changeFilter($event)\"></gravity-text-field>\n}\n@for (state of treeService.treeState; track state) {\n <tree-node [nodeState]=\"state\"></tree-node>\n}\n", styles: [""], dependencies: [{ kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["label", "required", "cypressTag", "supportText", "prefix", "customInputValue", "currentLang", "textFieldType", "customState", "iconLeft", "iconColor", "iconRight", "supportTextIcon", "clickOnLeftIcon", "clickOnRightIcon", "placeholder", "labelExtraText", "size", "autocomplete", "characterCounter", "width", "validations", "passwordRequirements", "inputContentType"], outputs: ["clickIconLeft", "clickIconRight", "response"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }] }); }
5686
5682
  }
5687
5683
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTreeViewComponent, decorators: [{
5688
5684
  type: Component,
@@ -7232,7 +7228,7 @@ class DayCalendarComponent {
7232
7228
  return grid;
7233
7229
  }
7234
7230
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DayCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7235
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DayCalendarComponent, isStandalone: true, selector: "day-calendar", inputs: { initYear: "initYear", initMonth: "initMonth", range: "range", config: "config", restart: "restart", appyOnClose: "appyOnClose", currentDate: "currentDate", appearance: "appearance", navType: "navType" }, outputs: { clearHover: "clearHover", clearSelection: "clearSelection", hoverDay: "hoverDay", selectedRage: "selectedRage", calendarResponse: "calendarResponse" }, viewQueries: [{ propertyName: "endDateField", first: true, predicate: ["endDate"], descendants: true }, { propertyName: "startDateField", first: true, predicate: ["startDate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showMonthCalendar) {\n <section>\n <month-calendar\n [config]=\"config\"\n [integratedMode]=\"true\"\n [restart]=\"showMonthCalendar\"\n (response)=\"handleCalendarResponse($event, true)\" [initDate]=\"initMonth\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile }\">\n </month-calendar>\n </section>\n}\n\n@if (showYearCalendar) {\n <section>\n <year-calendar\n [config]=\"config\"\n [integratedMode]=\"true\"\n [restart]=\"showYearCalendar\"\n (response)=\"handleCalendarResponse($event, false)\" [initDate]=\"initYear\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile}\">\n </year-calendar>\n </section>\n}\n\n@if (!appearance.isMobile && !showMonthCalendar && !showYearCalendar) {\n <div class=\"title\">\n <span class=\"hr-label sm-bold\">{{range ? i18n.select_range : i18n.select_date}}</span>\n </div>\n}\n\n<div class=\"gravity-date-picker-content\" [class.hidden]=\"showYearCalendar || showMonthCalendar\" [class.mobile]=\"appearance.isMobile\">\n\n @if (range) {\n <div class=\"selected-dates\">\n <gravity-text-field #startDate\n [size]=\"'sm'\"\n [width]=\"'short'\"\n [label]=\"i18n.start_date\"\n [inputContentType]=\"'date'\"\n [supportText]=\"startDateError\"\n [placeholder]=\"i18n.date_placeholder\"\n [clickOnRightIcon]=\"!startFieldDisabled\"\n (keyup)=\"onDateKeyup(this, $event, 'start')\"\n (clickIconRight)=\"clearSelectedDate('start')\"\n (focusout)=\"searchDate(this, startDate.inputValue, 'start')\"\n [iconRight]=\"(selectedRangeStart || startDate.inputValue.length > 9) ? 'unsuccess' : ''\"\n (click)=\"focused = 'start'; selectedRangeStart ? currentDate = calendarDateToDate(selectedRangeStart) : null\"\n [customState]=\"startFieldDisabled ? 'disabled' : startDateError ? 'typed-error' : (startDate.inputValue.length < 1 ? 'default' : 'typing')\"\n [attr.data-cy]=\"'datePicker_startDate'\"/>\n <gravity-text-field #endDate\n [size]=\"'sm'\"\n [width]=\"'short'\"\n [label]=\"i18n.end_date\"\n [inputContentType]=\"'date'\"\n [supportText]=\"endDateError\"\n [placeholder]=\"i18n.date_placeholder\"\n [clickOnRightIcon]=\"!endFieldDisabled\"\n (keyup)=\"onDateKeyup(this, $event, 'end')\"\n (clickIconRight)=\"clearSelectedDate('end')\"\n (focusout)=\"searchDate(this, endDate.inputValue, 'end')\"\n [iconRight]=\"(selectedRangeEnd || endDate.inputValue.length > 9) ? 'unsuccess' : ''\"\n (click)=\" focused = 'end'; selectedRangeEnd ? currentDate = calendarDateToDate(selectedRangeEnd) : null\"\n [customState]=\"endFieldDisabled ? 'disabled' : endDateError ? 'typed-error' : (endDate.inputValue.length < 1 ? 'default' : 'typing')\" [attr.data-cy]=\"'datePicker_endDate'\"/>\n </div>\n }\n\n <section class=\"gravity-date-picker-header\" [class.mobile]=\"appearance.isMobile\">\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-left'\" [supportText]=\"i18n.preview_month\"\n (clickOnIcon)=\"currentDate = changeDate(-1, currentDate, true);\"\n [state]=\"(navType === 'prev' || navType === 'both') && (appearance.state !== 'disabled') &&\n isPeriodAvailable(currentDate, config.minDate, 'month', 'prev') ? 'active' : 'disabled'\"/>\n\n <div class=\"month-year-label\">\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"monthsList[currentDate.getMonth()]\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(true)\" [attr.data-cy]=\"'datePicker_monthDropdown'\"/>\n\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"currentDate.getFullYear().toString()\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(false)\" [attr.data-cy]=\"'datePicker_yearDropdown'\"/>\n </div>\n\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-right'\" [supportText]=\"i18n.next_month\"\n (clickOnIcon)=\"currentDate = changeDate(1, currentDate, true);\"\n [state]=\"(navType === 'next' || navType === 'both') && (appearance.state !== 'disabled') &&\n isPeriodAvailable(currentDate, config.maxDate, 'month', 'next') ? 'active' : 'disabled'\"/>\n </section>\n\n <section class=\"gravity-date-picker-body\" [class.mobile]=\"appearance.isMobile\">\n <section class=\"days-name-line\">\n <div class=\"days-name\">\n @for (day of daysList; track day) {\n <span class=\"hr-body\" [ngClass]=\"appearance.isMobile ? 'md-regular' : 'sm-regular'\"> {{ day }} </span>\n }\n </div>\n\n <div class=\"separator-line\"></div>\n </section>\n\n <section class=\"days-number-selector\" [attr.data-cy]=\"'datePicker_daysSelector'\">\n <div class=\"days-number-table\">\n @for (week of getMonthGrid(); track trackByWeek($index, week)) {\n <div class=\"week-row\">\n @for (day of week; track trackByDay($index, day)) {\n <span class=\"hr-body\"\n [class.preview]=\"range ? isPreview(this, day) : null\"\n [class.disabled]=\"!day.inCurrentMonth\" [class.today]=\"day.isToday\"\n (mouseenter)=\"range ? onHoverDay(this, day) : null; hoverDay.emit(day)\"\n (mouseleave)=\"range ? onClearHover(this) : null; this.clearHover.emit()\"\n [ngClass]=\"[appearance.isMobile ? 'md-regular' : 'sm-regular',\n appearance.state === 'disabled' ? 'disabled' : getDaySelectionClass(day)]\"\n (click)=\"day.inCurrentMonth ? onSelectDay(day): null\"> {{ day.day }} </span>\n }\n </div>\n }\n </div>\n\n @if (notification) {\n <div class=\"notification\" [class.error]=\"notification.error\">\n <gravity-icon [style.--icon-color]=\"'var(--notification-icon-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'information-circle'\"/>\n <span class=\"hr-label sm-regular\">{{notification.text}}</span>\n </div>\n }\n\n @if (range || selectedDay) {\n <div class=\"action-section\" >\n <gravity-link [linkText]=\"i18n.clear\" [state]=\"hasDateSelected() ? 'active' : 'disabled'\"\n [fontClass]=\"appearance.isMobile ? 'hr-body md-regular' : 'hr-body sm-regular'\"\n (click)=\" hasDateSelected() ? clearSelectedDate('all') : null\"/>\n @if (range) {\n <gravity-button [size]=\"appearance.isMobile ? 'md' : 'sm'\" [type]=\"'tertiary'\" [disabled]=\"!hasDateSelected(true)\"\n (click)=\"hasDateSelected(true) ? applySelectedDate() : null\"> {{i18n.apply}} </gravity-button>\n }\n </div>\n }\n </section>\n </section>\n </div>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}.next-button,.previous-button{cursor:pointer;padding:var(--gravity-spacing-xs);border-radius:var(--gravity-spacing-xs)}.next-button:not(.disabled):hover,.previous-button:not(.disabled):hover{background:var(--bg-button-active-tertiary)}.next-button.disabled,.previous-button.disabled{cursor:default;pointer-events:none;--icon-color: var(--on-bg-disabled)}.separator-line{border-bottom:2px solid var(--divider-menu-active-primary)}.action-section{height:25px;display:flex;align-self:stretch;align-items:center;justify-content:space-between}.title{width:100%;text-align:center;margin-bottom:var(--gravity-spacing-sm);color:var(--label-text-empty-enabled-primary)}.title span{height:11px;display:block;line-height:11px}.gravity-date-picker-content{display:flex;align-items:center;justify-items:center;flex-direction:column;gap:var(--gravity-spacing-md)}.gravity-date-picker-content .selected-dates{width:50%;display:flex;justify-content:center;gap:var(--gravity-spacing-xs)}.gravity-date-picker-content .selected-dates ::ng-deep gravity-text-field{width:130px}.gravity-date-picker-content .selected-dates ::ng-deep gravity-text-field .gravity-input-field{width:130px}.gravity-date-picker-content .gravity-date-picker-header{gap:0;width:268px;height:auto;display:flex;padding-top:0;align-items:center;justify-content:space-between}.gravity-date-picker-content .gravity-date-picker-header .month-year-label{display:flex;gap:var(--gravity-spacing-sm)}.gravity-date-picker-content .gravity-date-picker-header.mobile,.gravity-date-picker-content .gravity-date-picker-body{width:100%}.gravity-date-picker-content .gravity-date-picker-body .days-name-line{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs);padding-bottom:var(--gravity-spacing-xs)}.gravity-date-picker-content .gravity-date-picker-body .days-name-line .days-name{display:flex;align-self:stretch;justify-content:space-between}.gravity-date-picker-content .gravity-date-picker-body .days-name-line .days-name span{display:flex;cursor:default;align-items:center;justify-content:center;padding:var(--gravity-spacing-xs);color:var(--text-highlight-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-name-line .separator-line{width:100%}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector{display:flex;align-self:stretch;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table{display:flex;flex-direction:column}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row{height:25px;display:flex;align-self:stretch}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span{gap:10px;flex:1 0 0;width:31px;height:25px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--gravity-spacing-xs);color:var(--on-bg-button-pressed-tertiary);border:2px solid var(--bg-calender-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span:not(.sl).today{border-color:var(--bg-number-calendar-hover-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span:not(.disabled):not(.sl):hover{color:var(--on-bg-button-pressed-tertiary);background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.single,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.start,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.end{color:var(--on-bg-button-pressed-primary);background:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.range,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span:not(.disabled).preview{border-radius:0;background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.start,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.nsl-start:hover{border-radius:var(--gravity-spacing-xs) 0 0 var(--gravity-spacing-xs)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.end,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-radius:0 var(--gravity-spacing-xs) var(--gravity-spacing-xs) 0}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.in-slt:hover{border-color:var(--bg-button-pressed-primary)!important}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.default{border-radius:0!important;border-color:transparent!important}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.same-sln{border-radius:var(--gravity-spacing-xs)!important}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-disabled)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .notification{display:flex;align-items:center;align-self:stretch;gap:var(--gravity-spacing-xxs);border-radius:.3125rem;padding:var(--gravity-spacing-xs);color:var(--on-bg-button-active-tertiary);background:var(--bg-button-active-tertiary);--notification-icon-color: var(--on-bg-button-active-tertiary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .notification.error{color:var(--on-bg-button-active-negative);background:var(--bg-button-active-negative);--notification-icon-color: var(--on-bg-button-active-negative)}.gravity-date-picker-content.mobile{width:100%;height:auto}.gravity-date-picker-content.mobile .selected-dates ::ng-deep gravity-text-field{width:100%}.gravity-date-picker-content.mobile .selected-dates ::ng-deep gravity-text-field .gravity-input-field{min-width:100%}.gravity-date-picker-content.mobile .days-name-line .separator-line{width:100%}.gravity-date-picker-content.mobile .days-number-selector .days-number-table .week-row,.gravity-date-picker-content.mobile .days-number-selector .days-number-table span{height:43px!important}.gravity-date-picker-content.hidden{display:none}\n"], dependencies: [{ kind: "component", type: MonthCalendarComponent, selector: "month-calendar", inputs: ["config", "initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }, { kind: "component", type: YearCalendarComponent, selector: "year-calendar", inputs: ["config", "initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["currentLang", "customInputValue", "customState", "cypressTag", "label", "prefix", "required", "supportText", "textFieldType", "clickOnLeftIcon", "clickOnRightIcon", "iconColor", "iconLeft", "iconRight", "autocomplete", "inputContentType", "placeholder", "validations", "size", "width", "labelExtraText", "characterCounter", "passwordRequirements", "supportTextIcon"], outputs: ["clickIconLeft", "clickIconRight", "response"] }, { kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }] }); }
7231
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DayCalendarComponent, isStandalone: true, selector: "day-calendar", inputs: { initYear: "initYear", initMonth: "initMonth", range: "range", config: "config", restart: "restart", appyOnClose: "appyOnClose", currentDate: "currentDate", appearance: "appearance", navType: "navType" }, outputs: { clearHover: "clearHover", clearSelection: "clearSelection", hoverDay: "hoverDay", selectedRage: "selectedRage", calendarResponse: "calendarResponse" }, viewQueries: [{ propertyName: "endDateField", first: true, predicate: ["endDate"], descendants: true }, { propertyName: "startDateField", first: true, predicate: ["startDate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showMonthCalendar) {\n <section>\n <month-calendar\n [config]=\"config\"\n [integratedMode]=\"true\"\n [restart]=\"showMonthCalendar\"\n (response)=\"handleCalendarResponse($event, true)\" [initDate]=\"initMonth\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile }\">\n </month-calendar>\n </section>\n}\n\n@if (showYearCalendar) {\n <section>\n <year-calendar\n [config]=\"config\"\n [integratedMode]=\"true\"\n [restart]=\"showYearCalendar\"\n (response)=\"handleCalendarResponse($event, false)\" [initDate]=\"initYear\"\n [appearance]=\"{language: appearance.language, isMobile: appearance.isMobile}\">\n </year-calendar>\n </section>\n}\n\n@if (!appearance.isMobile && !showMonthCalendar && !showYearCalendar) {\n <div class=\"title\">\n <span class=\"hr-label sm-bold\">{{range ? i18n.select_range : i18n.select_date}}</span>\n </div>\n}\n\n<div class=\"gravity-date-picker-content\" [class.hidden]=\"showYearCalendar || showMonthCalendar\" [class.mobile]=\"appearance.isMobile\">\n\n @if (range) {\n <div class=\"selected-dates\">\n <gravity-text-field #startDate\n [size]=\"'sm'\"\n [width]=\"'short'\"\n [label]=\"i18n.start_date\"\n [inputContentType]=\"'date'\"\n [supportText]=\"startDateError\"\n [placeholder]=\"i18n.date_placeholder\"\n [clickOnRightIcon]=\"!startFieldDisabled\"\n (keyup)=\"onDateKeyup(this, $event, 'start')\"\n (clickIconRight)=\"clearSelectedDate('start')\"\n (focusout)=\"searchDate(this, startDate.inputValue, 'start')\"\n [iconRight]=\"(selectedRangeStart || startDate.inputValue.length > 9) ? 'unsuccess' : ''\"\n (click)=\"focused = 'start'; selectedRangeStart ? currentDate = calendarDateToDate(selectedRangeStart) : null\"\n [customState]=\"startFieldDisabled ? 'disabled' : startDateError ? 'typed-error' : (startDate.inputValue.length < 1 ? 'default' : 'typing')\"\n [attr.data-cy]=\"'datePicker_startDate'\"/>\n <gravity-text-field #endDate\n [size]=\"'sm'\"\n [width]=\"'short'\"\n [label]=\"i18n.end_date\"\n [inputContentType]=\"'date'\"\n [supportText]=\"endDateError\"\n [placeholder]=\"i18n.date_placeholder\"\n [clickOnRightIcon]=\"!endFieldDisabled\"\n (keyup)=\"onDateKeyup(this, $event, 'end')\"\n (clickIconRight)=\"clearSelectedDate('end')\"\n (focusout)=\"searchDate(this, endDate.inputValue, 'end')\"\n [iconRight]=\"(selectedRangeEnd || endDate.inputValue.length > 9) ? 'unsuccess' : ''\"\n (click)=\" focused = 'end'; selectedRangeEnd ? currentDate = calendarDateToDate(selectedRangeEnd) : null\"\n [customState]=\"endFieldDisabled ? 'disabled' : endDateError ? 'typed-error' : (endDate.inputValue.length < 1 ? 'default' : 'typing')\" [attr.data-cy]=\"'datePicker_endDate'\"/>\n </div>\n }\n\n <section class=\"gravity-date-picker-header\" [class.mobile]=\"appearance.isMobile\">\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-left'\" [supportText]=\"i18n.preview_month\"\n (clickOnIcon)=\"currentDate = changeDate(-1, currentDate, true);\"\n [state]=\"(navType === 'prev' || navType === 'both') && (appearance.state !== 'disabled') &&\n isPeriodAvailable(currentDate, config.minDate, 'month', 'prev') ? 'active' : 'disabled'\"/>\n\n <div class=\"month-year-label\">\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"monthsList[currentDate.getMonth()]\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(true)\" [attr.data-cy]=\"'datePicker_monthDropdown'\"/>\n\n <gravity-dropdown-label [fontClass]=\"'hr-title sm-bold'\" [size]=\"'sm'\" [label]=\"currentDate.getFullYear().toString()\"\n [state]=\"appearance.state === 'disabled' ? 'inactive' : 'active'\" (onClickLabel)=\"handleOnClickDropdownLabel(false)\" [attr.data-cy]=\"'datePicker_yearDropdown'\"/>\n </div>\n\n <gravity-icon-button [type]=\"'primary'\" [size]=\"'sm'\" [icon]=\"'arrow-right'\" [supportText]=\"i18n.next_month\"\n (clickOnIcon)=\"currentDate = changeDate(1, currentDate, true);\"\n [state]=\"(navType === 'next' || navType === 'both') && (appearance.state !== 'disabled') &&\n isPeriodAvailable(currentDate, config.maxDate, 'month', 'next') ? 'active' : 'disabled'\"/>\n </section>\n\n <section class=\"gravity-date-picker-body\" [class.mobile]=\"appearance.isMobile\">\n <section class=\"days-name-line\">\n <div class=\"days-name\">\n @for (day of daysList; track day) {\n <span class=\"hr-body\" [ngClass]=\"appearance.isMobile ? 'md-regular' : 'sm-regular'\"> {{ day }} </span>\n }\n </div>\n\n <div class=\"separator-line\"></div>\n </section>\n\n <section class=\"days-number-selector\" [attr.data-cy]=\"'datePicker_daysSelector'\">\n <div class=\"days-number-table\">\n @for (week of getMonthGrid(); track trackByWeek($index, week)) {\n <div class=\"week-row\">\n @for (day of week; track trackByDay($index, day)) {\n <span class=\"hr-body\"\n [class.preview]=\"range ? isPreview(this, day) : null\"\n [class.disabled]=\"!day.inCurrentMonth\" [class.today]=\"day.isToday\"\n (mouseenter)=\"range ? onHoverDay(this, day) : null; hoverDay.emit(day)\"\n (mouseleave)=\"range ? onClearHover(this) : null; this.clearHover.emit()\"\n [ngClass]=\"[appearance.isMobile ? 'md-regular' : 'sm-regular',\n appearance.state === 'disabled' ? 'disabled' : getDaySelectionClass(day)]\"\n (click)=\"day.inCurrentMonth ? onSelectDay(day): null\"> {{ day.day }} </span>\n }\n </div>\n }\n </div>\n\n @if (notification) {\n <div class=\"notification\" [class.error]=\"notification.error\">\n <gravity-icon [style.--icon-color]=\"'var(--notification-icon-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'information-circle'\"/>\n <span class=\"hr-label sm-regular\">{{notification.text}}</span>\n </div>\n }\n\n @if (range || selectedDay) {\n <div class=\"action-section\" >\n <gravity-link [linkText]=\"i18n.clear\" [state]=\"hasDateSelected() ? 'active' : 'disabled'\"\n [fontClass]=\"appearance.isMobile ? 'hr-body md-regular' : 'hr-body sm-regular'\"\n (click)=\" hasDateSelected() ? clearSelectedDate('all') : null\"/>\n @if (range) {\n <gravity-button [size]=\"appearance.isMobile ? 'md' : 'sm'\" [type]=\"'tertiary'\" [disabled]=\"!hasDateSelected(true)\"\n (click)=\"hasDateSelected(true) ? applySelectedDate() : null\"> {{i18n.apply}} </gravity-button>\n }\n </div>\n }\n </section>\n </section>\n </div>\n", styles: [":root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}.next-button,.previous-button{cursor:pointer;padding:var(--gravity-spacing-xs);border-radius:var(--gravity-spacing-xs)}.next-button:not(.disabled):hover,.previous-button:not(.disabled):hover{background:var(--bg-button-active-tertiary)}.next-button.disabled,.previous-button.disabled{cursor:default;pointer-events:none;--icon-color: var(--on-bg-disabled)}.separator-line{border-bottom:2px solid var(--divider-menu-active-primary)}.action-section{height:25px;display:flex;align-self:stretch;align-items:center;justify-content:space-between}.title{width:100%;text-align:center;margin-bottom:var(--gravity-spacing-sm);color:var(--label-text-empty-enabled-primary)}.title span{height:11px;display:block;line-height:11px}.gravity-date-picker-content{display:flex;align-items:center;justify-items:center;flex-direction:column;gap:var(--gravity-spacing-md)}.gravity-date-picker-content .selected-dates{width:50%;display:flex;justify-content:center;gap:var(--gravity-spacing-xs)}.gravity-date-picker-content .selected-dates ::ng-deep gravity-text-field{width:130px}.gravity-date-picker-content .selected-dates ::ng-deep gravity-text-field .gravity-input-field{width:130px}.gravity-date-picker-content .gravity-date-picker-header{gap:0;width:268px;height:auto;display:flex;padding-top:0;align-items:center;justify-content:space-between}.gravity-date-picker-content .gravity-date-picker-header .month-year-label{display:flex;gap:var(--gravity-spacing-sm)}.gravity-date-picker-content .gravity-date-picker-header.mobile,.gravity-date-picker-content .gravity-date-picker-body{width:100%}.gravity-date-picker-content .gravity-date-picker-body .days-name-line{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs);padding-bottom:var(--gravity-spacing-xs)}.gravity-date-picker-content .gravity-date-picker-body .days-name-line .days-name{display:flex;align-self:stretch;justify-content:space-between}.gravity-date-picker-content .gravity-date-picker-body .days-name-line .days-name span{display:flex;cursor:default;align-items:center;justify-content:center;padding:var(--gravity-spacing-xs);color:var(--text-highlight-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-name-line .separator-line{width:100%}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector{display:flex;align-self:stretch;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table{display:flex;flex-direction:column}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row{height:25px;display:flex;align-self:stretch}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span{gap:10px;flex:1 0 0;width:31px;height:25px;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--gravity-spacing-xs);color:var(--on-bg-button-pressed-tertiary);border:2px solid var(--bg-calender-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span:not(.sl).today{border-color:var(--bg-number-calendar-hover-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span:not(.disabled):not(.sl):hover{color:var(--on-bg-button-pressed-tertiary);background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.single,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.start,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.end{color:var(--on-bg-button-pressed-primary);background:var(--bg-button-pressed-primary);border-color:var(--bg-button-pressed-primary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.range,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span:not(.disabled).preview{border-radius:0;background:var(--bg-button-active-tertiary);border-color:var(--bg-button-active-tertiary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.start,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.nsl-start:hover{border-radius:var(--gravity-spacing-xs) 0 0 var(--gravity-spacing-xs)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.end,.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.nsl-end:hover{border-radius:0 var(--gravity-spacing-xs) var(--gravity-spacing-xs) 0}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.in-slt:hover{border-color:var(--bg-button-pressed-primary)!important}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.default{border-radius:0!important;border-color:transparent!important}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.same-sln{border-radius:var(--gravity-spacing-xs)!important}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .days-number-table .week-row span.disabled{cursor:default;pointer-events:none;color:var(--on-bg-disabled)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .notification{display:flex;align-items:center;align-self:stretch;gap:var(--gravity-spacing-xxs);border-radius:.3125rem;padding:var(--gravity-spacing-xs);color:var(--on-bg-button-active-tertiary);background:var(--bg-button-active-tertiary);--notification-icon-color: var(--on-bg-button-active-tertiary)}.gravity-date-picker-content .gravity-date-picker-body .days-number-selector .notification.error{color:var(--on-bg-button-active-negative);background:var(--bg-button-active-negative);--notification-icon-color: var(--on-bg-button-active-negative)}.gravity-date-picker-content.mobile{width:100%;height:auto}.gravity-date-picker-content.mobile .selected-dates ::ng-deep gravity-text-field{width:100%}.gravity-date-picker-content.mobile .selected-dates ::ng-deep gravity-text-field .gravity-input-field{min-width:100%}.gravity-date-picker-content.mobile .days-name-line .separator-line{width:100%}.gravity-date-picker-content.mobile .days-number-selector .days-number-table .week-row,.gravity-date-picker-content.mobile .days-number-selector .days-number-table span{height:43px!important}.gravity-date-picker-content.hidden{display:none}\n"], dependencies: [{ kind: "component", type: MonthCalendarComponent, selector: "month-calendar", inputs: ["config", "initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }, { kind: "component", type: YearCalendarComponent, selector: "year-calendar", inputs: ["config", "initDate", "restart", "appearance", "integratedMode"], outputs: ["clearSelection", "response"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["label", "required", "cypressTag", "supportText", "prefix", "customInputValue", "currentLang", "textFieldType", "customState", "iconLeft", "iconColor", "iconRight", "supportTextIcon", "clickOnLeftIcon", "clickOnRightIcon", "placeholder", "labelExtraText", "size", "autocomplete", "characterCounter", "width", "validations", "passwordRequirements", "inputContentType"], outputs: ["clickIconLeft", "clickIconRight", "response"] }, { kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "iconName", "isLoading", "showContent", "size", "iconPosition", "customState", "type"] }] }); }
7236
7232
  }
7237
7233
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DayCalendarComponent, decorators: [{
7238
7234
  type: Component,