@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
|
@@ -10594,99 +10594,106 @@ const TabworthyDates = class {
|
|
|
10594
10594
|
var _a;
|
|
10595
10595
|
(_a = this.changeYear) === null || _a === void 0 ? void 0 : _a.emit(yearDetail);
|
|
10596
10596
|
};
|
|
10597
|
-
this.
|
|
10598
|
-
|
|
10599
|
-
|
|
10600
|
-
|
|
10601
|
-
|
|
10602
|
-
|
|
10603
|
-
this.pickerRef.value = null;
|
|
10604
|
-
}
|
|
10605
|
-
return this.selectDate.emit(this.internalValue);
|
|
10597
|
+
this.handleRangeChange = async (value) => {
|
|
10598
|
+
this.errorState = false;
|
|
10599
|
+
if (value.length === 0) {
|
|
10600
|
+
this.internalValue = "";
|
|
10601
|
+
if (this.pickerRef) {
|
|
10602
|
+
this.pickerRef.value = null;
|
|
10606
10603
|
}
|
|
10607
|
-
|
|
10608
|
-
|
|
10609
|
-
|
|
10610
|
-
|
|
10611
|
-
|
|
10612
|
-
|
|
10613
|
-
|
|
10614
|
-
|
|
10615
|
-
|
|
10616
|
-
|
|
10617
|
-
|
|
10618
|
-
|
|
10619
|
-
|
|
10620
|
-
|
|
10604
|
+
return this.selectDate.emit(this.internalValue);
|
|
10605
|
+
}
|
|
10606
|
+
const parsedRange = await chronoParseRange(value, {
|
|
10607
|
+
locale: this.locale.slice(0, 2),
|
|
10608
|
+
minDate: this.minDate,
|
|
10609
|
+
maxDate: this.maxDate,
|
|
10610
|
+
referenceDate: utils.removeTimezoneOffset(new Date(this.referenceDate))
|
|
10611
|
+
});
|
|
10612
|
+
const newValue = [];
|
|
10613
|
+
if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.start instanceof Date)
|
|
10614
|
+
newValue.push(parsedRange.value.start);
|
|
10615
|
+
if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.end instanceof Date)
|
|
10616
|
+
newValue.push(parsedRange.value.end);
|
|
10617
|
+
this.updateValue(newValue);
|
|
10618
|
+
this.formatInput(true, false);
|
|
10619
|
+
if (newValue.length === 0) {
|
|
10620
|
+
this.errorState = true;
|
|
10621
|
+
if (!!(parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.reason)) {
|
|
10622
|
+
this.errorMessage = {
|
|
10623
|
+
invalid: this.datesLabels.invalidDateError,
|
|
10624
|
+
rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
|
|
10625
|
+
minDate: "",
|
|
10626
|
+
maxDate: ""
|
|
10627
|
+
}[parsedRange.reason];
|
|
10628
|
+
}
|
|
10629
|
+
}
|
|
10630
|
+
};
|
|
10631
|
+
this.handleSingleDateChange = async (value) => {
|
|
10632
|
+
this.errorState = false;
|
|
10633
|
+
if (value.length === 0) {
|
|
10634
|
+
this.internalValue = "";
|
|
10635
|
+
if (this.pickerRef) {
|
|
10636
|
+
this.pickerRef.value = null;
|
|
10637
|
+
}
|
|
10638
|
+
return this.selectDate.emit(this.internalValue);
|
|
10639
|
+
}
|
|
10640
|
+
const parsedDate = await chronoParseDate(value, {
|
|
10641
|
+
locale: this.locale.slice(0, 2),
|
|
10642
|
+
minDate: this.minDate,
|
|
10643
|
+
maxDate: this.maxDate,
|
|
10644
|
+
referenceDate: utils.removeTimezoneOffset(new Date(this.referenceDate))
|
|
10645
|
+
});
|
|
10646
|
+
if (parsedDate && parsedDate.value instanceof Date) {
|
|
10647
|
+
if (this.disableDate(parsedDate.value)) {
|
|
10621
10648
|
this.errorState = true;
|
|
10622
|
-
|
|
10623
|
-
|
|
10624
|
-
|
|
10625
|
-
|
|
10626
|
-
|
|
10627
|
-
maxDate: ""
|
|
10628
|
-
}[parsedRange.reason];
|
|
10629
|
-
}
|
|
10649
|
+
this.errorMessage = this.datesLabels.disabledDateError;
|
|
10650
|
+
}
|
|
10651
|
+
else {
|
|
10652
|
+
this.updateValue(parsedDate.value);
|
|
10653
|
+
this.formatInput(true, false);
|
|
10630
10654
|
}
|
|
10631
10655
|
}
|
|
10632
|
-
else {
|
|
10633
|
-
this.errorState =
|
|
10634
|
-
|
|
10635
|
-
|
|
10636
|
-
|
|
10637
|
-
|
|
10638
|
-
|
|
10639
|
-
|
|
10656
|
+
else if (parsedDate) {
|
|
10657
|
+
this.errorState = true;
|
|
10658
|
+
this.internalValue = null;
|
|
10659
|
+
let maxDate = undefined;
|
|
10660
|
+
let minDate = undefined;
|
|
10661
|
+
if (this.maxDate) {
|
|
10662
|
+
maxDate = this.maxDate
|
|
10663
|
+
? utils.removeTimezoneOffset(new Date(this.maxDate))
|
|
10664
|
+
: undefined;
|
|
10665
|
+
maxDate === null || maxDate === void 0 ? void 0 : maxDate.setDate(maxDate.getDate() + 1);
|
|
10640
10666
|
}
|
|
10641
|
-
|
|
10642
|
-
|
|
10643
|
-
|
|
10644
|
-
|
|
10645
|
-
|
|
10646
|
-
});
|
|
10647
|
-
if (parsedDate && parsedDate.value instanceof Date) {
|
|
10648
|
-
if (this.disableDate(parsedDate.value)) {
|
|
10649
|
-
this.errorState = true;
|
|
10650
|
-
this.errorMessage = this.datesLabels.disabledDateError;
|
|
10651
|
-
}
|
|
10652
|
-
else {
|
|
10653
|
-
this.updateValue(parsedDate.value);
|
|
10654
|
-
this.formatInput(true, false);
|
|
10655
|
-
}
|
|
10667
|
+
if (this.minDate) {
|
|
10668
|
+
minDate = this.minDate
|
|
10669
|
+
? utils.removeTimezoneOffset(new Date(this.minDate))
|
|
10670
|
+
: undefined;
|
|
10671
|
+
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
10656
10672
|
}
|
|
10657
|
-
|
|
10658
|
-
this.
|
|
10659
|
-
this.
|
|
10660
|
-
|
|
10661
|
-
|
|
10662
|
-
|
|
10663
|
-
|
|
10664
|
-
|
|
10665
|
-
|
|
10666
|
-
|
|
10667
|
-
|
|
10668
|
-
|
|
10669
|
-
minDate = this.minDate
|
|
10670
|
-
? utils.removeTimezoneOffset(new Date(this.minDate))
|
|
10671
|
-
: undefined;
|
|
10672
|
-
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
10673
|
-
}
|
|
10674
|
-
if (!!parsedDate.reason) {
|
|
10675
|
-
this.errorMessage = parsedDate.reason;
|
|
10676
|
-
this.errorMessage = {
|
|
10677
|
-
// TODO: Add locale date formatting to these messages
|
|
10678
|
-
minDate: minDate
|
|
10679
|
-
? `${this.datesLabels.minDateError} ${utils.getISODateString(minDate)}`
|
|
10680
|
-
: "",
|
|
10681
|
-
maxDate: maxDate
|
|
10682
|
-
? `${this.datesLabels.maxDateError} ${utils.getISODateString(maxDate)}`
|
|
10683
|
-
: "",
|
|
10684
|
-
invalid: this.datesLabels.invalidDateError
|
|
10685
|
-
}[parsedDate.reason];
|
|
10686
|
-
}
|
|
10673
|
+
if (!!parsedDate.reason) {
|
|
10674
|
+
this.errorMessage = parsedDate.reason;
|
|
10675
|
+
this.errorMessage = {
|
|
10676
|
+
// TODO: Add locale date formatting to these messages
|
|
10677
|
+
minDate: minDate
|
|
10678
|
+
? `${this.datesLabels.minDateError} ${utils.getISODateString(minDate)}`
|
|
10679
|
+
: "",
|
|
10680
|
+
maxDate: maxDate
|
|
10681
|
+
? `${this.datesLabels.maxDateError} ${utils.getISODateString(maxDate)}`
|
|
10682
|
+
: "",
|
|
10683
|
+
invalid: this.datesLabels.invalidDateError
|
|
10684
|
+
}[parsedDate.reason];
|
|
10687
10685
|
}
|
|
10688
10686
|
}
|
|
10689
10687
|
};
|
|
10688
|
+
this.handleChange = async (event) => {
|
|
10689
|
+
const value = event.target.value;
|
|
10690
|
+
if (this.range) {
|
|
10691
|
+
await this.handleRangeChange(value);
|
|
10692
|
+
}
|
|
10693
|
+
else {
|
|
10694
|
+
await this.handleSingleDateChange(value);
|
|
10695
|
+
}
|
|
10696
|
+
};
|
|
10690
10697
|
}
|
|
10691
10698
|
componentDidLoad() {
|
|
10692
10699
|
this.syncFromValueProp();
|
|
@@ -10791,7 +10798,8 @@ const TabworthyDates = class {
|
|
|
10791
10798
|
if (this.isRangeValue(newValue)) {
|
|
10792
10799
|
if (newValue.length === 2)
|
|
10793
10800
|
(_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
10794
|
-
|
|
10801
|
+
// Convert ISO dates to specified format
|
|
10802
|
+
this.internalValue = newValue.map((date) => moment.hooks(date).format(this.format));
|
|
10795
10803
|
this.errorState = false;
|
|
10796
10804
|
if (document.activeElement !== this.inputRef) {
|
|
10797
10805
|
this.formatInput(true, false);
|
|
@@ -10800,8 +10808,10 @@ const TabworthyDates = class {
|
|
|
10800
10808
|
}
|
|
10801
10809
|
else {
|
|
10802
10810
|
(_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.close();
|
|
10803
|
-
|
|
10804
|
-
|
|
10811
|
+
// Convert ISO date to specified format
|
|
10812
|
+
const formattedDate = moment.hooks(newValue).format(this.format);
|
|
10813
|
+
this.inputRef.value = formattedDate;
|
|
10814
|
+
this.internalValue = formattedDate;
|
|
10805
10815
|
this.errorState = false;
|
|
10806
10816
|
if (document.activeElement !== this.inputRef) {
|
|
10807
10817
|
this.formatInput(true, false);
|
|
@@ -10876,7 +10886,7 @@ const TabworthyDates = class {
|
|
|
10876
10886
|
}
|
|
10877
10887
|
render() {
|
|
10878
10888
|
var _a;
|
|
10879
|
-
return (index$1.h(index$1.Host, { key: '
|
|
10889
|
+
return (index$1.h(index$1.Host, { key: 'd319da990a03fea708c0ab347aec215baae3cdf9' }, index$1.h("label", { key: '5a050660fa3a264b67c1744d802759c90b973337', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), index$1.h("br", { key: 'ecd9e1bffa8a30f7f4eabbc8a7e51a6ee9fc22ca' }), index$1.h("div", { key: '6507ab0f2980e66e72e78b90c00ff43c3ad771ef', class: this.getClassName("input-container") }, index$1.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 && (index$1.h("button", { key: '610862237f6f6bbd6690952b050ef684ed00da94', type: "button", ref: (r) => (this.calendarButtonRef = r), onClick: this.handleCalendarButtonClick, class: this.getClassName("calendar-button"), disabled: this.disabledState }, this.calendarButtonContent ? (index$1.h("span", { innerHTML: this.calendarButtonContent })) : (this.datesLabels.openCalendar)))), index$1.h("tabworthy-dates-modal", { key: 'b3f242501f41e78aa6772d451c4ffd8123cf4228', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
|
|
10880
10890
|
if (!this.pickerRef)
|
|
10881
10891
|
return;
|
|
10882
10892
|
this.pickerRef.modalIsOpen = true;
|
|
@@ -10884,11 +10894,11 @@ const TabworthyDates = class {
|
|
|
10884
10894
|
if (!this.pickerRef)
|
|
10885
10895
|
return;
|
|
10886
10896
|
this.pickerRef.modalIsOpen = false;
|
|
10887
|
-
}, inline: this.inline }, index$1.h("tabworthy-dates-calendar", { key: '
|
|
10897
|
+
}, inline: this.inline }, index$1.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 &&
|
|
10888
10898
|
((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
10889
|
-
this.chronoSupportedLocale && (index$1.h("div", { key: '
|
|
10899
|
+
this.chronoSupportedLocale && (index$1.h("div", { key: '0e0e718a43bbe2f2af69af45af01f8f75f4fe362', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
|
|
10890
10900
|
return (index$1.h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
|
|
10891
|
-
}))), this.errorState && (index$1.h("div", { key: '
|
|
10901
|
+
}))), this.errorState && (index$1.h("div", { key: 'b51d6a07a017bdb7af09098e848c7184944a4631', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
10892
10902
|
}
|
|
10893
10903
|
get el() { return index$1.getElement(this); }
|
|
10894
10904
|
static get watchers() { return {
|
|
@@ -123,99 +123,106 @@ export class TabworthyDates {
|
|
|
123
123
|
var _a;
|
|
124
124
|
(_a = this.changeYear) === null || _a === void 0 ? void 0 : _a.emit(yearDetail);
|
|
125
125
|
};
|
|
126
|
-
this.
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
this.pickerRef.value = null;
|
|
133
|
-
}
|
|
134
|
-
return this.selectDate.emit(this.internalValue);
|
|
126
|
+
this.handleRangeChange = async (value) => {
|
|
127
|
+
this.errorState = false;
|
|
128
|
+
if (value.length === 0) {
|
|
129
|
+
this.internalValue = "";
|
|
130
|
+
if (this.pickerRef) {
|
|
131
|
+
this.pickerRef.value = null;
|
|
135
132
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
133
|
+
return this.selectDate.emit(this.internalValue);
|
|
134
|
+
}
|
|
135
|
+
const parsedRange = await chronoParseRange(value, {
|
|
136
|
+
locale: this.locale.slice(0, 2),
|
|
137
|
+
minDate: this.minDate,
|
|
138
|
+
maxDate: this.maxDate,
|
|
139
|
+
referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
|
|
140
|
+
});
|
|
141
|
+
const newValue = [];
|
|
142
|
+
if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.start instanceof Date)
|
|
143
|
+
newValue.push(parsedRange.value.start);
|
|
144
|
+
if ((parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.value) && parsedRange.value.end instanceof Date)
|
|
145
|
+
newValue.push(parsedRange.value.end);
|
|
146
|
+
this.updateValue(newValue);
|
|
147
|
+
this.formatInput(true, false);
|
|
148
|
+
if (newValue.length === 0) {
|
|
149
|
+
this.errorState = true;
|
|
150
|
+
if (!!(parsedRange === null || parsedRange === void 0 ? void 0 : parsedRange.reason)) {
|
|
151
|
+
this.errorMessage = {
|
|
152
|
+
invalid: this.datesLabels.invalidDateError,
|
|
153
|
+
rangeOutOfBounds: this.datesLabels.rangeOutOfBoundsError,
|
|
154
|
+
minDate: "",
|
|
155
|
+
maxDate: ""
|
|
156
|
+
}[parsedRange.reason];
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
this.handleSingleDateChange = async (value) => {
|
|
161
|
+
this.errorState = false;
|
|
162
|
+
if (value.length === 0) {
|
|
163
|
+
this.internalValue = "";
|
|
164
|
+
if (this.pickerRef) {
|
|
165
|
+
this.pickerRef.value = null;
|
|
166
|
+
}
|
|
167
|
+
return this.selectDate.emit(this.internalValue);
|
|
168
|
+
}
|
|
169
|
+
const parsedDate = await chronoParseDate(value, {
|
|
170
|
+
locale: this.locale.slice(0, 2),
|
|
171
|
+
minDate: this.minDate,
|
|
172
|
+
maxDate: this.maxDate,
|
|
173
|
+
referenceDate: removeTimezoneOffset(new Date(this.referenceDate))
|
|
174
|
+
});
|
|
175
|
+
if (parsedDate && parsedDate.value instanceof Date) {
|
|
176
|
+
if (this.disableDate(parsedDate.value)) {
|
|
150
177
|
this.errorState = true;
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
maxDate: ""
|
|
157
|
-
}[parsedRange.reason];
|
|
158
|
-
}
|
|
178
|
+
this.errorMessage = this.datesLabels.disabledDateError;
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
this.updateValue(parsedDate.value);
|
|
182
|
+
this.formatInput(true, false);
|
|
159
183
|
}
|
|
160
184
|
}
|
|
161
|
-
else {
|
|
162
|
-
this.errorState =
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
185
|
+
else if (parsedDate) {
|
|
186
|
+
this.errorState = true;
|
|
187
|
+
this.internalValue = null;
|
|
188
|
+
let maxDate = undefined;
|
|
189
|
+
let minDate = undefined;
|
|
190
|
+
if (this.maxDate) {
|
|
191
|
+
maxDate = this.maxDate
|
|
192
|
+
? removeTimezoneOffset(new Date(this.maxDate))
|
|
193
|
+
: undefined;
|
|
194
|
+
maxDate === null || maxDate === void 0 ? void 0 : maxDate.setDate(maxDate.getDate() + 1);
|
|
169
195
|
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
});
|
|
176
|
-
if (parsedDate && parsedDate.value instanceof Date) {
|
|
177
|
-
if (this.disableDate(parsedDate.value)) {
|
|
178
|
-
this.errorState = true;
|
|
179
|
-
this.errorMessage = this.datesLabels.disabledDateError;
|
|
180
|
-
}
|
|
181
|
-
else {
|
|
182
|
-
this.updateValue(parsedDate.value);
|
|
183
|
-
this.formatInput(true, false);
|
|
184
|
-
}
|
|
196
|
+
if (this.minDate) {
|
|
197
|
+
minDate = this.minDate
|
|
198
|
+
? removeTimezoneOffset(new Date(this.minDate))
|
|
199
|
+
: undefined;
|
|
200
|
+
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
185
201
|
}
|
|
186
|
-
|
|
187
|
-
this.
|
|
188
|
-
this.
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
minDate = this.minDate
|
|
199
|
-
? removeTimezoneOffset(new Date(this.minDate))
|
|
200
|
-
: undefined;
|
|
201
|
-
minDate === null || minDate === void 0 ? void 0 : minDate.setDate(minDate.getDate() - 1);
|
|
202
|
-
}
|
|
203
|
-
if (!!parsedDate.reason) {
|
|
204
|
-
this.errorMessage = parsedDate.reason;
|
|
205
|
-
this.errorMessage = {
|
|
206
|
-
// TODO: Add locale date formatting to these messages
|
|
207
|
-
minDate: minDate
|
|
208
|
-
? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
|
|
209
|
-
: "",
|
|
210
|
-
maxDate: maxDate
|
|
211
|
-
? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
|
|
212
|
-
: "",
|
|
213
|
-
invalid: this.datesLabels.invalidDateError
|
|
214
|
-
}[parsedDate.reason];
|
|
215
|
-
}
|
|
202
|
+
if (!!parsedDate.reason) {
|
|
203
|
+
this.errorMessage = parsedDate.reason;
|
|
204
|
+
this.errorMessage = {
|
|
205
|
+
// TODO: Add locale date formatting to these messages
|
|
206
|
+
minDate: minDate
|
|
207
|
+
? `${this.datesLabels.minDateError} ${getISODateString(minDate)}`
|
|
208
|
+
: "",
|
|
209
|
+
maxDate: maxDate
|
|
210
|
+
? `${this.datesLabels.maxDateError} ${getISODateString(maxDate)}`
|
|
211
|
+
: "",
|
|
212
|
+
invalid: this.datesLabels.invalidDateError
|
|
213
|
+
}[parsedDate.reason];
|
|
216
214
|
}
|
|
217
215
|
}
|
|
218
216
|
};
|
|
217
|
+
this.handleChange = async (event) => {
|
|
218
|
+
const value = event.target.value;
|
|
219
|
+
if (this.range) {
|
|
220
|
+
await this.handleRangeChange(value);
|
|
221
|
+
}
|
|
222
|
+
else {
|
|
223
|
+
await this.handleSingleDateChange(value);
|
|
224
|
+
}
|
|
225
|
+
};
|
|
219
226
|
}
|
|
220
227
|
componentDidLoad() {
|
|
221
228
|
this.syncFromValueProp();
|
|
@@ -320,7 +327,8 @@ export class TabworthyDates {
|
|
|
320
327
|
if (this.isRangeValue(newValue)) {
|
|
321
328
|
if (newValue.length === 2)
|
|
322
329
|
(_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
323
|
-
|
|
330
|
+
// Convert ISO dates to specified format
|
|
331
|
+
this.internalValue = newValue.map((date) => moment(date).format(this.format));
|
|
324
332
|
this.errorState = false;
|
|
325
333
|
if (document.activeElement !== this.inputRef) {
|
|
326
334
|
this.formatInput(true, false);
|
|
@@ -329,8 +337,10 @@ export class TabworthyDates {
|
|
|
329
337
|
}
|
|
330
338
|
else {
|
|
331
339
|
(_b = this.modalRef) === null || _b === void 0 ? void 0 : _b.close();
|
|
332
|
-
|
|
333
|
-
|
|
340
|
+
// Convert ISO date to specified format
|
|
341
|
+
const formattedDate = moment(newValue).format(this.format);
|
|
342
|
+
this.inputRef.value = formattedDate;
|
|
343
|
+
this.internalValue = formattedDate;
|
|
334
344
|
this.errorState = false;
|
|
335
345
|
if (document.activeElement !== this.inputRef) {
|
|
336
346
|
this.formatInput(true, false);
|
|
@@ -405,7 +415,7 @@ export class TabworthyDates {
|
|
|
405
415
|
}
|
|
406
416
|
render() {
|
|
407
417
|
var _a;
|
|
408
|
-
return (h(Host, { key: '
|
|
418
|
+
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: () => {
|
|
409
419
|
if (!this.pickerRef)
|
|
410
420
|
return;
|
|
411
421
|
this.pickerRef.modalIsOpen = true;
|
|
@@ -413,11 +423,11 @@ export class TabworthyDates {
|
|
|
413
423
|
if (!this.pickerRef)
|
|
414
424
|
return;
|
|
415
425
|
this.pickerRef.modalIsOpen = false;
|
|
416
|
-
}, inline: this.inline }, h("tabworthy-dates-calendar", { key: '
|
|
426
|
+
}, 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 &&
|
|
417
427
|
((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
418
|
-
this.chronoSupportedLocale && (h("div", { key: '
|
|
428
|
+
this.chronoSupportedLocale && (h("div", { key: '0e0e718a43bbe2f2af69af45af01f8f75f4fe362', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
|
|
419
429
|
return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
|
|
420
|
-
}))), this.errorState && (h("div", { key: '
|
|
430
|
+
}))), this.errorState && (h("div", { key: 'b51d6a07a017bdb7af09098e848c7184944a4631', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
421
431
|
}
|
|
422
432
|
static get is() { return "tabworthy-dates"; }
|
|
423
433
|
static get encapsulation() { return "scoped"; }
|