@tabworthy/components 0.3.1 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tabworthy-components.cjs.js +1 -1
- package/dist/cjs/tabworthy-dates.cjs.entry.js +104 -95
- package/dist/cjs/tabworthy-times.cjs.entry.js +10 -4
- package/dist/collection/components/tabworthy-dates/tabworthy-dates.js +104 -95
- package/dist/collection/components/tabworthy-times/tabworthy-times.js +30 -4
- package/dist/components/tabworthy-dates.js +1 -1
- package/dist/components/tabworthy-times.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tabworthy-components.js +1 -1
- package/dist/esm/tabworthy-dates.entry.js +104 -95
- package/dist/esm/tabworthy-times.entry.js +10 -4
- package/dist/tabworthy-components/p-28acdfa7.entry.js +1 -0
- package/dist/tabworthy-components/{p-77bd1bd4.entry.js → p-46b71504.entry.js} +1 -1
- package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
- package/dist/themes/dark.css +1 -1
- package/dist/themes/light.css +1 -1
- package/dist/types/components/tabworthy-dates/tabworthy-dates.d.ts +2 -0
- package/dist/types/components/tabworthy-times/tabworthy-times.d.ts +1 -0
- package/dist/types/components.d.ts +9 -0
- package/package.json +1 -1
- package/dist/tabworthy-components/p-170bc6ca.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as
|
|
1
|
+
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
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
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);
|
|
8
|
+
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);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
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);
|
|
20
|
+
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);
|
|
21
21
|
});
|
|
@@ -10545,7 +10545,8 @@ const TabworthyDates = class {
|
|
|
10545
10545
|
this.handleCalendarButtonClick = async () => {
|
|
10546
10546
|
var _a, _b, _c, _d, _e;
|
|
10547
10547
|
await customElements.whenDefined("tabworthy-dates-modal");
|
|
10548
|
-
this.calendarButtonRef &&
|
|
10548
|
+
this.calendarButtonRef &&
|
|
10549
|
+
(await ((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.setTriggerElement(this.calendarButtonRef)));
|
|
10549
10550
|
if ((await ((_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.getState())) === false)
|
|
10550
10551
|
await ((_c = this.modalRef) === null || _c === void 0 ? void 0 : _c.open());
|
|
10551
10552
|
else if ((await ((_d = this.modalRef) === null || _d === void 0 ? void 0 : _d.getState())) === true)
|
|
@@ -10591,99 +10592,106 @@ const TabworthyDates = class {
|
|
|
10591
10592
|
var _a;
|
|
10592
10593
|
(_a = this.changeYear) === null || _a === void 0 ? void 0 : _a.emit(yearDetail);
|
|
10593
10594
|
};
|
|
10594
|
-
this.
|
|
10595
|
-
|
|
10596
|
-
|
|
10597
|
-
|
|
10598
|
-
|
|
10599
|
-
|
|
10600
|
-
this.pickerRef.value = null;
|
|
10601
|
-
}
|
|
10602
|
-
return this.selectDate.emit(this.internalValue);
|
|
10595
|
+
this.handleRangeChange = async (value) => {
|
|
10596
|
+
this.errorState = false;
|
|
10597
|
+
if (value.length === 0) {
|
|
10598
|
+
this.internalValue = "";
|
|
10599
|
+
if (this.pickerRef) {
|
|
10600
|
+
this.pickerRef.value = null;
|
|
10603
10601
|
}
|
|
10604
|
-
|
|
10605
|
-
|
|
10606
|
-
|
|
10607
|
-
|
|
10608
|
-
|
|
10609
|
-
|
|
10610
|
-
|
|
10611
|
-
|
|
10612
|
-
|
|
10613
|
-
|
|
10614
|
-
|
|
10615
|
-
|
|
10616
|
-
|
|
10617
|
-
|
|
10602
|
+
return this.selectDate.emit(this.internalValue);
|
|
10603
|
+
}
|
|
10604
|
+
const parsedRange = await chronoParseRange(value, {
|
|
10605
|
+
locale: this.locale.slice(0, 2),
|
|
10606
|
+
minDate: this.minDate,
|
|
10607
|
+
maxDate: this.maxDate,
|
|
10608
|
+
referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
|
|
10609
|
+
});
|
|
10610
|
+
const newValue = [];
|
|
10611
|
+
if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.start instanceof Date)
|
|
10612
|
+
newValue.push(parsedRange.value.start);
|
|
10613
|
+
if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.end instanceof Date)
|
|
10614
|
+
newValue.push(parsedRange.value.end);
|
|
10615
|
+
this.updateValue(newValue);
|
|
10616
|
+
this.formatInput(true, false);
|
|
10617
|
+
if (newValue.length === 0) {
|
|
10618
|
+
this.errorState = true;
|
|
10619
|
+
if (!!(parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.reason)) {
|
|
10620
|
+
this.errorMessage = {
|
|
10621
|
+
invalid: this.datesLabels.invalidDateError,
|
|
10622
|
+
rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
|
|
10623
|
+
minDate: "",
|
|
10624
|
+
maxDate: ""
|
|
10625
|
+
}[parsedRange.reason];
|
|
10626
|
+
}
|
|
10627
|
+
}
|
|
10628
|
+
};
|
|
10629
|
+
this.handleSingleDateChange = async (value) => {
|
|
10630
|
+
this.errorState = false;
|
|
10631
|
+
if (value.length === 0) {
|
|
10632
|
+
this.internalValue = "";
|
|
10633
|
+
if (this.pickerRef) {
|
|
10634
|
+
this.pickerRef.value = null;
|
|
10635
|
+
}
|
|
10636
|
+
return this.selectDate.emit(this.internalValue);
|
|
10637
|
+
}
|
|
10638
|
+
const parsedDate = await chronoParseDate(value, {
|
|
10639
|
+
locale: this.locale.slice(0, 2),
|
|
10640
|
+
minDate: this.minDate,
|
|
10641
|
+
maxDate: this.maxDate,
|
|
10642
|
+
referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
|
|
10643
|
+
});
|
|
10644
|
+
if (parsedDate && parsedDate.value instanceof Date) {
|
|
10645
|
+
if (this.disableDate(parsedDate.value)) {
|
|
10618
10646
|
this.errorState = true;
|
|
10619
|
-
|
|
10620
|
-
|
|
10621
|
-
|
|
10622
|
-
|
|
10623
|
-
|
|
10624
|
-
maxDate: '',
|
|
10625
|
-
}[parsedRange.reason];
|
|
10626
|
-
}
|
|
10647
|
+
this.errorMessage = this.datesLabels.disabledDateError;
|
|
10648
|
+
}
|
|
10649
|
+
else {
|
|
10650
|
+
this.updateValue(parsedDate.value);
|
|
10651
|
+
this.formatInput(true, false);
|
|
10627
10652
|
}
|
|
10628
10653
|
}
|
|
10629
|
-
else {
|
|
10630
|
-
this.errorState =
|
|
10631
|
-
|
|
10632
|
-
|
|
10633
|
-
|
|
10634
|
-
|
|
10635
|
-
|
|
10636
|
-
|
|
10654
|
+
else if (parsedDate) {
|
|
10655
|
+
this.errorState = true;
|
|
10656
|
+
this.internalValue = null;
|
|
10657
|
+
let maxDate = undefined;
|
|
10658
|
+
let minDate = undefined;
|
|
10659
|
+
if (this.maxDate) {
|
|
10660
|
+
maxDate = this.maxDate
|
|
10661
|
+
? removeTimezoneOffset(new Date(this.maxDate))
|
|
10662
|
+
: undefined;
|
|
10663
|
+
maxDate === null || maxDate === void 0 ? void 0 : maxDate.setDate(maxDate.getDate() + 1);
|
|
10637
10664
|
}
|
|
10638
|
-
|
|
10639
|
-
|
|
10640
|
-
|
|
10641
|
-
|
|
10642
|
-
|
|
10643
|
-
});
|
|
10644
|
-
if (parsedDate && parsedDate.value instanceof Date) {
|
|
10645
|
-
if (this.disableDate(parsedDate.value)) {
|
|
10646
|
-
this.errorState = true;
|
|
10647
|
-
this.errorMessage = this.datesLabels.disabledDateError;
|
|
10648
|
-
}
|
|
10649
|
-
else {
|
|
10650
|
-
this.updateValue(parsedDate.value);
|
|
10651
|
-
this.formatInput(true, false);
|
|
10652
|
-
}
|
|
10665
|
+
if (this.minDate) {
|
|
10666
|
+
minDate = this.minDate
|
|
10667
|
+
? removeTimezoneOffset(new Date(this.minDate))
|
|
10668
|
+
: undefined;
|
|
10669
|
+
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
10653
10670
|
}
|
|
10654
|
-
|
|
10655
|
-
this.
|
|
10656
|
-
this.
|
|
10657
|
-
|
|
10658
|
-
|
|
10659
|
-
|
|
10660
|
-
|
|
10661
|
-
|
|
10662
|
-
|
|
10663
|
-
|
|
10664
|
-
|
|
10665
|
-
|
|
10666
|
-
minDate = this.minDate
|
|
10667
|
-
? removeTimezoneOffset(new Date(this.minDate))
|
|
10668
|
-
: undefined;
|
|
10669
|
-
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
10670
|
-
}
|
|
10671
|
-
if (!!parsedDate.reason) {
|
|
10672
|
-
this.errorMessage = parsedDate.reason;
|
|
10673
|
-
this.errorMessage = {
|
|
10674
|
-
// TODO: Add locale date formatting to these messages
|
|
10675
|
-
minDate: minDate
|
|
10676
|
-
? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
|
|
10677
|
-
: "",
|
|
10678
|
-
maxDate: maxDate
|
|
10679
|
-
? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
|
|
10680
|
-
: "",
|
|
10681
|
-
invalid: this.datesLabels.invalidDateError
|
|
10682
|
-
}[parsedDate.reason];
|
|
10683
|
-
}
|
|
10671
|
+
if (!!parsedDate.reason) {
|
|
10672
|
+
this.errorMessage = parsedDate.reason;
|
|
10673
|
+
this.errorMessage = {
|
|
10674
|
+
// TODO: Add locale date formatting to these messages
|
|
10675
|
+
minDate: minDate
|
|
10676
|
+
? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
|
|
10677
|
+
: "",
|
|
10678
|
+
maxDate: maxDate
|
|
10679
|
+
? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
|
|
10680
|
+
: "",
|
|
10681
|
+
invalid: this.datesLabels.invalidDateError
|
|
10682
|
+
}[parsedDate.reason];
|
|
10684
10683
|
}
|
|
10685
10684
|
}
|
|
10686
10685
|
};
|
|
10686
|
+
this.handleChange = async (event) => {
|
|
10687
|
+
const value = event.target.value;
|
|
10688
|
+
if (this.range) {
|
|
10689
|
+
await this.handleRangeChange(value);
|
|
10690
|
+
}
|
|
10691
|
+
else {
|
|
10692
|
+
await this.handleSingleDateChange(value);
|
|
10693
|
+
}
|
|
10694
|
+
};
|
|
10687
10695
|
}
|
|
10688
10696
|
componentDidLoad() {
|
|
10689
10697
|
this.syncFromValueProp();
|
|
@@ -10788,7 +10796,8 @@ const TabworthyDates = class {
|
|
|
10788
10796
|
if (this.isRangeValue(newValue)) {
|
|
10789
10797
|
if (newValue.length === 2)
|
|
10790
10798
|
(_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
10791
|
-
|
|
10799
|
+
// Convert ISO dates to specified format
|
|
10800
|
+
this.internalValue = newValue.map((date) => hooks(date).format(this.format));
|
|
10792
10801
|
this.errorState = false;
|
|
10793
10802
|
if (document.activeElement !== this.inputRef) {
|
|
10794
10803
|
this.formatInput(true, false);
|
|
@@ -10797,8 +10806,10 @@ const TabworthyDates = class {
|
|
|
10797
10806
|
}
|
|
10798
10807
|
else {
|
|
10799
10808
|
(_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.close();
|
|
10800
|
-
|
|
10801
|
-
|
|
10809
|
+
// Convert ISO date to specified format
|
|
10810
|
+
const formattedDate = hooks(newValue).format(this.format);
|
|
10811
|
+
this.inputRef.value = formattedDate;
|
|
10812
|
+
this.internalValue = formattedDate;
|
|
10802
10813
|
this.errorState = false;
|
|
10803
10814
|
if (document.activeElement !== this.inputRef) {
|
|
10804
10815
|
this.formatInput(true, false);
|
|
@@ -10868,12 +10879,12 @@ const TabworthyDates = class {
|
|
|
10868
10879
|
}
|
|
10869
10880
|
// update text input (useInputValue=false so it formats from internalValue, not from input's current text)
|
|
10870
10881
|
if (this.inputRef) {
|
|
10871
|
-
this.formatInput(
|
|
10882
|
+
this.formatInput(!!this.formatInputOnAccept, false);
|
|
10872
10883
|
}
|
|
10873
10884
|
}
|
|
10874
10885
|
render() {
|
|
10875
10886
|
var _a;
|
|
10876
|
-
return (h(Host, { key: '
|
|
10887
|
+
return (h(Host, { key: 'd319da990a03fea708c0ab347aec215baae3cdf9' }, h("label", { key: '5a050660fa3a264b67c1744d802759c90b973337', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: 'ecd9e1bffa8a30f7f4eabbc8a7e51a6ee9fc22ca' }), h("div", { key: '6507ab0f2980e66e72e78b90c00ff43c3ad771ef', class: this.getClassName("input-container") }, h("input", { key: 'f849383904aa92c34008c0c702b8eec19276cc81', 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: '610862237f6f6bbd6690952b050ef684ed00da94', 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: 'b3f242501f41e78aa6772d451c4ffd8123cf4228', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
|
|
10877
10888
|
if (!this.pickerRef)
|
|
10878
10889
|
return;
|
|
10879
10890
|
this.pickerRef.modalIsOpen = true;
|
|
@@ -10881,13 +10892,11 @@ const TabworthyDates = class {
|
|
|
10881
10892
|
if (!this.pickerRef)
|
|
10882
10893
|
return;
|
|
10883
10894
|
this.pickerRef.modalIsOpen = false;
|
|
10884
|
-
}, inline: this.inline }, h("tabworthy-dates-calendar", { key: '
|
|
10885
|
-
? this.datesCalendarLabels
|
|
10886
|
-
: 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 &&
|
|
10895
|
+
}, inline: this.inline }, h("tabworthy-dates-calendar", { key: '3ea03076e55d69fae6f9a02f0b32b21322afcd78', 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 &&
|
|
10887
10896
|
((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
10888
|
-
this.chronoSupportedLocale && (h("div", { key: '
|
|
10897
|
+
this.chronoSupportedLocale && (h("div", { key: '0e0e718a43bbe2f2af69af45af01f8f75f4fe362', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
|
|
10889
10898
|
return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
|
|
10890
|
-
}))), this.errorState && (h("div", { key: '
|
|
10899
|
+
}))), this.errorState && (h("div", { key: 'b51d6a07a017bdb7af09098e848c7184944a4631', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
10891
10900
|
}
|
|
10892
10901
|
get el() { return getElement(this); }
|
|
10893
10902
|
static get watchers() { return {
|
|
@@ -59,6 +59,8 @@ const InclusiveTimes = class {
|
|
|
59
59
|
this.firstDayOfWeek = 1;
|
|
60
60
|
// Format for the value prop (input/output format). Defaults to ISO 8601 format.
|
|
61
61
|
this.format = "YYYY-MM-DDTHH:mm:ss";
|
|
62
|
+
// If true, format input on blur/accept (like dates)
|
|
63
|
+
this.inputShouldFormat = true;
|
|
62
64
|
this.selectedHours = 12;
|
|
63
65
|
this.selectedMinutes = 0;
|
|
64
66
|
this.errorState = this.hasError;
|
|
@@ -107,7 +109,9 @@ const InclusiveTimes = class {
|
|
|
107
109
|
// Can be used for month change tracking
|
|
108
110
|
};
|
|
109
111
|
this.handleInputBlur = () => {
|
|
110
|
-
this.
|
|
112
|
+
if (this.inputShouldFormat) {
|
|
113
|
+
this.formatInput();
|
|
114
|
+
}
|
|
111
115
|
};
|
|
112
116
|
this.handleInputChange = (event) => {
|
|
113
117
|
const value = event.target.value;
|
|
@@ -181,7 +185,9 @@ const InclusiveTimes = class {
|
|
|
181
185
|
this.selectDateTime.emit(formatted);
|
|
182
186
|
}
|
|
183
187
|
this.errorState = false;
|
|
184
|
-
this.
|
|
188
|
+
if (this.inputShouldFormat) {
|
|
189
|
+
this.formatInput();
|
|
190
|
+
}
|
|
185
191
|
}
|
|
186
192
|
formatInput() {
|
|
187
193
|
if (!this.internalValue)
|
|
@@ -213,7 +219,7 @@ const InclusiveTimes = class {
|
|
|
213
219
|
}
|
|
214
220
|
render() {
|
|
215
221
|
var _a;
|
|
216
|
-
return (h(Host, { key: '
|
|
222
|
+
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: () => {
|
|
217
223
|
if (this.pickerRef) {
|
|
218
224
|
this.pickerRef.modalIsOpen = true;
|
|
219
225
|
}
|
|
@@ -221,7 +227,7 @@ const InclusiveTimes = class {
|
|
|
221
227
|
if (this.pickerRef) {
|
|
222
228
|
this.pickerRef.modalIsOpen = false;
|
|
223
229
|
}
|
|
224
|
-
}, inline: this.inline }, h("div", { key: '
|
|
230
|
+
}, 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))));
|
|
225
231
|
}
|
|
226
232
|
get el() { return getElement(this); }
|
|
227
233
|
static get watchers() { return {
|
|
@@ -0,0 +1 @@
|
|
|
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}
|