@ionic/core 8.6.2-dev.11749759855.198287b7 → 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 -17
- 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 -17
- package/dist/collection/components/picker-column/picker-column.js +22 -4
- package/dist/collection/components/reorder-group/reorder-group.js +5 -77
- 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 -17
- 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 +3 -22
- package/dist/types/components.d.ts +4 -20
- package/dist/types/interface.d.ts +1 -5
- package/hydrate/index.js +24 -21
- package/hydrate/index.mjs +24 -21
- package/package.json +1 -1
- package/dist/ionic/p-14ae45e4.entry.js +0 -4
- package/dist/ionic/p-32b71d47.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;
|
|
@@ -172,7 +163,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
172
163
|
this.completeReorder();
|
|
173
164
|
}
|
|
174
165
|
else {
|
|
175
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
176
166
|
this.ionItemReorder.emit({
|
|
177
167
|
from: fromIndex,
|
|
178
168
|
to: toIndex,
|
|
@@ -180,11 +170,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
180
170
|
});
|
|
181
171
|
}
|
|
182
172
|
hapticSelectionEnd();
|
|
183
|
-
this.ionReorderEnd.emit({
|
|
184
|
-
from: fromIndex,
|
|
185
|
-
to: toIndex,
|
|
186
|
-
complete: this.completeReorder.bind(this),
|
|
187
|
-
});
|
|
188
173
|
}
|
|
189
174
|
completeReorder(listOrReorder) {
|
|
190
175
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -262,7 +247,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
|
|
|
262
247
|
}
|
|
263
248
|
render() {
|
|
264
249
|
const mode = getIonMode(this);
|
|
265
|
-
return (h(Host, { key: '
|
|
250
|
+
return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
266
251
|
[mode]: true,
|
|
267
252
|
'reorder-enabled': !this.disabled,
|
|
268
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;
|
|
@@ -204,7 +195,6 @@ const ReorderGroup = class {
|
|
|
204
195
|
this.completeReorder();
|
|
205
196
|
}
|
|
206
197
|
else {
|
|
207
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
208
198
|
this.ionItemReorder.emit({
|
|
209
199
|
from: fromIndex,
|
|
210
200
|
to: toIndex,
|
|
@@ -212,11 +202,6 @@ const ReorderGroup = class {
|
|
|
212
202
|
});
|
|
213
203
|
}
|
|
214
204
|
haptic.hapticSelectionEnd();
|
|
215
|
-
this.ionReorderEnd.emit({
|
|
216
|
-
from: fromIndex,
|
|
217
|
-
to: toIndex,
|
|
218
|
-
complete: this.completeReorder.bind(this),
|
|
219
|
-
});
|
|
220
205
|
}
|
|
221
206
|
completeReorder(listOrReorder) {
|
|
222
207
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -294,7 +279,7 @@ const ReorderGroup = class {
|
|
|
294
279
|
}
|
|
295
280
|
render() {
|
|
296
281
|
const mode = index.getIonMode(this);
|
|
297
|
-
return (index.h(index.Host, { key: '
|
|
282
|
+
return (index.h(index.Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
298
283
|
[mode]: true,
|
|
299
284
|
'reorder-enabled': !this.disabled,
|
|
300
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;
|
|
@@ -163,7 +157,6 @@ export class ReorderGroup {
|
|
|
163
157
|
this.completeReorder();
|
|
164
158
|
}
|
|
165
159
|
else {
|
|
166
|
-
// TODO(FW-6590): Remove this once the deprecated event is removed
|
|
167
160
|
this.ionItemReorder.emit({
|
|
168
161
|
from: fromIndex,
|
|
169
162
|
to: toIndex,
|
|
@@ -171,11 +164,6 @@ export class ReorderGroup {
|
|
|
171
164
|
});
|
|
172
165
|
}
|
|
173
166
|
hapticSelectionEnd();
|
|
174
|
-
this.ionReorderEnd.emit({
|
|
175
|
-
from: fromIndex,
|
|
176
|
-
to: toIndex,
|
|
177
|
-
complete: this.completeReorder.bind(this),
|
|
178
|
-
});
|
|
179
167
|
}
|
|
180
168
|
completeReorder(listOrReorder) {
|
|
181
169
|
const selectedItemEl = this.selectedItemEl;
|
|
@@ -253,7 +241,7 @@ export class ReorderGroup {
|
|
|
253
241
|
}
|
|
254
242
|
render() {
|
|
255
243
|
const mode = getIonMode(this);
|
|
256
|
-
return (h(Host, { key: '
|
|
244
|
+
return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
257
245
|
[mode]: true,
|
|
258
246
|
'reorder-enabled': !this.disabled,
|
|
259
247
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -307,11 +295,8 @@ export class ReorderGroup {
|
|
|
307
295
|
"cancelable": true,
|
|
308
296
|
"composed": true,
|
|
309
297
|
"docs": {
|
|
310
|
-
"tags": [
|
|
311
|
-
|
|
312
|
-
"text": "Use `ionReorderEnd` instead. If you are accessing\n`event.detail.from` or `event.detail.to` and relying on them\nbeing different you should now add checks as they are always emitted\nin `ionReorderEnd`, even when they are the same."
|
|
313
|
-
}],
|
|
314
|
-
"text": "Event that needs to be listened to in order to complete the reorder action."
|
|
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."
|
|
315
300
|
},
|
|
316
301
|
"complexType": {
|
|
317
302
|
"original": "ItemReorderEventDetail",
|
|
@@ -324,63 +309,6 @@ export class ReorderGroup {
|
|
|
324
309
|
}
|
|
325
310
|
}
|
|
326
311
|
}
|
|
327
|
-
}, {
|
|
328
|
-
"method": "ionReorderStart",
|
|
329
|
-
"name": "ionReorderStart",
|
|
330
|
-
"bubbles": true,
|
|
331
|
-
"cancelable": true,
|
|
332
|
-
"composed": true,
|
|
333
|
-
"docs": {
|
|
334
|
-
"tags": [],
|
|
335
|
-
"text": "Event that is emitted when the reorder gesture starts."
|
|
336
|
-
},
|
|
337
|
-
"complexType": {
|
|
338
|
-
"original": "void",
|
|
339
|
-
"resolved": "void",
|
|
340
|
-
"references": {}
|
|
341
|
-
}
|
|
342
|
-
}, {
|
|
343
|
-
"method": "ionReorderMove",
|
|
344
|
-
"name": "ionReorderMove",
|
|
345
|
-
"bubbles": true,
|
|
346
|
-
"cancelable": true,
|
|
347
|
-
"composed": true,
|
|
348
|
-
"docs": {
|
|
349
|
-
"tags": [],
|
|
350
|
-
"text": "Event that is emitted as the reorder gesture moves."
|
|
351
|
-
},
|
|
352
|
-
"complexType": {
|
|
353
|
-
"original": "ReorderMoveEventDetail",
|
|
354
|
-
"resolved": "ReorderMoveEventDetail",
|
|
355
|
-
"references": {
|
|
356
|
-
"ReorderMoveEventDetail": {
|
|
357
|
-
"location": "import",
|
|
358
|
-
"path": "./reorder-group-interface",
|
|
359
|
-
"id": "src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail"
|
|
360
|
-
}
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
}, {
|
|
364
|
-
"method": "ionReorderEnd",
|
|
365
|
-
"name": "ionReorderEnd",
|
|
366
|
-
"bubbles": true,
|
|
367
|
-
"cancelable": true,
|
|
368
|
-
"composed": true,
|
|
369
|
-
"docs": {
|
|
370
|
-
"tags": [],
|
|
371
|
-
"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."
|
|
372
|
-
},
|
|
373
|
-
"complexType": {
|
|
374
|
-
"original": "ReorderEndEventDetail",
|
|
375
|
-
"resolved": "ReorderEndEventDetail",
|
|
376
|
-
"references": {
|
|
377
|
-
"ReorderEndEventDetail": {
|
|
378
|
-
"location": "import",
|
|
379
|
-
"path": "./reorder-group-interface",
|
|
380
|
-
"id": "src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail"
|
|
381
|
-
}
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
312
|
}];
|
|
385
313
|
}
|
|
386
314
|
static get methods() {
|
|
@@ -402,7 +330,7 @@ export class ReorderGroup {
|
|
|
402
330
|
"return": "Promise<any>"
|
|
403
331
|
},
|
|
404
332
|
"docs": {
|
|
405
|
-
"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.",
|
|
406
334
|
"tags": [{
|
|
407
335
|
"name": "param",
|
|
408
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-12T20:
|
|
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": "Event that needs to be listened to in order to complete the reorder action.",
|
|
27050
|
-
"docsTags": [
|
|
27051
|
-
{
|
|
27052
|
-
"name": "deprecated",
|
|
27053
|
-
"text": "Use `ionReorderEnd` instead. If you are accessing\n`event.detail.from` or `event.detail.to` and relying on them\nbeing different you should now add checks as they are always emitted\nin `ionReorderEnd`, even when they are the same."
|
|
27054
|
-
}
|
|
27055
|
-
],
|
|
27056
|
-
"deprecation": "Use `ionReorderEnd` instead. If you are accessing\n`event.detail.from` or `event.detail.to` and relying on them\nbeing different you should now add checks as they are always emitted\nin `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 {
|