@ionic/core 7.3.4-dev.11699991837.1bc64f72 → 7.3.4-dev.11700516018.128deb56
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/button-active.js +1 -1
- package/components/checkbox.js +3 -6
- package/components/data.js +7 -31
- package/components/index.js +2 -2
- package/components/index2.js +429 -203
- package/components/index3.js +203 -429
- package/components/ion-datetime-button.js +0 -3
- package/components/ion-datetime.js +92 -132
- package/components/ion-item-sliding.js +1 -1
- package/components/ion-menu.js +3 -3
- package/components/ion-modal.js +2 -2
- package/components/ion-nav.js +1 -1
- package/components/ion-range.js +3 -3
- package/components/ion-refresher.js +3 -3
- package/components/ion-reorder-group.js +1 -1
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-segment.js +1 -1
- package/components/ion-toggle.js +4 -7
- package/components/ion-toolbar.js +2 -2
- package/components/ios.transition.js +1 -1
- package/components/md.transition.js +1 -1
- package/components/picker-column.js +1 -1
- package/components/popover.js +1 -1
- package/components/radio.js +3 -6
- package/components/swipe-back.js +1 -1
- package/dist/cjs/{data-db832785.js → data-967b9c15.js} +7 -31
- package/dist/cjs/index.cjs.js +9 -10
- package/dist/cjs/ion-app_8.cjs.entry.js +2 -2
- package/dist/cjs/ion-checkbox.cjs.entry.js +3 -5
- package/dist/cjs/ion-datetime-button.cjs.entry.js +1 -4
- package/dist/cjs/ion-datetime_3.cjs.entry.js +93 -132
- package/dist/cjs/ion-menu_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-radio_2.cjs.entry.js +3 -5
- package/dist/cjs/ion-range.cjs.entry.js +2 -2
- package/dist/cjs/ion-toggle.cjs.entry.js +3 -5
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/checkbox/checkbox.ios.css +0 -35
- package/dist/collection/components/checkbox/checkbox.js +4 -24
- package/dist/collection/components/checkbox/checkbox.md.css +0 -35
- package/dist/collection/components/checkbox/test/item/checkbox.e2e.js +0 -13
- package/dist/collection/components/checkbox/test/label/checkbox.e2e.js +0 -16
- package/dist/collection/components/datetime/datetime.ios.css +29 -32
- package/dist/collection/components/datetime/datetime.js +93 -137
- package/dist/collection/components/datetime/datetime.md.css +28 -20
- package/dist/collection/components/datetime/test/basic/datetime.e2e.js +0 -25
- package/dist/collection/components/datetime/test/color/datetime.e2e.js +1 -1
- package/dist/collection/components/datetime/test/custom/datetime.e2e.js +1 -27
- package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js +0 -15
- package/dist/collection/components/datetime/test/set-value/datetime.e2e.js +12 -9
- package/dist/collection/components/datetime/utils/data.js +6 -14
- package/dist/collection/components/datetime/utils/parse.js +1 -18
- package/dist/collection/components/datetime-button/datetime-button.js +0 -3
- package/dist/collection/components/menu/menu.ios.css +0 -94
- package/dist/collection/components/menu/menu.md.css +0 -94
- package/dist/collection/components/radio/radio.ios.css +0 -35
- package/dist/collection/components/radio/radio.js +4 -24
- package/dist/collection/components/radio/radio.md.css +0 -35
- package/dist/collection/components/radio/test/item/radio.e2e.js +0 -15
- package/dist/collection/components/radio/test/label-placement/radio.e2e.js +0 -20
- package/dist/collection/components/range/range.ios.css +1 -41
- package/dist/collection/components/range/range.js +3 -3
- package/dist/collection/components/range/range.md.css +1 -41
- package/dist/collection/components/range/test/label/range.e2e.js +0 -48
- package/dist/collection/components/toggle/test/item/toggle.e2e.js +0 -15
- package/dist/collection/components/toggle/test/label/toggle.e2e.js +0 -16
- package/dist/collection/components/toggle/toggle.ios.css +1 -35
- package/dist/collection/components/toggle/toggle.js +4 -24
- package/dist/collection/components/toggle/toggle.md.css +1 -35
- package/dist/collection/components/toolbar/toolbar.ios.css +4 -2
- package/dist/collection/components/toolbar/toolbar.md.css +4 -2
- package/dist/collection/index.js +0 -1
- package/dist/docs.json +18 -147
- package/dist/esm/{data-009dbf15.js → data-4b448e3a.js} +7 -31
- package/dist/esm/index.js +2 -2
- package/dist/esm/ion-app_8.entry.js +2 -2
- package/dist/esm/ion-checkbox.entry.js +3 -5
- package/dist/esm/ion-datetime-button.entry.js +1 -4
- package/dist/esm/ion-datetime_3.entry.js +93 -132
- package/dist/esm/ion-menu_3.entry.js +2 -2
- package/dist/esm/ion-radio_2.entry.js +3 -5
- package/dist/esm/ion-range.entry.js +2 -2
- package/dist/esm/ion-toggle.entry.js +3 -5
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/data-4b448e3a.js +4 -0
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-checkbox.entry.js +1 -1
- package/dist/esm-es5/ion-datetime-button.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-radio_2.entry.js +1 -1
- package/dist/esm-es5/ion-range.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/html.html-data.json +4 -52
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-0053fe81.system.entry.js +4 -0
- package/dist/ionic/p-06902103.system.js +1 -1
- package/dist/ionic/p-091cd81e.entry.js +4 -0
- package/dist/ionic/p-28f5715a.system.entry.js +4 -0
- package/dist/ionic/p-2cdcd6f2.entry.js +4 -0
- package/dist/ionic/{p-a34669bf.system.entry.js → p-45ee211b.system.entry.js} +1 -1
- package/dist/ionic/p-5009cb46.entry.js +4 -0
- package/dist/ionic/p-5b88f780.entry.js +4 -0
- package/dist/ionic/p-601fd53c.js +4 -0
- package/dist/ionic/p-8843b046.system.js +4 -0
- package/dist/ionic/p-98b618ce.system.entry.js +4 -0
- package/dist/ionic/p-b1e8f045.entry.js +4 -0
- package/dist/ionic/p-b3394798.system.entry.js +4 -0
- package/dist/ionic/p-b3cfc6e1.system.entry.js +4 -0
- package/dist/ionic/{p-f9567c67.entry.js → p-c759a704.entry.js} +1 -1
- package/dist/ionic/p-cc8910e7.system.js +4 -0
- package/dist/ionic/{p-67b891af.entry.js → p-d3b8aebf.entry.js} +1 -1
- package/dist/ionic/p-e53b8af4.system.entry.js +4 -0
- package/dist/ionic/p-f78e60a5.entry.js +4 -0
- package/dist/ionic/p-fd42994b.system.entry.js +4 -0
- package/dist/types/components/checkbox/checkbox.d.ts +1 -8
- package/dist/types/components/datetime/datetime.d.ts +10 -23
- package/dist/types/components/datetime/utils/data.d.ts +1 -1
- package/dist/types/components/datetime/utils/parse.d.ts +3 -3
- package/dist/types/components/radio/radio.d.ts +1 -8
- package/dist/types/components/range/range.d.ts +1 -2
- package/dist/types/components/toast/toast-interface.d.ts +0 -3
- package/dist/types/components/toggle/toggle.d.ts +1 -8
- package/dist/types/components.d.ts +16 -40
- package/dist/types/index.d.ts +0 -1
- package/dist/types/interface.d.ts +0 -1
- package/hydrate/index.js +114 -196
- package/package.json +2 -2
- package/dist/esm-es5/data-009dbf15.js +0 -4
- package/dist/ionic/p-1f4adf06.system.entry.js +0 -4
- package/dist/ionic/p-218b6f33.entry.js +0 -4
- package/dist/ionic/p-2da6ba37.system.entry.js +0 -4
- package/dist/ionic/p-40138199.entry.js +0 -4
- package/dist/ionic/p-44ef7224.system.js +0 -4
- package/dist/ionic/p-4ca1ce6b.system.entry.js +0 -4
- package/dist/ionic/p-51b165af.system.js +0 -4
- package/dist/ionic/p-57f0efcc.entry.js +0 -4
- package/dist/ionic/p-7cfd253c.js +0 -4
- package/dist/ionic/p-82f5c07e.system.entry.js +0 -4
- package/dist/ionic/p-86c5c320.entry.js +0 -4
- package/dist/ionic/p-90ec5785.system.entry.js +0 -4
- package/dist/ionic/p-af986299.system.entry.js +0 -4
- package/dist/ionic/p-b321c999.entry.js +0 -4
- package/dist/ionic/p-d8a0267b.system.entry.js +0 -4
- package/dist/ionic/p-f5c19164.entry.js +0 -4
|
@@ -9,7 +9,7 @@ import { i as isRTL } from './dir-912e3e13.js';
|
|
|
9
9
|
import { c as createColorClasses, g as getClassMap } from './theme-17531cdf.js';
|
|
10
10
|
import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSharp, q as caretDownSharp } from './index-ecfc2c9f.js';
|
|
11
11
|
import { b as getIonMode } from './ionic-global-1ef19007.js';
|
|
12
|
-
import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as is24Hour, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-
|
|
12
|
+
import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, p as parseMinParts, o as parseMaxParts, q as parseDate, w as warnIfValueOutOfBounds, r as convertToArrayOfNumbers, s as convertDataToISO, t as getToday, u as getClosestValidDate, x as getNumDaysInMonth, y as getCombinedDateColumnData, z as getMonthColumnData, A as getDayColumnData, B as getYearColumnData, C as isMonthFirstLocale, D as getTimeColumnsData, E as isLocaleDayPeriodRTL, F as getDaysOfWeek, G as getMonthAndYear, H as getDaysOfMonth, I as generateMonths, J as is24Hour, K as getLocalizedTime, L as getMonthAndDay, M as formatValue, N as getNextYear, O as getPreviousYear, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-4b448e3a.js';
|
|
13
13
|
import { c as createLockController } from './lock-controller-e8c6c051.js';
|
|
14
14
|
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-e1dadfe6.js';
|
|
15
15
|
import { c as createAnimation } from './animation-a1d9e088.js';
|
|
@@ -186,9 +186,9 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
|
|
|
186
186
|
return undefined;
|
|
187
187
|
};
|
|
188
188
|
|
|
189
|
-
const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}: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(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}: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}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){: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{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){: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{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year) .calendar-next-prev:dir(rtl),:host(.show-month-and-year) .calendar-days-of-week:dir(rtl),:host(.show-month-and-year) .calendar-body:dir(rtl),:host(.show-month-and-year) .datetime-time:dir(rtl){left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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 ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}: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}:host .calendar-day{border-radius:50%;-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;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-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 .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}: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-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}: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;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #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, #cccccc);font-size:14px}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:16px;font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}: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, #b3b3b3);font-size:12px;font-weight:600;line-height:24px;text-transform:uppercase}: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:16px}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:20px}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{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:16px}: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, #cccccc)}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-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{width:100%}";
|
|
189
|
+
const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}: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(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}: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}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){: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{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){: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{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year) .calendar-next-prev:dir(rtl),:host(.show-month-and-year) .calendar-days-of-week:dir(rtl),:host(.show-month-and-year) .calendar-body:dir(rtl),:host(.show-month-and-year) .datetime-time:dir(rtl){left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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 ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}: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{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{-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;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day-highlight{border-radius:32px;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:32px;height:32px;z-index:-1}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}: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-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}: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;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #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, #cccccc);font-size:14px}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:16px;font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}: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, #b3b3b3);font-size:12px;font-weight:600;line-height:24px;text-transform:uppercase}: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;height:calc(100% - 16px)}:host .calendar-day{font-size:20px}.calendar-day:focus .calendar-day-highlight,.calendar-day.calendar-day-active .calendar-day-highlight{opacity:0.2}.calendar-day.calendar-day-active .calendar-day-highlight{background:var(--ion-color-base)}.calendar-day:focus .calendar-day-highlight{background:var(--ion-color-base) !important}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-today.calendar-day-active .calendar-day-highlight{background:var(--ion-color-base);opacity:1}: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:16px}: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, #cccccc)}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-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{width:100%}";
|
|
190
190
|
|
|
191
|
-
const datetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}: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(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}: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}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){: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{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){: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{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year) .calendar-next-prev:dir(rtl),:host(.show-month-and-year) .calendar-days-of-week:dir(rtl),:host(.show-month-and-year) .calendar-body:dir(rtl),:host(.show-month-and-year) .datetime-time:dir(rtl){left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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 ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}: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{
|
|
191
|
+
const datetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}: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(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}: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}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){: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{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){: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{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year) .calendar-next-prev:dir(rtl),:host(.show-month-and-year) .calendar-days-of-week:dir(rtl),:host(.show-month-and-year) .calendar-body:dir(rtl),:host(.show-month-and-year) .datetime-time:dir(rtl){left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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 ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}: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{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{-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;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day-highlight{border-radius:32px;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:32px;height:32px;z-index:-1}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}: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-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}: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;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--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-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:12px;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:34px}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, #595959)}: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, gray);font-size:14px;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{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0;padding-inline-end:0;padding-top:13px;padding-bottom:13px;font-size:14px}.calendar-day:focus .calendar-day-highlight{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-day.calendar-day-today{color:var(--ion-color-base)}.calendar-day.calendar-day-today .calendar-day-highlight{border:1px solid var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active .calendar-day-highlight{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}: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, #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}:host .datetime-view-buttons ion-button{color:var(--ion-color-step-800, #333333)}";
|
|
192
192
|
|
|
193
193
|
const Datetime = class {
|
|
194
194
|
constructor(hostRef) {
|
|
@@ -202,6 +202,11 @@ const Datetime = class {
|
|
|
202
202
|
this.ionRender = createEvent(this, "ionRender", 7);
|
|
203
203
|
this.inputId = `ion-dt-${datetimeIds++}`;
|
|
204
204
|
this.prevPresentation = null;
|
|
205
|
+
/**
|
|
206
|
+
* Duplicate reference to `activeParts` that does not trigger a re-render of the component.
|
|
207
|
+
* Allows caching an instance of the `activeParts` in between render cycles.
|
|
208
|
+
*/
|
|
209
|
+
this.activePartsClone = [];
|
|
205
210
|
this.warnIfIncorrectValueUsage = () => {
|
|
206
211
|
const { multiple, value } = this;
|
|
207
212
|
if (!multiple && Array.isArray(value)) {
|
|
@@ -229,9 +234,9 @@ const Datetime = class {
|
|
|
229
234
|
* data. This should be used when rendering an
|
|
230
235
|
* interface in an environment where the `value`
|
|
231
236
|
* may not be set. This function works
|
|
232
|
-
* by returning the first selected date
|
|
233
|
-
* falling back to
|
|
234
|
-
* is selected.
|
|
237
|
+
* by returning the first selected date in
|
|
238
|
+
* "activePartsClone" and then falling back to
|
|
239
|
+
* defaultParts if no active date is selected.
|
|
235
240
|
*/
|
|
236
241
|
this.getActivePartsWithFallback = () => {
|
|
237
242
|
var _a;
|
|
@@ -239,8 +244,8 @@ const Datetime = class {
|
|
|
239
244
|
return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
|
|
240
245
|
};
|
|
241
246
|
this.getActivePart = () => {
|
|
242
|
-
const {
|
|
243
|
-
return Array.isArray(
|
|
247
|
+
const { activePartsClone } = this;
|
|
248
|
+
return Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
|
|
244
249
|
};
|
|
245
250
|
this.closeParentOverlay = () => {
|
|
246
251
|
const popoverOrModal = this.el.closest('ion-modal, ion-popover');
|
|
@@ -252,7 +257,7 @@ const Datetime = class {
|
|
|
252
257
|
this.workingParts = Object.assign({}, parts);
|
|
253
258
|
};
|
|
254
259
|
this.setActiveParts = (parts, removeDate = false) => {
|
|
255
|
-
const { multiple, minParts, maxParts,
|
|
260
|
+
const { multiple, minParts, maxParts, activePartsClone } = this;
|
|
256
261
|
/**
|
|
257
262
|
* When setting the active parts, it is possible
|
|
258
263
|
* to set invalid data. For example,
|
|
@@ -266,7 +271,16 @@ const Datetime = class {
|
|
|
266
271
|
const validatedParts = validateParts(parts, minParts, maxParts);
|
|
267
272
|
this.setWorkingParts(validatedParts);
|
|
268
273
|
if (multiple) {
|
|
269
|
-
|
|
274
|
+
/**
|
|
275
|
+
* We read from activePartsClone here because valueChanged() only updates that,
|
|
276
|
+
* so it's the more reliable source of truth. If we read from activeParts, then
|
|
277
|
+
* if you click July 1, manually set the value to July 2, and then click July 3,
|
|
278
|
+
* the new value would be [July 1, July 3], ignoring the value set.
|
|
279
|
+
*
|
|
280
|
+
* We can then pass the new value to activeParts (rather than activePartsClone)
|
|
281
|
+
* since the clone will be updated automatically by activePartsChanged().
|
|
282
|
+
*/
|
|
283
|
+
const activePartsArray = Array.isArray(activePartsClone) ? activePartsClone : [activePartsClone];
|
|
270
284
|
if (removeDate) {
|
|
271
285
|
this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
|
|
272
286
|
}
|
|
@@ -391,7 +405,7 @@ const Datetime = class {
|
|
|
391
405
|
/**
|
|
392
406
|
* Get the number of padding days so
|
|
393
407
|
* we know how much to offset our next selector by
|
|
394
|
-
* to grab the correct
|
|
408
|
+
* to grab the correct calenday-day element.
|
|
395
409
|
*/
|
|
396
410
|
const padding = currentMonth.querySelectorAll('.calendar-day-padding');
|
|
397
411
|
const { day } = this.workingParts;
|
|
@@ -402,7 +416,7 @@ const Datetime = class {
|
|
|
402
416
|
* Get the calendar day element
|
|
403
417
|
* and focus it.
|
|
404
418
|
*/
|
|
405
|
-
const dayEl = currentMonth.querySelector(`.calendar-day
|
|
419
|
+
const dayEl = currentMonth.querySelector(`.calendar-day:nth-of-type(${padding.length + day})`);
|
|
406
420
|
if (dayEl) {
|
|
407
421
|
dayEl.focus();
|
|
408
422
|
}
|
|
@@ -483,19 +497,6 @@ const Datetime = class {
|
|
|
483
497
|
const monthBox = month.getBoundingClientRect();
|
|
484
498
|
if (Math.abs(monthBox.x - box.x) > 2)
|
|
485
499
|
return;
|
|
486
|
-
/**
|
|
487
|
-
* If we're force-rendering a month, assume we've
|
|
488
|
-
* scrolled to that and return it.
|
|
489
|
-
*
|
|
490
|
-
* If forceRenderDate is ever used in a context where the
|
|
491
|
-
* forced month is not immediately auto-scrolled to, this
|
|
492
|
-
* should be updated to also check whether `month` has the
|
|
493
|
-
* same month and year as the forced date.
|
|
494
|
-
*/
|
|
495
|
-
const { forceRenderDate } = this;
|
|
496
|
-
if (forceRenderDate !== undefined) {
|
|
497
|
-
return { month: forceRenderDate.month, year: forceRenderDate.year, day: forceRenderDate.day };
|
|
498
|
-
}
|
|
499
500
|
/**
|
|
500
501
|
* From here, we can determine if the start
|
|
501
502
|
* month or the end month was scrolled into view.
|
|
@@ -550,9 +551,6 @@ const Datetime = class {
|
|
|
550
551
|
this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
|
|
551
552
|
calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
|
|
552
553
|
calendarBodyRef.style.removeProperty('overflow');
|
|
553
|
-
if (this.resolveForceDateScrolling) {
|
|
554
|
-
this.resolveForceDateScrolling();
|
|
555
|
-
}
|
|
556
554
|
});
|
|
557
555
|
};
|
|
558
556
|
/**
|
|
@@ -607,17 +605,10 @@ const Datetime = class {
|
|
|
607
605
|
}
|
|
608
606
|
};
|
|
609
607
|
this.processValue = (value) => {
|
|
610
|
-
const hasValue = value !== null && value !== undefined
|
|
608
|
+
const hasValue = value !== null && value !== undefined;
|
|
611
609
|
const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
|
|
612
|
-
const { minParts, maxParts
|
|
610
|
+
const { minParts, maxParts } = this;
|
|
613
611
|
this.warnIfIncorrectValueUsage();
|
|
614
|
-
/**
|
|
615
|
-
* Return early if the value wasn't parsed correctly, such as
|
|
616
|
-
* if an improperly formatted date string was provided.
|
|
617
|
-
*/
|
|
618
|
-
if (!valueToProcess) {
|
|
619
|
-
return;
|
|
620
|
-
}
|
|
621
612
|
/**
|
|
622
613
|
* Datetime should only warn of out of bounds values
|
|
623
614
|
* if set by the user. If the `value` is undefined,
|
|
@@ -635,9 +626,16 @@ const Datetime = class {
|
|
|
635
626
|
* that the values don't necessarily have to be in order.
|
|
636
627
|
*/
|
|
637
628
|
const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
|
|
638
|
-
const
|
|
639
|
-
const { month, day, year, hour, minute } = targetValue;
|
|
629
|
+
const { month, day, year, hour, minute } = clampDate(singleValue, minParts, maxParts);
|
|
640
630
|
const ampm = parseAmPm(hour);
|
|
631
|
+
this.setWorkingParts({
|
|
632
|
+
month,
|
|
633
|
+
day,
|
|
634
|
+
year,
|
|
635
|
+
hour,
|
|
636
|
+
minute,
|
|
637
|
+
ampm,
|
|
638
|
+
});
|
|
641
639
|
/**
|
|
642
640
|
* Since `activeParts` indicates a value that
|
|
643
641
|
* been explicitly selected either by the
|
|
@@ -667,62 +665,6 @@ const Datetime = class {
|
|
|
667
665
|
*/
|
|
668
666
|
this.activeParts = [];
|
|
669
667
|
}
|
|
670
|
-
/**
|
|
671
|
-
* Only animate if:
|
|
672
|
-
* 1. We're using grid style (wheel style pickers should just jump to new value)
|
|
673
|
-
* 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
|
|
674
|
-
* 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
|
|
675
|
-
* 4. The month/year picker is not open (since you wouldn't see the animation anyway)
|
|
676
|
-
*/
|
|
677
|
-
const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
|
|
678
|
-
const bodyIsVisible = el.classList.contains('datetime-ready');
|
|
679
|
-
const { isGridStyle, showMonthAndYear } = this;
|
|
680
|
-
if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
|
|
681
|
-
this.animateToDate(targetValue);
|
|
682
|
-
}
|
|
683
|
-
else {
|
|
684
|
-
/**
|
|
685
|
-
* We only need to do this if we didn't just animate to a new month,
|
|
686
|
-
* since that calls prevMonth/nextMonth which calls setWorkingParts for us.
|
|
687
|
-
*/
|
|
688
|
-
this.setWorkingParts({
|
|
689
|
-
month,
|
|
690
|
-
day,
|
|
691
|
-
year,
|
|
692
|
-
hour,
|
|
693
|
-
minute,
|
|
694
|
-
ampm,
|
|
695
|
-
});
|
|
696
|
-
}
|
|
697
|
-
};
|
|
698
|
-
this.animateToDate = async (targetValue) => {
|
|
699
|
-
const { workingParts } = this;
|
|
700
|
-
/**
|
|
701
|
-
* Tell other render functions that we need to force the
|
|
702
|
-
* target month to appear in place of the actual next/prev month.
|
|
703
|
-
* Because this is a State variable, a rerender will be triggered
|
|
704
|
-
* automatically, updating the rendered months.
|
|
705
|
-
*/
|
|
706
|
-
this.forceRenderDate = targetValue;
|
|
707
|
-
/**
|
|
708
|
-
* Flag that we've started scrolling to the forced date.
|
|
709
|
-
* The resolve function will be called by the datetime's
|
|
710
|
-
* scroll listener when it's done updating everything.
|
|
711
|
-
* This is a replacement for making prev/nextMonth async,
|
|
712
|
-
* since the logic we're waiting on is in a listener.
|
|
713
|
-
*/
|
|
714
|
-
const forceDateScrollingPromise = new Promise((resolve) => {
|
|
715
|
-
this.resolveForceDateScrolling = resolve;
|
|
716
|
-
});
|
|
717
|
-
/**
|
|
718
|
-
* Animate smoothly to the forced month. This will also update
|
|
719
|
-
* workingParts and correct the surrounding months for us.
|
|
720
|
-
*/
|
|
721
|
-
const targetMonthIsBefore = isBefore(targetValue, workingParts);
|
|
722
|
-
targetMonthIsBefore ? this.prevMonth() : this.nextMonth();
|
|
723
|
-
await forceDateScrollingPromise;
|
|
724
|
-
this.resolveForceDateScrolling = undefined;
|
|
725
|
-
this.forceRenderDate = undefined;
|
|
726
668
|
};
|
|
727
669
|
this.onFocus = () => {
|
|
728
670
|
this.ionFocus.emit();
|
|
@@ -778,7 +720,6 @@ const Datetime = class {
|
|
|
778
720
|
ampm: 'pm',
|
|
779
721
|
};
|
|
780
722
|
this.isTimePopoverOpen = false;
|
|
781
|
-
this.forceRenderDate = undefined;
|
|
782
723
|
this.color = 'primary';
|
|
783
724
|
this.name = this.inputId;
|
|
784
725
|
this.disabled = false;
|
|
@@ -818,11 +759,6 @@ const Datetime = class {
|
|
|
818
759
|
maxChanged() {
|
|
819
760
|
this.processMaxParts();
|
|
820
761
|
}
|
|
821
|
-
get isGridStyle() {
|
|
822
|
-
const { presentation, preferWheel } = this;
|
|
823
|
-
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
824
|
-
return hasDatePresentation && !preferWheel;
|
|
825
|
-
}
|
|
826
762
|
yearValuesChanged() {
|
|
827
763
|
this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
|
|
828
764
|
}
|
|
@@ -838,13 +774,51 @@ const Datetime = class {
|
|
|
838
774
|
minuteValuesChanged() {
|
|
839
775
|
this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
|
|
840
776
|
}
|
|
777
|
+
activePartsChanged() {
|
|
778
|
+
this.activePartsClone = this.activeParts;
|
|
779
|
+
}
|
|
841
780
|
/**
|
|
842
781
|
* Update the datetime value when the value changes
|
|
843
782
|
*/
|
|
844
|
-
|
|
845
|
-
const { value } = this;
|
|
783
|
+
valueChanged() {
|
|
784
|
+
const { value, minParts, maxParts, workingParts } = this;
|
|
846
785
|
if (this.hasValue()) {
|
|
847
|
-
this.
|
|
786
|
+
this.warnIfIncorrectValueUsage();
|
|
787
|
+
/**
|
|
788
|
+
* Clones the value of the `activeParts` to the private clone, to update
|
|
789
|
+
* the date display on the current render cycle without causing another render.
|
|
790
|
+
*
|
|
791
|
+
* This allows us to update the current value's date/time display without
|
|
792
|
+
* refocusing or shifting the user's display (leaves the user in place).
|
|
793
|
+
*/
|
|
794
|
+
const valueDateParts = parseDate(value);
|
|
795
|
+
if (valueDateParts) {
|
|
796
|
+
warnIfValueOutOfBounds(valueDateParts, minParts, maxParts);
|
|
797
|
+
if (Array.isArray(valueDateParts)) {
|
|
798
|
+
this.activePartsClone = [...valueDateParts];
|
|
799
|
+
}
|
|
800
|
+
else {
|
|
801
|
+
const { month, day, year, hour, minute } = valueDateParts;
|
|
802
|
+
const ampm = hour != null ? (hour >= 12 ? 'pm' : 'am') : undefined;
|
|
803
|
+
this.activePartsClone = Object.assign(Object.assign({}, this.activeParts), { month,
|
|
804
|
+
day,
|
|
805
|
+
year,
|
|
806
|
+
hour,
|
|
807
|
+
minute,
|
|
808
|
+
ampm });
|
|
809
|
+
/**
|
|
810
|
+
* The working parts am/pm value must be updated when the value changes, to
|
|
811
|
+
* ensure the time picker hour column values are generated correctly.
|
|
812
|
+
*
|
|
813
|
+
* Note that we don't need to do this if valueDateParts is an array, since
|
|
814
|
+
* multiple="true" does not apply to time pickers.
|
|
815
|
+
*/
|
|
816
|
+
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm }));
|
|
817
|
+
}
|
|
818
|
+
}
|
|
819
|
+
else {
|
|
820
|
+
printIonWarning(`Unable to parse date string: ${value}. Please provide a valid ISO 8601 datetime string.`);
|
|
821
|
+
}
|
|
848
822
|
}
|
|
849
823
|
this.emitStyle();
|
|
850
824
|
this.ionValueChange.emit({ value });
|
|
@@ -1047,6 +1021,8 @@ const Datetime = class {
|
|
|
1047
1021
|
printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
|
|
1048
1022
|
}
|
|
1049
1023
|
}
|
|
1024
|
+
this.processMinParts();
|
|
1025
|
+
this.processMaxParts();
|
|
1050
1026
|
const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
|
|
1051
1027
|
const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
|
|
1052
1028
|
const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
|
|
@@ -1054,8 +1030,6 @@ const Datetime = class {
|
|
|
1054
1030
|
const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
|
|
1055
1031
|
const todayParts = (this.todayParts = parseDate(getToday()));
|
|
1056
1032
|
this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
|
|
1057
|
-
this.processMinParts();
|
|
1058
|
-
this.processMaxParts();
|
|
1059
1033
|
this.processValue(this.value);
|
|
1060
1034
|
this.emitStyle();
|
|
1061
1035
|
}
|
|
@@ -1440,7 +1414,7 @@ const Datetime = class {
|
|
|
1440
1414
|
const { el, highlightedDates, isDateEnabled, multiple } = this;
|
|
1441
1415
|
const referenceParts = { month, day, year };
|
|
1442
1416
|
const isCalendarPadding = day === null;
|
|
1443
|
-
const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.
|
|
1417
|
+
const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activePartsClone, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
|
|
1444
1418
|
const dateIsoString = convertDataToISO(referenceParts);
|
|
1445
1419
|
let isCalDayDisabled = isCalMonthDisabled || disabled;
|
|
1446
1420
|
if (!isCalDayDisabled && isDateEnabled !== undefined) {
|
|
@@ -1464,30 +1438,14 @@ const Datetime = class {
|
|
|
1464
1438
|
if (highlightedDates !== undefined && !isActive && day !== null) {
|
|
1465
1439
|
dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
|
|
1466
1440
|
}
|
|
1467
|
-
|
|
1468
|
-
// "Filler days" at the beginning of the grid should not get the calendar day
|
|
1469
|
-
// CSS parts added to them
|
|
1470
|
-
if (!isCalendarPadding) {
|
|
1471
|
-
dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
|
|
1472
|
-
}
|
|
1473
|
-
return (h("div", { class: "calendar-day-wrapper" }, h("button", {
|
|
1474
|
-
// We need to use !important for the inline styles here because
|
|
1475
|
-
// otherwise the CSS shadow parts will override these styles.
|
|
1476
|
-
// See https://github.com/WICG/webcomponents/issues/847
|
|
1477
|
-
// Both the CSS shadow parts and highlightedDates styles are
|
|
1478
|
-
// provided by the developer, but highlightedDates styles should
|
|
1479
|
-
// always take priority.
|
|
1480
|
-
ref: (el) => {
|
|
1481
|
-
if (el) {
|
|
1482
|
-
el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
|
|
1483
|
-
el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
|
|
1484
|
-
}
|
|
1485
|
-
}, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
|
|
1441
|
+
return (h("button", { tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
|
|
1486
1442
|
'calendar-day-padding': isCalendarPadding,
|
|
1487
1443
|
'calendar-day': true,
|
|
1488
1444
|
'calendar-day-active': isActive,
|
|
1489
1445
|
'calendar-day-today': isToday,
|
|
1490
|
-
},
|
|
1446
|
+
}, style: dateStyle && {
|
|
1447
|
+
color: dateStyle.textColor,
|
|
1448
|
+
}, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
|
|
1491
1449
|
if (isCalendarPadding) {
|
|
1492
1450
|
return;
|
|
1493
1451
|
}
|
|
@@ -1507,12 +1465,13 @@ const Datetime = class {
|
|
|
1507
1465
|
day,
|
|
1508
1466
|
year }));
|
|
1509
1467
|
}
|
|
1510
|
-
}
|
|
1511
|
-
|
|
1468
|
+
} }, h("div", { class: "calendar-day-highlight", style: {
|
|
1469
|
+
backgroundColor: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.backgroundColor,
|
|
1470
|
+
} }), text));
|
|
1512
1471
|
}))));
|
|
1513
1472
|
}
|
|
1514
1473
|
renderCalendarBody() {
|
|
1515
|
-
return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts
|
|
1474
|
+
return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts).map(({ month, year }) => {
|
|
1516
1475
|
return this.renderMonth(month, year);
|
|
1517
1476
|
})));
|
|
1518
1477
|
}
|
|
@@ -1667,13 +1626,14 @@ const Datetime = class {
|
|
|
1667
1626
|
}
|
|
1668
1627
|
}
|
|
1669
1628
|
render() {
|
|
1670
|
-
const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size
|
|
1629
|
+
const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size } = this;
|
|
1671
1630
|
const mode = getIonMode(this);
|
|
1672
1631
|
const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
|
|
1673
1632
|
const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
|
|
1674
1633
|
const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
|
|
1675
1634
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1676
1635
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1636
|
+
const hasGrid = hasDatePresentation && !preferWheel;
|
|
1677
1637
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1678
1638
|
return (h(Host, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1679
1639
|
[mode]: true,
|
|
@@ -1684,7 +1644,7 @@ const Datetime = class {
|
|
|
1684
1644
|
[`datetime-presentation-${presentation}`]: true,
|
|
1685
1645
|
[`datetime-size-${size}`]: true,
|
|
1686
1646
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1687
|
-
[`datetime-grid`]:
|
|
1647
|
+
[`datetime-grid`]: hasGrid,
|
|
1688
1648
|
})) }, this.renderDatetime(mode)));
|
|
1689
1649
|
}
|
|
1690
1650
|
get el() { return getElement(this); }
|
|
@@ -1697,6 +1657,7 @@ const Datetime = class {
|
|
|
1697
1657
|
"dayValues": ["dayValuesChanged"],
|
|
1698
1658
|
"hourValues": ["hourValuesChanged"],
|
|
1699
1659
|
"minuteValues": ["minuteValuesChanged"],
|
|
1660
|
+
"activeParts": ["activePartsChanged"],
|
|
1700
1661
|
"value": ["valueChanged"]
|
|
1701
1662
|
}; }
|
|
1702
1663
|
};
|
|
@@ -16,9 +16,9 @@ import './animation-a1d9e088.js';
|
|
|
16
16
|
import './framework-delegate-aa433dea.js';
|
|
17
17
|
import './index-595d62c9.js';
|
|
18
18
|
|
|
19
|
-
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host
|
|
19
|
+
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
|
|
20
20
|
|
|
21
|
-
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host
|
|
21
|
+
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start) .menu-inner:dir(rtl){left:unset;right:unset;left:auto;right:0}}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end) .menu-inner:dir(rtl){left:unset;right:unset;left:0;right:auto}}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none !important;transform:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.menu-pane-visible) ion-backdrop{display:hidden !important;}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
|
|
22
22
|
|
|
23
23
|
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
|
|
24
24
|
const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
|
|
@@ -8,9 +8,9 @@ import { p as printIonWarning } from './index-595d62c9.js';
|
|
|
8
8
|
import { h as hostContext, c as createColorClasses } from './theme-17531cdf.js';
|
|
9
9
|
import { b as getIonMode } from './ionic-global-1ef19007.js';
|
|
10
10
|
|
|
11
|
-
const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;min-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(:not(.legacy-radio)){cursor:pointer}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.legacy-radio) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-radio) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-radio) label{left:0}:host-context([dir=rtl]):host(.legacy-radio) label,:host-context([dir=rtl]).legacy-radio label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-radio) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-radio) label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item:not(.legacy-radio)){width:100%;height:100%}:host([slot=start]:not(.legacy-radio)),:host([slot=end]:not(.legacy-radio)){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-radio)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}
|
|
11
|
+
const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;min-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(:not(.legacy-radio)){cursor:pointer}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.legacy-radio) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-radio) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-radio) label{left:0}:host-context([dir=rtl]):host(.legacy-radio) label,:host-context([dir=rtl]).legacy-radio label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-radio) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-radio) label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item:not(.legacy-radio)){width:100%;height:100%}:host([slot=start]:not(.legacy-radio)),:host([slot=end]:not(.legacy-radio)){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-radio)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host{--color-checked:var(--ion-color-primary, #3880ff)}:host(.legacy-radio){width:15px;height:24px}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}@supports (inset-inline-start: 0){:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}}@supports not (inset-inline-start: 0){:host(.ion-focused) .radio-icon::after{left:-9px}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-9px}@supports selector(:dir(rtl)){:host(.ion-focused) .radio-icon::after:dir(rtl){left:unset;right:unset;right:-9px}}}:host(.in-item.legacy-radio){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:11px;margin-inline-end:11px;margin-top:8px;margin-bottom:8px;display:block;position:static}:host(.in-item.legacy-radio[slot=start]){-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:21px;margin-inline-end:21px;margin-top:8px;margin-bottom:8px}.native-wrapper .radio-icon{width:15px;height:24px}";
|
|
12
12
|
|
|
13
|
-
const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;min-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(:not(.legacy-radio)){cursor:pointer}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.legacy-radio) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-radio) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-radio) label{left:0}:host-context([dir=rtl]):host(.legacy-radio) label,:host-context([dir=rtl]).legacy-radio label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-radio) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-radio) label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item:not(.legacy-radio)){width:100%;height:100%}:host([slot=start]:not(.legacy-radio)),:host([slot=end]:not(.legacy-radio)){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-radio)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}
|
|
13
|
+
const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;min-height:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(:not(.legacy-radio)){cursor:pointer}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.legacy-radio) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-radio) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-radio) label{left:0}:host-context([dir=rtl]):host(.legacy-radio) label,:host-context([dir=rtl]).legacy-radio label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-radio) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-radio) label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item:not(.legacy-radio)){width:100%;height:100%}:host([slot=start]:not(.legacy-radio)),:host([slot=end]:not(.legacy-radio)){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-radio)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #3880ff);--border-width:2px;--border-style:solid;--border-radius:50%}:host(.legacy-radio){width:20px;height:20px}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.legacy-radio.radio-disabled),:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused.legacy-radio) .radio-icon::after{top:-12px}@supports (inset-inline-start: 0){:host(.ion-focused.legacy-radio) .radio-icon::after{inset-inline-start:-12px}}@supports not (inset-inline-start: 0){:host(.ion-focused.legacy-radio) .radio-icon::after{left:-12px}:host-context([dir=rtl]):host(.ion-focused.legacy-radio) .radio-icon::after,:host-context([dir=rtl]).ion-focused.legacy-radio .radio-icon::after{left:unset;right:unset;right:-12px}@supports selector(:dir(rtl)){:host(.ion-focused.legacy-radio) .radio-icon::after:dir(rtl){left:unset;right:unset;right:-12px}}}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}:host(.in-item.legacy-radio){margin-left:0;margin-right:0;margin-top:9px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-radio[slot=start]){-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px;margin-top:11px;margin-bottom:10px}.native-wrapper .radio-icon{width:20px;height:20px}";
|
|
14
14
|
|
|
15
15
|
const Radio = class {
|
|
16
16
|
constructor(hostRef) {
|
|
@@ -71,7 +71,6 @@ const Radio = class {
|
|
|
71
71
|
this.labelPlacement = 'start';
|
|
72
72
|
this.legacy = undefined;
|
|
73
73
|
this.justify = 'space-between';
|
|
74
|
-
this.alignment = 'center';
|
|
75
74
|
}
|
|
76
75
|
valueChanged() {
|
|
77
76
|
/**
|
|
@@ -136,7 +135,7 @@ const Radio = class {
|
|
|
136
135
|
return legacyFormController.hasLegacyControl() ? this.renderLegacyRadio() : this.renderRadio();
|
|
137
136
|
}
|
|
138
137
|
renderRadio() {
|
|
139
|
-
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex
|
|
138
|
+
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex } = this;
|
|
140
139
|
const mode = getIonMode(this);
|
|
141
140
|
const inItem = hostContext('ion-item', el);
|
|
142
141
|
return (h(Host, { onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
@@ -145,7 +144,6 @@ const Radio = class {
|
|
|
145
144
|
'radio-checked': checked,
|
|
146
145
|
'radio-disabled': disabled,
|
|
147
146
|
[`radio-justify-${justify}`]: true,
|
|
148
|
-
[`radio-alignment-${alignment}`]: true,
|
|
149
147
|
[`radio-label-placement-${labelPlacement}`]: true,
|
|
150
148
|
// Focus and active styling should not apply when the radio is in an item
|
|
151
149
|
'ion-activatable': !inItem,
|