@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
|
@@ -185,6 +185,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
|
|
|
185
185
|
}
|
|
186
186
|
}
|
|
187
187
|
async updateOptions() {
|
|
188
|
+
var _a;
|
|
188
189
|
const options = this.el.querySelectorAll('ion-item-options');
|
|
189
190
|
let sides = 0;
|
|
190
191
|
// Reset left and right options in case they were removed
|
|
@@ -198,7 +199,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
|
|
|
198
199
|
*/
|
|
199
200
|
// eslint-disable-next-line custom-rules/no-component-on-ready-method
|
|
200
201
|
const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
|
|
201
|
-
const side = isEndSide(option.side) ? 'end' : 'start';
|
|
202
|
+
const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
|
|
202
203
|
if (side === 'start') {
|
|
203
204
|
this.leftOptions = option;
|
|
204
205
|
sides |= 1 /* ItemSide.Start */;
|
|
@@ -396,7 +397,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
|
|
|
396
397
|
}
|
|
397
398
|
render() {
|
|
398
399
|
const mode = getIonMode(this);
|
|
399
|
-
return (h(Host, { key: '
|
|
400
|
+
return (h(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
|
|
400
401
|
[mode]: true,
|
|
401
402
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
402
403
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -14,9 +14,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
14
14
|
super();
|
|
15
15
|
this.__registerHost();
|
|
16
16
|
this.ionItemReorder = createEvent(this, "ionItemReorder", 7);
|
|
17
|
-
this.ionReorderStart = createEvent(this, "ionReorderStart", 7);
|
|
18
|
-
this.ionReorderMove = createEvent(this, "ionReorderMove", 7);
|
|
19
|
-
this.ionReorderEnd = createEvent(this, "ionReorderEnd", 7);
|
|
20
17
|
this.lastToIndex = -1;
|
|
21
18
|
this.cachedHeights = [];
|
|
22
19
|
this.scrollElTop = 0;
|
|
@@ -62,7 +59,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
62
59
|
}
|
|
63
60
|
}
|
|
64
61
|
/**
|
|
65
|
-
* Completes the reorder operation. Must be called by the `
|
|
62
|
+
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
66
63
|
*
|
|
67
64
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
68
65
|
* proper order.
|
|
@@ -129,7 +126,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
129
126
|
this.state = 1 /* ReorderGroupState.Active */;
|
|
130
127
|
item.classList.add(ITEM_REORDER_SELECTED);
|
|
131
128
|
hapticSelectionStart();
|
|
132
|
-
this.ionReorderStart.emit();
|
|
133
129
|
}
|
|
134
130
|
onMove(ev) {
|
|
135
131
|
const selectedItem = this.selectedItemEl;
|
|
@@ -144,7 +140,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
144
140
|
const currentY = Math.max(top, Math.min(ev.currentY, bottom));
|
|
145
141
|
const deltaY = scroll + currentY - ev.startY;
|
|
146
142
|
const normalizedY = currentY - top;
|
|
147
|
-
const fromIndex = this.lastToIndex;
|
|
148
143
|
const toIndex = this.itemIndexForTop(normalizedY);
|
|
149
144
|
if (toIndex !== this.lastToIndex) {
|
|
150
145
|
const fromIndex = indexForItem(selectedItem);
|
|
@@ -154,10 +149,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
154
149
|
}
|
|
155
150
|
// Update selected item position
|
|
156
151
|
selectedItem.style.transform = `translateY(${deltaY}px)`;
|
|
157
|
-
this.ionReorderMove.emit({
|
|
158
|
-
from: fromIndex,
|
|
159
|
-
to: toIndex,
|
|
160
|
-
});
|
|
161
152
|
}
|
|
162
153
|
onEnd() {
|
|
163
154
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -169,23 +160,14 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
169
160
|
const toIndex = this.lastToIndex;
|
|
170
161
|
const fromIndex = indexForItem(selectedItemEl);
|
|
171
162
|
if (toIndex === fromIndex) {
|
|
172
|
-
this.ionReorderEnd.emit({
|
|
173
|
-
complete: this.completeReorder.bind(this),
|
|
174
|
-
});
|
|
175
163
|
this.completeReorder();
|
|
176
164
|
}
|
|
177
165
|
else {
|
|
178
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
179
166
|
this.ionItemReorder.emit({
|
|
180
167
|
from: fromIndex,
|
|
181
168
|
to: toIndex,
|
|
182
169
|
complete: this.completeReorder.bind(this),
|
|
183
170
|
});
|
|
184
|
-
this.ionReorderEnd.emit({
|
|
185
|
-
from: fromIndex,
|
|
186
|
-
to: toIndex,
|
|
187
|
-
complete: this.completeReorder.bind(this),
|
|
188
|
-
});
|
|
189
171
|
}
|
|
190
172
|
hapticSelectionEnd();
|
|
191
173
|
}
|
|
@@ -265,7 +247,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
265
247
|
}
|
|
266
248
|
render() {
|
|
267
249
|
const mode = getIonMode(this);
|
|
268
|
-
return (h(Host, { key: '
|
|
250
|
+
return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
269
251
|
[mode]: true,
|
|
270
252
|
'reorder-enabled': !this.disabled,
|
|
271
253
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
package/components/modal.js
CHANGED
|
@@ -827,7 +827,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
827
827
|
let offset = 0;
|
|
828
828
|
let canDismissBlocksGesture = false;
|
|
829
829
|
let cachedScrollEl = null;
|
|
830
|
-
let
|
|
830
|
+
let cachedFooterEls = null;
|
|
831
831
|
let cachedFooterYPosition = null;
|
|
832
832
|
let currentFooterState = null;
|
|
833
833
|
const canDismissMaxStep = 0.95;
|
|
@@ -864,60 +864,81 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
864
864
|
* @param newPosition Whether the footer is in a moving or stationary position.
|
|
865
865
|
*/
|
|
866
866
|
const swapFooterPosition = (newPosition) => {
|
|
867
|
-
if (!
|
|
868
|
-
|
|
869
|
-
if (!
|
|
867
|
+
if (!cachedFooterEls) {
|
|
868
|
+
cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
|
|
869
|
+
if (!cachedFooterEls.length) {
|
|
870
870
|
return;
|
|
871
871
|
}
|
|
872
872
|
}
|
|
873
873
|
const page = baseEl.querySelector('.ion-page');
|
|
874
874
|
currentFooterState = newPosition;
|
|
875
875
|
if (newPosition === 'stationary') {
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
876
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
877
|
+
// Reset positioning styles to allow normal document flow
|
|
878
|
+
cachedFooterEl.classList.remove('modal-footer-moving');
|
|
879
|
+
cachedFooterEl.style.removeProperty('position');
|
|
880
|
+
cachedFooterEl.style.removeProperty('width');
|
|
881
|
+
cachedFooterEl.style.removeProperty('height');
|
|
882
|
+
cachedFooterEl.style.removeProperty('top');
|
|
883
|
+
cachedFooterEl.style.removeProperty('left');
|
|
884
|
+
page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
|
|
885
|
+
// Move to page
|
|
886
|
+
page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
|
|
887
|
+
});
|
|
886
888
|
}
|
|
887
889
|
else {
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
}
|
|
920
|
-
|
|
890
|
+
let footerHeights = 0;
|
|
891
|
+
cachedFooterEls.forEach((cachedFooterEl, index) => {
|
|
892
|
+
// Get both the footer and document body positions
|
|
893
|
+
const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
|
|
894
|
+
const bodyRect = document.body.getBoundingClientRect();
|
|
895
|
+
// Calculate the total height of all footers
|
|
896
|
+
// so we can add padding to the page element
|
|
897
|
+
footerHeights += cachedFooterEl.clientHeight;
|
|
898
|
+
// Calculate absolute position relative to body
|
|
899
|
+
// We need to subtract the body's offsetTop to get true position within document.body
|
|
900
|
+
const absoluteTop = cachedFooterElRect.top - bodyRect.top;
|
|
901
|
+
const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
|
|
902
|
+
// Capture the footer's current dimensions and store them in CSS variables for
|
|
903
|
+
// later use when applying absolute positioning.
|
|
904
|
+
cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
|
|
905
|
+
cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
|
|
906
|
+
cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
|
|
907
|
+
cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
|
|
908
|
+
// Only cache the first footer's Y position
|
|
909
|
+
// This is used to determine if the sheet has been moved below the footer
|
|
910
|
+
// and needs to be swapped back to stationary so it collapses correctly.
|
|
911
|
+
if (index === 0) {
|
|
912
|
+
cachedFooterYPosition = absoluteTop;
|
|
913
|
+
// If there's a header, we need to combine the header height with the footer position
|
|
914
|
+
// because the header moves with the drag handle, so when it starts overlapping the footer,
|
|
915
|
+
// we need to account for that.
|
|
916
|
+
const header = baseEl.querySelector('ion-header');
|
|
917
|
+
if (header) {
|
|
918
|
+
cachedFooterYPosition -= header.clientHeight;
|
|
919
|
+
}
|
|
920
|
+
}
|
|
921
|
+
});
|
|
922
|
+
// Apply the pinning of styles after we've calculated everything
|
|
923
|
+
// so that we don't cause layouts to shift while calculating the footer positions.
|
|
924
|
+
// Otherwise, with multiple footers we'll end up capturing the wrong positions.
|
|
925
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
926
|
+
// Add padding to the parent element to prevent content from being hidden
|
|
927
|
+
// when the footer is positioned absolutely. This has to be done before we
|
|
928
|
+
// make the footer absolutely positioned or we may accidentally cause the
|
|
929
|
+
// sheet to scroll.
|
|
930
|
+
page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
|
|
931
|
+
// Apply positioning styles to keep footer at bottom
|
|
932
|
+
cachedFooterEl.classList.add('modal-footer-moving');
|
|
933
|
+
// Apply our preserved styles to pin the footer
|
|
934
|
+
cachedFooterEl.style.setProperty('position', 'absolute');
|
|
935
|
+
cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
|
|
936
|
+
cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
|
|
937
|
+
cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
|
|
938
|
+
cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
|
|
939
|
+
// Move the element to the body when everything else is done
|
|
940
|
+
document.body.appendChild(cachedFooterEl);
|
|
941
|
+
});
|
|
921
942
|
}
|
|
922
943
|
};
|
|
923
944
|
/**
|
|
@@ -1109,6 +1130,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1109
1130
|
* is not scrolled to the top.
|
|
1110
1131
|
*/
|
|
1111
1132
|
if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
|
|
1133
|
+
/**
|
|
1134
|
+
* If expand to scroll is disabled, we need to make sure we swap the footer position
|
|
1135
|
+
* back to stationary so that it will collapse correctly if the modal is dismissed without
|
|
1136
|
+
* dragging (e.g. through a dismiss button).
|
|
1137
|
+
* This can cause issues if the user has a modal with content that can be dragged, as we'll
|
|
1138
|
+
* swap to moving on drag and if we don't swap back here then the footer will get stuck.
|
|
1139
|
+
*/
|
|
1140
|
+
swapFooterPosition('stationary');
|
|
1112
1141
|
return;
|
|
1113
1142
|
}
|
|
1114
1143
|
/**
|
|
@@ -282,6 +282,7 @@ const ItemSliding = class {
|
|
|
282
282
|
}
|
|
283
283
|
}
|
|
284
284
|
async updateOptions() {
|
|
285
|
+
var _a;
|
|
285
286
|
const options = this.el.querySelectorAll('ion-item-options');
|
|
286
287
|
let sides = 0;
|
|
287
288
|
// Reset left and right options in case they were removed
|
|
@@ -295,7 +296,7 @@ const ItemSliding = class {
|
|
|
295
296
|
*/
|
|
296
297
|
// eslint-disable-next-line custom-rules/no-component-on-ready-method
|
|
297
298
|
const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
|
|
298
|
-
const side = helpers.isEndSide(option.side) ? 'end' : 'start';
|
|
299
|
+
const side = helpers.isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
|
|
299
300
|
if (side === 'start') {
|
|
300
301
|
this.leftOptions = option;
|
|
301
302
|
sides |= 1 /* ItemSide.Start */;
|
|
@@ -493,7 +494,7 @@ const ItemSliding = class {
|
|
|
493
494
|
}
|
|
494
495
|
render() {
|
|
495
496
|
const mode = index.getIonMode(this);
|
|
496
|
-
return (index.h(index.Host, { key: '
|
|
497
|
+
return (index.h(index.Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
|
|
497
498
|
[mode]: true,
|
|
498
499
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
499
500
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|
|
@@ -829,7 +829,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
829
829
|
let offset = 0;
|
|
830
830
|
let canDismissBlocksGesture = false;
|
|
831
831
|
let cachedScrollEl = null;
|
|
832
|
-
let
|
|
832
|
+
let cachedFooterEls = null;
|
|
833
833
|
let cachedFooterYPosition = null;
|
|
834
834
|
let currentFooterState = null;
|
|
835
835
|
const canDismissMaxStep = 0.95;
|
|
@@ -866,60 +866,81 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
866
866
|
* @param newPosition Whether the footer is in a moving or stationary position.
|
|
867
867
|
*/
|
|
868
868
|
const swapFooterPosition = (newPosition) => {
|
|
869
|
-
if (!
|
|
870
|
-
|
|
871
|
-
if (!
|
|
869
|
+
if (!cachedFooterEls) {
|
|
870
|
+
cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
|
|
871
|
+
if (!cachedFooterEls.length) {
|
|
872
872
|
return;
|
|
873
873
|
}
|
|
874
874
|
}
|
|
875
875
|
const page = baseEl.querySelector('.ion-page');
|
|
876
876
|
currentFooterState = newPosition;
|
|
877
877
|
if (newPosition === 'stationary') {
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
878
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
879
|
+
// Reset positioning styles to allow normal document flow
|
|
880
|
+
cachedFooterEl.classList.remove('modal-footer-moving');
|
|
881
|
+
cachedFooterEl.style.removeProperty('position');
|
|
882
|
+
cachedFooterEl.style.removeProperty('width');
|
|
883
|
+
cachedFooterEl.style.removeProperty('height');
|
|
884
|
+
cachedFooterEl.style.removeProperty('top');
|
|
885
|
+
cachedFooterEl.style.removeProperty('left');
|
|
886
|
+
page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
|
|
887
|
+
// Move to page
|
|
888
|
+
page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
|
|
889
|
+
});
|
|
888
890
|
}
|
|
889
891
|
else {
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
}
|
|
922
|
-
|
|
892
|
+
let footerHeights = 0;
|
|
893
|
+
cachedFooterEls.forEach((cachedFooterEl, index) => {
|
|
894
|
+
// Get both the footer and document body positions
|
|
895
|
+
const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
|
|
896
|
+
const bodyRect = document.body.getBoundingClientRect();
|
|
897
|
+
// Calculate the total height of all footers
|
|
898
|
+
// so we can add padding to the page element
|
|
899
|
+
footerHeights += cachedFooterEl.clientHeight;
|
|
900
|
+
// Calculate absolute position relative to body
|
|
901
|
+
// We need to subtract the body's offsetTop to get true position within document.body
|
|
902
|
+
const absoluteTop = cachedFooterElRect.top - bodyRect.top;
|
|
903
|
+
const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
|
|
904
|
+
// Capture the footer's current dimensions and store them in CSS variables for
|
|
905
|
+
// later use when applying absolute positioning.
|
|
906
|
+
cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
|
|
907
|
+
cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
|
|
908
|
+
cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
|
|
909
|
+
cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
|
|
910
|
+
// Only cache the first footer's Y position
|
|
911
|
+
// This is used to determine if the sheet has been moved below the footer
|
|
912
|
+
// and needs to be swapped back to stationary so it collapses correctly.
|
|
913
|
+
if (index === 0) {
|
|
914
|
+
cachedFooterYPosition = absoluteTop;
|
|
915
|
+
// If there's a header, we need to combine the header height with the footer position
|
|
916
|
+
// because the header moves with the drag handle, so when it starts overlapping the footer,
|
|
917
|
+
// we need to account for that.
|
|
918
|
+
const header = baseEl.querySelector('ion-header');
|
|
919
|
+
if (header) {
|
|
920
|
+
cachedFooterYPosition -= header.clientHeight;
|
|
921
|
+
}
|
|
922
|
+
}
|
|
923
|
+
});
|
|
924
|
+
// Apply the pinning of styles after we've calculated everything
|
|
925
|
+
// so that we don't cause layouts to shift while calculating the footer positions.
|
|
926
|
+
// Otherwise, with multiple footers we'll end up capturing the wrong positions.
|
|
927
|
+
cachedFooterEls.forEach((cachedFooterEl) => {
|
|
928
|
+
// Add padding to the parent element to prevent content from being hidden
|
|
929
|
+
// when the footer is positioned absolutely. This has to be done before we
|
|
930
|
+
// make the footer absolutely positioned or we may accidentally cause the
|
|
931
|
+
// sheet to scroll.
|
|
932
|
+
page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
|
|
933
|
+
// Apply positioning styles to keep footer at bottom
|
|
934
|
+
cachedFooterEl.classList.add('modal-footer-moving');
|
|
935
|
+
// Apply our preserved styles to pin the footer
|
|
936
|
+
cachedFooterEl.style.setProperty('position', 'absolute');
|
|
937
|
+
cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
|
|
938
|
+
cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
|
|
939
|
+
cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
|
|
940
|
+
cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
|
|
941
|
+
// Move the element to the body when everything else is done
|
|
942
|
+
document.body.appendChild(cachedFooterEl);
|
|
943
|
+
});
|
|
923
944
|
}
|
|
924
945
|
};
|
|
925
946
|
/**
|
|
@@ -1111,6 +1132,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1111
1132
|
* is not scrolled to the top.
|
|
1112
1133
|
*/
|
|
1113
1134
|
if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
|
|
1135
|
+
/**
|
|
1136
|
+
* If expand to scroll is disabled, we need to make sure we swap the footer position
|
|
1137
|
+
* back to stationary so that it will collapse correctly if the modal is dismissed without
|
|
1138
|
+
* dragging (e.g. through a dismiss button).
|
|
1139
|
+
* This can cause issues if the user has a modal with content that can be dragged, as we'll
|
|
1140
|
+
* swap to moving on drag and if we don't swap back here then the footer will get stuck.
|
|
1141
|
+
*/
|
|
1142
|
+
swapFooterPosition('stationary');
|
|
1114
1143
|
return;
|
|
1115
1144
|
}
|
|
1116
1145
|
/**
|
|
@@ -46,9 +46,6 @@ const ReorderGroup = class {
|
|
|
46
46
|
constructor(hostRef) {
|
|
47
47
|
index.registerInstance(this, hostRef);
|
|
48
48
|
this.ionItemReorder = index.createEvent(this, "ionItemReorder", 7);
|
|
49
|
-
this.ionReorderStart = index.createEvent(this, "ionReorderStart", 7);
|
|
50
|
-
this.ionReorderMove = index.createEvent(this, "ionReorderMove", 7);
|
|
51
|
-
this.ionReorderEnd = index.createEvent(this, "ionReorderEnd", 7);
|
|
52
49
|
this.lastToIndex = -1;
|
|
53
50
|
this.cachedHeights = [];
|
|
54
51
|
this.scrollElTop = 0;
|
|
@@ -94,7 +91,7 @@ const ReorderGroup = class {
|
|
|
94
91
|
}
|
|
95
92
|
}
|
|
96
93
|
/**
|
|
97
|
-
* Completes the reorder operation. Must be called by the `
|
|
94
|
+
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
98
95
|
*
|
|
99
96
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
100
97
|
* proper order.
|
|
@@ -161,7 +158,6 @@ const ReorderGroup = class {
|
|
|
161
158
|
this.state = 1 /* ReorderGroupState.Active */;
|
|
162
159
|
item.classList.add(ITEM_REORDER_SELECTED);
|
|
163
160
|
haptic.hapticSelectionStart();
|
|
164
|
-
this.ionReorderStart.emit();
|
|
165
161
|
}
|
|
166
162
|
onMove(ev) {
|
|
167
163
|
const selectedItem = this.selectedItemEl;
|
|
@@ -176,7 +172,6 @@ const ReorderGroup = class {
|
|
|
176
172
|
const currentY = Math.max(top, Math.min(ev.currentY, bottom));
|
|
177
173
|
const deltaY = scroll + currentY - ev.startY;
|
|
178
174
|
const normalizedY = currentY - top;
|
|
179
|
-
const fromIndex = this.lastToIndex;
|
|
180
175
|
const toIndex = this.itemIndexForTop(normalizedY);
|
|
181
176
|
if (toIndex !== this.lastToIndex) {
|
|
182
177
|
const fromIndex = indexForItem(selectedItem);
|
|
@@ -186,10 +181,6 @@ const ReorderGroup = class {
|
|
|
186
181
|
}
|
|
187
182
|
// Update selected item position
|
|
188
183
|
selectedItem.style.transform = `translateY(${deltaY}px)`;
|
|
189
|
-
this.ionReorderMove.emit({
|
|
190
|
-
from: fromIndex,
|
|
191
|
-
to: toIndex,
|
|
192
|
-
});
|
|
193
184
|
}
|
|
194
185
|
onEnd() {
|
|
195
186
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -201,23 +192,14 @@ const ReorderGroup = class {
|
|
|
201
192
|
const toIndex = this.lastToIndex;
|
|
202
193
|
const fromIndex = indexForItem(selectedItemEl);
|
|
203
194
|
if (toIndex === fromIndex) {
|
|
204
|
-
this.ionReorderEnd.emit({
|
|
205
|
-
complete: this.completeReorder.bind(this),
|
|
206
|
-
});
|
|
207
195
|
this.completeReorder();
|
|
208
196
|
}
|
|
209
197
|
else {
|
|
210
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
211
198
|
this.ionItemReorder.emit({
|
|
212
199
|
from: fromIndex,
|
|
213
200
|
to: toIndex,
|
|
214
201
|
complete: this.completeReorder.bind(this),
|
|
215
202
|
});
|
|
216
|
-
this.ionReorderEnd.emit({
|
|
217
|
-
from: fromIndex,
|
|
218
|
-
to: toIndex,
|
|
219
|
-
complete: this.completeReorder.bind(this),
|
|
220
|
-
});
|
|
221
203
|
}
|
|
222
204
|
haptic.hapticSelectionEnd();
|
|
223
205
|
}
|
|
@@ -297,7 +279,7 @@ const ReorderGroup = class {
|
|
|
297
279
|
}
|
|
298
280
|
render() {
|
|
299
281
|
const mode = index.getIonMode(this);
|
|
300
|
-
return (index.h(index.Host, { key: '
|
|
282
|
+
return (index.h(index.Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
301
283
|
[mode]: true,
|
|
302
284
|
'reorder-enabled': !this.disabled,
|
|
303
285
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -179,6 +179,7 @@ export class ItemSliding {
|
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
async updateOptions() {
|
|
182
|
+
var _a;
|
|
182
183
|
const options = this.el.querySelectorAll('ion-item-options');
|
|
183
184
|
let sides = 0;
|
|
184
185
|
// Reset left and right options in case they were removed
|
|
@@ -192,7 +193,7 @@ export class ItemSliding {
|
|
|
192
193
|
*/
|
|
193
194
|
// eslint-disable-next-line custom-rules/no-component-on-ready-method
|
|
194
195
|
const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
|
|
195
|
-
const side = isEndSide(option.side) ? 'end' : 'start';
|
|
196
|
+
const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
|
|
196
197
|
if (side === 'start') {
|
|
197
198
|
this.leftOptions = option;
|
|
198
199
|
sides |= 1 /* ItemSide.Start */;
|
|
@@ -390,7 +391,7 @@ export class ItemSliding {
|
|
|
390
391
|
}
|
|
391
392
|
render() {
|
|
392
393
|
const mode = getIonMode(this);
|
|
393
|
-
return (h(Host, { key: '
|
|
394
|
+
return (h(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
|
|
394
395
|
[mode]: true,
|
|
395
396
|
'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
|
|
396
397
|
'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
|