@limetech/lime-elements
Version:
2 lines • 5.53 kB
JavaScript
import{r as t,c as i,h as e,g as s}from"./p-288f0842.js";import{c as h}from"./p-ad52787a.js";import{i as n,a}from"./p-04fd1563.js";import"./p-cd51aca3.js";import{m as r}from"./p-be00f5bb.js";import{M as l}from"./p-85a982f9.js";import"./p-4e9b4087.js";import"./p-9f722992.js";import"./p-5a478c15.js";import"./p-e7281e6a.js";class o{constructor(t="en"){this.language=t}formatDate(t,i){if(t){return r(t).locale(this.getLanguage()).format(i)}return""}parseDate(t,i){if(t){return r(t,i).toDate()}return null}getLanguage(){if(this.language==="no"){return"nb"}return this.language}getDateFormat(t){return{date:"L",time:"LT",week:"[w] W GGGG",month:"MM/YYYY",quarter:"[Q]Q YYYY",year:"YYYY",datetime:"L - LT"}[t]||"L - LT"}}const d=":host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}";const u={date:"date",time:"time",week:n()?"date":"week",month:"month",quarter:"date",year:"date",datetime:"datetime-local",default:"datetime-local"};const m={date:"Y-MM-DD",time:"HH:mm",week:"GGGG-[W]WW",month:"Y-MM","datetime-local":"Y-MM-DD[T]HH:mm"};const c=class{constructor(e){t(this,e);this.change=i(this,"change",7);this.portalId=`date-picker-calendar-${h()}`;this.documentClickListener=t=>{if(t.composedPath().includes(this.textField)){return}const i=document.querySelector(`#${this.portalId}`);if(!i.contains(t.target)){this.hideCalendar()}};this.formatValue=t=>this.dateFormatter.formatDate(t,this.internalFormat);this.disabled=false;this.readonly=false;this.invalid=false;this.label=undefined;this.placeholder=undefined;this.helperText=undefined;this.required=false;this.value=undefined;this.type="datetime";this.format=undefined;this.language="en";this.formatter=undefined;this.internalFormat=undefined;this.showPortal=false;this.handleCalendarChange=this.handleCalendarChange.bind(this);this.handleInputElementChange=this.handleInputElementChange.bind(this);this.showCalendar=this.showCalendar.bind(this);this.dateFormatter=new o(this.language);this.clearValue=this.clearValue.bind(this);this.hideCalendar=this.hideCalendar.bind(this);this.onInputClick=this.onInputClick.bind(this);this.nativeChangeHandler=this.nativeChangeHandler.bind(this);this.preventBlurFromCalendarContainer=this.preventBlurFromCalendarContainer.bind(this)}componentWillLoad(){this.useNative=!this.readonly&&(n()||a());this.updateInternalFormatAndType()}componentWillUpdate(){this.updateInternalFormatAndType()}disconnectedCallback(){this.hideCalendar()}render(){const t={onAction:this.clearValue};if(this.value&&!this.readonly){t.trailingIcon="clear_symbol"}if(this.useNative){return e("limel-input-field",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formatValue(this.value),type:this.nativeType,onChange:this.nativeChangeHandler})}const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");const s=this.formatter||this.formatValue;return[e("limel-input-field",Object.assign({disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,placeholder:this.placeholder,helperText:this.helperText,required:this.required,value:this.value?s(this.value):"",onFocus:this.showCalendar,onBlur:this.hideCalendar,onClick:this.onInputClick,onChange:this.handleInputElementChange,ref:t=>this.textField=t},t)),e("limel-portal",{containerId:this.portalId,visible:this.showPortal,containerStyle:{"z-index":i}},e("limel-flatpickr-adapter",{format:this.internalFormat,language:this.language,type:this.type,value:this.value,ref:t=>this.datePickerCalendar=t,isOpen:this.showPortal,formatter:s,onChange:this.handleCalendarChange}))]}updateInternalFormatAndType(){this.nativeType=u[this.type||"default"];this.nativeFormat=m[this.nativeType];if(this.useNative){this.internalFormat=this.nativeFormat}else if(this.formatter||this.format){this.internalFormat=this.format}else{this.internalFormat=this.dateFormatter.getDateFormat(this.type)}}nativeChangeHandler(t){t.stopPropagation();const i=this.dateFormatter.parseDate(t.detail,this.internalFormat);this.change.emit(i)}showCalendar(t){this.showPortal=true;const i=this.textField.shadowRoot.querySelector("input");setTimeout((()=>{this.datePickerCalendar.inputElement=i}));t.stopPropagation();document.addEventListener("mousedown",this.documentClickListener,{passive:true});document.addEventListener("blur",this.preventBlurFromCalendarContainer,{capture:true})}preventBlurFromCalendarContainer(t){if(t.relatedTarget===this.datePickerCalendar){t.stopPropagation()}}hideCalendar(){setTimeout((()=>{this.showPortal=false}));document.removeEventListener("mousedown",this.documentClickListener);document.removeEventListener("blur",this.preventBlurFromCalendarContainer);if(!this.pickerIsAutoClosing()){this.fixFlatpickrFocusBug()}}fixFlatpickrFocusBug(){const t=new l(this.textField.shadowRoot.querySelector(".mdc-text-field"));t.getDefaultFoundation().deactivateFocus();t.valid=!this.invalid}handleCalendarChange(t){const i=t.detail;t.stopPropagation();if(this.pickerIsAutoClosing()){this.hideCalendar()}this.change.emit(i)}onInputClick(t){if(this.disabled||this.readonly){return}if(this.showPortal){return}this.showCalendar(t)}handleInputElementChange(t){if(t.detail===""){this.clearValue()}t.stopPropagation()}pickerIsAutoClosing(){return this.type!=="datetime"&&this.type!=="time"}clearValue(){this.change.emit(null)}get host(){return s(this)}};c.style=d;export{c as limel_date_picker};
//# sourceMappingURL=p-ac55217a.entry.js.map