voyager-ionic-core 8.3.1 → 8.3.4
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 +2 -2
- package/components/alert.js +1 -1
- package/components/backdrop.js +1 -1
- package/components/ion-app.js +1 -2
- package/components/ion-input.js +20 -5
- package/components/ion-loading.js +1 -1
- package/components/ion-picker-legacy.js +1 -1
- package/components/ion-segment.js +19 -6
- package/components/ion-textarea.js +19 -4
- package/components/overlays.js +62 -7
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +3 -3
- package/dist/cjs/ion-alert.cjs.entry.js +2 -2
- package/dist/cjs/ion-app_8.cjs.entry.js +1 -2
- package/dist/cjs/ion-backdrop.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-input.cjs.entry.js +20 -5
- package/dist/cjs/ion-loading.cjs.entry.js +2 -2
- 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-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-segment_2.cjs.entry.js +19 -6
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-textarea.cjs.entry.js +19 -4
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/{overlays-0123d7d4.js → overlays-ba0f6986.js} +62 -7
- package/dist/collection/components/action-sheet/action-sheet.js +2 -2
- package/dist/collection/components/alert/alert.js +1 -1
- package/dist/collection/components/app/app.js +3 -7
- package/dist/collection/components/backdrop/backdrop.js +1 -1
- package/dist/collection/components/input/input.js +20 -5
- package/dist/collection/components/loading/loading.js +1 -1
- package/dist/collection/components/picker-legacy/picker.js +1 -1
- package/dist/collection/components/segment/segment.js +19 -6
- package/dist/collection/components/textarea/textarea.js +19 -4
- package/dist/collection/utils/overlays.js +62 -7
- package/dist/docs.json +41 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +3 -3
- package/dist/esm/ion-alert.entry.js +2 -2
- package/dist/esm/ion-app_8.entry.js +1 -2
- package/dist/esm/ion-backdrop.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +2 -2
- package/dist/esm/ion-input.entry.js +20 -5
- package/dist/esm/ion-loading.entry.js +2 -2
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-segment_2.entry.js +19 -6
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-textarea.entry.js +19 -4
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/{overlays-9c75ec54.js → overlays-ae10d43d.js} +62 -7
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
- package/dist/esm-es5/ion-alert.entry.js +1 -1
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-backdrop.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-input.entry.js +1 -1
- package/dist/esm-es5/ion-loading.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-popover.entry.js +1 -1
- package/dist/esm-es5/ion-segment_2.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-textarea.entry.js +1 -1
- package/dist/esm-es5/ion-toast.entry.js +1 -1
- package/dist/esm-es5/overlays-ae10d43d.js +4 -0
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-04fc24ee.system.js +4 -0
- package/dist/ionic/{p-ecb57d24.system.entry.js → p-0790b342.system.entry.js} +1 -1
- package/dist/ionic/{p-100b83fd.system.entry.js → p-110e03be.system.entry.js} +1 -1
- package/dist/ionic/p-148b8abb.entry.js +4 -0
- package/dist/ionic/{p-4b0fedb7.system.entry.js → p-18105026.system.entry.js} +1 -1
- package/dist/ionic/p-322c5fb4.system.js +1 -1
- package/dist/ionic/{p-d57661a1.entry.js → p-41c89b8d.entry.js} +1 -1
- package/dist/ionic/p-44d1539c.system.entry.js +4 -0
- package/dist/ionic/{p-772dacba.system.entry.js → p-53add985.system.entry.js} +1 -1
- package/dist/ionic/{p-08127172.entry.js → p-5800e441.entry.js} +1 -1
- package/dist/ionic/p-5c831f49.js +4 -0
- package/dist/ionic/p-60cc7986.entry.js +4 -0
- package/dist/ionic/{p-a72fb8a1.system.entry.js → p-63d65dbc.system.entry.js} +1 -1
- package/dist/ionic/p-6ceb04b5.entry.js +4 -0
- package/dist/ionic/{p-9fef1364.entry.js → p-6d50faff.entry.js} +1 -1
- package/dist/ionic/{p-a4d51b8d.system.js → p-79b12fda.system.js} +1 -1
- package/dist/ionic/{p-8ed31163.system.entry.js → p-79e7be3a.system.entry.js} +1 -1
- package/dist/ionic/p-82ab7ccb.entry.js +4 -0
- package/dist/ionic/{p-22c020db.system.entry.js → p-857ca696.system.entry.js} +1 -1
- package/dist/ionic/{p-9c23044d.entry.js → p-87a4407b.entry.js} +1 -1
- package/dist/ionic/{p-2b7c93b4.entry.js → p-9895e7f3.entry.js} +1 -1
- package/dist/ionic/p-9910f786.entry.js +4 -0
- package/dist/ionic/{p-5e66bcf2.entry.js → p-9e208825.entry.js} +1 -1
- package/dist/ionic/p-a89dac49.entry.js +4 -0
- package/dist/ionic/{p-85f73bdd.system.entry.js → p-ad9b5007.system.entry.js} +1 -1
- package/dist/ionic/{p-755b27f0.system.entry.js → p-be715dd3.system.entry.js} +1 -1
- package/dist/ionic/{p-ed6962d3.system.entry.js → p-be71fe0f.system.entry.js} +1 -1
- package/dist/ionic/{p-cff5585e.system.entry.js → p-c71f301f.system.entry.js} +1 -1
- package/dist/ionic/{p-a41699db.entry.js → p-d58f21d2.entry.js} +1 -1
- package/dist/ionic/{p-f50ae0d5.system.entry.js → p-d754c709.system.entry.js} +1 -1
- package/dist/ionic/p-dda5c73d.entry.js +4 -0
- package/dist/ionic/{p-9cc3bcc5.system.entry.js → p-f0ab13a8.system.entry.js} +1 -1
- package/dist/types/components/app/app.d.ts +0 -1
- package/dist/types/components/input/input.d.ts +3 -0
- package/dist/types/components/textarea/textarea.d.ts +3 -0
- package/dist/types/components.d.ts +3 -0
- package/hydrate/index.js +127 -30
- package/hydrate/index.mjs +127 -30
- package/package.json +1 -1
- package/dist/esm-es5/overlays-9c75ec54.js +0 -4
- package/dist/ionic/p-0fa0c92b.entry.js +0 -4
- package/dist/ionic/p-16207409.system.entry.js +0 -4
- package/dist/ionic/p-2c4bdd9d.entry.js +0 -4
- package/dist/ionic/p-854f9b64.entry.js +0 -4
- package/dist/ionic/p-98871496.system.js +0 -4
- package/dist/ionic/p-a440397c.js +0 -4
- package/dist/ionic/p-ab8a2ff1.entry.js +0 -4
- package/dist/ionic/p-b4c950f8.entry.js +0 -4
- package/dist/ionic/p-bfa2e81c.entry.js +0 -4
- package/dist/ionic/p-d77e12ca.entry.js +0 -4
|
@@ -427,9 +427,19 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
|
|
|
427
427
|
if (overlay.presented) {
|
|
428
428
|
return;
|
|
429
429
|
}
|
|
430
|
-
|
|
430
|
+
/**
|
|
431
|
+
* Due to accessibility guidelines, toasts do not have
|
|
432
|
+
* focus traps.
|
|
433
|
+
*
|
|
434
|
+
* All other overlays should have focus traps to prevent
|
|
435
|
+
* the keyboard focus from leaving the overlay.
|
|
436
|
+
*/
|
|
437
|
+
if (overlay.el.tagName !== 'ION-TOAST') {
|
|
438
|
+
setRootAriaHidden(true);
|
|
439
|
+
}
|
|
431
440
|
document.body.classList.add(BACKDROP_NO_SCROLL);
|
|
432
|
-
|
|
441
|
+
hideUnderlyingOverlaysFromScreenReaders(overlay.el);
|
|
442
|
+
hideAnimatingOverlayFromScreenReaders(overlay.el);
|
|
433
443
|
overlay.presented = true;
|
|
434
444
|
overlay.willPresent.emit();
|
|
435
445
|
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
@@ -469,6 +479,11 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
|
|
|
469
479
|
* it would still have aria-hidden on being presented again.
|
|
470
480
|
* Removing it here ensures the overlay is visible to screen
|
|
471
481
|
* readers.
|
|
482
|
+
*
|
|
483
|
+
* If this overlay was being presented, then it was hidden
|
|
484
|
+
* from screen readers during the animation. Now that the
|
|
485
|
+
* animation is complete, we can reveal the overlay to
|
|
486
|
+
* screen readers.
|
|
472
487
|
*/
|
|
473
488
|
overlay.el.removeAttribute('aria-hidden');
|
|
474
489
|
};
|
|
@@ -526,17 +541,35 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
|
|
|
526
541
|
if (!overlay.presented) {
|
|
527
542
|
return false;
|
|
528
543
|
}
|
|
529
|
-
const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
|
|
530
544
|
/**
|
|
531
|
-
*
|
|
532
|
-
*
|
|
545
|
+
* For accessibility, toasts lack focus traps and don’t receive
|
|
546
|
+
* `aria-hidden` on the root element when presented.
|
|
547
|
+
*
|
|
548
|
+
* All other overlays use focus traps to keep keyboard focus
|
|
549
|
+
* within the overlay, setting `aria-hidden` on the root element
|
|
550
|
+
* to enhance accessibility.
|
|
551
|
+
*
|
|
552
|
+
* Therefore, we must remove `aria-hidden` from the root element
|
|
553
|
+
* when the last non-toast overlay is dismissed.
|
|
533
554
|
*/
|
|
534
|
-
|
|
555
|
+
const overlaysNotToast = doc !== undefined ? getPresentedOverlays(doc).filter((o) => o.tagName !== 'ION-TOAST') : [];
|
|
556
|
+
const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
|
|
557
|
+
/**
|
|
558
|
+
* If this is the last visible overlay that is not a toast
|
|
559
|
+
* then we want to re-add the root to the accessibility tree.
|
|
560
|
+
*/
|
|
561
|
+
if (lastOverlayNotToast) {
|
|
535
562
|
setRootAriaHidden(false);
|
|
536
563
|
document.body.classList.remove(BACKDROP_NO_SCROLL);
|
|
537
564
|
}
|
|
538
565
|
overlay.presented = false;
|
|
539
566
|
try {
|
|
567
|
+
/**
|
|
568
|
+
* There is no need to show the overlay to screen readers during
|
|
569
|
+
* the dismiss animation. This is because the overlay will be removed
|
|
570
|
+
* from the DOM after the animation is complete.
|
|
571
|
+
*/
|
|
572
|
+
hideAnimatingOverlayFromScreenReaders(overlay.el);
|
|
540
573
|
// Overlay contents should not be clickable during dismiss
|
|
541
574
|
overlay.el.style.setProperty('pointer-events', 'none');
|
|
542
575
|
overlay.willDismiss.emit({ data, role });
|
|
@@ -771,6 +804,28 @@ export const createTriggerController = () => {
|
|
|
771
804
|
removeClickListener,
|
|
772
805
|
};
|
|
773
806
|
};
|
|
807
|
+
/**
|
|
808
|
+
* The overlay that is being animated also needs to hide from screen
|
|
809
|
+
* readers during its animation. This ensures that assistive technologies
|
|
810
|
+
* like TalkBack do not announce or interact with the content until the
|
|
811
|
+
* animation is complete, avoiding confusion for users.
|
|
812
|
+
*
|
|
813
|
+
* If the overlay is being presented, it prevents focus rings from appearing
|
|
814
|
+
* in incorrect positions due to the transition (specifically `transform`
|
|
815
|
+
* styles), ensuring that when aria-hidden is removed, the focus rings are
|
|
816
|
+
* correctly displayed in the final location of the elements.
|
|
817
|
+
*
|
|
818
|
+
* @param overlay - The overlay that is being animated.
|
|
819
|
+
*/
|
|
820
|
+
const hideAnimatingOverlayFromScreenReaders = (overlay) => {
|
|
821
|
+
if (doc === undefined)
|
|
822
|
+
return;
|
|
823
|
+
/**
|
|
824
|
+
* Once the animation is complete, this attribute will be removed.
|
|
825
|
+
* This is done at the end of the `present` method.
|
|
826
|
+
*/
|
|
827
|
+
overlay.setAttribute('aria-hidden', 'true');
|
|
828
|
+
};
|
|
774
829
|
/**
|
|
775
830
|
* Ensure that underlying overlays have aria-hidden if necessary so that screen readers
|
|
776
831
|
* cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
|
|
@@ -781,7 +836,7 @@ export const createTriggerController = () => {
|
|
|
781
836
|
* @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
|
|
782
837
|
* fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
|
|
783
838
|
*/
|
|
784
|
-
const
|
|
839
|
+
const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
|
|
785
840
|
var _a;
|
|
786
841
|
if (doc === undefined)
|
|
787
842
|
return;
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2024-
|
|
2
|
+
"timestamp": "2024-10-31T13:44:28",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.20.0",
|
|
@@ -2202,7 +2202,46 @@
|
|
|
2202
2202
|
"docsTags": [],
|
|
2203
2203
|
"usage": {},
|
|
2204
2204
|
"props": [],
|
|
2205
|
-
"methods": [
|
|
2205
|
+
"methods": [
|
|
2206
|
+
{
|
|
2207
|
+
"name": "setFocus",
|
|
2208
|
+
"returns": {
|
|
2209
|
+
"type": "Promise<void>",
|
|
2210
|
+
"docs": ""
|
|
2211
|
+
},
|
|
2212
|
+
"complexType": {
|
|
2213
|
+
"signature": "(elements: HTMLElement[]) => Promise<void>",
|
|
2214
|
+
"parameters": [
|
|
2215
|
+
{
|
|
2216
|
+
"name": "elements",
|
|
2217
|
+
"type": "HTMLElement[]",
|
|
2218
|
+
"docs": ""
|
|
2219
|
+
}
|
|
2220
|
+
],
|
|
2221
|
+
"references": {
|
|
2222
|
+
"Promise": {
|
|
2223
|
+
"location": "global",
|
|
2224
|
+
"id": "global::Promise"
|
|
2225
|
+
},
|
|
2226
|
+
"HTMLElement": {
|
|
2227
|
+
"location": "global",
|
|
2228
|
+
"id": "global::HTMLElement"
|
|
2229
|
+
}
|
|
2230
|
+
},
|
|
2231
|
+
"return": "Promise<void>"
|
|
2232
|
+
},
|
|
2233
|
+
"signature": "setFocus(elements: HTMLElement[]) => Promise<void>",
|
|
2234
|
+
"parameters": [
|
|
2235
|
+
{
|
|
2236
|
+
"name": "elements",
|
|
2237
|
+
"type": "HTMLElement[]",
|
|
2238
|
+
"docs": ""
|
|
2239
|
+
}
|
|
2240
|
+
],
|
|
2241
|
+
"docs": "Used to set focus on an element that uses `ion-focusable`.\nDo not use this if focusing the element as a result of a keyboard\nevent as the focus utility should handle this for us. This method\nshould be used when we want to programmatically focus an element as\na result of another user action. (Ex: We focus the first element\ninside of a popover when the user presents it, but the popover is not always\npresented as a result of keyboard action.)",
|
|
2242
|
+
"docsTags": []
|
|
2243
|
+
}
|
|
2244
|
+
],
|
|
2206
2245
|
"events": [],
|
|
2207
2246
|
"listeners": [],
|
|
2208
2247
|
"styles": [],
|
package/dist/esm/index.js
CHANGED
|
@@ -12,7 +12,7 @@ export { c as componentOnReady } from './helpers-da915de8.js';
|
|
|
12
12
|
export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-49c88215.js';
|
|
13
13
|
export { o as openURL } from './theme-01f3f29c.js';
|
|
14
14
|
export { m as menuController } from './index-fe1782b1.js';
|
|
15
|
-
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-
|
|
15
|
+
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-ae10d43d.js';
|
|
16
16
|
import './index-a5d50daf.js';
|
|
17
17
|
import './index-28849c61.js';
|
|
18
18
|
import './index-9b0d46f4.js';
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, e as readTask, h, f as Host, i
|
|
|
5
5
|
import { c as createButtonActiveGesture } from './button-active-f6503382.js';
|
|
6
6
|
import { r as raf } from './helpers-da915de8.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
8
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-ae10d43d.js';
|
|
9
9
|
import { g as getClassMap } from './theme-01f3f29c.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
11
11
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|
|
@@ -298,10 +298,10 @@ const ActionSheet = class {
|
|
|
298
298
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
299
299
|
return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
300
300
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
301
|
-
}, 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: '
|
|
301
|
+
}, 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: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, h("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', id: headerID, class: {
|
|
302
302
|
'action-sheet-title': true,
|
|
303
303
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
304
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
304
|
+
} }, header, this.subHeader && h("div", { key: '66093728052eb67f37a35f3232761ce4a08896f3', 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: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), h("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
|
|
305
305
|
}
|
|
306
306
|
get el() { return getElement(this); }
|
|
307
307
|
static get watchers() { return {
|
|
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
|
|
|
6
6
|
import { c as createButtonActiveGesture } from './button-active-f6503382.js';
|
|
7
7
|
import { r as raf } from './helpers-da915de8.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
9
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-
|
|
9
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ae10d43d.js';
|
|
10
10
|
import { g as getClassMap } from './theme-01f3f29c.js';
|
|
11
11
|
import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
12
12
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|
|
@@ -496,7 +496,7 @@ const Alert = class {
|
|
|
496
496
|
const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
|
|
497
497
|
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: {
|
|
498
498
|
zIndex: `${20000 + overlayIndex}`,
|
|
499
|
-
}, 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: '
|
|
499
|
+
}, 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: '8ea08a2a70239e817442c12596f51b108aca428c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '215ca5d72b8b180788e9748f5f22de01fa5a152a', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '9880acd318428d4b5d670c67dd156477877f99f2', class: "alert-head" }, header && (h("h2", { key: '612dec8dc9bfdcb36e1e4655dc214b7c229b20c8', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'e3c54c80a1cd9399595064b5a0a887c16fdc8ff8', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '9062655e906b5caf36df6f742fd412552ae510be', tabindex: "0", "aria-hidden": "true" })));
|
|
500
500
|
}
|
|
501
501
|
get el() { return getElement(this); }
|
|
502
502
|
static get watchers() { return {
|
|
@@ -66,7 +66,6 @@ const App = class {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
/**
|
|
69
|
-
* @internal
|
|
70
69
|
* Used to set focus on an element that uses `ion-focusable`.
|
|
71
70
|
* Do not use this if focusing the element as a result of a keyboard
|
|
72
71
|
* event as the focus utility should handle this for us. This method
|
|
@@ -82,7 +81,7 @@ const App = class {
|
|
|
82
81
|
}
|
|
83
82
|
render() {
|
|
84
83
|
const mode = getIonMode(this);
|
|
85
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: 'e95cdeb2709edbc74f4e6ebf77cb110154605b72', class: {
|
|
86
85
|
[mode]: true,
|
|
87
86
|
'ion-page': true,
|
|
88
87
|
'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
|
|
@@ -32,7 +32,7 @@ const Backdrop = class {
|
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
34
|
const mode = getIonMode(this);
|
|
35
|
-
return (h(Host, { key: '
|
|
35
|
+
return (h(Host, { key: 'fe191068e2aaadfdbe7a463c08d227a1b36d7a98', "aria-hidden": "true", class: {
|
|
36
36
|
[mode]: true,
|
|
37
37
|
'backdrop-hide': !this.visible,
|
|
38
38
|
'backdrop-no-tappable': !this.tappable,
|
|
@@ -11,7 +11,7 @@ import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSh
|
|
|
11
11
|
import { b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
12
12
|
import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as convertToArrayOfNumbers, u as convertDataToISO, x as getToday, y as getClosestValidDate, z as generateMonths, A as getNumDaysInMonth, B as getCombinedDateColumnData, C as getMonthColumnData, D as getDayColumnData, E as getYearColumnData, F as isMonthFirstLocale, G as getTimeColumnsData, H as isLocaleDayPeriodRTL, I as getDaysOfWeek, J as getMonthAndYear, K as getDaysOfMonth, L as getHourCycle, M as getLocalizedTime, N as getLocalizedDateTime, O as formatValue, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-ae11fd43.js';
|
|
13
13
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
14
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-
|
|
14
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ae10d43d.js';
|
|
15
15
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|
|
16
16
|
import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-ac164e4c.js';
|
|
17
17
|
import './index-a5d50daf.js';
|
|
@@ -2030,7 +2030,7 @@ const Picker = class {
|
|
|
2030
2030
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2031
2031
|
}, class: Object.assign({ [mode]: true,
|
|
2032
2032
|
// Used internally for styling
|
|
2033
|
-
[`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: '
|
|
2033
|
+
[`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: '65eba425990a21be00fdac90de20a630d284cf97', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'd78ada360801b2c051baa030751f3d83ac81e697', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'd5bd9ddfbdbdaf42048a1496e7939eb3aee6da65', 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: '96ee1e3ec77c57174b1a93135b66bea6b7002555', class: "picker-columns" }, h("div", { key: 'e11b1c238f350e65bde2ee67eee9d71c830e74e7', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '4d5fc7c723185111ec01fd34ef95a897c301238d', class: "picker-below-highlight" }))), h("div", { key: '899bcad97609c1d971c1b886551db5ba0248a9f4', tabindex: "0", "aria-hidden": "true" })));
|
|
2034
2034
|
}
|
|
2035
2035
|
get el() { return getElement(this); }
|
|
2036
2036
|
static get watchers() { return {
|
|
@@ -25,6 +25,8 @@ const Input = class {
|
|
|
25
25
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
26
26
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
27
27
|
this.inputId = `ion-input-${inputIds++}`;
|
|
28
|
+
this.helperTextId = `${this.inputId}-helper-text`;
|
|
29
|
+
this.errorTextId = `${this.inputId}-error-text`;
|
|
28
30
|
this.inheritedAttributes = {};
|
|
29
31
|
this.isComposing = false;
|
|
30
32
|
/**
|
|
@@ -297,8 +299,21 @@ const Input = class {
|
|
|
297
299
|
* Renders the helper text or error text values
|
|
298
300
|
*/
|
|
299
301
|
renderHintText() {
|
|
300
|
-
const { helperText, errorText } = this;
|
|
301
|
-
return [
|
|
302
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
303
|
+
return [
|
|
304
|
+
h("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
305
|
+
h("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
306
|
+
];
|
|
307
|
+
}
|
|
308
|
+
getHintTextID() {
|
|
309
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
310
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
311
|
+
return errorTextId;
|
|
312
|
+
}
|
|
313
|
+
if (helperText) {
|
|
314
|
+
return helperTextId;
|
|
315
|
+
}
|
|
316
|
+
return undefined;
|
|
302
317
|
}
|
|
303
318
|
renderCounter() {
|
|
304
319
|
const { counter, maxlength, counterFormatter, value } = this;
|
|
@@ -405,7 +420,7 @@ const Input = class {
|
|
|
405
420
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
406
421
|
*/
|
|
407
422
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
408
|
-
return (h(Host, { key: '
|
|
423
|
+
return (h(Host, { key: 'cdde9963d71685e6a4f3f3b3bc52e75d022435cb', class: createColorClasses(this.color, {
|
|
409
424
|
[mode]: true,
|
|
410
425
|
'has-value': hasValue,
|
|
411
426
|
'has-focus': hasFocus,
|
|
@@ -416,7 +431,7 @@ const Input = class {
|
|
|
416
431
|
'in-item': inItem,
|
|
417
432
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
418
433
|
'input-disabled': disabled,
|
|
419
|
-
}) }, h("label", { key: '
|
|
434
|
+
}) }, h("label", { key: '4412791c93405f20e50e50363879265180b6078f', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '5c71c43ef3eeb44dde76ed64ce10763834c8fbc7', class: "native-wrapper" }, h("slot", { key: '1d86b58dc299a4208dd02ccdc9ceaea7576698c3', name: "start" }), h("input", Object.assign({ key: '7fc932174485f7d09e6a797dfd49ea11fbad71b6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '46de455e4e308b8d7640b04778f7c7559b4124c6', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
420
435
|
/**
|
|
421
436
|
* This prevents mobile browsers from
|
|
422
437
|
* blurring the input when the clear
|
|
@@ -431,7 +446,7 @@ const Input = class {
|
|
|
431
446
|
* for screen readers as it means users would be unable to swipe past the clear button.
|
|
432
447
|
*/
|
|
433
448
|
ev.stopPropagation();
|
|
434
|
-
}, onClick: this.clearTextInput }, h("ion-icon", { key: '
|
|
449
|
+
}, onClick: this.clearTextInput }, h("ion-icon", { key: '375e860a20e1807ce0db0e1934a0650fe9929966', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '859d47a1b88aa8377479e5d11e52a6a1c1c30e7e', name: "end" })), shouldRenderHighlight && h("div", { key: 'd2d4286b348107e33247b5c0afda0f8bd697ecee', class: "input-highlight" })), this.renderBottomContent()));
|
|
435
450
|
}
|
|
436
451
|
get el() { return getElement(this); }
|
|
437
452
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, f as Host, i as getElement
|
|
|
5
5
|
import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-49c88215.js';
|
|
6
6
|
import { r as raf } from './helpers-da915de8.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
8
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-ae10d43d.js';
|
|
9
9
|
import { g as getClassMap } from './theme-01f3f29c.js';
|
|
10
10
|
import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
11
11
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|
|
@@ -263,7 +263,7 @@ const Loading = class {
|
|
|
263
263
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
264
264
|
return (h(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
265
265
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
266
|
-
}, 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: '
|
|
266
|
+
}, 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: '7ad4447fafa49aa861d311221b8c2e8171b4c610', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1879df0d895eb8ee20ccdc94dd35d708c1140b91', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '220f292c136681f5fa91f94669aac75b15e490ce', class: "loading-spinner" }, h("ion-spinner", { key: 'd599084a1426d941bdd080a988d8ad5b9589b823', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'e443897b353a48e0c72718dba04d83d7c5070d73', tabindex: "0", "aria-hidden": "true" })));
|
|
267
267
|
}
|
|
268
268
|
get el() { return getElement(this); }
|
|
269
269
|
static get watchers() { return {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, d as createEvent, h, f as Host, i as getElement } from './index-28849c61.js';
|
|
5
5
|
import { g as getTimeGivenProgression } from './cubic-bezier-fe2083dc.js';
|
|
6
|
-
import { o as getPresentedOverlay, n as focusFirstDescendant, q as focusLastDescendant } from './overlays-
|
|
6
|
+
import { o as getPresentedOverlay, n as focusFirstDescendant, q as focusLastDescendant } from './overlays-ae10d43d.js';
|
|
7
7
|
import { G as GESTURE_CONTROLLER } from './gesture-controller-314a54f6.js';
|
|
8
8
|
import { shouldUseCloseWatcher } from './hardware-back-button-06ef3c3e.js';
|
|
9
9
|
import { n as isEndSide, i as inheritAriaAttributes, m as assert, j as clamp } from './helpers-da915de8.js';
|
|
@@ -8,7 +8,7 @@ import { g as getElementRoot, j as clamp, r as raf, h as inheritAttributes, k as
|
|
|
8
8
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
9
9
|
import { p as printIonWarning } from './index-9b0d46f4.js';
|
|
10
10
|
import { g as getCapacitor } from './capacitor-59395cbd.js';
|
|
11
|
-
import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-
|
|
11
|
+
import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-ae10d43d.js';
|
|
12
12
|
import { g as getClassMap } from './theme-01f3f29c.js';
|
|
13
13
|
import { e as deepReady, w as waitForMount } from './index-3ad7f18b.js';
|
|
14
14
|
import { b as getIonMode, c as config } from './ionic-global-c81d82ab.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, d as createEvent, h, f as Host, i as getElement } from './index-28849c61.js';
|
|
5
|
-
import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-
|
|
5
|
+
import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-ae10d43d.js';
|
|
6
6
|
import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-63d1a679.js';
|
|
7
7
|
import { r as raf, g as getElementRoot, a as addEventListener, k as hasLazyBuild } from './helpers-da915de8.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
@@ -284,21 +284,34 @@ const Segment = class {
|
|
|
284
284
|
*/
|
|
285
285
|
const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
|
|
286
286
|
/**
|
|
287
|
-
*
|
|
287
|
+
* newScrollPosition is the absolute scroll position that the
|
|
288
|
+
* container needs to move to in order to center the active button.
|
|
289
|
+
* It is calculated by adding the current scroll position
|
|
290
|
+
* (scrollLeft) to the offset needed to center the button
|
|
291
|
+
* (centeredX).
|
|
292
|
+
*/
|
|
293
|
+
const newScrollPosition = el.scrollLeft + centeredX;
|
|
294
|
+
/**
|
|
295
|
+
* We intentionally use scrollTo here instead of scrollIntoView
|
|
288
296
|
* to avoid a WebKit bug where accelerated animations break
|
|
289
297
|
* when using scrollIntoView. Using scrollIntoView will cause the
|
|
290
298
|
* segment container to jump during the transition and then snap into place.
|
|
291
299
|
* This is because scrollIntoView can potentially cause parent element
|
|
292
|
-
* containers to also scroll.
|
|
300
|
+
* containers to also scroll. scrollTo does not have this same behavior, so
|
|
293
301
|
* we use this API instead.
|
|
294
302
|
*
|
|
303
|
+
* scrollTo is used instead of scrollBy because there is a
|
|
304
|
+
* Webkit bug that causes scrollBy to not work smoothly when
|
|
305
|
+
* the active button is near the edge of the scroll container.
|
|
306
|
+
* This leads to the buttons to jump around during the transition.
|
|
307
|
+
*
|
|
295
308
|
* Note that if there is not enough scrolling space to center the element
|
|
296
309
|
* within the scroll container, the browser will attempt
|
|
297
310
|
* to center by as much as it can.
|
|
298
311
|
*/
|
|
299
|
-
el.
|
|
312
|
+
el.scrollTo({
|
|
300
313
|
top: 0,
|
|
301
|
-
left:
|
|
314
|
+
left: newScrollPosition,
|
|
302
315
|
behavior: smoothScroll ? 'smooth' : 'instant',
|
|
303
316
|
});
|
|
304
317
|
}
|
|
@@ -427,14 +440,14 @@ const Segment = class {
|
|
|
427
440
|
}
|
|
428
441
|
render() {
|
|
429
442
|
const mode = getIonMode(this);
|
|
430
|
-
return (h(Host, { key: '
|
|
443
|
+
return (h(Host, { key: 'f1f7103b4c298e037df850ac809a1a7c6e9987a7', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
431
444
|
[mode]: true,
|
|
432
445
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
433
446
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
434
447
|
'segment-activated': this.activated,
|
|
435
448
|
'segment-disabled': this.disabled,
|
|
436
449
|
'segment-scrollable': this.scrollable,
|
|
437
|
-
}) }, h("slot", { key: '
|
|
450
|
+
}) }, h("slot", { key: '6efdb318b13da8d21687084aa0761728fdf12579', onSlotchange: this.onSlottedItemsChange })));
|
|
438
451
|
}
|
|
439
452
|
get el() { return getElement(this); }
|
|
440
453
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, f as Host, i as getElement,
|
|
|
5
5
|
import { c as createNotchController } from './notch-controller-55b09e11.js';
|
|
6
6
|
import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-a96ff2ea.js';
|
|
7
7
|
import { h as inheritAttributes, f as focusVisibleElement, d as renderHiddenInput } from './helpers-da915de8.js';
|
|
8
|
-
import { c as popoverController, b as actionSheetController, a as alertController, s as safeCall } from './overlays-
|
|
8
|
+
import { c as popoverController, b as actionSheetController, a as alertController, s as safeCall } from './overlays-ae10d43d.js';
|
|
9
9
|
import { i as isRTL } from './dir-babeabeb.js';
|
|
10
10
|
import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-01f3f29c.js';
|
|
11
11
|
import { w as watchForOptions } from './watch-options-c2911ace.js';
|
|
@@ -24,6 +24,8 @@ const Textarea = class {
|
|
|
24
24
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
25
25
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
26
26
|
this.inputId = `ion-textarea-${textareaIds++}`;
|
|
27
|
+
this.helperTextId = `${this.inputId}-helper-text`;
|
|
28
|
+
this.errorTextId = `${this.inputId}-error-text`;
|
|
27
29
|
/**
|
|
28
30
|
* `true` if the textarea was cleared as a result of the user typing
|
|
29
31
|
* with `clearOnEdit` enabled.
|
|
@@ -311,8 +313,21 @@ const Textarea = class {
|
|
|
311
313
|
* Renders the helper text or error text values
|
|
312
314
|
*/
|
|
313
315
|
renderHintText() {
|
|
314
|
-
const { helperText, errorText } = this;
|
|
315
|
-
return [
|
|
316
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
317
|
+
return [
|
|
318
|
+
h("div", { id: helperTextId, class: "helper-text" }, helperText),
|
|
319
|
+
h("div", { id: errorTextId, class: "error-text" }, errorText),
|
|
320
|
+
];
|
|
321
|
+
}
|
|
322
|
+
getHintTextID() {
|
|
323
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
324
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
325
|
+
return errorTextId;
|
|
326
|
+
}
|
|
327
|
+
if (helperText) {
|
|
328
|
+
return helperTextId;
|
|
329
|
+
}
|
|
330
|
+
return undefined;
|
|
316
331
|
}
|
|
317
332
|
renderCounter() {
|
|
318
333
|
const { counter, maxlength, counterFormatter, value } = this;
|
|
@@ -365,7 +380,7 @@ const Textarea = class {
|
|
|
365
380
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
366
381
|
*/
|
|
367
382
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
368
|
-
return (h(Host, { key: '
|
|
383
|
+
return (h(Host, { key: 'e8a5b5727c6a018bbd6f5507b690bc5f0959e352', class: createColorClasses(this.color, {
|
|
369
384
|
[mode]: true,
|
|
370
385
|
'has-value': hasValue,
|
|
371
386
|
'has-focus': hasFocus,
|
|
@@ -374,7 +389,7 @@ const Textarea = class {
|
|
|
374
389
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
375
390
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
376
391
|
'textarea-disabled': disabled,
|
|
377
|
-
}) }, h("label", { key: '
|
|
392
|
+
}) }, h("label", { key: '48e889571e2d3e7e150b038e4b4b15862b418288', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '6c6c7872ae4d351d8b8d772ad18ce3ba7a0e9a87', class: "textarea-wrapper-inner" }, h("div", { key: '03aef5dfa59af0fa78a3e5c92e0ed72396717d72', class: "start-slot-wrapper" }, h("slot", { key: '39aee9faebb0f1d10de5a5817fd9d9771b074b96', name: "start" })), h("div", { key: '738e8ff603f4c9b9083b3139db861f4b7ec20f79', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '7763fb4f8ffe94635167331c70d21d661544c4f8', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: 'b3af9ec0982c6dbd381afaa02df153d7e90471be', class: "end-slot-wrapper" }, h("slot", { key: '60f99bcd49a5ec2e1fa6e3e77809aefeb9d2d0d6', name: "end" }))), shouldRenderHighlight && h("div", { key: '6a7f45639ba027f4da573adae53f1197a6dec383', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
378
393
|
}
|
|
379
394
|
get el() { return getElement(this); }
|
|
380
395
|
static get watchers() { return {
|
|
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
|
|
|
6
6
|
import { g as getElementRoot, r as raf } from './helpers-da915de8.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-316928be.js';
|
|
8
8
|
import { p as printIonWarning } from './index-9b0d46f4.js';
|
|
9
|
-
import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-
|
|
9
|
+
import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-ae10d43d.js';
|
|
10
10
|
import { c as createColorClasses, g as getClassMap } from './theme-01f3f29c.js';
|
|
11
11
|
import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
12
12
|
import { c as createAnimation } from './animation-eab5a4ca.js';
|