@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
|
@@ -9,7 +9,7 @@ import { i as isRTL } from './dir-Dj4J3LkD.js';
|
|
|
9
9
|
import { c as createColorClasses } from './theme-BUF_V-Kg.js';
|
|
10
10
|
import { b as chevronForward, c as chevronBack, d as caretDownSharp, e as chevronDown, f as caretUpSharp } from './index-BkJpfpXI.js';
|
|
11
11
|
import { b as getIonMode, c as getIonTheme } from './ionic-global-DSbFWXp3.js';
|
|
12
|
-
import { r as removeDateTzOffset, g as getNextMonth, a as getPreviousMonth, b as getTodayLabel, c as getYear, d as getHourCycle, e as getInternalHourValue, f as getFormattedHour, h as addTimePadding, i as getLocalizedDayPeriod, j as isBefore, k as isSameDay, l as isAfter, m as is24Hour, n as getNumDaysInMonth, o as getDay, p as generateDayAriaLabel,
|
|
12
|
+
import { r as removeDateTzOffset, g as getNextMonth, a as getPreviousMonth, b as getTodayLabel, c as getYear, d as getHourCycle, e as getInternalHourValue, f as getFormattedHour, h as addTimePadding, i as getLocalizedDayPeriod, j as isBefore, k as isSameDay, l as isAfter, m as is24Hour, n as getNumDaysInMonth, o as getDay, p as generateDayAriaLabel, v as validateParts, q as getPartsFromCalendarDay, s as getNextYear, t as getPreviousYear, u as getEndOfWeek, w as getStartOfWeek, x as getPreviousDay, y as getNextDay, z as getPreviousWeek, A as getNextWeek, B as parseMinParts, C as parseMaxParts, D as parseDate, E as warnIfValueOutOfBounds, F as parseAmPm, G as clampDate, H as convertToArrayOfNumbers, I as convertDataToISO, J as getClosestValidDate, K as isMonthFirstLocale, L as isLocaleDayPeriodRTL, M as calculateHourFromAMPM, N as getMonthAndYear, O as getLocalizedTime, P as getLocalizedDateTime, Q as formatValue } from './format-NT7iHsbA.js';
|
|
13
13
|
import './index-ZjP4CjeZ.js';
|
|
14
14
|
import './framework-delegate-99Ms_INy.js';
|
|
15
15
|
import './gesture-controller-B_gJaBk0.js';
|
|
@@ -605,7 +605,7 @@ const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
|
|
|
605
605
|
* Given a locale, a date, the selected date(s), and today's date,
|
|
606
606
|
* generate the state for a given calendar day button.
|
|
607
607
|
*/
|
|
608
|
-
const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues
|
|
608
|
+
const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
|
|
609
609
|
/**
|
|
610
610
|
* activeParts signals what day(s) are currently selected in the datetime.
|
|
611
611
|
* If multiple="true", this will be an array, but the logic in this util
|
|
@@ -621,20 +621,6 @@ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts
|
|
|
621
621
|
const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
|
|
622
622
|
const isToday = isSameDay(refParts, todayParts);
|
|
623
623
|
const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
|
|
624
|
-
/**
|
|
625
|
-
* Range state: determine if this day is the range start, end, or in between.
|
|
626
|
-
*/
|
|
627
|
-
let isRangeStart = false;
|
|
628
|
-
let isRangeEnd = false;
|
|
629
|
-
let isInRange = false;
|
|
630
|
-
if (rangeParts) {
|
|
631
|
-
const { start, end } = rangeParts;
|
|
632
|
-
isRangeStart = isSameDay(refParts, start);
|
|
633
|
-
if (end) {
|
|
634
|
-
isRangeEnd = isSameDay(refParts, end);
|
|
635
|
-
isInRange = !disabled && !isRangeStart && !isRangeEnd && isAfter(refParts, start) && isBefore(refParts, end);
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
624
|
/**
|
|
639
625
|
* Note that we always return one object regardless of whether activeParts
|
|
640
626
|
* was an array, since we pare down to one value for isActive.
|
|
@@ -643,9 +629,6 @@ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts
|
|
|
643
629
|
disabled,
|
|
644
630
|
isActive,
|
|
645
631
|
isToday,
|
|
646
|
-
isRangeStart,
|
|
647
|
-
isRangeEnd,
|
|
648
|
-
isInRange,
|
|
649
632
|
ariaSelected: isActive ? 'true' : null,
|
|
650
633
|
ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
|
|
651
634
|
text: refParts.day != null ? getDay(locale, refParts) : null,
|
|
@@ -768,11 +751,11 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
|
|
|
768
751
|
}
|
|
769
752
|
};
|
|
770
753
|
|
|
771
|
-
const datetimeIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible;z-index:0}:host .calendar-day-wrapper-in-range::before,:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;height:var(--range-track-height);-webkit-transform:translateY(-50%);transform:translateY(-50%);background:-webkit-gradient(linear, left top, left bottom, from(var(--range-background)), to(var(--range-background))), -webkit-gradient(linear, left top, left bottom, from(var(--background)), to(var(--background)));background:linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));content:"";z-index:-1}:host .calendar-day-wrapper-range-start::before{inset-inline-start:50%}:host .calendar-day-wrapper-range-end::before{inset-inline-end:50%}:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before{inset-inline-end:-1px}:host .calendar-day-wrapper-in-range:nth-child(7n)::before,:host .calendar-day-wrapper-range-start:nth-child(7n)::before{inset-inline-end:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before{inset-inline-start:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}:host(.datetime-disabled.datetime-range) .calendar-month-grid{opacity:0.4}:host(.datetime-disabled.datetime-range) .calendar-month-grid .calendar-day[disabled]{opacity:1}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--focus-ring-color:var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));--focus-ring-width:var(--token-border-size-050, var(--token-scale-050, 2px));--body-opacity:0;--year-opacity:0}:host .calendar-body{opacity:var(--body-opacity)}:host .datetime-year{opacity:var(--year-opacity)}:host(.datetime-ready) .calendar-body{--body-opacity:1}:host(.datetime-ready) .datetime-year{--year-opacity:1}:host .datetime-header{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-400, var(--token-scale-400, 16px));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start;-ms-flex-pack:justify;justify-content:space-between;height:var(--token-scale-1400, 56px);margin-bottom:var(--token-space-200, var(--token-scale-200, 8px));border-bottom:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df)}:host .datetime-header .datetime-title{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-header .datetime-selected-date{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-primitives-neutral-1000, #383e45)}.calendar-action-buttons{padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));-ms-flex-align:center;align-items:center;height:var(--token-scale-1400, 56px);-webkit-box-sizing:border-box;box-sizing:border-box}.calendar-month-year{-ms-flex:1 0 0px;flex:1 0 0}.calendar-month-year-toggle{border-radius:var(--token-border-radius-full, 999px);font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));min-width:var(--token-scale-1600, 64px);min-height:var(--token-scale-1000, 40px);border:var(--focus-ring-width) solid transparent;color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}@media (any-hover: hover){.calendar-month-year-toggle:hover{background:var(--token-primitives-neutral-200, #ebeef2)}}.calendar-month-year-toggle.ion-focused{border-color:var(--focus-ring-color)}.calendar-month-year-toggle.ion-activated{background:var(--token-primitives-neutral-200, #ebeef2)}.calendar-next-prev ion-button.button-has-icon-only{--color:var(--token-primitives-neutral-1000, #383e45);--background-activated:var(--token-primitives-neutral-200, #ebeef2);--background-hover:var(--token-primitives-neutral-200, #ebeef2);--background-hover-opacity:1;min-height:var(--token-scale-1000, 40px)}.calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native){border:var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));outline:none}.calendar-days-of-week{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-150, 0.015em);line-height:1.666667;text-transform:uppercase;-ms-flex-line-pack:center;align-content:center;height:var(--token-scale-1200, 48px);color:var(--token-primitives-neutral-800, #6c727a)}.calendar-day{border-radius:var(--token-border-radius-full, 999px);-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.428571;width:var(--token-scale-1200, 48px);min-width:var(--token-scale-1200, 48px);height:var(--token-scale-1200, 48px);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day[disabled]:not(.calendar-day-constrained){color:var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}.calendar-day.calendar-day-today{color:var(--token-text-select, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active.calendar-day-adjacent-day{background:var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)))}.calendar-day:focus-visible{border:var(--focus-ring-width) solid var(--focus-ring-color)}@media (any-hover: hover){.calendar-day:not([disabled]):not(:active):not(.calendar-day-in-range):hover{background:var(--token-semantics-primary-200, var(--token-primitives-blue-200, #e4e8ff))}}.calendar-day:active,.calendar-day.calendar-day-adjacent-day:active{background:var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa)))}.calendar-day.calendar-day-adjacent-day{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a))}.calendar-day.calendar-day-active.calendar-day-adjacent-day{color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host{--range-background:var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)));--range-track-height:var(--token-scale-1200, 48px)}:host .calendar-day.calendar-day-range-start,:host .calendar-day.calendar-day-range-end{border-radius:var(--token-border-radius-full, 999px);background:var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}.calendar-day.calendar-day-in-range{border-radius:0;background:none;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day.calendar-day-today.calendar-day-in-range{color:var(--token-text-select, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}:host .calendar-day.calendar-day-today.calendar-day-range-start,:host .calendar-day.calendar-day-today.calendar-day-range-end{color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}@media (any-hover: hover){.calendar-day.calendar-day-range-start:not([disabled]):not(:active):hover,.calendar-day.calendar-day-range-end:not([disabled]):not(:active):hover{background:var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)))}}.calendar-day.calendar-day-range-start:active,.calendar-day.calendar-day-range-end:active{background:var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)))}.calendar-day.calendar-day-in-range:active{background:var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa)))}:host(.datetime-disabled.datetime-range) .calendar-day[disabled]:not(.calendar-day-constrained){color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-adjacent-day[disabled]{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a))}:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-today[disabled]{color:var(--token-text-select, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-range-start[disabled],:host(.datetime-disabled.datetime-range) .calendar-day.calendar-day-range-end[disabled]{color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}:host(.datetime-readonly) .calendar-day.calendar-day-range-start[disabled],:host(.datetime-readonly) .calendar-day.calendar-day-range-end[disabled]{color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}:host(.datetime-readonly) .calendar-day.calendar-day-in-range[disabled]{color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.datetime-readonly) .calendar-day.calendar-day-today.calendar-day-in-range[disabled]{color:var(--token-text-select, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}:host(.datetime-readonly) .calendar-day.calendar-day-today.calendar-day-range-start[disabled],:host(.datetime-readonly) .calendar-day.calendar-day-today.calendar-day-range-end[disabled]{color:var(--token-text-inverse, var(--token-primitives-base-white, #ffffff))}:host .datetime-time{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host .datetime-time .time-header{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-time button{-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px));padding-top:var(--token-space-0, var(--token-scale-0, 0px));padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;border-radius:var(--token-border-radius-full, 999px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--token-scale-800, 32px);background-color:var(--token-primitives-neutral-100, #f6f7fa);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host .datetime-footer{padding-left:0;padding-right:0;padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:0;margin-left:0;margin-right:0;margin-top:var(--token-space-200, var(--token-scale-200, 8px));margin-bottom:0;border-left:0;border-right:0;border-top:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);border-bottom:0}:host .datetime-buttons .datetime-action-buttons,.datetime-action-buttons .datetime-action-buttons-container,::slotted([slot=buttons]){-ms-flex-flow:column;flex-flow:column;-ms-flex-align:stretch;align-items:stretch;gap:var(--token-space-200, var(--token-scale-200, 8px))}`;
|
|
754
|
+
const datetimeIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--focus-ring-color:var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));--focus-ring-width:var(--token-border-radius-025, var(--token-scale-050, 2px));--body-opacity:0;--year-opacity:0}:host .calendar-body{opacity:var(--body-opacity)}:host .datetime-year{opacity:var(--year-opacity)}:host(.datetime-ready) .calendar-body{--body-opacity:1}:host(.datetime-ready) .datetime-year{--year-opacity:1}:host .datetime-header{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-400, var(--token-scale-400, 16px));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start;-ms-flex-pack:justify;justify-content:space-between;height:var(--token-scale-1400, 56px);margin-bottom:var(--token-space-200, var(--token-scale-200, 8px));border-bottom:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df)}:host .datetime-header .datetime-title{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-header .datetime-selected-date{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-primitives-neutral-1000, #383e45)}.calendar-action-buttons{padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));-ms-flex-align:center;align-items:center;height:var(--token-scale-1400, 56px);-webkit-box-sizing:border-box;box-sizing:border-box}.calendar-month-year{-ms-flex:1 0 0px;flex:1 0 0}.calendar-month-year-toggle{border-radius:var(--token-border-radius-full, 999px);font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));min-width:var(--token-scale-1600, 64px);min-height:var(--token-scale-1000, 40px);border:var(--focus-ring-width) solid transparent;color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}@media (any-hover: hover){.calendar-month-year-toggle:hover{background:var(--token-primitives-neutral-200, #ebeef2)}}.calendar-month-year-toggle.ion-focused{border-color:var(--focus-ring-color)}.calendar-month-year-toggle.ion-activated{background:var(--token-primitives-neutral-200, #ebeef2)}.calendar-next-prev ion-button.button-has-icon-only{--color:var(--token-primitives-neutral-1000, #383e45);--background-activated:var(--token-primitives-neutral-200, #ebeef2);--background-hover:var(--token-primitives-neutral-200, #ebeef2);--background-hover-opacity:1;min-height:var(--token-scale-1000, 40px)}.calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native){border:var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));outline:none}.calendar-days-of-week{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-150, 0.015em);line-height:1.666667;text-transform:uppercase;-ms-flex-line-pack:center;align-content:center;height:var(--token-scale-1200, 48px);color:var(--token-primitives-neutral-800, #6c727a)}.calendar-day{border-radius:var(--token-border-radius-full, 999px);-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.428571;width:var(--token-scale-1200, 48px);min-width:var(--token-scale-1200, 48px);height:var(--token-scale-1200, 48px);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}.calendar-day[disabled]:not(.calendar-day-constrained){color:var(--token-primitives-neutral-500, #9fa5ad)}.calendar-day.calendar-day-today{color:var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active.calendar-day-adjacent-day{background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))}.calendar-day:focus-visible{border:var(--focus-ring-width) solid var(--focus-ring-color)}@media (any-hover: hover){.calendar-day:not([disabled]):not(:active):hover{background:var(--token-semantics-primary-200, var(--token-primitives-blue-200, #e4e8ff))}}.calendar-day:active,.calendar-day.calendar-day-adjacent-day:active{background:var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa)))}.calendar-day.calendar-day-adjacent-day{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a))}.calendar-day.calendar-day-active.calendar-day-adjacent-day{color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host .datetime-time{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host .datetime-time .time-header{font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-100, 0.01em);line-height:1.5;color:var(--token-primitives-neutral-800, #6c727a)}:host .datetime-time button{-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px));padding-top:var(--token-space-0, var(--token-scale-0, 0px));padding-bottom:var(--token-space-0, var(--token-scale-0, 0px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;border-radius:var(--token-border-radius-full, 999px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:var(--token-scale-800, 32px);background-color:var(--token-primitives-neutral-100, #f6f7fa);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host .datetime-footer{padding-left:0;padding-right:0;padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:0;margin-left:0;margin-right:0;margin-top:var(--token-space-200, var(--token-scale-200, 8px));margin-bottom:0;border-left:0;border-right:0;border-top:solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);border-bottom:0}:host .datetime-buttons .datetime-action-buttons,.datetime-action-buttons .datetime-action-buttons-container,::slotted([slot=buttons]){-ms-flex-flow:column;flex-flow:column;-ms-flex-align:stretch;align-items:stretch;gap:var(--token-space-200, var(--token-scale-200, 8px))}`;
|
|
772
755
|
|
|
773
|
-
const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible;z-index:0}:host .calendar-day-wrapper-in-range::before,:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;height:var(--range-track-height);-webkit-transform:translateY(-50%);transform:translateY(-50%);background:-webkit-gradient(linear, left top, left bottom, from(var(--range-background)), to(var(--range-background))), -webkit-gradient(linear, left top, left bottom, from(var(--background)), to(var(--background)));background:linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));content:"";z-index:-1}:host .calendar-day-wrapper-range-start::before{inset-inline-start:50%}:host .calendar-day-wrapper-range-end::before{inset-inline-end:50%}:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before{inset-inline-end:-1px}:host .calendar-day-wrapper-in-range:nth-child(7n)::before,:host .calendar-day-wrapper-range-start:nth-child(7n)::before{inset-inline-end:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before{inset-inline-start:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}:host(.datetime-disabled.datetime-range) .calendar-month-grid{opacity:0.4}:host(.datetime-disabled.datetime-range) .calendar-month-grid .calendar-day[disabled]{opacity:1}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-button{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host(.ion-color) .calendar-action-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-action-buttons .calendar-next-prev{-ms-flex-align:stretch;align-items:stretch}.calendar-next-prev ion-button{--padding-top:0;--padding-bottom:0;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.65em;line-height:0.67}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.12);font-size:min(1.375rem, 35.2px)}:host(.ion-color) .calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.12)}:host .calendar-day.calendar-day-today{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary, #0054e9);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host{--range-background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.12);--range-track-height:40px;--range-track-edge-overflow:8px}:host(.ion-color){--range-background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.datetime-range) .calendar-day-wrapper{height:auto}:host .calendar-day.calendar-day-range-start,:host .calendar-day.calendar-day-range-end{border-radius:50%;background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-range-start,:host(.ion-color) .calendar-day.calendar-day-range-end{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons,::slotted([slot=buttons]){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons,::slotted([slot=buttons]){width:100%}`;
|
|
756
|
+
const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-button{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host(.ion-color) .calendar-action-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-action-buttons .calendar-next-prev{-ms-flex-align:stretch;align-items:stretch}.calendar-next-prev ion-button{--padding-top:0;--padding-bottom:0;--padding-start:5px;--padding-end:5px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;min-height:32px}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.65em;line-height:0.67}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);font-size:min(1.375rem, 35.2px)}:host(.ion-color) .calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary, #0054e9);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons,::slotted([slot=buttons]){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons,::slotted([slot=buttons]){width:100%}`;
|
|
774
757
|
|
|
775
|
-
const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible;z-index:0}:host .calendar-day-wrapper-in-range::before,:host .calendar-day-wrapper-range-start::before,:host .calendar-day-wrapper-range-end::before{position:absolute;top:50%;inset-inline-start:0;inset-inline-end:0;height:var(--range-track-height);-webkit-transform:translateY(-50%);transform:translateY(-50%);background:-webkit-gradient(linear, left top, left bottom, from(var(--range-background)), to(var(--range-background))), -webkit-gradient(linear, left top, left bottom, from(var(--background)), to(var(--background)));background:linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));content:"";z-index:-1}:host .calendar-day-wrapper-range-start::before{inset-inline-start:50%}:host .calendar-day-wrapper-range-end::before{inset-inline-end:50%}:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-in-range)::before,:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+.calendar-day-wrapper-range-end)::before{inset-inline-end:-1px}:host .calendar-day-wrapper-in-range:nth-child(7n)::before,:host .calendar-day-wrapper-range-start:nth-child(7n)::before{inset-inline-end:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before{inset-inline-start:calc(var(--range-track-edge-overflow, 0px) * -1)}:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before{display:none}:host(.datetime-disabled.datetime-range) .calendar-month-grid{opacity:0.4}:host(.datetime-disabled.datetime-range) .calendar-month-grid .calendar-day[disabled]{opacity:1}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color){--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-primary, #0054e9);color:var(--title-color)}:host(.ion-color) .datetime-header{background:var(--ion-color-base)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-next-prev ion-button{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.8em}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-primary, #0054e9);color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-primary, #0054e9);background:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host{--range-background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.12);--range-track-height:42px;--range-track-edge-overflow:10px}:host(.ion-color){--range-background:rgba(var(--ion-color-base-rgb), 0.12)}:host .calendar-day.calendar-day-range-start,:host .calendar-day.calendar-day-range-end{border-radius:50%;background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-range-start,:host(.ion-color) .calendar-day.calendar-day-range-end{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
|
|
758
|
+
const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-cover){width:100%}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .datetime-year{display:none}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons,::slotted([slot=buttons]),.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}.calendar-day[disabled]{pointer-events:none}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{display:-ms-flexbox;display:flex;border:none;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.in-item){position:static}.calendar-month-year{min-width:0}.calendar-month-year-toggle{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle ion-icon{-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host{}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host .calendar-body,:host .datetime-year{opacity:0}:host(.datetime-ready) .calendar-body,:host(.datetime-ready) .datetime-year{opacity:1}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host .calendar-action-buttons ion-button{--background:transparent}.calendar-day{border-radius:50%;font-family:var(--ion-font-family, inherit)}:host .calendar-day[disabled]{opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-next-prev{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start}.calendar-next-prev ion-button ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000)}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.calendar-month-year-toggle::after{right:0;left:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host .datetime-action-buttons{-ms-flex-pack:justify;justify-content:space-between}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color){--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-primary, #0054e9);color:var(--title-color)}:host(.ion-color) .datetime-header{background:var(--ion-color-base)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-next-prev ion-button{--padding-top:12px;--padding-end:12px;--padding-bottom:12px;--padding-start:12px;--border-radius:50%;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:3rem;height:3rem}.calendar-next-prev ion-button ion-icon[slot=icon-only]{font-size:1.8em}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-primary, #0054e9);color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-primary, #0054e9);background:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
|
|
776
759
|
|
|
777
760
|
const Datetime = class {
|
|
778
761
|
constructor(hostRef) {
|
|
@@ -785,11 +768,6 @@ const Datetime = class {
|
|
|
785
768
|
this.ionStyle = createEvent(this, "ionStyle", 7);
|
|
786
769
|
this.ionRender = createEvent(this, "ionRender", 7);
|
|
787
770
|
this.inputId = `ion-dt-${datetimeIds++}`;
|
|
788
|
-
/**
|
|
789
|
-
* Set when the user completes a range interactively, so processValue
|
|
790
|
-
* can skip navigation and keep the calendar on the current month.
|
|
791
|
-
*/
|
|
792
|
-
this.rangeCompletedInteractively = false;
|
|
793
771
|
/**
|
|
794
772
|
* Set when the user selects a value, cleared when it's confirmed
|
|
795
773
|
* or `processValue` runs (`reset()`, or `value` being set to a
|
|
@@ -863,22 +841,8 @@ const Datetime = class {
|
|
|
863
841
|
/**
|
|
864
842
|
* If `true`, multiple dates can be selected at once. Only
|
|
865
843
|
* applies to `presentation="date"` and `preferWheel="false"`.
|
|
866
|
-
*
|
|
867
|
-
* @deprecated Use `selectionMode="multiple"` instead.
|
|
868
844
|
*/
|
|
869
845
|
this.multiple = false;
|
|
870
|
-
/**
|
|
871
|
-
* The text shown in the datetime header when the start of the range
|
|
872
|
-
* is empty, also used by screen readers to announce the start date.
|
|
873
|
-
* Only applies when `selectionMode="range"`.
|
|
874
|
-
*/
|
|
875
|
-
this.startDateLabel = 'Start date';
|
|
876
|
-
/**
|
|
877
|
-
* The text shown in the datetime header when the end of the range
|
|
878
|
-
* is empty, also used by screen readers to announce the end date.
|
|
879
|
-
* Only applies when `selectionMode="range"`.
|
|
880
|
-
*/
|
|
881
|
-
this.endDateLabel = 'End date';
|
|
882
846
|
/**
|
|
883
847
|
* If `true`, a header will be shown above the calendar
|
|
884
848
|
* picker. This will include both the slotted title, and
|
|
@@ -931,8 +895,8 @@ const Datetime = class {
|
|
|
931
895
|
*/
|
|
932
896
|
this.preferWheel = false;
|
|
933
897
|
this.warnIfIncorrectValueUsage = () => {
|
|
934
|
-
const { value } = this;
|
|
935
|
-
if (!
|
|
898
|
+
const { multiple, value } = this;
|
|
899
|
+
if (!multiple && Array.isArray(value)) {
|
|
936
900
|
/**
|
|
937
901
|
* We do some processing on the `value` array so
|
|
938
902
|
* that it looks more like an array when logged to
|
|
@@ -941,13 +905,7 @@ const Datetime = class {
|
|
|
941
905
|
* Default toString() behavior: a,b
|
|
942
906
|
* Custom behavior: ['a', 'b']
|
|
943
907
|
*/
|
|
944
|
-
printIonWarning(`[ion-datetime] - An array of values was passed, but
|
|
945
|
-
|
|
946
|
-
Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
|
|
947
|
-
`, this.el);
|
|
948
|
-
}
|
|
949
|
-
if (this.isRangeMode && Array.isArray(value) && value.length > 2) {
|
|
950
|
-
printIonWarning(`[ion-datetime] - More than 2 values were passed with selectionMode="range". Only the first and last values will be used.
|
|
908
|
+
printIonWarning(`[ion-datetime] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
|
|
951
909
|
|
|
952
910
|
Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
|
|
953
911
|
`, this.el);
|
|
@@ -973,9 +931,6 @@ const Datetime = class {
|
|
|
973
931
|
};
|
|
974
932
|
this.getActivePart = () => {
|
|
975
933
|
const { activeParts } = this;
|
|
976
|
-
if (this.isRangeParts(activeParts)) {
|
|
977
|
-
return activeParts.start;
|
|
978
|
-
}
|
|
979
934
|
return Array.isArray(activeParts) ? activeParts[0] : activeParts;
|
|
980
935
|
};
|
|
981
936
|
this.closeParentOverlay = (role) => {
|
|
@@ -990,33 +945,6 @@ const Datetime = class {
|
|
|
990
945
|
...parts,
|
|
991
946
|
};
|
|
992
947
|
};
|
|
993
|
-
/**
|
|
994
|
-
* Checks whether the span from start to end contains any disabled day.
|
|
995
|
-
* Used by range mode to prevent selecting across disabled dates.
|
|
996
|
-
*/
|
|
997
|
-
this.rangeContainsDisabledDate = (start, end) => {
|
|
998
|
-
const { minParts, maxParts, parsedDayValues, parsedMonthValues, parsedYearValues, isDateEnabled } = this;
|
|
999
|
-
let cursor = getNextDay(start);
|
|
1000
|
-
while (isBefore(cursor, end)) {
|
|
1001
|
-
if (isDayDisabled(cursor, minParts, maxParts, parsedDayValues) ||
|
|
1002
|
-
(parsedMonthValues !== undefined && !parsedMonthValues.includes(cursor.month)) ||
|
|
1003
|
-
(parsedYearValues !== undefined && !parsedYearValues.includes(cursor.year))) {
|
|
1004
|
-
return true;
|
|
1005
|
-
}
|
|
1006
|
-
if (isDateEnabled) {
|
|
1007
|
-
try {
|
|
1008
|
-
if (!isDateEnabled(convertDataToISO(cursor))) {
|
|
1009
|
-
return true;
|
|
1010
|
-
}
|
|
1011
|
-
}
|
|
1012
|
-
catch {
|
|
1013
|
-
// Swallow user callback exceptions during validation
|
|
1014
|
-
}
|
|
1015
|
-
}
|
|
1016
|
-
cursor = getNextDay(cursor);
|
|
1017
|
-
}
|
|
1018
|
-
return false;
|
|
1019
|
-
};
|
|
1020
948
|
this.setActiveParts = (parts, removeDate = false) => {
|
|
1021
949
|
/** if the datetime component is in readonly mode,
|
|
1022
950
|
* allow browsing of the calendar without changing
|
|
@@ -1026,7 +954,7 @@ const Datetime = class {
|
|
|
1026
954
|
return;
|
|
1027
955
|
}
|
|
1028
956
|
this.hasUnconfirmedSelection = true;
|
|
1029
|
-
const { minParts, maxParts, activeParts } = this;
|
|
957
|
+
const { multiple, minParts, maxParts, activeParts } = this;
|
|
1030
958
|
/**
|
|
1031
959
|
* When setting the active parts, it is possible
|
|
1032
960
|
* to set invalid data. For example,
|
|
@@ -1039,10 +967,7 @@ const Datetime = class {
|
|
|
1039
967
|
*/
|
|
1040
968
|
const validatedParts = validateParts(parts, minParts, maxParts);
|
|
1041
969
|
this.setWorkingParts(validatedParts);
|
|
1042
|
-
if (
|
|
1043
|
-
this.setActivePartsRange(validatedParts);
|
|
1044
|
-
}
|
|
1045
|
-
else if (this.isMultipleMode) {
|
|
970
|
+
if (multiple) {
|
|
1046
971
|
const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
|
|
1047
972
|
if (removeDate) {
|
|
1048
973
|
this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
|
|
@@ -1062,26 +987,6 @@ const Datetime = class {
|
|
|
1062
987
|
}
|
|
1063
988
|
this.confirm();
|
|
1064
989
|
};
|
|
1065
|
-
/**
|
|
1066
|
-
* Handles range selection logic when a day is clicked.
|
|
1067
|
-
*
|
|
1068
|
-
* Creating a new range: first click sets start, second sets end.
|
|
1069
|
-
* Modifying an existing range:
|
|
1070
|
-
* - Before range → new start
|
|
1071
|
-
* - Within range → new end
|
|
1072
|
-
* - After range → new end
|
|
1073
|
-
* If the resulting span contains a disabled date, start a new range instead.
|
|
1074
|
-
*/
|
|
1075
|
-
this.setActivePartsRange = (parts) => {
|
|
1076
|
-
const current = this.rangeParts;
|
|
1077
|
-
if (!current || isBefore(parts, current.start) || this.rangeContainsDisabledDate(current.start, parts)) {
|
|
1078
|
-
this.activeParts = { start: parts };
|
|
1079
|
-
}
|
|
1080
|
-
else {
|
|
1081
|
-
this.rangeCompletedInteractively = true;
|
|
1082
|
-
this.activeParts = { start: current.start, end: parts };
|
|
1083
|
-
}
|
|
1084
|
-
};
|
|
1085
990
|
this.initializeKeyboardListeners = () => {
|
|
1086
991
|
const calendarBodyRef = this.calendarBodyRef;
|
|
1087
992
|
if (!calendarBodyRef) {
|
|
@@ -1493,59 +1398,6 @@ const Datetime = class {
|
|
|
1493
1398
|
if (hasValue) {
|
|
1494
1399
|
warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
|
|
1495
1400
|
}
|
|
1496
|
-
/**
|
|
1497
|
-
* Range mode: convert the value array into DatetimeRangeParts.
|
|
1498
|
-
*/
|
|
1499
|
-
if (this.isRangeMode) {
|
|
1500
|
-
/**
|
|
1501
|
-
* The calendar navigates to the start of the range, or to the default
|
|
1502
|
-
* date when there is nothing selected, so that an empty range mode
|
|
1503
|
-
* opens on the same month as the other selection modes.
|
|
1504
|
-
*/
|
|
1505
|
-
let navigateTo;
|
|
1506
|
-
if (hasValue && Array.isArray(valueToProcess)) {
|
|
1507
|
-
let rangeValues = valueToProcess;
|
|
1508
|
-
// If more than 2 entries, use first and last
|
|
1509
|
-
if (rangeValues.length > 2) {
|
|
1510
|
-
rangeValues = [rangeValues[0], rangeValues[rangeValues.length - 1]];
|
|
1511
|
-
}
|
|
1512
|
-
let startParts = rangeValues[0];
|
|
1513
|
-
let endParts = rangeValues.length > 1 ? rangeValues[1] : undefined;
|
|
1514
|
-
// Normalize reversed pairs so earlier date is start
|
|
1515
|
-
if (endParts && isAfter(startParts, endParts)) {
|
|
1516
|
-
const temp = startParts;
|
|
1517
|
-
startParts = endParts;
|
|
1518
|
-
endParts = temp;
|
|
1519
|
-
}
|
|
1520
|
-
this.activeParts = endParts ? { start: startParts, end: endParts } : { start: startParts };
|
|
1521
|
-
/**
|
|
1522
|
-
* When the user just completed the range interactively, stay on the
|
|
1523
|
-
* current month instead of jumping back to the start. The flag is
|
|
1524
|
-
* set in setActivePartsRange and consumed here.
|
|
1525
|
-
*/
|
|
1526
|
-
if (endParts && this.rangeCompletedInteractively) {
|
|
1527
|
-
this.rangeCompletedInteractively = false;
|
|
1528
|
-
return;
|
|
1529
|
-
}
|
|
1530
|
-
navigateTo = startParts;
|
|
1531
|
-
}
|
|
1532
|
-
else {
|
|
1533
|
-
this.activeParts = [];
|
|
1534
|
-
navigateTo = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
|
|
1535
|
-
}
|
|
1536
|
-
const targetValue = clampDate(navigateTo, minParts, maxParts);
|
|
1537
|
-
const { month, day, year } = targetValue;
|
|
1538
|
-
const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
|
|
1539
|
-
const bodyIsVisible = el.classList.contains('datetime-ready');
|
|
1540
|
-
const { isGridStyle, showMonthAndYear } = this;
|
|
1541
|
-
if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
|
|
1542
|
-
this.animateToDate(targetValue);
|
|
1543
|
-
}
|
|
1544
|
-
else {
|
|
1545
|
-
this.setWorkingParts({ month, day, year, hour: 0, minute: 0, ampm: 'am' });
|
|
1546
|
-
}
|
|
1547
|
-
return;
|
|
1548
|
-
}
|
|
1549
1401
|
/**
|
|
1550
1402
|
* If there are multiple values, clamp to the last one.
|
|
1551
1403
|
* This is because the last value is the one that the user
|
|
@@ -1707,27 +1559,6 @@ const Datetime = class {
|
|
|
1707
1559
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1708
1560
|
return hasDatePresentation && !preferWheel;
|
|
1709
1561
|
}
|
|
1710
|
-
get isMultipleMode() {
|
|
1711
|
-
return this.selectionMode === 'multiple' || (this.selectionMode === undefined && this.multiple);
|
|
1712
|
-
}
|
|
1713
|
-
get isRangeMode() {
|
|
1714
|
-
return this.selectionMode === 'range';
|
|
1715
|
-
}
|
|
1716
|
-
/**
|
|
1717
|
-
* Type guard: returns true if the given activeParts is a DatetimeRangeParts object.
|
|
1718
|
-
*/
|
|
1719
|
-
isRangeParts(parts) {
|
|
1720
|
-
return this.isRangeMode && parts !== null && typeof parts === 'object' && !Array.isArray(parts) && 'start' in parts;
|
|
1721
|
-
}
|
|
1722
|
-
/**
|
|
1723
|
-
* Returns the current range parts if in range mode, or undefined otherwise.
|
|
1724
|
-
*/
|
|
1725
|
-
get rangeParts() {
|
|
1726
|
-
if (this.isRangeParts(this.activeParts)) {
|
|
1727
|
-
return this.activeParts;
|
|
1728
|
-
}
|
|
1729
|
-
return undefined;
|
|
1730
|
-
}
|
|
1731
1562
|
yearValuesChanged() {
|
|
1732
1563
|
this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
|
|
1733
1564
|
}
|
|
@@ -1763,19 +1594,6 @@ const Datetime = class {
|
|
|
1763
1594
|
*/
|
|
1764
1595
|
async confirm(closeOverlay = false) {
|
|
1765
1596
|
const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
|
|
1766
|
-
/**
|
|
1767
|
-
* In range mode, only confirm when both start and end are selected.
|
|
1768
|
-
*/
|
|
1769
|
-
if (this.isRangeMode) {
|
|
1770
|
-
if (!this.isRangeParts(activeParts) || !activeParts.end) {
|
|
1771
|
-
return;
|
|
1772
|
-
}
|
|
1773
|
-
this.setValue([convertDataToISO(activeParts.start), convertDataToISO(activeParts.end)]);
|
|
1774
|
-
if (closeOverlay) {
|
|
1775
|
-
this.closeParentOverlay(CONFIRM_ROLE);
|
|
1776
|
-
}
|
|
1777
|
-
return;
|
|
1778
|
-
}
|
|
1779
1597
|
/**
|
|
1780
1598
|
* We only update the value if the presentation is not a calendar picker.
|
|
1781
1599
|
*/
|
|
@@ -1811,22 +1629,6 @@ const Datetime = class {
|
|
|
1811
1629
|
* @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
|
|
1812
1630
|
*/
|
|
1813
1631
|
async reset(startDate) {
|
|
1814
|
-
if (this.isRangeMode) {
|
|
1815
|
-
/**
|
|
1816
|
-
* In range mode, reset clears the full range. If a startDate
|
|
1817
|
-
* is provided, the calendar navigates to that month without
|
|
1818
|
-
* selecting anything so the user begins a fresh selection.
|
|
1819
|
-
*/
|
|
1820
|
-
this.activeParts = [];
|
|
1821
|
-
if (startDate) {
|
|
1822
|
-
const parsed = parseDate(startDate);
|
|
1823
|
-
if (parsed) {
|
|
1824
|
-
const target = Array.isArray(parsed) ? parsed[0] : parsed;
|
|
1825
|
-
this.setWorkingParts(target);
|
|
1826
|
-
}
|
|
1827
|
-
}
|
|
1828
|
-
return;
|
|
1829
|
-
}
|
|
1830
1632
|
this.processValue(startDate);
|
|
1831
1633
|
}
|
|
1832
1634
|
/**
|
|
@@ -2062,11 +1864,8 @@ const Datetime = class {
|
|
|
2062
1864
|
});
|
|
2063
1865
|
}
|
|
2064
1866
|
componentWillLoad() {
|
|
2065
|
-
const { el, formatOptions, highlightedDates, multiple,
|
|
2066
|
-
if (
|
|
2067
|
-
printIonWarning('[ion-datetime] - The "multiple" property is deprecated. Use selectionMode="multiple" instead.', el);
|
|
2068
|
-
}
|
|
2069
|
-
if (this.isMultipleMode) {
|
|
1867
|
+
const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
|
|
1868
|
+
if (multiple) {
|
|
2070
1869
|
if (presentation !== 'date') {
|
|
2071
1870
|
printIonWarning('[ion-datetime] - Multiple date selection is only supported for presentation="date".', el);
|
|
2072
1871
|
}
|
|
@@ -2074,17 +1873,6 @@ const Datetime = class {
|
|
|
2074
1873
|
printIonWarning('[ion-datetime] - Multiple date selection is not supported with preferWheel="true".', el);
|
|
2075
1874
|
}
|
|
2076
1875
|
}
|
|
2077
|
-
if (this.isRangeMode) {
|
|
2078
|
-
if (presentation !== 'date') {
|
|
2079
|
-
printIonWarning('[ion-datetime] - Range selection is only supported for presentation="date".', el);
|
|
2080
|
-
}
|
|
2081
|
-
if (preferWheel) {
|
|
2082
|
-
printIonWarning('[ion-datetime] - Range selection is not supported with preferWheel="true".', el);
|
|
2083
|
-
}
|
|
2084
|
-
}
|
|
2085
|
-
if (selectionMode !== undefined && multiple) {
|
|
2086
|
-
printIonWarning('[ion-datetime] - Both "selectionMode" and "multiple" are set. "selectionMode" takes precedence.', el);
|
|
2087
|
-
}
|
|
2088
1876
|
if (highlightedDates !== undefined) {
|
|
2089
1877
|
if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
|
|
2090
1878
|
printIonWarning('[ion-datetime] - The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
|
|
@@ -2139,12 +1927,6 @@ const Datetime = class {
|
|
|
2139
1927
|
* is disabled or readonly.
|
|
2140
1928
|
*/
|
|
2141
1929
|
const isButtonDisabled = disabled || readonly;
|
|
2142
|
-
/**
|
|
2143
|
-
* In range mode, the confirm button should be disabled until
|
|
2144
|
-
* both a start and end date have been selected.
|
|
2145
|
-
*/
|
|
2146
|
-
const isRangeIncomplete = this.isRangeMode && (!this.isRangeParts(this.activeParts) || !this.activeParts.end);
|
|
2147
|
-
const isConfirmDisabled = isButtonDisabled || isRangeIncomplete;
|
|
2148
1930
|
const confirmFill = theme === 'ionic' ? 'solid' : undefined;
|
|
2149
1931
|
const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
|
|
2150
1932
|
if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
|
|
@@ -2164,7 +1946,7 @@ const Datetime = class {
|
|
|
2164
1946
|
return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
|
|
2165
1947
|
['datetime-action-buttons']: true,
|
|
2166
1948
|
['has-clear-button']: this.showClearButton,
|
|
2167
|
-
} }, h("slot", { name: "buttons" }, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", fill: confirmFill, color: this.color, onClick: () => this.confirm(true), disabled:
|
|
1949
|
+
} }, h("slot", { name: "buttons" }, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", fill: confirmFill, color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText))))))));
|
|
2168
1950
|
}
|
|
2169
1951
|
/**
|
|
2170
1952
|
* Wheel picker render methods
|
|
@@ -2353,8 +2135,8 @@ const Datetime = class {
|
|
|
2353
2135
|
...this.workingParts,
|
|
2354
2136
|
month: ev.detail.value,
|
|
2355
2137
|
});
|
|
2356
|
-
// Month wheel is navigation-only in multi-select
|
|
2357
|
-
if (!this.
|
|
2138
|
+
// Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
|
|
2139
|
+
if (!this.multiple) {
|
|
2358
2140
|
this.setActiveParts({
|
|
2359
2141
|
...activePart,
|
|
2360
2142
|
month: ev.detail.value,
|
|
@@ -2375,8 +2157,8 @@ const Datetime = class {
|
|
|
2375
2157
|
...this.workingParts,
|
|
2376
2158
|
year: ev.detail.value,
|
|
2377
2159
|
});
|
|
2378
|
-
// Year wheel is navigation-only in multi-select
|
|
2379
|
-
if (!this.
|
|
2160
|
+
// Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
|
|
2161
|
+
if (!this.multiple) {
|
|
2380
2162
|
this.setActiveParts({
|
|
2381
2163
|
...activePart,
|
|
2382
2164
|
year: ev.detail.value,
|
|
@@ -2520,7 +2302,7 @@ const Datetime = class {
|
|
|
2520
2302
|
'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
|
|
2521
2303
|
} }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
|
|
2522
2304
|
const { day, dayOfWeek, isAdjacentDay } = dateObject;
|
|
2523
|
-
const { el, highlightedDates, isDateEnabled, showAdjacentDays } = this;
|
|
2305
|
+
const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
|
|
2524
2306
|
let _month = month;
|
|
2525
2307
|
let _year = year;
|
|
2526
2308
|
if (showAdjacentDays && isAdjacentDay && day !== null) {
|
|
@@ -2549,7 +2331,7 @@ const Datetime = class {
|
|
|
2549
2331
|
}
|
|
2550
2332
|
const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
|
|
2551
2333
|
const isCalendarPadding = day === null;
|
|
2552
|
-
const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled,
|
|
2334
|
+
const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
|
|
2553
2335
|
const dateIsoString = convertDataToISO(referenceParts);
|
|
2554
2336
|
let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
|
|
2555
2337
|
if (!isCalDayDisabled && isDateEnabled !== undefined) {
|
|
@@ -2572,60 +2354,24 @@ const Datetime = class {
|
|
|
2572
2354
|
*/
|
|
2573
2355
|
const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
|
|
2574
2356
|
const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
|
|
2575
|
-
/**
|
|
2576
|
-
* Determine if this day is part of the range selection.
|
|
2577
|
-
* Range styling takes priority over highlightedDates.
|
|
2578
|
-
*/
|
|
2579
|
-
const isPartOfRange = isRangeStart || isRangeEnd || isInRange;
|
|
2580
2357
|
let dateStyle = undefined;
|
|
2581
2358
|
/**
|
|
2582
|
-
* Custom highlight styles should not override the style for selected dates
|
|
2583
|
-
*
|
|
2359
|
+
* Custom highlight styles should not override the style for selected dates,
|
|
2360
|
+
* nor apply to "filler days" at the start of the grid.
|
|
2584
2361
|
*/
|
|
2585
|
-
if (highlightedDates !== undefined && !isActive &&
|
|
2362
|
+
if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
|
|
2586
2363
|
dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
|
|
2587
2364
|
}
|
|
2588
2365
|
let dateParts = undefined;
|
|
2589
2366
|
// "Filler days" at the beginning of the grid should not get the calendar day
|
|
2590
2367
|
// CSS parts added to them
|
|
2591
2368
|
if (!isCalendarPadding && !isAdjacentDay) {
|
|
2592
|
-
dateParts = `calendar-day${isActive
|
|
2369
|
+
dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
|
|
2593
2370
|
}
|
|
2594
2371
|
else if (isAdjacentDay) {
|
|
2595
|
-
|
|
2596
|
-
* Adjacent days skip 'active' and 'today' parts but still
|
|
2597
|
-
* include range parts so ::part() styling is consistent
|
|
2598
|
-
* with the visual range track rendering.
|
|
2599
|
-
*/
|
|
2600
|
-
dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}${isRangeStart ? ' range-start range-selection' : ''}${isRangeEnd ? ' range-end range-selection' : ''}${isInRange ? ' range-selection' : ''}`;
|
|
2601
|
-
}
|
|
2602
|
-
/**
|
|
2603
|
-
* Build the wrapper's shadow part attribute for range track styling.
|
|
2604
|
-
*/
|
|
2605
|
-
const hasCompleteRange = this.rangeParts?.end !== undefined;
|
|
2606
|
-
const wrapperParts = isPartOfRange && hasCompleteRange && !isCalendarPadding ? 'range-track' : undefined;
|
|
2607
|
-
/**
|
|
2608
|
-
* Build the aria-label for range mode accessibility.
|
|
2609
|
-
*/
|
|
2610
|
-
let rangeAriaLabel = ariaLabel;
|
|
2611
|
-
if (this.isRangeMode && ariaLabel) {
|
|
2612
|
-
if (isRangeStart) {
|
|
2613
|
-
rangeAriaLabel += `, ${this.startDateLabel}`;
|
|
2614
|
-
}
|
|
2615
|
-
if (isRangeEnd) {
|
|
2616
|
-
rangeAriaLabel += `, ${this.endDateLabel}`;
|
|
2617
|
-
}
|
|
2618
|
-
if (isInRange) {
|
|
2619
|
-
rangeAriaLabel += ', in range';
|
|
2620
|
-
}
|
|
2372
|
+
dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
|
|
2621
2373
|
}
|
|
2622
|
-
return (h("div", { class: {
|
|
2623
|
-
'calendar-day-wrapper': true,
|
|
2624
|
-
// A start without an end is only the circle until the range is complete
|
|
2625
|
-
'calendar-day-wrapper-range-start': isRangeStart && this.rangeParts?.end !== undefined,
|
|
2626
|
-
'calendar-day-wrapper-in-range': isInRange,
|
|
2627
|
-
'calendar-day-wrapper-range-end': isRangeEnd,
|
|
2628
|
-
}, part: wrapperParts }, h("button", {
|
|
2374
|
+
return (h("div", { class: "calendar-day-wrapper" }, h("button", {
|
|
2629
2375
|
// We need to use !important for the inline styles here because
|
|
2630
2376
|
// otherwise the CSS shadow parts will override these styles.
|
|
2631
2377
|
// See https://github.com/WICG/webcomponents/issues/847
|
|
@@ -2641,40 +2387,28 @@ const Datetime = class {
|
|
|
2641
2387
|
}, tabindex: "-1", "data-day": day, "data-month": _month, "data-year": _year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
|
|
2642
2388
|
'calendar-day-padding': isCalendarPadding,
|
|
2643
2389
|
'calendar-day': true,
|
|
2644
|
-
'calendar-day-active': isActive
|
|
2390
|
+
'calendar-day-active': isActive,
|
|
2645
2391
|
'calendar-day-constrained': isCalDayConstrained,
|
|
2646
2392
|
'calendar-day-today': isToday,
|
|
2647
2393
|
'calendar-day-adjacent-day': isAdjacentDay,
|
|
2648
|
-
|
|
2649
|
-
'calendar-day-range-end': isRangeEnd,
|
|
2650
|
-
'calendar-day-in-range': isInRange,
|
|
2651
|
-
}, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": isActive || isRangeStart || isRangeEnd ? 'true' : ariaSelected, "aria-label": rangeAriaLabel, onClick: () => {
|
|
2394
|
+
}, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
|
|
2652
2395
|
if (isCalendarPadding) {
|
|
2653
2396
|
return;
|
|
2654
2397
|
}
|
|
2655
2398
|
if (isAdjacentDay) {
|
|
2656
2399
|
// The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
|
|
2657
2400
|
this.el.blur();
|
|
2658
|
-
|
|
2659
|
-
this.activeParts = { ...activePart, ...referenceParts };
|
|
2660
|
-
}
|
|
2401
|
+
this.activeParts = { ...activePart, ...referenceParts };
|
|
2661
2402
|
this.animateToDate(referenceParts);
|
|
2662
|
-
|
|
2663
|
-
this.setActiveParts(referenceParts);
|
|
2664
|
-
}
|
|
2665
|
-
else {
|
|
2666
|
-
this.confirm();
|
|
2667
|
-
}
|
|
2403
|
+
this.confirm();
|
|
2668
2404
|
}
|
|
2669
2405
|
else {
|
|
2670
2406
|
this.setWorkingParts({
|
|
2671
2407
|
...this.workingParts,
|
|
2672
2408
|
...referenceParts,
|
|
2673
2409
|
});
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
}
|
|
2677
|
-
else if (this.isMultipleMode) {
|
|
2410
|
+
// Multiple only needs date info so we can wipe out other fields like time.
|
|
2411
|
+
if (multiple) {
|
|
2678
2412
|
this.setActiveParts(referenceParts, isActive);
|
|
2679
2413
|
}
|
|
2680
2414
|
else {
|
|
@@ -2694,17 +2428,7 @@ const Datetime = class {
|
|
|
2694
2428
|
})));
|
|
2695
2429
|
}
|
|
2696
2430
|
renderCalendar(theme) {
|
|
2697
|
-
return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()
|
|
2698
|
-
position: 'absolute',
|
|
2699
|
-
width: '1px',
|
|
2700
|
-
height: '1px',
|
|
2701
|
-
padding: '0',
|
|
2702
|
-
margin: '-1px',
|
|
2703
|
-
overflow: 'hidden',
|
|
2704
|
-
clip: 'rect(0, 0, 0, 0)',
|
|
2705
|
-
whiteSpace: 'nowrap',
|
|
2706
|
-
border: '0',
|
|
2707
|
-
} }, `${this.startDateLabel} selected, select ${this.endDateLabel.toLowerCase()}`))));
|
|
2431
|
+
return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
|
|
2708
2432
|
}
|
|
2709
2433
|
renderTimeLabel() {
|
|
2710
2434
|
const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
|
|
@@ -2757,23 +2481,10 @@ const Datetime = class {
|
|
|
2757
2481
|
];
|
|
2758
2482
|
}
|
|
2759
2483
|
getHeaderSelectedDateText() {
|
|
2760
|
-
const { activeParts, formatOptions, titleSelectedDatesFormatter } = this;
|
|
2484
|
+
const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
|
|
2761
2485
|
const isArray = Array.isArray(activeParts);
|
|
2762
|
-
const dateFormatOptions = formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' };
|
|
2763
2486
|
let headerText;
|
|
2764
|
-
if (
|
|
2765
|
-
headerText = this.getRangeHeaderText(formatOptions?.date ?? { month: 'short', day: 'numeric' });
|
|
2766
|
-
if (titleSelectedDatesFormatter !== undefined) {
|
|
2767
|
-
try {
|
|
2768
|
-
const rangeValues = this.getRangeValueArray();
|
|
2769
|
-
headerText = titleSelectedDatesFormatter(rangeValues);
|
|
2770
|
-
}
|
|
2771
|
-
catch (e) {
|
|
2772
|
-
printIonError('[ion-datetime] - Exception in provided `titleSelectedDatesFormatter`:', e);
|
|
2773
|
-
}
|
|
2774
|
-
}
|
|
2775
|
-
}
|
|
2776
|
-
else if (this.isMultipleMode && isArray && activeParts.length !== 1) {
|
|
2487
|
+
if (multiple && isArray && activeParts.length !== 1) {
|
|
2777
2488
|
headerText = `${activeParts.length} days`; // default/fallback for multiple selection
|
|
2778
2489
|
if (titleSelectedDatesFormatter !== undefined) {
|
|
2779
2490
|
try {
|
|
@@ -2786,37 +2497,10 @@ const Datetime = class {
|
|
|
2786
2497
|
}
|
|
2787
2498
|
else {
|
|
2788
2499
|
// for exactly 1 day selected (multiple set or not), show a formatted version of that
|
|
2789
|
-
headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(),
|
|
2500
|
+
headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' });
|
|
2790
2501
|
}
|
|
2791
2502
|
return headerText;
|
|
2792
2503
|
}
|
|
2793
|
-
/**
|
|
2794
|
-
* Returns the formatted range header text.
|
|
2795
|
-
* Shows "Start date - End date" with placeholders from startDateLabel/endDateLabel.
|
|
2796
|
-
*/
|
|
2797
|
-
getRangeHeaderText(dateFormatOptions) {
|
|
2798
|
-
const range = this.rangeParts;
|
|
2799
|
-
if (!range) {
|
|
2800
|
-
return `${this.startDateLabel} - ${this.endDateLabel}`;
|
|
2801
|
-
}
|
|
2802
|
-
const startText = getLocalizedDateTime(this.locale, range.start, dateFormatOptions);
|
|
2803
|
-
const endText = range.end ? getLocalizedDateTime(this.locale, range.end, dateFormatOptions) : this.endDateLabel;
|
|
2804
|
-
return `${startText} - ${endText}`;
|
|
2805
|
-
}
|
|
2806
|
-
/**
|
|
2807
|
-
* Returns the current range value as an ISO string array for
|
|
2808
|
-
* titleSelectedDatesFormatter and ionChange.
|
|
2809
|
-
*/
|
|
2810
|
-
getRangeValueArray() {
|
|
2811
|
-
const range = this.rangeParts;
|
|
2812
|
-
if (!range) {
|
|
2813
|
-
return [];
|
|
2814
|
-
}
|
|
2815
|
-
if (!range.end) {
|
|
2816
|
-
return [convertDataToISO(range.start)];
|
|
2817
|
-
}
|
|
2818
|
-
return [convertDataToISO(range.start), convertDataToISO(range.end)];
|
|
2819
|
-
}
|
|
2820
2504
|
renderHeader(showExpandedHeader = true) {
|
|
2821
2505
|
const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
|
|
2822
2506
|
if (!hasSlottedTitle && !this.showDefaultTitle) {
|
|
@@ -2940,7 +2624,7 @@ const Datetime = class {
|
|
|
2940
2624
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
2941
2625
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
2942
2626
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
2943
|
-
return (h(Host, { key: '
|
|
2627
|
+
return (h(Host, { key: '6ee2389238b42b0d10c5f5254a8ba61bfc53c677', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
|
|
2944
2628
|
...createColorClasses(color, {
|
|
2945
2629
|
[theme]: true,
|
|
2946
2630
|
['datetime-readonly']: readonly,
|
|
@@ -2951,9 +2635,8 @@ const Datetime = class {
|
|
|
2951
2635
|
[`datetime-size-${size}`]: true,
|
|
2952
2636
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
2953
2637
|
[`datetime-grid`]: isGridStyle,
|
|
2954
|
-
[`datetime-range`]: this.isRangeMode,
|
|
2955
2638
|
}),
|
|
2956
|
-
} }, h("div", { key: '
|
|
2639
|
+
} }, h("div", { key: '531803dfb77fa3d694c90b6fc45e71e304876fa8', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
|
|
2957
2640
|
}
|
|
2958
2641
|
get el() { return getElement(this); }
|
|
2959
2642
|
static get watchers() { return {
|