ion-picker.entry.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { r as registerInstance, c as createEvent, h, e as Host, f as getElement } from './index-527b9e34.js';
  5. import { g as getElementRoot } from './helpers-d94bc8ad.js';
  6. import './index-cfd9c1f2.js';
  7. const pickerIosCss = ":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}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--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(--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:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--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(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}";
  8. const IonPickerIosStyle0 = pickerIosCss;
  9. const pickerMdCss = ":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}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--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(--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:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--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(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
  10. const IonPickerMdStyle0 = pickerMdCss;
  11. const Picker = class {
  12. constructor(hostRef) {
  13. registerInstance(this, hostRef);
  14. this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
  15. this.useInputMode = false;
  16. this.isInHighlightBounds = (ev) => {
  17. const { highlightEl } = this;
  18. if (!highlightEl) {
  19. return false;
  20. }
  21. const bbox = highlightEl.getBoundingClientRect();
  22. /**
  23. * Check to see if the user clicked
  24. * outside the bounds of the highlight.
  25. */
  26. const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
  27. const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
  28. if (outsideX || outsideY) {
  29. return false;
  30. }
  31. return true;
  32. };
  33. /**
  34. * If we are no longer focused
  35. * on a picker column, then we should
  36. * exit input mode. An exception is made
  37. * for the input in the picker since having
  38. * that focused means we are still in input mode.
  39. */
  40. this.onFocusOut = (ev) => {
  41. // TODO(FW-2832): type
  42. const { relatedTarget } = ev;
  43. if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
  44. this.exitInputMode();
  45. }
  46. };
  47. /**
  48. * When picker columns receive focus
  49. * the parent picker needs to determine
  50. * whether to enter/exit input mode.
  51. */
  52. this.onFocusIn = (ev) => {
  53. // TODO(FW-2832): type
  54. const { target } = ev;
  55. /**
  56. * Due to browser differences in how/when focus
  57. * is dispatched on certain elements, we need to
  58. * make sure that this function only ever runs when
  59. * focusing a picker column.
  60. */
  61. if (target.tagName !== 'ION-PICKER-COLUMN') {
  62. return;
  63. }
  64. /**
  65. * If we have actionOnClick
  66. * then this means the user focused
  67. * a picker column via mouse or
  68. * touch (i.e. a PointerEvent). As a result,
  69. * we should not enter/exit input mode
  70. * until the click event has fired, which happens
  71. * after the `focusin` event.
  72. *
  73. * Otherwise, the user likely focused
  74. * the column using their keyboard and
  75. * we should enter/exit input mode automatically.
  76. */
  77. if (!this.actionOnClick) {
  78. const columnEl = target;
  79. const allowInput = columnEl.numericInput;
  80. if (allowInput) {
  81. this.enterInputMode(columnEl, false);
  82. }
  83. else {
  84. this.exitInputMode();
  85. }
  86. }
  87. };
  88. /**
  89. * On click we need to run an actionOnClick
  90. * function that has been set in onPointerDown
  91. * so that we enter/exit input mode correctly.
  92. */
  93. this.onClick = () => {
  94. const { actionOnClick } = this;
  95. if (actionOnClick) {
  96. actionOnClick();
  97. this.actionOnClick = undefined;
  98. }
  99. };
  100. /**
  101. * Clicking a column also focuses the column on
  102. * certain browsers, so we use onPointerDown
  103. * to tell the onFocusIn function that users
  104. * are trying to click the column rather than
  105. * focus the column using the keyboard. When the
  106. * user completes the click, the onClick function
  107. * runs and runs the actionOnClick callback.
  108. */
  109. this.onPointerDown = (ev) => {
  110. const { useInputMode, inputModeColumn, el } = this;
  111. if (this.isInHighlightBounds(ev)) {
  112. /**
  113. * If we were already in
  114. * input mode, then we should determine
  115. * if we tapped a particular column and
  116. * should switch to input mode for
  117. * that specific column.
  118. */
  119. if (useInputMode) {
  120. /**
  121. * If we tapped a picker column
  122. * then we should either switch to input
  123. * mode for that column or all columns.
  124. * Otherwise we should exit input mode
  125. * since we just tapped the highlight and
  126. * not a column.
  127. */
  128. if (ev.target.tagName === 'ION-PICKER-COLUMN') {
  129. /**
  130. * If user taps 2 different columns
  131. * then we should just switch to input mode
  132. * for the new column rather than switching to
  133. * input mode for all columns.
  134. */
  135. if (inputModeColumn && inputModeColumn === ev.target) {
  136. this.actionOnClick = () => {
  137. this.enterInputMode();
  138. };
  139. }
  140. else {
  141. this.actionOnClick = () => {
  142. this.enterInputMode(ev.target);
  143. };
  144. }
  145. }
  146. else {
  147. this.actionOnClick = () => {
  148. this.exitInputMode();
  149. };
  150. }
  151. /**
  152. * If we were not already in
  153. * input mode, then we should
  154. * enter input mode for all columns.
  155. */
  156. }
  157. else {
  158. /**
  159. * If there is only 1 numeric input column
  160. * then we should skip multi column input.
  161. */
  162. const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
  163. const columnEl = columns.length === 1 ? ev.target : undefined;
  164. this.actionOnClick = () => {
  165. this.enterInputMode(columnEl);
  166. };
  167. }
  168. return;
  169. }
  170. this.actionOnClick = () => {
  171. this.exitInputMode();
  172. };
  173. };
  174. /**
  175. * Enters input mode to allow
  176. * for text entry of numeric values.
  177. * If on mobile, we focus a hidden input
  178. * field so that the on screen keyboard
  179. * is brought up. When tabbing using a
  180. * keyboard, picker columns receive an outline
  181. * to indicate they are focused. As a result,
  182. * we should not focus the hidden input as it
  183. * would cause the outline to go away, preventing
  184. * users from having any visual indication of which
  185. * column is focused.
  186. */
  187. this.enterInputMode = (columnEl, focusInput = true) => {
  188. const { inputEl, el } = this;
  189. if (!inputEl) {
  190. return;
  191. }
  192. /**
  193. * Only active input mode if there is at
  194. * least one column that accepts numeric input.
  195. */
  196. const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
  197. if (!hasInputColumn) {
  198. return;
  199. }
  200. /**
  201. * If columnEl is undefined then
  202. * it is assumed that all numeric pickers
  203. * are eligible for text entry.
  204. * (i.e. hour and minute columns)
  205. */
  206. this.useInputMode = true;
  207. this.inputModeColumn = columnEl;
  208. /**
  209. * Users with a keyboard and mouse can
  210. * activate input mode where the input is
  211. * focused as well as when it is not focused,
  212. * so we need to make sure we clean up any
  213. * old listeners.
  214. */
  215. if (focusInput) {
  216. if (this.destroyKeypressListener) {
  217. this.destroyKeypressListener();
  218. this.destroyKeypressListener = undefined;
  219. }
  220. inputEl.focus();
  221. }
  222. else {
  223. // TODO FW-5900 Use keydown instead
  224. el.addEventListener('keypress', this.onKeyPress);
  225. this.destroyKeypressListener = () => {
  226. el.removeEventListener('keypress', this.onKeyPress);
  227. };
  228. }
  229. this.emitInputModeChange();
  230. };
  231. this.onKeyPress = (ev) => {
  232. const { inputEl } = this;
  233. if (!inputEl) {
  234. return;
  235. }
  236. const parsedValue = parseInt(ev.key, 10);
  237. /**
  238. * Only numbers should be allowed
  239. */
  240. if (!Number.isNaN(parsedValue)) {
  241. inputEl.value += ev.key;
  242. this.onInputChange();
  243. }
  244. };
  245. this.selectSingleColumn = () => {
  246. const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
  247. if (!inputEl || !inputModeColumn) {
  248. return;
  249. }
  250. const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
  251. /**
  252. * If users pause for a bit, the search
  253. * value should be reset similar to how a
  254. * <select> behaves. So typing "34", waiting,
  255. * then typing "5" should select "05".
  256. */
  257. if (singleColumnSearchTimeout) {
  258. clearTimeout(singleColumnSearchTimeout);
  259. }
  260. this.singleColumnSearchTimeout = setTimeout(() => {
  261. inputEl.value = '';
  262. this.singleColumnSearchTimeout = undefined;
  263. }, 1000);
  264. /**
  265. * For values that are longer than 2 digits long
  266. * we should shift the value over 1 character
  267. * to the left. So typing "456" would result in "56".
  268. * TODO: If we want to support more than just
  269. * time entry, we should update this value to be
  270. * the max length of all of the picker items.
  271. */
  272. if (inputEl.value.length >= 3) {
  273. const startIndex = inputEl.value.length - 2;
  274. const newString = inputEl.value.substring(startIndex);
  275. inputEl.value = newString;
  276. this.selectSingleColumn();
  277. return;
  278. }
  279. /**
  280. * Checking the value of the input gets priority
  281. * first. For example, if the value of the input
  282. * is "1" and we entered "2", then the complete value
  283. * is "12" and we should select hour 12.
  284. *
  285. * Regex removes any leading zeros from values like "02",
  286. * but it keeps a single zero if there are only zeros in the string.
  287. * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
  288. * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
  289. */
  290. const findItemFromCompleteValue = options.find(({ textContent }) => {
  291. /**
  292. * Keyboard entry is currently only used inside of Datetime
  293. * where we guarantee textContent is set.
  294. * If we end up exposing this feature publicly we should revisit this assumption.
  295. */
  296. const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
  297. return parsedText === inputEl.value;
  298. });
  299. if (findItemFromCompleteValue) {
  300. inputModeColumn.setValue(findItemFromCompleteValue.value);
  301. return;
  302. }
  303. /**
  304. * If we typed "56" to get minute 56, then typed "7",
  305. * we should select "07" as "567" is not a valid minute.
  306. */
  307. if (inputEl.value.length === 2) {
  308. const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
  309. inputEl.value = changedCharacter;
  310. this.selectSingleColumn();
  311. }
  312. };
  313. /**
  314. * Searches a list of column items for a particular
  315. * value. This is currently used for numeric values.
  316. * The zeroBehavior can be set to account for leading
  317. * or trailing zeros when looking at the item text.
  318. */
  319. this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
  320. if (!value) {
  321. return false;
  322. }
  323. const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
  324. value = value.replace(behavior, '');
  325. const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
  326. return el.disabled !== true && el.textContent.replace(behavior, '') === value;
  327. });
  328. if (option) {
  329. colEl.setValue(option.value);
  330. }
  331. return !!option;
  332. };
  333. /**
  334. * Attempts to intelligently search the first and second
  335. * column as if they're number columns for the provided numbers
  336. * where the first two numbers are the first column
  337. * and the last 2 are the last column. Tries to allow for the first
  338. * number to be ignored for situations where typos occurred.
  339. */
  340. this.multiColumnSearch = (firstColumn, secondColumn, input) => {
  341. if (input.length === 0) {
  342. return;
  343. }
  344. const inputArray = input.split('');
  345. const hourValue = inputArray.slice(0, 2).join('');
  346. // Try to find a match for the first two digits in the first column
  347. const foundHour = this.searchColumn(firstColumn, hourValue);
  348. // If we have more than 2 digits and found a match for hours,
  349. // use the remaining digits for the second column (minutes)
  350. if (inputArray.length > 2 && foundHour) {
  351. const minuteValue = inputArray.slice(2, 4).join('');
  352. this.searchColumn(secondColumn, minuteValue);
  353. }
  354. // If we couldn't find a match for the two-digit hour, try single digit approaches
  355. else if (!foundHour && inputArray.length >= 1) {
  356. // First try the first digit as a single-digit hour
  357. let singleDigitHour = inputArray[0];
  358. let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
  359. // If that didn't work, try the second digit as a single-digit hour
  360. // (handles case where user made a typo in the first digit, or they typed over themselves)
  361. if (!singleDigitFound) {
  362. inputArray.shift();
  363. singleDigitHour = inputArray[0];
  364. singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
  365. }
  366. // If we found a single-digit hour and have remaining digits,
  367. // use up to 2 of the remaining digits for the second column
  368. if (singleDigitFound && inputArray.length > 1) {
  369. const remainingDigits = inputArray.slice(1, 3).join('');
  370. this.searchColumn(secondColumn, remainingDigits);
  371. }
  372. }
  373. };
  374. this.selectMultiColumn = () => {
  375. const { inputEl, el } = this;
  376. if (!inputEl) {
  377. return;
  378. }
  379. const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
  380. const firstColumn = numericPickers[0];
  381. const lastColumn = numericPickers[1];
  382. let value = inputEl.value;
  383. if (value.length > 4) {
  384. const startIndex = inputEl.value.length - 4;
  385. const newString = inputEl.value.substring(startIndex);
  386. inputEl.value = newString;
  387. value = newString;
  388. }
  389. this.multiColumnSearch(firstColumn, lastColumn, value);
  390. };
  391. /**
  392. * Searches the value of the active column
  393. * to determine which value users are trying
  394. * to select
  395. */
  396. this.onInputChange = () => {
  397. const { useInputMode, inputEl, inputModeColumn } = this;
  398. if (!useInputMode || !inputEl) {
  399. return;
  400. }
  401. if (inputModeColumn) {
  402. this.selectSingleColumn();
  403. }
  404. else {
  405. this.selectMultiColumn();
  406. }
  407. };
  408. /**
  409. * Emit ionInputModeChange. Picker columns
  410. * listen for this event to determine whether
  411. * or not their column is "active" for text input.
  412. */
  413. this.emitInputModeChange = () => {
  414. const { useInputMode, inputModeColumn } = this;
  415. this.ionInputModeChange.emit({
  416. useInputMode,
  417. inputModeColumn,
  418. });
  419. };
  420. }
  421. /**
  422. * When the picker is interacted with
  423. * we need to prevent touchstart so other
  424. * gestures do not fire. For example,
  425. * scrolling on the wheel picker
  426. * in ion-datetime should not cause
  427. * a card modal to swipe to close.
  428. */
  429. preventTouchStartPropagation(ev) {
  430. ev.stopPropagation();
  431. }
  432. componentWillLoad() {
  433. getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
  434. getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
  435. }
  436. /**
  437. * @internal
  438. * Exits text entry mode for the picker
  439. * This method blurs the hidden input
  440. * and cause the keyboard to dismiss.
  441. */
  442. async exitInputMode() {
  443. const { inputEl, useInputMode } = this;
  444. if (!useInputMode || !inputEl) {
  445. return;
  446. }
  447. this.useInputMode = false;
  448. this.inputModeColumn = undefined;
  449. inputEl.blur();
  450. inputEl.value = '';
  451. if (this.destroyKeypressListener) {
  452. this.destroyKeypressListener();
  453. this.destroyKeypressListener = undefined;
  454. }
  455. this.emitInputModeChange();
  456. }
  457. render() {
  458. return (h(Host, { key: '28f81e4ed44a633178561757c5199c2c98f94b74', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'abb3d1ad25ef63856af7804111175a4d50008bc0', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
  459. var _a;
  460. /**
  461. * The "Enter" key represents
  462. * the user submitting their time
  463. * selection, so we should blur the
  464. * input (and therefore close the keyboard)
  465. *
  466. * Updating the picker's state to no longer
  467. * be in input mode is handled in the onBlur
  468. * callback below.
  469. */
  470. if (ev.key === 'Enter') {
  471. (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
  472. }
  473. }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '334a5abdc02e6b127c57177f626d7e4ff5526183', class: "picker-before" }), h("div", { key: 'ffd6271931129e88fc7c820e919d684899e420c5', class: "picker-after" }), h("div", { key: '78d1d95fd09e04f154ea59f24a1cece72c47ed7b', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5' })));
  474. }
  475. get el() { return getElement(this); }
  476. };
  477. Picker.style = {
  478. ios: IonPickerIosStyle0,
  479. md: IonPickerMdStyle0
  480. };
  481. export { Picker as ion_picker };