@tabworthy/components 0.3.1 → 0.3.2

package/dist/components/tabworthy-times.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as a,transformTag as h}from"@stencil/core/internal/client";import{h as r}from"./moment.js";import{g as o,r as n,d as l}from"./tabworthy-dates-calendar2.js";import{d}from"./tabworthy-dates-modal2.js";import{d as c}from"./tabworthy-times-picker2.js";const b={selected:"selected",openCalendar:"Open date and time picker",calendar:"date and time picker",invalidDateError:"We could not find a matching date",minDateError:"Please fill in a date after ",maxDateError:"Please fill in a date before ",rangeOutOfBoundsError:"Please enter a valid range of dates",disabledDateError:"Please choose an available date",to:"to",startDate:"Start date",timeLabel:"Time"},m=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.selectDateTime=s(this,"selectDateTime",7),this.changeYear=s(this,"changeYear",7),this.componentReady=s(this,"componentReady",7),this.range=!1,this.label="Choose a date and time",this.placeholder="",this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.disabled=!1,this.startDate=o(new Date),this.referenceDate=o(new Date),this.use12HourFormat=!0,this.timesLabels=b,this.inline=!1,this.hasError=!1,this.showYearStepper=!1,this.showMonthStepper=!0,this.showClearButton=!0,this.showTodayButton=!0,this.disableDate=()=>!1,this.elementClassName="tabworthy-times",this.firstDayOfWeek=1,this.format="YYYY-MM-DDTHH:mm:ss",this.selectedHours=12,this.selectedMinutes=0,this.errorState=this.hasError,this.disabledState=this.disabled,this.errorMessage="",this.handlePickerSelection=async t=>{const e=t.split(",");if(this.range&&2===e.length){const t=n(new Date(e[0])),s=n(new Date(e[1]));this.updateValue([t,s]),this.pickerRef&&(this.pickerRef.value=[t,s])}else{const t=n(new Date(e[0]));this.updateValue(t),this.pickerRef&&(this.pickerRef.value=t)}},this.handleTimeChange=t=>{this.selectedHours=t.detail.hours,this.selectedMinutes=t.detail.minutes,this.selectedDate&&this.updateValue(this.selectedDate)},this.handleCalendarButtonClick=async()=>{this.modalRef&&(await this.modalRef.setTriggerElement(this.calendarButtonRef),await this.modalRef.open())},this.handleYearChange=t=>{this.changeYear&&this.changeYear.emit(t)},this.handleChangedMonths=()=>{},this.handleInputBlur=()=>{this.formatInput()},this.handleInputChange=t=>{const e=r(t.target.value);e.isValid()&&(this.selectedHours=e.hours(),this.selectedMinutes=e.minutes(),this.updateValue(e.toDate()))}}watchValue(t){this.syncFromValueProp()}watchDisabled(t){this.disabledState=t}watchHasError(t){this.errorState=t}componentDidLoad(){this.syncFromValueProp(),this.componentReady.emit(),this.id||console.error('tabworthy-times: The "id" prop is required for accessibility')}syncFromValueProp(){if(this.value){this.internalValue=this.value;const t=Array.isArray(this.value)?this.value[0]:this.value;if(t){const e=r(t,this.format);e.isValid()&&(this.selectedDate=e.toDate(),this.selectedHours=e.hours(),this.selectedMinutes=e.minutes())}}else this.internalValue=null}updateValue(t){if(Array.isArray(t)){const e=t.map((t=>{const e=r(t);return e.hours(this.selectedHours),e.minutes(this.selectedMinutes),e.seconds(0),e.format(this.format)}));this.internalValue=e,this.value=e,this.selectDateTime.emit(e)}else{const e=r(t);e.hours(this.selectedHours),e.minutes(this.selectedMinutes),e.seconds(0);const s=e.format(this.format);this.internalValue=s,this.value=s,this.selectedDate=t,this.selectDateTime.emit(s)}this.errorState=!1,this.formatInput()}formatInput(){if(this.internalValue)if(Array.isArray(this.internalValue)){const t=this.internalValue.map((t=>r(t,this.format).format("lll"))).join(` ${this.timesLabels.to} `);this.inputRef.value=t}else this.inputRef.value=r(this.internalValue,this.format).format("lll")}getClassName(t){return`${this.elementClassName}__${t}`}async clearValue(){this.internalValue=null,this.value=void 0,this.selectedDate=void 0,this.inputRef.value="",this.pickerRef&&(this.pickerRef.value=null),this.selectDateTime.emit(void 0)}render(){var t;return i(a,{key:"e922c649f8ed2bf03711fe99ae73bca550c9d8ef",class:this.elementClassName,"has-error":this.errorState,disabled:this.disabledState},i("label",{key:"6b8c053bcb4d232c52e0b95da141e4a433f2bc16",htmlFor:this.id+"-input",class:this.getClassName("label")},this.label),i("div",{key:"1950259cf662cedae9b8f0fed6a61f095d3a4424",class:this.getClassName("input-container")},i("input",{key:"1c6bfced55bd60706eadf6304eb7204c89bda8d6",id:this.id+"-input",ref:t=>this.inputRef=t,type:"text",class:this.getClassName("input"),placeholder:this.placeholder,disabled:this.disabledState,value:null===(t=this.internalValue)||void 0===t?void 0:""+t,onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-describedby":this.errorState?this.id+"-error":void 0,"aria-invalid":this.errorState}),!this.inline&&i("button",{key:"60b202b017d7ffe5de182908c809a24eba4f8e56",type:"button",ref:t=>this.calendarButtonRef=t,onClick:this.handleCalendarButtonClick,class:this.getClassName("calendar-button"),disabled:this.disabledState},this.calendarButtonContent?i("span",{innerHTML:this.calendarButtonContent}):this.timesLabels.openCalendar)),i("tabworthy-dates-modal",{key:"83716e92fd3711c65b23f007bba209bcc60a4d7d",label:this.timesLabels.calendar,ref:t=>this.modalRef=t,onOpened:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!0)},onClosed:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!1)},inline:this.inline},i("div",{key:"3972712165cdc3069498d5683ca7b8b25041e44d",class:this.getClassName("picker-container")},i("tabworthy-dates-calendar",{key:"e6472861402e4926227657fb68f57d8671452260",range:this.range,locale:this.locale,onSelectDate:t=>this.handlePickerSelection(t.detail),onChangeMonth:t=>this.handleChangedMonths(t.detail),onChangeYear:t=>this.handleYearChange(t.detail),labels:this.datesCalendarLabels,ref:t=>this.pickerRef=t,startDate:this.startDate,firstDayOfWeek:this.firstDayOfWeek,showHiddenTitle:!0,disabled:this.disabledState,showMonthStepper:this.showMonthStepper,showYearStepper:this.showYearStepper,showClearButton:this.showClearButton,showTodayButton:this.showTodayButton,disableDate:this.disableDate,minDate:this.minDate,maxDate:this.maxDate,inline:this.inline},i("div",{key:"e9f7b9baa9544ae651b4b6b73094a215cabcc796",slot:"after-calendar",class:this.getClassName("time-section")},i("tabworthy-times-picker",{key:"b4c2f14b9311d1e3c186825785d6f64580f2896c",hours:this.selectedHours,minutes:this.selectedMinutes,use12HourFormat:this.use12HourFormat,disabled:this.disabledState,onTimeChanged:this.handleTimeChange}))))),this.errorState&&i("div",{key:"684dce5fc46c53feea28b19eca46746d7538aa3f",class:this.getClassName("input-error"),id:this.id?this.id+"-error":void 0,role:"status"},this.errorMessage))}get el(){return this}static get watchers(){return{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}}},[2,"tabworthy-times",{id:[513],value:[1025],range:[4],label:[1],placeholder:[1],locale:[1],disabled:[4],minDate:[1,"min-date"],maxDate:[1,"max-date"],startDate:[1,"start-date"],referenceDate:[1,"reference-date"],use12HourFormat:[4,"use-1-2-hour-format"],timesLabels:[16],datesCalendarLabels:[16],inline:[4],hasError:[1028,"has-error"],showYearStepper:[4,"show-year-stepper"],showMonthStepper:[4,"show-month-stepper"],showClearButton:[4,"show-clear-button"],showTodayButton:[4,"show-today-button"],calendarButtonContent:[1,"calendar-button-content"],disableDate:[16],elementClassName:[1,"element-class-name"],firstDayOfWeek:[2,"first-day-of-week"],format:[1],internalValue:[32],selectedDate:[32],selectedHours:[32],selectedMinutes:[32],errorState:[32],disabledState:[32],clearValue:[64]},void 0,{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}]),u=m,f=function(){"undefined"!=typeof customElements&&["tabworthy-times","tabworthy-dates-calendar","tabworthy-dates-modal","tabworthy-times-picker"].forEach((t=>{switch(t){case"tabworthy-times":customElements.get(h(t))||customElements.define(h(t),m);break;case"tabworthy-dates-calendar":customElements.get(h(t))||l();break;case"tabworthy-dates-modal":customElements.get(h(t))||d();break;case"tabworthy-times-picker":customElements.get(h(t))||c()}}))};export{u as TabworthyTimes,f as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as a,transformTag as h}from"@stencil/core/internal/client";import{h as r}from"./moment.js";import{g as o,r as n,d}from"./tabworthy-dates-calendar2.js";import{d as l}from"./tabworthy-dates-modal2.js";import{d as c}from"./tabworthy-times-picker2.js";const b={selected:"selected",openCalendar:"Open date and time picker",calendar:"date and time picker",invalidDateError:"We could not find a matching date",minDateError:"Please fill in a date after ",maxDateError:"Please fill in a date before ",rangeOutOfBoundsError:"Please enter a valid range of dates",disabledDateError:"Please choose an available date",to:"to",startDate:"Start date",timeLabel:"Time"},m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.selectDateTime=e(this,"selectDateTime",7),this.changeYear=e(this,"changeYear",7),this.componentReady=e(this,"componentReady",7),this.range=!1,this.label="Choose a date and time",this.placeholder="",this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.disabled=!1,this.startDate=o(new Date),this.referenceDate=o(new Date),this.use12HourFormat=!0,this.timesLabels=b,this.inline=!1,this.hasError=!1,this.showYearStepper=!1,this.showMonthStepper=!0,this.showClearButton=!0,this.showTodayButton=!0,this.disableDate=()=>!1,this.elementClassName="tabworthy-times",this.firstDayOfWeek=1,this.format="YYYY-MM-DDTHH:mm:ss",this.inputShouldFormat=!0,this.selectedHours=12,this.selectedMinutes=0,this.errorState=this.hasError,this.disabledState=this.disabled,this.errorMessage="",this.handlePickerSelection=async t=>{const s=t.split(",");if(this.range&&2===s.length){const t=n(new Date(s[0])),e=n(new Date(s[1]));this.updateValue([t,e]),this.pickerRef&&(this.pickerRef.value=[t,e])}else{const t=n(new Date(s[0]));this.updateValue(t),this.pickerRef&&(this.pickerRef.value=t)}},this.handleTimeChange=t=>{this.selectedHours=t.detail.hours,this.selectedMinutes=t.detail.minutes,this.selectedDate&&this.updateValue(this.selectedDate)},this.handleCalendarButtonClick=async()=>{this.modalRef&&(await this.modalRef.setTriggerElement(this.calendarButtonRef),await this.modalRef.open())},this.handleYearChange=t=>{this.changeYear&&this.changeYear.emit(t)},this.handleChangedMonths=()=>{},this.handleInputBlur=()=>{this.inputShouldFormat&&this.formatInput()},this.handleInputChange=t=>{const s=r(t.target.value);s.isValid()&&(this.selectedHours=s.hours(),this.selectedMinutes=s.minutes(),this.updateValue(s.toDate()))}}watchValue(t){this.syncFromValueProp()}watchDisabled(t){this.disabledState=t}watchHasError(t){this.errorState=t}componentDidLoad(){this.syncFromValueProp(),this.componentReady.emit(),this.id||console.error('tabworthy-times: The "id" prop is required for accessibility')}syncFromValueProp(){if(this.value){this.internalValue=this.value;const t=Array.isArray(this.value)?this.value[0]:this.value;if(t){const s=r(t,this.format);s.isValid()&&(this.selectedDate=s.toDate(),this.selectedHours=s.hours(),this.selectedMinutes=s.minutes())}}else this.internalValue=null}updateValue(t){if(Array.isArray(t)){const s=t.map((t=>{const s=r(t);return s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0),s.format(this.format)}));this.internalValue=s,this.value=s,this.selectDateTime.emit(s)}else{const s=r(t);s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0);const e=s.format(this.format);this.internalValue=e,this.value=e,this.selectedDate=t,this.selectDateTime.emit(e)}this.errorState=!1,this.inputShouldFormat&&this.formatInput()}formatInput(){if(this.internalValue)if(Array.isArray(this.internalValue)){const t=this.internalValue.map((t=>r(t,this.format).format("lll"))).join(` ${this.timesLabels.to} `);this.inputRef.value=t}else this.inputRef.value=r(this.internalValue,this.format).format("lll")}getClassName(t){return`${this.elementClassName}__${t}`}async clearValue(){this.internalValue=null,this.value=void 0,this.selectedDate=void 0,this.inputRef.value="",this.pickerRef&&(this.pickerRef.value=null),this.selectDateTime.emit(void 0)}render(){var t;return i(a,{key:"e9ef24f7b4e7797607f4e46c3c7da892e276160c",class:this.elementClassName,"has-error":this.errorState,disabled:this.disabledState},i("label",{key:"9fbc1b57f9466e2e76dc46c6fd498e525d1cc1ee",htmlFor:this.id+"-input",class:this.getClassName("label")},this.label),i("div",{key:"2958a036e04b53761451adec9986c0305b9425af",class:this.getClassName("input-container")},i("input",{key:"bee806dc1c5630c3032fd07eadbb0100ccfea89b",id:this.id+"-input",ref:t=>this.inputRef=t,type:"text",class:this.getClassName("input"),placeholder:this.placeholder,disabled:this.disabledState,value:null===(t=this.internalValue)||void 0===t?void 0:""+t,onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-describedby":this.errorState?this.id+"-error":void 0,"aria-invalid":this.errorState}),!this.inline&&i("button",{key:"c8e490c2c004d2ad096848fcc83389524c767819",type:"button",ref:t=>this.calendarButtonRef=t,onClick:this.handleCalendarButtonClick,class:this.getClassName("calendar-button"),disabled:this.disabledState},this.calendarButtonContent?i("span",{innerHTML:this.calendarButtonContent}):this.timesLabels.openCalendar)),i("tabworthy-dates-modal",{key:"1620370de6b83f1d8de49fc0c44702d2a4495c62",label:this.timesLabels.calendar,ref:t=>this.modalRef=t,onOpened:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!0)},onClosed:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!1)},inline:this.inline},i("div",{key:"9521fd9f0fbdd6b1b6114fafbe6d623537fb1420",class:this.getClassName("picker-container")},i("tabworthy-dates-calendar",{key:"da204266d8c440961fffdbf58aa10cd1e5630357",range:this.range,locale:this.locale,onSelectDate:t=>this.handlePickerSelection(t.detail),onChangeMonth:t=>this.handleChangedMonths(t.detail),onChangeYear:t=>this.handleYearChange(t.detail),labels:this.datesCalendarLabels,ref:t=>this.pickerRef=t,startDate:this.startDate,firstDayOfWeek:this.firstDayOfWeek,showHiddenTitle:!0,disabled:this.disabledState,showMonthStepper:this.showMonthStepper,showYearStepper:this.showYearStepper,showClearButton:this.showClearButton,showTodayButton:this.showTodayButton,disableDate:this.disableDate,minDate:this.minDate,maxDate:this.maxDate,inline:this.inline},i("div",{key:"b82af457943cdcae6f098688f7c90bda0aeed427",slot:"after-calendar",class:this.getClassName("time-section")},i("tabworthy-times-picker",{key:"6800ae768ecb4796105f9d1981cc8315732a1335",hours:this.selectedHours,minutes:this.selectedMinutes,use12HourFormat:this.use12HourFormat,disabled:this.disabledState,onTimeChanged:this.handleTimeChange}))))),this.errorState&&i("div",{key:"648df2b385853946f5b2ae5f2f453fc8a25c1069",class:this.getClassName("input-error"),id:this.id?this.id+"-error":void 0,role:"status"},this.errorMessage))}get el(){return this}static get watchers(){return{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}}},[2,"tabworthy-times",{id:[513],value:[1025],range:[4],label:[1],placeholder:[1],locale:[1],disabled:[4],minDate:[1,"min-date"],maxDate:[1,"max-date"],startDate:[1,"start-date"],referenceDate:[1,"reference-date"],use12HourFormat:[4,"use-1-2-hour-format"],timesLabels:[16],datesCalendarLabels:[16],inline:[4],hasError:[1028,"has-error"],showYearStepper:[4,"show-year-stepper"],showMonthStepper:[4,"show-month-stepper"],showClearButton:[4,"show-clear-button"],showTodayButton:[4,"show-today-button"],calendarButtonContent:[1,"calendar-button-content"],disableDate:[16],elementClassName:[1,"element-class-name"],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inputShouldFormat:[4,"input-should-format"],internalValue:[32],selectedDate:[32],selectedHours:[32],selectedMinutes:[32],errorState:[32],disabledState:[32],clearValue:[64]},void 0,{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}]),u=m,f=function(){"undefined"!=typeof customElements&&["tabworthy-times","tabworthy-dates-calendar","tabworthy-dates-modal","tabworthy-times-picker"].forEach((t=>{switch(t){case"tabworthy-times":customElements.get(h(t))||customElements.define(h(t),m);break;case"tabworthy-dates-calendar":customElements.get(h(t))||d();break;case"tabworthy-dates-modal":customElements.get(h(t))||l();break;case"tabworthy-times-picker":customElements.get(h(t))||c()}}))};export{u as TabworthyTimes,f as defineCustomElement}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["tabworthy-times-picker",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times",[[2,"tabworthy-times",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"use12HourFormat":[4,"use-1-2-hour-format"],"timesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"calendarButtonContent":[1,"calendar-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates",[[2,"tabworthy-dates",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
+  return bootstrapLazy([["tabworthy-times-picker",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times",[[2,"tabworthy-times",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"use12HourFormat":[4,"use-1-2-hour-format"],"timesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"calendarButtonContent":[1,"calendar-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"inputShouldFormat":[4,"input-should-format"],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates",[[2,"tabworthy-dates",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/tabworthy-components.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["tabworthy-times-picker",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times",[[2,"tabworthy-times",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"use12HourFormat":[4,"use-1-2-hour-format"],"timesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"calendarButtonContent":[1,"calendar-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates",[[2,"tabworthy-dates",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
+  return bootstrapLazy([["tabworthy-times-picker",[[2,"tabworthy-times-picker",{"hours":[1026],"minutes":[1026],"use12HourFormat":[4,"use-1-2-hour-format"],"labels":[16],"labelsSrOnly":[4,"labels-sr-only"],"disabled":[4],"elementClassName":[1,"element-class-name"],"internalHours":[32],"internalMinutes":[32],"period":[32]},null,{"hours":[{"watchHours":0}],"minutes":[{"watchMinutes":0}]}]]],["tabworthy-dates-calendar_2",[[262,"tabworthy-dates-calendar",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"modalIsOpen":[4,"modal-is-open"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"inline":[4],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"showKeyboardHint":[4,"show-keyboard-hint"],"showHiddenTitle":[4,"show-hidden-title"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]},null,{"modalIsOpen":[{"watchModalIsOpen":0}],"firstDayOfWeek":[{"watchFirstDayOfWeek":0}],"locale":[{"watchLocale":0}],"range":[{"watchRange":0}],"startDate":[{"watchStartDate":0}],"value":[{"watchValue":0}]}],[257,"tabworthy-dates-modal",{"label":[1],"inline":[4],"closing":[32],"showing":[32],"open":[64],"close":[64],"getState":[64],"setTriggerElement":[64]},[[10,"click","handleClick"]]]]],["tabworthy-times",[[2,"tabworthy-times",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"use12HourFormat":[4,"use-1-2-hour-format"],"timesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"calendarButtonContent":[1,"calendar-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"inputShouldFormat":[4,"input-should-format"],"internalValue":[32],"selectedDate":[32],"selectedHours":[32],"selectedMinutes":[32],"errorState":[32],"disabledState":[32],"clearValue":[64]},null,{"value":[{"watchValue":0}],"disabled":[{"watchDisabled":0}],"hasError":[{"watchHasError":0}]}]]],["tabworthy-dates",[[2,"tabworthy-dates",{"id":[513],"value":[1025],"range":[4],"label":[1],"placeholder":[1],"locale":[1],"disabled":[4],"minDate":[1,"min-date"],"maxDate":[1,"max-date"],"startDate":[1,"start-date"],"referenceDate":[1,"reference-date"],"useStrictDateParsing":[4,"use-strict-date-parsing"],"datesLabels":[16],"datesCalendarLabels":[16],"inline":[4],"hasError":[1028,"has-error"],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"showYearStepper":[4,"show-year-stepper"],"showMonthStepper":[4,"show-month-stepper"],"showClearButton":[4,"show-clear-button"],"showTodayButton":[4,"show-today-button"],"formatInputOnAccept":[4,"input-should-format"],"showKeyboardHint":[4,"show-keyboard-hint"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"format":[1],"quickButtons":[16],"todayButtonContent":[1,"today-button-content"],"calendarButtonContent":[1,"calendar-button-content"],"showQuickButtons":[4,"show-quick-buttons"],"internalValue":[32],"errorState":[32],"disabledState":[32],"parseDate":[64]},null,{"disabled":[{"watchDisabled":0}],"value":[{"watchValue":0}]}]]]], options);
 });

package/dist/esm/tabworthy-dates.entry.js

@@ -10545,7 +10545,8 @@ const TabworthyDates = class {
         this.handleCalendarButtonClick = async () => {
             var _a, _b, _c, _d, _e;
             await customElements.whenDefined("tabworthy-dates-modal");
-            this.calendarButtonRef && await ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.setTriggerElement(this.calendarButtonRef));
+            this.calendarButtonRef &&
+                (await ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.setTriggerElement(this.calendarButtonRef)));
             if ((await ((_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.getState())) === false)
                 await ((_c = this.modalRef) === null || _c === void 0 ? void 0 : _c.open());
             else if ((await ((_d = this.modalRef) === null || _d === void 0 ? void 0 : _d.getState())) === true)
@@ -10620,8 +10621,8 @@ const TabworthyDates = class {
                         this.errorMessage = {
                             invalid: this.datesLabels.invalidDateError,
                             rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
-                            minDate: '',
-                            maxDate: '',
+                            minDate: "",
+                            maxDate: ""
                         }[parsedRange.reason];
                     }
                 }
@@ -10868,12 +10869,12 @@ const TabworthyDates = class {
         }
         // update text input (useInputValue=false so it formats from internalValue, not from input's current text)
         if (this.inputRef) {
-            this.formatInput(true, false);
+            this.formatInput(!!this.formatInputOnAccept, false);
         }
     }
     render() {
         var _a;
-        return (h(Host, { key: '387a0514db30efb043e294c44dc0c6233ab9315a' }, h("label", { key: '6cc8ef1337dc74cf0c2138457c82c4c61dcc63d1', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: 'b4429fef1d80e792e8ab0580d683b42ca924d0d8' }), h("div", { key: 'ecf6c67ac4e65b41768a593d7c5d4ee330fda3f3', class: this.getClassName("input-container") }, h("input", { key: '6eea6c4e22af4bba65d4358c9b560f2a271b0a23', disabled: this.disabledState, id: this.id ? `${this.id}-input` : undefined, type: "text", placeholder: this.placeholder, class: this.getClassName("input"), ref: (r) => (this.inputRef = r), onChange: this.handleChange, onFocus: () => this.formatInput(false), onBlur: () => this.formatInput(true, false), "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: 'f3bf0a8ece36a1abc36f3462dfe44ca951ec510f', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.datesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '2b6e45c861606661810ce4026487d90fb7bf0c5f', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
+        return (h(Host, { key: '161da7818cb74c9641e3012b6b1c32524cc4d395' }, h("label", { key: 'ae99317da0d4986f2c666e202efa98dc4f7f2574', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: '1c0690f2c16cafc1256acb5a91375ed078f302b9' }), h("div", { key: '8f869d82ee208a7de309836c3df29f857caf151f', class: this.getClassName("input-container") }, h("input", { key: '14fa0600bc8537229adf19e134583ba26e76dda1', disabled: this.disabledState, id: this.id ? `${this.id}-input` : undefined, type: "text", placeholder: this.placeholder, class: this.getClassName("input"), ref: (r) => (this.inputRef = r), onChange: this.handleChange, onFocus: () => this.formatInput(false), onBlur: () => this.formatInput(true, false), "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: 'd7f988423b9a50d982c0b8b057145c4948f7d2ef', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.datesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: 'a8601ac99e61c734fff0056f8ba4f3e3241e50c5', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
                 if (!this.pickerRef)
                     return;
                 this.pickerRef.modalIsOpen = true;
@@ -10881,13 +10882,11 @@ const TabworthyDates = class {
                 if (!this.pickerRef)
                     return;
                 this.pickerRef.modalIsOpen = false;
-            }, inline: this.inline }, h("tabworthy-dates-calendar", { key: 'b25c45f9b819509c98afafd21835c00f9188c9e0', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels
-                ? this.datesCalendarLabels
-                : undefined, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showKeyboardHint: this.showKeyboardHint, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline })), this.showQuickButtons &&
+            }, inline: this.inline }, h("tabworthy-dates-calendar", { key: 'a583448ca60f4ea1bb48ff5d33ba561ca627617c', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels ? this.datesCalendarLabels : undefined, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showKeyboardHint: this.showKeyboardHint, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline })), this.showQuickButtons &&
             ((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-            this.chronoSupportedLocale && (h("div", { key: 'ea05f20cff3cbaff23adb64992b65b0b9760d3c5', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
+            this.chronoSupportedLocale && (h("div", { key: 'f9fe7671e933099a0d95b7099ee2d18ab7eb30c5', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
             return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
-        }))), this.errorState && (h("div", { key: 'a472eceba69c53cbcadcd358672b7eca12b105bf', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+        }))), this.errorState && (h("div", { key: '632b1d3e67b6ab9b0370092b5c8222fe3bdb4d11', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/tabworthy-times.entry.js

@@ -59,6 +59,8 @@ const InclusiveTimes = class {
         this.firstDayOfWeek = 1;
         // Format for the value prop (input/output format). Defaults to ISO 8601 format.
         this.format = "YYYY-MM-DDTHH:mm:ss";
+        // If true, format input on blur/accept (like dates)
+        this.inputShouldFormat = true;
         this.selectedHours = 12;
         this.selectedMinutes = 0;
         this.errorState = this.hasError;
@@ -107,7 +109,9 @@ const InclusiveTimes = class {
             // Can be used for month change tracking
         };
         this.handleInputBlur = () => {
-            this.formatInput();
+            if (this.inputShouldFormat) {
+                this.formatInput();
+            }
         };
         this.handleInputChange = (event) => {
             const value = event.target.value;
@@ -181,7 +185,9 @@ const InclusiveTimes = class {
             this.selectDateTime.emit(formatted);
         }
         this.errorState = false;
-        this.formatInput();
+        if (this.inputShouldFormat) {
+            this.formatInput();
+        }
     }
     formatInput() {
         if (!this.internalValue)
@@ -213,7 +219,7 @@ const InclusiveTimes = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e922c649f8ed2bf03711fe99ae73bca550c9d8ef', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: '6b8c053bcb4d232c52e0b95da141e4a433f2bc16', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '1950259cf662cedae9b8f0fed6a61f095d3a4424', class: this.getClassName("input-container") }, h("input", { key: '1c6bfced55bd60706eadf6304eb7204c89bda8d6', id: `${this.id}-input`, ref: (r) => (this.inputRef = r), type: "text", class: this.getClassName("input"), placeholder: this.placeholder, disabled: this.disabledState, value: (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.toString(), onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: '60b202b017d7ffe5de182908c809a24eba4f8e56', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.timesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '83716e92fd3711c65b23f007bba209bcc60a4d7d', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
+        return (h(Host, { key: 'e9ef24f7b4e7797607f4e46c3c7da892e276160c', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: '9fbc1b57f9466e2e76dc46c6fd498e525d1cc1ee', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '2958a036e04b53761451adec9986c0305b9425af', class: this.getClassName("input-container") }, h("input", { key: 'bee806dc1c5630c3032fd07eadbb0100ccfea89b', id: `${this.id}-input`, ref: (r) => (this.inputRef = r), type: "text", class: this.getClassName("input"), placeholder: this.placeholder, disabled: this.disabledState, value: (_a = this.internalValue) === null || _a === void 0 ? void 0 : _a.toString(), onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-describedby": this.errorState ? `${this.id}-error` : undefined, "aria-invalid": this.errorState }), !this.inline && (h("button", { key: 'c8e490c2c004d2ad096848fcc83389524c767819', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (h("span", { innerHTML: this.calendarButtonContent })) : (this.timesLabels.openCalendar)))), h("tabworthy-dates-modal", { key: '1620370de6b83f1d8de49fc0c44702d2a4495c62', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
                 if (this.pickerRef) {
                     this.pickerRef.modalIsOpen = true;
                 }
@@ -221,7 +227,7 @@ const InclusiveTimes = class {
                 if (this.pickerRef) {
                     this.pickerRef.modalIsOpen = false;
                 }
-            }, inline: this.inline }, h("div", { key: '3972712165cdc3069498d5683ca7b8b25041e44d', class: this.getClassName("picker-container") }, h("tabworthy-dates-calendar", { key: 'e6472861402e4926227657fb68f57d8671452260', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline }, h("div", { key: 'e9f7b9baa9544ae651b4b6b73094a215cabcc796', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: 'b4c2f14b9311d1e3c186825785d6f64580f2896c', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: '684dce5fc46c53feea28b19eca46746d7538aa3f', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
+            }, inline: this.inline }, h("div", { key: '9521fd9f0fbdd6b1b6114fafbe6d623537fb1420', class: this.getClassName("picker-container") }, h("tabworthy-dates-calendar", { key: 'da204266d8c440961fffdbf58aa10cd1e5630357', range: this.range, locale: this.locale, onSelectDate: (event) => this.handlePickerSelection(event.detail), onChangeMonth: (event) => this.handleChangedMonths(event.detail), onChangeYear: (event) => this.handleYearChange(event.detail), labels: this.datesCalendarLabels, ref: (el) => (this.pickerRef = el), startDate: this.startDate, firstDayOfWeek: this.firstDayOfWeek, showHiddenTitle: true, disabled: this.disabledState, showMonthStepper: this.showMonthStepper, showYearStepper: this.showYearStepper, showClearButton: this.showClearButton, showTodayButton: this.showTodayButton, disableDate: this.disableDate, minDate: this.minDate, maxDate: this.maxDate, inline: this.inline }, h("div", { key: 'b82af457943cdcae6f098688f7c90bda0aeed427', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: '6800ae768ecb4796105f9d1981cc8315732a1335', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: '648df2b385853946f5b2ae5f2f453fc8a25c1069', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/tabworthy-components/p-28acdfa7.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as i,H as e,g as h}from"./p-BusoZVTR.js";import{h as a}from"./p-Mki5YqAR.js";import{g as r,r as o}from"./p-BVHu5CWV.js";const n={selected:"selected",openCalendar:"Open date and time picker",calendar:"date and time picker",invalidDateError:"We could not find a matching date",minDateError:"Please fill in a date after ",maxDateError:"Please fill in a date before ",rangeOutOfBoundsError:"Please enter a valid range of dates",disabledDateError:"Please choose an available date",to:"to",startDate:"Start date",timeLabel:"Time"},d=class{constructor(i){t(this,i),this.selectDateTime=s(this,"selectDateTime"),this.changeYear=s(this,"changeYear"),this.componentReady=s(this,"componentReady"),this.range=!1,this.label="Choose a date and time",this.placeholder="",this.locale=(null===navigator||void 0===navigator?void 0:navigator.language)||"en-US",this.disabled=!1,this.startDate=r(new Date),this.referenceDate=r(new Date),this.use12HourFormat=!0,this.timesLabels=n,this.inline=!1,this.hasError=!1,this.showYearStepper=!1,this.showMonthStepper=!0,this.showClearButton=!0,this.showTodayButton=!0,this.disableDate=()=>!1,this.elementClassName="tabworthy-times",this.firstDayOfWeek=1,this.format="YYYY-MM-DDTHH:mm:ss",this.inputShouldFormat=!0,this.selectedHours=12,this.selectedMinutes=0,this.errorState=this.hasError,this.disabledState=this.disabled,this.errorMessage="",this.handlePickerSelection=async t=>{const s=t.split(",");if(this.range&&2===s.length){const t=o(new Date(s[0])),i=o(new Date(s[1]));this.updateValue([t,i]),this.pickerRef&&(this.pickerRef.value=[t,i])}else{const t=o(new Date(s[0]));this.updateValue(t),this.pickerRef&&(this.pickerRef.value=t)}},this.handleTimeChange=t=>{this.selectedHours=t.detail.hours,this.selectedMinutes=t.detail.minutes,this.selectedDate&&this.updateValue(this.selectedDate)},this.handleCalendarButtonClick=async()=>{this.modalRef&&(await this.modalRef.setTriggerElement(this.calendarButtonRef),await this.modalRef.open())},this.handleYearChange=t=>{this.changeYear&&this.changeYear.emit(t)},this.handleChangedMonths=()=>{},this.handleInputBlur=()=>{this.inputShouldFormat&&this.formatInput()},this.handleInputChange=t=>{const s=a(t.target.value);s.isValid()&&(this.selectedHours=s.hours(),this.selectedMinutes=s.minutes(),this.updateValue(s.toDate()))}}watchValue(t){this.syncFromValueProp()}watchDisabled(t){this.disabledState=t}watchHasError(t){this.errorState=t}componentDidLoad(){this.syncFromValueProp(),this.componentReady.emit(),this.id||console.error('tabworthy-times: The "id" prop is required for accessibility')}syncFromValueProp(){if(this.value){this.internalValue=this.value;const t=Array.isArray(this.value)?this.value[0]:this.value;if(t){const s=a(t,this.format);s.isValid()&&(this.selectedDate=s.toDate(),this.selectedHours=s.hours(),this.selectedMinutes=s.minutes())}}else this.internalValue=null}updateValue(t){if(Array.isArray(t)){const s=t.map((t=>{const s=a(t);return s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0),s.format(this.format)}));this.internalValue=s,this.value=s,this.selectDateTime.emit(s)}else{const s=a(t);s.hours(this.selectedHours),s.minutes(this.selectedMinutes),s.seconds(0);const i=s.format(this.format);this.internalValue=i,this.value=i,this.selectedDate=t,this.selectDateTime.emit(i)}this.errorState=!1,this.inputShouldFormat&&this.formatInput()}formatInput(){if(this.internalValue)if(Array.isArray(this.internalValue)){const t=this.internalValue.map((t=>a(t,this.format).format("lll"))).join(` ${this.timesLabels.to} `);this.inputRef.value=t}else this.inputRef.value=a(this.internalValue,this.format).format("lll")}getClassName(t){return`${this.elementClassName}__${t}`}async clearValue(){this.internalValue=null,this.value=void 0,this.selectedDate=void 0,this.inputRef.value="",this.pickerRef&&(this.pickerRef.value=null),this.selectDateTime.emit(void 0)}render(){var t;return i(e,{key:"e9ef24f7b4e7797607f4e46c3c7da892e276160c",class:this.elementClassName,"has-error":this.errorState,disabled:this.disabledState},i("label",{key:"9fbc1b57f9466e2e76dc46c6fd498e525d1cc1ee",htmlFor:`${this.id}-input`,class:this.getClassName("label")},this.label),i("div",{key:"2958a036e04b53761451adec9986c0305b9425af",class:this.getClassName("input-container")},i("input",{key:"bee806dc1c5630c3032fd07eadbb0100ccfea89b",id:`${this.id}-input`,ref:t=>this.inputRef=t,type:"text",class:this.getClassName("input"),placeholder:this.placeholder,disabled:this.disabledState,value:null===(t=this.internalValue)||void 0===t?void 0:t.toString(),onBlur:this.handleInputBlur,onChange:this.handleInputChange,"aria-describedby":this.errorState?`${this.id}-error`:void 0,"aria-invalid":this.errorState}),!this.inline&&i("button",{key:"c8e490c2c004d2ad096848fcc83389524c767819",type:"button",ref:t=>this.calendarButtonRef=t,onClick:this.handleCalendarButtonClick,class:this.getClassName("calendar-button"),disabled:this.disabledState},this.calendarButtonContent?i("span",{innerHTML:this.calendarButtonContent}):this.timesLabels.openCalendar)),i("tabworthy-dates-modal",{key:"1620370de6b83f1d8de49fc0c44702d2a4495c62",label:this.timesLabels.calendar,ref:t=>this.modalRef=t,onOpened:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!0)},onClosed:()=>{this.pickerRef&&(this.pickerRef.modalIsOpen=!1)},inline:this.inline},i("div",{key:"9521fd9f0fbdd6b1b6114fafbe6d623537fb1420",class:this.getClassName("picker-container")},i("tabworthy-dates-calendar",{key:"da204266d8c440961fffdbf58aa10cd1e5630357",range:this.range,locale:this.locale,onSelectDate:t=>this.handlePickerSelection(t.detail),onChangeMonth:t=>this.handleChangedMonths(t.detail),onChangeYear:t=>this.handleYearChange(t.detail),labels:this.datesCalendarLabels,ref:t=>this.pickerRef=t,startDate:this.startDate,firstDayOfWeek:this.firstDayOfWeek,showHiddenTitle:!0,disabled:this.disabledState,showMonthStepper:this.showMonthStepper,showYearStepper:this.showYearStepper,showClearButton:this.showClearButton,showTodayButton:this.showTodayButton,disableDate:this.disableDate,minDate:this.minDate,maxDate:this.maxDate,inline:this.inline},i("div",{key:"b82af457943cdcae6f098688f7c90bda0aeed427",slot:"after-calendar",class:this.getClassName("time-section")},i("tabworthy-times-picker",{key:"6800ae768ecb4796105f9d1981cc8315732a1335",hours:this.selectedHours,minutes:this.selectedMinutes,use12HourFormat:this.use12HourFormat,disabled:this.disabledState,onTimeChanged:this.handleTimeChange}))))),this.errorState&&i("div",{key:"648df2b385853946f5b2ae5f2f453fc8a25c1069",class:this.getClassName("input-error"),id:this.id?`${this.id}-error`:void 0,role:"status"},this.errorMessage))}get el(){return h(this)}static get watchers(){return{value:[{watchValue:0}],disabled:[{watchDisabled:0}],hasError:[{watchHasError:0}]}}};export{d as tabworthy_times}