[{"__symbolic":"module","version":3,"metadata":{"ThfInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@totvs/thf-core/components/thf-field-base","name":"ThfInputBaseComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"thf-input","template":" <thf-field-container [t-label]=\"label\" [t-help]=\"help\" [t-opcional]=\"!required\"> <div class=\"thf-field-flex-container\" > <input #inp [type]=\"type\" class=\"thf-input-elem\" (input)=\"eventOnInput($event)\" (focus)=\"eventOnFocus($event)\" (blur)=\"eventOnBlur($event)\" (click)=\"eventOnClick($event)\" [attr.name]=\"name\" [placeholder]=\"placeholder\" [required]=\"required\" [disabled]=\"disabled\" [readonly]=\"readonly\"> <thf-clean #clean (click)=\"cleanInput()\" *ngIf=\"clean!=='' && !disabled\"></thf-clean> </div> <div class=\"thf-field-error\"> <div *ngIf=\"errorPattern!=='' && hasInvalidClass()\" class=\"thf-field-error\"> <span class=\"thf-icon thf-icon-close\"></span> {{errorPattern}} </div> </div> </thf-field-container> ","styles":[".thf-input-elem { width: 100%; line-height: 24px; font-family: NunitoSans; font-size: 16px; border-radius: 3px; background-color: #ffffff; box-shadow: inset 0px 2px 8px 0 #edefef; border: solid 1px #b7bebf !important; padding: 10px 15px 8px 15px; margin-top: 8px; } .thf-input-elem:disabled { background-color: #edefef; border: solid 1px #b7bebf; } thf-input.ng-valid .thf-input-elem:focus, thf-email.ng-valid .thf-input-elem:focus, thf-url.ng-valid .thf-input-elem:focus, thf-number.ng-valid .thf-input-elem:focus { outline: none; border: solid 1px #0c9abe !important; border: solid 1px var(--water-blue); } thf-input.ng-invalid.ng-dirty input, thf-email.ng-invalid.ng-dirty input, thf-url.ng-invalid.ng-dirty input, thf-number.ng-invalid.ng-dirty input { outline: none; border: solid 1px #c64840 !important; } thf-input.ng-invalid.ng-dirty .thf-span-clean, thf-email.ng-invalid.ng-dirty .thf-span-clean, thf-url.ng-invalid.ng-dirty .thf-span-clean, thf-number.ng-invalid.ng-dirty .thf-span-clean { color: #c64840 !important; } .thf-field-flex-container { display: flex; } .thf-text-clean { position: relative; width: 0px; font-size: 25px; color: #0c9abe; right: 35px; top: 10px; text-decoration: none; cursor: pointer; } .thf-field-error { display: block; height: 20px; font-family: NunitoSans; font-size: 12px; text-align: left; color: #c64840; padding-left: 2px; margin-top: 2px; } .thf-field-error span { padding-bottom: 2px; vertical-align: middle; font-size: 14px; font-weight: bold; } "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["t-label"]}]}],"help":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["t-help"]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"ThfInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@totvs/thf-core/components/thf-field-base","name":"ThfInputBaseComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"thf-input","template":" <thf-field-container [t-label]=\"label\" [t-help]=\"help\" [t-opcional]=\"!required\"> <div class=\"thf-field-flex-container\" > <input #inp [type]=\"type\" class=\"thf-input-elem\" (input)=\"eventOnInput($event)\" (focus)=\"eventOnFocus($event)\" (blur)=\"eventOnBlur($event)\" (click)=\"eventOnClick($event)\" [attr.name]=\"name\" [placeholder]=\"placeholder\" [required]=\"required\" [disabled]=\"disabled\" [readonly]=\"readonly\"> <thf-clean #clean (click)=\"cleanInput()\" *ngIf=\"clean!=='' && !disabled\"></thf-clean> </div> <div class=\"thf-field-error\"> <div *ngIf=\"errorPattern!=='' && hasInvalidClass()\" class=\"thf-field-error\"> <span class=\"thf-icon thf-icon-close\"></span> {{errorPattern}} </div> </div> </thf-field-container> ","styles":[".thf-input-elem { width: 100%; line-height: 24px; font-family: NunitoSans; font-size: 16px; border-radius: 3px; background-color: #ffffff; box-shadow: inset 0px 2px 8px 0 #edefef; border: solid 1px #b7bebf !important; padding: 10px 15px 8px 15px; margin-top: 8px; } .thf-input-elem:disabled { background-color: #edefef; border: solid 1px #b7bebf; } thf-input.ng-valid .thf-input-elem:focus, thf-email.ng-valid .thf-input-elem:focus, thf-url.ng-valid .thf-input-elem:focus, thf-number.ng-valid .thf-input-elem:focus { outline: none; border: solid 1px #0c9abe !important; border: solid 1px var(--water-blue); } thf-input.ng-invalid.ng-dirty input, thf-email.ng-invalid.ng-dirty input, thf-url.ng-invalid.ng-dirty input, thf-number.ng-invalid.ng-dirty input { outline: none; border: solid 1px #c64840 !important; } thf-input.ng-invalid.ng-dirty .thf-span-clean, thf-email.ng-invalid.ng-dirty .thf-span-clean, thf-url.ng-invalid.ng-dirty .thf-span-clean, thf-number.ng-invalid.ng-dirty .thf-span-clean { color: #c64840 !important; } .thf-field-flex-container { display: flex; } .thf-text-clean { position: relative; width: 0px; font-size: 25px; color: #0c9abe; right: 35px; top: 10px; text-decoration: none; cursor: pointer; } .thf-field-error { display: block; height: 20px; font-family: NunitoSans; font-size: 12px; text-align: left; color: #c64840; padding-left: 2px; margin-top: 2px; } .thf-field-error span { padding-bottom: 2px; vertical-align: middle; font-size: 14px; font-weight: bold; } "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["t-label"]}]}],"help":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["t-help"]}]}]}}}}]