@ionic/core 7.6.3-nightly.20231220 → 7.6.3
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/icon.js +15 -3
- package/components/index7.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-refresher-content.js +10 -3
- package/components/ion-refresher.js +4 -183
- package/components/ion-split-pane.js +2 -2
- package/components/radio-group.js +9 -1
- package/components/refresher.utils.js +196 -0
- package/dist/cjs/{index-09471526.js → index-f52c6d38.js} +1 -1
- package/dist/cjs/ion-accordion_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-back-button.cjs.entry.js +1 -1
- package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-button_2.cjs.entry.js +15 -3
- package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-fab_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-input.cjs.entry.js +1 -1
- package/dist/cjs/ion-item_8.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +9 -1
- package/dist/cjs/ion-refresher_2.cjs.entry.js +28 -13
- package/dist/cjs/ion-reorder_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
- package/dist/collection/components/datetime/datetime.ios.css +3 -1
- package/dist/collection/components/datetime/test/basic/datetime.e2e.js +29 -0
- package/dist/collection/components/radio/test/a11y/radio.e2e.js +16 -3
- package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js +15 -2
- package/dist/collection/components/radio-group/radio-group.js +9 -1
- package/dist/collection/components/refresher/refresher.utils.js +19 -11
- package/dist/collection/components/refresher-content/refresher-content.js +9 -3
- package/dist/collection/components/split-pane/split-pane.ios.css +9 -0
- package/dist/collection/components/split-pane/split-pane.md.css +9 -0
- package/dist/docs.json +1 -1
- package/dist/esm/{index-c132c5f1.js → index-f7dc70ba.js} +1 -1
- package/dist/esm/ion-accordion_2.entry.js +1 -1
- package/dist/esm/ion-back-button.entry.js +1 -1
- package/dist/esm/ion-breadcrumb_2.entry.js +1 -1
- package/dist/esm/ion-button_2.entry.js +15 -3
- package/dist/esm/ion-datetime_3.entry.js +2 -2
- package/dist/esm/ion-fab_3.entry.js +1 -1
- package/dist/esm/ion-input.entry.js +1 -1
- package/dist/esm/ion-item_8.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +9 -1
- package/dist/esm/ion-refresher_2.entry.js +29 -14
- package/dist/esm/ion-reorder_2.entry.js +1 -1
- package/dist/esm/ion-searchbar.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-split-pane.entry.js +2 -2
- package/dist/esm/ion-toggle.entry.js +1 -1
- package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
- package/dist/esm-es5/ion-back-button.entry.js +1 -1
- package/dist/esm-es5/ion-breadcrumb_2.entry.js +1 -1
- package/dist/esm-es5/ion-button_2.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-fab_3.entry.js +1 -1
- package/dist/esm-es5/ion-input.entry.js +1 -1
- package/dist/esm-es5/ion-item_8.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-refresher_2.entry.js +1 -1
- package/dist/esm-es5/ion-reorder_2.entry.js +1 -1
- package/dist/esm-es5/ion-searchbar.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-split-pane.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-7dcf795f.entry.js → p-02cb0cf0.entry.js} +1 -1
- package/dist/ionic/{p-a42ef163.system.entry.js → p-068ec6d3.system.entry.js} +1 -1
- package/dist/ionic/{p-19c379da.system.entry.js → p-149567b1.system.entry.js} +1 -1
- package/dist/ionic/{p-11786dc7.entry.js → p-154e5e06.entry.js} +1 -1
- package/dist/ionic/p-19d9ceb8.system.js +1 -1
- package/dist/ionic/p-213e377d.system.entry.js +4 -0
- package/dist/ionic/{p-0dfa4ab4.system.entry.js → p-254ec7c0.system.entry.js} +2 -2
- package/dist/ionic/{p-12a62500.entry.js → p-2b3debd5.entry.js} +1 -1
- package/dist/ionic/{p-f0504446.system.entry.js → p-328107a5.system.entry.js} +1 -1
- package/dist/ionic/{p-b1f29949.system.entry.js → p-328b49db.system.entry.js} +1 -1
- package/dist/ionic/{p-aee39e06.entry.js → p-3381c3f4.entry.js} +1 -1
- package/dist/ionic/{p-4981ea0a.system.entry.js → p-39f96ff6.system.entry.js} +1 -1
- package/dist/ionic/{p-0cc80201.entry.js → p-43272b40.entry.js} +1 -1
- package/dist/ionic/{p-10ec9af7.system.entry.js → p-43f03cf4.system.entry.js} +1 -1
- package/dist/ionic/{p-11bf2ad0.system.entry.js → p-4a3218d4.system.entry.js} +1 -1
- package/dist/ionic/{p-2a583966.entry.js → p-4f400544.entry.js} +1 -1
- package/dist/ionic/p-5e0c7fdc.entry.js +4 -0
- package/dist/ionic/{p-529b24fb.entry.js → p-5ff99b79.entry.js} +1 -1
- package/dist/ionic/{p-cb8dff22.system.entry.js → p-6337e56b.system.entry.js} +1 -1
- package/dist/ionic/{p-2df97906.system.entry.js → p-72cb0718.system.entry.js} +1 -1
- package/dist/ionic/{p-4685218a.system.entry.js → p-793a10e0.system.entry.js} +1 -1
- package/dist/ionic/{p-42925096.system.entry.js → p-8ffef97f.system.entry.js} +1 -1
- package/dist/ionic/p-a20bb802.entry.js +4 -0
- package/dist/ionic/p-a4461d1c.system.entry.js +4 -0
- package/dist/ionic/{p-ae4b7df8.entry.js → p-aed4931c.entry.js} +1 -1
- package/dist/ionic/{p-cf53213c.entry.js → p-bdf71399.entry.js} +1 -1
- package/dist/ionic/{p-806a9810.entry.js → p-c23eff76.entry.js} +1 -1
- package/dist/ionic/{p-803efb5d.entry.js → p-c68dd1e0.entry.js} +1 -1
- package/dist/ionic/p-c8aadc98.system.entry.js +4 -0
- package/dist/ionic/{p-11a3973f.entry.js → p-cad1126a.entry.js} +1 -1
- package/dist/ionic/{p-7dc892f8.entry.js → p-d0748f6d.entry.js} +1 -1
- package/dist/ionic/p-eb246b50.entry.js +4 -0
- package/dist/ionic/p-ee810056.system.entry.js +4 -0
- package/dist/types/components/refresher/refresher.utils.d.ts +16 -0
- package/hydrate/index.js +40 -17
- package/package.json +4 -4
- package/dist/ionic/p-22827063.system.entry.js +0 -4
- package/dist/ionic/p-38531958.system.entry.js +0 -4
- package/dist/ionic/p-932f2259.system.entry.js +0 -4
- package/dist/ionic/p-950c05ad.entry.js +0 -4
- package/dist/ionic/p-96d4814f.system.entry.js +0 -4
- package/dist/ionic/p-a06501e3.entry.js +0 -4
- package/dist/ionic/p-c5acfeb1.entry.js +0 -4
- /package/dist/esm-es5/{index-c132c5f1.js → index-f7dc70ba.js} +0 -0
- /package/dist/ionic/{p-ea96fa73.js → p-831269de.js} +0 -0
- /package/dist/ionic/{p-8050b9b9.system.js → p-dfb6de03.system.js} +0 -0
package/components/icon.js
CHANGED
|
@@ -24,7 +24,7 @@ const getUrl = (i) => {
|
|
|
24
24
|
}
|
|
25
25
|
url = getName(i.name, i.icon, i.mode, i.ios, i.md);
|
|
26
26
|
if (url) {
|
|
27
|
-
return getNamedUrl(url);
|
|
27
|
+
return getNamedUrl(url, i);
|
|
28
28
|
}
|
|
29
29
|
if (i.icon) {
|
|
30
30
|
url = getSrc(i.icon);
|
|
@@ -38,12 +38,24 @@ const getUrl = (i) => {
|
|
|
38
38
|
}
|
|
39
39
|
return null;
|
|
40
40
|
};
|
|
41
|
-
const getNamedUrl = (iconName) => {
|
|
41
|
+
const getNamedUrl = (iconName, iconEl) => {
|
|
42
42
|
const url = getIconMap().get(iconName);
|
|
43
43
|
if (url) {
|
|
44
44
|
return url;
|
|
45
45
|
}
|
|
46
|
-
|
|
46
|
+
try {
|
|
47
|
+
return getAssetPath(`svg/${iconName}.svg`);
|
|
48
|
+
}
|
|
49
|
+
catch (e) {
|
|
50
|
+
/**
|
|
51
|
+
* In the custom elements build version of ionicons, referencing an icon
|
|
52
|
+
* by name will throw an invalid URL error because the asset path is not defined.
|
|
53
|
+
* This catches that error and logs something that is more developer-friendly.
|
|
54
|
+
* We also include a reference to the ion-icon element so developers can
|
|
55
|
+
* figure out which instance of ion-icon needs to be updated.
|
|
56
|
+
*/
|
|
57
|
+
console.warn(`[Ionicons Warning]: Could not load icon with name "${iconName}". Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component.`, iconEl);
|
|
58
|
+
}
|
|
47
59
|
};
|
|
48
60
|
const getName = (iconName, icon, mode, ios, md) => {
|
|
49
61
|
// default to "md" if somehow the mode wasn't set
|
package/components/index7.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
/* Ionicons v7.2.
|
|
4
|
+
/* Ionicons v7.2.2, ES Modules */
|
|
5
5
|
const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>";
|
|
6
6
|
const arrowDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 268l144 144 144-144M256 392V100' class='ionicon-fill-none'/></svg>";
|
|
7
7
|
const caretBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M368 64L144 256l224 192V64z'/></svg>";
|
|
@@ -189,7 +189,7 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
|
|
|
189
189
|
return undefined;
|
|
190
190
|
};
|
|
191
191
|
|
|
192
|
-
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:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{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-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 ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.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-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;width:auto}: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}.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{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:min(0.875rem, 22.4px)}: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:min(1rem, 25.6px);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: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-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: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, #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%}";
|
|
192
|
+
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:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{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-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 ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.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-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;width:auto}: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}.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{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:min(0.875rem, 22.4px)}: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:min(1rem, 25.6px);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: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-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{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, #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%}";
|
|
193
193
|
|
|
194
194
|
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:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.show-month-and-year:dir(rtl)) .datetime-time{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-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 ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.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-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;width:auto}: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}.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{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-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:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}: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: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-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active{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}";
|
|
195
195
|
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
|
|
6
|
-
import { c as config, b as getIonMode, a as isPlatform } from './ionic-global.js';
|
|
7
6
|
import { n as caretBackSharp, o as arrowDown } from './index7.js';
|
|
7
|
+
import { c as config, b as getIonMode } from './ionic-global.js';
|
|
8
|
+
import { e as supportsRubberBandScrolling } from './refresher.utils.js';
|
|
8
9
|
import { d as defineCustomElement$2, S as SPINNERS } from './spinner.js';
|
|
9
10
|
import { d as defineCustomElement$3 } from './icon.js';
|
|
10
11
|
|
|
@@ -20,9 +21,15 @@ const RefresherContent = /*@__PURE__*/ proxyCustomElement(class RefresherContent
|
|
|
20
21
|
}
|
|
21
22
|
componentWillLoad() {
|
|
22
23
|
if (this.pullingIcon === undefined) {
|
|
24
|
+
/**
|
|
25
|
+
* The native iOS refresher uses a spinner instead of
|
|
26
|
+
* an icon, so we need to see if this device supports
|
|
27
|
+
* the native iOS refresher.
|
|
28
|
+
*/
|
|
29
|
+
const hasRubberBandScrolling = supportsRubberBandScrolling();
|
|
23
30
|
const mode = getIonMode(this);
|
|
24
|
-
const overflowRefresher =
|
|
25
|
-
this.pullingIcon = config.get('refreshingIcon', mode === 'ios' &&
|
|
31
|
+
const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
|
|
32
|
+
this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
|
|
26
33
|
}
|
|
27
34
|
if (this.refreshingSpinner === undefined) {
|
|
28
35
|
const mode = getIonMode(this);
|
|
@@ -1,192 +1,13 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { proxyCustomElement, HTMLElement, createEvent, writeTask, readTask, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { g as getTimeGivenProgression } from './cubic-bezier.js';
|
|
6
6
|
import { I as ION_CONTENT_CLASS_SELECTOR, b as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
|
|
7
|
-
import { t as transitionEndAsync,
|
|
7
|
+
import { t as transitionEndAsync, m as clamp, g as getElementRoot, c as componentOnReady, r as raf } from './helpers.js';
|
|
8
8
|
import { c as hapticImpact, I as ImpactStyle } from './haptic.js';
|
|
9
|
-
import {
|
|
10
|
-
import { c as
|
|
11
|
-
|
|
12
|
-
const getRefresherAnimationType = (contentEl) => {
|
|
13
|
-
const previousSibling = contentEl.previousElementSibling;
|
|
14
|
-
const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
|
|
15
|
-
return hasHeader ? 'translate' : 'scale';
|
|
16
|
-
};
|
|
17
|
-
const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
|
|
18
|
-
return type === 'scale'
|
|
19
|
-
? createScaleAnimation(pullingSpinner, refresherEl)
|
|
20
|
-
: createTranslateAnimation(pullingSpinner, refresherEl);
|
|
21
|
-
};
|
|
22
|
-
const createBaseAnimation = (pullingRefresherIcon) => {
|
|
23
|
-
const spinner = pullingRefresherIcon.querySelector('ion-spinner');
|
|
24
|
-
const circle = spinner.shadowRoot.querySelector('circle');
|
|
25
|
-
const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
|
|
26
|
-
const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
|
|
27
|
-
const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
|
|
28
|
-
const baseAnimation = createAnimation().duration(1000).easing('ease-out');
|
|
29
|
-
const spinnerArrowContainerAnimation = createAnimation()
|
|
30
|
-
.addElement(spinnerArrowContainer)
|
|
31
|
-
.keyframes([
|
|
32
|
-
{ offset: 0, opacity: '0.3' },
|
|
33
|
-
{ offset: 0.45, opacity: '0.3' },
|
|
34
|
-
{ offset: 0.55, opacity: '1' },
|
|
35
|
-
{ offset: 1, opacity: '1' },
|
|
36
|
-
]);
|
|
37
|
-
const circleInnerAnimation = createAnimation()
|
|
38
|
-
.addElement(circle)
|
|
39
|
-
.keyframes([
|
|
40
|
-
{ offset: 0, strokeDasharray: '1px, 200px' },
|
|
41
|
-
{ offset: 0.2, strokeDasharray: '1px, 200px' },
|
|
42
|
-
{ offset: 0.55, strokeDasharray: '100px, 200px' },
|
|
43
|
-
{ offset: 1, strokeDasharray: '100px, 200px' },
|
|
44
|
-
]);
|
|
45
|
-
const circleOuterAnimation = createAnimation()
|
|
46
|
-
.addElement(spinner)
|
|
47
|
-
.keyframes([
|
|
48
|
-
{ offset: 0, transform: 'rotate(-90deg)' },
|
|
49
|
-
{ offset: 1, transform: 'rotate(210deg)' },
|
|
50
|
-
]);
|
|
51
|
-
/**
|
|
52
|
-
* Only add arrow animation if present
|
|
53
|
-
* this allows users to customize the spinners
|
|
54
|
-
* without errors being thrown
|
|
55
|
-
*/
|
|
56
|
-
if (arrowContainer && arrow) {
|
|
57
|
-
const arrowContainerAnimation = createAnimation()
|
|
58
|
-
.addElement(arrowContainer)
|
|
59
|
-
.keyframes([
|
|
60
|
-
{ offset: 0, transform: 'rotate(0deg)' },
|
|
61
|
-
{ offset: 0.3, transform: 'rotate(0deg)' },
|
|
62
|
-
{ offset: 0.55, transform: 'rotate(280deg)' },
|
|
63
|
-
{ offset: 1, transform: 'rotate(400deg)' },
|
|
64
|
-
]);
|
|
65
|
-
const arrowAnimation = createAnimation()
|
|
66
|
-
.addElement(arrow)
|
|
67
|
-
.keyframes([
|
|
68
|
-
{ offset: 0, transform: 'translateX(2px) scale(0)' },
|
|
69
|
-
{ offset: 0.3, transform: 'translateX(2px) scale(0)' },
|
|
70
|
-
{ offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
|
|
71
|
-
{ offset: 1, transform: 'translateX(-1.5px) scale(1)' },
|
|
72
|
-
]);
|
|
73
|
-
baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
|
|
74
|
-
}
|
|
75
|
-
return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
|
|
76
|
-
};
|
|
77
|
-
const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
|
|
78
|
-
/**
|
|
79
|
-
* Do not take the height of the refresher icon
|
|
80
|
-
* because at this point the DOM has not updated,
|
|
81
|
-
* so the refresher icon is still hidden with
|
|
82
|
-
* display: none.
|
|
83
|
-
* The `ion-refresher` container height
|
|
84
|
-
* is roughly the amount we need to offset
|
|
85
|
-
* the icon by when pulling down.
|
|
86
|
-
*/
|
|
87
|
-
const height = refresherEl.clientHeight;
|
|
88
|
-
const spinnerAnimation = createAnimation()
|
|
89
|
-
.addElement(pullingRefresherIcon)
|
|
90
|
-
.keyframes([
|
|
91
|
-
{ offset: 0, transform: `scale(0) translateY(-${height}px)` },
|
|
92
|
-
{ offset: 1, transform: 'scale(1) translateY(100px)' },
|
|
93
|
-
]);
|
|
94
|
-
return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
|
|
95
|
-
};
|
|
96
|
-
const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
|
|
97
|
-
/**
|
|
98
|
-
* Do not take the height of the refresher icon
|
|
99
|
-
* because at this point the DOM has not updated,
|
|
100
|
-
* so the refresher icon is still hidden with
|
|
101
|
-
* display: none.
|
|
102
|
-
* The `ion-refresher` container height
|
|
103
|
-
* is roughly the amount we need to offset
|
|
104
|
-
* the icon by when pulling down.
|
|
105
|
-
*/
|
|
106
|
-
const height = refresherEl.clientHeight;
|
|
107
|
-
const spinnerAnimation = createAnimation()
|
|
108
|
-
.addElement(pullingRefresherIcon)
|
|
109
|
-
.keyframes([
|
|
110
|
-
{ offset: 0, transform: `translateY(-${height}px)` },
|
|
111
|
-
{ offset: 1, transform: 'translateY(100px)' },
|
|
112
|
-
]);
|
|
113
|
-
return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
|
|
114
|
-
};
|
|
115
|
-
const createSnapBackAnimation = (pullingRefresherIcon) => {
|
|
116
|
-
return createAnimation()
|
|
117
|
-
.duration(125)
|
|
118
|
-
.addElement(pullingRefresherIcon)
|
|
119
|
-
.fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
|
|
120
|
-
};
|
|
121
|
-
// iOS Native Refresher
|
|
122
|
-
// -----------------------------
|
|
123
|
-
const setSpinnerOpacity = (spinner, opacity) => {
|
|
124
|
-
spinner.style.setProperty('opacity', opacity.toString());
|
|
125
|
-
};
|
|
126
|
-
const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
|
|
127
|
-
const max = 1;
|
|
128
|
-
writeTask(() => {
|
|
129
|
-
ticks.forEach((el, i) => {
|
|
130
|
-
/**
|
|
131
|
-
* Compute the opacity of each tick
|
|
132
|
-
* mark as a percentage of the pullAmount
|
|
133
|
-
* offset by max / numTicks so
|
|
134
|
-
* the tick marks are shown staggered.
|
|
135
|
-
*/
|
|
136
|
-
const min = i * (max / numTicks);
|
|
137
|
-
const range = max - min;
|
|
138
|
-
const start = pullAmount - min;
|
|
139
|
-
const progression = clamp(0, start / range, 1);
|
|
140
|
-
el.style.setProperty('opacity', progression.toString());
|
|
141
|
-
});
|
|
142
|
-
});
|
|
143
|
-
};
|
|
144
|
-
const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
|
|
145
|
-
writeTask(() => {
|
|
146
|
-
// If user pulls down quickly, the spinner should spin faster
|
|
147
|
-
spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
|
|
148
|
-
spinner.style.setProperty('opacity', '1');
|
|
149
|
-
});
|
|
150
|
-
};
|
|
151
|
-
const translateElement = (el, value, duration = 200) => {
|
|
152
|
-
if (!el) {
|
|
153
|
-
return Promise.resolve();
|
|
154
|
-
}
|
|
155
|
-
const trans = transitionEndAsync(el, duration);
|
|
156
|
-
writeTask(() => {
|
|
157
|
-
el.style.setProperty('transition', `${duration}ms all ease-out`);
|
|
158
|
-
if (value === undefined) {
|
|
159
|
-
el.style.removeProperty('transform');
|
|
160
|
-
}
|
|
161
|
-
else {
|
|
162
|
-
el.style.setProperty('transform', `translate3d(0px, ${value}, 0px)`);
|
|
163
|
-
}
|
|
164
|
-
});
|
|
165
|
-
return trans;
|
|
166
|
-
};
|
|
167
|
-
// Utils
|
|
168
|
-
// -----------------------------
|
|
169
|
-
const shouldUseNativeRefresher = async (referenceEl, mode) => {
|
|
170
|
-
const refresherContent = referenceEl.querySelector('ion-refresher-content');
|
|
171
|
-
if (!refresherContent) {
|
|
172
|
-
return Promise.resolve(false);
|
|
173
|
-
}
|
|
174
|
-
await new Promise((resolve) => componentOnReady(refresherContent, resolve));
|
|
175
|
-
const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
|
|
176
|
-
const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
|
|
177
|
-
return (pullingSpinner !== null &&
|
|
178
|
-
refreshingSpinner !== null &&
|
|
179
|
-
/**
|
|
180
|
-
* We use webkitOverflowScrolling for feature detection with rubber band scrolling
|
|
181
|
-
* on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
|
|
182
|
-
* However, it will be the empty string on iOS.
|
|
183
|
-
* Note that we do not use getPropertyValue (and thus need to cast as any) because calling
|
|
184
|
-
* getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
|
|
185
|
-
* set on the element, even if the platform does not support that.
|
|
186
|
-
*/
|
|
187
|
-
((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
|
|
188
|
-
mode === 'md'));
|
|
189
|
-
};
|
|
9
|
+
import { b as getIonMode } from './ionic-global.js';
|
|
10
|
+
import { s as shouldUseNativeRefresher, t as translateElement, a as setSpinnerOpacity, h as handleScrollWhileRefreshing, b as handleScrollWhilePulling, c as createPullingAnimation, d as createSnapBackAnimation, g as getRefresherAnimationType } from './refresher.utils.js';
|
|
190
11
|
|
|
191
12
|
const refresherIosCss = "ion-refresher{top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}@supports (inset-inline-start: 0){ion-refresher{inset-inline-start:0}}@supports not (inset-inline-start: 0){ion-refresher{left:0}:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}[dir=rtl] ion-refresher{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){ion-refresher:dir(rtl){left:unset;right:unset;right:0}}}ion-refresher.refresher-active{display:block}ion-refresher-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{-webkit-transform-origin:center;transform-origin:center;-webkit-transition:200ms;transition:200ms;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){.refresher-pulling-icon:dir(rtl),.refresher-refreshing-icon:dir(rtl){-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;-webkit-animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;-webkit-animation:250ms linear refresher-pop forwards;animation:250ms linear refresher-pop forwards}.refresher-native ion-spinner{width:32px;height:32px;color:var(--ion-color-step-450, #747577)}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0) rotate(180deg);transform:scale(0) rotate(180deg);-webkit-transition:300ms;transition:300ms}@-webkit-keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}";
|
|
192
13
|
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { b as getIonMode } from './ionic-global.js';
|
|
6
6
|
|
|
7
|
-
const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";
|
|
7
|
+
const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1;overflow:hidden}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";
|
|
8
8
|
|
|
9
|
-
const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";
|
|
9
|
+
const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1;overflow:hidden}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}";
|
|
10
10
|
|
|
11
11
|
// TODO(FW-2832): types
|
|
12
12
|
const SPLIT_PANE_MAIN = 'split-pane-main';
|
|
@@ -38,7 +38,15 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
|
|
|
38
38
|
* using the `name` attribute.
|
|
39
39
|
*/
|
|
40
40
|
const selectedRadio = ev.target && ev.target.closest('ion-radio');
|
|
41
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Our current disabled prop definition causes Stencil to mark it
|
|
43
|
+
* as optional. While this is not desired, fixing this behavior
|
|
44
|
+
* in Stencil is a significant breaking change, so this effort is
|
|
45
|
+
* being de-risked in STENCIL-917. Until then, we compromise
|
|
46
|
+
* here by checking for falsy `disabled` values instead of strictly
|
|
47
|
+
* checking `disabled === false`.
|
|
48
|
+
*/
|
|
49
|
+
if (selectedRadio && !selectedRadio.disabled) {
|
|
42
50
|
const currentValue = this.value;
|
|
43
51
|
const newValue = selectedRadio.value;
|
|
44
52
|
if (newValue !== currentValue) {
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
+
*/
|
|
4
|
+
import { writeTask } from '@stencil/core/internal/client';
|
|
5
|
+
import { c as createAnimation } from './animation.js';
|
|
6
|
+
import { t as transitionEndAsync, c as componentOnReady, m as clamp } from './helpers.js';
|
|
7
|
+
|
|
8
|
+
const getRefresherAnimationType = (contentEl) => {
|
|
9
|
+
const previousSibling = contentEl.previousElementSibling;
|
|
10
|
+
const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
|
|
11
|
+
return hasHeader ? 'translate' : 'scale';
|
|
12
|
+
};
|
|
13
|
+
const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
|
|
14
|
+
return type === 'scale'
|
|
15
|
+
? createScaleAnimation(pullingSpinner, refresherEl)
|
|
16
|
+
: createTranslateAnimation(pullingSpinner, refresherEl);
|
|
17
|
+
};
|
|
18
|
+
const createBaseAnimation = (pullingRefresherIcon) => {
|
|
19
|
+
const spinner = pullingRefresherIcon.querySelector('ion-spinner');
|
|
20
|
+
const circle = spinner.shadowRoot.querySelector('circle');
|
|
21
|
+
const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
|
|
22
|
+
const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
|
|
23
|
+
const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
|
|
24
|
+
const baseAnimation = createAnimation().duration(1000).easing('ease-out');
|
|
25
|
+
const spinnerArrowContainerAnimation = createAnimation()
|
|
26
|
+
.addElement(spinnerArrowContainer)
|
|
27
|
+
.keyframes([
|
|
28
|
+
{ offset: 0, opacity: '0.3' },
|
|
29
|
+
{ offset: 0.45, opacity: '0.3' },
|
|
30
|
+
{ offset: 0.55, opacity: '1' },
|
|
31
|
+
{ offset: 1, opacity: '1' },
|
|
32
|
+
]);
|
|
33
|
+
const circleInnerAnimation = createAnimation()
|
|
34
|
+
.addElement(circle)
|
|
35
|
+
.keyframes([
|
|
36
|
+
{ offset: 0, strokeDasharray: '1px, 200px' },
|
|
37
|
+
{ offset: 0.2, strokeDasharray: '1px, 200px' },
|
|
38
|
+
{ offset: 0.55, strokeDasharray: '100px, 200px' },
|
|
39
|
+
{ offset: 1, strokeDasharray: '100px, 200px' },
|
|
40
|
+
]);
|
|
41
|
+
const circleOuterAnimation = createAnimation()
|
|
42
|
+
.addElement(spinner)
|
|
43
|
+
.keyframes([
|
|
44
|
+
{ offset: 0, transform: 'rotate(-90deg)' },
|
|
45
|
+
{ offset: 1, transform: 'rotate(210deg)' },
|
|
46
|
+
]);
|
|
47
|
+
/**
|
|
48
|
+
* Only add arrow animation if present
|
|
49
|
+
* this allows users to customize the spinners
|
|
50
|
+
* without errors being thrown
|
|
51
|
+
*/
|
|
52
|
+
if (arrowContainer && arrow) {
|
|
53
|
+
const arrowContainerAnimation = createAnimation()
|
|
54
|
+
.addElement(arrowContainer)
|
|
55
|
+
.keyframes([
|
|
56
|
+
{ offset: 0, transform: 'rotate(0deg)' },
|
|
57
|
+
{ offset: 0.3, transform: 'rotate(0deg)' },
|
|
58
|
+
{ offset: 0.55, transform: 'rotate(280deg)' },
|
|
59
|
+
{ offset: 1, transform: 'rotate(400deg)' },
|
|
60
|
+
]);
|
|
61
|
+
const arrowAnimation = createAnimation()
|
|
62
|
+
.addElement(arrow)
|
|
63
|
+
.keyframes([
|
|
64
|
+
{ offset: 0, transform: 'translateX(2px) scale(0)' },
|
|
65
|
+
{ offset: 0.3, transform: 'translateX(2px) scale(0)' },
|
|
66
|
+
{ offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
|
|
67
|
+
{ offset: 1, transform: 'translateX(-1.5px) scale(1)' },
|
|
68
|
+
]);
|
|
69
|
+
baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
|
|
70
|
+
}
|
|
71
|
+
return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
|
|
72
|
+
};
|
|
73
|
+
const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
|
|
74
|
+
/**
|
|
75
|
+
* Do not take the height of the refresher icon
|
|
76
|
+
* because at this point the DOM has not updated,
|
|
77
|
+
* so the refresher icon is still hidden with
|
|
78
|
+
* display: none.
|
|
79
|
+
* The `ion-refresher` container height
|
|
80
|
+
* is roughly the amount we need to offset
|
|
81
|
+
* the icon by when pulling down.
|
|
82
|
+
*/
|
|
83
|
+
const height = refresherEl.clientHeight;
|
|
84
|
+
const spinnerAnimation = createAnimation()
|
|
85
|
+
.addElement(pullingRefresherIcon)
|
|
86
|
+
.keyframes([
|
|
87
|
+
{ offset: 0, transform: `scale(0) translateY(-${height}px)` },
|
|
88
|
+
{ offset: 1, transform: 'scale(1) translateY(100px)' },
|
|
89
|
+
]);
|
|
90
|
+
return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
|
|
91
|
+
};
|
|
92
|
+
const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
|
|
93
|
+
/**
|
|
94
|
+
* Do not take the height of the refresher icon
|
|
95
|
+
* because at this point the DOM has not updated,
|
|
96
|
+
* so the refresher icon is still hidden with
|
|
97
|
+
* display: none.
|
|
98
|
+
* The `ion-refresher` container height
|
|
99
|
+
* is roughly the amount we need to offset
|
|
100
|
+
* the icon by when pulling down.
|
|
101
|
+
*/
|
|
102
|
+
const height = refresherEl.clientHeight;
|
|
103
|
+
const spinnerAnimation = createAnimation()
|
|
104
|
+
.addElement(pullingRefresherIcon)
|
|
105
|
+
.keyframes([
|
|
106
|
+
{ offset: 0, transform: `translateY(-${height}px)` },
|
|
107
|
+
{ offset: 1, transform: 'translateY(100px)' },
|
|
108
|
+
]);
|
|
109
|
+
return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
|
|
110
|
+
};
|
|
111
|
+
const createSnapBackAnimation = (pullingRefresherIcon) => {
|
|
112
|
+
return createAnimation()
|
|
113
|
+
.duration(125)
|
|
114
|
+
.addElement(pullingRefresherIcon)
|
|
115
|
+
.fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
|
|
116
|
+
};
|
|
117
|
+
// iOS Native Refresher
|
|
118
|
+
// -----------------------------
|
|
119
|
+
const setSpinnerOpacity = (spinner, opacity) => {
|
|
120
|
+
spinner.style.setProperty('opacity', opacity.toString());
|
|
121
|
+
};
|
|
122
|
+
const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
|
|
123
|
+
const max = 1;
|
|
124
|
+
writeTask(() => {
|
|
125
|
+
ticks.forEach((el, i) => {
|
|
126
|
+
/**
|
|
127
|
+
* Compute the opacity of each tick
|
|
128
|
+
* mark as a percentage of the pullAmount
|
|
129
|
+
* offset by max / numTicks so
|
|
130
|
+
* the tick marks are shown staggered.
|
|
131
|
+
*/
|
|
132
|
+
const min = i * (max / numTicks);
|
|
133
|
+
const range = max - min;
|
|
134
|
+
const start = pullAmount - min;
|
|
135
|
+
const progression = clamp(0, start / range, 1);
|
|
136
|
+
el.style.setProperty('opacity', progression.toString());
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
};
|
|
140
|
+
const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
|
|
141
|
+
writeTask(() => {
|
|
142
|
+
// If user pulls down quickly, the spinner should spin faster
|
|
143
|
+
spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
|
|
144
|
+
spinner.style.setProperty('opacity', '1');
|
|
145
|
+
});
|
|
146
|
+
};
|
|
147
|
+
const translateElement = (el, value, duration = 200) => {
|
|
148
|
+
if (!el) {
|
|
149
|
+
return Promise.resolve();
|
|
150
|
+
}
|
|
151
|
+
const trans = transitionEndAsync(el, duration);
|
|
152
|
+
writeTask(() => {
|
|
153
|
+
el.style.setProperty('transition', `${duration}ms all ease-out`);
|
|
154
|
+
if (value === undefined) {
|
|
155
|
+
el.style.removeProperty('transform');
|
|
156
|
+
}
|
|
157
|
+
else {
|
|
158
|
+
el.style.setProperty('transform', `translate3d(0px, ${value}, 0px)`);
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
return trans;
|
|
162
|
+
};
|
|
163
|
+
// Utils
|
|
164
|
+
// -----------------------------
|
|
165
|
+
/**
|
|
166
|
+
* In order to use the native iOS refresher the device must support rubber band scrolling.
|
|
167
|
+
* As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
|
|
168
|
+
*
|
|
169
|
+
* We also need to be careful not to include devices that spoof their user agent.
|
|
170
|
+
* For example, when using iOS emulation in Chrome the user agent will be spoofed such that
|
|
171
|
+
* navigator.maxTouchPointer > 0. To work around this,
|
|
172
|
+
* we check to see if the apple-pay-logo is supported as a named image which is only
|
|
173
|
+
* true on Apple devices.
|
|
174
|
+
*
|
|
175
|
+
* We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
|
|
176
|
+
* for rubber band support. However, this property was removed on iPadOS and it's possible
|
|
177
|
+
* that this will be removed on iOS in the future too.
|
|
178
|
+
*
|
|
179
|
+
*/
|
|
180
|
+
const supportsRubberBandScrolling = () => {
|
|
181
|
+
return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
|
|
182
|
+
};
|
|
183
|
+
const shouldUseNativeRefresher = async (referenceEl, mode) => {
|
|
184
|
+
const refresherContent = referenceEl.querySelector('ion-refresher-content');
|
|
185
|
+
if (!refresherContent) {
|
|
186
|
+
return Promise.resolve(false);
|
|
187
|
+
}
|
|
188
|
+
await new Promise((resolve) => componentOnReady(refresherContent, resolve));
|
|
189
|
+
const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
|
|
190
|
+
const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
|
|
191
|
+
return (pullingSpinner !== null &&
|
|
192
|
+
refreshingSpinner !== null &&
|
|
193
|
+
((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
export { setSpinnerOpacity as a, handleScrollWhilePulling as b, createPullingAnimation as c, createSnapBackAnimation as d, supportsRubberBandScrolling as e, getRefresherAnimationType as g, handleScrollWhileRefreshing as h, shouldUseNativeRefresher as s, translateElement as t };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
|
-
/* Ionicons v7.2.
|
|
6
|
+
/* Ionicons v7.2.2, ES Modules */
|
|
7
7
|
const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>";
|
|
8
8
|
const arrowDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 268l144 144 144-144M256 392V100' class='ionicon-fill-none'/></svg>";
|
|
9
9
|
const caretBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M368 64L144 256l224 192V64z'/></svg>";
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
7
7
|
|
|
8
8
|
const index = require('./index-50dcfe2f.js');
|
|
9
9
|
const helpers = require('./helpers-76bb7efb.js');
|
|
10
|
-
const index$1 = require('./index-
|
|
10
|
+
const index$1 = require('./index-f52c6d38.js');
|
|
11
11
|
const ionicGlobal = require('./ionic-global-a4edbf03.js');
|
|
12
12
|
const index$2 = require('./index-5915f9b3.js');
|
|
13
13
|
|