voyager-ionic-core 8.4.0 → 8.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/header.js +21 -2
- package/components/ion-item-sliding.js +3 -1
- package/components/ion-menu.js +30 -3
- package/components/ion-segment.js +3 -2
- package/components/ion-toast.js +2 -2
- package/components/overlays.js +27 -12
- package/components/radio-group.js +8 -2
- package/components/select-modal.js +3 -3
- 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-segment_2.cjs.entry.js +3 -2
- package/dist/cjs/ion-select-modal.cjs.entry.js +4 -4
- 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/segment/segment.js +3 -2
- package/dist/collection/components/select-modal/select-modal.ios.css +186 -0
- package/dist/collection/components/select-modal/select-modal.js +2 -2
- 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-segment_2.entry.js +3 -2
- package/dist/esm/ion-select-modal.entry.js +4 -4
- 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-segment_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-32d44024.system.entry.js +4 -0
- 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-61e3f887.entry.js +4 -0
- 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-c4b53b16.system.entry.js +4 -0
- package/dist/ionic/p-cdc83025.entry.js +4 -0
- 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/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 +95 -25
- package/hydrate/index.mjs +95 -25
- package/package.json +4 -4
- 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/dist/ionic/p-6734db42.system.entry.js +0 -4
- package/dist/ionic/p-adbc4bdf.entry.js +0 -4
- package/dist/ionic/p-c2b74d92.system.entry.js +0 -4
- package/dist/ionic/p-e2252ad6.entry.js +0 -4
|
@@ -272,6 +272,8 @@ export class ItemSliding {
|
|
|
272
272
|
optsWidth = -this.optsWidthLeftSide;
|
|
273
273
|
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
274
274
|
}
|
|
275
|
+
if (openAmount === 0)
|
|
276
|
+
return;
|
|
275
277
|
this.setOpenAmount(openAmount, false);
|
|
276
278
|
}
|
|
277
279
|
onEnd(gesture) {
|
|
@@ -386,7 +388,7 @@ export class ItemSliding {
|
|
|
386
388
|
}
|
|
387
389
|
render() {
|
|
388
390
|
const mode = getIonMode(this);
|
|
389
|
-
return (h(Host, { key: '
|
|
391
|
+
return (h(Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
|
|
390
392
|
[mode]: true,
|
|
391
393
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
392
394
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -9,6 +9,7 @@ import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
|
|
|
9
9
|
import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
|
|
10
10
|
import { menuController } from "../../utils/menu-controller/index";
|
|
11
11
|
import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
|
|
12
|
+
import { isPlatform } from "../../utils/platform";
|
|
12
13
|
import { hostContext } from "../../utils/theme";
|
|
13
14
|
import { config } from "../../global/config";
|
|
14
15
|
import { getIonMode } from "../../global/ionic-global";
|
|
@@ -453,6 +454,22 @@ export class Menu {
|
|
|
453
454
|
}
|
|
454
455
|
beforeAnimation(shouldOpen, role) {
|
|
455
456
|
assert(!this.isAnimating, '_before() should not be called while animating');
|
|
457
|
+
/**
|
|
458
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
459
|
+
* may appear in the wrong position due to the transition (specifically
|
|
460
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
461
|
+
* displayed at the starting position of the elements before the transition
|
|
462
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
463
|
+
* incorrect location.
|
|
464
|
+
*
|
|
465
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
466
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
467
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
468
|
+
* `aria-hidden` is removed.
|
|
469
|
+
*/
|
|
470
|
+
if (isPlatform('android')) {
|
|
471
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
472
|
+
}
|
|
456
473
|
// this places the menu into the correct location before it animates in
|
|
457
474
|
// this css class doesn't actually kick off any animations
|
|
458
475
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -505,6 +522,16 @@ export class Menu {
|
|
|
505
522
|
this.blocker.unblock();
|
|
506
523
|
}
|
|
507
524
|
if (isOpen) {
|
|
525
|
+
/**
|
|
526
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
527
|
+
* may appear in the wrong position due to the transition (specifically
|
|
528
|
+
* `transform` styles). The menu is hidden from screen readers during the
|
|
529
|
+
* transition to prevent this. Once the transition is complete, the menu
|
|
530
|
+
* is shown again.
|
|
531
|
+
*/
|
|
532
|
+
if (isPlatform('android')) {
|
|
533
|
+
this.el.removeAttribute('aria-hidden');
|
|
534
|
+
}
|
|
508
535
|
// emit open event
|
|
509
536
|
this.ionDidOpen.emit();
|
|
510
537
|
/**
|
|
@@ -520,6 +547,7 @@ export class Menu {
|
|
|
520
547
|
document.addEventListener('focus', this.handleFocus, true);
|
|
521
548
|
}
|
|
522
549
|
else {
|
|
550
|
+
this.el.removeAttribute('aria-hidden');
|
|
523
551
|
// remove css classes and unhide content from screen readers
|
|
524
552
|
this.el.classList.remove(SHOW_MENU);
|
|
525
553
|
/**
|
|
@@ -586,14 +614,14 @@ export class Menu {
|
|
|
586
614
|
* the ionBackButton listener in the menu controller
|
|
587
615
|
* will handle closing the menu when Escape is pressed.
|
|
588
616
|
*/
|
|
589
|
-
return (h(Host, { key: '
|
|
617
|
+
return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
590
618
|
[mode]: true,
|
|
591
619
|
[`menu-type-${type}`]: true,
|
|
592
620
|
'menu-enabled': !disabled,
|
|
593
621
|
[`menu-side-${side}`]: true,
|
|
594
622
|
'menu-pane-visible': isPaneVisible,
|
|
595
623
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
596
|
-
} }, h("div", { key: '
|
|
624
|
+
} }, 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" })));
|
|
597
625
|
}
|
|
598
626
|
static get is() { return "ion-menu"; }
|
|
599
627
|
static get encapsulation() { return "shadow"; }
|
|
@@ -151,11 +151,16 @@ export class RadioGroup {
|
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
|
+
/** @internal */
|
|
155
|
+
async setFocus() {
|
|
156
|
+
const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
|
|
157
|
+
radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
|
|
158
|
+
}
|
|
154
159
|
render() {
|
|
155
160
|
const { label, labelId, el, name, value } = this;
|
|
156
161
|
const mode = getIonMode(this);
|
|
157
162
|
renderHiddenInput(true, el, name, value, false);
|
|
158
|
-
return h(Host, { key: '
|
|
163
|
+
return h(Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
|
|
159
164
|
}
|
|
160
165
|
static get is() { return "ion-radio-group"; }
|
|
161
166
|
static get properties() {
|
|
@@ -286,6 +291,30 @@ export class RadioGroup {
|
|
|
286
291
|
}
|
|
287
292
|
}];
|
|
288
293
|
}
|
|
294
|
+
static get methods() {
|
|
295
|
+
return {
|
|
296
|
+
"setFocus": {
|
|
297
|
+
"complexType": {
|
|
298
|
+
"signature": "() => Promise<void>",
|
|
299
|
+
"parameters": [],
|
|
300
|
+
"references": {
|
|
301
|
+
"Promise": {
|
|
302
|
+
"location": "global",
|
|
303
|
+
"id": "global::Promise"
|
|
304
|
+
}
|
|
305
|
+
},
|
|
306
|
+
"return": "Promise<void>"
|
|
307
|
+
},
|
|
308
|
+
"docs": {
|
|
309
|
+
"text": "",
|
|
310
|
+
"tags": [{
|
|
311
|
+
"name": "internal",
|
|
312
|
+
"text": undefined
|
|
313
|
+
}]
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
};
|
|
317
|
+
}
|
|
289
318
|
static get elementRef() { return "el"; }
|
|
290
319
|
static get watchers() {
|
|
291
320
|
return [{
|
|
@@ -149,6 +149,7 @@ export class Segment {
|
|
|
149
149
|
this.emitStyle();
|
|
150
150
|
}
|
|
151
151
|
async componentDidLoad() {
|
|
152
|
+
this.segmentViewEl = this.getSegmentView();
|
|
152
153
|
this.setCheckedClasses();
|
|
153
154
|
/**
|
|
154
155
|
* We need to wait for the buttons to all be rendered
|
|
@@ -529,14 +530,14 @@ export class Segment {
|
|
|
529
530
|
}
|
|
530
531
|
render() {
|
|
531
532
|
const mode = getIonMode(this);
|
|
532
|
-
return (h(Host, { key: '
|
|
533
|
+
return (h(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
533
534
|
[mode]: true,
|
|
534
535
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
535
536
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
536
537
|
'segment-activated': this.activated,
|
|
537
538
|
'segment-disabled': this.disabled,
|
|
538
539
|
'segment-scrollable': this.scrollable,
|
|
539
|
-
}) }, h("slot", { key: '
|
|
540
|
+
}) }, h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
|
|
540
541
|
}
|
|
541
542
|
static get is() { return "ion-segment"; }
|
|
542
543
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,3 +1,189 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
height: 100%;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Convert a font size to a dynamic font size.
|
|
7
|
+
* Fonts that participate in Dynamic Type should use
|
|
8
|
+
* dynamic font sizes.
|
|
9
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
10
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
11
|
+
* convert to a unit other than $baselineUnit.
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* Convert a font size to a dynamic font size but impose
|
|
15
|
+
* a maximum font size.
|
|
16
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
17
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
18
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
19
|
+
* convert to a unit other than $baselineUnit.
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* Convert a font size to a dynamic font size but impose
|
|
23
|
+
* a minimum font size.
|
|
24
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
25
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
26
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
27
|
+
* convert to a unit other than $baselineUnit.
|
|
28
|
+
*/
|
|
29
|
+
/**
|
|
30
|
+
* Convert a font size to a dynamic font size but impose
|
|
31
|
+
* maximum and minimum font sizes.
|
|
32
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
33
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
34
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
35
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
36
|
+
* convert to a unit other than $baselineUnit.
|
|
37
|
+
*/
|
|
38
|
+
/**
|
|
39
|
+
* A heuristic that applies CSS to tablet
|
|
40
|
+
* viewports.
|
|
41
|
+
*
|
|
42
|
+
* Usage:
|
|
43
|
+
* @include tablet-viewport() {
|
|
44
|
+
* :host {
|
|
45
|
+
* background-color: green;
|
|
46
|
+
* }
|
|
47
|
+
* }
|
|
48
|
+
*/
|
|
49
|
+
/**
|
|
50
|
+
* A heuristic that applies CSS to mobile
|
|
51
|
+
* viewports (i.e. phones, not tablets).
|
|
52
|
+
*
|
|
53
|
+
* Usage:
|
|
54
|
+
* @include mobile-viewport() {
|
|
55
|
+
* :host {
|
|
56
|
+
* background-color: blue;
|
|
57
|
+
* }
|
|
58
|
+
* }
|
|
59
|
+
*/
|
|
60
|
+
/**
|
|
61
|
+
* Convert a font size to a dynamic font size.
|
|
62
|
+
* Fonts that participate in Dynamic Type should use
|
|
63
|
+
* dynamic font sizes.
|
|
64
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
65
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
66
|
+
* convert to a unit other than $baselineUnit.
|
|
67
|
+
*/
|
|
68
|
+
/**
|
|
69
|
+
* Convert a font size to a dynamic font size but impose
|
|
70
|
+
* a maximum font size.
|
|
71
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
72
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
73
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
74
|
+
* convert to a unit other than $baselineUnit.
|
|
75
|
+
*/
|
|
76
|
+
/**
|
|
77
|
+
* Convert a font size to a dynamic font size but impose
|
|
78
|
+
* a minimum font size.
|
|
79
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
80
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
81
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
82
|
+
* convert to a unit other than $baselineUnit.
|
|
83
|
+
*/
|
|
84
|
+
/**
|
|
85
|
+
* Convert a font size to a dynamic font size but impose
|
|
86
|
+
* maximum and minimum font sizes.
|
|
87
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
88
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
89
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
90
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
91
|
+
* convert to a unit other than $baselineUnit.
|
|
92
|
+
*/
|
|
93
|
+
/**
|
|
94
|
+
* A heuristic that applies CSS to tablet
|
|
95
|
+
* viewports.
|
|
96
|
+
*
|
|
97
|
+
* Usage:
|
|
98
|
+
* @include tablet-viewport() {
|
|
99
|
+
* :host {
|
|
100
|
+
* background-color: green;
|
|
101
|
+
* }
|
|
102
|
+
* }
|
|
103
|
+
*/
|
|
104
|
+
/**
|
|
105
|
+
* A heuristic that applies CSS to mobile
|
|
106
|
+
* viewports (i.e. phones, not tablets).
|
|
107
|
+
*
|
|
108
|
+
* Usage:
|
|
109
|
+
* @include mobile-viewport() {
|
|
110
|
+
* :host {
|
|
111
|
+
* background-color: blue;
|
|
112
|
+
* }
|
|
113
|
+
* }
|
|
114
|
+
*/
|
|
115
|
+
/**
|
|
116
|
+
* Convert a font size to a dynamic font size.
|
|
117
|
+
* Fonts that participate in Dynamic Type should use
|
|
118
|
+
* dynamic font sizes.
|
|
119
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
120
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
121
|
+
* convert to a unit other than $baselineUnit.
|
|
122
|
+
*/
|
|
123
|
+
/**
|
|
124
|
+
* Convert a font size to a dynamic font size but impose
|
|
125
|
+
* a maximum font size.
|
|
126
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
127
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
128
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
129
|
+
* convert to a unit other than $baselineUnit.
|
|
130
|
+
*/
|
|
131
|
+
/**
|
|
132
|
+
* Convert a font size to a dynamic font size but impose
|
|
133
|
+
* a minimum font size.
|
|
134
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
135
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
136
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
137
|
+
* convert to a unit other than $baselineUnit.
|
|
138
|
+
*/
|
|
139
|
+
/**
|
|
140
|
+
* Convert a font size to a dynamic font size but impose
|
|
141
|
+
* maximum and minimum font sizes.
|
|
142
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
143
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
144
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
145
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
146
|
+
* convert to a unit other than $baselineUnit.
|
|
147
|
+
*/
|
|
148
|
+
/**
|
|
149
|
+
* A heuristic that applies CSS to tablet
|
|
150
|
+
* viewports.
|
|
151
|
+
*
|
|
152
|
+
* Usage:
|
|
153
|
+
* @include tablet-viewport() {
|
|
154
|
+
* :host {
|
|
155
|
+
* background-color: green;
|
|
156
|
+
* }
|
|
157
|
+
* }
|
|
158
|
+
*/
|
|
159
|
+
/**
|
|
160
|
+
* A heuristic that applies CSS to mobile
|
|
161
|
+
* viewports (i.e. phones, not tablets).
|
|
162
|
+
*
|
|
163
|
+
* Usage:
|
|
164
|
+
* @include mobile-viewport() {
|
|
165
|
+
* :host {
|
|
166
|
+
* background-color: blue;
|
|
167
|
+
* }
|
|
168
|
+
* }
|
|
169
|
+
*/
|
|
170
|
+
ion-item {
|
|
171
|
+
--inner-padding-end: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* The bottom border of the item should only be displayed
|
|
176
|
+
* under the text and not the radio icon.
|
|
177
|
+
*/
|
|
178
|
+
ion-radio::after {
|
|
179
|
+
bottom: 0;
|
|
180
|
+
position: absolute;
|
|
181
|
+
width: calc(100% - 0.9375rem - 16px); /* Adjust width based on the shift */
|
|
182
|
+
border-width: 0px 0px 0.55px 0px;
|
|
183
|
+
border-style: solid;
|
|
184
|
+
border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
|
|
185
|
+
content: "";
|
|
186
|
+
}
|
|
187
|
+
ion-radio::after {
|
|
188
|
+
inset-inline-start: calc(0.9375rem + 16px);
|
|
3
189
|
}
|
|
@@ -51,7 +51,7 @@ export class SelectModal {
|
|
|
51
51
|
}
|
|
52
52
|
renderRadioOptions() {
|
|
53
53
|
const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
54
|
-
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { class: Object.assign({
|
|
54
|
+
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
|
|
55
55
|
// TODO FW-4784
|
|
56
56
|
'item-radio-checked': option.value === checked
|
|
57
57
|
}, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
|
|
@@ -77,7 +77,7 @@ export class SelectModal {
|
|
|
77
77
|
} }, option.text))));
|
|
78
78
|
}
|
|
79
79
|
render() {
|
|
80
|
-
return (h(Host, { key: '
|
|
80
|
+
return (h(Host, { key: '4df42c447b4026d09d9231f09dc4bdae9a8cfe4a', class: getIonMode(this) }, h("ion-header", { key: '211c4e869b858867f3d60637e570aeb01de41de7' }, h("ion-toolbar", { key: 'dc4b151331aecbaaaafb460802ee9b689493601d' }, this.header !== undefined && h("ion-title", { key: 'ba1347a59ae0a5c6770c239b5ec02a536a445bd1' }, this.header), h("ion-buttons", { key: '43c98fd25d7e7f54b94b24e53535c6d5ba599892', slot: "end" }, h("ion-button", { key: '51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'fe721b09f80555856211f7e40dbfc31a533acae1' }, h("ion-list", { key: 'd0b932d137136958d896408fb2fa571023775b92' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
81
81
|
}
|
|
82
82
|
static get is() { return "ion-select-modal"; }
|
|
83
83
|
static get encapsulation() { return "scoped"; }
|
|
@@ -136,6 +136,7 @@
|
|
|
136
136
|
border-color: var(--border-color);
|
|
137
137
|
background: var(--background);
|
|
138
138
|
box-shadow: var(--box-shadow);
|
|
139
|
+
pointer-events: auto;
|
|
139
140
|
}
|
|
140
141
|
.toast-wrapper {
|
|
141
142
|
inset-inline-start: var(--start);
|
|
@@ -155,7 +156,6 @@
|
|
|
155
156
|
.toast-container {
|
|
156
157
|
display: flex;
|
|
157
158
|
align-items: center;
|
|
158
|
-
pointer-events: auto;
|
|
159
159
|
height: inherit;
|
|
160
160
|
min-height: inherit;
|
|
161
161
|
max-height: inherit;
|
|
@@ -136,6 +136,7 @@
|
|
|
136
136
|
border-color: var(--border-color);
|
|
137
137
|
background: var(--background);
|
|
138
138
|
box-shadow: var(--box-shadow);
|
|
139
|
+
pointer-events: auto;
|
|
139
140
|
}
|
|
140
141
|
.toast-wrapper {
|
|
141
142
|
inset-inline-start: var(--start);
|
|
@@ -155,7 +156,6 @@
|
|
|
155
156
|
.toast-container {
|
|
156
157
|
display: flex;
|
|
157
158
|
align-items: center;
|
|
158
|
-
pointer-events: auto;
|
|
159
159
|
height: inherit;
|
|
160
160
|
min-height: inherit;
|
|
161
161
|
max-height: inherit;
|
|
@@ -14,7 +14,7 @@ import { focusVisibleElement } from "./helpers";
|
|
|
14
14
|
* Note: We need this distinction because `disabled="false"` is
|
|
15
15
|
* valid usage for the disabled property on ion-button.
|
|
16
16
|
*/
|
|
17
|
-
export 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])';
|
|
17
|
+
export 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])';
|
|
18
18
|
/**
|
|
19
19
|
* Focuses the first descendant in a context
|
|
20
20
|
* that can receive focus. If none exists,
|
|
@@ -69,7 +69,13 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
|
|
|
69
69
|
elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
|
|
70
70
|
}
|
|
71
71
|
if (elementToFocus) {
|
|
72
|
-
|
|
72
|
+
const radioGroup = elementToFocus.closest('ion-radio-group');
|
|
73
|
+
if (radioGroup) {
|
|
74
|
+
radioGroup.setFocus();
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
focusVisibleElement(elementToFocus);
|
|
78
|
+
}
|
|
73
79
|
}
|
|
74
80
|
else {
|
|
75
81
|
// Focus fallback element instead of letting focus escape
|
|
@@ -11,6 +11,7 @@ import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
|
|
|
11
11
|
import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
|
|
12
12
|
import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
|
|
13
13
|
import { printIonWarning } from "./logging";
|
|
14
|
+
import { isPlatform } from "./platform";
|
|
14
15
|
let lastOverlayIndex = 0;
|
|
15
16
|
let lastId = 0;
|
|
16
17
|
export const activeAnimations = new WeakMap();
|
|
@@ -810,21 +811,30 @@ export const createTriggerController = () => {
|
|
|
810
811
|
* like TalkBack do not announce or interact with the content until the
|
|
811
812
|
* animation is complete, avoiding confusion for users.
|
|
812
813
|
*
|
|
813
|
-
*
|
|
814
|
-
* in
|
|
815
|
-
* styles)
|
|
816
|
-
*
|
|
814
|
+
* When the overlay is presented on an Android device, TalkBack's focus rings
|
|
815
|
+
* may appear in the wrong position due to the transition (specifically
|
|
816
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
817
|
+
* displayed at the starting position of the elements before the transition
|
|
818
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
819
|
+
* incorrect location.
|
|
820
|
+
*
|
|
821
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
822
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
823
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
824
|
+
* `aria-hidden` is removed.
|
|
817
825
|
*
|
|
818
826
|
* @param overlay - The overlay that is being animated.
|
|
819
827
|
*/
|
|
820
828
|
const hideAnimatingOverlayFromScreenReaders = (overlay) => {
|
|
821
829
|
if (doc === undefined)
|
|
822
830
|
return;
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
831
|
+
if (isPlatform('android')) {
|
|
832
|
+
/**
|
|
833
|
+
* Once the animation is complete, this attribute will be removed.
|
|
834
|
+
* This is done at the end of the `present` method.
|
|
835
|
+
*/
|
|
836
|
+
overlay.setAttribute('aria-hidden', 'true');
|
|
837
|
+
}
|
|
828
838
|
};
|
|
829
839
|
/**
|
|
830
840
|
* Ensure that underlying overlays have aria-hidden if necessary so that screen readers
|
package/dist/docs.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -12,7 +12,7 @@ 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
14
|
export { m as menuController } from './index-24b48b06.js';
|
|
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-
|
|
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-e7b9d6d9.js';
|
|
16
16
|
import './index-a5d50daf.js';
|
|
17
17
|
import './index-28849c61.js';
|
|
18
18
|
import './index-9b0d46f4.js';
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, e as readTask, h, f as Host, i
|
|
|
5
5
|
import { c as createButtonActiveGesture } from './button-active-f6503382.js';
|
|
6
6
|
import { r as raf } from './helpers-da915de8.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
8
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-e7b9d6d9.js';
|
|
9
9
|
import { g as getClassMap } from './theme-01f3f29c.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
11
11
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|
|
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
|
|
|
6
6
|
import { c as createButtonActiveGesture } from './button-active-f6503382.js';
|
|
7
7
|
import { r as raf } from './helpers-da915de8.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
9
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-
|
|
9
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-e7b9d6d9.js';
|
|
10
10
|
import { g as getClassMap } from './theme-01f3f29c.js';
|
|
11
11
|
import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
12
12
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|
|
@@ -797,13 +797,32 @@ mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
|
|
|
797
797
|
};
|
|
798
798
|
const setHeaderActive = (headerIndex, active = true) => {
|
|
799
799
|
const headerEl = headerIndex.el;
|
|
800
|
+
const toolbars = headerIndex.toolbars;
|
|
801
|
+
const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
|
|
800
802
|
if (active) {
|
|
801
803
|
headerEl.classList.remove('header-collapse-condense-inactive');
|
|
802
|
-
|
|
804
|
+
ionTitles.forEach((ionTitle) => {
|
|
805
|
+
if (ionTitle) {
|
|
806
|
+
ionTitle.removeAttribute('aria-hidden');
|
|
807
|
+
}
|
|
808
|
+
});
|
|
803
809
|
}
|
|
804
810
|
else {
|
|
805
811
|
headerEl.classList.add('header-collapse-condense-inactive');
|
|
806
|
-
|
|
812
|
+
/**
|
|
813
|
+
* The small title should only be accessed by screen readers
|
|
814
|
+
* when the large title collapses into the small title due
|
|
815
|
+
* to scrolling.
|
|
816
|
+
*
|
|
817
|
+
* Originally, the header was given `aria-hidden="true"`
|
|
818
|
+
* but this caused issues with screen readers not being
|
|
819
|
+
* able to access any focusable elements within the header.
|
|
820
|
+
*/
|
|
821
|
+
ionTitles.forEach((ionTitle) => {
|
|
822
|
+
if (ionTitle) {
|
|
823
|
+
ionTitle.setAttribute('aria-hidden', 'true');
|
|
824
|
+
}
|
|
825
|
+
});
|
|
807
826
|
}
|
|
808
827
|
};
|
|
809
828
|
const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
|
|
@@ -11,7 +11,7 @@ import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSh
|
|
|
11
11
|
import { b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
12
12
|
import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as convertToArrayOfNumbers, u as convertDataToISO, x as getToday, y as getClosestValidDate, z as generateMonths, A as getNumDaysInMonth, B as getCombinedDateColumnData, C as getMonthColumnData, D as getDayColumnData, E as getYearColumnData, F as isMonthFirstLocale, G as getTimeColumnsData, H as isLocaleDayPeriodRTL, I as getDaysOfWeek, J as getMonthAndYear, K as getDaysOfMonth, L as getHourCycle, M as getLocalizedTime, N as getLocalizedDateTime, O as formatValue, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-ae11fd43.js';
|
|
13
13
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
14
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-
|
|
14
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-e7b9d6d9.js';
|
|
15
15
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|
|
16
16
|
import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-ac164e4c.js';
|
|
17
17
|
import './index-a5d50daf.js';
|
|
@@ -373,6 +373,8 @@ const ItemSliding = class {
|
|
|
373
373
|
optsWidth = -this.optsWidthLeftSide;
|
|
374
374
|
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
|
|
375
375
|
}
|
|
376
|
+
if (openAmount === 0)
|
|
377
|
+
return;
|
|
376
378
|
this.setOpenAmount(openAmount, false);
|
|
377
379
|
}
|
|
378
380
|
onEnd(gesture) {
|
|
@@ -487,7 +489,7 @@ const ItemSliding = class {
|
|
|
487
489
|
}
|
|
488
490
|
render() {
|
|
489
491
|
const mode = getIonMode(this);
|
|
490
|
-
return (h(Host, { key: '
|
|
492
|
+
return (h(Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
|
|
491
493
|
[mode]: true,
|
|
492
494
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
493
495
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, f as Host, i as getElement
|
|
|
5
5
|
import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-49c88215.js';
|
|
6
6
|
import { r as raf } from './helpers-da915de8.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
8
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-e7b9d6d9.js';
|
|
9
9
|
import { g as getClassMap } from './theme-01f3f29c.js';
|
|
10
10
|
import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
11
11
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|