@ionic/core 8.7.3-dev.11755285796.12743331 → 8.7.3-dev.11755600455.1e79c35a
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/checkbox.js +1 -1
- package/components/ion-datetime.js +4 -3
- package/components/ion-refresher.js +1 -18
- package/components/overlays.js +3 -97
- package/components/picker-column-option.js +3 -3
- package/components/picker-column.js +3 -39
- 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-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +3 -3
- package/dist/cjs/ion-picker-column.cjs.entry.js +3 -39
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-refresher_2.cjs.entry.js +1 -18
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/{overlays-CglR7j-u.js → overlays-DUsEBICv.js} +2 -96
- package/dist/collection/components/checkbox/checkbox.js +1 -1
- package/dist/collection/components/datetime/datetime.js +4 -3
- package/dist/collection/components/picker-column/picker-column.js +3 -39
- package/dist/collection/components/picker-column-option/picker-column-option.ios.css +2 -2
- package/dist/collection/components/picker-column-option/picker-column-option.js +1 -1
- package/dist/collection/components/picker-column-option/picker-column-option.md.css +2 -2
- package/dist/collection/components/refresher/refresher.js +1 -18
- package/dist/collection/utils/overlays.js +2 -97
- 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-checkbox.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +4 -4
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-picker-column-option.entry.js +3 -3
- package/dist/esm/ion-picker-column.entry.js +3 -39
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-refresher_2.entry.js +1 -18
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/{overlays-ZX_4-t_r.js → overlays-B_dsLNe8.js} +3 -97
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-ac434970.entry.js → p-07d8f62a.entry.js} +1 -1
- package/dist/ionic/{p-92e8f208.entry.js → p-09ed68cf.entry.js} +1 -1
- package/dist/ionic/p-1a91f317.entry.js +4 -0
- package/dist/ionic/{p-c575e7ce.entry.js → p-57bb1214.entry.js} +1 -1
- package/dist/ionic/{p-ab33ef20.entry.js → p-698fb72c.entry.js} +1 -1
- package/dist/ionic/{p-8d96a0cd.entry.js → p-7ed24ba0.entry.js} +1 -1
- package/dist/ionic/{p-91d6ccb0.entry.js → p-84236acb.entry.js} +1 -1
- package/dist/ionic/p-8888efe4.entry.js +4 -0
- package/dist/ionic/{p-7bac2c5f.entry.js → p-8b54aa01.entry.js} +1 -1
- package/dist/ionic/p-8bfe00f3.entry.js +4 -0
- package/dist/ionic/{p-982fe1c4.entry.js → p-98d0823e.entry.js} +1 -1
- package/dist/ionic/{p-f2884bc2.entry.js → p-9c6fddc6.entry.js} +1 -1
- package/dist/ionic/p-C3MD7jSK.js +4 -0
- package/dist/ionic/p-ac2be9d6.entry.js +4 -0
- package/dist/ionic/p-b292804d.entry.js +4 -0
- package/dist/types/components/picker-column/picker-column.d.ts +0 -7
- package/hydrate/index.js +13 -160
- package/hydrate/index.mjs +13 -160
- package/package.json +1 -1
- package/dist/ionic/p-1d5b934a.entry.js +0 -4
- package/dist/ionic/p-29032e49.entry.js +0 -4
- package/dist/ionic/p-8cdb4ff5.entry.js +0 -4
- package/dist/ionic/p-CSwZyt05.js +0 -4
- package/dist/ionic/p-c836e1a2.entry.js +0 -4
- package/dist/ionic/p-f456d176.entry.js +0 -4
package/components/checkbox.js
CHANGED
|
@@ -164,7 +164,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
|
|
|
164
164
|
}), onClick: this.onClick }, h("label", { key: 'f025cec5ff08e8be4487b9cc0324616ca5dfae2a', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'dc53f7e4e240dc2e18556e6350df2b5c3169f553', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'a625e9b50c3b617de8bbbfd624d772454fecaf2d', class: {
|
|
165
165
|
'label-text-wrapper': true,
|
|
166
166
|
'label-text-wrapper-hidden': !hasLabelContent,
|
|
167
|
-
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, h("svg", { key: '
|
|
167
|
+
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, h("svg", { key: '13a8aac044d46dc99e3b60a1a643785511f216ac', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
|
|
168
168
|
}
|
|
169
169
|
getSVGPath(mode, indeterminate) {
|
|
170
170
|
let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
|
|
@@ -5,6 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from
|
|
|
5
5
|
import { startFocusVisible } from './focus-visible.js';
|
|
6
6
|
import { r as raf, g as getElementRoot, e as renderHiddenInput } from './helpers.js';
|
|
7
7
|
import { a as printIonError, p as printIonWarning } from './index4.js';
|
|
8
|
+
import { F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
|
|
8
9
|
import { i as isRTL } from './dir.js';
|
|
9
10
|
import { c as createColorClasses } from './theme.js';
|
|
10
11
|
import { c as chevronDown, f as caretUpSharp, g as chevronForward, h as caretDownSharp, a as chevronBack } from './index6.js';
|
|
@@ -1302,7 +1303,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1302
1303
|
const renderArray = forcePresentation === 'time-date'
|
|
1303
1304
|
? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
|
|
1304
1305
|
: [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
|
|
1305
|
-
return h("ion-picker",
|
|
1306
|
+
return h("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
|
|
1306
1307
|
}
|
|
1307
1308
|
renderDatePickerColumns(forcePresentation) {
|
|
1308
1309
|
return forcePresentation === 'date-time' || forcePresentation === 'time-date'
|
|
@@ -1859,7 +1860,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1859
1860
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1860
1861
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1861
1862
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1862
|
-
return (h(Host, { key: '
|
|
1863
|
+
return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1863
1864
|
[mode]: true,
|
|
1864
1865
|
['datetime-readonly']: readonly,
|
|
1865
1866
|
['datetime-disabled']: disabled,
|
|
@@ -1869,7 +1870,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1869
1870
|
[`datetime-size-${size}`]: true,
|
|
1870
1871
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1871
1872
|
[`datetime-grid`]: isGridStyle,
|
|
1872
|
-
})) }, h("div", { key: '
|
|
1873
|
+
})) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1873
1874
|
}
|
|
1874
1875
|
get el() { return this; }
|
|
1875
1876
|
static get watchers() { return {
|
|
@@ -182,14 +182,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
|
|
|
182
182
|
this.beginRefresh();
|
|
183
183
|
this.didRefresh = true;
|
|
184
184
|
hapticImpact({ style: ImpactStyle.Light });
|
|
185
|
-
/**
|
|
186
|
-
* Clear focus from any active element to prevent scroll jumps
|
|
187
|
-
* when the refresh completes
|
|
188
|
-
*/
|
|
189
|
-
const activeElement = document.activeElement;
|
|
190
|
-
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
191
|
-
activeElement.blur();
|
|
192
|
-
}
|
|
193
185
|
/**
|
|
194
186
|
* Translate the content element otherwise when pointer is removed
|
|
195
187
|
* from screen the scroll content will bounce back over the refresher
|
|
@@ -605,15 +597,6 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
|
|
|
605
597
|
this.state = 8 /* RefresherState.Refreshing */;
|
|
606
598
|
// place the content in a hangout position while it thinks
|
|
607
599
|
this.setCss(this.pullMin, this.snapbackDuration, true, '');
|
|
608
|
-
/**
|
|
609
|
-
* Clear focus from any active element to prevent the browser
|
|
610
|
-
* from restoring focus and causing scroll jumps after refresh.
|
|
611
|
-
* This ensures the view stays at the top after refresh completes.
|
|
612
|
-
*/
|
|
613
|
-
const activeElement = document.activeElement;
|
|
614
|
-
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
615
|
-
activeElement.blur();
|
|
616
|
-
}
|
|
617
600
|
// emit "refresh" because it was pulled down far enough
|
|
618
601
|
// and they let go to begin refreshing
|
|
619
602
|
this.ionRefresh.emit({
|
|
@@ -696,7 +679,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class Refresher extends HTMLE
|
|
|
696
679
|
}
|
|
697
680
|
render() {
|
|
698
681
|
const mode = getIonMode(this);
|
|
699
|
-
return (h(Host, { key: '
|
|
682
|
+
return (h(Host, { key: '8c7a5cc32da02a9cbeaa954258148683f60a6d1b', slot: "fixed", class: {
|
|
700
683
|
[mode]: true,
|
|
701
684
|
// Used internally for styling
|
|
702
685
|
[`refresher-${mode}`]: true,
|
package/components/overlays.js
CHANGED
|
@@ -5,7 +5,7 @@ import { d as doc } from './index9.js';
|
|
|
5
5
|
import { h as focusVisibleElement, c as componentOnReady, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
|
|
6
6
|
import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button.js';
|
|
7
7
|
import { c as config, a as printIonError, p as printIonWarning } from './index4.js';
|
|
8
|
-
import { b as getIonMode
|
|
8
|
+
import { b as getIonMode } from './ionic-global.js';
|
|
9
9
|
import { C as CoreDelegate } from './framework-delegate.js';
|
|
10
10
|
import { B as BACKDROP_NO_SCROLL } from './gesture-controller.js';
|
|
11
11
|
|
|
@@ -496,9 +496,11 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
496
496
|
}
|
|
497
497
|
if (hidden) {
|
|
498
498
|
viewContainer.setAttribute('aria-hidden', 'true');
|
|
499
|
+
viewContainer.setAttribute('inert', '');
|
|
499
500
|
}
|
|
500
501
|
else {
|
|
501
502
|
viewContainer.removeAttribute('aria-hidden');
|
|
503
|
+
viewContainer.removeAttribute('inert');
|
|
502
504
|
}
|
|
503
505
|
};
|
|
504
506
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
@@ -517,8 +519,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
517
519
|
setRootAriaHidden(true);
|
|
518
520
|
document.body.classList.add(BACKDROP_NO_SCROLL);
|
|
519
521
|
}
|
|
520
|
-
hideUnderlyingOverlaysFromScreenReaders(overlay.el);
|
|
521
|
-
hideAnimatingOverlayFromScreenReaders(overlay.el);
|
|
522
522
|
overlay.presented = true;
|
|
523
523
|
overlay.willPresent.emit();
|
|
524
524
|
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
@@ -644,12 +644,6 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
644
644
|
}
|
|
645
645
|
overlay.presented = false;
|
|
646
646
|
try {
|
|
647
|
-
/**
|
|
648
|
-
* There is no need to show the overlay to screen readers during
|
|
649
|
-
* the dismiss animation. This is because the overlay will be removed
|
|
650
|
-
* from the DOM after the animation is complete.
|
|
651
|
-
*/
|
|
652
|
-
hideAnimatingOverlayFromScreenReaders(overlay.el);
|
|
653
647
|
// Overlay contents should not be clickable during dismiss
|
|
654
648
|
overlay.el.style.setProperty('pointer-events', 'none');
|
|
655
649
|
overlay.willDismiss.emit({ data, role });
|
|
@@ -688,7 +682,6 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
688
682
|
printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
|
|
689
683
|
}
|
|
690
684
|
overlay.el.remove();
|
|
691
|
-
revealOverlaysToScreenReaders();
|
|
692
685
|
return true;
|
|
693
686
|
};
|
|
694
687
|
const getAppRoot = (doc) => {
|
|
@@ -884,93 +877,6 @@ const createTriggerController = () => {
|
|
|
884
877
|
removeClickListener,
|
|
885
878
|
};
|
|
886
879
|
};
|
|
887
|
-
/**
|
|
888
|
-
* The overlay that is being animated also needs to hide from screen
|
|
889
|
-
* readers during its animation. This ensures that assistive technologies
|
|
890
|
-
* like TalkBack do not announce or interact with the content until the
|
|
891
|
-
* animation is complete, avoiding confusion for users.
|
|
892
|
-
*
|
|
893
|
-
* When the overlay is presented on an Android device, TalkBack's focus rings
|
|
894
|
-
* may appear in the wrong position due to the transition (specifically
|
|
895
|
-
* `transform` styles). This occurs because the focus rings are initially
|
|
896
|
-
* displayed at the starting position of the elements before the transition
|
|
897
|
-
* begins. This workaround ensures the focus rings do not appear in the
|
|
898
|
-
* incorrect location.
|
|
899
|
-
*
|
|
900
|
-
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
901
|
-
* the overlays cannot be accessed by screen readers. This is due to
|
|
902
|
-
* VoiceOver not being able to update the accessibility tree when the
|
|
903
|
-
* `aria-hidden` is removed.
|
|
904
|
-
*
|
|
905
|
-
* @param overlay - The overlay that is being animated.
|
|
906
|
-
*/
|
|
907
|
-
const hideAnimatingOverlayFromScreenReaders = (overlay) => {
|
|
908
|
-
if (doc === undefined)
|
|
909
|
-
return;
|
|
910
|
-
if (isPlatform('android')) {
|
|
911
|
-
/**
|
|
912
|
-
* Once the animation is complete, this attribute will be removed.
|
|
913
|
-
* This is done at the end of the `present` method.
|
|
914
|
-
*/
|
|
915
|
-
overlay.setAttribute('aria-hidden', 'true');
|
|
916
|
-
}
|
|
917
|
-
};
|
|
918
|
-
/**
|
|
919
|
-
* Ensure that underlying overlays have aria-hidden if necessary so that screen readers
|
|
920
|
-
* cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
|
|
921
|
-
* events here because those events do not fire when the screen readers moves to a non-focusable
|
|
922
|
-
* element such as text.
|
|
923
|
-
* Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
|
|
924
|
-
*
|
|
925
|
-
* @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
|
|
926
|
-
* fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
|
|
927
|
-
*/
|
|
928
|
-
const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
|
|
929
|
-
var _a;
|
|
930
|
-
if (doc === undefined)
|
|
931
|
-
return;
|
|
932
|
-
const overlays = getPresentedOverlays(doc);
|
|
933
|
-
for (let i = overlays.length - 1; i >= 0; i--) {
|
|
934
|
-
const presentedOverlay = overlays[i];
|
|
935
|
-
const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
|
|
936
|
-
/**
|
|
937
|
-
* If next overlay has aria-hidden then all remaining overlays will have it too.
|
|
938
|
-
* Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
|
|
939
|
-
* should not have aria-hidden either so focus can remain in the current overlay.
|
|
940
|
-
*/
|
|
941
|
-
if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
|
|
942
|
-
presentedOverlay.setAttribute('aria-hidden', 'true');
|
|
943
|
-
}
|
|
944
|
-
}
|
|
945
|
-
};
|
|
946
|
-
/**
|
|
947
|
-
* When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
|
|
948
|
-
* If the top-most overlay is a Toast we potentially need to reveal more overlays since
|
|
949
|
-
* focus is never automatically moved to the Toast.
|
|
950
|
-
*/
|
|
951
|
-
const revealOverlaysToScreenReaders = () => {
|
|
952
|
-
if (doc === undefined)
|
|
953
|
-
return;
|
|
954
|
-
const overlays = getPresentedOverlays(doc);
|
|
955
|
-
for (let i = overlays.length - 1; i >= 0; i--) {
|
|
956
|
-
const currentOverlay = overlays[i];
|
|
957
|
-
/**
|
|
958
|
-
* If the current we are looking at is a Toast then we can remove aria-hidden.
|
|
959
|
-
* However, we potentially need to keep looking at the overlay stack because there
|
|
960
|
-
* could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
|
|
961
|
-
* overlay too so focus can move there since focus is never automatically moved to the Toast.
|
|
962
|
-
*/
|
|
963
|
-
currentOverlay.removeAttribute('aria-hidden');
|
|
964
|
-
/**
|
|
965
|
-
* If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
|
|
966
|
-
* since this overlay should always receive focus. As a result, all underlying overlays should still
|
|
967
|
-
* be hidden from screen readers.
|
|
968
|
-
*/
|
|
969
|
-
if (currentOverlay.tagName !== 'ION-TOAST') {
|
|
970
|
-
break;
|
|
971
|
-
}
|
|
972
|
-
}
|
|
973
|
-
};
|
|
974
880
|
const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
|
|
975
881
|
|
|
976
882
|
export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, focusLastDescendant as q, safeCall as s, toastController as t };
|
|
@@ -6,9 +6,9 @@ import { d as inheritAttributes } from './helpers.js';
|
|
|
6
6
|
import { c as createColorClasses } from './theme.js';
|
|
7
7
|
import { b as getIonMode } from './ionic-global.js';
|
|
8
8
|
|
|
9
|
-
const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
|
|
9
|
+
const pickerColumnOptionIosCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}";
|
|
10
10
|
|
|
11
|
-
const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
|
|
11
|
+
const pickerColumnOptionMdCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
|
|
12
12
|
|
|
13
13
|
const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOption extends HTMLElement {
|
|
14
14
|
constructor() {
|
|
@@ -102,7 +102,7 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
|
|
|
102
102
|
return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
|
|
103
103
|
[mode]: true,
|
|
104
104
|
['option-disabled']: disabled,
|
|
105
|
-
}) }, h("
|
|
105
|
+
}) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
|
|
106
106
|
}
|
|
107
107
|
get el() { return this; }
|
|
108
108
|
static get watchers() { return {
|
|
@@ -409,23 +409,6 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
|
|
|
409
409
|
var _a;
|
|
410
410
|
return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
|
|
411
411
|
};
|
|
412
|
-
/**
|
|
413
|
-
* Render an element that overlays the column. This element is for assistive
|
|
414
|
-
* tech to allow users to navigate the column up/down. This element should receive
|
|
415
|
-
* focus as it listens for synthesized keyboard events as required by the
|
|
416
|
-
* slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
|
|
417
|
-
*/
|
|
418
|
-
this.renderAssistiveFocusable = () => {
|
|
419
|
-
const { activeItem } = this;
|
|
420
|
-
const valueText = this.getOptionValueText(activeItem);
|
|
421
|
-
/**
|
|
422
|
-
* When using the picker, the valuetext provides important context that valuenow
|
|
423
|
-
* does not. Additionally, using non-zero valuemin/valuemax values can cause
|
|
424
|
-
* WebKit to incorrectly announce numeric valuetext values (such as a year
|
|
425
|
-
* like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
|
|
426
|
-
*/
|
|
427
|
-
return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
|
|
428
|
-
};
|
|
429
412
|
}
|
|
430
413
|
ariaLabelChanged(newValue) {
|
|
431
414
|
this.ariaLabel = newValue;
|
|
@@ -566,33 +549,14 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
|
|
|
566
549
|
render() {
|
|
567
550
|
const { color, disabled, isActive, numericInput } = this;
|
|
568
551
|
const mode = getIonMode(this);
|
|
569
|
-
return (h(Host, { key: '
|
|
552
|
+
return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
|
|
570
553
|
[mode]: true,
|
|
571
554
|
['picker-column-active']: isActive,
|
|
572
555
|
['picker-column-numeric-input']: numericInput,
|
|
573
556
|
['picker-column-disabled']: disabled,
|
|
574
|
-
}) },
|
|
557
|
+
}) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
|
|
575
558
|
this.scrollEl = el;
|
|
576
|
-
},
|
|
577
|
-
/**
|
|
578
|
-
* When an element has an overlay scroll style and
|
|
579
|
-
* a fixed height, Firefox will focus the scrollable
|
|
580
|
-
* container if the content exceeds the container's
|
|
581
|
-
* dimensions.
|
|
582
|
-
*
|
|
583
|
-
* This causes keyboard navigation to focus to this
|
|
584
|
-
* element instead of going to the next element in
|
|
585
|
-
* the tab order.
|
|
586
|
-
*
|
|
587
|
-
* The desired behavior is for the user to be able to
|
|
588
|
-
* focus the assistive focusable element and tab to
|
|
589
|
-
* the next element in the tab order. Instead of tabbing
|
|
590
|
-
* to this element.
|
|
591
|
-
*
|
|
592
|
-
* To prevent this, we set the tabIndex to -1. This
|
|
593
|
-
* will match the behavior of the other browsers.
|
|
594
|
-
*/
|
|
595
|
-
tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
559
|
+
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
|
|
596
560
|
}
|
|
597
561
|
get el() { return this; }
|
|
598
562
|
static get watchers() { return {
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
|
|
|
15
15
|
var config = require('./config-CKhELRRu.js');
|
|
16
16
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
17
17
|
var index$3 = require('./index-D24wggHR.js');
|
|
18
|
-
var overlays = require('./overlays-
|
|
18
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
19
19
|
require('./index-DkNv4J_i.js');
|
|
20
20
|
require('./gesture-controller-dtqlP_q4.js');
|
|
21
21
|
require('./hardware-back-button-BxdNu76F.js');
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var buttonActive = require('./button-active-BzZenWWH.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
|
|
|
8
8
|
var buttonActive = require('./button-active-BzZenWWH.js');
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
11
|
-
var overlays = require('./overlays-
|
|
11
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
12
12
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
13
13
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
14
14
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -164,7 +164,7 @@ const Checkbox = class {
|
|
|
164
164
|
}), onClick: this.onClick }, index.h("label", { key: 'f025cec5ff08e8be4487b9cc0324616ca5dfae2a', class: "checkbox-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: 'dc53f7e4e240dc2e18556e6350df2b5c3169f553', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), index.h("div", { key: 'a625e9b50c3b617de8bbbfd624d772454fecaf2d', class: {
|
|
165
165
|
'label-text-wrapper': true,
|
|
166
166
|
'label-text-wrapper-hidden': !hasLabelContent,
|
|
167
|
-
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), index.h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, index.h("svg", { key: '
|
|
167
|
+
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), index.h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, index.h("svg", { key: '13a8aac044d46dc99e3b60a1a643785511f216ac', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
|
|
168
168
|
}
|
|
169
169
|
getSVGPath(mode, indeterminate) {
|
|
170
170
|
let path = indeterminate ? (index.h("path", { d: "M6 12L18 12", part: "mark" })) : (index.h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var focusVisible = require('./focus-visible-CCvKiLh3.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
9
10
|
var dir = require('./dir-Cn0z1rJH.js');
|
|
10
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
11
12
|
var index$1 = require('./index-DqmRDbxg.js');
|
|
12
13
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
14
|
var data = require('./data-DW6ofvJ8.js');
|
|
14
15
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
15
|
-
var overlays = require('./overlays-CglR7j-u.js');
|
|
16
16
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
17
17
|
var haptic = require('./haptic-ClPPQ_PS.js');
|
|
18
18
|
require('./index-DkNv4J_i.js');
|
|
@@ -1301,7 +1301,7 @@ const Datetime = class {
|
|
|
1301
1301
|
const renderArray = forcePresentation === 'time-date'
|
|
1302
1302
|
? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
|
|
1303
1303
|
: [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
|
|
1304
|
-
return index.h("ion-picker",
|
|
1304
|
+
return index.h("ion-picker", { class: overlays.FOCUS_TRAP_DISABLE_CLASS }, renderArray);
|
|
1305
1305
|
}
|
|
1306
1306
|
renderDatePickerColumns(forcePresentation) {
|
|
1307
1307
|
return forcePresentation === 'date-time' || forcePresentation === 'time-date'
|
|
@@ -1858,7 +1858,7 @@ const Datetime = class {
|
|
|
1858
1858
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1859
1859
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1860
1860
|
helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
|
|
1861
|
-
return (index.h(index.Host, { key: '
|
|
1861
|
+
return (index.h(index.Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
|
|
1862
1862
|
[mode]: true,
|
|
1863
1863
|
['datetime-readonly']: readonly,
|
|
1864
1864
|
['datetime-disabled']: disabled,
|
|
@@ -1868,7 +1868,7 @@ const Datetime = class {
|
|
|
1868
1868
|
[`datetime-size-${size}`]: true,
|
|
1869
1869
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1870
1870
|
[`datetime-grid`]: isGridStyle,
|
|
1871
|
-
})) }, index.h("div", { key: '
|
|
1871
|
+
})) }, index.h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1872
1872
|
}
|
|
1873
1873
|
get el() { return index.getElement(this); }
|
|
1874
1874
|
static get watchers() { return {
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var config = require('./config-CKhELRRu.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
|
|
8
|
-
var overlays = require('./overlays-
|
|
8
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
9
9
|
var gestureController = require('./gesture-controller-dtqlP_q4.js');
|
|
10
10
|
var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
|
|
11
11
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
|
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
11
11
|
var capacitor = require('./capacitor-DmA66EwP.js');
|
|
12
|
-
var overlays = require('./overlays-
|
|
12
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
13
13
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
14
14
|
var index$4 = require('./index-BzEyuIww.js');
|
|
15
15
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
@@ -8,9 +8,9 @@ var helpers = require('./helpers-DgwmcYAu.js');
|
|
|
8
8
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
9
9
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
10
10
|
|
|
11
|
-
const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
|
|
11
|
+
const pickerColumnOptionIosCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}";
|
|
12
12
|
|
|
13
|
-
const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
|
|
13
|
+
const pickerColumnOptionMdCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
|
|
14
14
|
|
|
15
15
|
const PickerColumnOption = class {
|
|
16
16
|
constructor(hostRef) {
|
|
@@ -102,7 +102,7 @@ const PickerColumnOption = class {
|
|
|
102
102
|
return (index.h(index.Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: theme.createColorClasses(color, {
|
|
103
103
|
[mode]: true,
|
|
104
104
|
['option-disabled']: disabled,
|
|
105
|
-
}) }, index.h("
|
|
105
|
+
}) }, index.h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
|
|
106
106
|
}
|
|
107
107
|
get el() { return index.getElement(this); }
|
|
108
108
|
static get watchers() { return {
|
|
@@ -410,23 +410,6 @@ const PickerColumn = class {
|
|
|
410
410
|
var _a;
|
|
411
411
|
return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
|
|
412
412
|
};
|
|
413
|
-
/**
|
|
414
|
-
* Render an element that overlays the column. This element is for assistive
|
|
415
|
-
* tech to allow users to navigate the column up/down. This element should receive
|
|
416
|
-
* focus as it listens for synthesized keyboard events as required by the
|
|
417
|
-
* slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
|
|
418
|
-
*/
|
|
419
|
-
this.renderAssistiveFocusable = () => {
|
|
420
|
-
const { activeItem } = this;
|
|
421
|
-
const valueText = this.getOptionValueText(activeItem);
|
|
422
|
-
/**
|
|
423
|
-
* When using the picker, the valuetext provides important context that valuenow
|
|
424
|
-
* does not. Additionally, using non-zero valuemin/valuemax values can cause
|
|
425
|
-
* WebKit to incorrectly announce numeric valuetext values (such as a year
|
|
426
|
-
* like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
|
|
427
|
-
*/
|
|
428
|
-
return (index.h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
|
|
429
|
-
};
|
|
430
413
|
}
|
|
431
414
|
ariaLabelChanged(newValue) {
|
|
432
415
|
this.ariaLabel = newValue;
|
|
@@ -567,33 +550,14 @@ const PickerColumn = class {
|
|
|
567
550
|
render() {
|
|
568
551
|
const { color, disabled, isActive, numericInput } = this;
|
|
569
552
|
const mode = ionicGlobal.getIonMode(this);
|
|
570
|
-
return (index.h(index.Host, { key: '
|
|
553
|
+
return (index.h(index.Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: theme.createColorClasses(color, {
|
|
571
554
|
[mode]: true,
|
|
572
555
|
['picker-column-active']: isActive,
|
|
573
556
|
['picker-column-numeric-input']: numericInput,
|
|
574
557
|
['picker-column-disabled']: disabled,
|
|
575
|
-
}) },
|
|
558
|
+
}) }, index.h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), index.h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
|
|
576
559
|
this.scrollEl = el;
|
|
577
|
-
},
|
|
578
|
-
/**
|
|
579
|
-
* When an element has an overlay scroll style and
|
|
580
|
-
* a fixed height, Firefox will focus the scrollable
|
|
581
|
-
* container if the content exceeds the container's
|
|
582
|
-
* dimensions.
|
|
583
|
-
*
|
|
584
|
-
* This causes keyboard navigation to focus to this
|
|
585
|
-
* element instead of going to the next element in
|
|
586
|
-
* the tab order.
|
|
587
|
-
*
|
|
588
|
-
* The desired behavior is for the user to be able to
|
|
589
|
-
* focus the assistive focusable element and tab to
|
|
590
|
-
* the next element in the tab order. Instead of tabbing
|
|
591
|
-
* to this element.
|
|
592
|
-
*
|
|
593
|
-
* To prevent this, we set the tabIndex to -1. This
|
|
594
|
-
* will match the behavior of the other browsers.
|
|
595
|
-
*/
|
|
596
|
-
tabIndex: -1 }, index.h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), index.h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
560
|
+
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, index.h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), index.h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
|
|
597
561
|
}
|
|
598
562
|
get el() { return index.getElement(this); }
|
|
599
563
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
|
-
var overlays = require('./overlays-
|
|
7
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
8
8
|
var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
@@ -375,14 +375,6 @@ const Refresher = class {
|
|
|
375
375
|
this.beginRefresh();
|
|
376
376
|
this.didRefresh = true;
|
|
377
377
|
haptic.hapticImpact({ style: haptic.ImpactStyle.Light });
|
|
378
|
-
/**
|
|
379
|
-
* Clear focus from any active element to prevent scroll jumps
|
|
380
|
-
* when the refresh completes
|
|
381
|
-
*/
|
|
382
|
-
const activeElement = document.activeElement;
|
|
383
|
-
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
384
|
-
activeElement.blur();
|
|
385
|
-
}
|
|
386
378
|
/**
|
|
387
379
|
* Translate the content element otherwise when pointer is removed
|
|
388
380
|
* from screen the scroll content will bounce back over the refresher
|
|
@@ -798,15 +790,6 @@ const Refresher = class {
|
|
|
798
790
|
this.state = 8 /* RefresherState.Refreshing */;
|
|
799
791
|
// place the content in a hangout position while it thinks
|
|
800
792
|
this.setCss(this.pullMin, this.snapbackDuration, true, '');
|
|
801
|
-
/**
|
|
802
|
-
* Clear focus from any active element to prevent the browser
|
|
803
|
-
* from restoring focus and causing scroll jumps after refresh.
|
|
804
|
-
* This ensures the view stays at the top after refresh completes.
|
|
805
|
-
*/
|
|
806
|
-
const activeElement = document.activeElement;
|
|
807
|
-
if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
|
|
808
|
-
activeElement.blur();
|
|
809
|
-
}
|
|
810
793
|
// emit "refresh" because it was pulled down far enough
|
|
811
794
|
// and they let go to begin refreshing
|
|
812
795
|
this.ionRefresh.emit({
|
|
@@ -889,7 +872,7 @@ const Refresher = class {
|
|
|
889
872
|
}
|
|
890
873
|
render() {
|
|
891
874
|
const mode = ionicGlobal.getIonMode(this);
|
|
892
|
-
return (index.h(index.Host, { key: '
|
|
875
|
+
return (index.h(index.Host, { key: '8c7a5cc32da02a9cbeaa954258148683f60a6d1b', slot: "fixed", class: {
|
|
893
876
|
[mode]: true,
|
|
894
877
|
// Used internally for styling
|
|
895
878
|
[`refresher-${mode}`]: true,
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
8
|
-
var overlays = require('./overlays-
|
|
8
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
9
9
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
10
10
|
require('./index-DkNv4J_i.js');
|
|
11
11
|
require('./helpers-DgwmcYAu.js');
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var notchController = require('./notch-controller-Bf5Rr4R5.js');
|
|
8
8
|
var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
11
11
|
var dir = require('./dir-Cn0z1rJH.js');
|
|
12
12
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
13
13
|
var watchOptions = require('./watch-options-CviOsrTS.js');
|
|
@@ -7,7 +7,7 @@ var index$1 = require('./index-DNh170BW.js');
|
|
|
7
7
|
var config = require('./config-CKhELRRu.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-DUsEBICv.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|