import{r as e,c as t,h as i,H as a}from"./p-b31dd0cc.js";import{y as s}from"./p-763062d8.js";class l{constructor(i){e(this,i),this.datepicker=!0,this.datepickerTodayPicker=!0,this.datepickerMonthPicker=!0,this.datepickerYearPicker=!0,this.input=t(this,"input",7)}componentWillLoad(){this.outlined&&this.fullwidth&&console.warn("[materials-date-field] You should not use fullwidth and outlined together")}updateValue(){this.materialsTextFieldEl&&(this.materialsTextFieldEl.value=this.value)}async isValid(){return await this.materialsTextFieldEl.isValid()}async forceValidation(){this.materialsTextFieldEl.forceValidation()}renderDatepicker(){if(this.datepicker)return i("materials-menu",{noPadding:!0,ref:e=>this.materialsMenuDatepickerEl=e},i("materials-card",{elevation:4,width:"fit-content"},i("materials-datepicker",{class:"date-picker",dateSelected:this.value?new Date(this.value):new Date,"today-picker":this.datepickerTodayPicker,yearPicker:this.datepickerYearPicker,monthPicker:this.datepickerMonthPicker,nullable:!this.required,onDateSelectedUpdate:e=>{this.value=e.detail?s(e.detail):"",this.input.emit(),this.materialsMenuDatepickerEl&&this.materialsMenuDatepickerEl.close()},onClick:e=>e.stopPropagation()})))}async openPicker(e){this.disabled||this.datepicker&&(e.stopPropagation(),e.preventDefault(),this.materialsMenuDatepickerEl&&this.materialsMenuDatepickerEl.open())}render(){return i(a,{class:{"materials-date-field--dense":this.dense}},i("materials-text-field",{class:"datepicker-with-value",type:"date",value:this.value,label:this.label,fullwidth:this.fullwidth,dense:this.dense,outlined:this.outlined,focused:this.focused,disabled:this.disabled,leadingIcon:this.leadingIcon,required:this.required,width:this.width,helperText:this.helperText,persistent:this.persistent,hideNativeClear:!0,customValidation:this.customValidation,ref:e=>this.materialsTextFieldEl=e,onInput:e=>{e.stopPropagation(),this.input.emit(e.detail)},onClick:e=>this.openPicker(e)}),this.renderDatepicker())}static get watchers(){return{value:["updateValue"]}}static get style(){return":host{display:-ms-flexbox;display:flex}.date-picker{padding:16px}"}}export{l as materials_date_field};