@ionic/core 8.6.2-dev.11749668763.17db572c → 8.6.2-dev.11749761258.1b46b6a9
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-reorder-group.js +2 -21
- package/components/picker-column.js +22 -4
- package/dist/cjs/ion-picker-column.cjs.entry.js +22 -4
- package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -21
- package/dist/collection/components/picker-column/picker-column.js +22 -4
- package/dist/collection/components/reorder-group/reorder-group.js +5 -81
- package/dist/docs.json +3 -73
- package/dist/esm/ion-picker-column.entry.js +22 -4
- package/dist/esm/ion-reorder_2.entry.js +2 -21
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-2020aa51.entry.js +4 -0
- package/dist/ionic/p-2dca6aac.entry.js +4 -0
- package/dist/types/components/reorder-group/reorder-group-interface.d.ts +0 -17
- package/dist/types/components/reorder-group/reorder-group.d.ts +4 -23
- package/dist/types/components.d.ts +4 -19
- package/dist/types/interface.d.ts +1 -5
- package/hydrate/index.js +24 -25
- package/hydrate/index.mjs +24 -25
- package/package.json +1 -1
- package/dist/ionic/p-14ae45e4.entry.js +0 -4
- package/dist/ionic/p-adfb508e.entry.js +0 -4
|
@@ -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,14 +160,9 @@ 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
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
173
|
-
// Since the ionReorderEnd event is emitted at the end of every reorder
|
|
174
|
-
// gesture, even if the item did not move, the user can always call
|
|
175
|
-
// complete() to reset the state of the reorder group.
|
|
176
163
|
this.completeReorder();
|
|
177
164
|
}
|
|
178
165
|
else {
|
|
179
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
180
166
|
this.ionItemReorder.emit({
|
|
181
167
|
from: fromIndex,
|
|
182
168
|
to: toIndex,
|
|
@@ -184,11 +170,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
184
170
|
});
|
|
185
171
|
}
|
|
186
172
|
hapticSelectionEnd();
|
|
187
|
-
this.ionReorderEnd.emit({
|
|
188
|
-
from: fromIndex,
|
|
189
|
-
to: toIndex,
|
|
190
|
-
complete: this.completeReorder.bind(this),
|
|
191
|
-
});
|
|
192
173
|
}
|
|
193
174
|
completeReorder(listOrReorder) {
|
|
194
175
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -266,7 +247,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
266
247
|
}
|
|
267
248
|
render() {
|
|
268
249
|
const mode = getIonMode(this);
|
|
269
|
-
return (h(Host, { key: '
|
|
250
|
+
return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
270
251
|
[mode]: true,
|
|
271
252
|
'reorder-enabled': !this.disabled,
|
|
272
253
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -180,7 +180,25 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
|
|
|
180
180
|
* elementsFromPoint can returns multiple elements
|
|
181
181
|
* so find the relevant picker column option if one exists.
|
|
182
182
|
*/
|
|
183
|
-
|
|
183
|
+
let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
|
|
184
|
+
/**
|
|
185
|
+
* TODO(FW-6594): Remove this workaround when iOS 16 is no longer
|
|
186
|
+
* supported.
|
|
187
|
+
*
|
|
188
|
+
* If `elementsFromPoint` failed to find the active element (a known
|
|
189
|
+
* issue on iOS 16 when elements are in a Shadow DOM and the
|
|
190
|
+
* referenceNode is the document), a fallback to `elementFromPoint`
|
|
191
|
+
* is used. While `elementsFromPoint` returns all elements,
|
|
192
|
+
* `elementFromPoint` returns only the top-most, which is sufficient
|
|
193
|
+
* for this use case and appears to handle Shadow DOM retargeting
|
|
194
|
+
* more reliably in this specific iOS bug.
|
|
195
|
+
*/
|
|
196
|
+
if (newActiveElement === undefined) {
|
|
197
|
+
const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
|
|
198
|
+
if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
|
|
199
|
+
newActiveElement = fallbackActiveElement;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
184
202
|
if (activeEl !== undefined) {
|
|
185
203
|
this.setPickerItemActiveState(activeEl, false);
|
|
186
204
|
}
|
|
@@ -548,12 +566,12 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
|
|
|
548
566
|
render() {
|
|
549
567
|
const { color, disabled, isActive, numericInput } = this;
|
|
550
568
|
const mode = getIonMode(this);
|
|
551
|
-
return (h(Host, { key: '
|
|
569
|
+
return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
|
|
552
570
|
[mode]: true,
|
|
553
571
|
['picker-column-active']: isActive,
|
|
554
572
|
['picker-column-numeric-input']: numericInput,
|
|
555
573
|
['picker-column-disabled']: disabled,
|
|
556
|
-
}) }, this.renderAssistiveFocusable(), h("slot", { key: '
|
|
574
|
+
}) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
|
|
557
575
|
this.scrollEl = el;
|
|
558
576
|
},
|
|
559
577
|
/**
|
|
@@ -574,7 +592,7 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
|
|
|
574
592
|
* To prevent this, we set the tabIndex to -1. This
|
|
575
593
|
* will match the behavior of the other browsers.
|
|
576
594
|
*/
|
|
577
|
-
tabIndex: -1 }, h("div", { key: '
|
|
595
|
+
tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
578
596
|
}
|
|
579
597
|
get el() { return this; }
|
|
580
598
|
static get watchers() { return {
|
|
@@ -180,7 +180,25 @@ const PickerColumn = class {
|
|
|
180
180
|
* elementsFromPoint can returns multiple elements
|
|
181
181
|
* so find the relevant picker column option if one exists.
|
|
182
182
|
*/
|
|
183
|
-
|
|
183
|
+
let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
|
|
184
|
+
/**
|
|
185
|
+
* TODO(FW-6594): Remove this workaround when iOS 16 is no longer
|
|
186
|
+
* supported.
|
|
187
|
+
*
|
|
188
|
+
* If `elementsFromPoint` failed to find the active element (a known
|
|
189
|
+
* issue on iOS 16 when elements are in a Shadow DOM and the
|
|
190
|
+
* referenceNode is the document), a fallback to `elementFromPoint`
|
|
191
|
+
* is used. While `elementsFromPoint` returns all elements,
|
|
192
|
+
* `elementFromPoint` returns only the top-most, which is sufficient
|
|
193
|
+
* for this use case and appears to handle Shadow DOM retargeting
|
|
194
|
+
* more reliably in this specific iOS bug.
|
|
195
|
+
*/
|
|
196
|
+
if (newActiveElement === undefined) {
|
|
197
|
+
const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
|
|
198
|
+
if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
|
|
199
|
+
newActiveElement = fallbackActiveElement;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
184
202
|
if (activeEl !== undefined) {
|
|
185
203
|
this.setPickerItemActiveState(activeEl, false);
|
|
186
204
|
}
|
|
@@ -548,12 +566,12 @@ const PickerColumn = class {
|
|
|
548
566
|
render() {
|
|
549
567
|
const { color, disabled, isActive, numericInput } = this;
|
|
550
568
|
const mode = index.getIonMode(this);
|
|
551
|
-
return (index.h(index.Host, { key: '
|
|
569
|
+
return (index.h(index.Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: theme.createColorClasses(color, {
|
|
552
570
|
[mode]: true,
|
|
553
571
|
['picker-column-active']: isActive,
|
|
554
572
|
['picker-column-numeric-input']: numericInput,
|
|
555
573
|
['picker-column-disabled']: disabled,
|
|
556
|
-
}) }, this.renderAssistiveFocusable(), index.h("slot", { key: '
|
|
574
|
+
}) }, this.renderAssistiveFocusable(), index.h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), index.h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
|
|
557
575
|
this.scrollEl = el;
|
|
558
576
|
},
|
|
559
577
|
/**
|
|
@@ -574,7 +592,7 @@ const PickerColumn = class {
|
|
|
574
592
|
* To prevent this, we set the tabIndex to -1. This
|
|
575
593
|
* will match the behavior of the other browsers.
|
|
576
594
|
*/
|
|
577
|
-
tabIndex: -1 }, index.h("div", { key: '
|
|
595
|
+
tabIndex: -1 }, index.h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), index.h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
578
596
|
}
|
|
579
597
|
get el() { return index.getElement(this); }
|
|
580
598
|
static get watchers() { return {
|
|
@@ -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,14 +192,9 @@ const ReorderGroup = class {
|
|
|
201
192
|
const toIndex = this.lastToIndex;
|
|
202
193
|
const fromIndex = indexForItem(selectedItemEl);
|
|
203
194
|
if (toIndex === fromIndex) {
|
|
204
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
205
|
-
// Since the ionReorderEnd event is emitted at the end of every reorder
|
|
206
|
-
// gesture, even if the item did not move, the user can always call
|
|
207
|
-
// complete() to reset the state of the reorder group.
|
|
208
195
|
this.completeReorder();
|
|
209
196
|
}
|
|
210
197
|
else {
|
|
211
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
212
198
|
this.ionItemReorder.emit({
|
|
213
199
|
from: fromIndex,
|
|
214
200
|
to: toIndex,
|
|
@@ -216,11 +202,6 @@ const ReorderGroup = class {
|
|
|
216
202
|
});
|
|
217
203
|
}
|
|
218
204
|
haptic.hapticSelectionEnd();
|
|
219
|
-
this.ionReorderEnd.emit({
|
|
220
|
-
from: fromIndex,
|
|
221
|
-
to: toIndex,
|
|
222
|
-
complete: this.completeReorder.bind(this),
|
|
223
|
-
});
|
|
224
205
|
}
|
|
225
206
|
completeReorder(listOrReorder) {
|
|
226
207
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -298,7 +279,7 @@ const ReorderGroup = class {
|
|
|
298
279
|
}
|
|
299
280
|
render() {
|
|
300
281
|
const mode = index.getIonMode(this);
|
|
301
|
-
return (index.h(index.Host, { key: '
|
|
282
|
+
return (index.h(index.Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
302
283
|
[mode]: true,
|
|
303
284
|
'reorder-enabled': !this.disabled,
|
|
304
285
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -180,7 +180,25 @@ export class PickerColumn {
|
|
|
180
180
|
* elementsFromPoint can returns multiple elements
|
|
181
181
|
* so find the relevant picker column option if one exists.
|
|
182
182
|
*/
|
|
183
|
-
|
|
183
|
+
let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
|
|
184
|
+
/**
|
|
185
|
+
* TODO(FW-6594): Remove this workaround when iOS 16 is no longer
|
|
186
|
+
* supported.
|
|
187
|
+
*
|
|
188
|
+
* If `elementsFromPoint` failed to find the active element (a known
|
|
189
|
+
* issue on iOS 16 when elements are in a Shadow DOM and the
|
|
190
|
+
* referenceNode is the document), a fallback to `elementFromPoint`
|
|
191
|
+
* is used. While `elementsFromPoint` returns all elements,
|
|
192
|
+
* `elementFromPoint` returns only the top-most, which is sufficient
|
|
193
|
+
* for this use case and appears to handle Shadow DOM retargeting
|
|
194
|
+
* more reliably in this specific iOS bug.
|
|
195
|
+
*/
|
|
196
|
+
if (newActiveElement === undefined) {
|
|
197
|
+
const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
|
|
198
|
+
if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
|
|
199
|
+
newActiveElement = fallbackActiveElement;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
184
202
|
if (activeEl !== undefined) {
|
|
185
203
|
this.setPickerItemActiveState(activeEl, false);
|
|
186
204
|
}
|
|
@@ -550,12 +568,12 @@ export class PickerColumn {
|
|
|
550
568
|
render() {
|
|
551
569
|
const { color, disabled, isActive, numericInput } = this;
|
|
552
570
|
const mode = getIonMode(this);
|
|
553
|
-
return (h(Host, { key: '
|
|
571
|
+
return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
|
|
554
572
|
[mode]: true,
|
|
555
573
|
['picker-column-active']: isActive,
|
|
556
574
|
['picker-column-numeric-input']: numericInput,
|
|
557
575
|
['picker-column-disabled']: disabled,
|
|
558
|
-
}) }, this.renderAssistiveFocusable(), h("slot", { key: '
|
|
576
|
+
}) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
|
|
559
577
|
this.scrollEl = el;
|
|
560
578
|
},
|
|
561
579
|
/**
|
|
@@ -576,7 +594,7 @@ export class PickerColumn {
|
|
|
576
594
|
* To prevent this, we set the tabIndex to -1. This
|
|
577
595
|
* will match the behavior of the other browsers.
|
|
578
596
|
*/
|
|
579
|
-
tabIndex: -1 }, h("div", { key: '
|
|
597
|
+
tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
580
598
|
}
|
|
581
599
|
static get is() { return "ion-picker-column"; }
|
|
582
600
|
static get encapsulation() { return "shadow"; }
|
|
@@ -53,7 +53,7 @@ export class ReorderGroup {
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
/**
|
|
56
|
-
* Completes the reorder operation. Must be called by the `
|
|
56
|
+
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
57
57
|
*
|
|
58
58
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
59
59
|
* proper order.
|
|
@@ -120,7 +120,6 @@ export class ReorderGroup {
|
|
|
120
120
|
this.state = 1 /* ReorderGroupState.Active */;
|
|
121
121
|
item.classList.add(ITEM_REORDER_SELECTED);
|
|
122
122
|
hapticSelectionStart();
|
|
123
|
-
this.ionReorderStart.emit();
|
|
124
123
|
}
|
|
125
124
|
onMove(ev) {
|
|
126
125
|
const selectedItem = this.selectedItemEl;
|
|
@@ -135,7 +134,6 @@ export class ReorderGroup {
|
|
|
135
134
|
const currentY = Math.max(top, Math.min(ev.currentY, bottom));
|
|
136
135
|
const deltaY = scroll + currentY - ev.startY;
|
|
137
136
|
const normalizedY = currentY - top;
|
|
138
|
-
const fromIndex = this.lastToIndex;
|
|
139
137
|
const toIndex = this.itemIndexForTop(normalizedY);
|
|
140
138
|
if (toIndex !== this.lastToIndex) {
|
|
141
139
|
const fromIndex = indexForItem(selectedItem);
|
|
@@ -145,10 +143,6 @@ export class ReorderGroup {
|
|
|
145
143
|
}
|
|
146
144
|
// Update selected item position
|
|
147
145
|
selectedItem.style.transform = `translateY(${deltaY}px)`;
|
|
148
|
-
this.ionReorderMove.emit({
|
|
149
|
-
from: fromIndex,
|
|
150
|
-
to: toIndex,
|
|
151
|
-
});
|
|
152
146
|
}
|
|
153
147
|
onEnd() {
|
|
154
148
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -160,14 +154,9 @@ export class ReorderGroup {
|
|
|
160
154
|
const toIndex = this.lastToIndex;
|
|
161
155
|
const fromIndex = indexForItem(selectedItemEl);
|
|
162
156
|
if (toIndex === fromIndex) {
|
|
163
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
164
|
-
// Since the ionReorderEnd event is emitted at the end of every reorder
|
|
165
|
-
// gesture, even if the item did not move, the user can always call
|
|
166
|
-
// complete() to reset the state of the reorder group.
|
|
167
157
|
this.completeReorder();
|
|
168
158
|
}
|
|
169
159
|
else {
|
|
170
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
171
160
|
this.ionItemReorder.emit({
|
|
172
161
|
from: fromIndex,
|
|
173
162
|
to: toIndex,
|
|
@@ -175,11 +164,6 @@ export class ReorderGroup {
|
|
|
175
164
|
});
|
|
176
165
|
}
|
|
177
166
|
hapticSelectionEnd();
|
|
178
|
-
this.ionReorderEnd.emit({
|
|
179
|
-
from: fromIndex,
|
|
180
|
-
to: toIndex,
|
|
181
|
-
complete: this.completeReorder.bind(this),
|
|
182
|
-
});
|
|
183
167
|
}
|
|
184
168
|
completeReorder(listOrReorder) {
|
|
185
169
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -257,7 +241,7 @@ export class ReorderGroup {
|
|
|
257
241
|
}
|
|
258
242
|
render() {
|
|
259
243
|
const mode = getIonMode(this);
|
|
260
|
-
return (h(Host, { key: '
|
|
244
|
+
return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
261
245
|
[mode]: true,
|
|
262
246
|
'reorder-enabled': !this.disabled,
|
|
263
247
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -311,11 +295,8 @@ export class ReorderGroup {
|
|
|
311
295
|
"cancelable": true,
|
|
312
296
|
"composed": true,
|
|
313
297
|
"docs": {
|
|
314
|
-
"tags": [
|
|
315
|
-
|
|
316
|
-
"text": "Use `ionReorderEnd` instead. The new event is emitted\nat the end of every reorder gesture, even if the positions do not\nchange. If you were accessing `event.detail.from` or `event.detail.to`\nbefore and relying on them being different you should now add checks as\nthey are always emitted in `ionReorderEnd`, even when they are the same."
|
|
317
|
-
}],
|
|
318
|
-
"text": ""
|
|
298
|
+
"tags": [],
|
|
299
|
+
"text": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action."
|
|
319
300
|
},
|
|
320
301
|
"complexType": {
|
|
321
302
|
"original": "ItemReorderEventDetail",
|
|
@@ -328,63 +309,6 @@ export class ReorderGroup {
|
|
|
328
309
|
}
|
|
329
310
|
}
|
|
330
311
|
}
|
|
331
|
-
}, {
|
|
332
|
-
"method": "ionReorderStart",
|
|
333
|
-
"name": "ionReorderStart",
|
|
334
|
-
"bubbles": true,
|
|
335
|
-
"cancelable": true,
|
|
336
|
-
"composed": true,
|
|
337
|
-
"docs": {
|
|
338
|
-
"tags": [],
|
|
339
|
-
"text": "Event that is emitted when the reorder gesture starts."
|
|
340
|
-
},
|
|
341
|
-
"complexType": {
|
|
342
|
-
"original": "void",
|
|
343
|
-
"resolved": "void",
|
|
344
|
-
"references": {}
|
|
345
|
-
}
|
|
346
|
-
}, {
|
|
347
|
-
"method": "ionReorderMove",
|
|
348
|
-
"name": "ionReorderMove",
|
|
349
|
-
"bubbles": true,
|
|
350
|
-
"cancelable": true,
|
|
351
|
-
"composed": true,
|
|
352
|
-
"docs": {
|
|
353
|
-
"tags": [],
|
|
354
|
-
"text": "Event that is emitted as the reorder gesture moves."
|
|
355
|
-
},
|
|
356
|
-
"complexType": {
|
|
357
|
-
"original": "ReorderMoveEventDetail",
|
|
358
|
-
"resolved": "ReorderMoveEventDetail",
|
|
359
|
-
"references": {
|
|
360
|
-
"ReorderMoveEventDetail": {
|
|
361
|
-
"location": "import",
|
|
362
|
-
"path": "./reorder-group-interface",
|
|
363
|
-
"id": "src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail"
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
}, {
|
|
368
|
-
"method": "ionReorderEnd",
|
|
369
|
-
"name": "ionReorderEnd",
|
|
370
|
-
"bubbles": true,
|
|
371
|
-
"cancelable": true,
|
|
372
|
-
"composed": true,
|
|
373
|
-
"docs": {
|
|
374
|
-
"tags": [],
|
|
375
|
-
"text": "Event that is emitted when the reorder gesture ends.\nThe from and to properties are always available, regardless of\nif the reorder gesture moved the item. If the item did not change\nfrom its start position, the from and to properties will be the same.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action."
|
|
376
|
-
},
|
|
377
|
-
"complexType": {
|
|
378
|
-
"original": "ReorderEndEventDetail",
|
|
379
|
-
"resolved": "ReorderEndEventDetail",
|
|
380
|
-
"references": {
|
|
381
|
-
"ReorderEndEventDetail": {
|
|
382
|
-
"location": "import",
|
|
383
|
-
"path": "./reorder-group-interface",
|
|
384
|
-
"id": "src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail"
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
312
|
}];
|
|
389
313
|
}
|
|
390
314
|
static get methods() {
|
|
@@ -406,7 +330,7 @@ export class ReorderGroup {
|
|
|
406
330
|
"return": "Promise<any>"
|
|
407
331
|
},
|
|
408
332
|
"docs": {
|
|
409
|
-
"text": "Completes the reorder operation. Must be called by the `
|
|
333
|
+
"text": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
|
|
410
334
|
"tags": [{
|
|
411
335
|
"name": "param",
|
|
412
336
|
"text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-06-
|
|
2
|
+
"timestamp": "2025-06-12T20:49:12",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.33.1",
|
|
@@ -27019,7 +27019,7 @@
|
|
|
27019
27019
|
"docs": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
|
|
27020
27020
|
}
|
|
27021
27021
|
],
|
|
27022
|
-
"docs": "Completes the reorder operation. Must be called by the `
|
|
27022
|
+
"docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
|
|
27023
27023
|
"docsTags": [
|
|
27024
27024
|
{
|
|
27025
27025
|
"name": "param",
|
|
@@ -27046,67 +27046,7 @@
|
|
|
27046
27046
|
},
|
|
27047
27047
|
"cancelable": true,
|
|
27048
27048
|
"composed": true,
|
|
27049
|
-
"docs": "",
|
|
27050
|
-
"docsTags": [
|
|
27051
|
-
{
|
|
27052
|
-
"name": "deprecated",
|
|
27053
|
-
"text": "Use `ionReorderEnd` instead. The new event is emitted\nat the end of every reorder gesture, even if the positions do not\nchange. If you were accessing `event.detail.from` or `event.detail.to`\nbefore and relying on them being different you should now add checks as\nthey are always emitted in `ionReorderEnd`, even when they are the same."
|
|
27054
|
-
}
|
|
27055
|
-
],
|
|
27056
|
-
"deprecation": "Use `ionReorderEnd` instead. The new event is emitted\nat the end of every reorder gesture, even if the positions do not\nchange. If you were accessing `event.detail.from` or `event.detail.to`\nbefore and relying on them being different you should now add checks as\nthey are always emitted in `ionReorderEnd`, even when they are the same."
|
|
27057
|
-
},
|
|
27058
|
-
{
|
|
27059
|
-
"event": "ionReorderEnd",
|
|
27060
|
-
"detail": "ReorderEndEventDetail",
|
|
27061
|
-
"bubbles": true,
|
|
27062
|
-
"complexType": {
|
|
27063
|
-
"original": "ReorderEndEventDetail",
|
|
27064
|
-
"resolved": "ReorderEndEventDetail",
|
|
27065
|
-
"references": {
|
|
27066
|
-
"ReorderEndEventDetail": {
|
|
27067
|
-
"location": "import",
|
|
27068
|
-
"path": "./reorder-group-interface",
|
|
27069
|
-
"id": "src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail"
|
|
27070
|
-
}
|
|
27071
|
-
}
|
|
27072
|
-
},
|
|
27073
|
-
"cancelable": true,
|
|
27074
|
-
"composed": true,
|
|
27075
|
-
"docs": "Event that is emitted when the reorder gesture ends.\nThe from and to properties are always available, regardless of\nif the reorder gesture moved the item. If the item did not change\nfrom its start position, the from and to properties will be the same.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
|
|
27076
|
-
"docsTags": []
|
|
27077
|
-
},
|
|
27078
|
-
{
|
|
27079
|
-
"event": "ionReorderMove",
|
|
27080
|
-
"detail": "ReorderMoveEventDetail",
|
|
27081
|
-
"bubbles": true,
|
|
27082
|
-
"complexType": {
|
|
27083
|
-
"original": "ReorderMoveEventDetail",
|
|
27084
|
-
"resolved": "ReorderMoveEventDetail",
|
|
27085
|
-
"references": {
|
|
27086
|
-
"ReorderMoveEventDetail": {
|
|
27087
|
-
"location": "import",
|
|
27088
|
-
"path": "./reorder-group-interface",
|
|
27089
|
-
"id": "src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail"
|
|
27090
|
-
}
|
|
27091
|
-
}
|
|
27092
|
-
},
|
|
27093
|
-
"cancelable": true,
|
|
27094
|
-
"composed": true,
|
|
27095
|
-
"docs": "Event that is emitted as the reorder gesture moves.",
|
|
27096
|
-
"docsTags": []
|
|
27097
|
-
},
|
|
27098
|
-
{
|
|
27099
|
-
"event": "ionReorderStart",
|
|
27100
|
-
"detail": "void",
|
|
27101
|
-
"bubbles": true,
|
|
27102
|
-
"complexType": {
|
|
27103
|
-
"original": "void",
|
|
27104
|
-
"resolved": "void",
|
|
27105
|
-
"references": {}
|
|
27106
|
-
},
|
|
27107
|
-
"cancelable": true,
|
|
27108
|
-
"composed": true,
|
|
27109
|
-
"docs": "Event that is emitted when the reorder gesture starts.",
|
|
27049
|
+
"docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
|
|
27110
27050
|
"docsTags": []
|
|
27111
27051
|
}
|
|
27112
27052
|
],
|
|
@@ -37526,16 +37466,6 @@
|
|
|
37526
37466
|
"docstring": "",
|
|
37527
37467
|
"path": "src/components/reorder-group/reorder-group-interface.ts"
|
|
37528
37468
|
},
|
|
37529
|
-
"src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail": {
|
|
37530
|
-
"declaration": "export interface ReorderMoveEventDetail {\n from: number;\n to: number;\n}",
|
|
37531
|
-
"docstring": "",
|
|
37532
|
-
"path": "src/components/reorder-group/reorder-group-interface.ts"
|
|
37533
|
-
},
|
|
37534
|
-
"src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail": {
|
|
37535
|
-
"declaration": "export interface ReorderEndEventDetail {\n from: number;\n to: number;\n complete: (data?: boolean | any[]) => any;\n}",
|
|
37536
|
-
"docstring": "",
|
|
37537
|
-
"path": "src/components/reorder-group/reorder-group-interface.ts"
|
|
37538
|
-
},
|
|
37539
37469
|
"src/components/route/route-interface.ts::NavigationHookCallback": {
|
|
37540
37470
|
"declaration": "() => NavigationHookResult | Promise<NavigationHookResult>",
|
|
37541
37471
|
"docstring": "",
|
|
@@ -178,7 +178,25 @@ const PickerColumn = class {
|
|
|
178
178
|
* elementsFromPoint can returns multiple elements
|
|
179
179
|
* so find the relevant picker column option if one exists.
|
|
180
180
|
*/
|
|
181
|
-
|
|
181
|
+
let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
|
|
182
|
+
/**
|
|
183
|
+
* TODO(FW-6594): Remove this workaround when iOS 16 is no longer
|
|
184
|
+
* supported.
|
|
185
|
+
*
|
|
186
|
+
* If `elementsFromPoint` failed to find the active element (a known
|
|
187
|
+
* issue on iOS 16 when elements are in a Shadow DOM and the
|
|
188
|
+
* referenceNode is the document), a fallback to `elementFromPoint`
|
|
189
|
+
* is used. While `elementsFromPoint` returns all elements,
|
|
190
|
+
* `elementFromPoint` returns only the top-most, which is sufficient
|
|
191
|
+
* for this use case and appears to handle Shadow DOM retargeting
|
|
192
|
+
* more reliably in this specific iOS bug.
|
|
193
|
+
*/
|
|
194
|
+
if (newActiveElement === undefined) {
|
|
195
|
+
const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
|
|
196
|
+
if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
|
|
197
|
+
newActiveElement = fallbackActiveElement;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
182
200
|
if (activeEl !== undefined) {
|
|
183
201
|
this.setPickerItemActiveState(activeEl, false);
|
|
184
202
|
}
|
|
@@ -546,12 +564,12 @@ const PickerColumn = class {
|
|
|
546
564
|
render() {
|
|
547
565
|
const { color, disabled, isActive, numericInput } = this;
|
|
548
566
|
const mode = getIonMode(this);
|
|
549
|
-
return (h(Host, { key: '
|
|
567
|
+
return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
|
|
550
568
|
[mode]: true,
|
|
551
569
|
['picker-column-active']: isActive,
|
|
552
570
|
['picker-column-numeric-input']: numericInput,
|
|
553
571
|
['picker-column-disabled']: disabled,
|
|
554
|
-
}) }, this.renderAssistiveFocusable(), h("slot", { key: '
|
|
572
|
+
}) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
|
|
555
573
|
this.scrollEl = el;
|
|
556
574
|
},
|
|
557
575
|
/**
|
|
@@ -572,7 +590,7 @@ const PickerColumn = class {
|
|
|
572
590
|
* To prevent this, we set the tabIndex to -1. This
|
|
573
591
|
* will match the behavior of the other browsers.
|
|
574
592
|
*/
|
|
575
|
-
tabIndex: -1 }, h("div", { key: '
|
|
593
|
+
tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
576
594
|
}
|
|
577
595
|
get el() { return getElement(this); }
|
|
578
596
|
static get watchers() { return {
|