@ionic/core 9.0.11-dev.11793728481.1fc40367 → 9.0.11-dev.11793792571.1765ff65
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-badge.js +1 -1
- package/components/ion-button.js +1 -1
- package/components/ion-content.js +1 -1
- package/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-input-password-toggle.js +1 -1
- package/components/ion-item-option.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/{p-B7ExaLVL.js → p-BCQSEpww.js} +1 -1
- package/components/p-Da8LCPwo.js +4 -0
- package/components/p-DirxxGzo.js +4 -0
- package/components/{p-BCYVFy50.js → p-py1vB-7U.js} +1 -1
- package/css/ionic/bundle.ionic.css +1 -1
- package/css/ionic/bundle.ionic.css.map +1 -1
- package/css/ionic/core.ionic.css +1 -1
- package/css/ionic/core.ionic.css.map +1 -1
- package/dist/cjs/ion-app_8.cjs.entry.js +13 -5
- package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-button_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime-button.cjs.entry.js +6 -33
- package/dist/cjs/ion-datetime.cjs.entry.js +36 -353
- package/dist/cjs/ion-item-option_3.cjs.entry.js +1 -1
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/badge/badge.ionic.css +1 -1
- package/dist/collection/components/button/button.ionic.css +1 -1
- package/dist/collection/components/content/content.ionic.css +352 -0
- package/dist/collection/components/content/{content.css → content.ios.css} +65 -41
- package/dist/collection/components/content/content.js +9 -5
- package/dist/collection/components/content/content.md.css +347 -0
- package/dist/collection/components/datetime/datetime.ionic.css +5 -179
- package/dist/collection/components/datetime/datetime.ios.css +2 -134
- package/dist/collection/components/datetime/datetime.js +33 -406
- package/dist/collection/components/datetime/datetime.md.css +0 -120
- package/dist/collection/components/datetime/utils/state.js +1 -18
- package/dist/collection/components/datetime-button/datetime-button.js +6 -34
- package/dist/collection/components/item-option/item-option.ionic.css +1 -1
- package/dist/docs.json +127 -160
- package/dist/esm/{format-DUHrIiJq.js → format-NT7iHsbA.js} +1 -1
- package/dist/esm/ion-app_8.entry.js +13 -5
- package/dist/esm/ion-avatar_3.entry.js +1 -1
- package/dist/esm/ion-button_2.entry.js +1 -1
- package/dist/esm/ion-datetime-button.entry.js +7 -34
- package/dist/esm/ion-datetime.entry.js +37 -354
- package/dist/esm/ion-item-option_3.entry.js +1 -1
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/html.html-data.json +0 -20
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-0743a26a.entry.js +4 -0
- package/dist/ionic/p-1d709b26.entry.js +4 -0
- package/dist/ionic/p-39e3be74.entry.js +4 -0
- package/dist/ionic/p-6e4ee264.entry.js +4 -0
- package/dist/ionic/{p-CaOPF8Xt.js → p-BtccSO5J.js} +1 -1
- package/dist/ionic/p-ad46d2fd.entry.js +4 -0
- package/dist/ionic/{p-8231e914.entry.js → p-b51eb274.entry.js} +1 -1
- package/dist/types/components/datetime/datetime-interface.d.ts +0 -4
- package/dist/types/components/datetime/datetime.d.ts +2 -71
- package/dist/types/components/datetime/utils/state.d.ts +2 -5
- package/dist/types/components.d.ts +0 -33
- package/hydrate/index.js +59 -403
- package/hydrate/index.mjs +59 -403
- package/package.json +1 -1
- package/components/p-ByE0slik.js +0 -4
- package/components/p-DktrWeJE.js +0 -4
- package/dist/ionic/p-41680415.entry.js +0 -4
- package/dist/ionic/p-56d77e95.entry.js +0 -4
- package/dist/ionic/p-a52cba2f.entry.js +0 -4
- package/dist/ionic/p-b30b468d.entry.js +0 -4
- package/dist/ionic/p-ceca04fb.entry.js +0 -4
|
@@ -349,108 +349,11 @@
|
|
|
349
349
|
|
|
350
350
|
:host .calendar-day-wrapper {
|
|
351
351
|
display: flex;
|
|
352
|
-
position: relative;
|
|
353
352
|
align-items: center;
|
|
354
353
|
justify-content: center;
|
|
355
354
|
min-width: 0;
|
|
356
355
|
min-height: 0;
|
|
357
356
|
overflow: visible;
|
|
358
|
-
/**
|
|
359
|
-
* Create a stacking context so the range track
|
|
360
|
-
* (::before with z-index: -1) stays behind the
|
|
361
|
-
* day button but above the host background.
|
|
362
|
-
*/
|
|
363
|
-
z-index: 0;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
/**
|
|
367
|
-
* Each day in the range draws its own piece of the track with a
|
|
368
|
-
* ::before. In-range days fill the cell, while the start and end
|
|
369
|
-
* caps cover the half between the pill center and the next day.
|
|
370
|
-
*
|
|
371
|
-
* Grid columns are `1fr`, so cell edges land on fractional pixels
|
|
372
|
-
* and a cell's track can fall a hairline short of its neighbor's.
|
|
373
|
-
* Each day therefore extends 1px toward the next day in the range,
|
|
374
|
-
* which the next day paints over except inside such a gap.
|
|
375
|
-
*
|
|
376
|
-
* @prop --range-background: The background color of the range selection track.
|
|
377
|
-
*/
|
|
378
|
-
:host .calendar-day-wrapper-in-range::before,
|
|
379
|
-
:host .calendar-day-wrapper-range-start::before,
|
|
380
|
-
:host .calendar-day-wrapper-range-end::before {
|
|
381
|
-
position: absolute;
|
|
382
|
-
top: 50%;
|
|
383
|
-
inset-inline-start: 0;
|
|
384
|
-
inset-inline-end: 0;
|
|
385
|
-
height: var(--range-track-height);
|
|
386
|
-
transform: translateY(-50%);
|
|
387
|
-
/**
|
|
388
|
-
* `--range-background` is translucent by default, so it is layered
|
|
389
|
-
* over the datetime background to paint an opaque track. Where two
|
|
390
|
-
* days overlap, the color stays the same instead of doubling up
|
|
391
|
-
* into a darker line.
|
|
392
|
-
*/
|
|
393
|
-
background: linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));
|
|
394
|
-
content: "";
|
|
395
|
-
z-index: -1;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
:host .calendar-day-wrapper-range-start::before {
|
|
399
|
-
inset-inline-start: 50%;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
:host .calendar-day-wrapper-range-end::before {
|
|
403
|
-
inset-inline-end: 50%;
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
/**
|
|
407
|
-
* Only extend toward a day that draws the track as well. The last
|
|
408
|
-
* day of a week is followed by the next row, and the next day is
|
|
409
|
-
* unpainted when it ends the selection or is disabled inside the
|
|
410
|
-
* range, so extending there would leave a 1px nub.
|
|
411
|
-
*/
|
|
412
|
-
:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+ .calendar-day-wrapper-in-range)::before,
|
|
413
|
-
:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+ .calendar-day-wrapper-range-end)::before,
|
|
414
|
-
:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+ .calendar-day-wrapper-in-range)::before,
|
|
415
|
-
:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+ .calendar-day-wrapper-range-end)::before {
|
|
416
|
-
inset-inline-end: -1px;
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
/**
|
|
420
|
-
* A range that continues onto the next week runs the track
|
|
421
|
-
* through the grid padding to the edge of the calendar.
|
|
422
|
-
*/
|
|
423
|
-
:host .calendar-day-wrapper-in-range:nth-child(7n)::before,
|
|
424
|
-
:host .calendar-day-wrapper-range-start:nth-child(7n)::before {
|
|
425
|
-
inset-inline-end: calc(var(--range-track-edge-overflow, 0px) * -1);
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,
|
|
429
|
-
:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before {
|
|
430
|
-
inset-inline-start: calc(var(--range-track-edge-overflow, 0px) * -1);
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
/**
|
|
434
|
-
* When a single day is both the start and end of the range,
|
|
435
|
-
* do not show a track since there is nothing to connect.
|
|
436
|
-
*/
|
|
437
|
-
:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before {
|
|
438
|
-
display: none;
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
/**
|
|
442
|
-
* When the component is disabled, fade the whole grid once instead of
|
|
443
|
-
* fading each day. Fading a day makes it its own compositing group, so
|
|
444
|
-
* the 1px that each day extends toward the next would be painted twice
|
|
445
|
-
* and read as a darker seam. The day buttons drop their own disabled
|
|
446
|
-
* opacity so the grid is the only thing applying it.
|
|
447
|
-
*/
|
|
448
|
-
:host(.datetime-disabled.datetime-range) .calendar-month-grid {
|
|
449
|
-
opacity: 0.4;
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
:host(.datetime-disabled.datetime-range) .calendar-month-grid .calendar-day[disabled] {
|
|
453
|
-
opacity: 1;
|
|
454
357
|
}
|
|
455
358
|
|
|
456
359
|
/**
|
|
@@ -997,29 +900,6 @@ ion-picker {
|
|
|
997
900
|
color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
|
|
998
901
|
}
|
|
999
902
|
|
|
1000
|
-
:host {
|
|
1001
|
-
--range-background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.12);
|
|
1002
|
-
--range-track-height: 42px;
|
|
1003
|
-
--range-track-edge-overflow: 10px;
|
|
1004
|
-
}
|
|
1005
|
-
|
|
1006
|
-
:host(.ion-color) {
|
|
1007
|
-
--range-background: rgba(var(--ion-color-base-rgb), 0.12);
|
|
1008
|
-
}
|
|
1009
|
-
|
|
1010
|
-
:host .calendar-day.calendar-day-range-start,
|
|
1011
|
-
:host .calendar-day.calendar-day-range-end {
|
|
1012
|
-
border-radius: 50%;
|
|
1013
|
-
background: var(--ion-color-primary, #0054e9);
|
|
1014
|
-
color: var(--ion-color-primary-contrast, #fff);
|
|
1015
|
-
}
|
|
1016
|
-
|
|
1017
|
-
:host(.ion-color) .calendar-day.calendar-day-range-start,
|
|
1018
|
-
:host(.ion-color) .calendar-day.calendar-day-range-end {
|
|
1019
|
-
background: var(--ion-color-base);
|
|
1020
|
-
color: var(--ion-color-contrast);
|
|
1021
|
-
}
|
|
1022
|
-
|
|
1023
903
|
:host .datetime-time {
|
|
1024
904
|
-webkit-padding-start: 16px;
|
|
1025
905
|
padding-inline-start: 16px;
|
|
@@ -74,7 +74,7 @@ export const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
|
|
|
74
74
|
* Given a locale, a date, the selected date(s), and today's date,
|
|
75
75
|
* generate the state for a given calendar day button.
|
|
76
76
|
*/
|
|
77
|
-
export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues
|
|
77
|
+
export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
|
|
78
78
|
/**
|
|
79
79
|
* activeParts signals what day(s) are currently selected in the datetime.
|
|
80
80
|
* If multiple="true", this will be an array, but the logic in this util
|
|
@@ -90,20 +90,6 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
|
|
|
90
90
|
const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
|
|
91
91
|
const isToday = isSameDay(refParts, todayParts);
|
|
92
92
|
const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
|
|
93
|
-
/**
|
|
94
|
-
* Range state: determine if this day is the range start, end, or in between.
|
|
95
|
-
*/
|
|
96
|
-
let isRangeStart = false;
|
|
97
|
-
let isRangeEnd = false;
|
|
98
|
-
let isInRange = false;
|
|
99
|
-
if (rangeParts) {
|
|
100
|
-
const { start, end } = rangeParts;
|
|
101
|
-
isRangeStart = isSameDay(refParts, start);
|
|
102
|
-
if (end) {
|
|
103
|
-
isRangeEnd = isSameDay(refParts, end);
|
|
104
|
-
isInRange = !disabled && !isRangeStart && !isRangeEnd && isAfter(refParts, start) && isBefore(refParts, end);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
93
|
/**
|
|
108
94
|
* Note that we always return one object regardless of whether activeParts
|
|
109
95
|
* was an array, since we pare down to one value for isActive.
|
|
@@ -112,9 +98,6 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
|
|
|
112
98
|
disabled,
|
|
113
99
|
isActive,
|
|
114
100
|
isToday,
|
|
115
|
-
isRangeStart,
|
|
116
|
-
isRangeEnd,
|
|
117
|
-
isInRange,
|
|
118
101
|
ariaSelected: isActive ? 'true' : null,
|
|
119
102
|
ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
|
|
120
103
|
text: refParts.day != null ? getDay(locale, refParts) : null,
|
|
@@ -6,7 +6,6 @@ import { componentOnReady, addEventListener } from "../../utils/helpers";
|
|
|
6
6
|
import { printIonError } from "../../utils/logging/index";
|
|
7
7
|
import { createColorClasses } from "../../utils/theme";
|
|
8
8
|
import { getIonTheme } from "../../global/ionic-global";
|
|
9
|
-
import { isAfter } from "../datetime/utils/comparison";
|
|
10
9
|
import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
|
|
11
10
|
import { getHourCycle } from "../datetime/utils/helpers";
|
|
12
11
|
import { parseDate } from "../datetime/utils/parse";
|
|
@@ -54,7 +53,7 @@ export class DatetimeButton {
|
|
|
54
53
|
if (!datetimeEl) {
|
|
55
54
|
return;
|
|
56
55
|
}
|
|
57
|
-
const { value, locale, formatOptions, hourCycle, preferWheel, multiple,
|
|
56
|
+
const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
|
|
58
57
|
const parsedValues = this.getParsedDateValues(value);
|
|
59
58
|
/**
|
|
60
59
|
* Both ion-datetime and ion-datetime-button default to today's date and
|
|
@@ -66,8 +65,6 @@ export class DatetimeButton {
|
|
|
66
65
|
if (!parsedDatetimes) {
|
|
67
66
|
return;
|
|
68
67
|
}
|
|
69
|
-
const isRangeMode = selectionMode === 'range';
|
|
70
|
-
const isMultipleMode = selectionMode === 'multiple' || (selectionMode === undefined && multiple);
|
|
71
68
|
/**
|
|
72
69
|
* If developers incorrectly use multiple="true"
|
|
73
70
|
* with non "date" datetimes, then just select
|
|
@@ -77,12 +74,11 @@ export class DatetimeButton {
|
|
|
77
74
|
*/
|
|
78
75
|
const firstParsedDatetime = parsedDatetimes[0];
|
|
79
76
|
const computedHourCycle = getHourCycle(locale, hourCycle);
|
|
80
|
-
const dateFormatOptions = formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' };
|
|
81
77
|
this.dateText = this.timeText = undefined;
|
|
82
78
|
switch (datetimePresentation) {
|
|
83
79
|
case 'date-time':
|
|
84
80
|
case 'time-date':
|
|
85
|
-
const dateText = getLocalizedDateTime(locale, firstParsedDatetime,
|
|
81
|
+
const dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
|
|
86
82
|
const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
|
|
87
83
|
if (preferWheel) {
|
|
88
84
|
this.dateText = `${dateText} ${timeText}`;
|
|
@@ -93,31 +89,7 @@ export class DatetimeButton {
|
|
|
93
89
|
}
|
|
94
90
|
break;
|
|
95
91
|
case 'date':
|
|
96
|
-
if (
|
|
97
|
-
/**
|
|
98
|
-
* Use the first and last entries in date order, matching
|
|
99
|
-
* how ion-datetime reads a range value.
|
|
100
|
-
*/
|
|
101
|
-
let startIndex = 0;
|
|
102
|
-
let endIndex = parsedValues.length - 1;
|
|
103
|
-
if (isAfter(parsedDatetimes[startIndex], parsedDatetimes[endIndex])) {
|
|
104
|
-
[startIndex, endIndex] = [endIndex, startIndex];
|
|
105
|
-
}
|
|
106
|
-
const rangeValues = [parsedValues[startIndex], parsedValues[endIndex]];
|
|
107
|
-
const startDate = getLocalizedDateTime(locale, parsedDatetimes[startIndex], dateFormatOptions);
|
|
108
|
-
const endDate = getLocalizedDateTime(locale, parsedDatetimes[endIndex], dateFormatOptions);
|
|
109
|
-
let rangeText = `${startDate} - ${endDate}`;
|
|
110
|
-
if (titleSelectedDatesFormatter !== undefined) {
|
|
111
|
-
try {
|
|
112
|
-
rangeText = titleSelectedDatesFormatter(rangeValues);
|
|
113
|
-
}
|
|
114
|
-
catch (e) {
|
|
115
|
-
printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
this.dateText = rangeText;
|
|
119
|
-
}
|
|
120
|
-
else if (isMultipleMode && parsedValues.length !== 1) {
|
|
92
|
+
if (multiple && parsedValues.length !== 1) {
|
|
121
93
|
let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
|
|
122
94
|
if (titleSelectedDatesFormatter !== undefined) {
|
|
123
95
|
try {
|
|
@@ -130,7 +102,7 @@ export class DatetimeButton {
|
|
|
130
102
|
this.dateText = headerText;
|
|
131
103
|
}
|
|
132
104
|
else {
|
|
133
|
-
this.dateText = getLocalizedDateTime(locale, firstParsedDatetime,
|
|
105
|
+
this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
|
|
134
106
|
}
|
|
135
107
|
break;
|
|
136
108
|
case 'time':
|
|
@@ -367,11 +339,11 @@ export class DatetimeButton {
|
|
|
367
339
|
render() {
|
|
368
340
|
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
|
|
369
341
|
const theme = getIonTheme(this);
|
|
370
|
-
return (h(Host, { key: '
|
|
342
|
+
return (h(Host, { key: '73ba9456313d46e63db37c48b23b38e8e1f88ec6', class: createColorClasses(color, {
|
|
371
343
|
[theme]: true,
|
|
372
344
|
[`${selectedButton}-active`]: datetimeActive,
|
|
373
345
|
['datetime-button-disabled']: disabled,
|
|
374
|
-
}) }, dateText && (h("button", { key: '
|
|
346
|
+
}) }, dateText && (h("button", { key: '51f70f2d08823ccd399976c09152c278e0ef108e', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '8422d6ca39d3bdecbefe6686afb9c2bcdb271a54', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'f4c1c9c6bcdf772eb326371b9ab3795f7fbc0848' }))), timeText && (h("button", { key: '709a8bc9d0231bfc3c580bcca9065ccc66f4b7da', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '2860f54f5a73aa3a42397a1a72619d6369a79025', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '306f594bffa84fea1f5e2528cab5ee56c0364e34' })))));
|
|
375
347
|
}
|
|
376
348
|
static get is() { return "ion-datetime-button"; }
|
|
377
349
|
static get encapsulation() { return "shadow"; }
|
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
:host(.item-option-bold) {
|
|
264
264
|
--background: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
|
|
265
265
|
--background-activated: var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
|
|
266
|
-
--color: var(--ion-color-primary-contrast, var(--token-text-
|
|
266
|
+
--color: var(--ion-color-primary-contrast, var(--token-text-light, var(--token-primitives-base-white, #ffffff)));
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
:host(.item-option-bold.ion-color) {
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-11-
|
|
2
|
+
"timestamp": "2026-11-04T11:44:59",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.45.2",
|
|
@@ -10737,47 +10737,164 @@
|
|
|
10737
10737
|
{
|
|
10738
10738
|
"name": "--background",
|
|
10739
10739
|
"annotation": "prop",
|
|
10740
|
-
"docs": "Background of the content"
|
|
10740
|
+
"docs": "Background of the content",
|
|
10741
|
+
"mode": "ionic"
|
|
10742
|
+
},
|
|
10743
|
+
{
|
|
10744
|
+
"name": "--background",
|
|
10745
|
+
"annotation": "prop",
|
|
10746
|
+
"docs": "Background of the content",
|
|
10747
|
+
"mode": "ios"
|
|
10748
|
+
},
|
|
10749
|
+
{
|
|
10750
|
+
"name": "--background",
|
|
10751
|
+
"annotation": "prop",
|
|
10752
|
+
"docs": "Background of the content",
|
|
10753
|
+
"mode": "md"
|
|
10754
|
+
},
|
|
10755
|
+
{
|
|
10756
|
+
"name": "--color",
|
|
10757
|
+
"annotation": "prop",
|
|
10758
|
+
"docs": "Color of the content",
|
|
10759
|
+
"mode": "ionic"
|
|
10741
10760
|
},
|
|
10742
10761
|
{
|
|
10743
10762
|
"name": "--color",
|
|
10744
10763
|
"annotation": "prop",
|
|
10745
|
-
"docs": "Color of the content"
|
|
10764
|
+
"docs": "Color of the content",
|
|
10765
|
+
"mode": "ios"
|
|
10766
|
+
},
|
|
10767
|
+
{
|
|
10768
|
+
"name": "--color",
|
|
10769
|
+
"annotation": "prop",
|
|
10770
|
+
"docs": "Color of the content",
|
|
10771
|
+
"mode": "md"
|
|
10772
|
+
},
|
|
10773
|
+
{
|
|
10774
|
+
"name": "--keyboard-offset",
|
|
10775
|
+
"annotation": "prop",
|
|
10776
|
+
"docs": "Keyboard offset of the content",
|
|
10777
|
+
"mode": "ionic"
|
|
10746
10778
|
},
|
|
10747
10779
|
{
|
|
10748
10780
|
"name": "--keyboard-offset",
|
|
10749
10781
|
"annotation": "prop",
|
|
10750
|
-
"docs": "Keyboard offset of the content"
|
|
10782
|
+
"docs": "Keyboard offset of the content",
|
|
10783
|
+
"mode": "ios"
|
|
10784
|
+
},
|
|
10785
|
+
{
|
|
10786
|
+
"name": "--keyboard-offset",
|
|
10787
|
+
"annotation": "prop",
|
|
10788
|
+
"docs": "Keyboard offset of the content",
|
|
10789
|
+
"mode": "md"
|
|
10790
|
+
},
|
|
10791
|
+
{
|
|
10792
|
+
"name": "--offset-bottom",
|
|
10793
|
+
"annotation": "prop",
|
|
10794
|
+
"docs": "Offset bottom of the content",
|
|
10795
|
+
"mode": "ionic"
|
|
10796
|
+
},
|
|
10797
|
+
{
|
|
10798
|
+
"name": "--offset-bottom",
|
|
10799
|
+
"annotation": "prop",
|
|
10800
|
+
"docs": "Offset bottom of the content",
|
|
10801
|
+
"mode": "ios"
|
|
10751
10802
|
},
|
|
10752
10803
|
{
|
|
10753
10804
|
"name": "--offset-bottom",
|
|
10754
10805
|
"annotation": "prop",
|
|
10755
|
-
"docs": "Offset bottom of the content"
|
|
10806
|
+
"docs": "Offset bottom of the content",
|
|
10807
|
+
"mode": "md"
|
|
10808
|
+
},
|
|
10809
|
+
{
|
|
10810
|
+
"name": "--offset-top",
|
|
10811
|
+
"annotation": "prop",
|
|
10812
|
+
"docs": "Offset top of the content",
|
|
10813
|
+
"mode": "ionic"
|
|
10814
|
+
},
|
|
10815
|
+
{
|
|
10816
|
+
"name": "--offset-top",
|
|
10817
|
+
"annotation": "prop",
|
|
10818
|
+
"docs": "Offset top of the content",
|
|
10819
|
+
"mode": "ios"
|
|
10756
10820
|
},
|
|
10757
10821
|
{
|
|
10758
10822
|
"name": "--offset-top",
|
|
10759
10823
|
"annotation": "prop",
|
|
10760
|
-
"docs": "Offset top of the content"
|
|
10824
|
+
"docs": "Offset top of the content",
|
|
10825
|
+
"mode": "md"
|
|
10826
|
+
},
|
|
10827
|
+
{
|
|
10828
|
+
"name": "--padding-bottom",
|
|
10829
|
+
"annotation": "prop",
|
|
10830
|
+
"docs": "Bottom padding of the content",
|
|
10831
|
+
"mode": "ionic"
|
|
10832
|
+
},
|
|
10833
|
+
{
|
|
10834
|
+
"name": "--padding-bottom",
|
|
10835
|
+
"annotation": "prop",
|
|
10836
|
+
"docs": "Bottom padding of the content",
|
|
10837
|
+
"mode": "ios"
|
|
10761
10838
|
},
|
|
10762
10839
|
{
|
|
10763
10840
|
"name": "--padding-bottom",
|
|
10764
10841
|
"annotation": "prop",
|
|
10765
|
-
"docs": "Bottom padding of the content"
|
|
10842
|
+
"docs": "Bottom padding of the content",
|
|
10843
|
+
"mode": "md"
|
|
10766
10844
|
},
|
|
10767
10845
|
{
|
|
10768
10846
|
"name": "--padding-end",
|
|
10769
10847
|
"annotation": "prop",
|
|
10770
|
-
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content"
|
|
10848
|
+
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content",
|
|
10849
|
+
"mode": "ionic"
|
|
10850
|
+
},
|
|
10851
|
+
{
|
|
10852
|
+
"name": "--padding-end",
|
|
10853
|
+
"annotation": "prop",
|
|
10854
|
+
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content",
|
|
10855
|
+
"mode": "ios"
|
|
10856
|
+
},
|
|
10857
|
+
{
|
|
10858
|
+
"name": "--padding-end",
|
|
10859
|
+
"annotation": "prop",
|
|
10860
|
+
"docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content",
|
|
10861
|
+
"mode": "md"
|
|
10862
|
+
},
|
|
10863
|
+
{
|
|
10864
|
+
"name": "--padding-start",
|
|
10865
|
+
"annotation": "prop",
|
|
10866
|
+
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content",
|
|
10867
|
+
"mode": "ionic"
|
|
10771
10868
|
},
|
|
10772
10869
|
{
|
|
10773
10870
|
"name": "--padding-start",
|
|
10774
10871
|
"annotation": "prop",
|
|
10775
|
-
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content"
|
|
10872
|
+
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content",
|
|
10873
|
+
"mode": "ios"
|
|
10874
|
+
},
|
|
10875
|
+
{
|
|
10876
|
+
"name": "--padding-start",
|
|
10877
|
+
"annotation": "prop",
|
|
10878
|
+
"docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content",
|
|
10879
|
+
"mode": "md"
|
|
10880
|
+
},
|
|
10881
|
+
{
|
|
10882
|
+
"name": "--padding-top",
|
|
10883
|
+
"annotation": "prop",
|
|
10884
|
+
"docs": "Top padding of the content",
|
|
10885
|
+
"mode": "ionic"
|
|
10886
|
+
},
|
|
10887
|
+
{
|
|
10888
|
+
"name": "--padding-top",
|
|
10889
|
+
"annotation": "prop",
|
|
10890
|
+
"docs": "Top padding of the content",
|
|
10891
|
+
"mode": "ios"
|
|
10776
10892
|
},
|
|
10777
10893
|
{
|
|
10778
10894
|
"name": "--padding-top",
|
|
10779
10895
|
"annotation": "prop",
|
|
10780
|
-
"docs": "Top padding of the content"
|
|
10896
|
+
"docs": "Top padding of the content",
|
|
10897
|
+
"mode": "md"
|
|
10781
10898
|
}
|
|
10782
10899
|
],
|
|
10783
10900
|
"slots": [
|
|
@@ -10897,22 +11014,6 @@
|
|
|
10897
11014
|
"name": "part",
|
|
10898
11015
|
"text": "calendar-day disabled - The calendar day that is disabled."
|
|
10899
11016
|
},
|
|
10900
|
-
{
|
|
10901
|
-
"name": "part",
|
|
10902
|
-
"text": "range-start - The calendar day button that is the start of a range selection."
|
|
10903
|
-
},
|
|
10904
|
-
{
|
|
10905
|
-
"name": "part",
|
|
10906
|
-
"text": "range-end - The calendar day button that is the end of a range selection."
|
|
10907
|
-
},
|
|
10908
|
-
{
|
|
10909
|
-
"name": "part",
|
|
10910
|
-
"text": "range-selection - The calendar day button that is part of a range selection (includes start and end)."
|
|
10911
|
-
},
|
|
10912
|
-
{
|
|
10913
|
-
"name": "part",
|
|
10914
|
-
"text": "range-track - The track that connects the start and end days of a range selection."
|
|
10915
|
-
},
|
|
10916
11017
|
{
|
|
10917
11018
|
"name": "part",
|
|
10918
11019
|
"text": "datetime-header - The datetime header contains the content for the `title` slot and the selected date."
|
|
@@ -11145,35 +11246,6 @@
|
|
|
11145
11246
|
"getter": false,
|
|
11146
11247
|
"setter": false
|
|
11147
11248
|
},
|
|
11148
|
-
{
|
|
11149
|
-
"name": "endDateLabel",
|
|
11150
|
-
"type": "string",
|
|
11151
|
-
"complexType": {
|
|
11152
|
-
"original": "string",
|
|
11153
|
-
"resolved": "string",
|
|
11154
|
-
"references": {}
|
|
11155
|
-
},
|
|
11156
|
-
"mutable": false,
|
|
11157
|
-
"attr": "end-date-label",
|
|
11158
|
-
"reflectToAttr": false,
|
|
11159
|
-
"docs": "The text shown in the datetime header when the end of the range\nis empty, also used by screen readers to announce the end date.\nOnly applies when `selectionMode=\"range\"`.",
|
|
11160
|
-
"docsTags": [
|
|
11161
|
-
{
|
|
11162
|
-
"name": "default",
|
|
11163
|
-
"text": "'End date'"
|
|
11164
|
-
}
|
|
11165
|
-
],
|
|
11166
|
-
"default": "'End date'",
|
|
11167
|
-
"values": [
|
|
11168
|
-
{
|
|
11169
|
-
"type": "string"
|
|
11170
|
-
}
|
|
11171
|
-
],
|
|
11172
|
-
"optional": false,
|
|
11173
|
-
"required": false,
|
|
11174
|
-
"getter": false,
|
|
11175
|
-
"setter": false
|
|
11176
|
-
},
|
|
11177
11249
|
{
|
|
11178
11250
|
"name": "firstDayOfWeek",
|
|
11179
11251
|
"type": "number",
|
|
@@ -11570,17 +11642,12 @@
|
|
|
11570
11642
|
"reflectToAttr": false,
|
|
11571
11643
|
"docs": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.",
|
|
11572
11644
|
"docsTags": [
|
|
11573
|
-
{
|
|
11574
|
-
"name": "deprecated",
|
|
11575
|
-
"text": "Use `selectionMode=\"multiple\"` instead."
|
|
11576
|
-
},
|
|
11577
11645
|
{
|
|
11578
11646
|
"name": "default",
|
|
11579
11647
|
"text": "false"
|
|
11580
11648
|
}
|
|
11581
11649
|
],
|
|
11582
11650
|
"default": "false",
|
|
11583
|
-
"deprecation": "Use `selectionMode=\"multiple\"` instead.",
|
|
11584
11651
|
"values": [
|
|
11585
11652
|
{
|
|
11586
11653
|
"type": "boolean"
|
|
@@ -11739,37 +11806,6 @@
|
|
|
11739
11806
|
"getter": false,
|
|
11740
11807
|
"setter": false
|
|
11741
11808
|
},
|
|
11742
|
-
{
|
|
11743
|
-
"name": "selectionMode",
|
|
11744
|
-
"type": "\"multiple\" | \"range\" | undefined",
|
|
11745
|
-
"complexType": {
|
|
11746
|
-
"original": "'multiple' | 'range'",
|
|
11747
|
-
"resolved": "\"multiple\" | \"range\" | undefined",
|
|
11748
|
-
"references": {}
|
|
11749
|
-
},
|
|
11750
|
-
"mutable": false,
|
|
11751
|
-
"attr": "selection-mode",
|
|
11752
|
-
"reflectToAttr": false,
|
|
11753
|
-
"docs": "Controls the date selection behavior.\n`'multiple'` enables selecting multiple individual dates.\n`'range'` enables selecting a start and end date range.\nWhen unset, single-date selection is used.\n\nRange selection only works with `presentation=\"date\"` and `preferWheel=\"false\"`.",
|
|
11754
|
-
"docsTags": [],
|
|
11755
|
-
"values": [
|
|
11756
|
-
{
|
|
11757
|
-
"value": "multiple",
|
|
11758
|
-
"type": "string"
|
|
11759
|
-
},
|
|
11760
|
-
{
|
|
11761
|
-
"value": "range",
|
|
11762
|
-
"type": "string"
|
|
11763
|
-
},
|
|
11764
|
-
{
|
|
11765
|
-
"type": "undefined"
|
|
11766
|
-
}
|
|
11767
|
-
],
|
|
11768
|
-
"optional": true,
|
|
11769
|
-
"required": false,
|
|
11770
|
-
"getter": false,
|
|
11771
|
-
"setter": false
|
|
11772
|
-
},
|
|
11773
11809
|
{
|
|
11774
11810
|
"name": "showAdjacentDays",
|
|
11775
11811
|
"type": "boolean",
|
|
@@ -11949,35 +11985,6 @@
|
|
|
11949
11985
|
"getter": false,
|
|
11950
11986
|
"setter": false
|
|
11951
11987
|
},
|
|
11952
|
-
{
|
|
11953
|
-
"name": "startDateLabel",
|
|
11954
|
-
"type": "string",
|
|
11955
|
-
"complexType": {
|
|
11956
|
-
"original": "string",
|
|
11957
|
-
"resolved": "string",
|
|
11958
|
-
"references": {}
|
|
11959
|
-
},
|
|
11960
|
-
"mutable": false,
|
|
11961
|
-
"attr": "start-date-label",
|
|
11962
|
-
"reflectToAttr": false,
|
|
11963
|
-
"docs": "The text shown in the datetime header when the start of the range\nis empty, also used by screen readers to announce the start date.\nOnly applies when `selectionMode=\"range\"`.",
|
|
11964
|
-
"docsTags": [
|
|
11965
|
-
{
|
|
11966
|
-
"name": "default",
|
|
11967
|
-
"text": "'Start date'"
|
|
11968
|
-
}
|
|
11969
|
-
],
|
|
11970
|
-
"default": "'Start date'",
|
|
11971
|
-
"values": [
|
|
11972
|
-
{
|
|
11973
|
-
"type": "string"
|
|
11974
|
-
}
|
|
11975
|
-
],
|
|
11976
|
-
"optional": false,
|
|
11977
|
-
"required": false,
|
|
11978
|
-
"getter": false,
|
|
11979
|
-
"setter": false
|
|
11980
|
-
},
|
|
11981
11988
|
{
|
|
11982
11989
|
"name": "theme",
|
|
11983
11990
|
"type": "\"ios\" | \"md\" | \"ionic\"",
|
|
@@ -12159,12 +12166,6 @@
|
|
|
12159
12166
|
"Promise": {
|
|
12160
12167
|
"location": "global",
|
|
12161
12168
|
"id": "global::Promise"
|
|
12162
|
-
},
|
|
12163
|
-
"DatetimeParts": {
|
|
12164
|
-
"location": "import",
|
|
12165
|
-
"path": "./datetime-interface",
|
|
12166
|
-
"id": "src/components/datetime/datetime-interface.ts::DatetimeParts",
|
|
12167
|
-
"referenceLocation": "DatetimeParts"
|
|
12168
12169
|
}
|
|
12169
12170
|
},
|
|
12170
12171
|
"return": "Promise<void>"
|
|
@@ -12334,24 +12335,6 @@
|
|
|
12334
12335
|
"docs": "The width of the ring around the focused element.",
|
|
12335
12336
|
"mode": "ionic"
|
|
12336
12337
|
},
|
|
12337
|
-
{
|
|
12338
|
-
"name": "--range-background",
|
|
12339
|
-
"annotation": "prop",
|
|
12340
|
-
"docs": "The background color of the range selection track.",
|
|
12341
|
-
"mode": "ionic"
|
|
12342
|
-
},
|
|
12343
|
-
{
|
|
12344
|
-
"name": "--range-background",
|
|
12345
|
-
"annotation": "prop",
|
|
12346
|
-
"docs": "The background color of the range selection track.",
|
|
12347
|
-
"mode": "ios"
|
|
12348
|
-
},
|
|
12349
|
-
{
|
|
12350
|
-
"name": "--range-background",
|
|
12351
|
-
"annotation": "prop",
|
|
12352
|
-
"docs": "The background color of the range selection track.",
|
|
12353
|
-
"mode": "md"
|
|
12354
|
-
},
|
|
12355
12338
|
{
|
|
12356
12339
|
"name": "--title-color",
|
|
12357
12340
|
"annotation": "prop",
|
|
@@ -12468,22 +12451,6 @@
|
|
|
12468
12451
|
"name": "previous-button",
|
|
12469
12452
|
"docs": "The button used to navigate to the previous month when using a grid style layout."
|
|
12470
12453
|
},
|
|
12471
|
-
{
|
|
12472
|
-
"name": "range-end",
|
|
12473
|
-
"docs": "The calendar day button that is the end of a range selection."
|
|
12474
|
-
},
|
|
12475
|
-
{
|
|
12476
|
-
"name": "range-selection",
|
|
12477
|
-
"docs": "The calendar day button that is part of a range selection (includes start and end)."
|
|
12478
|
-
},
|
|
12479
|
-
{
|
|
12480
|
-
"name": "range-start",
|
|
12481
|
-
"docs": "The calendar day button that is the start of a range selection."
|
|
12482
|
-
},
|
|
12483
|
-
{
|
|
12484
|
-
"name": "range-track",
|
|
12485
|
-
"docs": "The track that connects the start and end days of a range selection."
|
|
12486
|
-
},
|
|
12487
12454
|
{
|
|
12488
12455
|
"name": "time-button",
|
|
12489
12456
|
"docs": "The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."
|