@ionic/core 8.4.1-dev.11732219984.1b9a256c → 8.4.1-dev.11732235436.1dec59cf
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/index4.js +1 -1
- package/components/ion-menu.js +9 -4
- package/dist/cjs/{index-dfb3f752.js → index-8e789962.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +10 -5
- package/dist/collection/components/menu/menu.ios.css +1 -4
- package/dist/collection/components/menu/menu.js +7 -2
- package/dist/collection/components/menu/menu.md.css +1 -4
- package/dist/collection/utils/menu-controller/animations/overlay.js +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/{index-49472991.js → index-24b48b06.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +10 -5
- package/dist/esm-es5/index-24b48b06.js +4 -0
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-322c5fb4.system.js +1 -1
- package/dist/ionic/p-5f76120c.entry.js +4 -0
- package/dist/ionic/p-7d3a5580.system.entry.js +4 -0
- package/dist/ionic/{p-73d19329.system.js → p-8f05ba3b.system.js} +1 -1
- package/dist/ionic/p-b82d4cab.js +4 -0
- package/dist/ionic/p-e7ed4a7f.system.js +4 -0
- package/hydrate/index.js +10 -5
- package/hydrate/index.mjs +10 -5
- package/package.json +1 -1
- package/dist/esm-es5/index-49472991.js +0 -4
- package/dist/ionic/p-7ed7d641.system.entry.js +0 -4
- package/dist/ionic/p-d174ceca.entry.js +0 -4
- package/dist/ionic/p-dec16890.system.js +0 -4
- package/dist/ionic/p-e43c2e19.js +0 -4
package/components/index4.js
CHANGED
|
@@ -46,7 +46,7 @@ const menuOverlayAnimation = (menu) => {
|
|
|
46
46
|
closedX = -width + 'px';
|
|
47
47
|
openedX = '0px';
|
|
48
48
|
}
|
|
49
|
-
menuAnimation.addElement(menu.menuInnerEl).fromTo('
|
|
49
|
+
menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
|
|
50
50
|
const mode = getIonMode(menu);
|
|
51
51
|
const isIos = mode === 'ios';
|
|
52
52
|
const opacity = isIos ? 0.2 : 0.25;
|
package/components/ion-menu.js
CHANGED
|
@@ -12,10 +12,10 @@ import { h as hostContext } from './theme.js';
|
|
|
12
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
|
-
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{display:-ms-flexbox;display:flex;position:absolute
|
|
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}";
|
|
16
16
|
const IonMenuIosStyle0 = menuIosCss;
|
|
17
17
|
|
|
18
|
-
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{display:-ms-flexbox;display:flex;position:absolute
|
|
18
|
+
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}: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-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
|
|
19
19
|
const IonMenuMdStyle0 = menuMdCss;
|
|
20
20
|
|
|
21
21
|
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
|
|
@@ -463,6 +463,8 @@ 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
|
+
// add aria-hidden to the menu
|
|
467
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
466
468
|
// this places the menu into the correct location before it animates in
|
|
467
469
|
// this css class doesn't actually kick off any animations
|
|
468
470
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -517,6 +519,8 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
517
519
|
if (isOpen) {
|
|
518
520
|
// emit open event
|
|
519
521
|
this.ionDidOpen.emit();
|
|
522
|
+
// remove aria-hidden from menu
|
|
523
|
+
this.el.removeAttribute('aria-hidden');
|
|
520
524
|
/**
|
|
521
525
|
* Move focus to the menu to prepare focus trapping, as long as
|
|
522
526
|
* it isn't already focused. Use the host element instead of the
|
|
@@ -530,6 +534,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
530
534
|
document.addEventListener('focus', this.handleFocus, true);
|
|
531
535
|
}
|
|
532
536
|
else {
|
|
537
|
+
this.el.removeAttribute('aria-hidden');
|
|
533
538
|
// remove css classes and unhide content from screen readers
|
|
534
539
|
this.el.classList.remove(SHOW_MENU);
|
|
535
540
|
/**
|
|
@@ -596,14 +601,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
596
601
|
* the ionBackButton listener in the menu controller
|
|
597
602
|
* will handle closing the menu when Escape is pressed.
|
|
598
603
|
*/
|
|
599
|
-
return (h(Host, { key: '
|
|
604
|
+
return (h(Host, { key: 'b06d57136c3197032dec883c1f2ef1f45038a66e', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
600
605
|
[mode]: true,
|
|
601
606
|
[`menu-type-${type}`]: true,
|
|
602
607
|
'menu-enabled': !disabled,
|
|
603
608
|
[`menu-side-${side}`]: true,
|
|
604
609
|
'menu-pane-visible': isPaneVisible,
|
|
605
610
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
606
|
-
} }, h("div", { key: '
|
|
611
|
+
} }, h("div", { key: '914b7fa60640738d24e5cccb8e6dacc3f2660663', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '8735e03f6545d0d0d8df5e51953bbb9e85c53d63' })), h("ion-backdrop", { key: 'b829bd8977c31904c31ec0809461a778e25b5faa', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
607
612
|
}
|
|
608
613
|
get el() { return this; }
|
|
609
614
|
static get watchers() { return {
|
|
@@ -48,7 +48,7 @@ const menuOverlayAnimation = (menu) => {
|
|
|
48
48
|
closedX = -width + 'px';
|
|
49
49
|
openedX = '0px';
|
|
50
50
|
}
|
|
51
|
-
menuAnimation.addElement(menu.menuInnerEl).fromTo('
|
|
51
|
+
menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
|
|
52
52
|
const mode = ionicGlobal.getIonMode(menu);
|
|
53
53
|
const isIos = mode === 'ios';
|
|
54
54
|
const opacity = isIos ? 0.2 : 0.25;
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -15,7 +15,7 @@ const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
|
15
15
|
const helpers = require('./helpers-afaa9001.js');
|
|
16
16
|
const config = require('./config-4f60b98a.js');
|
|
17
17
|
const theme = require('./theme-d1c573d2.js');
|
|
18
|
-
const index$2 = require('./index-
|
|
18
|
+
const index$2 = require('./index-8e789962.js');
|
|
19
19
|
const overlays = require('./overlays-ba0f6986.js');
|
|
20
20
|
require('./index-c8d52405.js');
|
|
21
21
|
require('./index-73f75efb.js');
|
|
@@ -11,7 +11,7 @@ const overlays = require('./overlays-ba0f6986.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
|
-
const index$1 = require('./index-
|
|
14
|
+
const index$1 = require('./index-8e789962.js');
|
|
15
15
|
const theme = require('./theme-d1c573d2.js');
|
|
16
16
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
17
17
|
const index$2 = require('./index-073c7cdc.js');
|
|
@@ -20,10 +20,10 @@ require('./framework-delegate-55f5683a.js');
|
|
|
20
20
|
require('./index-5915f9b3.js');
|
|
21
21
|
require('./animation-b4fdf128.js');
|
|
22
22
|
|
|
23
|
-
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{display:-ms-flexbox;display:flex;position:absolute
|
|
23
|
+
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}";
|
|
24
24
|
const IonMenuIosStyle0 = menuIosCss;
|
|
25
25
|
|
|
26
|
-
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{display:-ms-flexbox;display:flex;position:absolute
|
|
26
|
+
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}: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-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
|
|
27
27
|
const IonMenuMdStyle0 = menuMdCss;
|
|
28
28
|
|
|
29
29
|
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
|
|
@@ -466,6 +466,8 @@ const Menu = class {
|
|
|
466
466
|
}
|
|
467
467
|
beforeAnimation(shouldOpen, role) {
|
|
468
468
|
helpers.assert(!this.isAnimating, '_before() should not be called while animating');
|
|
469
|
+
// add aria-hidden to the menu
|
|
470
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
469
471
|
// this places the menu into the correct location before it animates in
|
|
470
472
|
// this css class doesn't actually kick off any animations
|
|
471
473
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -520,6 +522,8 @@ const Menu = class {
|
|
|
520
522
|
if (isOpen) {
|
|
521
523
|
// emit open event
|
|
522
524
|
this.ionDidOpen.emit();
|
|
525
|
+
// remove aria-hidden from menu
|
|
526
|
+
this.el.removeAttribute('aria-hidden');
|
|
523
527
|
/**
|
|
524
528
|
* Move focus to the menu to prepare focus trapping, as long as
|
|
525
529
|
* it isn't already focused. Use the host element instead of the
|
|
@@ -533,6 +537,7 @@ const Menu = class {
|
|
|
533
537
|
document.addEventListener('focus', this.handleFocus, true);
|
|
534
538
|
}
|
|
535
539
|
else {
|
|
540
|
+
this.el.removeAttribute('aria-hidden');
|
|
536
541
|
// remove css classes and unhide content from screen readers
|
|
537
542
|
this.el.classList.remove(SHOW_MENU);
|
|
538
543
|
/**
|
|
@@ -599,14 +604,14 @@ const Menu = class {
|
|
|
599
604
|
* the ionBackButton listener in the menu controller
|
|
600
605
|
* will handle closing the menu when Escape is pressed.
|
|
601
606
|
*/
|
|
602
|
-
return (index.h(index.Host, { key: '
|
|
607
|
+
return (index.h(index.Host, { key: 'b06d57136c3197032dec883c1f2ef1f45038a66e', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
603
608
|
[mode]: true,
|
|
604
609
|
[`menu-type-${type}`]: true,
|
|
605
610
|
'menu-enabled': !disabled,
|
|
606
611
|
[`menu-side-${side}`]: true,
|
|
607
612
|
'menu-pane-visible': isPaneVisible,
|
|
608
613
|
'split-pane-side': theme.hostContext('ion-split-pane', el),
|
|
609
|
-
} }, index.h("div", { key: '
|
|
614
|
+
} }, index.h("div", { key: '914b7fa60640738d24e5cccb8e6dacc3f2660663', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '8735e03f6545d0d0d8df5e51953bbb9e85c53d63' })), index.h("ion-backdrop", { key: 'b829bd8977c31904c31ec0809461a778e25b5faa', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
610
615
|
}
|
|
611
616
|
get el() { return index.getElement(this); }
|
|
612
617
|
static get watchers() { return {
|
|
@@ -86,11 +86,9 @@
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.menu-inner {
|
|
89
|
+
transform: translateX(-9999px);
|
|
89
90
|
display: flex;
|
|
90
91
|
position: absolute;
|
|
91
|
-
right: unset;
|
|
92
|
-
/* stylelint-disable property-disallowed-list */
|
|
93
|
-
left: -100%; /* Hide offscreen for left-sided menu */
|
|
94
92
|
flex-direction: column;
|
|
95
93
|
justify-content: space-between;
|
|
96
94
|
width: var(--width);
|
|
@@ -99,7 +97,6 @@
|
|
|
99
97
|
height: var(--height);
|
|
100
98
|
min-height: var(--min-height);
|
|
101
99
|
max-height: var(--max-height);
|
|
102
|
-
transform: none; /* Avoid using transform */
|
|
103
100
|
background: var(--background);
|
|
104
101
|
contain: strict;
|
|
105
102
|
}
|
|
@@ -453,6 +453,8 @@ export class Menu {
|
|
|
453
453
|
}
|
|
454
454
|
beforeAnimation(shouldOpen, role) {
|
|
455
455
|
assert(!this.isAnimating, '_before() should not be called while animating');
|
|
456
|
+
// add aria-hidden to the menu
|
|
457
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
456
458
|
// this places the menu into the correct location before it animates in
|
|
457
459
|
// this css class doesn't actually kick off any animations
|
|
458
460
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -507,6 +509,8 @@ export class Menu {
|
|
|
507
509
|
if (isOpen) {
|
|
508
510
|
// emit open event
|
|
509
511
|
this.ionDidOpen.emit();
|
|
512
|
+
// remove aria-hidden from menu
|
|
513
|
+
this.el.removeAttribute('aria-hidden');
|
|
510
514
|
/**
|
|
511
515
|
* Move focus to the menu to prepare focus trapping, as long as
|
|
512
516
|
* it isn't already focused. Use the host element instead of the
|
|
@@ -520,6 +524,7 @@ export class Menu {
|
|
|
520
524
|
document.addEventListener('focus', this.handleFocus, true);
|
|
521
525
|
}
|
|
522
526
|
else {
|
|
527
|
+
this.el.removeAttribute('aria-hidden');
|
|
523
528
|
// remove css classes and unhide content from screen readers
|
|
524
529
|
this.el.classList.remove(SHOW_MENU);
|
|
525
530
|
/**
|
|
@@ -586,14 +591,14 @@ export class Menu {
|
|
|
586
591
|
* the ionBackButton listener in the menu controller
|
|
587
592
|
* will handle closing the menu when Escape is pressed.
|
|
588
593
|
*/
|
|
589
|
-
return (h(Host, { key: '
|
|
594
|
+
return (h(Host, { key: 'b06d57136c3197032dec883c1f2ef1f45038a66e', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
590
595
|
[mode]: true,
|
|
591
596
|
[`menu-type-${type}`]: true,
|
|
592
597
|
'menu-enabled': !disabled,
|
|
593
598
|
[`menu-side-${side}`]: true,
|
|
594
599
|
'menu-pane-visible': isPaneVisible,
|
|
595
600
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
596
|
-
} }, h("div", { key: '
|
|
601
|
+
} }, h("div", { key: '914b7fa60640738d24e5cccb8e6dacc3f2660663', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '8735e03f6545d0d0d8df5e51953bbb9e85c53d63' })), h("ion-backdrop", { key: 'b829bd8977c31904c31ec0809461a778e25b5faa', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
597
602
|
}
|
|
598
603
|
static get is() { return "ion-menu"; }
|
|
599
604
|
static get encapsulation() { return "shadow"; }
|
|
@@ -86,11 +86,9 @@
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.menu-inner {
|
|
89
|
+
transform: translateX(-9999px);
|
|
89
90
|
display: flex;
|
|
90
91
|
position: absolute;
|
|
91
|
-
right: unset;
|
|
92
|
-
/* stylelint-disable property-disallowed-list */
|
|
93
|
-
left: -100%; /* Hide offscreen for left-sided menu */
|
|
94
92
|
flex-direction: column;
|
|
95
93
|
justify-content: space-between;
|
|
96
94
|
width: var(--width);
|
|
@@ -99,7 +97,6 @@
|
|
|
99
97
|
height: var(--height);
|
|
100
98
|
min-height: var(--min-height);
|
|
101
99
|
max-height: var(--max-height);
|
|
102
|
-
transform: none; /* Avoid using transform */
|
|
103
100
|
background: var(--background);
|
|
104
101
|
contain: strict;
|
|
105
102
|
}
|
|
@@ -25,7 +25,7 @@ export const menuOverlayAnimation = (menu) => {
|
|
|
25
25
|
closedX = -width + 'px';
|
|
26
26
|
openedX = '0px';
|
|
27
27
|
}
|
|
28
|
-
menuAnimation.addElement(menu.menuInnerEl).fromTo('
|
|
28
|
+
menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
|
|
29
29
|
const mode = getIonMode(menu);
|
|
30
30
|
const isIos = mode === 'ios';
|
|
31
31
|
const opacity = isIos ? 0.2 : 0.25;
|
package/dist/docs.json
CHANGED
|
@@ -46,7 +46,7 @@ const menuOverlayAnimation = (menu) => {
|
|
|
46
46
|
closedX = -width + 'px';
|
|
47
47
|
openedX = '0px';
|
|
48
48
|
}
|
|
49
|
-
menuAnimation.addElement(menu.menuInnerEl).fromTo('
|
|
49
|
+
menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
|
|
50
50
|
const mode = getIonMode(menu);
|
|
51
51
|
const isIos = mode === 'ios';
|
|
52
52
|
const opacity = isIos ? 0.2 : 0.25;
|
package/dist/esm/index.js
CHANGED
|
@@ -11,7 +11,7 @@ export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-glo
|
|
|
11
11
|
export { c as componentOnReady } from './helpers-da915de8.js';
|
|
12
12
|
export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-49c88215.js';
|
|
13
13
|
export { o as openURL } from './theme-01f3f29c.js';
|
|
14
|
-
export { m as menuController } from './index-
|
|
14
|
+
export { m as menuController } from './index-24b48b06.js';
|
|
15
15
|
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-ae10d43d.js';
|
|
16
16
|
import './index-a5d50daf.js';
|
|
17
17
|
import './index-28849c61.js';
|
|
@@ -7,7 +7,7 @@ import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q a
|
|
|
7
7
|
import { G as GESTURE_CONTROLLER } from './gesture-controller-314a54f6.js';
|
|
8
8
|
import { shouldUseCloseWatcher } from './hardware-back-button-06ef3c3e.js';
|
|
9
9
|
import { n as isEndSide, i as inheritAriaAttributes, m as assert, j as clamp } from './helpers-da915de8.js';
|
|
10
|
-
import { m as menuController } from './index-
|
|
10
|
+
import { m as menuController } from './index-24b48b06.js';
|
|
11
11
|
import { h as hostContext, c as createColorClasses } from './theme-01f3f29c.js';
|
|
12
12
|
import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
13
13
|
import { u as menuOutline, v as menuSharp } from './index-e2cf2ceb.js';
|
|
@@ -16,10 +16,10 @@ import './framework-delegate-63d1a679.js';
|
|
|
16
16
|
import './index-9b0d46f4.js';
|
|
17
17
|
import './animation-eab5a4ca.js';
|
|
18
18
|
|
|
19
|
-
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{display:-ms-flexbox;display:flex;position:absolute
|
|
19
|
+
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}: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}";
|
|
20
20
|
const IonMenuIosStyle0 = menuIosCss;
|
|
21
21
|
|
|
22
|
-
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{display:-ms-flexbox;display:flex;position:absolute
|
|
22
|
+
const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}: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-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
|
|
23
23
|
const IonMenuMdStyle0 = menuMdCss;
|
|
24
24
|
|
|
25
25
|
const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
|
|
@@ -462,6 +462,8 @@ const Menu = class {
|
|
|
462
462
|
}
|
|
463
463
|
beforeAnimation(shouldOpen, role) {
|
|
464
464
|
assert(!this.isAnimating, '_before() should not be called while animating');
|
|
465
|
+
// add aria-hidden to the menu
|
|
466
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
465
467
|
// this places the menu into the correct location before it animates in
|
|
466
468
|
// this css class doesn't actually kick off any animations
|
|
467
469
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -516,6 +518,8 @@ const Menu = class {
|
|
|
516
518
|
if (isOpen) {
|
|
517
519
|
// emit open event
|
|
518
520
|
this.ionDidOpen.emit();
|
|
521
|
+
// remove aria-hidden from menu
|
|
522
|
+
this.el.removeAttribute('aria-hidden');
|
|
519
523
|
/**
|
|
520
524
|
* Move focus to the menu to prepare focus trapping, as long as
|
|
521
525
|
* it isn't already focused. Use the host element instead of the
|
|
@@ -529,6 +533,7 @@ const Menu = class {
|
|
|
529
533
|
document.addEventListener('focus', this.handleFocus, true);
|
|
530
534
|
}
|
|
531
535
|
else {
|
|
536
|
+
this.el.removeAttribute('aria-hidden');
|
|
532
537
|
// remove css classes and unhide content from screen readers
|
|
533
538
|
this.el.classList.remove(SHOW_MENU);
|
|
534
539
|
/**
|
|
@@ -595,14 +600,14 @@ const Menu = class {
|
|
|
595
600
|
* the ionBackButton listener in the menu controller
|
|
596
601
|
* will handle closing the menu when Escape is pressed.
|
|
597
602
|
*/
|
|
598
|
-
return (h(Host, { key: '
|
|
603
|
+
return (h(Host, { key: 'b06d57136c3197032dec883c1f2ef1f45038a66e', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
599
604
|
[mode]: true,
|
|
600
605
|
[`menu-type-${type}`]: true,
|
|
601
606
|
'menu-enabled': !disabled,
|
|
602
607
|
[`menu-side-${side}`]: true,
|
|
603
608
|
'menu-pane-visible': isPaneVisible,
|
|
604
609
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
605
|
-
} }, h("div", { key: '
|
|
610
|
+
} }, h("div", { key: '914b7fa60640738d24e5cccb8e6dacc3f2660663', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '8735e03f6545d0d0d8df5e51953bbb9e85c53d63' })), h("ion-backdrop", { key: 'b829bd8977c31904c31ec0809461a778e25b5faa', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
606
611
|
}
|
|
607
612
|
get el() { return getElement(this); }
|
|
608
613
|
static get watchers() { return {
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{__awaiter,__generator,__spreadArray}from"tslib";
|
|
2
|
+
/*!
|
|
3
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
4
|
+
*/import{d as doc}from"./index-a5d50daf.js";import{MENU_BACK_BUTTON_PRIORITY}from"./hardware-back-button-06ef3c3e.js";import{p as printIonWarning}from"./index-9b0d46f4.js";import{c as componentOnReady}from"./helpers-da915de8.js";import{b as getIonMode}from"./ionic-global-c81d82ab.js";import{c as createAnimation}from"./animation-eab5a4ca.js";var baseAnimation=function(n){return createAnimation().duration(n?400:300)};var menuOverlayAnimation=function(n){var r;var e;var t=n.width+8;var i=createAnimation();var a=createAnimation();if(n.isEndSide){r=t+"px";e="0px"}else{r=-t+"px";e="0px"}i.addElement(n.menuInnerEl).fromTo("transform","translateX(".concat(r,")"),"translateX(".concat(e,")"));var o=getIonMode(n);var u=o==="ios";var s=u?.2:.25;a.addElement(n.backdropEl).fromTo("opacity",.01,s);return baseAnimation(u).addAnimation([i,a])};var menuPushAnimation=function(n){var r;var e;var t=getIonMode(n);var i=n.width;if(n.isEndSide){r=-i+"px";e=i+"px"}else{r=i+"px";e=-i+"px"}var a=createAnimation().addElement(n.menuInnerEl).fromTo("transform","translateX(".concat(e,")"),"translateX(0px)");var o=createAnimation().addElement(n.contentEl).fromTo("transform","translateX(0px)","translateX(".concat(r,")"));var u=createAnimation().addElement(n.backdropEl).fromTo("opacity",.01,.32);return baseAnimation(t==="ios").addAnimation([a,o,u])};var menuRevealAnimation=function(n){var r=getIonMode(n);var e=n.width*(n.isEndSide?-1:1)+"px";var t=createAnimation().addElement(n.contentEl).fromTo("transform","translateX(0px)","translateX(".concat(e,")"));return baseAnimation(r==="ios").addAnimation(t)};var createMenuController=function(){var n=new Map;var r=[];var e=function(n){return __awaiter(void 0,void 0,void 0,(function(){var r;return __generator(this,(function(e){switch(e.label){case 0:return[4,c(n,true)];case 1:r=e.sent();if(r){return[2,r.open()]}return[2,false]}}))}))};var t=function(n){return __awaiter(void 0,void 0,void 0,(function(){var r;return __generator(this,(function(e){switch(e.label){case 0:return[4,n!==undefined?c(n,true):f()];case 1:r=e.sent();if(r!==undefined){return[2,r.close()]}return[2,false]}}))}))};var i=function(n){return __awaiter(void 0,void 0,void 0,(function(){var r;return __generator(this,(function(e){switch(e.label){case 0:return[4,c(n,true)];case 1:r=e.sent();if(r){return[2,r.toggle()]}return[2,false]}}))}))};var a=function(n,r){return __awaiter(void 0,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:return[4,c(r)];case 1:e=t.sent();if(e){e.disabled=!n}return[2,e]}}))}))};var o=function(n,r){return __awaiter(void 0,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:return[4,c(r)];case 1:e=t.sent();if(e){e.swipeGesture=n}return[2,e]}}))}))};var u=function(n){return __awaiter(void 0,void 0,void 0,(function(){var r,r;return __generator(this,(function(e){switch(e.label){case 0:if(!(n!=null))return[3,2];return[4,c(n)];case 1:r=e.sent();return[2,r!==undefined&&r.isOpen()];case 2:return[4,f()];case 3:r=e.sent();return[2,r!==undefined]}}))}))};var s=function(n){return __awaiter(void 0,void 0,void 0,(function(){var r;return __generator(this,(function(e){switch(e.label){case 0:return[4,c(n)];case 1:r=e.sent();if(r){return[2,!r.disabled]}return[2,false]}}))}))};var c=function(n){var e=[];for(var t=1;t<arguments.length;t++){e[t-1]=arguments[t]}return __awaiter(void 0,__spreadArray([n],e,true),void 0,(function(n,e){var t,i,a;if(e===void 0){e=false}return __generator(this,(function(o){switch(o.label){case 0:return[4,x()];case 1:o.sent();if(n==="start"||n==="end"){t=r.filter((function(r){return r.side===n&&!r.disabled}));if(t.length>=1){if(t.length>1&&e){printIonWarning('menuController queried for a menu on the "'.concat(n,'" side, but ').concat(t.length," menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side."),t.map((function(n){return n.el})))}return[2,t[0].el]}i=r.filter((function(r){return r.side===n}));if(i.length>=1){if(i.length>1&&e){printIonWarning('menuController queried for a menu on the "'.concat(n,'" side, but ').concat(i.length," menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side."),i.map((function(n){return n.el})))}return[2,i[0].el]}}else if(n!=null){return[2,b((function(r){return r.menuId===n}))]}a=b((function(n){return!n.disabled}));if(a){return[2,a]}return[2,r.length>0?r[0].el:undefined]}}))}))};var f=function(){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,x()];case 1:n.sent();return[2,w()]}}))}))};var v=function(){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,x()];case 1:n.sent();return[2,g()]}}))}))};var d=function(){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,x()];case 1:n.sent();return[2,A()]}}))}))};var _=function(r,e){n.set(r,e)};var m=function(n){if(r.indexOf(n)<0){r.push(n)}};var l=function(n){var e=r.indexOf(n);if(e>-1){r.splice(e,1)}};var h=function(n,r,e,t){return __awaiter(void 0,void 0,void 0,(function(){var i;return __generator(this,(function(a){switch(a.label){case 0:if(A()){return[2,false]}if(!r)return[3,3];return[4,f()];case 1:i=a.sent();if(!(i&&n.el!==i))return[3,3];return[4,i.setOpen(false,false)];case 2:a.sent();a.label=3;case 3:return[2,n._setOpen(r,e,t)]}}))}))};var p=function(r,e){var t=n.get(r);if(!t){throw new Error("animation not registered")}var i=t(e);return i};var w=function(){return b((function(n){return n._isOpen}))};var g=function(){return r.map((function(n){return n.el}))};var A=function(){return r.some((function(n){return n.isAnimating}))};var b=function(n){var e=r.find(n);if(e!==undefined){return e.el}return undefined};var x=function(){return Promise.all(Array.from(document.querySelectorAll("ion-menu")).map((function(n){return new Promise((function(r){return componentOnReady(n,r)}))})))};_("reveal",menuRevealAnimation);_("push",menuPushAnimation);_("overlay",menuOverlayAnimation);doc===null||doc===void 0?void 0:doc.addEventListener("ionBackButton",(function(n){var r=w();if(r){n.detail.register(MENU_BACK_BUTTON_PRIORITY,(function(){return r.close()}))}}));return{registerAnimation:_,get:c,getMenus:v,getOpen:f,isEnabled:s,swipeGesture:o,isAnimating:d,isOpen:u,enable:a,toggle:i,close:t,open:e,_getOpenSync:w,_createAnimation:p,_register:m,_unregister:l,_setOpen:h}};var menuController=createMenuController();export{menuController as m};
|
package/dist/esm-es5/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
export{c as createAnimation}from"./animation-eab5a4ca.js";export{a as LIFECYCLE_DID_ENTER,c as LIFECYCLE_DID_LEAVE,L as LIFECYCLE_WILL_ENTER,b as LIFECYCLE_WILL_LEAVE,d as LIFECYCLE_WILL_UNLOAD,g as getIonPageElement}from"./index-3ad7f18b.js";export{iosTransitionAnimation}from"./ios.transition-4ee1a3af.js";export{mdTransitionAnimation}from"./md.transition-5106a0d2.js";export{g as getTimeGivenProgression}from"./cubic-bezier-fe2083dc.js";export{createGesture}from"./index-39782642.js";export{g as getPlatforms,i as initialize,a as isPlatform}from"./ionic-global-c81d82ab.js";export{c as componentOnReady}from"./helpers-da915de8.js";export{I as IonicSafeString,g as getMode,s as setupConfig}from"./config-49c88215.js";export{o as openURL}from"./theme-01f3f29c.js";export{m as menuController}from"./index-
|
|
4
|
+
export{c as createAnimation}from"./animation-eab5a4ca.js";export{a as LIFECYCLE_DID_ENTER,c as LIFECYCLE_DID_LEAVE,L as LIFECYCLE_WILL_ENTER,b as LIFECYCLE_WILL_LEAVE,d as LIFECYCLE_WILL_UNLOAD,g as getIonPageElement}from"./index-3ad7f18b.js";export{iosTransitionAnimation}from"./ios.transition-4ee1a3af.js";export{mdTransitionAnimation}from"./md.transition-5106a0d2.js";export{g as getTimeGivenProgression}from"./cubic-bezier-fe2083dc.js";export{createGesture}from"./index-39782642.js";export{g as getPlatforms,i as initialize,a as isPlatform}from"./ionic-global-c81d82ab.js";export{c as componentOnReady}from"./helpers-da915de8.js";export{I as IonicSafeString,g as getMode,s as setupConfig}from"./config-49c88215.js";export{o as openURL}from"./theme-01f3f29c.js";export{m as menuController}from"./index-24b48b06.js";export{b as actionSheetController,a as alertController,l as loadingController,m as modalController,p as pickerController,c as popoverController,t as toastController}from"./overlays-ae10d43d.js";import"./index-a5d50daf.js";import"./index-28849c61.js";import"./index-9b0d46f4.js";import"./gesture-controller-314a54f6.js";import"./hardware-back-button-06ef3c3e.js";import"./framework-delegate-63d1a679.js";var IonicSlides=function(e){var o=e.swiper,t=e.extendParams;var s={effect:undefined,direction:"horizontal",initialSlide:0,loop:false,parallax:false,slidesPerView:1,spaceBetween:0,speed:300,slidesPerColumn:1,slidesPerColumnFill:"column",slidesPerGroup:1,centeredSlides:false,slidesOffsetBefore:0,slidesOffsetAfter:0,touchEventsTarget:"container",freeMode:false,freeModeMomentum:true,freeModeMomentumRatio:1,freeModeMomentumBounce:true,freeModeMomentumBounceRatio:1,freeModeMomentumVelocityRatio:1,freeModeSticky:false,freeModeMinimumVelocity:.02,autoHeight:false,setWrapperSize:false,zoom:{maxRatio:3,minRatio:1,toggle:false},touchRatio:1,touchAngle:45,simulateTouch:true,touchStartPreventDefault:false,shortSwipes:true,longSwipes:true,longSwipesRatio:.5,longSwipesMs:300,followFinger:true,threshold:0,touchMoveStopPropagation:true,touchReleaseOnEdges:false,iOSEdgeSwipeDetection:false,iOSEdgeSwipeThreshold:20,resistance:true,resistanceRatio:.85,watchSlidesProgress:false,watchSlidesVisibility:false,preventClicks:true,preventClicksPropagation:true,slideToClickedSlide:false,loopAdditionalSlides:0,noSwiping:true,runCallbacksOnInit:true,coverflowEffect:{rotate:50,stretch:0,depth:100,modifier:1,slideShadows:true},flipEffect:{slideShadows:true,limitRotation:true},cubeEffect:{slideShadows:true,shadow:true,shadowOffset:20,shadowScale:.94},fadeEffect:{crossFade:false},a11y:{prevSlideMessage:"Previous slide",nextSlideMessage:"Next slide",firstSlideMessage:"This is the first slide",lastSlideMessage:"This is the last slide"}};if(o.pagination){s.pagination={type:"bullets",clickable:false,hideOnClick:false}}if(o.scrollbar){s.scrollbar={hide:true}}t(s)};export{IonicSlides};
|