@ionic/core 7.5.7-dev.11701188221.15180cb4 → 7.5.7-dev.11701201960.104b3a1f
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/data.js +1 -1
- package/components/ion-datetime.js +16 -16
- package/components/{ion-picker-internal.d.ts → ion-picker-column.d.ts} +4 -4
- package/components/ion-picker-column.js +9 -0
- package/components/ion-picker-legacy-column.js +1 -1
- package/components/ion-picker-legacy.js +1 -1
- package/components/ion-picker.d.ts +11 -0
- package/components/ion-picker.js +9 -0
- package/components/picker-column.js +333 -322
- package/components/picker-column2.js +379 -0
- package/components/{picker-internal.js → picker.js} +16 -16
- package/dist/cjs/{data-c8d21093.js → data-4845b494.js} +1 -1
- package/dist/cjs/ion-datetime-button.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +12 -12
- package/dist/cjs/{ion-picker-column-internal.cjs.entry.js → ion-picker-column.cjs.entry.js} +9 -9
- package/dist/cjs/{ion-picker-internal.cjs.entry.js → ion-picker.cjs.entry.js} +13 -13
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/datetime/datetime.ios.css +1 -1
- package/dist/collection/components/datetime/datetime.js +9 -9
- package/dist/collection/components/datetime/datetime.md.css +1 -1
- package/dist/collection/components/datetime/test/disabled/datetime.spec.js +4 -4
- package/dist/collection/components/datetime/test/minmax/datetime.e2e.js +5 -5
- package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js +2 -2
- package/dist/collection/components/datetime/test/presentation/datetime.e2e.js +1 -1
- package/dist/collection/components/datetime/test/values/datetime.e2e.js +5 -5
- package/dist/collection/components/datetime/utils/data.js +1 -1
- package/dist/collection/components/{picker-internal/picker-internal.ios.css → picker/picker.ios.css} +3 -3
- package/dist/collection/components/{picker-internal/picker-internal.js → picker/picker.js} +17 -18
- package/dist/collection/components/{picker-internal/picker-internal.md.css → picker/picker.md.css} +3 -3
- package/dist/collection/components/{picker-internal/test/a11y/picker-internal.e2e.js → picker/test/a11y/picker.e2e.js} +2 -2
- package/dist/collection/components/{picker-internal/test/basic/picker-internal.e2e.js → picker/test/basic/picker.e2e.js} +22 -22
- package/dist/collection/components/{picker-internal/test/keyboard-entry/picker-internal.e2e.js → picker/test/keyboard-entry/picker.e2e.js} +20 -20
- package/dist/collection/components/{picker-column-internal/picker-column-internal.js → picker-column/picker-column.js} +12 -13
- package/dist/collection/components/{picker-column-internal/test/basic/picker-column-internal.e2e.js → picker-column/test/basic/picker-column.e2e.js} +7 -7
- package/dist/collection/components/{picker-column-internal/test/disabled/picker-column-internal.e2e.js → picker-column/test/disabled/picker-column.e2e.js} +39 -39
- package/dist/docs.json +303 -10
- package/dist/esm/{data-44d9e816.js → data-12e24f00.js} +1 -1
- package/dist/esm/ion-datetime-button.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +12 -12
- package/dist/esm/{ion-picker-column-internal.entry.js → ion-picker-column.entry.js} +9 -9
- package/dist/esm/{ion-picker-internal.entry.js → ion-picker.entry.js} +13 -13
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/ion-datetime-button.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-picker-column.entry.js +4 -0
- package/dist/esm-es5/ion-picker.entry.js +4 -0
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/html.html-data.json +95 -0
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-39074595.entry.js +4 -0
- package/dist/ionic/p-40903d34.system.js +1 -1
- package/dist/ionic/p-439e20ef.entry.js +4 -0
- package/dist/ionic/p-7c66a566.system.entry.js +4 -0
- package/dist/ionic/p-9403b297.system.entry.js +4 -0
- package/dist/ionic/p-ba70d455.entry.js +4 -0
- package/dist/ionic/{p-8ad82eb3.entry.js → p-baa7cb1e.entry.js} +1 -1
- package/dist/ionic/p-c32bf078.system.entry.js +4 -0
- package/dist/ionic/{p-4c80afe1.system.entry.js → p-cb62e3fc.system.entry.js} +1 -1
- package/dist/types/components/datetime/utils/data.d.ts +2 -2
- package/dist/types/components/picker/picker-interfaces.d.ts +8 -0
- package/dist/types/components/{picker-internal/picker-internal.d.ts → picker/picker.d.ts} +4 -5
- package/dist/types/components/{picker-column-internal/picker-column-internal.d.ts → picker-column/picker-column.d.ts} +3 -4
- package/dist/types/components.d.ts +47 -47
- package/hydrate/index.js +1046 -1048
- package/package.json +1 -1
- package/components/ion-picker-column-internal.d.ts +0 -11
- package/components/ion-picker-column-internal.js +0 -9
- package/components/ion-picker-internal.js +0 -9
- package/components/picker-column-internal.js +0 -390
- package/dist/esm-es5/ion-picker-column-internal.entry.js +0 -4
- package/dist/esm-es5/ion-picker-internal.entry.js +0 -4
- package/dist/ionic/p-29fe18ef.entry.js +0 -4
- package/dist/ionic/p-5bd4e009.entry.js +0 -4
- package/dist/ionic/p-96e99303.entry.js +0 -4
- package/dist/ionic/p-beb64be7.system.entry.js +0 -4
- package/dist/ionic/p-c56b6570.system.entry.js +0 -4
- package/dist/ionic/p-e2b1b264.system.entry.js +0 -4
- package/dist/types/components/picker-internal/picker-internal-interfaces.d.ts +0 -8
- /package/dist/collection/components/{picker-internal/picker-internal-interfaces.js → picker/picker-interfaces.js} +0 -0
- /package/dist/collection/components/{picker-column-internal/picker-column-internal-interfaces.js → picker-column/picker-column-interfaces.js} +0 -0
- /package/dist/collection/components/{picker-column-internal/picker-column-internal.ios.css → picker-column/picker-column.ios.css} +0 -0
- /package/dist/collection/components/{picker-column-internal/picker-column-internal.md.css → picker-column/picker-column.md.css} +0 -0
- /package/dist/esm-es5/{data-44d9e816.js → data-12e24f00.js} +0 -0
- /package/dist/ionic/{p-17240d90.js → p-bb849ebb.js} +0 -0
- /package/dist/ionic/{p-b8c3f071.system.js → p-e4219e27.system.js} +0 -0
- /package/dist/types/components/{picker-column-internal/picker-column-internal-interfaces.d.ts → picker-column/picker-column-interfaces.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../dist/types/components";
|
|
2
|
-
|
|
3
|
-
interface IonPickerColumnInternal extends Components.IonPickerColumnInternal, HTMLElement {}
|
|
4
|
-
export const IonPickerColumnInternal: {
|
|
5
|
-
prototype: IonPickerColumnInternal;
|
|
6
|
-
new (): IonPickerColumnInternal;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import { P as PickerColumnInternal, d as defineCustomElement$1 } from './picker-column-internal.js';
|
|
5
|
-
|
|
6
|
-
const IonPickerColumnInternal = PickerColumnInternal;
|
|
7
|
-
const defineCustomElement = defineCustomElement$1;
|
|
8
|
-
|
|
9
|
-
export { IonPickerColumnInternal, defineCustomElement };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import { P as PickerInternal, d as defineCustomElement$1 } from './picker-internal.js';
|
|
5
|
-
|
|
6
|
-
const IonPickerInternal = PickerInternal;
|
|
7
|
-
const defineCustomElement = defineCustomElement$1;
|
|
8
|
-
|
|
9
|
-
export { IonPickerInternal, defineCustomElement };
|
|
@@ -1,390 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
5
|
-
import { r as raf, g as getElementRoot } from './helpers.js';
|
|
6
|
-
import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic.js';
|
|
7
|
-
import { a as isPlatform, b as getIonMode } from './ionic-global.js';
|
|
8
|
-
import { c as createColorClasses } from './theme.js';
|
|
9
|
-
|
|
10
|
-
const pickerColumnInternalIosCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
|
|
11
|
-
|
|
12
|
-
const pickerColumnInternalMdCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";
|
|
13
|
-
|
|
14
|
-
const PickerColumnInternal = /*@__PURE__*/ proxyCustomElement(class PickerColumnInternal extends HTMLElement {
|
|
15
|
-
constructor() {
|
|
16
|
-
super();
|
|
17
|
-
this.__registerHost();
|
|
18
|
-
this.__attachShadow();
|
|
19
|
-
this.ionChange = createEvent(this, "ionChange", 7);
|
|
20
|
-
this.isScrolling = false;
|
|
21
|
-
this.isColumnVisible = false;
|
|
22
|
-
this.canExitInputMode = true;
|
|
23
|
-
this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
|
|
24
|
-
const { el, isColumnVisible } = this;
|
|
25
|
-
if (isColumnVisible) {
|
|
26
|
-
// (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
|
|
27
|
-
const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
|
|
28
|
-
if (el.scrollTop !== top) {
|
|
29
|
-
/**
|
|
30
|
-
* Setting this flag prevents input
|
|
31
|
-
* mode from exiting in the picker column's
|
|
32
|
-
* scroll callback. This is useful when the user manually
|
|
33
|
-
* taps an item or types on the keyboard as both
|
|
34
|
-
* of these can cause a scroll to occur.
|
|
35
|
-
*/
|
|
36
|
-
this.canExitInputMode = canExitInputMode;
|
|
37
|
-
el.scroll({
|
|
38
|
-
top,
|
|
39
|
-
left: 0,
|
|
40
|
-
behavior: smooth ? 'smooth' : undefined,
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
this.setPickerItemActiveState = (item, isActive) => {
|
|
46
|
-
if (isActive) {
|
|
47
|
-
item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
|
|
48
|
-
item.part.add(PICKER_ITEM_ACTIVE_PART);
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
|
|
52
|
-
item.part.remove(PICKER_ITEM_ACTIVE_PART);
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
/**
|
|
56
|
-
* When ionInputModeChange is emitted, each column
|
|
57
|
-
* needs to check if it is the one being made available
|
|
58
|
-
* for text entry.
|
|
59
|
-
*/
|
|
60
|
-
this.inputModeChange = (ev) => {
|
|
61
|
-
if (!this.numericInput) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
const { useInputMode, inputModeColumn } = ev.detail;
|
|
65
|
-
/**
|
|
66
|
-
* If inputModeColumn is undefined then this means
|
|
67
|
-
* all numericInput columns are being selected.
|
|
68
|
-
*/
|
|
69
|
-
const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
|
|
70
|
-
if (!useInputMode || !isColumnActive) {
|
|
71
|
-
this.setInputModeActive(false);
|
|
72
|
-
return;
|
|
73
|
-
}
|
|
74
|
-
this.setInputModeActive(true);
|
|
75
|
-
};
|
|
76
|
-
/**
|
|
77
|
-
* Setting isActive will cause a re-render.
|
|
78
|
-
* As a result, we do not want to cause the
|
|
79
|
-
* re-render mid scroll as this will cause
|
|
80
|
-
* the picker column to jump back to
|
|
81
|
-
* whatever value was selected at the
|
|
82
|
-
* start of the scroll interaction.
|
|
83
|
-
*/
|
|
84
|
-
this.setInputModeActive = (state) => {
|
|
85
|
-
if (this.isScrolling) {
|
|
86
|
-
this.scrollEndCallback = () => {
|
|
87
|
-
this.isActive = state;
|
|
88
|
-
};
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
this.isActive = state;
|
|
92
|
-
};
|
|
93
|
-
/**
|
|
94
|
-
* When the column scrolls, the component
|
|
95
|
-
* needs to determine which item is centered
|
|
96
|
-
* in the view and will emit an ionChange with
|
|
97
|
-
* the item object.
|
|
98
|
-
*/
|
|
99
|
-
this.initializeScrollListener = () => {
|
|
100
|
-
/**
|
|
101
|
-
* The haptics for the wheel picker are
|
|
102
|
-
* an iOS-only feature. As a result, they should
|
|
103
|
-
* be disabled on Android.
|
|
104
|
-
*/
|
|
105
|
-
const enableHaptics = isPlatform('ios');
|
|
106
|
-
const { el } = this;
|
|
107
|
-
let timeout;
|
|
108
|
-
let activeEl = this.activeItem;
|
|
109
|
-
const scrollCallback = () => {
|
|
110
|
-
raf(() => {
|
|
111
|
-
if (timeout) {
|
|
112
|
-
clearTimeout(timeout);
|
|
113
|
-
timeout = undefined;
|
|
114
|
-
}
|
|
115
|
-
if (!this.isScrolling) {
|
|
116
|
-
enableHaptics && hapticSelectionStart();
|
|
117
|
-
this.isScrolling = true;
|
|
118
|
-
}
|
|
119
|
-
/**
|
|
120
|
-
* Select item in the center of the column
|
|
121
|
-
* which is the month/year that we want to select
|
|
122
|
-
*/
|
|
123
|
-
const bbox = el.getBoundingClientRect();
|
|
124
|
-
const centerX = bbox.x + bbox.width / 2;
|
|
125
|
-
const centerY = bbox.y + bbox.height / 2;
|
|
126
|
-
const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
|
|
127
|
-
if (activeEl !== null) {
|
|
128
|
-
this.setPickerItemActiveState(activeEl, false);
|
|
129
|
-
}
|
|
130
|
-
if (activeElement === null || activeElement.disabled) {
|
|
131
|
-
return;
|
|
132
|
-
}
|
|
133
|
-
/**
|
|
134
|
-
* If we are selecting a new value,
|
|
135
|
-
* we need to run haptics again.
|
|
136
|
-
*/
|
|
137
|
-
if (activeElement !== activeEl) {
|
|
138
|
-
enableHaptics && hapticSelectionChanged();
|
|
139
|
-
if (this.canExitInputMode) {
|
|
140
|
-
/**
|
|
141
|
-
* The native iOS wheel picker
|
|
142
|
-
* only dismisses the keyboard
|
|
143
|
-
* once the selected item has changed
|
|
144
|
-
* as a result of a swipe
|
|
145
|
-
* from the user. If `canExitInputMode` is
|
|
146
|
-
* `false` then this means that the
|
|
147
|
-
* scroll is happening as a result of
|
|
148
|
-
* the `value` property programmatically changing
|
|
149
|
-
* either by an application or by the user via the keyboard.
|
|
150
|
-
*/
|
|
151
|
-
this.exitInputMode();
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
activeEl = activeElement;
|
|
155
|
-
this.setPickerItemActiveState(activeElement, true);
|
|
156
|
-
timeout = setTimeout(() => {
|
|
157
|
-
this.isScrolling = false;
|
|
158
|
-
enableHaptics && hapticSelectionEnd();
|
|
159
|
-
/**
|
|
160
|
-
* Certain tasks (such as those that
|
|
161
|
-
* cause re-renders) should only be done
|
|
162
|
-
* once scrolling has finished, otherwise
|
|
163
|
-
* flickering may occur.
|
|
164
|
-
*/
|
|
165
|
-
const { scrollEndCallback } = this;
|
|
166
|
-
if (scrollEndCallback) {
|
|
167
|
-
scrollEndCallback();
|
|
168
|
-
this.scrollEndCallback = undefined;
|
|
169
|
-
}
|
|
170
|
-
/**
|
|
171
|
-
* Reset this flag as the
|
|
172
|
-
* next scroll interaction could
|
|
173
|
-
* be a scroll from the user. In this
|
|
174
|
-
* case, we should exit input mode.
|
|
175
|
-
*/
|
|
176
|
-
this.canExitInputMode = true;
|
|
177
|
-
const dataIndex = activeElement.getAttribute('data-index');
|
|
178
|
-
/**
|
|
179
|
-
* If no value it is
|
|
180
|
-
* possible we hit one of the
|
|
181
|
-
* empty padding columns.
|
|
182
|
-
*/
|
|
183
|
-
if (dataIndex === null) {
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
const index = parseInt(dataIndex, 10);
|
|
187
|
-
const selectedItem = this.items[index];
|
|
188
|
-
if (selectedItem.value !== this.value) {
|
|
189
|
-
this.setValue(selectedItem.value);
|
|
190
|
-
}
|
|
191
|
-
}, 250);
|
|
192
|
-
});
|
|
193
|
-
};
|
|
194
|
-
/**
|
|
195
|
-
* Wrap this in an raf so that the scroll callback
|
|
196
|
-
* does not fire when component is initially shown.
|
|
197
|
-
*/
|
|
198
|
-
raf(() => {
|
|
199
|
-
el.addEventListener('scroll', scrollCallback);
|
|
200
|
-
this.destroyScrollListener = () => {
|
|
201
|
-
el.removeEventListener('scroll', scrollCallback);
|
|
202
|
-
};
|
|
203
|
-
});
|
|
204
|
-
};
|
|
205
|
-
/**
|
|
206
|
-
* Tells the parent picker to
|
|
207
|
-
* exit text entry mode. This is only called
|
|
208
|
-
* when the selected item changes during scroll, so
|
|
209
|
-
* we know that the user likely wants to scroll
|
|
210
|
-
* instead of type.
|
|
211
|
-
*/
|
|
212
|
-
this.exitInputMode = () => {
|
|
213
|
-
const { parentEl } = this;
|
|
214
|
-
if (parentEl == null)
|
|
215
|
-
return;
|
|
216
|
-
parentEl.exitInputMode();
|
|
217
|
-
/**
|
|
218
|
-
* setInputModeActive only takes
|
|
219
|
-
* effect once scrolling stops to avoid
|
|
220
|
-
* a component re-render while scrolling.
|
|
221
|
-
* However, we want the visual active
|
|
222
|
-
* indicator to go away immediately, so
|
|
223
|
-
* we call classList.remove here.
|
|
224
|
-
*/
|
|
225
|
-
this.el.classList.remove('picker-column-active');
|
|
226
|
-
};
|
|
227
|
-
this.isActive = false;
|
|
228
|
-
this.disabled = false;
|
|
229
|
-
this.items = [];
|
|
230
|
-
this.value = undefined;
|
|
231
|
-
this.color = 'primary';
|
|
232
|
-
this.numericInput = false;
|
|
233
|
-
}
|
|
234
|
-
valueChange() {
|
|
235
|
-
if (this.isColumnVisible) {
|
|
236
|
-
/**
|
|
237
|
-
* Only scroll the active item into view when the picker column
|
|
238
|
-
* is actively visible to the user.
|
|
239
|
-
*/
|
|
240
|
-
this.scrollActiveItemIntoView();
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
/**
|
|
244
|
-
* Only setup scroll listeners
|
|
245
|
-
* when the picker is visible, otherwise
|
|
246
|
-
* the container will have a scroll
|
|
247
|
-
* height of 0px.
|
|
248
|
-
*/
|
|
249
|
-
componentWillLoad() {
|
|
250
|
-
const visibleCallback = (entries) => {
|
|
251
|
-
const ev = entries[0];
|
|
252
|
-
if (ev.isIntersecting) {
|
|
253
|
-
const { activeItem, el } = this;
|
|
254
|
-
this.isColumnVisible = true;
|
|
255
|
-
/**
|
|
256
|
-
* Because this initial call to scrollActiveItemIntoView has to fire before
|
|
257
|
-
* the scroll listener is set up, we need to manage the active class manually.
|
|
258
|
-
*/
|
|
259
|
-
const oldActive = getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
|
|
260
|
-
if (oldActive) {
|
|
261
|
-
this.setPickerItemActiveState(oldActive, false);
|
|
262
|
-
}
|
|
263
|
-
this.scrollActiveItemIntoView();
|
|
264
|
-
if (activeItem) {
|
|
265
|
-
this.setPickerItemActiveState(activeItem, true);
|
|
266
|
-
}
|
|
267
|
-
this.initializeScrollListener();
|
|
268
|
-
}
|
|
269
|
-
else {
|
|
270
|
-
this.isColumnVisible = false;
|
|
271
|
-
if (this.destroyScrollListener) {
|
|
272
|
-
this.destroyScrollListener();
|
|
273
|
-
this.destroyScrollListener = undefined;
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
};
|
|
277
|
-
new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
|
|
278
|
-
const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
|
|
279
|
-
if (parentEl !== null) {
|
|
280
|
-
// TODO(FW-2832): type
|
|
281
|
-
parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
componentDidRender() {
|
|
285
|
-
var _a;
|
|
286
|
-
const { activeItem, items, isColumnVisible, value } = this;
|
|
287
|
-
if (isColumnVisible) {
|
|
288
|
-
if (activeItem) {
|
|
289
|
-
this.scrollActiveItemIntoView();
|
|
290
|
-
}
|
|
291
|
-
else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
|
|
292
|
-
/**
|
|
293
|
-
* If the picker column does not have an active item and the current value
|
|
294
|
-
* does not match the first item in the picker column, that means
|
|
295
|
-
* the value is out of bounds. In this case, we assign the value to the
|
|
296
|
-
* first item to match the scroll position of the column.
|
|
297
|
-
*
|
|
298
|
-
*/
|
|
299
|
-
this.setValue(items[0].value);
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
/** @internal */
|
|
304
|
-
async scrollActiveItemIntoView() {
|
|
305
|
-
const activeEl = this.activeItem;
|
|
306
|
-
if (activeEl) {
|
|
307
|
-
this.centerPickerItemInView(activeEl, false, false);
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
/**
|
|
311
|
-
* Sets the value prop and fires the ionChange event.
|
|
312
|
-
* This is used when we need to fire ionChange from
|
|
313
|
-
* user-generated events that cannot be caught with normal
|
|
314
|
-
* input/change event listeners.
|
|
315
|
-
* @internal
|
|
316
|
-
*/
|
|
317
|
-
async setValue(value) {
|
|
318
|
-
const { items } = this;
|
|
319
|
-
this.value = value;
|
|
320
|
-
const findItem = items.find((item) => item.value === value && item.disabled !== true);
|
|
321
|
-
if (findItem) {
|
|
322
|
-
this.ionChange.emit(findItem);
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
get activeItem() {
|
|
326
|
-
// If the whole picker column is disabled, the current value should appear active
|
|
327
|
-
// If the current value item is specifically disabled, it should not appear active
|
|
328
|
-
const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
|
|
329
|
-
return getElementRoot(this.el).querySelector(selector);
|
|
330
|
-
}
|
|
331
|
-
render() {
|
|
332
|
-
const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
|
|
333
|
-
const mode = getIonMode(this);
|
|
334
|
-
/**
|
|
335
|
-
* exportparts is needed so ion-datetime can expose the parts
|
|
336
|
-
* from two layers of shadow nesting. If this causes problems,
|
|
337
|
-
* the attribute can be moved to datetime.tsx and set on every
|
|
338
|
-
* instance of ion-picker-column-internal there instead.
|
|
339
|
-
*/
|
|
340
|
-
return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
|
|
341
|
-
[mode]: true,
|
|
342
|
-
['picker-column-active']: isActive,
|
|
343
|
-
['picker-column-numeric-input']: numericInput,
|
|
344
|
-
}) }, h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
|
|
345
|
-
const isItemDisabled = pickerDisabled || item.disabled || false;
|
|
346
|
-
return (h("button", { tabindex: "-1", class: {
|
|
347
|
-
'picker-item': true,
|
|
348
|
-
}, "data-value": item.value, "data-index": index, onClick: (ev) => {
|
|
349
|
-
this.centerPickerItemInView(ev.target, true);
|
|
350
|
-
}, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
|
|
351
|
-
}), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
|
|
352
|
-
}
|
|
353
|
-
get el() { return this; }
|
|
354
|
-
static get watchers() { return {
|
|
355
|
-
"value": ["valueChange"]
|
|
356
|
-
}; }
|
|
357
|
-
static get style() { return {
|
|
358
|
-
ios: pickerColumnInternalIosCss,
|
|
359
|
-
md: pickerColumnInternalMdCss
|
|
360
|
-
}; }
|
|
361
|
-
}, [33, "ion-picker-column-internal", {
|
|
362
|
-
"disabled": [4],
|
|
363
|
-
"items": [16],
|
|
364
|
-
"value": [1032],
|
|
365
|
-
"color": [513],
|
|
366
|
-
"numericInput": [4, "numeric-input"],
|
|
367
|
-
"isActive": [32],
|
|
368
|
-
"scrollActiveItemIntoView": [64],
|
|
369
|
-
"setValue": [64]
|
|
370
|
-
}, undefined, {
|
|
371
|
-
"value": ["valueChange"]
|
|
372
|
-
}]);
|
|
373
|
-
const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
|
|
374
|
-
const PICKER_ITEM_PART = 'wheel-item';
|
|
375
|
-
const PICKER_ITEM_ACTIVE_PART = 'active';
|
|
376
|
-
function defineCustomElement() {
|
|
377
|
-
if (typeof customElements === "undefined") {
|
|
378
|
-
return;
|
|
379
|
-
}
|
|
380
|
-
const components = ["ion-picker-column-internal"];
|
|
381
|
-
components.forEach(tagName => { switch (tagName) {
|
|
382
|
-
case "ion-picker-column-internal":
|
|
383
|
-
if (!customElements.get(tagName)) {
|
|
384
|
-
customElements.define(tagName, PickerColumnInternal);
|
|
385
|
-
}
|
|
386
|
-
break;
|
|
387
|
-
} });
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
export { PickerColumnInternal as P, defineCustomElement as d };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import{__awaiter,__generator}from"tslib";
|
|
2
|
-
/*!
|
|
3
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
4
|
-
*/import{r as registerInstance,d as createEvent,h,H as Host,f as getElement}from"./index-7c9b1bca.js";import{r as raf,g as getElementRoot}from"./helpers-3379ba19.js";import{a as hapticSelectionStart,b as hapticSelectionChanged,h as hapticSelectionEnd}from"./haptic-1243b917.js";import{a as isPlatform,b as getIonMode}from"./ionic-global-40e42e7f.js";import{c as createColorClasses}from"./theme-17531cdf.js";import"./capacitor-b4979570.js";import"./index-7a14ecec.js";var pickerColumnInternalIosCss=":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";var pickerColumnInternalMdCss=":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";var PickerColumnInternal=function(){function e(e){var i=this;registerInstance(this,e);this.ionChange=createEvent(this,"ionChange",7);this.isScrolling=false;this.isColumnVisible=false;this.canExitInputMode=true;this.centerPickerItemInView=function(e,t,r){if(t===void 0){t=true}if(r===void 0){r=true}var n=i,a=n.el,o=n.isColumnVisible;if(o){var s=e.offsetTop-3*e.clientHeight+e.clientHeight/2;if(a.scrollTop!==s){i.canExitInputMode=r;a.scroll({top:s,left:0,behavior:t?"smooth":undefined})}}};this.setPickerItemActiveState=function(e,i){if(i){e.classList.add(PICKER_ITEM_ACTIVE_CLASS);e.part.add(PICKER_ITEM_ACTIVE_PART)}else{e.classList.remove(PICKER_ITEM_ACTIVE_CLASS);e.part.remove(PICKER_ITEM_ACTIVE_PART)}};this.inputModeChange=function(e){if(!i.numericInput){return}var t=e.detail,r=t.useInputMode,n=t.inputModeColumn;var a=n===undefined||n===i.el;if(!r||!a){i.setInputModeActive(false);return}i.setInputModeActive(true)};this.setInputModeActive=function(e){if(i.isScrolling){i.scrollEndCallback=function(){i.isActive=e};return}i.isActive=e};this.initializeScrollListener=function(){var e=isPlatform("ios");var t=i.el;var r;var n=i.activeItem;var a=function(){raf((function(){if(r){clearTimeout(r);r=undefined}if(!i.isScrolling){e&&hapticSelectionStart();i.isScrolling=true}var a=t.getBoundingClientRect();var o=a.x+a.width/2;var s=a.y+a.height/2;var l=t.shadowRoot.elementFromPoint(o,s);if(n!==null){i.setPickerItemActiveState(n,false)}if(l===null||l.disabled){return}if(l!==n){e&&hapticSelectionChanged();if(i.canExitInputMode){i.exitInputMode()}}n=l;i.setPickerItemActiveState(l,true);r=setTimeout((function(){i.isScrolling=false;e&&hapticSelectionEnd();var t=i.scrollEndCallback;if(t){t();i.scrollEndCallback=undefined}i.canExitInputMode=true;var r=l.getAttribute("data-index");if(r===null){return}var n=parseInt(r,10);var a=i.items[n];if(a.value!==i.value){i.setValue(a.value)}}),250)}))};raf((function(){t.addEventListener("scroll",a);i.destroyScrollListener=function(){t.removeEventListener("scroll",a)}}))};this.exitInputMode=function(){var e=i.parentEl;if(e==null)return;e.exitInputMode();i.el.classList.remove("picker-column-active")};this.isActive=false;this.disabled=false;this.items=[];this.value=undefined;this.color="primary";this.numericInput=false}e.prototype.valueChange=function(){if(this.isColumnVisible){this.scrollActiveItemIntoView()}};e.prototype.componentWillLoad=function(){var e=this;var i=function(i){var t=i[0];if(t.isIntersecting){var r=e,n=r.activeItem,a=r.el;e.isColumnVisible=true;var o=getElementRoot(a).querySelector(".".concat(PICKER_ITEM_ACTIVE_CLASS));if(o){e.setPickerItemActiveState(o,false)}e.scrollActiveItemIntoView();if(n){e.setPickerItemActiveState(n,true)}e.initializeScrollListener()}else{e.isColumnVisible=false;if(e.destroyScrollListener){e.destroyScrollListener();e.destroyScrollListener=undefined}}};new IntersectionObserver(i,{threshold:.001}).observe(this.el);var t=this.parentEl=this.el.closest("ion-picker-internal");if(t!==null){t.addEventListener("ionInputModeChange",(function(i){return e.inputModeChange(i)}))}};e.prototype.componentDidRender=function(){var e;var i=this,t=i.activeItem,r=i.items,n=i.isColumnVisible,a=i.value;if(n){if(t){this.scrollActiveItemIntoView()}else if(((e=r[0])===null||e===void 0?void 0:e.value)!==a){this.setValue(r[0].value)}}};e.prototype.scrollActiveItemIntoView=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(i){e=this.activeItem;if(e){this.centerPickerItemInView(e,false,false)}return[2]}))}))};e.prototype.setValue=function(e){return __awaiter(this,void 0,void 0,(function(){var i,t;return __generator(this,(function(r){i=this.items;this.value=e;t=i.find((function(i){return i.value===e&&i.disabled!==true}));if(t){this.ionChange.emit(t)}return[2]}))}))};Object.defineProperty(e.prototype,"activeItem",{get:function(){var e='.picker-item[data-value="'.concat(this.value,'"]').concat(this.disabled?"":":not([disabled])");return getElementRoot(this.el).querySelector(e)},enumerable:false,configurable:true});e.prototype.render=function(){var e;var i=this;var t=this,r=t.items,n=t.color,a=t.disabled,o=t.isActive,s=t.numericInput;var l=getIonMode(this);return h(Host,{exportparts:"".concat(PICKER_ITEM_PART,", ").concat(PICKER_ITEM_ACTIVE_PART),disabled:a,tabindex:a?null:0,class:createColorClasses(n,(e={},e[l]=true,e["picker-column-active"]=o,e["picker-column-numeric-input"]=s,e))},h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),r.map((function(e,t){var r=a||e.disabled||false;return h("button",{tabindex:"-1",class:{"picker-item":true},"data-value":e.value,"data-index":t,onClick:function(e){i.centerPickerItemInView(e.target,true)},disabled:r,part:PICKER_ITEM_PART},e.text)})),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),h("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChange"]}},enumerable:false,configurable:true});return e}();var PICKER_ITEM_ACTIVE_CLASS="picker-item-active";var PICKER_ITEM_PART="wheel-item";var PICKER_ITEM_ACTIVE_PART="active";PickerColumnInternal.style={ios:pickerColumnInternalIosCss,md:pickerColumnInternalMdCss};export{PickerColumnInternal as ion_picker_column_internal};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import{__awaiter,__generator}from"tslib";
|
|
2
|
-
/*!
|
|
3
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
4
|
-
*/import{r as registerInstance,d as createEvent,h,H as Host,f as getElement}from"./index-7c9b1bca.js";import{g as getElementRoot}from"./helpers-3379ba19.js";var pickerInternalIosCss=":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";var pickerInternalMdCss=":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";var PickerInternal=function(){function r(r){var t=this;registerInstance(this,r);this.ionInputModeChange=createEvent(this,"ionInputModeChange",7);this.useInputMode=false;this.isInHighlightBounds=function(r){var e=t.highlightEl;if(!e){return false}var n=e.getBoundingClientRect();var i=r.clientX<n.left||r.clientX>n.right;var o=r.clientY<n.top||r.clientY>n.bottom;if(i||o){return false}return true};this.onFocusOut=function(r){var e=r.relatedTarget;if(!e||e.tagName!=="ION-PICKER-COLUMN-INTERNAL"&&e!==t.inputEl){t.exitInputMode()}};this.onFocusIn=function(r){var e=r.target;if(e.tagName!=="ION-PICKER-COLUMN-INTERNAL"){return}if(!t.actionOnClick){var n=e;var i=n.numericInput;if(i){t.enterInputMode(n,false)}else{t.exitInputMode()}}};this.onClick=function(){var r=t.actionOnClick;if(r){r();t.actionOnClick=undefined}};this.onPointerDown=function(r){var e=t,n=e.useInputMode,i=e.inputModeColumn,o=e.el;if(t.isInHighlightBounds(r)){if(n){if(r.target.tagName==="ION-PICKER-COLUMN-INTERNAL"){if(i&&i===r.target){t.actionOnClick=function(){t.enterInputMode()}}else{t.actionOnClick=function(){t.enterInputMode(r.target)}}}else{t.actionOnClick=function(){t.exitInputMode()}}}else{var a=o.querySelectorAll("ion-picker-column-internal.picker-column-numeric-input");var s=a.length===1?r.target:undefined;t.actionOnClick=function(){t.enterInputMode(s)}}return}t.actionOnClick=function(){t.exitInputMode()}};this.enterInputMode=function(r,e){if(e===void 0){e=true}var n=t,i=n.inputEl,o=n.el;if(!i){return}var a=o.querySelector("ion-picker-column-internal.picker-column-numeric-input");if(!a){return}t.useInputMode=true;t.inputModeColumn=r;if(e){if(t.destroyKeypressListener){t.destroyKeypressListener();t.destroyKeypressListener=undefined}i.focus()}else{o.addEventListener("keypress",t.onKeyPress);t.destroyKeypressListener=function(){o.removeEventListener("keypress",t.onKeyPress)}}t.emitInputModeChange()};this.onKeyPress=function(r){var e=t.inputEl;if(!e){return}var n=parseInt(r.key,10);if(!Number.isNaN(n)){e.value+=r.key;t.onInputChange()}};this.selectSingleColumn=function(){var r=t,e=r.inputEl,n=r.inputModeColumn,i=r.singleColumnSearchTimeout;if(!e||!n){return}var o=n.items.filter((function(r){return r.disabled!==true}));if(i){clearTimeout(i)}t.singleColumnSearchTimeout=setTimeout((function(){e.value="";t.singleColumnSearchTimeout=undefined}),1e3);if(e.value.length>=3){var a=e.value.length-2;var s=e.value.substring(a);e.value=s;t.selectSingleColumn();return}var c=o.find((function(r){var t=r.text;var n=t.replace(/^0+(?=[1-9])|0+(?=0$)/,"");return n===e.value}));if(c){n.setValue(c.value);return}if(e.value.length===2){var l=e.value.substring(e.value.length-1);e.value=l;t.selectSingleColumn()}};this.searchColumn=function(r,t,e){if(e===void 0){e="start"}var n=e==="start"?/^0+/:/0$/;var i=r.items.find((function(r){var e=r.text,i=r.disabled;return i!==true&&e.replace(n,"")===t}));if(i){r.setValue(i.value)}};this.selectMultiColumn=function(){var r=t,e=r.inputEl,n=r.el;if(!e){return}var i=Array.from(n.querySelectorAll("ion-picker-column-internal")).filter((function(r){return r.numericInput}));var o=i[0];var a=i[1];var s=e.value;var c;switch(s.length){case 1:t.searchColumn(o,s);break;case 2:var l=e.value.substring(0,1);s=l==="0"||l==="1"?e.value:l;t.searchColumn(o,s);if(s.length===1){c=e.value.substring(e.value.length-1);t.searchColumn(a,c,"end")}break;case 3:var u=e.value.substring(0,1);s=u==="0"||u==="1"?e.value.substring(0,2):u;t.searchColumn(o,s);c=s.length===1?e.value.substring(1):e.value.substring(2);t.searchColumn(a,c,"end");break;case 4:var g=e.value.substring(0,1);s=g==="0"||g==="1"?e.value.substring(0,2):g;t.searchColumn(o,s);var b=s.length===1?e.value.substring(1,e.value.length):e.value.substring(2,e.value.length);t.searchColumn(a,b,"end");break;default:var f=e.value.length-4;var d=e.value.substring(f);e.value=d;t.selectMultiColumn();break}};this.onInputChange=function(){var r=t,e=r.useInputMode,n=r.inputEl,i=r.inputModeColumn;if(!e||!n){return}if(i){t.selectSingleColumn()}else{t.selectMultiColumn()}};this.emitInputModeChange=function(){var r=t,e=r.useInputMode,n=r.inputModeColumn;t.ionInputModeChange.emit({useInputMode:e,inputModeColumn:n})}}r.prototype.preventTouchStartPropagation=function(r){r.stopPropagation()};r.prototype.componentWillLoad=function(){getElementRoot(this.el).addEventListener("focusin",this.onFocusIn);getElementRoot(this.el).addEventListener("focusout",this.onFocusOut)};r.prototype.exitInputMode=function(){return __awaiter(this,void 0,void 0,(function(){var r,t,e;return __generator(this,(function(n){r=this,t=r.inputEl,e=r.useInputMode;if(!e||!t){return[2]}this.useInputMode=false;this.inputModeColumn=undefined;t.blur();t.value="";if(this.destroyKeypressListener){this.destroyKeypressListener();this.destroyKeypressListener=undefined}this.emitInputModeChange();return[2]}))}))};r.prototype.render=function(){var r=this;return h(Host,{onPointerDown:function(t){return r.onPointerDown(t)},onClick:function(){return r.onClick()}},h("input",{"aria-hidden":"true",tabindex:-1,inputmode:"numeric",type:"number",ref:function(t){return r.inputEl=t},onInput:function(){return r.onInputChange()},onBlur:function(){return r.exitInputMode()}}),h("div",{class:"picker-before"}),h("div",{class:"picker-after"}),h("div",{class:"picker-highlight",ref:function(t){return r.highlightEl=t}}),h("slot",null))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PickerInternal.style={ios:pickerInternalIosCss,md:pickerInternalMdCss};export{PickerInternal as ion_picker_internal};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as i,d as t,h as e,H as s,f as o}from"./p-c224b9a9.js";import{r as n,g as r}from"./p-63eb0acd.js";import{a,b as l,h as c}from"./p-b923f3d7.js";import{a as d,b as p}from"./p-6c3d5383.js";import{c as h}from"./p-1d072d3d.js";import"./p-cc196b34.js";import"./p-b347cfd1.js";const m=class{constructor(e){i(this,e),this.ionChange=t(this,"ionChange",7),this.isScrolling=!1,this.isColumnVisible=!1,this.canExitInputMode=!0,this.centerPickerItemInView=(i,t=!0,e=!0)=>{const{el:s,isColumnVisible:o}=this;if(o){const o=i.offsetTop-3*i.clientHeight+i.clientHeight/2;s.scrollTop!==o&&(this.canExitInputMode=e,s.scroll({top:o,left:0,behavior:t?"smooth":void 0}))}},this.setPickerItemActiveState=(i,t)=>{t?(i.classList.add(u),i.part.add(g)):(i.classList.remove(u),i.part.remove(g))},this.inputModeChange=i=>{if(!this.numericInput)return;const{useInputMode:t,inputModeColumn:e}=i.detail;this.setInputModeActive(!(!t||void 0!==e&&e!==this.el))},this.setInputModeActive=i=>{this.isScrolling?this.scrollEndCallback=()=>{this.isActive=i}:this.isActive=i},this.initializeScrollListener=()=>{const i=d("ios"),{el:t}=this;let e,s=this.activeItem;const o=()=>{n((()=>{e&&(clearTimeout(e),e=void 0),this.isScrolling||(i&&a(),this.isScrolling=!0);const o=t.getBoundingClientRect(),n=t.shadowRoot.elementFromPoint(o.x+o.width/2,o.y+o.height/2);null!==s&&this.setPickerItemActiveState(s,!1),null===n||n.disabled||(n!==s&&(i&&l(),this.canExitInputMode&&this.exitInputMode()),s=n,this.setPickerItemActiveState(n,!0),e=setTimeout((()=>{this.isScrolling=!1,i&&c();const{scrollEndCallback:t}=this;t&&(t(),this.scrollEndCallback=void 0),this.canExitInputMode=!0;const e=n.getAttribute("data-index");if(null===e)return;const s=parseInt(e,10),o=this.items[s];o.value!==this.value&&this.setValue(o.value)}),250))}))};n((()=>{t.addEventListener("scroll",o),this.destroyScrollListener=()=>{t.removeEventListener("scroll",o)}}))},this.exitInputMode=()=>{const{parentEl:i}=this;null!=i&&(i.exitInputMode(),this.el.classList.remove("picker-column-active"))},this.isActive=!1,this.disabled=!1,this.items=[],this.value=void 0,this.color="primary",this.numericInput=!1}valueChange(){this.isColumnVisible&&this.scrollActiveItemIntoView()}componentWillLoad(){new IntersectionObserver((i=>{if(i[0].isIntersecting){const{activeItem:i,el:t}=this;this.isColumnVisible=!0;const e=r(t).querySelector(`.${u}`);e&&this.setPickerItemActiveState(e,!1),this.scrollActiveItemIntoView(),i&&this.setPickerItemActiveState(i,!0),this.initializeScrollListener()}else this.isColumnVisible=!1,this.destroyScrollListener&&(this.destroyScrollListener(),this.destroyScrollListener=void 0)}),{threshold:.001}).observe(this.el);const i=this.parentEl=this.el.closest("ion-picker-internal");null!==i&&i.addEventListener("ionInputModeChange",(i=>this.inputModeChange(i)))}componentDidRender(){var i;const{activeItem:t,items:e,isColumnVisible:s,value:o}=this;s&&(t?this.scrollActiveItemIntoView():(null===(i=e[0])||void 0===i?void 0:i.value)!==o&&this.setValue(e[0].value))}async scrollActiveItemIntoView(){const i=this.activeItem;i&&this.centerPickerItemInView(i,!1,!1)}async setValue(i){const{items:t}=this;this.value=i;const e=t.find((t=>t.value===i&&!0!==t.disabled));e&&this.ionChange.emit(e)}get activeItem(){const i=`.picker-item[data-value="${this.value}"]${this.disabled?"":":not([disabled])"}`;return r(this.el).querySelector(i)}render(){const{items:i,color:t,disabled:o,isActive:n,numericInput:r}=this,a=p(this);return e(s,{exportparts:`${b}, ${g}`,disabled:o,tabindex:o?null:0,class:h(t,{[a]:!0,"picker-column-active":n,"picker-column-numeric-input":r})},e("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),e("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),e("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),i.map(((i,t)=>e("button",{tabindex:"-1",class:{"picker-item":!0},"data-value":i.value,"data-index":t,onClick:i=>{this.centerPickerItemInView(i.target,!0)},disabled:o||i.disabled||!1,part:b},i.text))),e("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),e("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "),e("div",{class:"picker-item picker-item-empty","aria-hidden":"true"}," "))}get el(){return o(this)}static get watchers(){return{value:["valueChange"]}}},u="picker-item-active",b="wheel-item",g="active";m.style={ios:":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}",md:":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}"};export{m as ion_picker_column_internal}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import{r as t,d as r,h as e,H as i,f as o}from"./p-c224b9a9.js";import{g as n}from"./p-63eb0acd.js";const a=class{constructor(e){t(this,e),this.ionInputModeChange=r(this,"ionInputModeChange",7),this.useInputMode=!1,this.isInHighlightBounds=t=>{const{highlightEl:r}=this;if(!r)return!1;const e=r.getBoundingClientRect();return!(t.clientX<e.left||t.clientX>e.right||t.clientY<e.top||t.clientY>e.bottom)},this.onFocusOut=t=>{const{relatedTarget:r}=t;(!r||"ION-PICKER-COLUMN-INTERNAL"!==r.tagName&&r!==this.inputEl)&&this.exitInputMode()},this.onFocusIn=t=>{const{target:r}=t;"ION-PICKER-COLUMN-INTERNAL"!==r.tagName||this.actionOnClick||(r.numericInput?this.enterInputMode(r,!1):this.exitInputMode())},this.onClick=()=>{const{actionOnClick:t}=this;t&&(t(),this.actionOnClick=void 0)},this.onPointerDown=t=>{const{useInputMode:r,inputModeColumn:e,el:i}=this;if(this.isInHighlightBounds(t))if(r)this.actionOnClick="ION-PICKER-COLUMN-INTERNAL"===t.target.tagName?e&&e===t.target?()=>{this.enterInputMode()}:()=>{this.enterInputMode(t.target)}:()=>{this.exitInputMode()};else{const r=1===i.querySelectorAll("ion-picker-column-internal.picker-column-numeric-input").length?t.target:void 0;this.actionOnClick=()=>{this.enterInputMode(r)}}else this.actionOnClick=()=>{this.exitInputMode()}},this.enterInputMode=(t,r=!0)=>{const{inputEl:e,el:i}=this;e&&i.querySelector("ion-picker-column-internal.picker-column-numeric-input")&&(this.useInputMode=!0,this.inputModeColumn=t,r?(this.destroyKeypressListener&&(this.destroyKeypressListener(),this.destroyKeypressListener=void 0),e.focus()):(i.addEventListener("keypress",this.onKeyPress),this.destroyKeypressListener=()=>{i.removeEventListener("keypress",this.onKeyPress)}),this.emitInputModeChange())},this.onKeyPress=t=>{const{inputEl:r}=this;if(!r)return;const e=parseInt(t.key,10);Number.isNaN(e)||(r.value+=t.key,this.onInputChange())},this.selectSingleColumn=()=>{const{inputEl:t,inputModeColumn:r,singleColumnSearchTimeout:e}=this;if(!t||!r)return;const i=r.items.filter((t=>!0!==t.disabled));if(e&&clearTimeout(e),this.singleColumnSearchTimeout=setTimeout((()=>{t.value="",this.singleColumnSearchTimeout=void 0}),1e3),t.value.length>=3){const r=t.value.substring(t.value.length-2);return t.value=r,void this.selectSingleColumn()}const o=i.find((({text:r})=>r.replace(/^0+(?=[1-9])|0+(?=0$)/,"")===t.value));if(o)r.setValue(o.value);else if(2===t.value.length){const r=t.value.substring(t.value.length-1);t.value=r,this.selectSingleColumn()}},this.searchColumn=(t,r,e="start")=>{const i="start"===e?/^0+/:/0$/,o=t.items.find((({text:t,disabled:e})=>!0!==e&&t.replace(i,"")===r));o&&t.setValue(o.value)},this.selectMultiColumn=()=>{const{inputEl:t,el:r}=this;if(!t)return;const e=Array.from(r.querySelectorAll("ion-picker-column-internal")).filter((t=>t.numericInput)),i=e[0],o=e[1];let n,a=t.value;switch(a.length){case 1:this.searchColumn(i,a);break;case 2:const r=t.value.substring(0,1);a="0"===r||"1"===r?t.value:r,this.searchColumn(i,a),1===a.length&&(n=t.value.substring(t.value.length-1),this.searchColumn(o,n,"end"));break;case 3:const e=t.value.substring(0,1);a="0"===e||"1"===e?t.value.substring(0,2):e,this.searchColumn(i,a),n=t.value.substring(1===a.length?1:2),this.searchColumn(o,n,"end");break;case 4:const s=t.value.substring(0,1);a="0"===s||"1"===s?t.value.substring(0,2):s,this.searchColumn(i,a);const c=t.value.substring(1===a.length?1:2,t.value.length);this.searchColumn(o,c,"end");break;default:const l=t.value.substring(t.value.length-4);t.value=l,this.selectMultiColumn()}},this.onInputChange=()=>{const{useInputMode:t,inputEl:r,inputModeColumn:e}=this;t&&r&&(e?this.selectSingleColumn():this.selectMultiColumn())},this.emitInputModeChange=()=>{const{useInputMode:t,inputModeColumn:r}=this;this.ionInputModeChange.emit({useInputMode:t,inputModeColumn:r})}}preventTouchStartPropagation(t){t.stopPropagation()}componentWillLoad(){n(this.el).addEventListener("focusin",this.onFocusIn),n(this.el).addEventListener("focusout",this.onFocusOut)}async exitInputMode(){const{inputEl:t,useInputMode:r}=this;r&&t&&(this.useInputMode=!1,this.inputModeColumn=void 0,t.blur(),t.value="",this.destroyKeypressListener&&(this.destroyKeypressListener(),this.destroyKeypressListener=void 0),this.emitInputModeChange())}render(){return e(i,{onPointerDown:t=>this.onPointerDown(t),onClick:()=>this.onClick()},e("input",{"aria-hidden":"true",tabindex:-1,inputmode:"numeric",type:"number",ref:t=>this.inputEl=t,onInput:()=>this.onInputChange(),onBlur:()=>this.exitInputMode()}),e("div",{class:"picker-before"}),e("div",{class:"picker-after"}),e("div",{class:"picker-highlight",ref:t=>this.highlightEl=t}),e("slot",null))}get el(){return o(this)}};a.style={ios:":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}",md:":host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-highlight{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}"};export{a as ion_picker_internal}
|