@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.
Files changed (115) hide show
  1. package/components/icon.js +15 -3
  2. package/components/index7.js +1 -1
  3. package/components/ion-datetime.js +1 -1
  4. package/components/ion-refresher-content.js +10 -3
  5. package/components/ion-refresher.js +4 -183
  6. package/components/ion-split-pane.js +2 -2
  7. package/components/radio-group.js +9 -1
  8. package/components/refresher.utils.js +196 -0
  9. package/dist/cjs/{index-09471526.js → index-f52c6d38.js} +1 -1
  10. package/dist/cjs/ion-accordion_2.cjs.entry.js +1 -1
  11. package/dist/cjs/ion-back-button.cjs.entry.js +1 -1
  12. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +1 -1
  13. package/dist/cjs/ion-button_2.cjs.entry.js +15 -3
  14. package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -2
  15. package/dist/cjs/ion-fab_3.cjs.entry.js +1 -1
  16. package/dist/cjs/ion-input.cjs.entry.js +1 -1
  17. package/dist/cjs/ion-item_8.cjs.entry.js +1 -1
  18. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  19. package/dist/cjs/ion-radio_2.cjs.entry.js +9 -1
  20. package/dist/cjs/ion-refresher_2.cjs.entry.js +28 -13
  21. package/dist/cjs/ion-reorder_2.cjs.entry.js +1 -1
  22. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  23. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  24. package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
  25. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  26. package/dist/collection/components/datetime/datetime.ios.css +3 -1
  27. package/dist/collection/components/datetime/test/basic/datetime.e2e.js +29 -0
  28. package/dist/collection/components/radio/test/a11y/radio.e2e.js +16 -3
  29. package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js +15 -2
  30. package/dist/collection/components/radio-group/radio-group.js +9 -1
  31. package/dist/collection/components/refresher/refresher.utils.js +19 -11
  32. package/dist/collection/components/refresher-content/refresher-content.js +9 -3
  33. package/dist/collection/components/split-pane/split-pane.ios.css +9 -0
  34. package/dist/collection/components/split-pane/split-pane.md.css +9 -0
  35. package/dist/docs.json +1 -1
  36. package/dist/esm/{index-c132c5f1.js → index-f7dc70ba.js} +1 -1
  37. package/dist/esm/ion-accordion_2.entry.js +1 -1
  38. package/dist/esm/ion-back-button.entry.js +1 -1
  39. package/dist/esm/ion-breadcrumb_2.entry.js +1 -1
  40. package/dist/esm/ion-button_2.entry.js +15 -3
  41. package/dist/esm/ion-datetime_3.entry.js +2 -2
  42. package/dist/esm/ion-fab_3.entry.js +1 -1
  43. package/dist/esm/ion-input.entry.js +1 -1
  44. package/dist/esm/ion-item_8.entry.js +1 -1
  45. package/dist/esm/ion-menu_3.entry.js +1 -1
  46. package/dist/esm/ion-radio_2.entry.js +9 -1
  47. package/dist/esm/ion-refresher_2.entry.js +29 -14
  48. package/dist/esm/ion-reorder_2.entry.js +1 -1
  49. package/dist/esm/ion-searchbar.entry.js +1 -1
  50. package/dist/esm/ion-select_3.entry.js +1 -1
  51. package/dist/esm/ion-split-pane.entry.js +2 -2
  52. package/dist/esm/ion-toggle.entry.js +1 -1
  53. package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
  54. package/dist/esm-es5/ion-back-button.entry.js +1 -1
  55. package/dist/esm-es5/ion-breadcrumb_2.entry.js +1 -1
  56. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  57. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  58. package/dist/esm-es5/ion-fab_3.entry.js +1 -1
  59. package/dist/esm-es5/ion-input.entry.js +1 -1
  60. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  61. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  62. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  63. package/dist/esm-es5/ion-refresher_2.entry.js +1 -1
  64. package/dist/esm-es5/ion-reorder_2.entry.js +1 -1
  65. package/dist/esm-es5/ion-searchbar.entry.js +1 -1
  66. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  67. package/dist/esm-es5/ion-split-pane.entry.js +1 -1
  68. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  69. package/dist/ionic/ionic.esm.js +1 -1
  70. package/dist/ionic/{p-7dcf795f.entry.js → p-02cb0cf0.entry.js} +1 -1
  71. package/dist/ionic/{p-a42ef163.system.entry.js → p-068ec6d3.system.entry.js} +1 -1
  72. package/dist/ionic/{p-19c379da.system.entry.js → p-149567b1.system.entry.js} +1 -1
  73. package/dist/ionic/{p-11786dc7.entry.js → p-154e5e06.entry.js} +1 -1
  74. package/dist/ionic/p-19d9ceb8.system.js +1 -1
  75. package/dist/ionic/p-213e377d.system.entry.js +4 -0
  76. package/dist/ionic/{p-0dfa4ab4.system.entry.js → p-254ec7c0.system.entry.js} +2 -2
  77. package/dist/ionic/{p-12a62500.entry.js → p-2b3debd5.entry.js} +1 -1
  78. package/dist/ionic/{p-f0504446.system.entry.js → p-328107a5.system.entry.js} +1 -1
  79. package/dist/ionic/{p-b1f29949.system.entry.js → p-328b49db.system.entry.js} +1 -1
  80. package/dist/ionic/{p-aee39e06.entry.js → p-3381c3f4.entry.js} +1 -1
  81. package/dist/ionic/{p-4981ea0a.system.entry.js → p-39f96ff6.system.entry.js} +1 -1
  82. package/dist/ionic/{p-0cc80201.entry.js → p-43272b40.entry.js} +1 -1
  83. package/dist/ionic/{p-10ec9af7.system.entry.js → p-43f03cf4.system.entry.js} +1 -1
  84. package/dist/ionic/{p-11bf2ad0.system.entry.js → p-4a3218d4.system.entry.js} +1 -1
  85. package/dist/ionic/{p-2a583966.entry.js → p-4f400544.entry.js} +1 -1
  86. package/dist/ionic/p-5e0c7fdc.entry.js +4 -0
  87. package/dist/ionic/{p-529b24fb.entry.js → p-5ff99b79.entry.js} +1 -1
  88. package/dist/ionic/{p-cb8dff22.system.entry.js → p-6337e56b.system.entry.js} +1 -1
  89. package/dist/ionic/{p-2df97906.system.entry.js → p-72cb0718.system.entry.js} +1 -1
  90. package/dist/ionic/{p-4685218a.system.entry.js → p-793a10e0.system.entry.js} +1 -1
  91. package/dist/ionic/{p-42925096.system.entry.js → p-8ffef97f.system.entry.js} +1 -1
  92. package/dist/ionic/p-a20bb802.entry.js +4 -0
  93. package/dist/ionic/p-a4461d1c.system.entry.js +4 -0
  94. package/dist/ionic/{p-ae4b7df8.entry.js → p-aed4931c.entry.js} +1 -1
  95. package/dist/ionic/{p-cf53213c.entry.js → p-bdf71399.entry.js} +1 -1
  96. package/dist/ionic/{p-806a9810.entry.js → p-c23eff76.entry.js} +1 -1
  97. package/dist/ionic/{p-803efb5d.entry.js → p-c68dd1e0.entry.js} +1 -1
  98. package/dist/ionic/p-c8aadc98.system.entry.js +4 -0
  99. package/dist/ionic/{p-11a3973f.entry.js → p-cad1126a.entry.js} +1 -1
  100. package/dist/ionic/{p-7dc892f8.entry.js → p-d0748f6d.entry.js} +1 -1
  101. package/dist/ionic/p-eb246b50.entry.js +4 -0
  102. package/dist/ionic/p-ee810056.system.entry.js +4 -0
  103. package/dist/types/components/refresher/refresher.utils.d.ts +16 -0
  104. package/hydrate/index.js +40 -17
  105. package/package.json +4 -4
  106. package/dist/ionic/p-22827063.system.entry.js +0 -4
  107. package/dist/ionic/p-38531958.system.entry.js +0 -4
  108. package/dist/ionic/p-932f2259.system.entry.js +0 -4
  109. package/dist/ionic/p-950c05ad.entry.js +0 -4
  110. package/dist/ionic/p-96d4814f.system.entry.js +0 -4
  111. package/dist/ionic/p-a06501e3.entry.js +0 -4
  112. package/dist/ionic/p-c5acfeb1.entry.js +0 -4
  113. /package/dist/esm-es5/{index-c132c5f1.js → index-f7dc70ba.js} +0 -0
  114. /package/dist/ionic/{p-ea96fa73.js → p-831269de.js} +0 -0
  115. /package/dist/ionic/{p-8050b9b9.system.js → p-dfb6de03.system.js} +0 -0
@@ -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
- return getAssetPath(`svg/${iconName}.svg`);
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
@@ -1,7 +1,7 @@
1
1
  /*!
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
- /* Ionicons v7.2.1, ES Modules */
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 = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
25
- this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
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 { writeTask, proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
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, c as componentOnReady, m as clamp, g as getElementRoot, r as raf } from './helpers.js';
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 { a as isPlatform, b as getIonMode } from './ionic-global.js';
10
- import { c as createAnimation } from './animation.js';
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
- if (selectedRadio && selectedRadio.disabled === false) {
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.1, ES Modules */
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-09471526.js');
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