@ionic/core 8.8.20-dev.11791579113.1f843ab0 → 8.8.20-dev.11792194859.16be5d7f
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/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/{p-BE21dB_a.js → p-Bpr3edV8.js} +1 -1
- package/dist/cjs/ion-datetime-button.cjs.entry.js +28 -10
- package/dist/cjs/ion-datetime_3.cjs.entry.js +354 -30
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/datetime/datetime.ionic.css +144 -1
- package/dist/collection/components/datetime/datetime.ios.css +118 -0
- package/dist/collection/components/datetime/datetime.js +407 -27
- package/dist/collection/components/datetime/datetime.md.css +117 -0
- package/dist/collection/components/datetime/utils/state.js +18 -1
- package/dist/collection/components/datetime-button/datetime-button.js +28 -10
- package/dist/docs.json +151 -1
- package/dist/esm/{format-2WlZcMvG.js → format-BNGmd1mx.js} +1 -1
- package/dist/esm/ion-datetime-button.entry.js +29 -11
- package/dist/esm/ion-datetime_3.entry.js +355 -31
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/html.html-data.json +20 -0
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-4aa6153d.entry.js +4 -0
- package/dist/ionic/p-4f2e482f.entry.js +4 -0
- package/dist/ionic/{p-7k7Q1A38.js → p-CrgdPEJR.js} +1 -1
- package/dist/types/components/datetime/datetime-interface.d.ts +4 -0
- package/dist/types/components/datetime/datetime.d.ts +66 -2
- package/dist/types/components/datetime/utils/state.d.ts +5 -2
- package/dist/types/components.d.ts +33 -0
- package/hydrate/index.js +390 -40
- package/hydrate/index.mjs +390 -40
- package/package.json +1 -1
- package/dist/ionic/p-3a4f9b8a.entry.js +0 -4
- package/dist/ionic/p-f6768728.entry.js +0 -4
|
@@ -55,12 +55,12 @@ const DatetimeButton = class {
|
|
|
55
55
|
* to the locale specified on ion-datetime.
|
|
56
56
|
*/
|
|
57
57
|
this.setDateTimeText = async () => {
|
|
58
|
-
var _a, _b, _c, _d
|
|
58
|
+
var _a, _b, _c, _d;
|
|
59
59
|
const { datetimeEl, datetimePresentation } = this;
|
|
60
60
|
if (!datetimeEl) {
|
|
61
61
|
return;
|
|
62
62
|
}
|
|
63
|
-
const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
|
|
63
|
+
const { value, locale, formatOptions, hourCycle, preferWheel, multiple, selectionMode, titleSelectedDatesFormatter, } = datetimeEl;
|
|
64
64
|
const parsedValues = this.getParsedDateValues(value);
|
|
65
65
|
/**
|
|
66
66
|
* Both ion-datetime and ion-datetime-button default to today's date and
|
|
@@ -72,6 +72,8 @@ const DatetimeButton = class {
|
|
|
72
72
|
if (!parsedDatetimes) {
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
|
+
const isRangeMode = selectionMode === 'range';
|
|
76
|
+
const isMultipleMode = selectionMode === 'multiple' || (selectionMode === undefined && multiple);
|
|
75
77
|
/**
|
|
76
78
|
* If developers incorrectly use multiple="true"
|
|
77
79
|
* with non "date" datetimes, then just select
|
|
@@ -81,11 +83,12 @@ const DatetimeButton = class {
|
|
|
81
83
|
*/
|
|
82
84
|
const firstParsedDatetime = parsedDatetimes[0];
|
|
83
85
|
const computedHourCycle = format.getHourCycle(locale, hourCycle);
|
|
86
|
+
const dateFormatOptions = (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' };
|
|
84
87
|
this.dateText = this.timeText = undefined;
|
|
85
88
|
switch (datetimePresentation) {
|
|
86
89
|
case 'date-time':
|
|
87
90
|
case 'time-date':
|
|
88
|
-
const dateText = format.getLocalizedDateTime(locale, firstParsedDatetime,
|
|
91
|
+
const dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
|
|
89
92
|
const timeText = format.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
|
|
90
93
|
if (preferWheel) {
|
|
91
94
|
this.dateText = `${dateText} ${timeText}`;
|
|
@@ -96,7 +99,22 @@ const DatetimeButton = class {
|
|
|
96
99
|
}
|
|
97
100
|
break;
|
|
98
101
|
case 'date':
|
|
99
|
-
if (
|
|
102
|
+
if (isRangeMode && parsedValues.length === 2) {
|
|
103
|
+
// Range mode: display "startDate - endDate"
|
|
104
|
+
const startDate = format.getLocalizedDateTime(locale, parsedDatetimes[0], dateFormatOptions);
|
|
105
|
+
const endDate = format.getLocalizedDateTime(locale, parsedDatetimes.length > 1 ? parsedDatetimes[1] : parsedDatetimes[0], dateFormatOptions);
|
|
106
|
+
let rangeText = `${startDate} - ${endDate}`;
|
|
107
|
+
if (titleSelectedDatesFormatter !== undefined) {
|
|
108
|
+
try {
|
|
109
|
+
rangeText = titleSelectedDatesFormatter(parsedValues);
|
|
110
|
+
}
|
|
111
|
+
catch (e) {
|
|
112
|
+
index.printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
this.dateText = rangeText;
|
|
116
|
+
}
|
|
117
|
+
else if (isMultipleMode && parsedValues.length !== 1) {
|
|
100
118
|
let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
|
|
101
119
|
if (titleSelectedDatesFormatter !== undefined) {
|
|
102
120
|
try {
|
|
@@ -109,20 +127,20 @@ const DatetimeButton = class {
|
|
|
109
127
|
this.dateText = headerText;
|
|
110
128
|
}
|
|
111
129
|
else {
|
|
112
|
-
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime,
|
|
130
|
+
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
|
|
113
131
|
}
|
|
114
132
|
break;
|
|
115
133
|
case 'time':
|
|
116
134
|
this.timeText = format.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
|
|
117
135
|
break;
|
|
118
136
|
case 'month-year':
|
|
119
|
-
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, (
|
|
137
|
+
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'long', year: 'numeric' });
|
|
120
138
|
break;
|
|
121
139
|
case 'month':
|
|
122
|
-
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, (
|
|
140
|
+
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _c !== void 0 ? _c : { month: 'long' });
|
|
123
141
|
break;
|
|
124
142
|
case 'year':
|
|
125
|
-
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, (
|
|
143
|
+
this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { year: 'numeric' });
|
|
126
144
|
break;
|
|
127
145
|
}
|
|
128
146
|
};
|
|
@@ -343,11 +361,11 @@ const DatetimeButton = class {
|
|
|
343
361
|
render() {
|
|
344
362
|
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
|
|
345
363
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
346
|
-
return (index.h(index.Host, { key: '
|
|
364
|
+
return (index.h(index.Host, { key: 'b1bc06c9642af956c42e886af07e27176ba4a13a', class: theme.createColorClasses(color, {
|
|
347
365
|
[theme$1]: true,
|
|
348
366
|
[`${selectedButton}-active`]: datetimeActive,
|
|
349
367
|
['datetime-button-disabled']: disabled,
|
|
350
|
-
}) }, dateText && (index.h("button", { key: '
|
|
368
|
+
}) }, dateText && (index.h("button", { key: '3939366688b3be6db62b70b6a3b717819934560f', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { key: 'e4cf933fcfdb2c7559806af448c4ec8dfd5a5e14', name: "date-target" }, dateText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: 'b1c11e4c67bce14f5dfa8b69a15cde5b367b1c4a' }))), timeText && (index.h("button", { key: '708c2070eecabf09e3db6d8f8a45a76ecd53ccf8', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { key: '2885629c3fb033b234bfae0ec9038874e109b0de', name: "time-target" }, timeText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '4eed69bef9ed46fb1fd53605bcd05cd104e2505b' })))));
|
|
351
369
|
}
|
|
352
370
|
get el() { return index.getElement(this); }
|
|
353
371
|
};
|