@ionic/core 8.6.1-dev.11749648223.169ce853 → 8.6.1-dev.11749649767.15f41148
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/ion-item-sliding.js +3 -2
- package/components/ion-reorder-group.js +2 -20
- package/components/modal.js +76 -47
- package/dist/cjs/ion-item-option_3.cjs.entry.js +3 -2
- package/dist/cjs/ion-modal.cjs.entry.js +76 -47
- package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -20
- package/dist/collection/components/item-sliding/item-sliding.js +3 -2
- package/dist/collection/components/modal/gestures/sheet.js +76 -47
- package/dist/collection/components/reorder-group/reorder-group.js +5 -80
- package/dist/docs.json +3 -73
- package/dist/esm/ion-item-option_3.entry.js +3 -2
- package/dist/esm/ion-modal.entry.js +76 -47
- package/dist/esm/ion-reorder_2.entry.js +2 -20
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-2020aa51.entry.js +4 -0
- package/dist/ionic/p-29759454.entry.js +4 -0
- package/dist/ionic/{p-66510682.entry.js → p-a92bfa13.entry.js} +1 -1
- package/dist/types/components/reorder-group/reorder-group-interface.d.ts +0 -17
- package/dist/types/components/reorder-group/reorder-group.d.ts +4 -24
- package/dist/types/components.d.ts +4 -20
- package/dist/types/interface.d.ts +1 -5
- package/hydrate/index.js +81 -69
- package/hydrate/index.mjs +81 -69
- package/package.json +1 -1
- package/dist/ionic/p-25979025.entry.js +0 -4
- package/dist/ionic/p-90f87086.entry.js +0 -4
|
@@ -25,11 +25,7 @@ export { RadioGroupCustomEvent } from './components/radio-group/radio-group-inte
|
|
|
25
25
|
export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
|
|
26
26
|
export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface';
|
|
27
27
|
export { RefresherCustomEvent } from './components/refresher/refresher-interface';
|
|
28
|
-
export {
|
|
29
|
-
ItemReorderCustomEvent,
|
|
30
|
-
ReorderEndCustomEvent,
|
|
31
|
-
ReorderMoveCustomEvent,
|
|
32
|
-
} from './components/reorder-group/reorder-group-interface';
|
|
28
|
+
export { ItemReorderCustomEvent } from './components/reorder-group/reorder-group-interface';
|
|
33
29
|
export { SearchbarCustomEvent } from './components/searchbar/searchbar-interface';
|
|
34
30
|
export { SegmentCustomEvent } from './components/segment/segment-interface';
|
|
35
31
|
export { SelectCustomEvent, SelectCompareFn } from './components/select/select-interface';
|
package/hydrate/index.js
CHANGED
|
@@ -18348,6 +18348,7 @@ class ItemSliding {
|
|
|
18348
18348
|
}
|
|
18349
18349
|
}
|
|
18350
18350
|
async updateOptions() {
|
|
18351
|
+
var _a;
|
|
18351
18352
|
const options = this.el.querySelectorAll('ion-item-options');
|
|
18352
18353
|
let sides = 0;
|
|
18353
18354
|
// Reset left and right options in case they were removed
|
|
@@ -18361,7 +18362,7 @@ class ItemSliding {
|
|
|
18361
18362
|
*/
|
|
18362
18363
|
// eslint-disable-next-line custom-rules/no-component-on-ready-method
|
|
18363
18364
|
const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
|
|
18364
|
-
const side = isEndSide(option.side) ? 'end' : 'start';
|
|
18365
|
+
const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
|
|
18365
18366
|
if (side === 'start') {
|
|
18366
18367
|
this.leftOptions = option;
|
|
18367
18368
|
sides |= 1 /* ItemSide.Start */;
|
|
@@ -18559,7 +18560,7 @@ class ItemSliding {
|
|
|
18559
18560
|
}
|
|
18560
18561
|
render() {
|
|
18561
18562
|
const mode = getIonMode$1(this);
|
|
18562
|
-
return (hAsync(Host, { key: '
|
|
18563
|
+
return (hAsync(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
|
|
18563
18564
|
[mode]: true,
|
|
18564
18565
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
18565
18566
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -21430,7 +21431,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
21430
21431
|
let offset = 0;
|
|
21431
21432
|
let canDismissBlocksGesture = false;
|
|
21432
21433
|
let cachedScrollEl = null;
|
|
21433
|
-
let
|
|
21434
|
+
let cachedFooterEls = null;
|
|
21434
21435
|
let cachedFooterYPosition = null;
|
|
21435
21436
|
let currentFooterState = null;
|
|
21436
21437
|
const canDismissMaxStep = 0.95;
|
|
@@ -21467,60 +21468,81 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
21467
21468
|
* @param newPosition Whether the footer is in a moving or stationary position.
|
|
21468
21469
|
*/
|
|
21469
21470
|
const swapFooterPosition = (newPosition) => {
|
|
21470
|
-
if (!
|
|
21471
|
-
|
|
21472
|
-
if (!
|
|
21471
|
+
if (!cachedFooterEls) {
|
|
21472
|
+
cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
|
|
21473
|
+
if (!cachedFooterEls.length) {
|
|
21473
21474
|
return;
|
|
21474
21475
|
}
|
|
21475
21476
|
}
|
|
21476
21477
|
const page = baseEl.querySelector('.ion-page');
|
|
21477
21478
|
currentFooterState = newPosition;
|
|
21478
21479
|
if (newPosition === 'stationary') {
|
|
21479
|
-
|
|
21480
|
-
|
|
21481
|
-
|
|
21482
|
-
|
|
21483
|
-
|
|
21484
|
-
|
|
21485
|
-
|
|
21486
|
-
|
|
21487
|
-
|
|
21488
|
-
|
|
21480
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
21481
|
+
// Reset positioning styles to allow normal document flow
|
|
21482
|
+
cachedFooterEl.classList.remove('modal-footer-moving');
|
|
21483
|
+
cachedFooterEl.style.removeProperty('position');
|
|
21484
|
+
cachedFooterEl.style.removeProperty('width');
|
|
21485
|
+
cachedFooterEl.style.removeProperty('height');
|
|
21486
|
+
cachedFooterEl.style.removeProperty('top');
|
|
21487
|
+
cachedFooterEl.style.removeProperty('left');
|
|
21488
|
+
page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
|
|
21489
|
+
// Move to page
|
|
21490
|
+
page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
|
|
21491
|
+
});
|
|
21489
21492
|
}
|
|
21490
21493
|
else {
|
|
21491
|
-
|
|
21492
|
-
|
|
21493
|
-
|
|
21494
|
-
|
|
21495
|
-
|
|
21496
|
-
|
|
21497
|
-
|
|
21498
|
-
|
|
21499
|
-
|
|
21500
|
-
|
|
21501
|
-
|
|
21502
|
-
|
|
21503
|
-
|
|
21504
|
-
|
|
21505
|
-
|
|
21506
|
-
|
|
21507
|
-
|
|
21508
|
-
|
|
21509
|
-
|
|
21510
|
-
|
|
21511
|
-
|
|
21512
|
-
|
|
21513
|
-
|
|
21514
|
-
|
|
21515
|
-
|
|
21516
|
-
|
|
21517
|
-
|
|
21518
|
-
|
|
21519
|
-
|
|
21520
|
-
|
|
21521
|
-
|
|
21522
|
-
}
|
|
21523
|
-
|
|
21494
|
+
let footerHeights = 0;
|
|
21495
|
+
cachedFooterEls.forEach((cachedFooterEl, index) => {
|
|
21496
|
+
// Get both the footer and document body positions
|
|
21497
|
+
const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
|
|
21498
|
+
const bodyRect = document.body.getBoundingClientRect();
|
|
21499
|
+
// Calculate the total height of all footers
|
|
21500
|
+
// so we can add padding to the page element
|
|
21501
|
+
footerHeights += cachedFooterEl.clientHeight;
|
|
21502
|
+
// Calculate absolute position relative to body
|
|
21503
|
+
// We need to subtract the body's offsetTop to get true position within document.body
|
|
21504
|
+
const absoluteTop = cachedFooterElRect.top - bodyRect.top;
|
|
21505
|
+
const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
|
|
21506
|
+
// Capture the footer's current dimensions and store them in CSS variables for
|
|
21507
|
+
// later use when applying absolute positioning.
|
|
21508
|
+
cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
|
|
21509
|
+
cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
|
|
21510
|
+
cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
|
|
21511
|
+
cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
|
|
21512
|
+
// Only cache the first footer's Y position
|
|
21513
|
+
// This is used to determine if the sheet has been moved below the footer
|
|
21514
|
+
// and needs to be swapped back to stationary so it collapses correctly.
|
|
21515
|
+
if (index === 0) {
|
|
21516
|
+
cachedFooterYPosition = absoluteTop;
|
|
21517
|
+
// If there's a header, we need to combine the header height with the footer position
|
|
21518
|
+
// because the header moves with the drag handle, so when it starts overlapping the footer,
|
|
21519
|
+
// we need to account for that.
|
|
21520
|
+
const header = baseEl.querySelector('ion-header');
|
|
21521
|
+
if (header) {
|
|
21522
|
+
cachedFooterYPosition -= header.clientHeight;
|
|
21523
|
+
}
|
|
21524
|
+
}
|
|
21525
|
+
});
|
|
21526
|
+
// Apply the pinning of styles after we've calculated everything
|
|
21527
|
+
// so that we don't cause layouts to shift while calculating the footer positions.
|
|
21528
|
+
// Otherwise, with multiple footers we'll end up capturing the wrong positions.
|
|
21529
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
21530
|
+
// Add padding to the parent element to prevent content from being hidden
|
|
21531
|
+
// when the footer is positioned absolutely. This has to be done before we
|
|
21532
|
+
// make the footer absolutely positioned or we may accidentally cause the
|
|
21533
|
+
// sheet to scroll.
|
|
21534
|
+
page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
|
|
21535
|
+
// Apply positioning styles to keep footer at bottom
|
|
21536
|
+
cachedFooterEl.classList.add('modal-footer-moving');
|
|
21537
|
+
// Apply our preserved styles to pin the footer
|
|
21538
|
+
cachedFooterEl.style.setProperty('position', 'absolute');
|
|
21539
|
+
cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
|
|
21540
|
+
cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
|
|
21541
|
+
cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
|
|
21542
|
+
cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
|
|
21543
|
+
// Move the element to the body when everything else is done
|
|
21544
|
+
document.body.appendChild(cachedFooterEl);
|
|
21545
|
+
});
|
|
21524
21546
|
}
|
|
21525
21547
|
};
|
|
21526
21548
|
/**
|
|
@@ -21712,6 +21734,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
21712
21734
|
* is not scrolled to the top.
|
|
21713
21735
|
*/
|
|
21714
21736
|
if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
|
|
21737
|
+
/**
|
|
21738
|
+
* If expand to scroll is disabled, we need to make sure we swap the footer position
|
|
21739
|
+
* back to stationary so that it will collapse correctly if the modal is dismissed without
|
|
21740
|
+
* dragging (e.g. through a dismiss button).
|
|
21741
|
+
* This can cause issues if the user has a modal with content that can be dragged, as we'll
|
|
21742
|
+
* swap to moving on drag and if we don't swap back here then the footer will get stuck.
|
|
21743
|
+
*/
|
|
21744
|
+
swapFooterPosition('stationary');
|
|
21715
21745
|
return;
|
|
21716
21746
|
}
|
|
21717
21747
|
/**
|
|
@@ -29371,9 +29401,6 @@ class ReorderGroup {
|
|
|
29371
29401
|
constructor(hostRef) {
|
|
29372
29402
|
registerInstance(this, hostRef);
|
|
29373
29403
|
this.ionItemReorder = createEvent(this, "ionItemReorder", 7);
|
|
29374
|
-
this.ionReorderStart = createEvent(this, "ionReorderStart", 7);
|
|
29375
|
-
this.ionReorderMove = createEvent(this, "ionReorderMove", 7);
|
|
29376
|
-
this.ionReorderEnd = createEvent(this, "ionReorderEnd", 7);
|
|
29377
29404
|
this.lastToIndex = -1;
|
|
29378
29405
|
this.cachedHeights = [];
|
|
29379
29406
|
this.scrollElTop = 0;
|
|
@@ -29419,7 +29446,7 @@ class ReorderGroup {
|
|
|
29419
29446
|
}
|
|
29420
29447
|
}
|
|
29421
29448
|
/**
|
|
29422
|
-
* Completes the reorder operation. Must be called by the `
|
|
29449
|
+
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
29423
29450
|
*
|
|
29424
29451
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
29425
29452
|
* proper order.
|
|
@@ -29486,7 +29513,6 @@ class ReorderGroup {
|
|
|
29486
29513
|
this.state = 1 /* ReorderGroupState.Active */;
|
|
29487
29514
|
item.classList.add(ITEM_REORDER_SELECTED);
|
|
29488
29515
|
hapticSelectionStart();
|
|
29489
|
-
this.ionReorderStart.emit();
|
|
29490
29516
|
}
|
|
29491
29517
|
onMove(ev) {
|
|
29492
29518
|
const selectedItem = this.selectedItemEl;
|
|
@@ -29501,7 +29527,6 @@ class ReorderGroup {
|
|
|
29501
29527
|
const currentY = Math.max(top, Math.min(ev.currentY, bottom));
|
|
29502
29528
|
const deltaY = scroll + currentY - ev.startY;
|
|
29503
29529
|
const normalizedY = currentY - top;
|
|
29504
|
-
const fromIndex = this.lastToIndex;
|
|
29505
29530
|
const toIndex = this.itemIndexForTop(normalizedY);
|
|
29506
29531
|
if (toIndex !== this.lastToIndex) {
|
|
29507
29532
|
const fromIndex = indexForItem(selectedItem);
|
|
@@ -29511,10 +29536,6 @@ class ReorderGroup {
|
|
|
29511
29536
|
}
|
|
29512
29537
|
// Update selected item position
|
|
29513
29538
|
selectedItem.style.transform = `translateY(${deltaY}px)`;
|
|
29514
|
-
this.ionReorderMove.emit({
|
|
29515
|
-
from: fromIndex,
|
|
29516
|
-
to: toIndex,
|
|
29517
|
-
});
|
|
29518
29539
|
}
|
|
29519
29540
|
onEnd() {
|
|
29520
29541
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -29526,23 +29547,14 @@ class ReorderGroup {
|
|
|
29526
29547
|
const toIndex = this.lastToIndex;
|
|
29527
29548
|
const fromIndex = indexForItem(selectedItemEl);
|
|
29528
29549
|
if (toIndex === fromIndex) {
|
|
29529
|
-
this.ionReorderEnd.emit({
|
|
29530
|
-
complete: this.completeReorder.bind(this),
|
|
29531
|
-
});
|
|
29532
29550
|
this.completeReorder();
|
|
29533
29551
|
}
|
|
29534
29552
|
else {
|
|
29535
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
29536
29553
|
this.ionItemReorder.emit({
|
|
29537
29554
|
from: fromIndex,
|
|
29538
29555
|
to: toIndex,
|
|
29539
29556
|
complete: this.completeReorder.bind(this),
|
|
29540
29557
|
});
|
|
29541
|
-
this.ionReorderEnd.emit({
|
|
29542
|
-
from: fromIndex,
|
|
29543
|
-
to: toIndex,
|
|
29544
|
-
complete: this.completeReorder.bind(this),
|
|
29545
|
-
});
|
|
29546
29558
|
}
|
|
29547
29559
|
hapticSelectionEnd();
|
|
29548
29560
|
}
|
|
@@ -29622,7 +29634,7 @@ class ReorderGroup {
|
|
|
29622
29634
|
}
|
|
29623
29635
|
render() {
|
|
29624
29636
|
const mode = getIonMode$1(this);
|
|
29625
|
-
return (hAsync(Host, { key: '
|
|
29637
|
+
return (hAsync(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
29626
29638
|
[mode]: true,
|
|
29627
29639
|
'reorder-enabled': !this.disabled,
|
|
29628
29640
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
package/hydrate/index.mjs
CHANGED
|
@@ -18346,6 +18346,7 @@ class ItemSliding {
|
|
|
18346
18346
|
}
|
|
18347
18347
|
}
|
|
18348
18348
|
async updateOptions() {
|
|
18349
|
+
var _a;
|
|
18349
18350
|
const options = this.el.querySelectorAll('ion-item-options');
|
|
18350
18351
|
let sides = 0;
|
|
18351
18352
|
// Reset left and right options in case they were removed
|
|
@@ -18359,7 +18360,7 @@ class ItemSliding {
|
|
|
18359
18360
|
*/
|
|
18360
18361
|
// eslint-disable-next-line custom-rules/no-component-on-ready-method
|
|
18361
18362
|
const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
|
|
18362
|
-
const side = isEndSide(option.side) ? 'end' : 'start';
|
|
18363
|
+
const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
|
|
18363
18364
|
if (side === 'start') {
|
|
18364
18365
|
this.leftOptions = option;
|
|
18365
18366
|
sides |= 1 /* ItemSide.Start */;
|
|
@@ -18557,7 +18558,7 @@ class ItemSliding {
|
|
|
18557
18558
|
}
|
|
18558
18559
|
render() {
|
|
18559
18560
|
const mode = getIonMode$1(this);
|
|
18560
|
-
return (hAsync(Host, { key: '
|
|
18561
|
+
return (hAsync(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
|
|
18561
18562
|
[mode]: true,
|
|
18562
18563
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
18563
18564
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -21428,7 +21429,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
21428
21429
|
let offset = 0;
|
|
21429
21430
|
let canDismissBlocksGesture = false;
|
|
21430
21431
|
let cachedScrollEl = null;
|
|
21431
|
-
let
|
|
21432
|
+
let cachedFooterEls = null;
|
|
21432
21433
|
let cachedFooterYPosition = null;
|
|
21433
21434
|
let currentFooterState = null;
|
|
21434
21435
|
const canDismissMaxStep = 0.95;
|
|
@@ -21465,60 +21466,81 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
21465
21466
|
* @param newPosition Whether the footer is in a moving or stationary position.
|
|
21466
21467
|
*/
|
|
21467
21468
|
const swapFooterPosition = (newPosition) => {
|
|
21468
|
-
if (!
|
|
21469
|
-
|
|
21470
|
-
if (!
|
|
21469
|
+
if (!cachedFooterEls) {
|
|
21470
|
+
cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
|
|
21471
|
+
if (!cachedFooterEls.length) {
|
|
21471
21472
|
return;
|
|
21472
21473
|
}
|
|
21473
21474
|
}
|
|
21474
21475
|
const page = baseEl.querySelector('.ion-page');
|
|
21475
21476
|
currentFooterState = newPosition;
|
|
21476
21477
|
if (newPosition === 'stationary') {
|
|
21477
|
-
|
|
21478
|
-
|
|
21479
|
-
|
|
21480
|
-
|
|
21481
|
-
|
|
21482
|
-
|
|
21483
|
-
|
|
21484
|
-
|
|
21485
|
-
|
|
21486
|
-
|
|
21478
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
21479
|
+
// Reset positioning styles to allow normal document flow
|
|
21480
|
+
cachedFooterEl.classList.remove('modal-footer-moving');
|
|
21481
|
+
cachedFooterEl.style.removeProperty('position');
|
|
21482
|
+
cachedFooterEl.style.removeProperty('width');
|
|
21483
|
+
cachedFooterEl.style.removeProperty('height');
|
|
21484
|
+
cachedFooterEl.style.removeProperty('top');
|
|
21485
|
+
cachedFooterEl.style.removeProperty('left');
|
|
21486
|
+
page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
|
|
21487
|
+
// Move to page
|
|
21488
|
+
page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
|
|
21489
|
+
});
|
|
21487
21490
|
}
|
|
21488
21491
|
else {
|
|
21489
|
-
|
|
21490
|
-
|
|
21491
|
-
|
|
21492
|
-
|
|
21493
|
-
|
|
21494
|
-
|
|
21495
|
-
|
|
21496
|
-
|
|
21497
|
-
|
|
21498
|
-
|
|
21499
|
-
|
|
21500
|
-
|
|
21501
|
-
|
|
21502
|
-
|
|
21503
|
-
|
|
21504
|
-
|
|
21505
|
-
|
|
21506
|
-
|
|
21507
|
-
|
|
21508
|
-
|
|
21509
|
-
|
|
21510
|
-
|
|
21511
|
-
|
|
21512
|
-
|
|
21513
|
-
|
|
21514
|
-
|
|
21515
|
-
|
|
21516
|
-
|
|
21517
|
-
|
|
21518
|
-
|
|
21519
|
-
|
|
21520
|
-
}
|
|
21521
|
-
|
|
21492
|
+
let footerHeights = 0;
|
|
21493
|
+
cachedFooterEls.forEach((cachedFooterEl, index) => {
|
|
21494
|
+
// Get both the footer and document body positions
|
|
21495
|
+
const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
|
|
21496
|
+
const bodyRect = document.body.getBoundingClientRect();
|
|
21497
|
+
// Calculate the total height of all footers
|
|
21498
|
+
// so we can add padding to the page element
|
|
21499
|
+
footerHeights += cachedFooterEl.clientHeight;
|
|
21500
|
+
// Calculate absolute position relative to body
|
|
21501
|
+
// We need to subtract the body's offsetTop to get true position within document.body
|
|
21502
|
+
const absoluteTop = cachedFooterElRect.top - bodyRect.top;
|
|
21503
|
+
const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
|
|
21504
|
+
// Capture the footer's current dimensions and store them in CSS variables for
|
|
21505
|
+
// later use when applying absolute positioning.
|
|
21506
|
+
cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
|
|
21507
|
+
cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
|
|
21508
|
+
cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
|
|
21509
|
+
cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
|
|
21510
|
+
// Only cache the first footer's Y position
|
|
21511
|
+
// This is used to determine if the sheet has been moved below the footer
|
|
21512
|
+
// and needs to be swapped back to stationary so it collapses correctly.
|
|
21513
|
+
if (index === 0) {
|
|
21514
|
+
cachedFooterYPosition = absoluteTop;
|
|
21515
|
+
// If there's a header, we need to combine the header height with the footer position
|
|
21516
|
+
// because the header moves with the drag handle, so when it starts overlapping the footer,
|
|
21517
|
+
// we need to account for that.
|
|
21518
|
+
const header = baseEl.querySelector('ion-header');
|
|
21519
|
+
if (header) {
|
|
21520
|
+
cachedFooterYPosition -= header.clientHeight;
|
|
21521
|
+
}
|
|
21522
|
+
}
|
|
21523
|
+
});
|
|
21524
|
+
// Apply the pinning of styles after we've calculated everything
|
|
21525
|
+
// so that we don't cause layouts to shift while calculating the footer positions.
|
|
21526
|
+
// Otherwise, with multiple footers we'll end up capturing the wrong positions.
|
|
21527
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
21528
|
+
// Add padding to the parent element to prevent content from being hidden
|
|
21529
|
+
// when the footer is positioned absolutely. This has to be done before we
|
|
21530
|
+
// make the footer absolutely positioned or we may accidentally cause the
|
|
21531
|
+
// sheet to scroll.
|
|
21532
|
+
page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
|
|
21533
|
+
// Apply positioning styles to keep footer at bottom
|
|
21534
|
+
cachedFooterEl.classList.add('modal-footer-moving');
|
|
21535
|
+
// Apply our preserved styles to pin the footer
|
|
21536
|
+
cachedFooterEl.style.setProperty('position', 'absolute');
|
|
21537
|
+
cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
|
|
21538
|
+
cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
|
|
21539
|
+
cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
|
|
21540
|
+
cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
|
|
21541
|
+
// Move the element to the body when everything else is done
|
|
21542
|
+
document.body.appendChild(cachedFooterEl);
|
|
21543
|
+
});
|
|
21522
21544
|
}
|
|
21523
21545
|
};
|
|
21524
21546
|
/**
|
|
@@ -21710,6 +21732,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
21710
21732
|
* is not scrolled to the top.
|
|
21711
21733
|
*/
|
|
21712
21734
|
if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
|
|
21735
|
+
/**
|
|
21736
|
+
* If expand to scroll is disabled, we need to make sure we swap the footer position
|
|
21737
|
+
* back to stationary so that it will collapse correctly if the modal is dismissed without
|
|
21738
|
+
* dragging (e.g. through a dismiss button).
|
|
21739
|
+
* This can cause issues if the user has a modal with content that can be dragged, as we'll
|
|
21740
|
+
* swap to moving on drag and if we don't swap back here then the footer will get stuck.
|
|
21741
|
+
*/
|
|
21742
|
+
swapFooterPosition('stationary');
|
|
21713
21743
|
return;
|
|
21714
21744
|
}
|
|
21715
21745
|
/**
|
|
@@ -29369,9 +29399,6 @@ class ReorderGroup {
|
|
|
29369
29399
|
constructor(hostRef) {
|
|
29370
29400
|
registerInstance(this, hostRef);
|
|
29371
29401
|
this.ionItemReorder = createEvent(this, "ionItemReorder", 7);
|
|
29372
|
-
this.ionReorderStart = createEvent(this, "ionReorderStart", 7);
|
|
29373
|
-
this.ionReorderMove = createEvent(this, "ionReorderMove", 7);
|
|
29374
|
-
this.ionReorderEnd = createEvent(this, "ionReorderEnd", 7);
|
|
29375
29402
|
this.lastToIndex = -1;
|
|
29376
29403
|
this.cachedHeights = [];
|
|
29377
29404
|
this.scrollElTop = 0;
|
|
@@ -29417,7 +29444,7 @@ class ReorderGroup {
|
|
|
29417
29444
|
}
|
|
29418
29445
|
}
|
|
29419
29446
|
/**
|
|
29420
|
-
* Completes the reorder operation. Must be called by the `
|
|
29447
|
+
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
29421
29448
|
*
|
|
29422
29449
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
29423
29450
|
* proper order.
|
|
@@ -29484,7 +29511,6 @@ class ReorderGroup {
|
|
|
29484
29511
|
this.state = 1 /* ReorderGroupState.Active */;
|
|
29485
29512
|
item.classList.add(ITEM_REORDER_SELECTED);
|
|
29486
29513
|
hapticSelectionStart();
|
|
29487
|
-
this.ionReorderStart.emit();
|
|
29488
29514
|
}
|
|
29489
29515
|
onMove(ev) {
|
|
29490
29516
|
const selectedItem = this.selectedItemEl;
|
|
@@ -29499,7 +29525,6 @@ class ReorderGroup {
|
|
|
29499
29525
|
const currentY = Math.max(top, Math.min(ev.currentY, bottom));
|
|
29500
29526
|
const deltaY = scroll + currentY - ev.startY;
|
|
29501
29527
|
const normalizedY = currentY - top;
|
|
29502
|
-
const fromIndex = this.lastToIndex;
|
|
29503
29528
|
const toIndex = this.itemIndexForTop(normalizedY);
|
|
29504
29529
|
if (toIndex !== this.lastToIndex) {
|
|
29505
29530
|
const fromIndex = indexForItem(selectedItem);
|
|
@@ -29509,10 +29534,6 @@ class ReorderGroup {
|
|
|
29509
29534
|
}
|
|
29510
29535
|
// Update selected item position
|
|
29511
29536
|
selectedItem.style.transform = `translateY(${deltaY}px)`;
|
|
29512
|
-
this.ionReorderMove.emit({
|
|
29513
|
-
from: fromIndex,
|
|
29514
|
-
to: toIndex,
|
|
29515
|
-
});
|
|
29516
29537
|
}
|
|
29517
29538
|
onEnd() {
|
|
29518
29539
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -29524,23 +29545,14 @@ class ReorderGroup {
|
|
|
29524
29545
|
const toIndex = this.lastToIndex;
|
|
29525
29546
|
const fromIndex = indexForItem(selectedItemEl);
|
|
29526
29547
|
if (toIndex === fromIndex) {
|
|
29527
|
-
this.ionReorderEnd.emit({
|
|
29528
|
-
complete: this.completeReorder.bind(this),
|
|
29529
|
-
});
|
|
29530
29548
|
this.completeReorder();
|
|
29531
29549
|
}
|
|
29532
29550
|
else {
|
|
29533
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
29534
29551
|
this.ionItemReorder.emit({
|
|
29535
29552
|
from: fromIndex,
|
|
29536
29553
|
to: toIndex,
|
|
29537
29554
|
complete: this.completeReorder.bind(this),
|
|
29538
29555
|
});
|
|
29539
|
-
this.ionReorderEnd.emit({
|
|
29540
|
-
from: fromIndex,
|
|
29541
|
-
to: toIndex,
|
|
29542
|
-
complete: this.completeReorder.bind(this),
|
|
29543
|
-
});
|
|
29544
29556
|
}
|
|
29545
29557
|
hapticSelectionEnd();
|
|
29546
29558
|
}
|
|
@@ -29620,7 +29632,7 @@ class ReorderGroup {
|
|
|
29620
29632
|
}
|
|
29621
29633
|
render() {
|
|
29622
29634
|
const mode = getIonMode$1(this);
|
|
29623
|
-
return (hAsync(Host, { key: '
|
|
29635
|
+
return (hAsync(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
29624
29636
|
[mode]: true,
|
|
29625
29637
|
'reorder-enabled': !this.disabled,
|
|
29626
29638
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
package/package.json
CHANGED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as t,e as s,h as e,j as i,k as r,d as o}from"./p-B_U9CtaY.js";import{j as n,k as h}from"./p-BLV6ykCk.js";import{f as a,g as c}from"./p-QwEXyOze.js";import{r as d}from"./p-Do-uqmtX.js";import{b as l,a as m,h as f}from"./p-CKvCXMs9.js";import"./p-CIGNaXM1.js";import"./p-ZjP4CjeZ.js";const p=class{constructor(s){t(this,s)}onClick(t){const s=this.el.closest("ion-reorder-group");t.preventDefault(),s&&s.disabled||t.stopImmediatePropagation()}render(){const t=s(this);return e(i,{key:"e6807bb349725682e99e791ac65e729a360d64e8",class:t},e("slot",{key:"1c691cdbffa6427ba08dc12184c69559ed5d5506"},e("ion-icon",{key:"8b4150302cdca475379582b2251737b5e74079b1",icon:"ios"===t?n:h,lazy:!1,class:"reorder-icon",part:"icon","aria-hidden":"true"})))}get el(){return r(this)}};p.style={ios:":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block}::slotted(ion-icon){font-size:dynamic-font(16px)}.reorder-icon{font-size:2.125rem;opacity:0.4}",md:":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block}::slotted(ion-icon){font-size:dynamic-font(16px)}.reorder-icon{font-size:1.9375rem;opacity:0.3}"};const b=class{constructor(s){t(this,s),this.ionItemReorder=o(this,"ionItemReorder",7),this.ionReorderStart=o(this,"ionReorderStart",7),this.ionReorderMove=o(this,"ionReorderMove",7),this.ionReorderEnd=o(this,"ionReorderEnd",7),this.lastToIndex=-1,this.cachedHeights=[],this.scrollElTop=0,this.scrollElBottom=0,this.scrollElInitial=0,this.containerTop=0,this.containerBottom=0,this.state=0,this.disabled=!0}disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled)}async connectedCallback(){const t=a(this.el);t&&(this.scrollEl=await c(t)),this.gesture=(await import("./p-Cl0B-RWe.js")).createGesture({el:this.el,gestureName:"reorder",gesturePriority:110,threshold:0,direction:"y",passive:!1,canStart:t=>this.canStart(t),onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:()=>this.onEnd()}),this.disabledChanged()}disconnectedCallback(){this.onEnd(),this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}complete(t){return Promise.resolve(this.completeReorder(t))}canStart(t){if(this.selectedItemEl||0!==this.state)return!1;const s=t.event.target.closest("ion-reorder");if(!s)return!1;const e=k(s,this.el);return!!e&&(t.data=e,!0)}onStart(t){t.event.preventDefault();const s=this.selectedItemEl=t.data,e=this.cachedHeights;e.length=0;const i=this.el,r=i.children;if(!r||0===r.length)return;let o=0;for(let t=0;t<r.length;t++){const s=r[t];o+=s.offsetHeight,e.push(o),s.$ionIndex=t}const n=i.getBoundingClientRect();if(this.containerTop=n.top,this.containerBottom=n.bottom,this.scrollEl){const t=this.scrollEl.getBoundingClientRect();this.scrollElInitial=this.scrollEl.scrollTop,this.scrollElTop=t.top+y,this.scrollElBottom=t.bottom-y}else this.scrollElInitial=0,this.scrollElTop=0,this.scrollElBottom=0;this.lastToIndex=u(s),this.selectedItemHeight=s.offsetHeight,this.state=1,s.classList.add(w),l(),this.ionReorderStart.emit()}onMove(t){const s=this.selectedItemEl;if(!s)return;const e=this.autoscroll(t.currentY),i=this.containerTop-e,r=Math.max(i,Math.min(t.currentY,this.containerBottom-e)),o=e+r-t.startY,n=this.lastToIndex,h=this.itemIndexForTop(r-i);if(h!==this.lastToIndex){const t=u(s);this.lastToIndex=h,m(),this.reorderMove(t,h)}s.style.transform=`translateY(${o}px)`,this.ionReorderMove.emit({from:n,to:h})}onEnd(){const t=this.selectedItemEl;if(this.state=2,!t)return void(this.state=0);const s=this.lastToIndex,e=u(t);s===e?(this.ionReorderEnd.emit({complete:this.completeReorder.bind(this)}),this.completeReorder()):(this.ionItemReorder.emit({from:e,to:s,complete:this.completeReorder.bind(this)}),this.ionReorderEnd.emit({from:e,to:s,complete:this.completeReorder.bind(this)})),f()}completeReorder(t){const s=this.selectedItemEl;if(s&&2===this.state){const e=this.el.children,i=e.length,r=this.lastToIndex,o=u(s);d((()=>{r===o||void 0!==t&&!0!==t||this.el.insertBefore(s,o<r?e[r+1]:e[r]);for(let t=0;t<i;t++)e[t].style.transform=""})),Array.isArray(t)&&(t=v(t,o,r)),s.style.transition="",s.classList.remove(w),this.selectedItemEl=void 0,this.state=0}return t}itemIndexForTop(t){const s=this.cachedHeights;for(let e=0;e<s.length;e++)if(s[e]>t)return e;return s.length-1}reorderMove(t,s){const e=this.selectedItemHeight,i=this.el.children;for(let r=0;r<i.length;r++){let o="";r>t&&r<=s?o=`translateY(${-e}px)`:r<t&&r>=s&&(o=`translateY(${e}px)`),i[r].style.transform=o}}autoscroll(t){if(!this.scrollEl)return 0;let s=0;return t<this.scrollElTop?s=-10:t>this.scrollElBottom&&(s=g),0!==s&&this.scrollEl.scrollBy(0,s),this.scrollEl.scrollTop-this.scrollElInitial}render(){const t=s(this);return e(i,{key:"8f47e24dfc7b8ef53ad3f5816fa13a8fa07de2a6",class:{[t]:!0,"reorder-enabled":!this.disabled,"reorder-list-active":0!==this.state}})}get el(){return r(this)}static get watchers(){return{disabled:["disabledChanged"]}}},u=t=>t.$ionIndex,k=(t,s)=>{let e;for(;t;){if(e=t.parentElement,e===s)return t;t=e}},y=60,g=10,w="reorder-selected",v=(t,s,e)=>{const i=t[s];return t.splice(s,1),t.splice(e,0,i),t.slice()};b.style=".reorder-list-active>*{display:block;-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms;will-change:transform}.reorder-enabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.reorder-enabled ion-reorder{display:block;cursor:-webkit-grab;cursor:grab;pointer-events:all;-ms-touch-action:none;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:-webkit-grabbing;cursor:grabbing}.reorder-selected{position:relative;-webkit-transition:none !important;transition:none !important;-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.4);box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}";export{p as ion_reorder,b as ion_reorder_group}
|