import{r as t,c as e,h as i,H as s}from"./p-a0e89da3.js";import{y as a}from"./p-763062d8.js";const h=class{constructor(i){t(this,i),this.datepicker=!0,this.datepickerTodayPicker=!0,this.datepickerMonthPicker=!0,this.datepickerYearPicker=!0,this.input=e(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:t=>this.materialsMenuDatepickerEl=t},i("materials-card",{padding:16,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:t=>{this.value=t.detail?a(t.detail):"",this.input.emit(),this.materialsMenuDatepickerEl&&this.materialsMenuDatepickerEl.close()},onClick:t=>t.stopPropagation()})))}async openPicker(t){this.disabled||this.datepicker&&(t.stopPropagation(),t.preventDefault(),this.materialsMenuDatepickerEl&&this.materialsMenuDatepickerEl.open())}render(){return i(s,{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:t=>this.materialsTextFieldEl=t,onInput:t=>{t.stopPropagation(),this.input.emit(t.detail)},onClick:t=>this.openPicker(t)}),this.renderDatepicker())}static get watchers(){return{value:["updateValue"]}}static get style(){return":host{display:-ms-flexbox;display:flex}.date-picker{padding:16px}"}};export{h as materials_date_field};