@tabworthy/components 0.7.0 → 0.7.1
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 +11 -8
- package/dist/collection/components/tabworthy-dates/tabworthy-dates.js +11 -8
- package/dist/components/tabworthy-dates.js +1 -1
- package/dist/esm/tabworthy-dates.entry.js +11 -8
- package/dist/tabworthy-components/{p-c49e980d.entry.js → p-fa681444.entry.js} +1 -1
- package/dist/tabworthy-components/tabworthy-components.esm.js +1 -1
- package/package.json +1 -1
|
@@ -10826,12 +10826,15 @@ const TabworthyDates = class {
|
|
|
10826
10826
|
this.selectDate.emit(this.internalValue);
|
|
10827
10827
|
}
|
|
10828
10828
|
announceDateChange(newValue) {
|
|
10829
|
+
const newValueInIsoFormat = Array.isArray(newValue)
|
|
10830
|
+
? newValue.map((date) => moment.hooks(date, this.format).toISOString())
|
|
10831
|
+
: moment.hooks(newValue, this.format).toISOString();
|
|
10829
10832
|
let content = "";
|
|
10830
|
-
if (Array.isArray(
|
|
10831
|
-
if (
|
|
10833
|
+
if (Array.isArray(newValueInIsoFormat)) {
|
|
10834
|
+
if (newValueInIsoFormat.length === 1) {
|
|
10832
10835
|
content += `${this.datesLabels.startDate} `;
|
|
10833
10836
|
}
|
|
10834
|
-
|
|
10837
|
+
newValueInIsoFormat.forEach((value, index) => (content += `${index === 1 ? ` ${this.datesLabels.to} ` : ""}${Intl.DateTimeFormat(this.locale, {
|
|
10835
10838
|
weekday: "long",
|
|
10836
10839
|
day: "numeric",
|
|
10837
10840
|
month: "long",
|
|
@@ -10844,7 +10847,7 @@ const TabworthyDates = class {
|
|
|
10844
10847
|
day: "numeric",
|
|
10845
10848
|
month: "long",
|
|
10846
10849
|
year: "numeric"
|
|
10847
|
-
}).format(utils.removeTimezoneOffset(new Date(
|
|
10850
|
+
}).format(utils.removeTimezoneOffset(new Date(newValueInIsoFormat)));
|
|
10848
10851
|
if (content.length === 0)
|
|
10849
10852
|
return;
|
|
10850
10853
|
content += ` ${this.datesLabels.selected}`;
|
|
@@ -10892,7 +10895,7 @@ const TabworthyDates = class {
|
|
|
10892
10895
|
}
|
|
10893
10896
|
render() {
|
|
10894
10897
|
var _a;
|
|
10895
|
-
return (index$1.h(index$1.Host, { key: '
|
|
10898
|
+
return (index$1.h(index$1.Host, { key: '6fd878d7a0073344895525a82533925fcd24c372' }, index$1.h("label", { key: '550382a2ea99201b465fa9fd9ee90a917c5ff7e6', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), index$1.h("br", { key: 'fd6fb69543f81bef9a15157b94a25a5fa107ef70' }), index$1.h("div", { key: 'fcc9c10276e35f28435829eea17dfed27373f55c', class: this.getClassName("input-container") }, index$1.h("input", { key: '24da8c1582dc66f65a0eb6c6ab380b28bbf1c5ca', disabled: this.disabledState || this.disableFreeformInput, 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: '54cd337b5ddd3ea6aa6ecd59a8fadf2cb5b61026', 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: 'cd8bd92d251d3c2566c9da9f8039ccc2ab74750f', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
|
|
10896
10899
|
if (!this.pickerRef)
|
|
10897
10900
|
return;
|
|
10898
10901
|
this.pickerRef.modalIsOpen = true;
|
|
@@ -10900,11 +10903,11 @@ const TabworthyDates = class {
|
|
|
10900
10903
|
if (!this.pickerRef)
|
|
10901
10904
|
return;
|
|
10902
10905
|
this.pickerRef.modalIsOpen = false;
|
|
10903
|
-
}, inline: this.inline }, index$1.h("tabworthy-dates-calendar", { key: '
|
|
10906
|
+
}, inline: this.inline }, index$1.h("tabworthy-dates-calendar", { key: '929272a053e0109e34d4b2d8456064fc14093912', 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 &&
|
|
10904
10907
|
((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
10905
|
-
this.chronoSupportedLocale && (index$1.h("div", { key: '
|
|
10908
|
+
this.chronoSupportedLocale && (index$1.h("div", { key: 'aead258880c9531e3fb72111f1fd47ebfa35931a', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
|
|
10906
10909
|
return (index$1.h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
|
|
10907
|
-
}))), this.errorState && (index$1.h("div", { key: '
|
|
10910
|
+
}))), this.errorState && (index$1.h("div", { key: '193fe31b36da600e9f222f2576c3bee2d4e0a427', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
10908
10911
|
}
|
|
10909
10912
|
get el() { return index$1.getElement(this); }
|
|
10910
10913
|
static get watchers() { return {
|
|
@@ -353,12 +353,15 @@ export class TabworthyDates {
|
|
|
353
353
|
this.selectDate.emit(this.internalValue);
|
|
354
354
|
}
|
|
355
355
|
announceDateChange(newValue) {
|
|
356
|
+
const newValueInIsoFormat = Array.isArray(newValue)
|
|
357
|
+
? newValue.map((date) => moment(date, this.format).toISOString())
|
|
358
|
+
: moment(newValue, this.format).toISOString();
|
|
356
359
|
let content = "";
|
|
357
|
-
if (Array.isArray(
|
|
358
|
-
if (
|
|
360
|
+
if (Array.isArray(newValueInIsoFormat)) {
|
|
361
|
+
if (newValueInIsoFormat.length === 1) {
|
|
359
362
|
content += `${this.datesLabels.startDate} `;
|
|
360
363
|
}
|
|
361
|
-
|
|
364
|
+
newValueInIsoFormat.forEach((value, index) => (content += `${index === 1 ? ` ${this.datesLabels.to} ` : ""}${Intl.DateTimeFormat(this.locale, {
|
|
362
365
|
weekday: "long",
|
|
363
366
|
day: "numeric",
|
|
364
367
|
month: "long",
|
|
@@ -371,7 +374,7 @@ export class TabworthyDates {
|
|
|
371
374
|
day: "numeric",
|
|
372
375
|
month: "long",
|
|
373
376
|
year: "numeric"
|
|
374
|
-
}).format(removeTimezoneOffset(new Date(
|
|
377
|
+
}).format(removeTimezoneOffset(new Date(newValueInIsoFormat)));
|
|
375
378
|
if (content.length === 0)
|
|
376
379
|
return;
|
|
377
380
|
content += ` ${this.datesLabels.selected}`;
|
|
@@ -419,7 +422,7 @@ export class TabworthyDates {
|
|
|
419
422
|
}
|
|
420
423
|
render() {
|
|
421
424
|
var _a;
|
|
422
|
-
return (h(Host, { key: '
|
|
425
|
+
return (h(Host, { key: '6fd878d7a0073344895525a82533925fcd24c372' }, h("label", { key: '550382a2ea99201b465fa9fd9ee90a917c5ff7e6', htmlFor: this.id ? `${this.id}-input` : undefined, class: this.getClassName("label") }, this.label), h("br", { key: 'fd6fb69543f81bef9a15157b94a25a5fa107ef70' }), h("div", { key: 'fcc9c10276e35f28435829eea17dfed27373f55c', class: this.getClassName("input-container") }, h("input", { key: '24da8c1582dc66f65a0eb6c6ab380b28bbf1c5ca', disabled: this.disabledState || this.disableFreeformInput, 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: '54cd337b5ddd3ea6aa6ecd59a8fadf2cb5b61026', 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: 'cd8bd92d251d3c2566c9da9f8039ccc2ab74750f', label: this.datesLabels.calendar, ref: (el) => (this.modalRef = el), onOpened: () => {
|
|
423
426
|
if (!this.pickerRef)
|
|
424
427
|
return;
|
|
425
428
|
this.pickerRef.modalIsOpen = true;
|
|
@@ -427,11 +430,11 @@ export class TabworthyDates {
|
|
|
427
430
|
if (!this.pickerRef)
|
|
428
431
|
return;
|
|
429
432
|
this.pickerRef.modalIsOpen = false;
|
|
430
|
-
}, inline: this.inline }, h("tabworthy-dates-calendar", { key: '
|
|
433
|
+
}, inline: this.inline }, h("tabworthy-dates-calendar", { key: '929272a053e0109e34d4b2d8456064fc14093912', 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 &&
|
|
431
434
|
((_a = this.quickButtons) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
432
|
-
this.chronoSupportedLocale && (h("div", { key: '
|
|
435
|
+
this.chronoSupportedLocale && (h("div", { key: 'aead258880c9531e3fb72111f1fd47ebfa35931a', class: this.getClassName("quick-group"), role: "group", "aria-label": "Quick selection" }, this.quickButtons.map((buttonText) => {
|
|
433
436
|
return (h("button", { class: this.getClassName("quick-button"), onClick: this.handleQuickButtonClick, disabled: this.disabledState, type: "button" }, buttonText));
|
|
434
|
-
}))), this.errorState && (h("div", { key: '
|
|
437
|
+
}))), this.errorState && (h("div", { key: '193fe31b36da600e9f222f2576c3bee2d4e0a427', class: this.getClassName("input-error"), id: this.id ? `${this.id}-error` : undefined, role: "status" }, this.errorMessage))));
|
|
435
438
|
}
|
|
436
439
|
static get is() { return "tabworthy-dates"; }
|
|
437
440
|
static get encapsulation() { return "scoped"; }
|