[{"__symbolic":"module","version":3,"metadata":{"ThfDatepickerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@totvs/thf-core/components/thf-field-base","name":"ThfDatepickerBaseComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"thf-datepicker","template":"<div class=\"thf-input-datepicker\"> <thf-field-container [t-label]=\"label\" [t-help]=\"help\" [t-opcional]=\"!required\"> <div class=\"thf-field-flex-container\" > <input #inp type=\"text\" class=\"thf-input-elem\" (blur)=\"eventOnBlur($event)\" (change)=\"eventOnChange($event)\" (click)=\"eventOnClick($event)\" [attr.name]=\"name\" [placeholder]=\"placeholder\" [required]=\"required\" [disabled]=\"disabled\" [readonly]=\"readonly\"> <thf-clean #clean (click)=\"cleanInput()\" position=\"2\" *ngIf=\"clean && !disabled\"></thf-clean> <span #iconDatepicker (click)=\"togglePicker()\" class=\"thf-icon thf-icon-calendar thf-span-datepicker\"></span> </div> <div class=\"thf-datepicker thf-datepicker-invisible\" #dialogPicker> <thf-calendar #picker [t-locale]=\"locale\" [t-end]=\"end\" [t-start]=\"start\" [(t-date)]=\"date\" (t-submit)=\"dateSelected()\"> </thf-calendar> </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> </div> ","styles":[".thf-input-datepicker { max-width: 100%; } .thf-clean-arrow-mobile { z-index: 4; position: relative; width: 20px; float: right; height: 20px; background-color: white; bottom: 33px; right: 2px; } .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-datepicker.ng-valid .thf-input-elem:focus { outline: none; border: solid 1px #0c9abe !important; border: solid 1px var(--water-blue); } thf-datepicker.ng-invalid.ng-dirty .thf-input-elem { outline: none; border: solid 1px #c64840 !important; } thf-datepicker.ng-invalid.ng-dirty .thf-span-clean { color: #c64840 !important; } .thf-field-flex-container { display: flex; } .thf-text-clean { position: absolute; 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; } .thf-datepicker { position: absolute; padding-top: 8px; z-index: 1000; } .thf-datepicker-invisible { display: none; } .thf-span-datepicker { position: relative; width: 0px; font-size: 25px; color: #0c9abe; right: 35px; top: 18px; text-decoration: none; z-index: 100; cursor: pointer; } thf-datepicker.ng-invalid.ng-dirty .thf-span-datepicker { color: #c64840 !important; } "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"picker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["picker"]}]}],"dialogPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dialogPicker",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"iconDatepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["iconDatepicker",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"inputEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inp",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"cleanEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["clean",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"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"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"togglePicker":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"wasClickedOnPicker":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup",["$event"]]}]}],"onKeypress":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keypress",["$event"]]}]}],"onKeydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"hasInvalidClass":[{"__symbolic":"method"}],"cleanInput":[{"__symbolic":"method"}],"eventOnBlur":[{"__symbolic":"method"}],"eventOnChange":[{"__symbolic":"method"}],"eventOnClick":[{"__symbolic":"method"}],"formatToDate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"hasOverlayClass":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ThfDatepickerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@totvs/thf-core/components/thf-field-base","name":"ThfDatepickerBaseComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"thf-datepicker","template":"<div class=\"thf-input-datepicker\"> <thf-field-container [t-label]=\"label\" [t-help]=\"help\" [t-opcional]=\"!required\"> <div class=\"thf-field-flex-container\" > <input #inp type=\"text\" class=\"thf-input-elem\" (blur)=\"eventOnBlur($event)\" (change)=\"eventOnChange($event)\" (click)=\"eventOnClick($event)\" [attr.name]=\"name\" [placeholder]=\"placeholder\" [required]=\"required\" [disabled]=\"disabled\" [readonly]=\"readonly\"> <thf-clean #clean (click)=\"cleanInput()\" position=\"2\" *ngIf=\"clean && !disabled\"></thf-clean> <span #iconDatepicker (click)=\"togglePicker()\" class=\"thf-icon thf-icon-calendar thf-span-datepicker\"></span> </div> <div class=\"thf-datepicker thf-datepicker-invisible\" #dialogPicker> <thf-calendar #picker [t-locale]=\"locale\" [t-end]=\"end\" [t-start]=\"start\" [(t-date)]=\"date\" (t-submit)=\"dateSelected()\"> </thf-calendar> </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> </div> ","styles":[".thf-input-datepicker { max-width: 100%; } .thf-clean-arrow-mobile { z-index: 4; position: relative; width: 20px; float: right; height: 20px; background-color: white; bottom: 33px; right: 2px; } .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-datepicker.ng-valid .thf-input-elem:focus { outline: none; border: solid 1px #0c9abe !important; border: solid 1px var(--water-blue); } thf-datepicker.ng-invalid.ng-dirty .thf-input-elem { outline: none; border: solid 1px #c64840 !important; } thf-datepicker.ng-invalid.ng-dirty .thf-span-clean { color: #c64840 !important; } .thf-field-flex-container { display: flex; } .thf-text-clean { position: absolute; 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; } .thf-datepicker { position: absolute; padding-top: 8px; z-index: 1000; } .thf-datepicker-invisible { display: none; } .thf-span-datepicker { position: relative; width: 0px; font-size: 25px; color: #0c9abe; right: 35px; top: 18px; text-decoration: none; z-index: 100; cursor: pointer; } thf-datepicker.ng-invalid.ng-dirty .thf-span-datepicker { color: #c64840 !important; } "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"picker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["picker"]}]}],"dialogPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dialogPicker",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"iconDatepicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["iconDatepicker",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"inputEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inp",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"cleanEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["clean",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"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"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"togglePicker":[{"__symbolic":"method"}],"dateSelected":[{"__symbolic":"method"}],"wasClickedOnPicker":[{"__symbolic":"method"}],"onKeyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup",["$event"]]}]}],"onKeypress":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keypress",["$event"]]}]}],"onKeydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"hasInvalidClass":[{"__symbolic":"method"}],"cleanInput":[{"__symbolic":"method"}],"eventOnBlur":[{"__symbolic":"method"}],"eventOnChange":[{"__symbolic":"method"}],"eventOnClick":[{"__symbolic":"method"}],"formatToDate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"hasOverlayClass":[{"__symbolic":"method"}]}}}}]