voyager-ionic-core 8.2.5 → 8.2.6
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/action-sheet.js +7 -4
- package/components/alert.js +6 -3
- package/components/ion-loading.js +6 -3
- package/components/ion-modal.js +8 -5
- package/components/ion-picker-legacy.js +6 -3
- package/components/ion-toast.js +6 -3
- package/components/popover.js +4 -3
- package/dist/cjs/ion-action-sheet.cjs.entry.js +7 -4
- package/dist/cjs/ion-alert.cjs.entry.js +6 -3
- package/dist/cjs/ion-datetime_3.cjs.entry.js +6 -3
- package/dist/cjs/ion-loading.cjs.entry.js +6 -3
- package/dist/cjs/ion-modal.cjs.entry.js +8 -5
- package/dist/cjs/ion-popover.cjs.entry.js +4 -3
- package/dist/cjs/ion-toast.cjs.entry.js +6 -3
- package/dist/collection/components/action-sheet/action-sheet.js +7 -4
- package/dist/collection/components/alert/alert.js +6 -3
- package/dist/collection/components/loading/loading.js +6 -3
- package/dist/collection/components/modal/modal.js +8 -5
- package/dist/collection/components/picker-legacy/picker.js +6 -3
- package/dist/collection/components/popover/popover.js +4 -3
- package/dist/collection/components/toast/toast.js +6 -3
- package/dist/docs.json +1 -1
- package/dist/esm/ion-action-sheet.entry.js +7 -4
- package/dist/esm/ion-alert.entry.js +6 -3
- package/dist/esm/ion-datetime_3.entry.js +6 -3
- package/dist/esm/ion-loading.entry.js +6 -3
- package/dist/esm/ion-modal.entry.js +8 -5
- package/dist/esm/ion-popover.entry.js +4 -3
- package/dist/esm/ion-toast.entry.js +6 -3
- 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-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-loading.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-toast.entry.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-9aae0bf3.entry.js → p-096664b8.entry.js} +1 -1
- package/dist/ionic/{p-fed12de8.system.entry.js → p-1924eefd.system.entry.js} +1 -1
- package/dist/ionic/{p-ed8726ad.system.entry.js → p-299a2ccb.system.entry.js} +1 -1
- package/dist/ionic/{p-88c0ff08.system.entry.js → p-2b017e39.system.entry.js} +1 -1
- package/dist/ionic/p-5e17dc69.entry.js +4 -0
- package/dist/ionic/{p-4c06d890.entry.js → p-6c8d40f8.entry.js} +1 -1
- package/dist/ionic/{p-fafa4d9b.entry.js → p-6d32eb3c.entry.js} +1 -1
- package/dist/ionic/{p-057c2f6f.entry.js → p-74890c76.entry.js} +1 -1
- package/dist/ionic/p-767a0d69.system.js +1 -1
- package/dist/ionic/{p-4a3d2f75.system.entry.js → p-978bbfe5.system.entry.js} +1 -1
- package/dist/ionic/{p-4a0db73d.system.entry.js → p-99740380.system.entry.js} +1 -1
- package/dist/ionic/{p-3b11ab95.system.entry.js → p-be9fe750.system.entry.js} +1 -1
- package/dist/ionic/{p-6db3f661.system.entry.js → p-d967f9ce.system.entry.js} +1 -1
- package/dist/ionic/{p-130ce79e.entry.js → p-dc321750.entry.js} +1 -1
- package/dist/ionic/{p-090c318d.entry.js → p-eb988a08.entry.js} +1 -1
- package/hydrate/index.js +43 -24
- package/hydrate/index.mjs +43 -24
- package/package.json +2 -2
- package/dist/ionic/p-57c9689a.entry.js +0 -4
|
@@ -244,7 +244,10 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
|
|
|
244
244
|
this.triggerController.removeClickListener();
|
|
245
245
|
}
|
|
246
246
|
componentWillLoad() {
|
|
247
|
-
|
|
247
|
+
var _a;
|
|
248
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
249
|
+
setOverlayId(this.el);
|
|
250
|
+
}
|
|
248
251
|
}
|
|
249
252
|
componentDidLoad() {
|
|
250
253
|
/**
|
|
@@ -289,12 +292,12 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
|
|
|
289
292
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
290
293
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
291
294
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
292
|
-
return (h(Host, Object.assign({ key: '
|
|
295
|
+
return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
293
296
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
294
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '
|
|
297
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
|
|
295
298
|
'action-sheet-title': true,
|
|
296
299
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
297
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
300
|
+
} }, header, this.subHeader && h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
|
|
298
301
|
}
|
|
299
302
|
get el() { return this; }
|
|
300
303
|
static get watchers() { return {
|
package/components/alert.js
CHANGED
|
@@ -258,7 +258,10 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
|
|
|
258
258
|
this.triggerChanged();
|
|
259
259
|
}
|
|
260
260
|
componentWillLoad() {
|
|
261
|
-
|
|
261
|
+
var _a;
|
|
262
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
263
|
+
setOverlayId(this.el);
|
|
264
|
+
}
|
|
262
265
|
this.inputsChanged();
|
|
263
266
|
this.buttonsChanged();
|
|
264
267
|
}
|
|
@@ -486,9 +489,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
|
|
|
486
489
|
* If neither is defined, don't set aria-labelledby.
|
|
487
490
|
*/
|
|
488
491
|
const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
|
|
489
|
-
return (h(Host, Object.assign({ key: '
|
|
492
|
+
return (h(Host, Object.assign({ key: 'c7d53f48b359f2bc3480a2e1ba34948fc9378fb0', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
490
493
|
zIndex: `${20000 + overlayIndex}`,
|
|
491
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '
|
|
494
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), h("div", { key: 'e35e1a4b81286976c8a6bab570c986f3196b21f4', tabindex: "0" }), h("div", { key: '9089864c80d96ed834bf723f3de863cf1c4a5b97', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'dd600f02c84352059c6cdf98821b9c9a831bcdcb', class: "alert-head" }, header && (h("h2", { key: '11afb605e1ccefc889fbdd2533d491bea8fbf183', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'e53b0613d09d26e5a2cd7c9c6e63ec2535625ce5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'cef60ec8b34c9aec8bc698f16f55324d1ce67c72', tabindex: "0" })));
|
|
492
495
|
}
|
|
493
496
|
get el() { return this; }
|
|
494
497
|
static get watchers() { return {
|
|
@@ -163,11 +163,14 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
|
|
|
163
163
|
this.triggerChanged();
|
|
164
164
|
}
|
|
165
165
|
componentWillLoad() {
|
|
166
|
+
var _a;
|
|
166
167
|
if (this.spinner === undefined) {
|
|
167
168
|
const mode = getIonMode(this);
|
|
168
169
|
this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
|
|
169
170
|
}
|
|
170
|
-
|
|
171
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
172
|
+
setOverlayId(this.el);
|
|
173
|
+
}
|
|
171
174
|
}
|
|
172
175
|
componentDidLoad() {
|
|
173
176
|
/**
|
|
@@ -256,9 +259,9 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
|
|
|
256
259
|
* Otherwise, don't set aria-labelledby.
|
|
257
260
|
*/
|
|
258
261
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
259
|
-
return (h(Host, Object.assign({ key: '
|
|
262
|
+
return (h(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
260
263
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
261
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
264
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
|
|
262
265
|
}
|
|
263
266
|
get el() { return this; }
|
|
264
267
|
static get watchers() { return {
|
package/components/ion-modal.js
CHANGED
|
@@ -1222,6 +1222,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1222
1222
|
this.triggerController.removeClickListener();
|
|
1223
1223
|
}
|
|
1224
1224
|
componentWillLoad() {
|
|
1225
|
+
var _a;
|
|
1225
1226
|
const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
|
|
1226
1227
|
const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
|
|
1227
1228
|
const attributesToInherit = ['aria-label', 'role'];
|
|
@@ -1263,7 +1264,9 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1263
1264
|
if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
|
|
1264
1265
|
printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
|
|
1265
1266
|
}
|
|
1266
|
-
|
|
1267
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
1268
|
+
setOverlayId(this.el);
|
|
1269
|
+
}
|
|
1267
1270
|
}
|
|
1268
1271
|
componentDidLoad() {
|
|
1269
1272
|
/**
|
|
@@ -1653,18 +1656,18 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
|
|
|
1653
1656
|
const mode = getIonMode(this);
|
|
1654
1657
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
1655
1658
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
1656
|
-
return (h(Host, Object.assign({ key: '
|
|
1659
|
+
return (h(Host, Object.assign({ key: '013ba4864ca4d2c1052c512f6a4b0732b8decff7', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1657
1660
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1658
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '
|
|
1661
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '498b1c0a03836d6799dcf3b8e9315805c70f6480', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'ce22e4caf1096e87248926fe2477f0d5a4c8a5cf', class: "modal-shadow" }), h("div", Object.assign({ key: '540e47b15d8290166c39b022c725182114a75682',
|
|
1659
1662
|
/*
|
|
1660
1663
|
role and aria-modal must be used on the
|
|
1661
1664
|
same element. They must also be set inside the
|
|
1662
1665
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1663
1666
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1664
1667
|
*/
|
|
1665
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
1668
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'f3b352ec9a63a7ec801462aacfd8295b4302d115', class: "modal-handle",
|
|
1666
1669
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1667
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '
|
|
1670
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '31a3f58f4c733ffdf736523c154200874a96b1d0' }))));
|
|
1668
1671
|
}
|
|
1669
1672
|
get el() { return this; }
|
|
1670
1673
|
static get watchers() { return {
|
|
@@ -127,7 +127,10 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
|
|
|
127
127
|
this.triggerController.removeClickListener();
|
|
128
128
|
}
|
|
129
129
|
componentWillLoad() {
|
|
130
|
-
|
|
130
|
+
var _a;
|
|
131
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
132
|
+
setOverlayId(this.el);
|
|
133
|
+
}
|
|
131
134
|
}
|
|
132
135
|
componentDidLoad() {
|
|
133
136
|
printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
|
|
@@ -240,11 +243,11 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
|
|
|
240
243
|
render() {
|
|
241
244
|
const { htmlAttributes } = this;
|
|
242
245
|
const mode = getIonMode(this);
|
|
243
|
-
return (h(Host, Object.assign({ key: '
|
|
246
|
+
return (h(Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
244
247
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
245
248
|
}, class: Object.assign({ [mode]: true,
|
|
246
249
|
// Used internally for styling
|
|
247
|
-
[`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '
|
|
250
|
+
[`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
|
|
248
251
|
}
|
|
249
252
|
get el() { return this; }
|
|
250
253
|
static get watchers() { return {
|
package/components/ion-toast.js
CHANGED
|
@@ -590,7 +590,10 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
|
|
|
590
590
|
this.triggerController.removeClickListener();
|
|
591
591
|
}
|
|
592
592
|
componentWillLoad() {
|
|
593
|
-
|
|
593
|
+
var _a;
|
|
594
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
595
|
+
setOverlayId(this.el);
|
|
596
|
+
}
|
|
594
597
|
}
|
|
595
598
|
componentDidLoad() {
|
|
596
599
|
/**
|
|
@@ -828,9 +831,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
|
|
|
828
831
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
829
832
|
printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
|
|
830
833
|
}
|
|
831
|
-
return (h(Host, Object.assign({ key: '
|
|
834
|
+
return (h(Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
832
835
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
833
|
-
}, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '
|
|
836
|
+
}, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, h("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
|
|
834
837
|
}
|
|
835
838
|
get el() { return this; }
|
|
836
839
|
static get watchers() { return {
|
package/components/popover.js
CHANGED
|
@@ -1089,8 +1089,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
|
|
|
1089
1089
|
}
|
|
1090
1090
|
}
|
|
1091
1091
|
componentWillLoad() {
|
|
1092
|
+
var _a, _b;
|
|
1092
1093
|
const { el } = this;
|
|
1093
|
-
const popoverId = setOverlayId(el);
|
|
1094
|
+
const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
|
|
1094
1095
|
this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
|
|
1095
1096
|
if (this.alignment === undefined) {
|
|
1096
1097
|
this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
|
|
@@ -1293,9 +1294,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
|
|
|
1293
1294
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1294
1295
|
const desktop = isPlatform('desktop');
|
|
1295
1296
|
const enableArrow = arrow && !parentPopover;
|
|
1296
|
-
return (h(Host, Object.assign({ key: '
|
|
1297
|
+
return (h(Host, Object.assign({ key: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1297
1298
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1298
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '
|
|
1299
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), h("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, h("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
|
|
1299
1300
|
}
|
|
1300
1301
|
get el() { return this; }
|
|
1301
1302
|
static get watchers() { return {
|
|
@@ -252,7 +252,10 @@ const ActionSheet = class {
|
|
|
252
252
|
this.triggerController.removeClickListener();
|
|
253
253
|
}
|
|
254
254
|
componentWillLoad() {
|
|
255
|
-
|
|
255
|
+
var _a;
|
|
256
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
257
|
+
overlays.setOverlayId(this.el);
|
|
258
|
+
}
|
|
256
259
|
}
|
|
257
260
|
componentDidLoad() {
|
|
258
261
|
/**
|
|
@@ -297,12 +300,12 @@ const ActionSheet = class {
|
|
|
297
300
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
298
301
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
299
302
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
300
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
303
|
+
return (index.h(index.Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
301
304
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
302
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '
|
|
305
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), index.h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), index.h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, index.h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
|
|
303
306
|
'action-sheet-title': true,
|
|
304
307
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
305
|
-
} }, header, this.subHeader && index.h("div", { key: '
|
|
308
|
+
} }, header, this.subHeader && index.h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), index.h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
|
|
306
309
|
}
|
|
307
310
|
get el() { return index.getElement(this); }
|
|
308
311
|
static get watchers() { return {
|
|
@@ -267,7 +267,10 @@ const Alert = class {
|
|
|
267
267
|
this.triggerChanged();
|
|
268
268
|
}
|
|
269
269
|
componentWillLoad() {
|
|
270
|
-
|
|
270
|
+
var _a;
|
|
271
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
272
|
+
overlays.setOverlayId(this.el);
|
|
273
|
+
}
|
|
271
274
|
this.inputsChanged();
|
|
272
275
|
this.buttonsChanged();
|
|
273
276
|
}
|
|
@@ -495,9 +498,9 @@ const Alert = class {
|
|
|
495
498
|
* If neither is defined, don't set aria-labelledby.
|
|
496
499
|
*/
|
|
497
500
|
const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
|
|
498
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
501
|
+
return (index.h(index.Host, Object.assign({ key: 'c7d53f48b359f2bc3480a2e1ba34948fc9378fb0', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
499
502
|
zIndex: `${20000 + overlayIndex}`,
|
|
500
|
-
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '
|
|
503
|
+
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), index.h("div", { key: 'e35e1a4b81286976c8a6bab570c986f3196b21f4', tabindex: "0" }), index.h("div", { key: '9089864c80d96ed834bf723f3de863cf1c4a5b97', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: 'dd600f02c84352059c6cdf98821b9c9a831bcdcb', class: "alert-head" }, header && (index.h("h2", { key: '11afb605e1ccefc889fbdd2533d491bea8fbf183', id: hdrId, class: "alert-title" }, header)), subHeader && (index.h("h2", { key: 'e53b0613d09d26e5a2cd7c9c6e63ec2535625ce5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: 'cef60ec8b34c9aec8bc698f16f55324d1ce67c72', tabindex: "0" })));
|
|
501
504
|
}
|
|
502
505
|
get el() { return index.getElement(this); }
|
|
503
506
|
static get watchers() { return {
|
|
@@ -1914,7 +1914,10 @@ const Picker = class {
|
|
|
1914
1914
|
this.triggerController.removeClickListener();
|
|
1915
1915
|
}
|
|
1916
1916
|
componentWillLoad() {
|
|
1917
|
-
|
|
1917
|
+
var _a;
|
|
1918
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
1919
|
+
overlays.setOverlayId(this.el);
|
|
1920
|
+
}
|
|
1918
1921
|
}
|
|
1919
1922
|
componentDidLoad() {
|
|
1920
1923
|
index.printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
|
|
@@ -2027,11 +2030,11 @@ const Picker = class {
|
|
|
2027
2030
|
render() {
|
|
2028
2031
|
const { htmlAttributes } = this;
|
|
2029
2032
|
const mode = ionicGlobal.getIonMode(this);
|
|
2030
|
-
return (index$1.h(index$1.Host, Object.assign({ key: '
|
|
2033
|
+
return (index$1.h(index$1.Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
2031
2034
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2032
2035
|
}, class: Object.assign({ [mode]: true,
|
|
2033
2036
|
// Used internally for styling
|
|
2034
|
-
[`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: '
|
|
2037
|
+
[`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), index$1.h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (index$1.h("div", { class: buttonWrapperClass(b) }, index$1.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index$1.h("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, index$1.h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-legacy-column", { col: c })), index$1.h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), index$1.h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
|
|
2035
2038
|
}
|
|
2036
2039
|
get el() { return index$1.getElement(this); }
|
|
2037
2040
|
static get watchers() { return {
|
|
@@ -169,11 +169,14 @@ const Loading = class {
|
|
|
169
169
|
this.triggerChanged();
|
|
170
170
|
}
|
|
171
171
|
componentWillLoad() {
|
|
172
|
+
var _a;
|
|
172
173
|
if (this.spinner === undefined) {
|
|
173
174
|
const mode = ionicGlobal.getIonMode(this);
|
|
174
175
|
this.spinner = ionicGlobal.config.get('loadingSpinner', ionicGlobal.config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
|
|
175
176
|
}
|
|
176
|
-
|
|
177
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
178
|
+
overlays.setOverlayId(this.el);
|
|
179
|
+
}
|
|
177
180
|
}
|
|
178
181
|
componentDidLoad() {
|
|
179
182
|
/**
|
|
@@ -262,9 +265,9 @@ const Loading = class {
|
|
|
262
265
|
* Otherwise, don't set aria-labelledby.
|
|
263
266
|
*/
|
|
264
267
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
265
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
268
|
+
return (index.h(index.Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
266
269
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
267
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: '
|
|
270
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), index.h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, index.h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
|
|
268
271
|
}
|
|
269
272
|
get el() { return index.getElement(this); }
|
|
270
273
|
static get watchers() { return {
|
|
@@ -1226,6 +1226,7 @@ const Modal = class {
|
|
|
1226
1226
|
this.triggerController.removeClickListener();
|
|
1227
1227
|
}
|
|
1228
1228
|
componentWillLoad() {
|
|
1229
|
+
var _a;
|
|
1229
1230
|
const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
|
|
1230
1231
|
const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
|
|
1231
1232
|
const attributesToInherit = ['aria-label', 'role'];
|
|
@@ -1267,7 +1268,9 @@ const Modal = class {
|
|
|
1267
1268
|
if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
|
|
1268
1269
|
index$4.printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
|
|
1269
1270
|
}
|
|
1270
|
-
|
|
1271
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
1272
|
+
overlays.setOverlayId(this.el);
|
|
1273
|
+
}
|
|
1271
1274
|
}
|
|
1272
1275
|
componentDidLoad() {
|
|
1273
1276
|
/**
|
|
@@ -1657,18 +1660,18 @@ const Modal = class {
|
|
|
1657
1660
|
const mode = ionicGlobal.getIonMode(this);
|
|
1658
1661
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
1659
1662
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
1660
|
-
return (index$3.h(index$3.Host, Object.assign({ key: '
|
|
1663
|
+
return (index$3.h(index$3.Host, Object.assign({ key: '013ba4864ca4d2c1052c512f6a4b0732b8decff7', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1661
1664
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1662
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: '
|
|
1665
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: '498b1c0a03836d6799dcf3b8e9315805c70f6480', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'ce22e4caf1096e87248926fe2477f0d5a4c8a5cf', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '540e47b15d8290166c39b022c725182114a75682',
|
|
1663
1666
|
/*
|
|
1664
1667
|
role and aria-modal must be used on the
|
|
1665
1668
|
same element. They must also be set inside the
|
|
1666
1669
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1667
1670
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1668
1671
|
*/
|
|
1669
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '
|
|
1672
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: 'f3b352ec9a63a7ec801462aacfd8295b4302d115', class: "modal-handle",
|
|
1670
1673
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1671
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: '
|
|
1674
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: '31a3f58f4c733ffdf736523c154200874a96b1d0' }))));
|
|
1672
1675
|
}
|
|
1673
1676
|
get el() { return index$3.getElement(this); }
|
|
1674
1677
|
static get watchers() { return {
|
|
@@ -1093,8 +1093,9 @@ const Popover = class {
|
|
|
1093
1093
|
}
|
|
1094
1094
|
}
|
|
1095
1095
|
componentWillLoad() {
|
|
1096
|
+
var _a, _b;
|
|
1096
1097
|
const { el } = this;
|
|
1097
|
-
const popoverId = overlays.setOverlayId(el);
|
|
1098
|
+
const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : overlays.setOverlayId(el);
|
|
1098
1099
|
this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
|
|
1099
1100
|
if (this.alignment === undefined) {
|
|
1100
1101
|
this.alignment = ionicGlobal.getIonMode(this) === 'ios' ? 'center' : 'start';
|
|
@@ -1297,9 +1298,9 @@ const Popover = class {
|
|
|
1297
1298
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1298
1299
|
const desktop = ionicGlobal.isPlatform('desktop');
|
|
1299
1300
|
const enableArrow = arrow && !parentPopover;
|
|
1300
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
1301
|
+
return (index.h(index.Host, Object.assign({ key: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1301
1302
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1302
|
-
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '
|
|
1303
|
+
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, index.h("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
|
|
1303
1304
|
}
|
|
1304
1305
|
get el() { return index.getElement(this); }
|
|
1305
1306
|
static get watchers() { return {
|
|
@@ -591,7 +591,10 @@ const Toast = class {
|
|
|
591
591
|
this.triggerController.removeClickListener();
|
|
592
592
|
}
|
|
593
593
|
componentWillLoad() {
|
|
594
|
-
|
|
594
|
+
var _a;
|
|
595
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
596
|
+
overlays.setOverlayId(this.el);
|
|
597
|
+
}
|
|
595
598
|
}
|
|
596
599
|
componentDidLoad() {
|
|
597
600
|
/**
|
|
@@ -829,9 +832,9 @@ const Toast = class {
|
|
|
829
832
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
830
833
|
index$1.printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
|
|
831
834
|
}
|
|
832
|
-
return (index$3.h(index$3.Host, Object.assign({ key: '
|
|
835
|
+
return (index$3.h(index$3.Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
833
836
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
834
|
-
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$3.h("div", { key: '
|
|
837
|
+
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$3.h("div", { key: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, index$3.h("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$3.h("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$3.h("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
|
|
835
838
|
}
|
|
836
839
|
get el() { return index$3.getElement(this); }
|
|
837
840
|
static get watchers() { return {
|
|
@@ -146,7 +146,10 @@ export class ActionSheet {
|
|
|
146
146
|
this.triggerController.removeClickListener();
|
|
147
147
|
}
|
|
148
148
|
componentWillLoad() {
|
|
149
|
-
|
|
149
|
+
var _a;
|
|
150
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
151
|
+
setOverlayId(this.el);
|
|
152
|
+
}
|
|
150
153
|
}
|
|
151
154
|
componentDidLoad() {
|
|
152
155
|
/**
|
|
@@ -191,12 +194,12 @@ export class ActionSheet {
|
|
|
191
194
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
192
195
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
193
196
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
194
|
-
return (h(Host, Object.assign({ key: '
|
|
197
|
+
return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
195
198
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
196
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '
|
|
199
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
|
|
197
200
|
'action-sheet-title': true,
|
|
198
201
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
199
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
202
|
+
} }, header, this.subHeader && h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
|
|
200
203
|
}
|
|
201
204
|
static get is() { return "ion-action-sheet"; }
|
|
202
205
|
static get encapsulation() { return "scoped"; }
|
|
@@ -163,7 +163,10 @@ export class Alert {
|
|
|
163
163
|
this.triggerChanged();
|
|
164
164
|
}
|
|
165
165
|
componentWillLoad() {
|
|
166
|
-
|
|
166
|
+
var _a;
|
|
167
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
168
|
+
setOverlayId(this.el);
|
|
169
|
+
}
|
|
167
170
|
this.inputsChanged();
|
|
168
171
|
this.buttonsChanged();
|
|
169
172
|
}
|
|
@@ -391,9 +394,9 @@ export class Alert {
|
|
|
391
394
|
* If neither is defined, don't set aria-labelledby.
|
|
392
395
|
*/
|
|
393
396
|
const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
|
|
394
|
-
return (h(Host, Object.assign({ key: '
|
|
397
|
+
return (h(Host, Object.assign({ key: 'c7d53f48b359f2bc3480a2e1ba34948fc9378fb0', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
395
398
|
zIndex: `${20000 + overlayIndex}`,
|
|
396
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '
|
|
399
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), h("div", { key: 'e35e1a4b81286976c8a6bab570c986f3196b21f4', tabindex: "0" }), h("div", { key: '9089864c80d96ed834bf723f3de863cf1c4a5b97', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'dd600f02c84352059c6cdf98821b9c9a831bcdcb', class: "alert-head" }, header && (h("h2", { key: '11afb605e1ccefc889fbdd2533d491bea8fbf183', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'e53b0613d09d26e5a2cd7c9c6e63ec2535625ce5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'cef60ec8b34c9aec8bc698f16f55324d1ce67c72', tabindex: "0" })));
|
|
397
400
|
}
|
|
398
401
|
static get is() { return "ion-alert"; }
|
|
399
402
|
static get encapsulation() { return "scoped"; }
|
|
@@ -65,11 +65,14 @@ export class Loading {
|
|
|
65
65
|
this.triggerChanged();
|
|
66
66
|
}
|
|
67
67
|
componentWillLoad() {
|
|
68
|
+
var _a;
|
|
68
69
|
if (this.spinner === undefined) {
|
|
69
70
|
const mode = getIonMode(this);
|
|
70
71
|
this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
|
|
71
72
|
}
|
|
72
|
-
|
|
73
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
74
|
+
setOverlayId(this.el);
|
|
75
|
+
}
|
|
73
76
|
}
|
|
74
77
|
componentDidLoad() {
|
|
75
78
|
/**
|
|
@@ -158,9 +161,9 @@ export class Loading {
|
|
|
158
161
|
* Otherwise, don't set aria-labelledby.
|
|
159
162
|
*/
|
|
160
163
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
161
|
-
return (h(Host, Object.assign({ key: '
|
|
164
|
+
return (h(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
162
165
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
163
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
166
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
|
|
164
167
|
}
|
|
165
168
|
static get is() { return "ion-loading"; }
|
|
166
169
|
static get encapsulation() { return "scoped"; }
|