@ionic/core 8.7.6-nightly.20251008 → 8.7.7-dev.11761071592.1d1b804d
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox.js +4 -7
- package/components/header.js +1 -1
- package/components/index2.js +74 -3
- package/components/ion-toggle.js +4 -7
- package/dist/cjs/{index-CD5Rjp23.js → index-094mMFB-.js} +76 -5
- package/dist/cjs/index.cjs.js +3 -3
- package/dist/cjs/ion-app_8.cjs.entry.js +2 -2
- package/dist/cjs/ion-checkbox.cjs.entry.js +4 -7
- package/dist/cjs/ion-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-nav_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-toggle.cjs.entry.js +4 -7
- package/dist/cjs/{ios.transition-j9CclgEW.js → ios.transition-BOt_uW73.js} +1 -1
- package/dist/cjs/{md.transition-CwFyRSfv.js → md.transition-Dt968VXB.js} +1 -1
- package/dist/collection/components/checkbox/checkbox.js +4 -7
- package/dist/collection/components/header/header.ios.css +27 -1
- package/dist/collection/components/toggle/toggle.js +4 -7
- package/dist/collection/utils/test/playwright/page/utils/spy-on-event.js +34 -0
- package/dist/collection/utils/transition/index.js +74 -3
- package/dist/docs.json +1 -1
- package/dist/esm/{index-D6G2seR8.js → index-r2D9DEro.js} +76 -5
- package/dist/esm/index.js +3 -3
- package/dist/esm/ion-app_8.entry.js +2 -2
- package/dist/esm/ion-checkbox.entry.js +4 -7
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-nav_2.entry.js +1 -1
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-toggle.entry.js +4 -7
- package/dist/esm/{ios.transition-Bpq9ixwv.js → ios.transition-BDzw0_Hm.js} +1 -1
- package/dist/esm/{md.transition-zOA0oanq.js → md.transition-BzDYi3qq.js} +1 -1
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-013c0591.entry.js +4 -0
- package/dist/ionic/p-7647da93.entry.js +4 -0
- package/dist/ionic/{p-DPhQmGJN.js → p-C7hRNDhM.js} +1 -1
- package/dist/ionic/p-DUt5fQmA.js +4 -0
- package/dist/ionic/{p-9R1XyICs.js → p-DZRJwG4S.js} +1 -1
- package/dist/ionic/{p-c59314fd.entry.js → p-a80f1b04.entry.js} +1 -1
- package/dist/ionic/{p-c85c40ee.entry.js → p-dbbe606a.entry.js} +1 -1
- package/dist/ionic/{p-de7b5fa3.entry.js → p-e16b69e1.entry.js} +1 -1
- package/dist/ionic/p-e693b1cd.entry.js +4 -0
- package/dist/types/components/checkbox/checkbox.d.ts +0 -1
- package/dist/types/components/toggle/toggle.d.ts +0 -1
- package/dist/types/utils/transition/index.d.ts +9 -0
- package/hydrate/index.js +83 -18
- package/hydrate/index.mjs +83 -18
- package/package.json +1 -1
- package/dist/ionic/p-49f0149c.entry.js +0 -4
- package/dist/ionic/p-83fc84e7.entry.js +0 -4
- package/dist/ionic/p-CMhMiYSX.js +0 -4
- package/dist/ionic/p-c17c0a01.entry.js +0 -4
|
@@ -139,7 +139,6 @@ export class Toggle {
|
|
|
139
139
|
const { checked, value } = this;
|
|
140
140
|
const isNowChecked = !checked;
|
|
141
141
|
this.checked = isNowChecked;
|
|
142
|
-
this.setFocus();
|
|
143
142
|
this.ionChange.emit({
|
|
144
143
|
checked: isNowChecked,
|
|
145
144
|
value,
|
|
@@ -190,9 +189,7 @@ export class Toggle {
|
|
|
190
189
|
return this.value || '';
|
|
191
190
|
}
|
|
192
191
|
setFocus() {
|
|
193
|
-
|
|
194
|
-
this.focusEl.focus();
|
|
195
|
-
}
|
|
192
|
+
this.el.focus();
|
|
196
193
|
}
|
|
197
194
|
renderOnOffSwitchLabels(mode, checked) {
|
|
198
195
|
const icon = this.getSwitchLabelIcon(mode, checked);
|
|
@@ -242,7 +239,7 @@ export class Toggle {
|
|
|
242
239
|
const value = this.getValue();
|
|
243
240
|
const rtl = isRTL(el) ? 'rtl' : 'ltr';
|
|
244
241
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
245
|
-
return (h(Host, { key: '
|
|
242
|
+
return (h(Host, { key: 'dddb1015bca6ef24df9dfd62439fd80df714946e', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), class: createColorClasses(color, {
|
|
246
243
|
[mode]: true,
|
|
247
244
|
'in-item': hostContext('ion-item', el),
|
|
248
245
|
'toggle-activated': activated,
|
|
@@ -252,10 +249,10 @@ export class Toggle {
|
|
|
252
249
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
253
250
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
254
251
|
[`toggle-${rtl}`]: true,
|
|
255
|
-
}) }, h("label", { key: '
|
|
252
|
+
}) }, h("label", { key: '0792d8b50212236905702ca43da3259c061ffcae', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '5bbd595d1ad7552dcb76aabeafd0392cb73fd422', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'aef8cd26ccace4bb3b8077fe593ffce2e460c05c', class: {
|
|
256
253
|
'label-text-wrapper': true,
|
|
257
254
|
'label-text-wrapper-hidden': !hasLabel,
|
|
258
|
-
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '
|
|
255
|
+
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'fc2988a91d55cd158e734b8eb9c9a2efc3fc7a36' }), this.renderHintText()), h("div", { key: '86a065669073dfc7f699b7a910fc61b5ab68d5db', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
259
256
|
}
|
|
260
257
|
static get is() { return "ion-toggle"; }
|
|
261
258
|
static get encapsulation() { return "shadow"; }
|
|
@@ -3,6 +3,40 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { addE2EListener, EventSpy } from "../event-spy";
|
|
5
5
|
export const spyOnEvent = async (page, eventName) => {
|
|
6
|
+
/**
|
|
7
|
+
* Tabbing out of the page boundary can lead to unreliable `ionBlur events,
|
|
8
|
+
* particularly in Firefox.
|
|
9
|
+
*
|
|
10
|
+
* This occurs because Playwright may incorrectly maintain focus state on the
|
|
11
|
+
* last element, even after a Tab press attempts to shift focus outside the
|
|
12
|
+
* viewport. To reliably trigger the necessary blur event, add a visually
|
|
13
|
+
* hidden, focusable element at the end of the page to receive focus instead of
|
|
14
|
+
* the browser.
|
|
15
|
+
*
|
|
16
|
+
* Playwright issue reference:
|
|
17
|
+
* https://github.com/microsoft/playwright/issues/32269
|
|
18
|
+
*/
|
|
19
|
+
if (eventName === 'ionBlur') {
|
|
20
|
+
const hiddenInput = await page.$('#hidden-input-for-ion-blur');
|
|
21
|
+
if (!hiddenInput) {
|
|
22
|
+
await page.evaluate(() => {
|
|
23
|
+
const input = document.createElement('input');
|
|
24
|
+
input.id = 'hidden-input-for-ion-blur';
|
|
25
|
+
input.style.position = 'absolute';
|
|
26
|
+
input.style.opacity = '0';
|
|
27
|
+
input.style.height = '0';
|
|
28
|
+
input.style.width = '0';
|
|
29
|
+
input.style.pointerEvents = 'none';
|
|
30
|
+
document.body.appendChild(input);
|
|
31
|
+
// Add console warning to indicate presence of hidden input.
|
|
32
|
+
console.warn('[Ionic Warning]: Hidden input for ionBlur added to the page for Playwright testing.');
|
|
33
|
+
// Clean up the element when the page is unloaded.
|
|
34
|
+
window.addEventListener('unload', () => {
|
|
35
|
+
input.remove();
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}
|
|
6
40
|
const spy = new EventSpy(eventName);
|
|
7
41
|
const handle = await page.evaluateHandle(() => window);
|
|
8
42
|
await addE2EListener(page, handle, eventName, (ev) => spy.push(ev));
|
|
@@ -10,11 +10,22 @@ const iosTransitionAnimation = () => import('./ios.transition');
|
|
|
10
10
|
const mdTransitionAnimation = () => import('./md.transition');
|
|
11
11
|
const focusController = createFocusController();
|
|
12
12
|
// TODO(FW-2832): types
|
|
13
|
+
/**
|
|
14
|
+
* Executes the main page transition.
|
|
15
|
+
* It also manages the lifecycle of header visibility (if any)
|
|
16
|
+
* to prevent visual flickering in iOS. The flickering only
|
|
17
|
+
* occurs for a condensed header that is placed above the content.
|
|
18
|
+
*
|
|
19
|
+
* @param opts Options for the transition.
|
|
20
|
+
* @returns A promise that resolves when the transition is complete.
|
|
21
|
+
*/
|
|
13
22
|
export const transition = (opts) => {
|
|
14
23
|
return new Promise((resolve, reject) => {
|
|
15
24
|
writeTask(() => {
|
|
16
|
-
|
|
17
|
-
|
|
25
|
+
const transitioningInactiveHeader = getIosIonHeader(opts);
|
|
26
|
+
beforeTransition(opts, transitioningInactiveHeader);
|
|
27
|
+
runTransition(opts)
|
|
28
|
+
.then((result) => {
|
|
18
29
|
if (result.animation) {
|
|
19
30
|
result.animation.destroy();
|
|
20
31
|
}
|
|
@@ -23,15 +34,21 @@ export const transition = (opts) => {
|
|
|
23
34
|
}, (error) => {
|
|
24
35
|
afterTransition(opts);
|
|
25
36
|
reject(error);
|
|
37
|
+
})
|
|
38
|
+
.finally(() => {
|
|
39
|
+
// Ensure that the header is restored to its original state.
|
|
40
|
+
setHeaderTransitionClass(transitioningInactiveHeader, false);
|
|
26
41
|
});
|
|
27
42
|
});
|
|
28
43
|
});
|
|
29
44
|
};
|
|
30
|
-
const beforeTransition = (opts) => {
|
|
45
|
+
const beforeTransition = (opts, transitioningInactiveHeader) => {
|
|
31
46
|
const enteringEl = opts.enteringEl;
|
|
32
47
|
const leavingEl = opts.leavingEl;
|
|
33
48
|
focusController.saveViewFocus(leavingEl);
|
|
34
49
|
setZIndex(enteringEl, leavingEl, opts.direction);
|
|
50
|
+
// Prevent flickering of the header by adding a class.
|
|
51
|
+
setHeaderTransitionClass(transitioningInactiveHeader, true);
|
|
35
52
|
if (opts.showGoBack) {
|
|
36
53
|
enteringEl.classList.add('can-go-back');
|
|
37
54
|
}
|
|
@@ -220,6 +237,39 @@ const setZIndex = (enteringEl, leavingEl, direction) => {
|
|
|
220
237
|
leavingEl.style.zIndex = '100';
|
|
221
238
|
}
|
|
222
239
|
};
|
|
240
|
+
/**
|
|
241
|
+
* Add a class to ensure that the header (if any)
|
|
242
|
+
* does not flicker during the transition. By adding the
|
|
243
|
+
* transitioning class, we ensure that the header has
|
|
244
|
+
* the necessary styles to prevent the following flickers:
|
|
245
|
+
* 1. When entering a page with a condensed header, the
|
|
246
|
+
* header should never be visible. However,
|
|
247
|
+
* it briefly renders the background color while
|
|
248
|
+
* the transition is occurring.
|
|
249
|
+
* 2. When leaving a page with a condensed header, the
|
|
250
|
+
* header has an opacity of 0 and the pages
|
|
251
|
+
* have a z-index which causes the entering page to
|
|
252
|
+
* briefly show it's content underneath the leaving page.
|
|
253
|
+
* 3. When entering a page or leaving a page with a fade
|
|
254
|
+
* header, the header should not have a background color.
|
|
255
|
+
* However, it briefly shows the background color while
|
|
256
|
+
* the transition is occurring.
|
|
257
|
+
*
|
|
258
|
+
* @param header The header element to modify.
|
|
259
|
+
* @param isTransitioning Whether the transition is occurring.
|
|
260
|
+
*/
|
|
261
|
+
const setHeaderTransitionClass = (header, isTransitioning) => {
|
|
262
|
+
if (!header) {
|
|
263
|
+
return;
|
|
264
|
+
}
|
|
265
|
+
const transitionClass = 'header-transitioning';
|
|
266
|
+
if (isTransitioning) {
|
|
267
|
+
header.classList.add(transitionClass);
|
|
268
|
+
}
|
|
269
|
+
else {
|
|
270
|
+
header.classList.remove(transitionClass);
|
|
271
|
+
}
|
|
272
|
+
};
|
|
223
273
|
export const getIonPageElement = (element) => {
|
|
224
274
|
if (element.classList.contains('ion-page')) {
|
|
225
275
|
return element;
|
|
@@ -231,3 +281,24 @@ export const getIonPageElement = (element) => {
|
|
|
231
281
|
// idk, return the original element so at least something animates and we don't have a null pointer
|
|
232
282
|
return element;
|
|
233
283
|
};
|
|
284
|
+
/**
|
|
285
|
+
* Retrieves the ion-header element from a page based on the
|
|
286
|
+
* direction of the transition.
|
|
287
|
+
*
|
|
288
|
+
* @param opts Options for the transition.
|
|
289
|
+
* @returns The ion-header element or null if not found or not in 'ios' mode.
|
|
290
|
+
*/
|
|
291
|
+
const getIosIonHeader = (opts) => {
|
|
292
|
+
const enteringEl = opts.enteringEl;
|
|
293
|
+
const leavingEl = opts.leavingEl;
|
|
294
|
+
const direction = opts.direction;
|
|
295
|
+
const mode = opts.mode;
|
|
296
|
+
if (mode !== 'ios') {
|
|
297
|
+
return null;
|
|
298
|
+
}
|
|
299
|
+
const element = direction === 'back' ? leavingEl : enteringEl;
|
|
300
|
+
if (!element) {
|
|
301
|
+
return null;
|
|
302
|
+
}
|
|
303
|
+
return element.querySelector('ion-header');
|
|
304
|
+
};
|
package/dist/docs.json
CHANGED
|
@@ -118,15 +118,26 @@ const createFocusController = () => {
|
|
|
118
118
|
};
|
|
119
119
|
const LAST_FOCUS = 'ion-last-focus';
|
|
120
120
|
|
|
121
|
-
const iosTransitionAnimation = () => import('./ios.transition-
|
|
122
|
-
const mdTransitionAnimation = () => import('./md.transition-
|
|
121
|
+
const iosTransitionAnimation = () => import('./ios.transition-BDzw0_Hm.js');
|
|
122
|
+
const mdTransitionAnimation = () => import('./md.transition-BzDYi3qq.js');
|
|
123
123
|
const focusController = createFocusController();
|
|
124
124
|
// TODO(FW-2832): types
|
|
125
|
+
/**
|
|
126
|
+
* Executes the main page transition.
|
|
127
|
+
* It also manages the lifecycle of header visibility (if any)
|
|
128
|
+
* to prevent visual flickering in iOS. The flickering only
|
|
129
|
+
* occurs for a condensed header that is placed above the content.
|
|
130
|
+
*
|
|
131
|
+
* @param opts Options for the transition.
|
|
132
|
+
* @returns A promise that resolves when the transition is complete.
|
|
133
|
+
*/
|
|
125
134
|
const transition = (opts) => {
|
|
126
135
|
return new Promise((resolve, reject) => {
|
|
127
136
|
writeTask(() => {
|
|
128
|
-
|
|
129
|
-
|
|
137
|
+
const transitioningInactiveHeader = getIosIonHeader(opts);
|
|
138
|
+
beforeTransition(opts, transitioningInactiveHeader);
|
|
139
|
+
runTransition(opts)
|
|
140
|
+
.then((result) => {
|
|
130
141
|
if (result.animation) {
|
|
131
142
|
result.animation.destroy();
|
|
132
143
|
}
|
|
@@ -135,15 +146,21 @@ const transition = (opts) => {
|
|
|
135
146
|
}, (error) => {
|
|
136
147
|
afterTransition(opts);
|
|
137
148
|
reject(error);
|
|
149
|
+
})
|
|
150
|
+
.finally(() => {
|
|
151
|
+
// Ensure that the header is restored to its original state.
|
|
152
|
+
setHeaderTransitionClass(transitioningInactiveHeader, false);
|
|
138
153
|
});
|
|
139
154
|
});
|
|
140
155
|
});
|
|
141
156
|
};
|
|
142
|
-
const beforeTransition = (opts) => {
|
|
157
|
+
const beforeTransition = (opts, transitioningInactiveHeader) => {
|
|
143
158
|
const enteringEl = opts.enteringEl;
|
|
144
159
|
const leavingEl = opts.leavingEl;
|
|
145
160
|
focusController.saveViewFocus(leavingEl);
|
|
146
161
|
setZIndex(enteringEl, leavingEl, opts.direction);
|
|
162
|
+
// Prevent flickering of the header by adding a class.
|
|
163
|
+
setHeaderTransitionClass(transitioningInactiveHeader, true);
|
|
147
164
|
if (opts.showGoBack) {
|
|
148
165
|
enteringEl.classList.add('can-go-back');
|
|
149
166
|
}
|
|
@@ -332,6 +349,39 @@ const setZIndex = (enteringEl, leavingEl, direction) => {
|
|
|
332
349
|
leavingEl.style.zIndex = '100';
|
|
333
350
|
}
|
|
334
351
|
};
|
|
352
|
+
/**
|
|
353
|
+
* Add a class to ensure that the header (if any)
|
|
354
|
+
* does not flicker during the transition. By adding the
|
|
355
|
+
* transitioning class, we ensure that the header has
|
|
356
|
+
* the necessary styles to prevent the following flickers:
|
|
357
|
+
* 1. When entering a page with a condensed header, the
|
|
358
|
+
* header should never be visible. However,
|
|
359
|
+
* it briefly renders the background color while
|
|
360
|
+
* the transition is occurring.
|
|
361
|
+
* 2. When leaving a page with a condensed header, the
|
|
362
|
+
* header has an opacity of 0 and the pages
|
|
363
|
+
* have a z-index which causes the entering page to
|
|
364
|
+
* briefly show it's content underneath the leaving page.
|
|
365
|
+
* 3. When entering a page or leaving a page with a fade
|
|
366
|
+
* header, the header should not have a background color.
|
|
367
|
+
* However, it briefly shows the background color while
|
|
368
|
+
* the transition is occurring.
|
|
369
|
+
*
|
|
370
|
+
* @param header The header element to modify.
|
|
371
|
+
* @param isTransitioning Whether the transition is occurring.
|
|
372
|
+
*/
|
|
373
|
+
const setHeaderTransitionClass = (header, isTransitioning) => {
|
|
374
|
+
if (!header) {
|
|
375
|
+
return;
|
|
376
|
+
}
|
|
377
|
+
const transitionClass = 'header-transitioning';
|
|
378
|
+
if (isTransitioning) {
|
|
379
|
+
header.classList.add(transitionClass);
|
|
380
|
+
}
|
|
381
|
+
else {
|
|
382
|
+
header.classList.remove(transitionClass);
|
|
383
|
+
}
|
|
384
|
+
};
|
|
335
385
|
const getIonPageElement = (element) => {
|
|
336
386
|
if (element.classList.contains('ion-page')) {
|
|
337
387
|
return element;
|
|
@@ -343,5 +393,26 @@ const getIonPageElement = (element) => {
|
|
|
343
393
|
// idk, return the original element so at least something animates and we don't have a null pointer
|
|
344
394
|
return element;
|
|
345
395
|
};
|
|
396
|
+
/**
|
|
397
|
+
* Retrieves the ion-header element from a page based on the
|
|
398
|
+
* direction of the transition.
|
|
399
|
+
*
|
|
400
|
+
* @param opts Options for the transition.
|
|
401
|
+
* @returns The ion-header element or null if not found or not in 'ios' mode.
|
|
402
|
+
*/
|
|
403
|
+
const getIosIonHeader = (opts) => {
|
|
404
|
+
const enteringEl = opts.enteringEl;
|
|
405
|
+
const leavingEl = opts.leavingEl;
|
|
406
|
+
const direction = opts.direction;
|
|
407
|
+
const mode = opts.mode;
|
|
408
|
+
if (mode !== 'ios') {
|
|
409
|
+
return null;
|
|
410
|
+
}
|
|
411
|
+
const element = direction === 'back' ? leavingEl : enteringEl;
|
|
412
|
+
if (!element) {
|
|
413
|
+
return null;
|
|
414
|
+
}
|
|
415
|
+
return element.querySelector('ion-header');
|
|
416
|
+
};
|
|
346
417
|
|
|
347
418
|
export { LIFECYCLE_WILL_ENTER as L, LIFECYCLE_DID_ENTER as a, LIFECYCLE_WILL_LEAVE as b, LIFECYCLE_DID_LEAVE as c, LIFECYCLE_WILL_UNLOAD as d, deepReady as e, getIonPageElement as g, lifecycle as l, setPageHidden as s, transition as t, waitForMount as w };
|
package/dist/esm/index.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
export { c as createAnimation } from './animation-Dt8bGnA-.js';
|
|
5
|
-
export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-
|
|
6
|
-
export { iosTransitionAnimation } from './ios.transition-
|
|
7
|
-
export { mdTransitionAnimation } from './md.transition-
|
|
5
|
+
export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-r2D9DEro.js';
|
|
6
|
+
export { iosTransitionAnimation } from './ios.transition-BDzw0_Hm.js';
|
|
7
|
+
export { mdTransitionAnimation } from './md.transition-BzDYi3qq.js';
|
|
8
8
|
export { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
|
|
9
9
|
export { createGesture } from './index-CfgBF1SE.js';
|
|
10
10
|
export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-CDrldh-5.js';
|
|
@@ -12,7 +12,7 @@ import { c as createKeyboardController } from './keyboard-controller-BaaVITYt.js
|
|
|
12
12
|
import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
|
|
13
13
|
import { a as attachComponent, d as detachComponent } from './framework-delegate-BYawdMXj.js';
|
|
14
14
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
15
|
-
import { t as transition } from './index-
|
|
15
|
+
import { t as transition } from './index-r2D9DEro.js';
|
|
16
16
|
import './index-ZjP4CjeZ.js';
|
|
17
17
|
import './keyboard-CUw4ekVy.js';
|
|
18
18
|
import './capacitor-CFERIeaU.js';
|
|
@@ -902,7 +902,7 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
|
|
|
902
902
|
});
|
|
903
903
|
};
|
|
904
904
|
|
|
905
|
-
const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{
|
|
905
|
+
const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
|
|
906
906
|
|
|
907
907
|
const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
|
|
908
908
|
|
|
@@ -74,7 +74,6 @@ const Checkbox = class {
|
|
|
74
74
|
};
|
|
75
75
|
this.toggleChecked = (ev) => {
|
|
76
76
|
ev.preventDefault();
|
|
77
|
-
this.setFocus();
|
|
78
77
|
this.setChecked(!this.checked);
|
|
79
78
|
this.indeterminate = false;
|
|
80
79
|
};
|
|
@@ -111,9 +110,7 @@ const Checkbox = class {
|
|
|
111
110
|
}
|
|
112
111
|
/** @internal */
|
|
113
112
|
async setFocus() {
|
|
114
|
-
|
|
115
|
-
this.focusEl.focus();
|
|
116
|
-
}
|
|
113
|
+
this.el.focus();
|
|
117
114
|
}
|
|
118
115
|
getHintTextID() {
|
|
119
116
|
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
@@ -149,7 +146,7 @@ const Checkbox = class {
|
|
|
149
146
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
150
147
|
// The host element must have a checkbox role to ensure proper VoiceOver
|
|
151
148
|
// support in Safari for accessibility.
|
|
152
|
-
return (h(Host, { key: '
|
|
149
|
+
return (h(Host, { key: 'c63ab463a54067b59c3c9c90b54e2ed3bf5464a1', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), onClick: this.onClick, class: createColorClasses(color, {
|
|
153
150
|
[mode]: true,
|
|
154
151
|
'in-item': hostContext('ion-item', el),
|
|
155
152
|
'checkbox-checked': checked,
|
|
@@ -159,10 +156,10 @@ const Checkbox = class {
|
|
|
159
156
|
[`checkbox-justify-${justify}`]: justify !== undefined,
|
|
160
157
|
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
|
|
161
158
|
[`checkbox-label-placement-${labelPlacement}`]: true,
|
|
162
|
-
})
|
|
159
|
+
}) }, h("label", { key: 'b518692f79c49b20d59c243221f7ac94b74a9553', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'd66b8994dd794b9911bf322c15f0c0929a4840fa', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '8eb61446274ab8400bc86aa41fec03a73de08df7', class: {
|
|
163
160
|
'label-text-wrapper': true,
|
|
164
161
|
'label-text-wrapper-hidden': !hasLabelContent,
|
|
165
|
-
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '
|
|
162
|
+
}, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '4b690bd86420471d1be9b1329e5cc872351c6e23' }), this.renderHintText()), h("div", { key: 'f48fb369f999851b4da4d7442fe87024e56f5e77', class: "native-wrapper" }, h("svg", { key: '1471004d068eb1b522699f3fa0eb7ae2a3308186', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
|
|
166
163
|
}
|
|
167
164
|
getSVGPath(mode, indeterminate) {
|
|
168
165
|
let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
|
|
@@ -9,7 +9,7 @@ import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
|
9
9
|
import { g as getCapacitor } from './capacitor-CFERIeaU.js';
|
|
10
10
|
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-BymNv-BL.js';
|
|
11
11
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
12
|
-
import { e as deepReady, w as waitForMount } from './index-
|
|
12
|
+
import { e as deepReady, w as waitForMount } from './index-r2D9DEro.js';
|
|
13
13
|
import { b as getIonMode } from './ionic-global-CDrldh-5.js';
|
|
14
14
|
import { KEYBOARD_DID_OPEN } from './keyboard-ywgs5efA.js';
|
|
15
15
|
import { c as createAnimation } from './animation-Dt8bGnA-.js';
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { r as registerInstance, c as createEvent, e as config, f as printIonWarning, h, g as getElement, d as Host } from './index-C8IsBmNU.js';
|
|
5
5
|
import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
|
|
6
6
|
import { s as shallowEqualStringMap, l as assert } from './helpers-DEn3pfjm.js';
|
|
7
|
-
import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-
|
|
7
|
+
import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-r2D9DEro.js';
|
|
8
8
|
import { b as getIonMode } from './ionic-global-CDrldh-5.js';
|
|
9
9
|
import { a as attachComponent } from './framework-delegate-BYawdMXj.js';
|
|
10
10
|
|
|
@@ -8,7 +8,7 @@ import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild
|
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
9
9
|
import { b as getIonMode, a as isPlatform } from './ionic-global-CDrldh-5.js';
|
|
10
10
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
11
|
-
import { e as deepReady, w as waitForMount } from './index-
|
|
11
|
+
import { e as deepReady, w as waitForMount } from './index-r2D9DEro.js';
|
|
12
12
|
import { c as createAnimation } from './animation-Dt8bGnA-.js';
|
|
13
13
|
import './index-ZjP4CjeZ.js';
|
|
14
14
|
import './hardware-back-button-CPLxO-Ev.js';
|
|
@@ -136,7 +136,6 @@ const Toggle = class {
|
|
|
136
136
|
const { checked, value } = this;
|
|
137
137
|
const isNowChecked = !checked;
|
|
138
138
|
this.checked = isNowChecked;
|
|
139
|
-
this.setFocus();
|
|
140
139
|
this.ionChange.emit({
|
|
141
140
|
checked: isNowChecked,
|
|
142
141
|
value,
|
|
@@ -187,9 +186,7 @@ const Toggle = class {
|
|
|
187
186
|
return this.value || '';
|
|
188
187
|
}
|
|
189
188
|
setFocus() {
|
|
190
|
-
|
|
191
|
-
this.focusEl.focus();
|
|
192
|
-
}
|
|
189
|
+
this.el.focus();
|
|
193
190
|
}
|
|
194
191
|
renderOnOffSwitchLabels(mode, checked) {
|
|
195
192
|
const icon = this.getSwitchLabelIcon(mode, checked);
|
|
@@ -239,7 +236,7 @@ const Toggle = class {
|
|
|
239
236
|
const value = this.getValue();
|
|
240
237
|
const rtl = isRTL(el) ? 'rtl' : 'ltr';
|
|
241
238
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
242
|
-
return (h(Host, { key: '
|
|
239
|
+
return (h(Host, { key: 'dddb1015bca6ef24df9dfd62439fd80df714946e', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), class: createColorClasses(color, {
|
|
243
240
|
[mode]: true,
|
|
244
241
|
'in-item': hostContext('ion-item', el),
|
|
245
242
|
'toggle-activated': activated,
|
|
@@ -249,10 +246,10 @@ const Toggle = class {
|
|
|
249
246
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
250
247
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
251
248
|
[`toggle-${rtl}`]: true,
|
|
252
|
-
}) }, h("label", { key: '
|
|
249
|
+
}) }, h("label", { key: '0792d8b50212236905702ca43da3259c061ffcae', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '5bbd595d1ad7552dcb76aabeafd0392cb73fd422', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'aef8cd26ccace4bb3b8077fe593ffce2e460c05c', class: {
|
|
253
250
|
'label-text-wrapper': true,
|
|
254
251
|
'label-text-wrapper-hidden': !hasLabel,
|
|
255
|
-
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '
|
|
252
|
+
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'fc2988a91d55cd158e734b8eb9c9a2efc3fc7a36' }), this.renderHintText()), h("div", { key: '86a065669073dfc7f699b7a910fc61b5ab68d5db', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
256
253
|
}
|
|
257
254
|
get el() { return getElement(this); }
|
|
258
255
|
static get watchers() { return {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { c as createAnimation } from './animation-Dt8bGnA-.js';
|
|
5
|
-
import { g as getIonPageElement } from './index-
|
|
5
|
+
import { g as getIonPageElement } from './index-r2D9DEro.js';
|
|
6
6
|
import './index-C8IsBmNU.js';
|
|
7
7
|
import './index-ZjP4CjeZ.js';
|
|
8
8
|
import './helpers-DEn3pfjm.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { c as createAnimation } from './animation-Dt8bGnA-.js';
|
|
5
|
-
import { g as getIonPageElement } from './index-
|
|
5
|
+
import { g as getIonPageElement } from './index-r2D9DEro.js';
|
|
6
6
|
import './index-C8IsBmNU.js';
|
|
7
7
|
import './index-ZjP4CjeZ.js';
|
|
8
8
|
import './helpers-DEn3pfjm.js';
|
package/dist/ionic/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
export{c as createAnimation}from"./p-DDb5r57F.js";export{a as LIFECYCLE_DID_ENTER,c as LIFECYCLE_DID_LEAVE,L as LIFECYCLE_WILL_ENTER,b as LIFECYCLE_WILL_LEAVE,d as LIFECYCLE_WILL_UNLOAD,g as getIonPageElement}from"./p-
|
|
4
|
+
export{c as createAnimation}from"./p-DDb5r57F.js";export{a as LIFECYCLE_DID_ENTER,c as LIFECYCLE_DID_LEAVE,L as LIFECYCLE_WILL_ENTER,b as LIFECYCLE_WILL_LEAVE,d as LIFECYCLE_WILL_UNLOAD,g as getIonPageElement}from"./p-DUt5fQmA.js";export{iosTransitionAnimation}from"./p-C7hRNDhM.js";export{mdTransitionAnimation}from"./p-DZRJwG4S.js";export{g as getTimeGivenProgression}from"./p-hHmYLOfE.js";export{createGesture}from"./p-Cl0B-RWe.js";export{g as getPlatforms,i as initialize,a as isPlatform}from"./p-BFvmZNyx.js";export{c as componentOnReady}from"./p-CTfR9YZG.js";export{L as LogLevel}from"./p-C8IsBmNU.js";export{I as IonicSafeString,g as getMode,s as setupConfig}from"./p-DbQ5QkTP.js";export{o as openURL}from"./p-DiVJyqlX.js";export{m as menuController}from"./p-DNcfiJwE.js";export{b as actionSheetController,a as alertController,l as loadingController,m as modalController,p as pickerController,c as popoverController,t as toastController}from"./p-D87hU-Ly.js";import"./p-ZjP4CjeZ.js";import"./p-BTEOs1at.js";import"./p-B0q1YL7N.js";import"./p-D-eFFUkA.js";const e=e=>{const{swiper:o,extendParams:s}=e,t={effect:void 0,direction:"horizontal",initialSlide:0,loop:!1,parallax:!1,slidesPerView:1,spaceBetween:0,speed:300,slidesPerColumn:1,slidesPerColumnFill:"column",slidesPerGroup:1,centeredSlides:!1,slidesOffsetBefore:0,slidesOffsetAfter:0,touchEventsTarget:"container",freeMode:!1,freeModeMomentum:!0,freeModeMomentumRatio:1,freeModeMomentumBounce:!0,freeModeMomentumBounceRatio:1,freeModeMomentumVelocityRatio:1,freeModeSticky:!1,freeModeMinimumVelocity:.02,autoHeight:!1,setWrapperSize:!1,zoom:{maxRatio:3,minRatio:1,toggle:!1},touchRatio:1,touchAngle:45,simulateTouch:!0,touchStartPreventDefault:!1,shortSwipes:!0,longSwipes:!0,longSwipesRatio:.5,longSwipesMs:300,followFinger:!0,threshold:0,touchMoveStopPropagation:!0,touchReleaseOnEdges:!1,iOSEdgeSwipeDetection:!1,iOSEdgeSwipeThreshold:20,resistance:!0,resistanceRatio:.85,watchSlidesProgress:!1,watchSlidesVisibility:!1,preventClicks:!0,preventClicksPropagation:!0,slideToClickedSlide:!1,loopAdditionalSlides:0,noSwiping:!0,runCallbacksOnInit:!0,coverflowEffect:{rotate:50,stretch:0,depth:100,modifier:1,slideShadows:!0},flipEffect:{slideShadows:!0,limitRotation:!0},cubeEffect:{slideShadows:!0,shadow:!0,shadowOffset:20,shadowScale:.94},fadeEffect:{crossFade:!1},a11y:{prevSlideMessage:"Previous slide",nextSlideMessage:"Next slide",firstSlideMessage:"This is the first slide",lastSlideMessage:"This is the last slide"}};o.pagination&&(t.pagination={type:"bullets",clickable:!1,hideOnClick:!1}),o.scrollbar&&(t.scrollbar={hide:!0}),s(t)};export{e as IonicSlides}
|