@tabworthy/components 0.2.0

package/dist/components/tabworthy-times-picker2.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as h,transformTag as n}from"@stencil/core/internal/client";const a={hours:"Hours",minutes:"Minutes",am:"AM",pm:"PM",timePicker:"Time picker",incrementHours:"Increment hours",decrementHours:"Decrement hours",incrementMinutes:"Increment minutes",decrementMinutes:"Decrement minutes"},o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.timeChanged=s(this,"timeChanged",7),this.hours=12,this.minutes=0,this.use12HourFormat=!1,this.labels=a,this.labelsSrOnly=!0,this.disabled=!1,this.elementClassName="tabworthy-times-picker",this.internalHours=this.hours,this.internalMinutes=this.minutes,this.period=this.hours>=12?"PM":"AM",this.handleHourChange=t=>{const e=parseInt(t.target.value,10);this.internalHours=this.use12HourFormat?"AM"===this.period?12===e?0:e:12===e?12:e+12:e,this.emitTimeChange()},this.handleMinuteChange=t=>{this.internalMinutes=parseInt(t.target.value,10),this.emitTimeChange()},this.handlePeriodChange=t=>{if(this.period===t||!this.use12HourFormat)return;this.period=t;const e=this.getDisplayHours();this.internalHours="AM"===t?12===e?0:e:12===e?12:e+12,this.emitTimeChange()},this.handleHourIncrement=()=>{if(this.use12HourFormat){const t=this.getDisplayHours(),e=12===t?1:t+1;this.internalHours="AM"===this.period?12===e?0:e:12===e?12:e+12}else this.internalHours=(this.internalHours+1)%24;this.emitTimeChange()},this.handleHourDecrement=()=>{if(this.use12HourFormat){const t=this.getDisplayHours(),e=1===t?12:t-1;this.internalHours="AM"===this.period?12===e?0:e:12===e?12:e+12}else this.internalHours=0===this.internalHours?23:this.internalHours-1;this.emitTimeChange()},this.handleMinuteIncrement=()=>{this.internalMinutes=(this.internalMinutes+1)%60,this.emitTimeChange()},this.handleMinuteDecrement=()=>{this.internalMinutes=0===this.internalMinutes?59:this.internalMinutes-1,this.emitTimeChange()}}watchHours(t){this.internalHours=t,this.period=t>=12?"PM":"AM"}watchMinutes(t){this.internalMinutes=t}componentWillLoad(){this.internalHours=this.hours,this.internalMinutes=this.minutes,this.period=this.hours>=12?"PM":"AM"}getDisplayHours(){return this.use12HourFormat?0===this.internalHours?12:this.internalHours>12?this.internalHours-12:this.internalHours:this.internalHours}get24HourValue(){if(!this.use12HourFormat)return this.internalHours;const t=this.getDisplayHours();return"AM"===this.period?12===t?0:t:12===t?12:t+12}emitTimeChange(){this.timeChanged.emit({hours:this.get24HourValue(),minutes:this.internalMinutes,period:this.use12HourFormat?this.period:void 0})}padZero(t){return t.toString().padStart(2,"0")}render(){const t=this.getDisplayHours(),e=this.use12HourFormat?12:23,s=this.use12HourFormat?1:0;return i(h,{key:"826752ac3b056591e50c55198f01b232e0d914e7",class:this.elementClassName,"aria-label":this.labels.timePicker},i("div",{key:"5e7179bcf1e2e9087f7fb8f62366af4b3432cf9b",class:`${this.elementClassName}__container`},i("div",{key:"f589fc8f0672b1446e0e3b9e3d2d1a134355975c",class:`${this.elementClassName}__field`},i("label",{key:"a35e5e1e6e1be6166d2908b200904c4ebf266170",htmlFor:`${this.elementClassName}-hours`,class:{[`${this.elementClassName}__label`]:!0,[`${this.elementClassName}__label--sr-only`]:this.labelsSrOnly}},this.labels.hours),i("div",{key:"7c2340bc7b58f47ccb5cf555460665fe99d2bb14",class:`${this.elementClassName}__control`},i("button",{key:"dd0339ee230032b0ae681b19e7ccad362454e70d",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--increment`,onClick:this.handleHourIncrement,disabled:this.disabled,"aria-label":this.labels.incrementHours},i("svg",{key:"f976e2e85f45795317a8e6f8b97f56d787075b30",fill:"none",height:"16","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"16"},i("polyline",{key:"d92fe17241918aa191b3bf8c1cf67d0783d6904c",points:"18 15 12 9 6 15"}))),i("input",{key:"12c6de6d83c13e437f1ec0f6e6a552c9806eee7e",id:`${this.elementClassName}-hours`,type:"number",class:`${this.elementClassName}__input`,value:this.padZero(t),min:s,max:e,onInput:this.handleHourChange,disabled:this.disabled,"aria-label":this.labels.hours}),i("button",{key:"9a3fe68583a1a92c1cb9ce82d8c79d435cc364c6",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--decrement`,onClick:this.handleHourDecrement,disabled:this.disabled,"aria-label":this.labels.decrementHours},i("svg",{key:"c52dd2da808714a53da185d830609a83165d0435",fill:"none",height:"16","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"16"},i("polyline",{key:"759299e487f09e8047643aed7bf5c27687ba0114",points:"6 9 12 15 18 9"}))))),i("div",{key:"9839abd75a1d2fbbfd085b5090586e5b90e43582",class:`${this.elementClassName}__separator`},":"),i("div",{key:"40a7656ee0e1fdde1287fad6200b415361e9d8a7",class:`${this.elementClassName}__field`},i("label",{key:"12924e2ce017f31969cdd17efc61c5bc2c7299e1",htmlFor:`${this.elementClassName}-minutes`,class:{[`${this.elementClassName}__label`]:!0,[`${this.elementClassName}__label--sr-only`]:this.labelsSrOnly}},this.labels.minutes),i("div",{key:"71ce2e345a98345b591e92803ad25fe10ae52ac1",class:`${this.elementClassName}__control`},i("button",{key:"ec85968d4d7b43fb348cbc9577f6329bc510b88b",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--increment`,onClick:this.handleMinuteIncrement,disabled:this.disabled,"aria-label":this.labels.incrementMinutes},i("svg",{key:"459a04638058154613fc642ac6ec3c884b2eb3ed",fill:"none",height:"16","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"16"},i("polyline",{key:"88747079b0a8cdc6f2d9bea21ec5b74dd334c889",points:"18 15 12 9 6 15"}))),i("input",{key:"ccd14478435689bad16be5b3038c37fff7e55506",id:`${this.elementClassName}-minutes`,type:"number",class:`${this.elementClassName}__input`,value:this.padZero(this.internalMinutes),min:0,max:59,onInput:this.handleMinuteChange,disabled:this.disabled,"aria-label":this.labels.minutes}),i("button",{key:"b645e0a9c10cf35e9b6ebfe6660f9e4770edabe7",type:"button",class:`${this.elementClassName}__button ${this.elementClassName}__button--decrement`,onClick:this.handleMinuteDecrement,disabled:this.disabled,"aria-label":this.labels.decrementMinutes},i("svg",{key:"e1fbeb018b7d3898af319f227d2f3257a281b141",fill:"none",height:"16","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor",viewBox:"0 0 24 24",width:"16"},i("polyline",{key:"9fa1f35020d93eea906247c0eca79c6978e75c81",points:"6 9 12 15 18 9"}))))),this.use12HourFormat&&i("div",{key:"80f5d6355c5627d98e25a3d945f3224d217d350b",class:`${this.elementClassName}__period`},i("button",{key:"7fdbfe17b0b1d50a707aeb927847626d2e4b277a",type:"button",class:{[`${this.elementClassName}__period-button`]:!0,[`${this.elementClassName}__period-button--active`]:"AM"===this.period},onClick:()=>this.handlePeriodChange("AM"),disabled:this.disabled,"aria-label":this.labels.am,"aria-pressed":"AM"===this.period},this.labels.am),i("button",{key:"5817fb8c5a5901077320472b9535700d3e980c3c",type:"button",class:{[`${this.elementClassName}__period-button`]:!0,[`${this.elementClassName}__period-button--active`]:"PM"===this.period},onClick:()=>this.handlePeriodChange("PM"),disabled:this.disabled,"aria-label":this.labels.pm,"aria-pressed":"PM"===this.period},this.labels.pm))))}get el(){return this}static get watchers(){return{hours:[{watchHours:0}],minutes:[{watchMinutes:0}]}}},[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]},void 0,{hours:[{watchHours:0}],minutes:[{watchMinutes:0}]}]);function c(){"undefined"!=typeof customElements&&["tabworthy-times-picker"].forEach((t=>{"tabworthy-times-picker"===t&&(customElements.get(n(t))||customElements.define(n(t),o))}))}export{o as I,c as d}

package/dist/components/tabworthy-times.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface TabworthyTimes extends Components.TabworthyTimes, HTMLElement {}
+export const TabworthyTimes: {
+    prototype: TabworthyTimes;
+    new (): TabworthyTimes;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/tabworthy-times.js

@@ -0,0 +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}

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };