@ionic/core 8.7.18-dev.11769790854.11895f8f → 8.7.18-dev.11770238549.14c2a85f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ion-item-divider.js +2 -2
- package/components/ion-item-group.js +1 -1
- package/components/ion-item-option.js +2 -2
- package/components/ion-item-options.js +1 -1
- package/components/ion-item-sliding.js +1 -1
- package/components/ion-loading.js +2 -2
- package/components/ion-menu-button.js +2 -2
- package/components/ion-menu-toggle.js +2 -2
- package/components/ion-menu.js +2 -2
- package/components/ion-nav-link.js +1 -1
- package/components/ion-nav.js +1 -1
- package/components/ion-note.js +2 -2
- package/components/ion-picker-legacy.js +2 -2
- package/components/ion-progress-bar.js +1 -1
- package/components/ion-range.js +3 -3
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-refresher.js +1 -1
- package/components/ion-reorder-group.js +1 -1
- package/components/ion-reorder.js +1 -1
- package/components/ion-router-link.js +2 -2
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-row.js +1 -1
- package/components/ion-searchbar.js +4 -4
- package/components/ion-segment-button.js +2 -2
- package/components/ion-segment-content.js +1 -1
- package/components/ion-segment-view.js +2 -2
- package/components/ion-segment.js +2 -2
- package/components/ion-select-option.js +1 -1
- package/components/ion-select.js +2 -2
- package/components/ion-skeleton-text.js +2 -2
- package/components/ion-split-pane.js +2 -2
- package/components/ion-tab-bar.js +2 -2
- package/components/ion-tab-button.js +2 -2
- package/components/ion-tab.js +2 -2
- package/components/ion-tabs.js +1 -1
- package/components/ion-text.js +2 -2
- package/components/ion-textarea.js +2 -2
- package/components/ion-thumbnail.js +1 -1
- package/components/ion-toast.js +2 -2
- package/components/ion-toggle.js +3 -3
- package/components/label.js +2 -2
- package/components/list-header.js +2 -2
- package/components/modal.js +12 -220
- package/components/picker-column-option.js +2 -2
- package/components/picker-column2.js +2 -2
- package/components/popover.js +13 -85
- package/components/radio-group.js +1 -1
- package/components/radio.js +3 -3
- package/components/ripple-effect.js +1 -1
- package/components/select-modal.js +1 -1
- package/components/select-popover.js +1 -1
- package/components/spinner.js +1 -1
- package/components/title.js +2 -2
- package/components/toolbar.js +2 -2
- package/dist/cjs/ion-app_8.cjs.entry.js +5 -5
- package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-col_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-item-option_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-item_8.cjs.entry.js +11 -11
- package/dist/cjs/ion-loading.cjs.entry.js +2 -2
- package/dist/cjs/ion-menu_3.cjs.entry.js +6 -6
- package/dist/cjs/ion-modal.cjs.entry.js +12 -220
- package/dist/cjs/ion-nav_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +2 -2
- package/dist/cjs/ion-popover.cjs.entry.js +13 -85
- package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-range.cjs.entry.js +3 -3
- package/dist/cjs/ion-refresher_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
- package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
- package/dist/cjs/ion-searchbar.cjs.entry.js +4 -4
- package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
- package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
- package/dist/cjs/ion-segment_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
- package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-text.cjs.entry.js +2 -2
- package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ion-toast.cjs.entry.js +2 -2
- package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
- package/dist/collection/components/item-divider/item-divider.js +2 -2
- package/dist/collection/components/item-group/item-group.js +1 -1
- package/dist/collection/components/item-option/item-option.js +2 -2
- package/dist/collection/components/item-options/item-options.js +1 -1
- package/dist/collection/components/item-sliding/item-sliding.js +1 -1
- package/dist/collection/components/label/label.js +2 -2
- package/dist/collection/components/list-header/list-header.js +2 -2
- package/dist/collection/components/loading/loading.js +2 -2
- package/dist/collection/components/menu/menu.js +2 -2
- package/dist/collection/components/menu-button/menu-button.js +2 -2
- package/dist/collection/components/menu-toggle/menu-toggle.js +2 -2
- package/dist/collection/components/modal/gestures/sheet.js +1 -3
- package/dist/collection/components/modal/gestures/swipe-to-close.js +1 -3
- package/dist/collection/components/modal/modal.ios.css +4 -0
- package/dist/collection/components/modal/modal.js +7 -215
- package/dist/collection/components/modal/modal.md.css +4 -0
- package/dist/collection/components/nav/nav.js +1 -1
- package/dist/collection/components/nav-link/nav-link.js +1 -1
- package/dist/collection/components/note/note.js +2 -2
- package/dist/collection/components/picker-column-option/picker-column-option.js +2 -2
- package/dist/collection/components/picker-legacy/picker.js +2 -2
- package/dist/collection/components/picker-legacy-column/picker-column.js +2 -2
- package/dist/collection/components/popover/animations/ios.enter.js +5 -21
- package/dist/collection/components/popover/animations/md.enter.js +5 -30
- package/dist/collection/components/popover/popover.js +2 -2
- package/dist/collection/components/popover/utils.js +1 -32
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio/radio.js +3 -3
- package/dist/collection/components/radio-group/radio-group.js +1 -1
- package/dist/collection/components/range/range.js +3 -3
- package/dist/collection/components/refresher/refresher.js +1 -1
- package/dist/collection/components/refresher-content/refresher-content.js +1 -1
- package/dist/collection/components/reorder/reorder.js +1 -1
- package/dist/collection/components/reorder-group/reorder-group.js +1 -1
- package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
- package/dist/collection/components/router-link/router-link.js +2 -2
- package/dist/collection/components/router-outlet/router-outlet.js +1 -1
- package/dist/collection/components/row/row.js +1 -1
- package/dist/collection/components/searchbar/searchbar.js +4 -4
- package/dist/collection/components/segment/segment.js +2 -2
- package/dist/collection/components/segment-button/segment-button.js +2 -2
- package/dist/collection/components/segment-content/segment-content.js +1 -1
- package/dist/collection/components/segment-view/segment-view.js +2 -2
- package/dist/collection/components/select/select.js +2 -2
- package/dist/collection/components/select-modal/select-modal.js +1 -1
- package/dist/collection/components/select-option/select-option.js +1 -1
- package/dist/collection/components/select-popover/select-popover.js +1 -1
- package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/split-pane/split-pane.js +2 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-bar/tab-bar.js +2 -2
- package/dist/collection/components/tab-button/tab-button.js +2 -2
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/text/text.js +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/thumbnail/thumbnail.js +1 -1
- package/dist/collection/components/title/title.js +2 -2
- package/dist/collection/components/toast/toast.js +2 -2
- package/dist/collection/components/toggle/toggle.js +3 -3
- package/dist/collection/components/toolbar/toolbar.js +2 -2
- package/dist/docs.json +1 -1
- package/dist/esm/ion-app_8.entry.js +5 -5
- package/dist/esm/ion-avatar_3.entry.js +1 -1
- package/dist/esm/ion-col_3.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +4 -4
- package/dist/esm/ion-item-option_3.entry.js +4 -4
- package/dist/esm/ion-item_8.entry.js +11 -11
- package/dist/esm/ion-loading.entry.js +2 -2
- package/dist/esm/ion-menu_3.entry.js +6 -6
- package/dist/esm/ion-modal.entry.js +12 -220
- package/dist/esm/ion-nav_2.entry.js +2 -2
- package/dist/esm/ion-picker-column-option.entry.js +2 -2
- package/dist/esm/ion-popover.entry.js +13 -85
- package/dist/esm/ion-progress-bar.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +4 -4
- package/dist/esm/ion-range.entry.js +3 -3
- package/dist/esm/ion-refresher_2.entry.js +2 -2
- package/dist/esm/ion-reorder_2.entry.js +2 -2
- package/dist/esm/ion-ripple-effect.entry.js +1 -1
- package/dist/esm/ion-route_4.entry.js +2 -2
- package/dist/esm/ion-searchbar.entry.js +4 -4
- package/dist/esm/ion-segment-content.entry.js +1 -1
- package/dist/esm/ion-segment-view.entry.js +2 -2
- package/dist/esm/ion-segment_2.entry.js +4 -4
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +4 -4
- package/dist/esm/ion-spinner.entry.js +1 -1
- package/dist/esm/ion-split-pane.entry.js +2 -2
- package/dist/esm/ion-tab-bar_2.entry.js +4 -4
- package/dist/esm/ion-tab_2.entry.js +3 -3
- package/dist/esm/ion-text.entry.js +2 -2
- package/dist/esm/ion-textarea.entry.js +2 -2
- package/dist/esm/ion-toast.entry.js +2 -2
- package/dist/esm/ion-toggle.entry.js +3 -3
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-074839fc.entry.js → p-01e27965.entry.js} +1 -1
- package/dist/ionic/p-0ca0fe9c.entry.js +4 -0
- package/dist/ionic/{p-316c0420.entry.js → p-221a3d8c.entry.js} +1 -1
- package/dist/ionic/{p-3a6caca9.entry.js → p-2668188b.entry.js} +1 -1
- package/dist/ionic/{p-d3014190.entry.js → p-2bd1ea35.entry.js} +1 -1
- package/dist/ionic/{p-a127bee2.entry.js → p-30333874.entry.js} +1 -1
- package/dist/ionic/{p-0e8c8a10.entry.js → p-31db96da.entry.js} +1 -1
- package/dist/ionic/{p-1647c46c.entry.js → p-363d1209.entry.js} +1 -1
- package/dist/ionic/p-3ec563c1.entry.js +4 -0
- package/dist/ionic/{p-c19af093.entry.js → p-42db6404.entry.js} +1 -1
- package/dist/ionic/{p-db82892c.entry.js → p-46a38cfd.entry.js} +1 -1
- package/dist/ionic/{p-eb024a5b.entry.js → p-4eec1a5e.entry.js} +1 -1
- package/dist/ionic/{p-0dfa5a37.entry.js → p-530fcd71.entry.js} +1 -1
- package/dist/ionic/{p-72c38b88.entry.js → p-5c8f7253.entry.js} +1 -1
- package/dist/ionic/{p-172a579f.entry.js → p-5d6fb6e3.entry.js} +1 -1
- package/dist/ionic/{p-dbbe606a.entry.js → p-652318c3.entry.js} +1 -1
- package/dist/ionic/{p-2a939845.entry.js → p-6f37536a.entry.js} +1 -1
- package/dist/ionic/{p-4e41ea20.entry.js → p-72af946b.entry.js} +1 -1
- package/dist/ionic/p-7f98e710.entry.js +4 -0
- package/dist/ionic/{p-6d070558.entry.js → p-82d5bb3d.entry.js} +1 -1
- package/dist/ionic/p-906bb44d.entry.js +4 -0
- package/dist/ionic/{p-2dbb90cb.entry.js → p-97eb0812.entry.js} +1 -1
- package/dist/ionic/{p-31f7095f.entry.js → p-a4a9f5ae.entry.js} +1 -1
- package/dist/ionic/{p-86f53961.entry.js → p-b8551510.entry.js} +1 -1
- package/dist/ionic/p-bc293244.entry.js +4 -0
- package/dist/ionic/{p-d126e8d3.entry.js → p-bce86e56.entry.js} +1 -1
- package/dist/ionic/{p-02d76786.entry.js → p-be263062.entry.js} +1 -1
- package/dist/ionic/{p-639dd543.entry.js → p-c175d792.entry.js} +1 -1
- package/dist/ionic/{p-020af078.entry.js → p-cc2a9936.entry.js} +1 -1
- package/dist/ionic/{p-1ccd6829.entry.js → p-e338f669.entry.js} +1 -1
- package/dist/ionic/{p-6241ce47.entry.js → p-eaf3f5ff.entry.js} +1 -1
- package/dist/ionic/{p-f8f22cc0.entry.js → p-fb0271ae.entry.js} +1 -1
- package/dist/ionic/{p-370e4237.entry.js → p-fbb00634.entry.js} +1 -1
- package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
- package/dist/types/components/modal/gestures/swipe-to-close.d.ts +1 -1
- package/dist/types/components/modal/modal.d.ts +0 -47
- package/dist/types/components/popover/utils.d.ts +0 -2
- package/hydrate/index.js +112 -392
- package/hydrate/index.mjs +112 -392
- package/package.json +2 -4
- package/dist/ionic/p-51a60e0f.entry.js +0 -4
- package/dist/ionic/p-94de5cfa.entry.js +0 -4
- package/dist/ionic/p-dd1aef77.entry.js +0 -4
- package/dist/ionic/p-ec9ca3fe.entry.js +0 -4
- package/dist/ionic/p-ef4256eb.entry.js +0 -4
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, f as printIonWarning, w as writeTask, e as config, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
|
|
5
|
-
import { w as win } from './index-ZjP4CjeZ.js';
|
|
6
5
|
import { f as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, a as findIonContent, p as printIonContentErrorMsg } from './index-Bs3kT4bc.js';
|
|
7
6
|
import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BYawdMXj.js';
|
|
8
7
|
import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-DEn3pfjm.js';
|
|
@@ -16,6 +15,7 @@ import { KEYBOARD_DID_OPEN } from './keyboard-ywgs5efA.js';
|
|
|
16
15
|
import { c as createAnimation } from './animation-Dt8bGnA-.js';
|
|
17
16
|
import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
|
|
18
17
|
import { createGesture } from './index-CfgBF1SE.js';
|
|
18
|
+
import { w as win } from './index-ZjP4CjeZ.js';
|
|
19
19
|
import './hardware-back-button-CPLxO-Ev.js';
|
|
20
20
|
import './gesture-controller-BTEOs1at.js';
|
|
21
21
|
import './keyboard-CUw4ekVy.js';
|
|
@@ -247,7 +247,7 @@ const calculateSpringStep = (t) => {
|
|
|
247
247
|
const SwipeToCloseDefaults = {
|
|
248
248
|
MIN_PRESENTING_SCALE: 0.915,
|
|
249
249
|
};
|
|
250
|
-
const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss
|
|
250
|
+
const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => {
|
|
251
251
|
/**
|
|
252
252
|
* The step value at which a card modal
|
|
253
253
|
* is eligible for dismissing via gesture.
|
|
@@ -404,8 +404,6 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onG
|
|
|
404
404
|
const processedStep = isAttemptingDismissWithCanDismiss ? calculateSpringStep(step / maxStep) : step;
|
|
405
405
|
const clampedStep = clamp(0.0001, processedStep, maxStep);
|
|
406
406
|
animation.progressStep(clampedStep);
|
|
407
|
-
// Notify modal of position change for safe-area updates
|
|
408
|
-
onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
|
|
409
407
|
/**
|
|
410
408
|
* When swiping down half way, the status bar style
|
|
411
409
|
* should be reset to its default value.
|
|
@@ -949,7 +947,7 @@ const mdLeaveAnimation = (baseEl, opts) => {
|
|
|
949
947
|
return baseAnimation;
|
|
950
948
|
};
|
|
951
949
|
|
|
952
|
-
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange
|
|
950
|
+
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
|
|
953
951
|
// Defaults for the sheet swipe animation
|
|
954
952
|
const defaultBackdrop = [
|
|
955
953
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
@@ -1280,8 +1278,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1280
1278
|
: step;
|
|
1281
1279
|
offset = clamp(0.0001, processedStep, maxStep);
|
|
1282
1280
|
animation.progressStep(offset);
|
|
1283
|
-
// Notify modal of position change for safe-area updates
|
|
1284
|
-
onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
|
|
1285
1281
|
};
|
|
1286
1282
|
const onEnd = (detail) => {
|
|
1287
1283
|
/**
|
|
@@ -1476,9 +1472,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1476
1472
|
};
|
|
1477
1473
|
};
|
|
1478
1474
|
|
|
1479
|
-
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1475
|
+
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
1480
1476
|
|
|
1481
|
-
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1477
|
+
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
1482
1478
|
|
|
1483
1479
|
const Modal = class {
|
|
1484
1480
|
constructor(hostRef) {
|
|
@@ -1501,10 +1497,6 @@ const Modal = class {
|
|
|
1501
1497
|
this.inline = false;
|
|
1502
1498
|
// Whether or not modal is being dismissed via gesture
|
|
1503
1499
|
this.gestureAnimationDismissing = false;
|
|
1504
|
-
// Whether to skip coordinate-based safe-area detection (for fullscreen phone modals)
|
|
1505
|
-
this.skipSafeAreaCoordinateDetection = false;
|
|
1506
|
-
// Track previous safe-area state to avoid redundant DOM writes
|
|
1507
|
-
this.prevSafeAreaState = { top: false, bottom: false, left: false, right: false };
|
|
1508
1500
|
this.presented = false;
|
|
1509
1501
|
/** @internal */
|
|
1510
1502
|
this.hasController = false;
|
|
@@ -1695,10 +1687,7 @@ const Modal = class {
|
|
|
1695
1687
|
}
|
|
1696
1688
|
}
|
|
1697
1689
|
onWindowResize() {
|
|
1698
|
-
//
|
|
1699
|
-
this.cachedSafeAreas = undefined;
|
|
1700
|
-
this.updateSafeAreaOverrides();
|
|
1701
|
-
// Only handle view transition for iOS card modals when no custom animations are provided
|
|
1690
|
+
// Only handle resize for iOS card modals when no custom animations are provided
|
|
1702
1691
|
if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
|
|
1703
1692
|
return;
|
|
1704
1693
|
}
|
|
@@ -1721,8 +1710,6 @@ const Modal = class {
|
|
|
1721
1710
|
this.triggerController.removeClickListener();
|
|
1722
1711
|
this.cleanupViewTransitionListener();
|
|
1723
1712
|
this.cleanupParentRemovalObserver();
|
|
1724
|
-
// Reset safe-area state to handle removal without dismiss (e.g., framework unmount)
|
|
1725
|
-
this.resetSafeAreaState();
|
|
1726
1713
|
}
|
|
1727
1714
|
componentWillLoad() {
|
|
1728
1715
|
var _a;
|
|
@@ -1882,8 +1869,6 @@ const Modal = class {
|
|
|
1882
1869
|
else if (!this.keepContentsMounted) {
|
|
1883
1870
|
await waitForMount();
|
|
1884
1871
|
}
|
|
1885
|
-
// Predict safe-area needs based on modal configuration to avoid visual snap
|
|
1886
|
-
this.setInitialSafeAreaOverrides(presentingElement);
|
|
1887
1872
|
writeTask(() => this.el.classList.add('show-modal'));
|
|
1888
1873
|
const hasCardModal = presentingElement !== undefined;
|
|
1889
1874
|
/**
|
|
@@ -1945,8 +1930,6 @@ const Modal = class {
|
|
|
1945
1930
|
else if (hasCardModal) {
|
|
1946
1931
|
this.initSwipeToClose();
|
|
1947
1932
|
}
|
|
1948
|
-
// Now that animation is complete, update safe-area based on actual position
|
|
1949
|
-
this.updateSafeAreaOverrides();
|
|
1950
1933
|
// Initialize view transition listener for iOS card modals
|
|
1951
1934
|
this.initViewTransitionListener();
|
|
1952
1935
|
// Initialize parent removal observer
|
|
@@ -1998,7 +1981,7 @@ const Modal = class {
|
|
|
1998
1981
|
await this.dismiss(undefined, GESTURE);
|
|
1999
1982
|
this.gestureAnimationDismissing = false;
|
|
2000
1983
|
});
|
|
2001
|
-
}
|
|
1984
|
+
});
|
|
2002
1985
|
this.gesture.enable(true);
|
|
2003
1986
|
}
|
|
2004
1987
|
initSheetGesture() {
|
|
@@ -2019,8 +2002,7 @@ const Modal = class {
|
|
|
2019
2002
|
this.currentBreakpoint = breakpoint;
|
|
2020
2003
|
this.ionBreakpointDidChange.emit({ breakpoint });
|
|
2021
2004
|
}
|
|
2022
|
-
|
|
2023
|
-
}, () => this.updateSafeAreaOverrides());
|
|
2005
|
+
});
|
|
2024
2006
|
this.gesture = gesture;
|
|
2025
2007
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
2026
2008
|
this.gesture.enable(true);
|
|
@@ -2098,194 +2080,6 @@ const Modal = class {
|
|
|
2098
2080
|
// Clear the cached reference
|
|
2099
2081
|
this.cachedPageParent = undefined;
|
|
2100
2082
|
}
|
|
2101
|
-
/**
|
|
2102
|
-
* Sets initial safe-area overrides based on modal configuration before
|
|
2103
|
-
* the modal becomes visible. This predicts whether the modal will touch
|
|
2104
|
-
* screen edges to avoid a visual snap after animation completes.
|
|
2105
|
-
*/
|
|
2106
|
-
setInitialSafeAreaOverrides(presentingElement) {
|
|
2107
|
-
const style = this.el.style;
|
|
2108
|
-
const mode = getIonMode(this);
|
|
2109
|
-
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
2110
|
-
// Card modals only exist in iOS mode - in MD mode, presentingElement is ignored
|
|
2111
|
-
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
2112
|
-
const isTablet = window.innerWidth >= 768;
|
|
2113
|
-
// Sheet modals always touch bottom edge, never top/left/right
|
|
2114
|
-
if (isSheetModal) {
|
|
2115
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
2116
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
2117
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
2118
|
-
return;
|
|
2119
|
-
}
|
|
2120
|
-
// Card modals have rounded top corners
|
|
2121
|
-
if (isCardModal) {
|
|
2122
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
2123
|
-
if (isTablet) {
|
|
2124
|
-
// On tablets, card modals are inset from all edges
|
|
2125
|
-
this.zeroAllSafeAreas();
|
|
2126
|
-
}
|
|
2127
|
-
else {
|
|
2128
|
-
// On phones, card modals still extend to the bottom edge
|
|
2129
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
2130
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
2131
|
-
this.applyFullscreenSafeArea();
|
|
2132
|
-
}
|
|
2133
|
-
return;
|
|
2134
|
-
}
|
|
2135
|
-
// Check if modal is fullscreen via CSS custom properties
|
|
2136
|
-
// This applies to both phone and tablet sizes - custom modals may have
|
|
2137
|
-
// non-fullscreen dimensions even on phones (e.g., --height: 70%)
|
|
2138
|
-
const computedStyle = getComputedStyle(this.el);
|
|
2139
|
-
const width = computedStyle.getPropertyValue('--width').trim();
|
|
2140
|
-
const height = computedStyle.getPropertyValue('--height').trim();
|
|
2141
|
-
const isFullscreen = width === '100%' && height === '100%';
|
|
2142
|
-
if (isFullscreen) {
|
|
2143
|
-
this.applyFullscreenSafeArea();
|
|
2144
|
-
}
|
|
2145
|
-
else if (isTablet) {
|
|
2146
|
-
// Centered dialog on tablet doesn't touch edges
|
|
2147
|
-
this.zeroAllSafeAreas();
|
|
2148
|
-
}
|
|
2149
|
-
else ;
|
|
2150
|
-
}
|
|
2151
|
-
/**
|
|
2152
|
-
* Applies safe-area handling for fullscreen modals.
|
|
2153
|
-
* Adds wrapper padding when no footer is present to prevent
|
|
2154
|
-
* content from overlapping system navigation areas.
|
|
2155
|
-
*/
|
|
2156
|
-
applyFullscreenSafeArea() {
|
|
2157
|
-
this.skipSafeAreaCoordinateDetection = true;
|
|
2158
|
-
this.updateFooterPadding();
|
|
2159
|
-
// Watch for dynamic footer additions/removals (e.g., async data loading)
|
|
2160
|
-
// Use subtree:true to support wrapped footers in framework components
|
|
2161
|
-
// (e.g., <my-footer><ion-footer>...</ion-footer></my-footer>)
|
|
2162
|
-
if (!this.footerObserver && win !== undefined && 'MutationObserver' in win) {
|
|
2163
|
-
this.footerObserver = new MutationObserver(() => this.updateFooterPadding());
|
|
2164
|
-
this.footerObserver.observe(this.el, { childList: true, subtree: true });
|
|
2165
|
-
}
|
|
2166
|
-
}
|
|
2167
|
-
/**
|
|
2168
|
-
* Updates wrapper and shadow padding based on footer presence.
|
|
2169
|
-
* Called initially and when footer is dynamically added/removed.
|
|
2170
|
-
* Both elements must be styled identically to prevent visual mismatches.
|
|
2171
|
-
*/
|
|
2172
|
-
updateFooterPadding() {
|
|
2173
|
-
if (!this.wrapperEl)
|
|
2174
|
-
return;
|
|
2175
|
-
const hasFooter = this.el.querySelector('ion-footer') !== null;
|
|
2176
|
-
// Apply to both wrapper and shadow to keep them in sync
|
|
2177
|
-
const elements = [this.wrapperEl, this.shadowEl].filter(Boolean);
|
|
2178
|
-
if (hasFooter) {
|
|
2179
|
-
elements.forEach((el) => {
|
|
2180
|
-
el.style.removeProperty('padding-bottom');
|
|
2181
|
-
el.style.removeProperty('box-sizing');
|
|
2182
|
-
});
|
|
2183
|
-
}
|
|
2184
|
-
else {
|
|
2185
|
-
elements.forEach((el) => {
|
|
2186
|
-
el.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
|
|
2187
|
-
el.style.setProperty('box-sizing', 'border-box');
|
|
2188
|
-
});
|
|
2189
|
-
}
|
|
2190
|
-
}
|
|
2191
|
-
/**
|
|
2192
|
-
* Sets all safe-area CSS variables to 0px for modals that
|
|
2193
|
-
* don't touch screen edges.
|
|
2194
|
-
*/
|
|
2195
|
-
zeroAllSafeAreas() {
|
|
2196
|
-
const style = this.el.style;
|
|
2197
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
2198
|
-
style.setProperty('--ion-safe-area-bottom', '0px');
|
|
2199
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
2200
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
2201
|
-
}
|
|
2202
|
-
/**
|
|
2203
|
-
* Resets all safe-area related state and styles.
|
|
2204
|
-
* Called during dismiss and disconnectedCallback to ensure clean state
|
|
2205
|
-
* for re-presentation of inline modals.
|
|
2206
|
-
*/
|
|
2207
|
-
resetSafeAreaState() {
|
|
2208
|
-
var _a;
|
|
2209
|
-
this.skipSafeAreaCoordinateDetection = false;
|
|
2210
|
-
this.cachedSafeAreas = undefined;
|
|
2211
|
-
this.prevSafeAreaState = { top: false, bottom: false, left: false, right: false };
|
|
2212
|
-
(_a = this.footerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
2213
|
-
this.footerObserver = undefined;
|
|
2214
|
-
// Clear wrapper and shadow styles that may have been set for safe-area handling
|
|
2215
|
-
[this.wrapperEl, this.shadowEl].forEach((el) => {
|
|
2216
|
-
if (el) {
|
|
2217
|
-
el.style.removeProperty('padding-bottom');
|
|
2218
|
-
el.style.removeProperty('box-sizing');
|
|
2219
|
-
}
|
|
2220
|
-
});
|
|
2221
|
-
// Clear safe-area CSS variable overrides
|
|
2222
|
-
const style = this.el.style;
|
|
2223
|
-
style.removeProperty('--ion-safe-area-top');
|
|
2224
|
-
style.removeProperty('--ion-safe-area-bottom');
|
|
2225
|
-
style.removeProperty('--ion-safe-area-left');
|
|
2226
|
-
style.removeProperty('--ion-safe-area-right');
|
|
2227
|
-
}
|
|
2228
|
-
/**
|
|
2229
|
-
* Gets the root safe-area values from the document element.
|
|
2230
|
-
* Uses cached values during gestures to avoid getComputedStyle calls.
|
|
2231
|
-
*/
|
|
2232
|
-
getSafeAreaValues() {
|
|
2233
|
-
if (!this.cachedSafeAreas) {
|
|
2234
|
-
const rootStyle = getComputedStyle(document.documentElement);
|
|
2235
|
-
this.cachedSafeAreas = {
|
|
2236
|
-
top: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-top')) || 0,
|
|
2237
|
-
bottom: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-bottom')) || 0,
|
|
2238
|
-
left: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-left')) || 0,
|
|
2239
|
-
right: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-right')) || 0,
|
|
2240
|
-
};
|
|
2241
|
-
}
|
|
2242
|
-
return this.cachedSafeAreas;
|
|
2243
|
-
}
|
|
2244
|
-
/**
|
|
2245
|
-
* Updates safe-area CSS variable overrides based on whether the modal
|
|
2246
|
-
* extends into each safe-area region. Called after animation
|
|
2247
|
-
* and during gestures to handle dynamic position changes.
|
|
2248
|
-
*
|
|
2249
|
-
* Optimized to avoid redundant DOM writes by tracking previous state.
|
|
2250
|
-
*/
|
|
2251
|
-
updateSafeAreaOverrides() {
|
|
2252
|
-
if (this.skipSafeAreaCoordinateDetection) {
|
|
2253
|
-
return;
|
|
2254
|
-
}
|
|
2255
|
-
const wrapper = this.wrapperEl;
|
|
2256
|
-
if (!wrapper) {
|
|
2257
|
-
return;
|
|
2258
|
-
}
|
|
2259
|
-
const rect = wrapper.getBoundingClientRect();
|
|
2260
|
-
const safeAreas = this.getSafeAreaValues();
|
|
2261
|
-
const extendsIntoTop = rect.top < safeAreas.top;
|
|
2262
|
-
const extendsIntoBottom = rect.bottom > window.innerHeight - safeAreas.bottom;
|
|
2263
|
-
const extendsIntoLeft = rect.left < safeAreas.left;
|
|
2264
|
-
const extendsIntoRight = rect.right > window.innerWidth - safeAreas.right;
|
|
2265
|
-
// Only update DOM when state actually changes
|
|
2266
|
-
const prev = this.prevSafeAreaState;
|
|
2267
|
-
const style = this.el.style;
|
|
2268
|
-
if (extendsIntoTop !== prev.top) {
|
|
2269
|
-
extendsIntoTop ? style.removeProperty('--ion-safe-area-top') : style.setProperty('--ion-safe-area-top', '0px');
|
|
2270
|
-
prev.top = extendsIntoTop;
|
|
2271
|
-
}
|
|
2272
|
-
if (extendsIntoBottom !== prev.bottom) {
|
|
2273
|
-
extendsIntoBottom
|
|
2274
|
-
? style.removeProperty('--ion-safe-area-bottom')
|
|
2275
|
-
: style.setProperty('--ion-safe-area-bottom', '0px');
|
|
2276
|
-
prev.bottom = extendsIntoBottom;
|
|
2277
|
-
}
|
|
2278
|
-
if (extendsIntoLeft !== prev.left) {
|
|
2279
|
-
extendsIntoLeft ? style.removeProperty('--ion-safe-area-left') : style.setProperty('--ion-safe-area-left', '0px');
|
|
2280
|
-
prev.left = extendsIntoLeft;
|
|
2281
|
-
}
|
|
2282
|
-
if (extendsIntoRight !== prev.right) {
|
|
2283
|
-
extendsIntoRight
|
|
2284
|
-
? style.removeProperty('--ion-safe-area-right')
|
|
2285
|
-
: style.setProperty('--ion-safe-area-right', '0px');
|
|
2286
|
-
prev.right = extendsIntoRight;
|
|
2287
|
-
}
|
|
2288
|
-
}
|
|
2289
2083
|
sheetOnDismiss() {
|
|
2290
2084
|
/**
|
|
2291
2085
|
* While the gesture animation is finishing
|
|
@@ -2378,8 +2172,6 @@ const Modal = class {
|
|
|
2378
2172
|
}
|
|
2379
2173
|
this.currentBreakpoint = undefined;
|
|
2380
2174
|
this.animation = undefined;
|
|
2381
|
-
// Reset safe-area state for potential re-presentation
|
|
2382
|
-
this.resetSafeAreaState();
|
|
2383
2175
|
unlock();
|
|
2384
2176
|
return dismissed;
|
|
2385
2177
|
}
|
|
@@ -2629,20 +2421,20 @@ const Modal = class {
|
|
|
2629
2421
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
2630
2422
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
2631
2423
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
2632
|
-
return (h(Host, Object.assign({ key: '
|
|
2424
|
+
return (h(Host, Object.assign({ key: '978ba9cc81464b2d9b4caaf36285d5f7bf7e568d', "no-router": true,
|
|
2633
2425
|
// Allow the modal to be navigable when the handle is focusable
|
|
2634
2426
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
2635
2427
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2636
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '
|
|
2428
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '9f95566d8e0c06bb9607f514484848c250f35f1f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '91ff26d4f3ab4367f3a2940f51c6a5a3d4c972c3', class: "modal-shadow" }), h("div", Object.assign({ key: '064b2dba13854505a4eb1f5e54296ac79cb7a2bd',
|
|
2637
2429
|
/*
|
|
2638
2430
|
role and aria-modal must be used on the
|
|
2639
2431
|
same element. They must also be set inside the
|
|
2640
2432
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2641
2433
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2642
2434
|
*/
|
|
2643
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
2435
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'b579b08b114022032d078a527111456ceefc7b35', class: "modal-handle",
|
|
2644
2436
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2645
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '
|
|
2437
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'dacea58475b72d9c0209934ff31f3be6b9ac8c85', onSlotchange: this.onSlotChange }))));
|
|
2646
2438
|
}
|
|
2647
2439
|
get el() { return getElement(this); }
|
|
2648
2440
|
static get watchers() { return {
|
|
@@ -895,7 +895,7 @@ const Nav = class {
|
|
|
895
895
|
}
|
|
896
896
|
}
|
|
897
897
|
render() {
|
|
898
|
-
return h("slot", { key: '
|
|
898
|
+
return h("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
|
|
899
899
|
}
|
|
900
900
|
get el() { return getElement(this); }
|
|
901
901
|
static get watchers() { return {
|
|
@@ -937,7 +937,7 @@ const NavLink = class {
|
|
|
937
937
|
};
|
|
938
938
|
}
|
|
939
939
|
render() {
|
|
940
|
-
return h(Host, { key: '
|
|
940
|
+
return h(Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
|
|
941
941
|
}
|
|
942
942
|
get el() { return getElement(this); }
|
|
943
943
|
};
|
|
@@ -97,10 +97,10 @@ const PickerColumnOption = class {
|
|
|
97
97
|
render() {
|
|
98
98
|
const { color, disabled, ariaLabel } = this;
|
|
99
99
|
const mode = getIonMode(this);
|
|
100
|
-
return (h(Host, { key: '
|
|
100
|
+
return (h(Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: createColorClasses(color, {
|
|
101
101
|
[mode]: true,
|
|
102
102
|
['option-disabled']: disabled,
|
|
103
|
-
}) }, h("div", { key: '
|
|
103
|
+
}) }, h("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
|
|
104
104
|
}
|
|
105
105
|
get el() { return getElement(this); }
|
|
106
106
|
static get watchers() { return {
|
|
@@ -658,8 +658,6 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
|
|
|
658
658
|
let bottom;
|
|
659
659
|
let originX = contentOriginX;
|
|
660
660
|
let originY = contentOriginY;
|
|
661
|
-
let checkSafeAreaTop = false;
|
|
662
|
-
let checkSafeAreaBottom = false;
|
|
663
661
|
let checkSafeAreaLeft = false;
|
|
664
662
|
let checkSafeAreaRight = false;
|
|
665
663
|
const triggerTop = triggerCoordinates
|
|
@@ -704,18 +702,10 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
|
|
|
704
702
|
* We chose 12 here so that the popover position looks a bit nicer as
|
|
705
703
|
* it is not right up against the edge of the screen.
|
|
706
704
|
*/
|
|
707
|
-
top = Math.max(
|
|
705
|
+
top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
|
|
708
706
|
arrowTop = top + contentHeight;
|
|
709
707
|
originY = 'bottom';
|
|
710
708
|
addPopoverBottomClass = true;
|
|
711
|
-
/**
|
|
712
|
-
* If the popover is positioned near the top edge, account for safe area.
|
|
713
|
-
* This ensures the popover doesn't overlap with status bars or notches.
|
|
714
|
-
*/
|
|
715
|
-
if (top <= bodyPadding + safeAreaMargin) {
|
|
716
|
-
checkSafeAreaTop = true;
|
|
717
|
-
top = bodyPadding;
|
|
718
|
-
}
|
|
719
709
|
/**
|
|
720
710
|
* If not enough room for popover to appear
|
|
721
711
|
* above trigger, then cut it off.
|
|
@@ -723,35 +713,14 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
|
|
|
723
713
|
}
|
|
724
714
|
else {
|
|
725
715
|
bottom = bodyPadding;
|
|
726
|
-
/**
|
|
727
|
-
* When the popover is pinned to the bottom, account for safe area.
|
|
728
|
-
* This ensures the popover doesn't overlap with home indicators
|
|
729
|
-
* or navigation bars (e.g., Android API 36+ edge-to-edge).
|
|
730
|
-
*/
|
|
731
|
-
checkSafeAreaBottom = true;
|
|
732
716
|
}
|
|
733
717
|
}
|
|
734
|
-
/**
|
|
735
|
-
* Final check: If the popover extends into any safe-area region,
|
|
736
|
-
* ensure the corresponding flag is set regardless of side.
|
|
737
|
-
* This handles cases where a side-positioned popover (left/right)
|
|
738
|
-
* still needs bottom safe-area padding because it extends into that region.
|
|
739
|
-
*/
|
|
740
|
-
const popoverBottom = bottom !== undefined ? bodyHeight - bottom : top + contentHeight;
|
|
741
|
-
if (popoverBottom + safeAreaMargin > bodyHeight) {
|
|
742
|
-
checkSafeAreaBottom = true;
|
|
743
|
-
}
|
|
744
|
-
if (top < safeAreaMargin) {
|
|
745
|
-
checkSafeAreaTop = true;
|
|
746
|
-
}
|
|
747
718
|
return {
|
|
748
719
|
top,
|
|
749
720
|
left,
|
|
750
721
|
bottom,
|
|
751
722
|
originX,
|
|
752
723
|
originY,
|
|
753
|
-
checkSafeAreaTop,
|
|
754
|
-
checkSafeAreaBottom,
|
|
755
724
|
checkSafeAreaLeft,
|
|
756
725
|
checkSafeAreaRight,
|
|
757
726
|
arrowTop,
|
|
@@ -812,7 +781,7 @@ const iosEnterAnimation = (baseEl, opts) => {
|
|
|
812
781
|
const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
|
|
813
782
|
const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
|
|
814
783
|
const margin = size === 'cover' ? 0 : 25;
|
|
815
|
-
const { originX, originY, top, left, bottom,
|
|
784
|
+
const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
|
|
816
785
|
const baseAnimation = createAnimation();
|
|
817
786
|
const backdropAnimation = createAnimation();
|
|
818
787
|
const contentAnimation = createAnimation();
|
|
@@ -842,35 +811,19 @@ const iosEnterAnimation = (baseEl, opts) => {
|
|
|
842
811
|
if (addPopoverBottomClass) {
|
|
843
812
|
baseEl.classList.add('popover-bottom');
|
|
844
813
|
}
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
* safe-area inset to ensure the popover doesn't overlap with system UI
|
|
849
|
-
* (status bars, home indicators, navigation bars on Android API 36+, etc.)
|
|
850
|
-
*/
|
|
851
|
-
const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
|
|
852
|
-
const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
|
|
814
|
+
if (bottom !== undefined) {
|
|
815
|
+
contentEl.style.setProperty('bottom', `${bottom}px`);
|
|
816
|
+
}
|
|
853
817
|
const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
|
|
854
818
|
const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
|
|
855
|
-
let topValue = `${top}px`;
|
|
856
|
-
let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
|
|
857
819
|
let leftValue = `${left}px`;
|
|
858
|
-
if (checkSafeAreaTop) {
|
|
859
|
-
topValue = `${top}px${safeAreaTop}`;
|
|
860
|
-
}
|
|
861
|
-
if (checkSafeAreaBottom && bottomValue !== undefined) {
|
|
862
|
-
bottomValue = `${bottom}px${safeAreaBottom}`;
|
|
863
|
-
}
|
|
864
820
|
if (checkSafeAreaLeft) {
|
|
865
821
|
leftValue = `${left}px${safeAreaLeft}`;
|
|
866
822
|
}
|
|
867
823
|
if (checkSafeAreaRight) {
|
|
868
824
|
leftValue = `${left}px${safeAreaRight}`;
|
|
869
825
|
}
|
|
870
|
-
|
|
871
|
-
contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
|
|
872
|
-
}
|
|
873
|
-
contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
|
|
826
|
+
contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
|
|
874
827
|
contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
|
|
875
828
|
contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
|
|
876
829
|
if (arrowEl !== null) {
|
|
@@ -946,32 +899,7 @@ const mdEnterAnimation = (baseEl, opts) => {
|
|
|
946
899
|
};
|
|
947
900
|
const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
|
|
948
901
|
const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
|
|
949
|
-
const { originX, originY, top, left, bottom
|
|
950
|
-
/**
|
|
951
|
-
* Safe area CSS variable adjustments.
|
|
952
|
-
* When the popover is positioned near an edge, we add the corresponding
|
|
953
|
-
* safe-area inset to ensure the popover doesn't overlap with system UI
|
|
954
|
-
* (status bars, home indicators, navigation bars on Android API 36+, etc.)
|
|
955
|
-
*/
|
|
956
|
-
const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
|
|
957
|
-
const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
|
|
958
|
-
const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
|
|
959
|
-
const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
|
|
960
|
-
let topValue = `${top}px`;
|
|
961
|
-
let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
|
|
962
|
-
let leftValue = `${left}px`;
|
|
963
|
-
if (checkSafeAreaTop) {
|
|
964
|
-
topValue = `${top}px${safeAreaTop}`;
|
|
965
|
-
}
|
|
966
|
-
if (checkSafeAreaBottom && bottomValue !== undefined) {
|
|
967
|
-
bottomValue = `${bottom}px${safeAreaBottom}`;
|
|
968
|
-
}
|
|
969
|
-
if (checkSafeAreaLeft) {
|
|
970
|
-
leftValue = `${left}px${safeAreaLeft}`;
|
|
971
|
-
}
|
|
972
|
-
if (checkSafeAreaRight) {
|
|
973
|
-
leftValue = `${left}px${safeAreaRight}`;
|
|
974
|
-
}
|
|
902
|
+
const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
|
|
975
903
|
const baseAnimation = createAnimation();
|
|
976
904
|
const backdropAnimation = createAnimation();
|
|
977
905
|
const wrapperAnimation = createAnimation();
|
|
@@ -988,13 +916,13 @@ const mdEnterAnimation = (baseEl, opts) => {
|
|
|
988
916
|
contentAnimation
|
|
989
917
|
.addElement(contentEl)
|
|
990
918
|
.beforeStyles({
|
|
991
|
-
top: `calc(${
|
|
992
|
-
left: `calc(${
|
|
919
|
+
top: `calc(${top}px + var(--offset-y, 0px))`,
|
|
920
|
+
left: `calc(${left}px + var(--offset-x, 0px))`,
|
|
993
921
|
'transform-origin': `${originY} ${originX}`,
|
|
994
922
|
})
|
|
995
923
|
.beforeAddWrite(() => {
|
|
996
|
-
if (
|
|
997
|
-
contentEl.style.setProperty('bottom',
|
|
924
|
+
if (bottom !== undefined) {
|
|
925
|
+
contentEl.style.setProperty('bottom', `${bottom}px`);
|
|
998
926
|
}
|
|
999
927
|
})
|
|
1000
928
|
.fromTo('transform', 'scale(0.8)', 'scale(1)');
|
|
@@ -1492,9 +1420,9 @@ const Popover = class {
|
|
|
1492
1420
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1493
1421
|
const desktop = isPlatform('desktop');
|
|
1494
1422
|
const enableArrow = arrow && !parentPopover;
|
|
1495
|
-
return (h(Host, Object.assign({ key: '
|
|
1423
|
+
return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1496
1424
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1497
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '
|
|
1425
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
|
|
1498
1426
|
}
|
|
1499
1427
|
get el() { return getElement(this); }
|
|
1500
1428
|
static get watchers() { return {
|
|
@@ -40,7 +40,7 @@ const ProgressBar = class {
|
|
|
40
40
|
const mode = getIonMode(this);
|
|
41
41
|
// If the progress is displayed as a solid bar.
|
|
42
42
|
const progressSolid = buffer === 1;
|
|
43
|
-
return (h(Host, { key: '
|
|
43
|
+
return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
|
|
44
44
|
[mode]: true,
|
|
45
45
|
[`progress-bar-${type}`]: true,
|
|
46
46
|
'progress-paused': paused,
|
|
@@ -136,7 +136,7 @@ const Radio = class {
|
|
|
136
136
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
137
137
|
const mode = getIonMode(this);
|
|
138
138
|
const inItem = hostContext('ion-item', el);
|
|
139
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
140
140
|
[mode]: true,
|
|
141
141
|
'in-item': inItem,
|
|
142
142
|
'radio-checked': checked,
|
|
@@ -147,10 +147,10 @@ const Radio = class {
|
|
|
147
147
|
// Focus and active styling should not apply when the radio is in an item
|
|
148
148
|
'ion-activatable': !inItem,
|
|
149
149
|
'ion-focusable': !inItem,
|
|
150
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
150
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
|
|
151
151
|
'label-text-wrapper': true,
|
|
152
152
|
'label-text-wrapper-hidden': !hasLabel,
|
|
153
|
-
}, part: "label" }, h("slot", { key: '
|
|
153
|
+
}, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
154
154
|
}
|
|
155
155
|
get el() { return getElement(this); }
|
|
156
156
|
static get watchers() { return {
|
|
@@ -403,7 +403,7 @@ const RadioGroup = class {
|
|
|
403
403
|
const { label, labelId, el, name, value } = this;
|
|
404
404
|
const mode = getIonMode(this);
|
|
405
405
|
renderHiddenInput(true, el, name, value, false);
|
|
406
|
-
return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("
|
|
406
|
+
return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: 'd683b01c1ba34fe843c4b320bce4661a117472a5' })));
|
|
407
407
|
}
|
|
408
408
|
get el() { return getElement(this); }
|
|
409
409
|
static get watchers() { return {
|