@tabworthy/components 0.3.2 → 0.4.0
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-calendar_2.cjs.entry.js +21 -13
- package/dist/cjs/tabworthy-dates.cjs.entry.js +114 -96
- package/dist/cjs/tabworthy-times-picker.cjs.entry.js +8 -6
- package/dist/cjs/tabworthy-times.cjs.entry.js +10 -4
- package/dist/collection/components/tabworthy-dates/tabworthy-dates.js +115 -99
- package/dist/collection/components/tabworthy-dates-calendar/tabworthy-dates-calendar.js +20 -12
- package/dist/collection/components/tabworthy-modal/tabworthy-dates-modal.js +1 -1
- package/dist/collection/components/tabworthy-times/tabworthy-times.js +14 -8
- package/dist/collection/components/tabworthy-times-picker/tabworthy-times-picker.js +8 -6
- package/dist/components/tabworthy-dates-calendar2.js +1 -1
- package/dist/components/tabworthy-dates-modal2.js +1 -1
- package/dist/components/tabworthy-dates.js +1 -1
- package/dist/components/tabworthy-times-picker2.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-calendar_2.entry.js +21 -13
- package/dist/esm/tabworthy-dates.entry.js +114 -96
- package/dist/esm/tabworthy-times-picker.entry.js +8 -6
- package/dist/esm/tabworthy-times.entry.js +10 -4
- package/dist/shared/utils/chrono-parser/chrono-parser.js +3 -1
- package/dist/tabworthy-components/{p-b4c87db8.entry.js → p-1072baac.entry.js} +1 -1
- package/dist/tabworthy-components/{p-3ce9a767.entry.js → p-841f3e8f.entry.js} +1 -1
- package/dist/tabworthy-components/p-9aa97b54.entry.js +1 -0
- package/dist/tabworthy-components/{p-ebbb4c46.entry.js → p-cedac657.entry.js} +1 -1
- package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
- package/dist/types/components/tabworthy-dates/tabworthy-dates.d.ts +4 -1
- package/dist/types/components/tabworthy-times/tabworthy-times.d.ts +2 -1
- package/dist/types/components.d.ts +16 -12
- package/package.json +1 -1
- package/dist/tabworthy-components/p-28acdfa7.entry.js +0 -1
|
@@ -90,7 +90,8 @@ const InclusiveTimesPicker = class {
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
else {
|
|
93
|
-
this.internalHours =
|
|
93
|
+
this.internalHours =
|
|
94
|
+
this.internalHours === 0 ? 23 : this.internalHours - 1;
|
|
94
95
|
}
|
|
95
96
|
this.emitTimeChange();
|
|
96
97
|
};
|
|
@@ -99,7 +100,8 @@ const InclusiveTimesPicker = class {
|
|
|
99
100
|
this.emitTimeChange();
|
|
100
101
|
};
|
|
101
102
|
this.handleMinuteDecrement = () => {
|
|
102
|
-
this.internalMinutes =
|
|
103
|
+
this.internalMinutes =
|
|
104
|
+
this.internalMinutes === 0 ? 59 : this.internalMinutes - 1;
|
|
103
105
|
this.emitTimeChange();
|
|
104
106
|
};
|
|
105
107
|
}
|
|
@@ -151,16 +153,16 @@ const InclusiveTimesPicker = class {
|
|
|
151
153
|
const displayHours = this.getDisplayHours();
|
|
152
154
|
const maxHours = this.use12HourFormat ? 12 : 23;
|
|
153
155
|
const minHours = this.use12HourFormat ? 1 : 0;
|
|
154
|
-
return (h(Host, { key: '
|
|
156
|
+
return (h(Host, { key: '22eb745a93c68e4e4f78c11d2941681897aa73ef', class: this.elementClassName, "aria-label": this.labels.timePicker }, h("div", { key: 'ccb05b5d5793442b63aa4c25d5120db8b60bedf3', class: `${this.elementClassName}__container` }, h("div", { key: '3fc4ede2d685e43edcfefe8c88de19f705e94478', class: `${this.elementClassName}__field` }, h("label", { key: 'fb04e846fc9807155c4390e92722850cdaa4bba2', htmlFor: `${this.elementClassName}-hours`, class: {
|
|
155
157
|
[`${this.elementClassName}__label`]: true,
|
|
156
158
|
[`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
|
|
157
|
-
} }, this.labels.hours), h("div", { key: '
|
|
159
|
+
} }, this.labels.hours), h("div", { key: 'd5ed4a06ea4ce2eaaefda2fa316a4789aa4a210a', class: `${this.elementClassName}__control` }, h("button", { key: '193c89e3b50934225c05f3241546bc3e7063b1b8', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleHourIncrement, disabled: this.disabled, "aria-label": this.labels.incrementHours }, h("svg", { key: 'f6cefeb18839bce2b644d92608f802bc001377b3', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: '58519a5d7a8cddfe2273f5c8beec3eab7307b43c', points: "18 15 12 9 6 15" }))), h("input", { key: '187ace01f2d83ad59766159d6509e30100b7f812', id: `${this.elementClassName}-hours`, type: "number", class: `${this.elementClassName}__input`, value: this.padZero(displayHours), min: minHours, max: maxHours, onInput: this.handleHourChange, disabled: this.disabled, "aria-label": this.labels.hours }), h("button", { key: '3bbe5b73ac8a85c165f0332d3c70d30aede096e6', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleHourDecrement, disabled: this.disabled, "aria-label": this.labels.decrementHours }, h("svg", { key: 'fd7c431618e09d4326c95398f83f22ea2258695e', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: '99aab5a584aed4d8fc1b30dcada0c76e42ba6ac7', points: "6 9 12 15 18 9" }))))), h("div", { key: 'a8958b60136f6220bbd944beaa6cf73c7660e3fb', class: `${this.elementClassName}__separator` }, ":"), h("div", { key: '72b46b517876dc8bc3490afef1860514b46efc46', class: `${this.elementClassName}__field` }, h("label", { key: 'e09788653c3873e97e1922fcda3076878f9b1ca7', htmlFor: `${this.elementClassName}-minutes`, class: {
|
|
158
160
|
[`${this.elementClassName}__label`]: true,
|
|
159
161
|
[`${this.elementClassName}__label--sr-only`]: this.labelsSrOnly
|
|
160
|
-
} }, this.labels.minutes), h("div", { key: '
|
|
162
|
+
} }, this.labels.minutes), h("div", { key: '7bf9642b58249014b2ad802c3fe30f67e5354f4d', class: `${this.elementClassName}__control` }, h("button", { key: '71c889d966bceb4aa9e7b6f78c57e968b207ddda', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--increment`, onClick: this.handleMinuteIncrement, disabled: this.disabled, "aria-label": this.labels.incrementMinutes }, h("svg", { key: '3aad10f2b79e5e819277d4566ab7d336449162f9', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: '68dfdfc6cd2bd1f8f916dbf60155eb2cc4a8328d', points: "18 15 12 9 6 15" }))), h("input", { key: '15eb767d9318c6d3e7aa0075bf9c3362adf75dd3', 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 }), h("button", { key: '5c808f40c040e8ff3e4632738f58e9941e69ec03', type: "button", class: `${this.elementClassName}__button ${this.elementClassName}__button--decrement`, onClick: this.handleMinuteDecrement, disabled: this.disabled, "aria-label": this.labels.decrementMinutes }, h("svg", { key: 'bad9dba94e622c208cb26823963664ff77fc7799', fill: "none", height: "16", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "16" }, h("polyline", { key: '92eb0d63e7be970b2207cc0c47964eef48005baf', points: "6 9 12 15 18 9" }))))), this.use12HourFormat && (h("div", { key: '8a3235abb0bf0764993271ff4969ca6aaac83bd7', class: `${this.elementClassName}__period` }, h("button", { key: 'd8f0679faadf7f0cf04e2f57bed4e9c202d0a056', type: "button", class: {
|
|
161
163
|
[`${this.elementClassName}__period-button`]: true,
|
|
162
164
|
[`${this.elementClassName}__period-button--active`]: this.period === "AM"
|
|
163
|
-
}, onClick: () => this.handlePeriodChange("AM"), disabled: this.disabled, "aria-label": this.labels.am, "aria-pressed": this.period === "AM" }, this.labels.am), h("button", { key: '
|
|
165
|
+
}, onClick: () => this.handlePeriodChange("AM"), disabled: this.disabled, "aria-label": this.labels.am, "aria-pressed": this.period === "AM" }, this.labels.am), h("button", { key: '393802044645d205a71ae593227df550adce2970', type: "button", class: {
|
|
164
166
|
[`${this.elementClassName}__period-button`]: true,
|
|
165
167
|
[`${this.elementClassName}__period-button--active`]: this.period === "PM"
|
|
166
168
|
}, onClick: () => this.handlePeriodChange("PM"), disabled: this.disabled, "aria-label": this.labels.pm, "aria-pressed": this.period === "PM" }, this.labels.pm))))));
|
|
@@ -109,7 +109,7 @@ const InclusiveTimes = class {
|
|
|
109
109
|
// Can be used for month change tracking
|
|
110
110
|
};
|
|
111
111
|
this.handleInputBlur = () => {
|
|
112
|
-
if (this.
|
|
112
|
+
if (this.shouldInputFormat()) {
|
|
113
113
|
this.formatInput();
|
|
114
114
|
}
|
|
115
115
|
};
|
|
@@ -124,6 +124,12 @@ const InclusiveTimes = class {
|
|
|
124
124
|
}
|
|
125
125
|
};
|
|
126
126
|
}
|
|
127
|
+
shouldInputFormat() {
|
|
128
|
+
if (typeof this.inputShouldFormat === "string") {
|
|
129
|
+
return this.inputShouldFormat === "true";
|
|
130
|
+
}
|
|
131
|
+
return !!this.inputShouldFormat;
|
|
132
|
+
}
|
|
127
133
|
watchValue(_newValue) {
|
|
128
134
|
this.syncFromValueProp();
|
|
129
135
|
}
|
|
@@ -185,7 +191,7 @@ const InclusiveTimes = class {
|
|
|
185
191
|
this.selectDateTime.emit(formatted);
|
|
186
192
|
}
|
|
187
193
|
this.errorState = false;
|
|
188
|
-
if (this.
|
|
194
|
+
if (this.shouldInputFormat()) {
|
|
189
195
|
this.formatInput();
|
|
190
196
|
}
|
|
191
197
|
}
|
|
@@ -219,7 +225,7 @@ const InclusiveTimes = class {
|
|
|
219
225
|
}
|
|
220
226
|
render() {
|
|
221
227
|
var _a;
|
|
222
|
-
return (h(Host, { key: '
|
|
228
|
+
return (h(Host, { key: '4c2b4df711aef3ecab43e101650d8af27088813b', class: this.elementClassName, "has-error": this.errorState, disabled: this.disabledState }, h("label", { key: 'bd4a9fcbfb146dac1bf856cfc3f5b5e250714f9c', htmlFor: `${this.id}-input`, class: this.getClassName("label") }, this.label), h("div", { key: '845800995b3d9b88f6f0a0d02486de2821fdaaef', class: this.getClassName("input-container") }, h("input", { key: 'bc8033523f88c72205d62068bda4199b666ef674', 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: '02d49c8b78edfbdd3cbbb6a738323d4de10ac46d', 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: '6e03950ffd59ce6d7391e878479359d5d8ecf665', label: this.timesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
|
|
223
229
|
if (this.pickerRef) {
|
|
224
230
|
this.pickerRef.modalIsOpen = true;
|
|
225
231
|
}
|
|
@@ -227,7 +233,7 @@ const InclusiveTimes = class {
|
|
|
227
233
|
if (this.pickerRef) {
|
|
228
234
|
this.pickerRef.modalIsOpen = false;
|
|
229
235
|
}
|
|
230
|
-
}, inline: this.inline }, h("div", { key: '
|
|
236
|
+
}, inline: this.inline }, h("div", { key: '8e29281638aaa80d71220ad08dab482bf5a3c1e4', class: this.getClassName("picker-container") }, h("tabworthy-dates-calendar", { key: '5e0129fe76d1de0b760201d462ce446132fc7003', 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: '4d2da22f4da3460a9626c886b61e22eb66c0a23f', slot: "after-calendar", class: this.getClassName("time-section") }, h("tabworthy-times-picker", { key: '2d9a9a8ce12e0659f4f1c82f1f8d64d829fc183b', hours: this.selectedHours, minutes: this.selectedMinutes, use12HourFormat: this.use12HourFormat, disabled: this.disabledState, onTimeChanged: this.handleTimeChange }))))), this.errorState && (h("div", { key: 'df2cdfcd866f26108032c75a3f8c2f55ba5c9b10', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
231
237
|
}
|
|
232
238
|
get el() { return getElement(this); }
|
|
233
239
|
static get watchers() { return {
|
|
@@ -126,7 +126,9 @@ export const chronoParseRange = async (dateString, options) => {
|
|
|
126
126
|
parsedRange[0].end &&
|
|
127
127
|
parsedRange[0].end.date() instanceof Date)
|
|
128
128
|
endDate = parsedRange[0].end.date();
|
|
129
|
-
const returnValue = {
|
|
129
|
+
const returnValue = {
|
|
130
|
+
value: { start: null, end: null }
|
|
131
|
+
};
|
|
130
132
|
// TODO: fix this
|
|
131
133
|
// @ts-ignore
|
|
132
134
|
if (startDate instanceof Date || endDate instanceof Date) {
|