voyager-ionic-core 8.4.0 → 8.4.1
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/header.js +21 -2
- package/components/ion-item-sliding.js +3 -1
- package/components/ion-menu.js +30 -3
- package/components/ion-toast.js +2 -2
- package/components/overlays.js +27 -12
- package/components/radio-group.js +8 -2
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-app_8.cjs.entry.js +21 -2
- package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-item-option_3.cjs.entry.js +3 -1
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +31 -4
- package/dist/cjs/ion-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +6 -1
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +3 -3
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-ba0f6986.js → overlays-aa669eb8.js} +26 -11
- package/dist/collection/components/header/header.utils.js +21 -2
- package/dist/collection/components/item-sliding/item-sliding.js +3 -1
- package/dist/collection/components/menu/menu.js +30 -2
- package/dist/collection/components/radio-group/radio-group.js +30 -1
- package/dist/collection/components/toast/toast.ios.css +1 -1
- package/dist/collection/components/toast/toast.md.css +1 -1
- package/dist/collection/utils/focus-trap.js +8 -2
- package/dist/collection/utils/overlays.js +19 -9
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +1 -1
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-app_8.entry.js +21 -2
- package/dist/esm/ion-datetime_3.entry.js +1 -1
- package/dist/esm/ion-item-option_3.entry.js +3 -1
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +31 -4
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +6 -1
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +3 -3
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-ae10d43d.js → overlays-e7b9d6d9.js} +27 -12
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
- package/dist/esm-es5/ion-alert.entry.js +1 -1
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
- package/dist/esm-es5/ion-loading.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-popover.entry.js +1 -1
- package/dist/esm-es5/ion-radio_2.entry.js +1 -1
- package/dist/esm-es5/ion-select-modal.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-toast.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/overlays-e7b9d6d9.js +4 -0
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-9ee1e8a6.entry.js → p-04909654.entry.js} +1 -1
- package/dist/ionic/p-0aa833fb.system.js +4 -0
- package/dist/ionic/{p-5393e8bb.system.entry.js → p-1046866e.system.entry.js} +1 -1
- package/dist/ionic/p-12a722b8.system.entry.js +4 -0
- package/dist/ionic/{p-4b000207.entry.js → p-12c45a7c.entry.js} +1 -1
- package/dist/ionic/{p-5b5c1505.system.entry.js → p-14e159ea.system.entry.js} +1 -1
- package/dist/ionic/{p-a49378bb.system.entry.js → p-17a9ca63.system.entry.js} +1 -1
- package/dist/ionic/{p-0161caf9.system.entry.js → p-1fe02220.system.entry.js} +1 -1
- package/dist/ionic/{p-f10b70a1.entry.js → p-2b9b78c7.entry.js} +1 -1
- package/dist/ionic/{p-5bd39e5e.system.entry.js → p-2bd0ae94.system.entry.js} +2 -2
- package/dist/ionic/p-322c5fb4.system.js +1 -1
- package/dist/ionic/{p-4561cd09.system.entry.js → p-404aede0.system.entry.js} +1 -1
- package/dist/ionic/p-508d024a.entry.js +4 -0
- package/dist/ionic/{p-6734db42.system.entry.js → p-626fd66d.system.entry.js} +1 -1
- package/dist/ionic/{p-3b419d79.system.entry.js → p-6416c34c.system.entry.js} +1 -1
- package/dist/ionic/{p-857ca696.system.entry.js → p-6499df44.system.entry.js} +1 -1
- package/dist/ionic/{p-db0c8e7d.entry.js → p-6b280620.entry.js} +1 -1
- package/dist/ionic/{p-1c1b8e1f.entry.js → p-6d6cedc5.entry.js} +1 -1
- package/dist/ionic/{p-1ebd1e27.system.entry.js → p-7ddc46c3.system.entry.js} +1 -1
- package/dist/ionic/{p-a34b4d94.entry.js → p-942b5e13.entry.js} +1 -1
- package/dist/ionic/{p-a1b9a163.entry.js → p-982315a6.entry.js} +1 -1
- package/dist/ionic/{p-a1051806.entry.js → p-9e33104d.entry.js} +1 -1
- package/dist/ionic/{p-9910f786.entry.js → p-a43467d8.entry.js} +1 -1
- package/dist/ionic/{p-1b7605a7.system.entry.js → p-b2272f51.system.entry.js} +1 -1
- package/dist/ionic/{p-4a274c89.entry.js → p-b79ba17c.entry.js} +1 -1
- package/dist/ionic/{p-8f05ba3b.system.js → p-c449820c.system.js} +1 -1
- package/dist/ionic/{p-1e41f2aa.system.entry.js → p-e4f69534.system.entry.js} +1 -1
- package/dist/ionic/p-e6635685.js +4 -0
- package/dist/ionic/p-fbf284c7.entry.js +4 -0
- package/dist/ionic/{p-e2252ad6.entry.js → p-fec61c32.entry.js} +1 -1
- package/dist/types/components/radio-group/radio-group.d.ts +2 -0
- package/dist/types/components.d.ts +1 -0
- package/dist/types/utils/focus-trap.d.ts +1 -1
- package/hydrate/index.js +89 -20
- package/hydrate/index.mjs +89 -20
- package/package.json +1 -1
- package/dist/esm-es5/overlays-ae10d43d.js +0 -4
- package/dist/ionic/p-0437ace4.system.entry.js +0 -4
- package/dist/ionic/p-04fc24ee.system.js +0 -4
- package/dist/ionic/p-09cf2394.entry.js +0 -4
- package/dist/ionic/p-5c831f49.js +0 -4
- package/dist/ionic/p-5f79d8c5.entry.js +0 -4
package/components/header.js
CHANGED
|
@@ -131,13 +131,32 @@ mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
|
|
|
131
131
|
};
|
|
132
132
|
const setHeaderActive = (headerIndex, active = true) => {
|
|
133
133
|
const headerEl = headerIndex.el;
|
|
134
|
+
const toolbars = headerIndex.toolbars;
|
|
135
|
+
const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
|
|
134
136
|
if (active) {
|
|
135
137
|
headerEl.classList.remove('header-collapse-condense-inactive');
|
|
136
|
-
|
|
138
|
+
ionTitles.forEach((ionTitle) => {
|
|
139
|
+
if (ionTitle) {
|
|
140
|
+
ionTitle.removeAttribute('aria-hidden');
|
|
141
|
+
}
|
|
142
|
+
});
|
|
137
143
|
}
|
|
138
144
|
else {
|
|
139
145
|
headerEl.classList.add('header-collapse-condense-inactive');
|
|
140
|
-
|
|
146
|
+
/**
|
|
147
|
+
* The small title should only be accessed by screen readers
|
|
148
|
+
* when the large title collapses into the small title due
|
|
149
|
+
* to scrolling.
|
|
150
|
+
*
|
|
151
|
+
* Originally, the header was given `aria-hidden="true"`
|
|
152
|
+
* but this caused issues with screen readers not being
|
|
153
|
+
* able to access any focusable elements within the header.
|
|
154
|
+
*/
|
|
155
|
+
ionTitles.forEach((ionTitle) => {
|
|
156
|
+
if (ionTitle) {
|
|
157
|
+
ionTitle.setAttribute('aria-hidden', 'true');
|
|
158
|
+
}
|
|
159
|
+
});
|
|
141
160
|
}
|
|
142
161
|
};
|
|
143
162
|
const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
|
|
@@ -279,6 +279,8 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
|
|
|
279
279
|
optsWidth = -this.optsWidthLeftSide;
|
|
280
280
|
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
281
281
|
}
|
|
282
|
+
if (openAmount === 0)
|
|
283
|
+
return;
|
|
282
284
|
this.setOpenAmount(openAmount, false);
|
|
283
285
|
}
|
|
284
286
|
onEnd(gesture) {
|
|
@@ -393,7 +395,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
|
|
|
393
395
|
}
|
|
394
396
|
render() {
|
|
395
397
|
const mode = getIonMode(this);
|
|
396
|
-
return (h(Host, { key: '
|
|
398
|
+
return (h(Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
|
|
397
399
|
[mode]: true,
|
|
398
400
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
399
401
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
package/components/ion-menu.js
CHANGED
|
@@ -8,8 +8,8 @@ import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
|
|
|
8
8
|
import { shouldUseCloseWatcher } from './hardware-back-button.js';
|
|
9
9
|
import { m as isEndSide, i as inheritAriaAttributes, n as assert, k as clamp } from './helpers.js';
|
|
10
10
|
import { m as menuController } from './index4.js';
|
|
11
|
+
import { c as config, b as getIonMode, a as isPlatform } from './ionic-global.js';
|
|
11
12
|
import { h as hostContext } from './theme.js';
|
|
12
|
-
import { c as config, b as getIonMode } from './ionic-global.js';
|
|
13
13
|
import { d as defineCustomElement$2 } from './backdrop.js';
|
|
14
14
|
|
|
15
15
|
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.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(.menu-pane-visible.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)}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
|
|
@@ -463,6 +463,22 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
463
463
|
}
|
|
464
464
|
beforeAnimation(shouldOpen, role) {
|
|
465
465
|
assert(!this.isAnimating, '_before() should not be called while animating');
|
|
466
|
+
/**
|
|
467
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
468
|
+
* may appear in the wrong position due to the transition (specifically
|
|
469
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
470
|
+
* displayed at the starting position of the elements before the transition
|
|
471
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
472
|
+
* incorrect location.
|
|
473
|
+
*
|
|
474
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
475
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
476
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
477
|
+
* `aria-hidden` is removed.
|
|
478
|
+
*/
|
|
479
|
+
if (isPlatform('android')) {
|
|
480
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
481
|
+
}
|
|
466
482
|
// this places the menu into the correct location before it animates in
|
|
467
483
|
// this css class doesn't actually kick off any animations
|
|
468
484
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -515,6 +531,16 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
515
531
|
this.blocker.unblock();
|
|
516
532
|
}
|
|
517
533
|
if (isOpen) {
|
|
534
|
+
/**
|
|
535
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
536
|
+
* may appear in the wrong position due to the transition (specifically
|
|
537
|
+
* `transform` styles). The menu is hidden from screen readers during the
|
|
538
|
+
* transition to prevent this. Once the transition is complete, the menu
|
|
539
|
+
* is shown again.
|
|
540
|
+
*/
|
|
541
|
+
if (isPlatform('android')) {
|
|
542
|
+
this.el.removeAttribute('aria-hidden');
|
|
543
|
+
}
|
|
518
544
|
// emit open event
|
|
519
545
|
this.ionDidOpen.emit();
|
|
520
546
|
/**
|
|
@@ -530,6 +556,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
530
556
|
document.addEventListener('focus', this.handleFocus, true);
|
|
531
557
|
}
|
|
532
558
|
else {
|
|
559
|
+
this.el.removeAttribute('aria-hidden');
|
|
533
560
|
// remove css classes and unhide content from screen readers
|
|
534
561
|
this.el.classList.remove(SHOW_MENU);
|
|
535
562
|
/**
|
|
@@ -596,14 +623,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
596
623
|
* the ionBackButton listener in the menu controller
|
|
597
624
|
* will handle closing the menu when Escape is pressed.
|
|
598
625
|
*/
|
|
599
|
-
return (h(Host, { key: '
|
|
626
|
+
return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
600
627
|
[mode]: true,
|
|
601
628
|
[`menu-type-${type}`]: true,
|
|
602
629
|
'menu-enabled': !disabled,
|
|
603
630
|
[`menu-side-${side}`]: true,
|
|
604
631
|
'menu-pane-visible': isPaneVisible,
|
|
605
632
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
606
|
-
} }, h("div", { key: '
|
|
633
|
+
} }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
607
634
|
}
|
|
608
635
|
get el() { return this; }
|
|
609
636
|
static get watchers() { return {
|
package/components/ion-toast.js
CHANGED
|
@@ -451,10 +451,10 @@ const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
|
|
|
451
451
|
return gesture;
|
|
452
452
|
};
|
|
453
453
|
|
|
454
|
-
const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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)}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
|
|
454
|
+
const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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);pointer-events:auto}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-radius:14px;--button-color:var(--ion-color-primary, #0054e9);--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
|
|
455
455
|
const IonToastIosStyle0 = toastIosCss;
|
|
456
456
|
|
|
457
|
-
const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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)}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
|
|
457
|
+
const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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);pointer-events:auto}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, var(--ion-background-color-step-800, #333333));--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #0054e9);--color:var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));--max-width:700px;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, var(--ion-text-color-step-900, #e6e6e6))}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
|
|
458
458
|
const IonToastMdStyle0 = toastMdCss;
|
|
459
459
|
|
|
460
460
|
const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
|
package/components/overlays.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { d as doc } from './index5.js';
|
|
5
5
|
import { f as focusVisibleElement, c as componentOnReady, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
|
|
6
6
|
import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button.js';
|
|
7
|
-
import { b as getIonMode, c as config } from './ionic-global.js';
|
|
7
|
+
import { b as getIonMode, c as config, a as isPlatform } from './ionic-global.js';
|
|
8
8
|
import { C as CoreDelegate } from './framework-delegate.js';
|
|
9
9
|
import { B as BACKDROP_NO_SCROLL } from './gesture-controller.js';
|
|
10
10
|
import { p as printIonWarning } from './index6.js';
|
|
@@ -21,7 +21,7 @@ import { p as printIonWarning } from './index6.js';
|
|
|
21
21
|
* Note: We need this distinction because `disabled="false"` is
|
|
22
22
|
* valid usage for the disabled property on ion-button.
|
|
23
23
|
*/
|
|
24
|
-
const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
|
|
24
|
+
const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
|
|
25
25
|
/**
|
|
26
26
|
* Focuses the first descendant in a context
|
|
27
27
|
* that can receive focus. If none exists,
|
|
@@ -76,7 +76,13 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
|
|
|
76
76
|
elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
|
|
77
77
|
}
|
|
78
78
|
if (elementToFocus) {
|
|
79
|
-
|
|
79
|
+
const radioGroup = elementToFocus.closest('ion-radio-group');
|
|
80
|
+
if (radioGroup) {
|
|
81
|
+
radioGroup.setFocus();
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
focusVisibleElement(elementToFocus);
|
|
85
|
+
}
|
|
80
86
|
}
|
|
81
87
|
else {
|
|
82
88
|
// Focus fallback element instead of letting focus escape
|
|
@@ -883,21 +889,30 @@ const createTriggerController = () => {
|
|
|
883
889
|
* like TalkBack do not announce or interact with the content until the
|
|
884
890
|
* animation is complete, avoiding confusion for users.
|
|
885
891
|
*
|
|
886
|
-
*
|
|
887
|
-
* in
|
|
888
|
-
* styles)
|
|
889
|
-
*
|
|
892
|
+
* When the overlay is presented on an Android device, TalkBack's focus rings
|
|
893
|
+
* may appear in the wrong position due to the transition (specifically
|
|
894
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
895
|
+
* displayed at the starting position of the elements before the transition
|
|
896
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
897
|
+
* incorrect location.
|
|
898
|
+
*
|
|
899
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
900
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
901
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
902
|
+
* `aria-hidden` is removed.
|
|
890
903
|
*
|
|
891
904
|
* @param overlay - The overlay that is being animated.
|
|
892
905
|
*/
|
|
893
906
|
const hideAnimatingOverlayFromScreenReaders = (overlay) => {
|
|
894
907
|
if (doc === undefined)
|
|
895
908
|
return;
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
909
|
+
if (isPlatform('android')) {
|
|
910
|
+
/**
|
|
911
|
+
* Once the animation is complete, this attribute will be removed.
|
|
912
|
+
* This is done at the end of the `present` method.
|
|
913
|
+
*/
|
|
914
|
+
overlay.setAttribute('aria-hidden', 'true');
|
|
915
|
+
}
|
|
901
916
|
};
|
|
902
917
|
/**
|
|
903
918
|
* Ensure that underlying overlays have aria-hidden if necessary so that screen readers
|
|
@@ -156,11 +156,16 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
|
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
|
+
/** @internal */
|
|
160
|
+
async setFocus() {
|
|
161
|
+
const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
|
|
162
|
+
radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
|
|
163
|
+
}
|
|
159
164
|
render() {
|
|
160
165
|
const { label, labelId, el, name, value } = this;
|
|
161
166
|
const mode = getIonMode(this);
|
|
162
167
|
renderHiddenInput(true, el, name, value, false);
|
|
163
|
-
return h(Host, { key: '
|
|
168
|
+
return h(Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
|
|
164
169
|
}
|
|
165
170
|
get el() { return this; }
|
|
166
171
|
static get watchers() { return {
|
|
@@ -170,7 +175,8 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
|
|
|
170
175
|
"allowEmptySelection": [4, "allow-empty-selection"],
|
|
171
176
|
"compareWith": [1, "compare-with"],
|
|
172
177
|
"name": [1],
|
|
173
|
-
"value": [1032]
|
|
178
|
+
"value": [1032],
|
|
179
|
+
"setFocus": [64]
|
|
174
180
|
}, [[4, "keydown", "onKeydown"]], {
|
|
175
181
|
"value": ["valueChanged"]
|
|
176
182
|
}]);
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -16,7 +16,7 @@ const helpers = require('./helpers-afaa9001.js');
|
|
|
16
16
|
const config = require('./config-4f60b98a.js');
|
|
17
17
|
const theme = require('./theme-d1c573d2.js');
|
|
18
18
|
const index$2 = require('./index-8e789962.js');
|
|
19
|
-
const overlays = require('./overlays-
|
|
19
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
20
20
|
require('./index-c8d52405.js');
|
|
21
21
|
require('./index-73f75efb.js');
|
|
22
22
|
require('./index-5915f9b3.js');
|
|
@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
|
|
|
9
9
|
const buttonActive = require('./button-active-3f2f60b4.js');
|
|
10
10
|
const helpers = require('./helpers-afaa9001.js');
|
|
11
11
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
13
13
|
const theme = require('./theme-d1c573d2.js');
|
|
14
14
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
15
15
|
const animation = require('./animation-b4fdf128.js');
|
|
@@ -10,7 +10,7 @@ const config = require('./config-4f60b98a.js');
|
|
|
10
10
|
const buttonActive = require('./button-active-3f2f60b4.js');
|
|
11
11
|
const helpers = require('./helpers-afaa9001.js');
|
|
12
12
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
14
14
|
const theme = require('./theme-d1c573d2.js');
|
|
15
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
16
|
const animation = require('./animation-b4fdf128.js');
|
|
@@ -801,13 +801,32 @@ mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
|
|
|
801
801
|
};
|
|
802
802
|
const setHeaderActive = (headerIndex, active = true) => {
|
|
803
803
|
const headerEl = headerIndex.el;
|
|
804
|
+
const toolbars = headerIndex.toolbars;
|
|
805
|
+
const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
|
|
804
806
|
if (active) {
|
|
805
807
|
headerEl.classList.remove('header-collapse-condense-inactive');
|
|
806
|
-
|
|
808
|
+
ionTitles.forEach((ionTitle) => {
|
|
809
|
+
if (ionTitle) {
|
|
810
|
+
ionTitle.removeAttribute('aria-hidden');
|
|
811
|
+
}
|
|
812
|
+
});
|
|
807
813
|
}
|
|
808
814
|
else {
|
|
809
815
|
headerEl.classList.add('header-collapse-condense-inactive');
|
|
810
|
-
|
|
816
|
+
/**
|
|
817
|
+
* The small title should only be accessed by screen readers
|
|
818
|
+
* when the large title collapses into the small title due
|
|
819
|
+
* to scrolling.
|
|
820
|
+
*
|
|
821
|
+
* Originally, the header was given `aria-hidden="true"`
|
|
822
|
+
* but this caused issues with screen readers not being
|
|
823
|
+
* able to access any focusable elements within the header.
|
|
824
|
+
*/
|
|
825
|
+
ionTitles.forEach((ionTitle) => {
|
|
826
|
+
if (ionTitle) {
|
|
827
|
+
ionTitle.setAttribute('aria-hidden', 'true');
|
|
828
|
+
}
|
|
829
|
+
});
|
|
811
830
|
}
|
|
812
831
|
};
|
|
813
832
|
const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
|
|
@@ -15,7 +15,7 @@ const index$2 = require('./index-073c7cdc.js');
|
|
|
15
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
16
|
const data = require('./data-21dc0f81.js');
|
|
17
17
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
18
|
-
const overlays = require('./overlays-
|
|
18
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
19
19
|
const animation = require('./animation-b4fdf128.js');
|
|
20
20
|
const haptic = require('./haptic-f6b37aa3.js');
|
|
21
21
|
require('./index-c8d52405.js');
|
|
@@ -377,6 +377,8 @@ const ItemSliding = class {
|
|
|
377
377
|
optsWidth = -this.optsWidthLeftSide;
|
|
378
378
|
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
379
379
|
}
|
|
380
|
+
if (openAmount === 0)
|
|
381
|
+
return;
|
|
380
382
|
this.setOpenAmount(openAmount, false);
|
|
381
383
|
}
|
|
382
384
|
onEnd(gesture) {
|
|
@@ -491,7 +493,7 @@ const ItemSliding = class {
|
|
|
491
493
|
}
|
|
492
494
|
render() {
|
|
493
495
|
const mode = ionicGlobal.getIonMode(this);
|
|
494
|
-
return (index.h(index.Host, { key: '
|
|
496
|
+
return (index.h(index.Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
|
|
495
497
|
[mode]: true,
|
|
496
498
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
497
499
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
|
|
|
9
9
|
const config = require('./config-4f60b98a.js');
|
|
10
10
|
const helpers = require('./helpers-afaa9001.js');
|
|
11
11
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
13
13
|
const theme = require('./theme-d1c573d2.js');
|
|
14
14
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
15
15
|
const animation = require('./animation-b4fdf128.js');
|
|
@@ -7,13 +7,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
7
7
|
|
|
8
8
|
const index = require('./index-73f75efb.js');
|
|
9
9
|
const cubicBezier = require('./cubic-bezier-f2dccc53.js');
|
|
10
|
-
const overlays = require('./overlays-
|
|
10
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
11
11
|
const gestureController = require('./gesture-controller-9436f482.js');
|
|
12
12
|
const hardwareBackButton = require('./hardware-back-button-9e8a2c4f.js');
|
|
13
13
|
const helpers = require('./helpers-afaa9001.js');
|
|
14
14
|
const index$1 = require('./index-8e789962.js');
|
|
15
|
-
const theme = require('./theme-d1c573d2.js');
|
|
16
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
|
+
const theme = require('./theme-d1c573d2.js');
|
|
17
17
|
const index$2 = require('./index-073c7cdc.js');
|
|
18
18
|
require('./index-c8d52405.js');
|
|
19
19
|
require('./framework-delegate-55f5683a.js');
|
|
@@ -466,6 +466,22 @@ const Menu = class {
|
|
|
466
466
|
}
|
|
467
467
|
beforeAnimation(shouldOpen, role) {
|
|
468
468
|
helpers.assert(!this.isAnimating, '_before() should not be called while animating');
|
|
469
|
+
/**
|
|
470
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
471
|
+
* may appear in the wrong position due to the transition (specifically
|
|
472
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
473
|
+
* displayed at the starting position of the elements before the transition
|
|
474
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
475
|
+
* incorrect location.
|
|
476
|
+
*
|
|
477
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
478
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
479
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
480
|
+
* `aria-hidden` is removed.
|
|
481
|
+
*/
|
|
482
|
+
if (ionicGlobal.isPlatform('android')) {
|
|
483
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
484
|
+
}
|
|
469
485
|
// this places the menu into the correct location before it animates in
|
|
470
486
|
// this css class doesn't actually kick off any animations
|
|
471
487
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -518,6 +534,16 @@ const Menu = class {
|
|
|
518
534
|
this.blocker.unblock();
|
|
519
535
|
}
|
|
520
536
|
if (isOpen) {
|
|
537
|
+
/**
|
|
538
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
539
|
+
* may appear in the wrong position due to the transition (specifically
|
|
540
|
+
* `transform` styles). The menu is hidden from screen readers during the
|
|
541
|
+
* transition to prevent this. Once the transition is complete, the menu
|
|
542
|
+
* is shown again.
|
|
543
|
+
*/
|
|
544
|
+
if (ionicGlobal.isPlatform('android')) {
|
|
545
|
+
this.el.removeAttribute('aria-hidden');
|
|
546
|
+
}
|
|
521
547
|
// emit open event
|
|
522
548
|
this.ionDidOpen.emit();
|
|
523
549
|
/**
|
|
@@ -533,6 +559,7 @@ const Menu = class {
|
|
|
533
559
|
document.addEventListener('focus', this.handleFocus, true);
|
|
534
560
|
}
|
|
535
561
|
else {
|
|
562
|
+
this.el.removeAttribute('aria-hidden');
|
|
536
563
|
// remove css classes and unhide content from screen readers
|
|
537
564
|
this.el.classList.remove(SHOW_MENU);
|
|
538
565
|
/**
|
|
@@ -599,14 +626,14 @@ const Menu = class {
|
|
|
599
626
|
* the ionBackButton listener in the menu controller
|
|
600
627
|
* will handle closing the menu when Escape is pressed.
|
|
601
628
|
*/
|
|
602
|
-
return (index.h(index.Host, { key: '
|
|
629
|
+
return (index.h(index.Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
603
630
|
[mode]: true,
|
|
604
631
|
[`menu-type-${type}`]: true,
|
|
605
632
|
'menu-enabled': !disabled,
|
|
606
633
|
[`menu-side-${side}`]: true,
|
|
607
634
|
'menu-pane-visible': isPaneVisible,
|
|
608
635
|
'split-pane-side': theme.hostContext('ion-split-pane', el),
|
|
609
|
-
} }, index.h("div", { key: '
|
|
636
|
+
} }, index.h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), index.h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
610
637
|
}
|
|
611
638
|
get el() { return index.getElement(this); }
|
|
612
639
|
static get watchers() { return {
|
|
@@ -12,7 +12,7 @@ const helpers = require('./helpers-afaa9001.js');
|
|
|
12
12
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
13
13
|
const index$4 = require('./index-5915f9b3.js');
|
|
14
14
|
const capacitor = require('./capacitor-c04564bf.js');
|
|
15
|
-
const overlays = require('./overlays-
|
|
15
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
16
16
|
const theme = require('./theme-d1c573d2.js');
|
|
17
17
|
const index$5 = require('./index-f05acd21.js');
|
|
18
18
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
8
|
const index = require('./index-73f75efb.js');
|
|
9
|
-
const overlays = require('./overlays-
|
|
9
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
10
10
|
const frameworkDelegate = require('./framework-delegate-55f5683a.js');
|
|
11
11
|
const helpers = require('./helpers-afaa9001.js');
|
|
12
12
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
@@ -302,11 +302,16 @@ const RadioGroup = class {
|
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
}
|
|
305
|
+
/** @internal */
|
|
306
|
+
async setFocus() {
|
|
307
|
+
const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
|
|
308
|
+
radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
|
|
309
|
+
}
|
|
305
310
|
render() {
|
|
306
311
|
const { label, labelId, el, name, value } = this;
|
|
307
312
|
const mode = ionicGlobal.getIonMode(this);
|
|
308
313
|
helpers.renderHiddenInput(true, el, name, value, false);
|
|
309
|
-
return index.h(index.Host, { key: '
|
|
314
|
+
return index.h(index.Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
|
|
310
315
|
}
|
|
311
316
|
get el() { return index.getElement(this); }
|
|
312
317
|
static get watchers() { return {
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
7
7
|
|
|
8
8
|
const index = require('./index-73f75efb.js');
|
|
9
9
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
10
|
-
const overlays = require('./overlays-
|
|
10
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
11
11
|
const theme = require('./theme-d1c573d2.js');
|
|
12
12
|
require('./index-c8d52405.js');
|
|
13
13
|
require('./helpers-afaa9001.js');
|
|
@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
|
|
|
9
9
|
const notchController = require('./notch-controller-d69150f5.js');
|
|
10
10
|
const compareWithUtils = require('./compare-with-utils-df1001d7.js');
|
|
11
11
|
const helpers = require('./helpers-afaa9001.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
13
13
|
const dir = require('./dir-94c21456.js');
|
|
14
14
|
const theme = require('./theme-d1c573d2.js');
|
|
15
15
|
const watchOptions = require('./watch-options-f5f3e158.js');
|
|
@@ -10,7 +10,7 @@ const config = require('./config-4f60b98a.js');
|
|
|
10
10
|
const helpers = require('./helpers-afaa9001.js');
|
|
11
11
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
12
12
|
const index$1 = require('./index-5915f9b3.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
14
14
|
const theme = require('./theme-d1c573d2.js');
|
|
15
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
16
|
const animation = require('./animation-b4fdf128.js');
|
|
@@ -454,10 +454,10 @@ const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
|
|
|
454
454
|
return gesture;
|
|
455
455
|
};
|
|
456
456
|
|
|
457
|
-
const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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)}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
|
|
457
|
+
const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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);pointer-events:auto}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-radius:14px;--button-color:var(--ion-color-primary, #0054e9);--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
|
|
458
458
|
const IonToastIosStyle0 = toastIosCss;
|
|
459
459
|
|
|
460
|
-
const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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)}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
|
|
460
|
+
const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host{inset-inline-start:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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);pointer-events:auto}.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);bottom:0}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, var(--ion-background-color-step-800, #333333));--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #0054e9);--color:var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));--max-width:700px;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, var(--ion-text-color-step-900, #e6e6e6))}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
|
|
461
461
|
const IonToastMdStyle0 = toastMdCss;
|
|
462
462
|
|
|
463
463
|
const Toast = class {
|