@tabworthy/components 0.3.2 → 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/tabworthy-dates.cjs.entry.js +101 -91
- package/dist/collection/components/tabworthy-dates/tabworthy-dates.js +101 -91
- package/dist/components/tabworthy-dates.js +1 -1
- package/dist/esm/tabworthy-dates.entry.js +101 -91
- package/dist/tabworthy-components/{p-b4c87db8.entry.js → p-46b71504.entry.js} +1 -1
- package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
- package/dist/types/components/tabworthy-dates/tabworthy-dates.d.ts +2 -0
- package/package.json +1 -1
|
@@ -10592,99 +10592,106 @@ const TabworthyDates = class {
|
|
|
10592
10592
|
var _a;
|
|
10593
10593
|
(_a = this.changeYear) === null || _a === void 0 ? void 0 : _a.emit(yearDetail);
|
|
10594
10594
|
};
|
|
10595
|
-
this.
|
|
10596
|
-
|
|
10597
|
-
|
|
10598
|
-
|
|
10599
|
-
|
|
10600
|
-
|
|
10601
|
-
this.pickerRef.value = null;
|
|
10602
|
-
}
|
|
10603
|
-
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;
|
|
10604
10601
|
}
|
|
10605
|
-
|
|
10606
|
-
|
|
10607
|
-
|
|
10608
|
-
|
|
10609
|
-
|
|
10610
|
-
|
|
10611
|
-
|
|
10612
|
-
|
|
10613
|
-
|
|
10614
|
-
|
|
10615
|
-
|
|
10616
|
-
|
|
10617
|
-
|
|
10618
|
-
|
|
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)) {
|
|
10619
10646
|
this.errorState = true;
|
|
10620
|
-
|
|
10621
|
-
|
|
10622
|
-
|
|
10623
|
-
|
|
10624
|
-
|
|
10625
|
-
maxDate: ""
|
|
10626
|
-
}[parsedRange.reason];
|
|
10627
|
-
}
|
|
10647
|
+
this.errorMessage = this.datesLabels.disabledDateError;
|
|
10648
|
+
}
|
|
10649
|
+
else {
|
|
10650
|
+
this.updateValue(parsedDate.value);
|
|
10651
|
+
this.formatInput(true, false);
|
|
10628
10652
|
}
|
|
10629
10653
|
}
|
|
10630
|
-
else {
|
|
10631
|
-
this.errorState =
|
|
10632
|
-
|
|
10633
|
-
|
|
10634
|
-
|
|
10635
|
-
|
|
10636
|
-
|
|
10637
|
-
|
|
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);
|
|
10638
10664
|
}
|
|
10639
|
-
|
|
10640
|
-
|
|
10641
|
-
|
|
10642
|
-
|
|
10643
|
-
|
|
10644
|
-
});
|
|
10645
|
-
if (parsedDate && parsedDate.value instanceof Date) {
|
|
10646
|
-
if (this.disableDate(parsedDate.value)) {
|
|
10647
|
-
this.errorState = true;
|
|
10648
|
-
this.errorMessage = this.datesLabels.disabledDateError;
|
|
10649
|
-
}
|
|
10650
|
-
else {
|
|
10651
|
-
this.updateValue(parsedDate.value);
|
|
10652
|
-
this.formatInput(true, false);
|
|
10653
|
-
}
|
|
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);
|
|
10654
10670
|
}
|
|
10655
|
-
|
|
10656
|
-
this.
|
|
10657
|
-
this.
|
|
10658
|
-
|
|
10659
|
-
|
|
10660
|
-
|
|
10661
|
-
|
|
10662
|
-
|
|
10663
|
-
|
|
10664
|
-
|
|
10665
|
-
|
|
10666
|
-
|
|
10667
|
-
minDate = this.minDate
|
|
10668
|
-
? removeTimezoneOffset(new Date(this.minDate))
|
|
10669
|
-
: undefined;
|
|
10670
|
-
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
10671
|
-
}
|
|
10672
|
-
if (!!parsedDate.reason) {
|
|
10673
|
-
this.errorMessage = parsedDate.reason;
|
|
10674
|
-
this.errorMessage = {
|
|
10675
|
-
// TODO: Add locale date formatting to these messages
|
|
10676
|
-
minDate: minDate
|
|
10677
|
-
? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
|
|
10678
|
-
: "",
|
|
10679
|
-
maxDate: maxDate
|
|
10680
|
-
? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
|
|
10681
|
-
: "",
|
|
10682
|
-
invalid: this.datesLabels.invalidDateError
|
|
10683
|
-
}[parsedDate.reason];
|
|
10684
|
-
}
|
|
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];
|
|
10685
10683
|
}
|
|
10686
10684
|
}
|
|
10687
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
|
+
};
|
|
10688
10695
|
}
|
|
10689
10696
|
componentDidLoad() {
|
|
10690
10697
|
this.syncFromValueProp();
|
|
@@ -10789,7 +10796,8 @@ const TabworthyDates = class {
|
|
|
10789
10796
|
if (this.isRangeValue(newValue)) {
|
|
10790
10797
|
if (newValue.length === 2)
|
|
10791
10798
|
(_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
10792
|
-
|
|
10799
|
+
// Convert ISO dates to specified format
|
|
10800
|
+
this.internalValue = newValue.map((date) => hooks(date).format(this.format));
|
|
10793
10801
|
this.errorState = false;
|
|
10794
10802
|
if (document.activeElement !== this.inputRef) {
|
|
10795
10803
|
this.formatInput(true, false);
|
|
@@ -10798,8 +10806,10 @@ const TabworthyDates = class {
|
|
|
10798
10806
|
}
|
|
10799
10807
|
else {
|
|
10800
10808
|
(_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.close();
|
|
10801
|
-
|
|
10802
|
-
|
|
10809
|
+
// Convert ISO date to specified format
|
|
10810
|
+
const formattedDate = hooks(newValue).format(this.format);
|
|
10811
|
+
this.inputRef.value = formattedDate;
|
|
10812
|
+
this.internalValue = formattedDate;
|
|
10803
10813
|
this.errorState = false;
|
|
10804
10814
|
if (document.activeElement !== this.inputRef) {
|
|
10805
10815
|
this.formatInput(true, false);
|
|
@@ -10874,7 +10884,7 @@ const TabworthyDates = class {
|
|
|
10874
10884
|
}
|
|
10875
10885
|
render() {
|
|
10876
10886
|
var _a;
|
|
10877
|
-
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: () => {
|
|
10878
10888
|
if (!this.pickerRef)
|
|
10879
10889
|
return;
|
|
10880
10890
|
this.pickerRef.modalIsOpen = true;
|
|
@@ -10882,11 +10892,11 @@ const TabworthyDates = class {
|
|
|
10882
10892
|
if (!this.pickerRef)
|
|
10883
10893
|
return;
|
|
10884
10894
|
this.pickerRef.modalIsOpen = false;
|
|
10885
|
-
}, inline: this.inline }, h("tabworthy-dates-calendar", { key: '
|
|
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 &&
|
|
10886
10896
|
((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
10887
|
-
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) => {
|
|
10888
10898
|
return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
|
|
10889
|
-
}))), 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))));
|
|
10890
10900
|
}
|
|
10891
10901
|
get el() { return getElement(this); }
|
|
10892
10902
|
static get watchers() { return {
|