1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | const index = require('./index-a0a08b2a.js');
|
6 | const ionicGlobal = require('./ionic-global-06f21c1a.js');
|
7 | const helpers = require('./helpers-d381ec4d.js');
|
8 | const overlays = require('./overlays-59863ad4.js');
|
9 | const theme = require('./theme-30b7a575.js');
|
10 | const animation = require('./animation-13cbbb20.js');
|
11 | const haptic = require('./haptic-9f199ada.js');
|
12 | require('./hardware-back-button-148ce546.js');
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | const getDateValue = (date, format) => {
|
20 | const getValue = getValueFromFormat(date, format);
|
21 | if (getValue !== undefined) {
|
22 | if (format === FORMAT_A || format === FORMAT_a) {
|
23 | date.ampm = getValue;
|
24 | }
|
25 | return getValue;
|
26 | }
|
27 | const defaultDate = parseDate(new Date().toISOString());
|
28 | return getValueFromFormat(defaultDate, format);
|
29 | };
|
30 | const renderDatetime = (template, value, locale) => {
|
31 | if (value === undefined) {
|
32 | return undefined;
|
33 | }
|
34 | const tokens = [];
|
35 | let hasText = false;
|
36 | FORMAT_KEYS.forEach((format, index) => {
|
37 | if (template.indexOf(format.f) > -1) {
|
38 | const token = '{' + index + '}';
|
39 | const text = renderTextFormat(format.f, value[format.k], value, locale);
|
40 | if (!hasText && text !== undefined && value[format.k] != null) {
|
41 | hasText = true;
|
42 | }
|
43 | tokens.push(token, text || '');
|
44 | template = template.replace(format.f, token);
|
45 | }
|
46 | });
|
47 | if (!hasText) {
|
48 | return undefined;
|
49 | }
|
50 | for (let i = 0; i < tokens.length; i += 2) {
|
51 | template = template.replace(tokens[i], tokens[i + 1]);
|
52 | }
|
53 | return template;
|
54 | };
|
55 | const renderTextFormat = (format, value, date, locale) => {
|
56 | if ((format === FORMAT_DDDD || format === FORMAT_DDD)) {
|
57 | try {
|
58 | value = (new Date(date.year, date.month - 1, date.day)).getDay();
|
59 | if (format === FORMAT_DDDD) {
|
60 | return (locale.dayNames ? locale.dayNames : DAY_NAMES)[value];
|
61 | }
|
62 | return (locale.dayShortNames ? locale.dayShortNames : DAY_SHORT_NAMES)[value];
|
63 | }
|
64 | catch (e) {
|
65 |
|
66 | }
|
67 | return undefined;
|
68 | }
|
69 | if (format === FORMAT_A) {
|
70 | return date !== undefined && date.hour !== undefined
|
71 | ? (date.hour < 12 ? 'AM' : 'PM')
|
72 | : value ? value.toUpperCase() : '';
|
73 | }
|
74 | if (format === FORMAT_a) {
|
75 | return date !== undefined && date.hour !== undefined
|
76 | ? (date.hour < 12 ? 'am' : 'pm')
|
77 | : value || '';
|
78 | }
|
79 | if (value == null) {
|
80 | return '';
|
81 | }
|
82 | if (format === FORMAT_YY || format === FORMAT_MM ||
|
83 | format === FORMAT_DD || format === FORMAT_HH ||
|
84 | format === FORMAT_mm || format === FORMAT_ss) {
|
85 | return twoDigit(value);
|
86 | }
|
87 | if (format === FORMAT_YYYY) {
|
88 | return fourDigit(value);
|
89 | }
|
90 | if (format === FORMAT_MMMM) {
|
91 | return (locale.monthNames ? locale.monthNames : MONTH_NAMES)[value - 1];
|
92 | }
|
93 | if (format === FORMAT_MMM) {
|
94 | return (locale.monthShortNames ? locale.monthShortNames : MONTH_SHORT_NAMES)[value - 1];
|
95 | }
|
96 | if (format === FORMAT_hh || format === FORMAT_h) {
|
97 | if (value === 0) {
|
98 | return '12';
|
99 | }
|
100 | if (value > 12) {
|
101 | value -= 12;
|
102 | }
|
103 | if (format === FORMAT_hh && value < 10) {
|
104 | return ('0' + value);
|
105 | }
|
106 | }
|
107 | return value.toString();
|
108 | };
|
109 | const dateValueRange = (format, min, max) => {
|
110 | const opts = [];
|
111 | if (format === FORMAT_YYYY || format === FORMAT_YY) {
|
112 |
|
113 | if (max.year === undefined || min.year === undefined) {
|
114 | throw new Error('min and max year is undefined');
|
115 | }
|
116 | for (let i = max.year; i >= min.year; i--) {
|
117 | opts.push(i);
|
118 | }
|
119 | }
|
120 | else if (format === FORMAT_MMMM || format === FORMAT_MMM ||
|
121 | format === FORMAT_MM || format === FORMAT_M ||
|
122 | format === FORMAT_hh || format === FORMAT_h) {
|
123 |
|
124 | for (let i = 1; i < 13; i++) {
|
125 | opts.push(i);
|
126 | }
|
127 | }
|
128 | else if (format === FORMAT_DDDD || format === FORMAT_DDD ||
|
129 | format === FORMAT_DD || format === FORMAT_D) {
|
130 |
|
131 | for (let i = 1; i < 32; i++) {
|
132 | opts.push(i);
|
133 | }
|
134 | }
|
135 | else if (format === FORMAT_HH || format === FORMAT_H) {
|
136 |
|
137 | for (let i = 0; i < 24; i++) {
|
138 | opts.push(i);
|
139 | }
|
140 | }
|
141 | else if (format === FORMAT_mm || format === FORMAT_m) {
|
142 |
|
143 | for (let i = 0; i < 60; i++) {
|
144 | opts.push(i);
|
145 | }
|
146 | }
|
147 | else if (format === FORMAT_ss || format === FORMAT_s) {
|
148 |
|
149 | for (let i = 0; i < 60; i++) {
|
150 | opts.push(i);
|
151 | }
|
152 | }
|
153 | else if (format === FORMAT_A || format === FORMAT_a) {
|
154 |
|
155 | opts.push('am', 'pm');
|
156 | }
|
157 | return opts;
|
158 | };
|
159 | const dateSortValue = (year, month, day, hour = 0, minute = 0) => {
|
160 | return parseInt(`1${fourDigit(year)}${twoDigit(month)}${twoDigit(day)}${twoDigit(hour)}${twoDigit(minute)}`, 10);
|
161 | };
|
162 | const dateDataSortValue = (data) => {
|
163 | return dateSortValue(data.year, data.month, data.day, data.hour, data.minute);
|
164 | };
|
165 | const daysInMonth = (month, year) => {
|
166 | return (month === 4 || month === 6 || month === 9 || month === 11) ? 30 : (month === 2) ? isLeapYear(year) ? 29 : 28 : 31;
|
167 | };
|
168 | const isLeapYear = (year) => {
|
169 | return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
|
170 | };
|
171 | const ISO_8601_REGEXP = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
|
172 | const TIME_REGEXP = /^((\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
|
173 | const parseDate = (val) => {
|
174 |
|
175 |
|
176 | let parse = null;
|
177 | if (val != null && val !== '') {
|
178 |
|
179 | parse = TIME_REGEXP.exec(val);
|
180 | if (parse) {
|
181 |
|
182 | parse.unshift(undefined, undefined);
|
183 | parse[2] = parse[3] = undefined;
|
184 | }
|
185 | else {
|
186 |
|
187 | parse = ISO_8601_REGEXP.exec(val);
|
188 | }
|
189 | }
|
190 | if (parse === null) {
|
191 |
|
192 | return undefined;
|
193 | }
|
194 |
|
195 | for (let i = 1; i < 8; i++) {
|
196 | parse[i] = parse[i] !== undefined ? parseInt(parse[i], 10) : undefined;
|
197 | }
|
198 | let tzOffset = 0;
|
199 | if (parse[9] && parse[10]) {
|
200 |
|
201 | tzOffset = parseInt(parse[10], 10) * 60;
|
202 | if (parse[11]) {
|
203 |
|
204 | tzOffset += parseInt(parse[11], 10);
|
205 | }
|
206 | if (parse[9] === '-') {
|
207 |
|
208 | tzOffset *= -1;
|
209 | }
|
210 | }
|
211 | return {
|
212 | year: parse[1],
|
213 | month: parse[2],
|
214 | day: parse[3],
|
215 | hour: parse[4],
|
216 | minute: parse[5],
|
217 | second: parse[6],
|
218 | millisecond: parse[7],
|
219 | tzOffset,
|
220 | };
|
221 | };
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 | const getDateTime = (dateString = '', timeZone = '') => {
|
230 | |
231 |
|
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 | if (dateString === undefined || dateString === null) {
|
238 | dateString = '';
|
239 | }
|
240 | |
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 | if (dateString.length === 10 ||
|
247 | dateString.length === 7 ||
|
248 | dateString.length === 4) {
|
249 | dateString += ' ';
|
250 | }
|
251 | const date = (typeof dateString === 'string' && dateString.length > 0) ? new Date(dateString) : new Date();
|
252 | const localDateTime = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
|
253 | if (timeZone && timeZone.length > 0) {
|
254 | return new Date(date.getTime() - getTimezoneOffset(localDateTime, timeZone));
|
255 | }
|
256 | return localDateTime;
|
257 | };
|
258 | const getTimezoneOffset = (localDate, timeZone) => {
|
259 | const utcDateTime = new Date(localDate.toLocaleString('en-US', { timeZone: 'utc' }));
|
260 | const tzDateTime = new Date(localDate.toLocaleString('en-US', { timeZone }));
|
261 | return utcDateTime.getTime() - tzDateTime.getTime();
|
262 | };
|
263 | const updateDate = (existingData, newData, displayTimezone) => {
|
264 | if (!newData || typeof newData === 'string') {
|
265 | const dateTime = getDateTime(newData, displayTimezone);
|
266 | if (!Number.isNaN(dateTime.getTime())) {
|
267 | newData = dateTime.toISOString();
|
268 | }
|
269 | }
|
270 | if (newData && newData !== '') {
|
271 | if (typeof newData === 'string') {
|
272 |
|
273 |
|
274 | newData = parseDate(newData);
|
275 | if (newData) {
|
276 |
|
277 | Object.assign(existingData, newData);
|
278 | return true;
|
279 | }
|
280 | }
|
281 | else if ((newData.year || newData.hour || newData.month || newData.day || newData.minute || newData.second)) {
|
282 |
|
283 |
|
284 | if (newData.ampm !== undefined && newData.hour !== undefined) {
|
285 |
|
286 |
|
287 |
|
288 |
|
289 |
|
290 |
|
291 | newData.hour.value = (newData.ampm.value === 'pm')
|
292 | ? (newData.hour.value === 12 ? 12 : newData.hour.value + 12)
|
293 | : (newData.hour.value === 12 ? 0 : newData.hour.value);
|
294 | }
|
295 |
|
296 |
|
297 | for (const key of Object.keys(newData)) {
|
298 | existingData[key] = newData[key].value;
|
299 | }
|
300 | return true;
|
301 | }
|
302 | else if (newData.ampm) {
|
303 |
|
304 |
|
305 |
|
306 | newData.hour = {
|
307 | value: newData.hour
|
308 | ? newData.hour.value
|
309 | : (newData.ampm.value === 'pm'
|
310 | ? (existingData.hour < 12 ? existingData.hour + 12 : existingData.hour)
|
311 | : (existingData.hour >= 12 ? existingData.hour - 12 : existingData.hour))
|
312 | };
|
313 | existingData['hour'] = newData['hour'].value;
|
314 | existingData['ampm'] = newData['ampm'].value;
|
315 | return true;
|
316 | }
|
317 |
|
318 | console.warn(`Error parsing date: "${newData}". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime`);
|
319 | }
|
320 | else {
|
321 |
|
322 | for (const k in existingData) {
|
323 | if (existingData.hasOwnProperty(k)) {
|
324 | delete existingData[k];
|
325 | }
|
326 | }
|
327 | }
|
328 | return false;
|
329 | };
|
330 | const parseTemplate = (template) => {
|
331 | const formats = [];
|
332 | template = template.replace(/[^\w\s]/gi, ' ');
|
333 | FORMAT_KEYS.forEach(format => {
|
334 | if (format.f.length > 1 && template.indexOf(format.f) > -1 && template.indexOf(format.f + format.f.charAt(0)) < 0) {
|
335 | template = template.replace(format.f, ' ' + format.f + ' ');
|
336 | }
|
337 | });
|
338 | const words = template.split(' ').filter(w => w.length > 0);
|
339 | words.forEach((word, i) => {
|
340 | FORMAT_KEYS.forEach(format => {
|
341 | if (word === format.f) {
|
342 | if (word === FORMAT_A || word === FORMAT_a) {
|
343 |
|
344 | if ((formats.indexOf(FORMAT_h) < 0 && formats.indexOf(FORMAT_hh) < 0) ||
|
345 | VALID_AMPM_PREFIX.indexOf(words[i - 1]) === -1) {
|
346 |
|
347 |
|
348 |
|
349 | return;
|
350 | }
|
351 | }
|
352 | formats.push(word);
|
353 | }
|
354 | });
|
355 | });
|
356 | return formats;
|
357 | };
|
358 | const getValueFromFormat = (date, format) => {
|
359 | if (format === FORMAT_A || format === FORMAT_a) {
|
360 | return (date.hour < 12 ? 'am' : 'pm');
|
361 | }
|
362 | if (format === FORMAT_hh || format === FORMAT_h) {
|
363 | return (date.hour > 12 ? date.hour - 12 : (date.hour === 0 ? 12 : date.hour));
|
364 | }
|
365 | return date[convertFormatToKey(format)];
|
366 | };
|
367 | const convertFormatToKey = (format) => {
|
368 | for (const k in FORMAT_KEYS) {
|
369 | if (FORMAT_KEYS[k].f === format) {
|
370 | return FORMAT_KEYS[k].k;
|
371 | }
|
372 | }
|
373 | return undefined;
|
374 | };
|
375 | const convertDataToISO = (data) => {
|
376 |
|
377 | let rtn = '';
|
378 | if (data.year !== undefined) {
|
379 |
|
380 | rtn = fourDigit(data.year);
|
381 | if (data.month !== undefined) {
|
382 |
|
383 | rtn += '-' + twoDigit(data.month);
|
384 | if (data.day !== undefined) {
|
385 |
|
386 | rtn += '-' + twoDigit(data.day);
|
387 | if (data.hour !== undefined) {
|
388 |
|
389 | rtn += `T${twoDigit(data.hour)}:${twoDigit(data.minute)}:${twoDigit(data.second)}`;
|
390 | if (data.millisecond > 0) {
|
391 |
|
392 | rtn += '.' + threeDigit(data.millisecond);
|
393 | }
|
394 | if (data.tzOffset === undefined) {
|
395 |
|
396 | rtn += 'Z';
|
397 | }
|
398 | else {
|
399 |
|
400 | rtn += (data.tzOffset > 0 ? '+' : '-') + twoDigit(Math.floor(Math.abs(data.tzOffset / 60))) + ':' + twoDigit(data.tzOffset % 60);
|
401 | }
|
402 | }
|
403 | }
|
404 | }
|
405 | }
|
406 | else if (data.hour !== undefined) {
|
407 |
|
408 | rtn = twoDigit(data.hour) + ':' + twoDigit(data.minute);
|
409 | if (data.second !== undefined) {
|
410 |
|
411 | rtn += ':' + twoDigit(data.second);
|
412 | if (data.millisecond !== undefined) {
|
413 |
|
414 | rtn += '.' + threeDigit(data.millisecond);
|
415 | }
|
416 | }
|
417 | }
|
418 | return rtn;
|
419 | };
|
420 |
|
421 |
|
422 |
|
423 |
|
424 | const convertToArrayOfStrings = (input, type) => {
|
425 | if (input == null) {
|
426 | return undefined;
|
427 | }
|
428 | if (typeof input === 'string') {
|
429 |
|
430 |
|
431 | input = input.replace(/\[|\]/g, '').split(',');
|
432 | }
|
433 | let values;
|
434 | if (Array.isArray(input)) {
|
435 |
|
436 | values = input.map(val => val.toString().trim());
|
437 | }
|
438 | if (values === undefined || values.length === 0) {
|
439 | console.warn(`Invalid "${type}Names". Must be an array of strings, or a comma separated string.`);
|
440 | }
|
441 | return values;
|
442 | };
|
443 |
|
444 |
|
445 |
|
446 |
|
447 | const convertToArrayOfNumbers = (input, type) => {
|
448 | if (typeof input === 'string') {
|
449 |
|
450 |
|
451 | input = input.replace(/\[|\]|\s/g, '').split(',');
|
452 | }
|
453 | let values;
|
454 | if (Array.isArray(input)) {
|
455 |
|
456 | values = input
|
457 | .map((num) => parseInt(num, 10))
|
458 | .filter(isFinite);
|
459 | }
|
460 | else {
|
461 | values = [input];
|
462 | }
|
463 | if (values.length === 0) {
|
464 | console.warn(`Invalid "${type}Values". Must be an array of numbers, or a comma separated string of numbers.`);
|
465 | }
|
466 | return values;
|
467 | };
|
468 | const twoDigit = (val) => {
|
469 | return ('0' + (val !== undefined ? Math.abs(val) : '0')).slice(-2);
|
470 | };
|
471 | const threeDigit = (val) => {
|
472 | return ('00' + (val !== undefined ? Math.abs(val) : '0')).slice(-3);
|
473 | };
|
474 | const fourDigit = (val) => {
|
475 | return ('000' + (val !== undefined ? Math.abs(val) : '0')).slice(-4);
|
476 | };
|
477 | const FORMAT_YYYY = 'YYYY';
|
478 | const FORMAT_YY = 'YY';
|
479 | const FORMAT_MMMM = 'MMMM';
|
480 | const FORMAT_MMM = 'MMM';
|
481 | const FORMAT_MM = 'MM';
|
482 | const FORMAT_M = 'M';
|
483 | const FORMAT_DDDD = 'DDDD';
|
484 | const FORMAT_DDD = 'DDD';
|
485 | const FORMAT_DD = 'DD';
|
486 | const FORMAT_D = 'D';
|
487 | const FORMAT_HH = 'HH';
|
488 | const FORMAT_H = 'H';
|
489 | const FORMAT_hh = 'hh';
|
490 | const FORMAT_h = 'h';
|
491 | const FORMAT_mm = 'mm';
|
492 | const FORMAT_m = 'm';
|
493 | const FORMAT_ss = 'ss';
|
494 | const FORMAT_s = 's';
|
495 | const FORMAT_A = 'A';
|
496 | const FORMAT_a = 'a';
|
497 | const FORMAT_KEYS = [
|
498 | { f: FORMAT_YYYY, k: 'year' },
|
499 | { f: FORMAT_MMMM, k: 'month' },
|
500 | { f: FORMAT_DDDD, k: 'day' },
|
501 | { f: FORMAT_MMM, k: 'month' },
|
502 | { f: FORMAT_DDD, k: 'day' },
|
503 | { f: FORMAT_YY, k: 'year' },
|
504 | { f: FORMAT_MM, k: 'month' },
|
505 | { f: FORMAT_DD, k: 'day' },
|
506 | { f: FORMAT_HH, k: 'hour' },
|
507 | { f: FORMAT_hh, k: 'hour' },
|
508 | { f: FORMAT_mm, k: 'minute' },
|
509 | { f: FORMAT_ss, k: 'second' },
|
510 | { f: FORMAT_M, k: 'month' },
|
511 | { f: FORMAT_D, k: 'day' },
|
512 | { f: FORMAT_H, k: 'hour' },
|
513 | { f: FORMAT_h, k: 'hour' },
|
514 | { f: FORMAT_m, k: 'minute' },
|
515 | { f: FORMAT_s, k: 'second' },
|
516 | { f: FORMAT_A, k: 'ampm' },
|
517 | { f: FORMAT_a, k: 'ampm' },
|
518 | ];
|
519 | const DAY_NAMES = [
|
520 | 'Sunday',
|
521 | 'Monday',
|
522 | 'Tuesday',
|
523 | 'Wednesday',
|
524 | 'Thursday',
|
525 | 'Friday',
|
526 | 'Saturday',
|
527 | ];
|
528 | const DAY_SHORT_NAMES = [
|
529 | 'Sun',
|
530 | 'Mon',
|
531 | 'Tue',
|
532 | 'Wed',
|
533 | 'Thu',
|
534 | 'Fri',
|
535 | 'Sat',
|
536 | ];
|
537 | const MONTH_NAMES = [
|
538 | 'January',
|
539 | 'February',
|
540 | 'March',
|
541 | 'April',
|
542 | 'May',
|
543 | 'June',
|
544 | 'July',
|
545 | 'August',
|
546 | 'September',
|
547 | 'October',
|
548 | 'November',
|
549 | 'December',
|
550 | ];
|
551 | const MONTH_SHORT_NAMES = [
|
552 | 'Jan',
|
553 | 'Feb',
|
554 | 'Mar',
|
555 | 'Apr',
|
556 | 'May',
|
557 | 'Jun',
|
558 | 'Jul',
|
559 | 'Aug',
|
560 | 'Sep',
|
561 | 'Oct',
|
562 | 'Nov',
|
563 | 'Dec',
|
564 | ];
|
565 | const VALID_AMPM_PREFIX = [
|
566 | FORMAT_hh, FORMAT_h, FORMAT_mm, FORMAT_m, FORMAT_ss, FORMAT_s
|
567 | ];
|
568 |
|
569 | const datetimeIosCss = ":host{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;min-width:16px;min-height:1.2em;font-family:var(--ion-font-family, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:2}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static}:host(.datetime-placeholder){color:var(--placeholder-color)}:host(.datetime-disabled){opacity:0.3;pointer-events:none}:host(.datetime-readonly){pointer-events:none}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.datetime-text{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-ms-flex:1;flex:1;min-height:inherit;direction:ltr;overflow:inherit}[dir=rtl] .datetime-text,:host-context([dir=rtl]) .datetime-text{direction:rtl}:host{--placeholder-color:var(--ion-color-step-400, #999999);--padding-top:10px;--padding-end:10px;--padding-bottom:10px;--padding-start:20px}";
|
570 |
|
571 | const datetimeMdCss = ":host{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;min-width:16px;min-height:1.2em;font-family:var(--ion-font-family, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:2}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.in-item){position:static}:host(.datetime-placeholder){color:var(--placeholder-color)}:host(.datetime-disabled){opacity:0.3;pointer-events:none}:host(.datetime-readonly){pointer-events:none}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.datetime-text{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-ms-flex:1;flex:1;min-height:inherit;direction:ltr;overflow:inherit}[dir=rtl] .datetime-text,:host-context([dir=rtl]) .datetime-text{direction:rtl}:host{--placeholder-color:var(--ion-placeholder-color, var(--ion-color-step-400, #999999));--padding-top:10px;--padding-end:0;--padding-bottom:11px;--padding-start:16px}";
|
572 |
|
573 | const Datetime = class {
|
574 | constructor(hostRef) {
|
575 | index.registerInstance(this, hostRef);
|
576 | this.ionCancel = index.createEvent(this, "ionCancel", 7);
|
577 | this.ionChange = index.createEvent(this, "ionChange", 7);
|
578 | this.ionFocus = index.createEvent(this, "ionFocus", 7);
|
579 | this.ionBlur = index.createEvent(this, "ionBlur", 7);
|
580 | this.ionStyle = index.createEvent(this, "ionStyle", 7);
|
581 | this.inputId = `ion-dt-${datetimeIds++}`;
|
582 | this.locale = {};
|
583 | this.datetimeMin = {};
|
584 | this.datetimeMax = {};
|
585 | this.datetimeValue = {};
|
586 | this.isExpanded = false;
|
587 | |
588 |
|
589 |
|
590 | this.name = this.inputId;
|
591 | |
592 |
|
593 |
|
594 | this.disabled = false;
|
595 | |
596 |
|
597 |
|
598 | this.readonly = false;
|
599 | |
600 |
|
601 |
|
602 |
|
603 |
|
604 |
|
605 |
|
606 | this.displayFormat = 'MMM D, YYYY';
|
607 | |
608 |
|
609 |
|
610 | this.cancelText = 'Cancel';
|
611 | |
612 |
|
613 |
|
614 | this.doneText = 'Done';
|
615 | this.onClick = () => {
|
616 | this.setFocus();
|
617 | this.open();
|
618 | };
|
619 | this.onFocus = () => {
|
620 | this.ionFocus.emit();
|
621 | };
|
622 | this.onBlur = () => {
|
623 | this.ionBlur.emit();
|
624 | };
|
625 | }
|
626 | disabledChanged() {
|
627 | this.emitStyle();
|
628 | }
|
629 | |
630 |
|
631 |
|
632 | valueChanged() {
|
633 | this.updateDatetimeValue(this.value);
|
634 | this.emitStyle();
|
635 | this.ionChange.emit({
|
636 | value: this.value
|
637 | });
|
638 | }
|
639 | componentWillLoad() {
|
640 |
|
641 |
|
642 |
|
643 | this.locale = {
|
644 |
|
645 | monthNames: convertToArrayOfStrings(this.monthNames, 'monthNames'),
|
646 | monthShortNames: convertToArrayOfStrings(this.monthShortNames, 'monthShortNames'),
|
647 | dayNames: convertToArrayOfStrings(this.dayNames, 'dayNames'),
|
648 | dayShortNames: convertToArrayOfStrings(this.dayShortNames, 'dayShortNames')
|
649 | };
|
650 | this.updateDatetimeValue(this.value);
|
651 | this.emitStyle();
|
652 | }
|
653 | |
654 |
|
655 |
|
656 | async open() {
|
657 | if (this.disabled || this.isExpanded) {
|
658 | return;
|
659 | }
|
660 | const pickerOptions = this.generatePickerOptions();
|
661 | const picker = await overlays.pickerController.create(pickerOptions);
|
662 | this.isExpanded = true;
|
663 | picker.onDidDismiss().then(() => {
|
664 | this.isExpanded = false;
|
665 | this.setFocus();
|
666 | });
|
667 | helpers.addEventListener(picker, 'ionPickerColChange', async (event) => {
|
668 | const data = event.detail;
|
669 | const colSelectedIndex = data.selectedIndex;
|
670 | const colOptions = data.options;
|
671 | const changeData = {};
|
672 | changeData[data.name] = {
|
673 | value: colOptions[colSelectedIndex].value
|
674 | };
|
675 | if (data.name !== 'ampm' && this.datetimeValue.ampm !== undefined) {
|
676 | changeData['ampm'] = {
|
677 | value: this.datetimeValue.ampm
|
678 | };
|
679 | }
|
680 | this.updateDatetimeValue(changeData);
|
681 | picker.columns = this.generateColumns();
|
682 | });
|
683 | await picker.present();
|
684 | }
|
685 | emitStyle() {
|
686 | this.ionStyle.emit({
|
687 | 'interactive': true,
|
688 | 'datetime': true,
|
689 | 'has-placeholder': this.placeholder != null,
|
690 | 'has-value': this.hasValue(),
|
691 | 'interactive-disabled': this.disabled,
|
692 | });
|
693 | }
|
694 | updateDatetimeValue(value) {
|
695 | updateDate(this.datetimeValue, value, this.displayTimezone);
|
696 | }
|
697 | generatePickerOptions() {
|
698 | const mode = ionicGlobal.getIonMode(this);
|
699 | this.locale = {
|
700 | monthNames: convertToArrayOfStrings(this.monthNames, 'monthNames'),
|
701 | monthShortNames: convertToArrayOfStrings(this.monthShortNames, 'monthShortNames'),
|
702 | dayNames: convertToArrayOfStrings(this.dayNames, 'dayNames'),
|
703 | dayShortNames: convertToArrayOfStrings(this.dayShortNames, 'dayShortNames')
|
704 | };
|
705 | const pickerOptions = Object.assign(Object.assign({ mode }, this.pickerOptions), { columns: this.generateColumns() });
|
706 |
|
707 |
|
708 | const buttons = pickerOptions.buttons;
|
709 | if (!buttons || buttons.length === 0) {
|
710 | pickerOptions.buttons = [
|
711 | {
|
712 | text: this.cancelText,
|
713 | role: 'cancel',
|
714 | handler: () => {
|
715 | this.updateDatetimeValue(this.value);
|
716 | this.ionCancel.emit();
|
717 | }
|
718 | },
|
719 | {
|
720 | text: this.doneText,
|
721 | handler: (data) => {
|
722 | this.updateDatetimeValue(data);
|
723 | |
724 |
|
725 |
|
726 |
|
727 |
|
728 |
|
729 |
|
730 |
|
731 |
|
732 | const date = new Date(convertDataToISO(this.datetimeValue));
|
733 |
|
734 | this.datetimeValue.tzOffset = (this.displayTimezone !== undefined && this.displayTimezone.length > 0)
|
735 | ? ((getTimezoneOffset(date, this.displayTimezone)) / 1000 / 60) * -1
|
736 | : date.getTimezoneOffset() * -1;
|
737 | this.value = convertDataToISO(this.datetimeValue);
|
738 | }
|
739 | }
|
740 | ];
|
741 | }
|
742 | return pickerOptions;
|
743 | }
|
744 | generateColumns() {
|
745 |
|
746 |
|
747 | let template = this.pickerFormat || this.displayFormat || DEFAULT_FORMAT;
|
748 | if (template.length === 0) {
|
749 | return [];
|
750 | }
|
751 |
|
752 | this.calcMinMax();
|
753 |
|
754 |
|
755 | template = template.replace('DDDD', '{~}').replace('DDD', '{~}');
|
756 | if (template.indexOf('D') === -1) {
|
757 |
|
758 |
|
759 | template = template.replace('{~}', 'D');
|
760 | }
|
761 |
|
762 | template = template.replace(/{~}/g, '');
|
763 |
|
764 | const columns = parseTemplate(template).map((format) => {
|
765 |
|
766 |
|
767 | const key = convertFormatToKey(format);
|
768 | let values;
|
769 |
|
770 |
|
771 | const self = this;
|
772 | values = self[key + 'Values']
|
773 | ? convertToArrayOfNumbers(self[key + 'Values'], key)
|
774 | : dateValueRange(format, this.datetimeMin, this.datetimeMax);
|
775 | const colOptions = values.map(val => {
|
776 | return {
|
777 | value: val,
|
778 | text: renderTextFormat(format, val, undefined, this.locale),
|
779 | };
|
780 | });
|
781 |
|
782 |
|
783 | const optValue = getDateValue(this.datetimeValue, format);
|
784 | const selectedIndex = colOptions.findIndex(opt => opt.value === optValue);
|
785 | return {
|
786 | name: key,
|
787 | selectedIndex: selectedIndex >= 0 ? selectedIndex : 0,
|
788 | options: colOptions
|
789 | };
|
790 | });
|
791 |
|
792 | const min = this.datetimeMin;
|
793 | const max = this.datetimeMax;
|
794 | ['month', 'day', 'hour', 'minute']
|
795 | .filter(name => !columns.find(column => column.name === name))
|
796 | .forEach(name => {
|
797 | min[name] = 0;
|
798 | max[name] = 0;
|
799 | });
|
800 | return this.validateColumns(divyColumns(columns));
|
801 | }
|
802 | validateColumns(columns) {
|
803 | const today = new Date();
|
804 | const minCompareVal = dateDataSortValue(this.datetimeMin);
|
805 | const maxCompareVal = dateDataSortValue(this.datetimeMax);
|
806 | const yearCol = columns.find(c => c.name === 'year');
|
807 | let selectedYear = today.getFullYear();
|
808 | if (yearCol) {
|
809 |
|
810 | if (!yearCol.options.find(col => col.value === today.getFullYear())) {
|
811 | selectedYear = yearCol.options[0].value;
|
812 | }
|
813 | const selectedIndex = yearCol.selectedIndex;
|
814 | if (selectedIndex !== undefined) {
|
815 | const yearOpt = yearCol.options[selectedIndex];
|
816 | if (yearOpt) {
|
817 |
|
818 | selectedYear = yearOpt.value;
|
819 | }
|
820 | }
|
821 | }
|
822 | const selectedMonth = this.validateColumn(columns, 'month', 1, minCompareVal, maxCompareVal, [selectedYear, 0, 0, 0, 0], [selectedYear, 12, 31, 23, 59]);
|
823 | const numDaysInMonth = daysInMonth(selectedMonth, selectedYear);
|
824 | const selectedDay = this.validateColumn(columns, 'day', 2, minCompareVal, maxCompareVal, [selectedYear, selectedMonth, 0, 0, 0], [selectedYear, selectedMonth, numDaysInMonth, 23, 59]);
|
825 | const selectedHour = this.validateColumn(columns, 'hour', 3, minCompareVal, maxCompareVal, [selectedYear, selectedMonth, selectedDay, 0, 0], [selectedYear, selectedMonth, selectedDay, 23, 59]);
|
826 | this.validateColumn(columns, 'minute', 4, minCompareVal, maxCompareVal, [selectedYear, selectedMonth, selectedDay, selectedHour, 0], [selectedYear, selectedMonth, selectedDay, selectedHour, 59]);
|
827 | return columns;
|
828 | }
|
829 | calcMinMax() {
|
830 | const todaysYear = new Date().getFullYear();
|
831 | if (this.yearValues !== undefined) {
|
832 | const years = convertToArrayOfNumbers(this.yearValues, 'year');
|
833 | if (this.min === undefined) {
|
834 | this.min = Math.min(...years).toString();
|
835 | }
|
836 | if (this.max === undefined) {
|
837 | this.max = Math.max(...years).toString();
|
838 | }
|
839 | }
|
840 | else {
|
841 | if (this.min === undefined) {
|
842 | this.min = (todaysYear - 100).toString();
|
843 | }
|
844 | if (this.max === undefined) {
|
845 | this.max = todaysYear.toString();
|
846 | }
|
847 | }
|
848 | const min = this.datetimeMin = parseDate(this.min);
|
849 | const max = this.datetimeMax = parseDate(this.max);
|
850 | min.year = min.year || todaysYear;
|
851 | max.year = max.year || todaysYear;
|
852 | min.month = min.month || 1;
|
853 | max.month = max.month || 12;
|
854 | min.day = min.day || 1;
|
855 | max.day = max.day || 31;
|
856 | min.hour = min.hour || 0;
|
857 | max.hour = max.hour === undefined ? 23 : max.hour;
|
858 | min.minute = min.minute || 0;
|
859 | max.minute = max.minute === undefined ? 59 : max.minute;
|
860 | min.second = min.second || 0;
|
861 | max.second = max.second === undefined ? 59 : max.second;
|
862 |
|
863 | if (min.year > max.year) {
|
864 | console.error('min.year > max.year');
|
865 | min.year = max.year - 100;
|
866 | }
|
867 | if (min.year === max.year) {
|
868 | if (min.month > max.month) {
|
869 | console.error('min.month > max.month');
|
870 | min.month = 1;
|
871 | }
|
872 | else if (min.month === max.month && min.day > max.day) {
|
873 | console.error('min.day > max.day');
|
874 | min.day = 1;
|
875 | }
|
876 | }
|
877 | }
|
878 | validateColumn(columns, name, index, min, max, lowerBounds, upperBounds) {
|
879 | const column = columns.find(c => c.name === name);
|
880 | if (!column) {
|
881 | return 0;
|
882 | }
|
883 | const lb = lowerBounds.slice();
|
884 | const ub = upperBounds.slice();
|
885 | const options = column.options;
|
886 | let indexMin = options.length - 1;
|
887 | let indexMax = 0;
|
888 | for (let i = 0; i < options.length; i++) {
|
889 | const opts = options[i];
|
890 | const value = opts.value;
|
891 | lb[index] = opts.value;
|
892 | ub[index] = opts.value;
|
893 | const disabled = opts.disabled = (value < lowerBounds[index] ||
|
894 | value > upperBounds[index] ||
|
895 | dateSortValue(ub[0], ub[1], ub[2], ub[3], ub[4]) < min ||
|
896 | dateSortValue(lb[0], lb[1], lb[2], lb[3], lb[4]) > max);
|
897 | if (!disabled) {
|
898 | indexMin = Math.min(indexMin, i);
|
899 | indexMax = Math.max(indexMax, i);
|
900 | }
|
901 | }
|
902 | const selectedIndex = column.selectedIndex = helpers.clamp(indexMin, column.selectedIndex, indexMax);
|
903 | const opt = column.options[selectedIndex];
|
904 | if (opt) {
|
905 | return opt.value;
|
906 | }
|
907 | return 0;
|
908 | }
|
909 | get text() {
|
910 |
|
911 | const template = this.displayFormat || this.pickerFormat || DEFAULT_FORMAT;
|
912 | if (this.value === undefined ||
|
913 | this.value === null ||
|
914 | this.value.length === 0) {
|
915 | return;
|
916 | }
|
917 | return renderDatetime(template, this.datetimeValue, this.locale);
|
918 | }
|
919 | hasValue() {
|
920 | return this.text !== undefined;
|
921 | }
|
922 | setFocus() {
|
923 | if (this.buttonEl) {
|
924 | this.buttonEl.focus();
|
925 | }
|
926 | }
|
927 | render() {
|
928 | const { inputId, text, disabled, readonly, isExpanded, el, placeholder } = this;
|
929 | const mode = ionicGlobal.getIonMode(this);
|
930 | const labelId = inputId + '-lbl';
|
931 | const label = helpers.findItemLabel(el);
|
932 | const addPlaceholderClass = (text === undefined && placeholder != null) ? true : false;
|
933 |
|
934 |
|
935 | const datetimeText = text === undefined
|
936 | ? (placeholder != null ? placeholder : '')
|
937 | : text;
|
938 | const datetimeTextPart = text === undefined
|
939 | ? (placeholder != null ? 'placeholder' : undefined)
|
940 | : 'text';
|
941 | if (label) {
|
942 | label.id = labelId;
|
943 | }
|
944 | helpers.renderHiddenInput(true, el, this.name, this.value, this.disabled);
|
945 | return (index.h(index.Host, { onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-expanded": `${isExpanded}`, "aria-haspopup": "true", "aria-labelledby": label ? labelId : null, class: {
|
946 | [mode]: true,
|
947 | 'datetime-disabled': disabled,
|
948 | 'datetime-readonly': readonly,
|
949 | 'datetime-placeholder': addPlaceholderClass,
|
950 | 'in-item': theme.hostContext('ion-item', el)
|
951 | } }, index.h("div", { class: "datetime-text", part: datetimeTextPart }, datetimeText), index.h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled, ref: btnEl => this.buttonEl = btnEl })));
|
952 | }
|
953 | get el() { return index.getElement(this); }
|
954 | static get watchers() { return {
|
955 | "disabled": ["disabledChanged"],
|
956 | "value": ["valueChanged"]
|
957 | }; }
|
958 | };
|
959 | const divyColumns = (columns) => {
|
960 | const columnsWidth = [];
|
961 | let col;
|
962 | let width;
|
963 | for (let i = 0; i < columns.length; i++) {
|
964 | col = columns[i];
|
965 | columnsWidth.push(0);
|
966 | for (const option of col.options) {
|
967 | width = option.text.length;
|
968 | if (width > columnsWidth[i]) {
|
969 | columnsWidth[i] = width;
|
970 | }
|
971 | }
|
972 | }
|
973 | if (columnsWidth.length === 2) {
|
974 | width = Math.max(columnsWidth[0], columnsWidth[1]);
|
975 | columns[0].align = 'right';
|
976 | columns[1].align = 'left';
|
977 | columns[0].optionsWidth = columns[1].optionsWidth = `${width * 17}px`;
|
978 | }
|
979 | else if (columnsWidth.length === 3) {
|
980 | width = Math.max(columnsWidth[0], columnsWidth[2]);
|
981 | columns[0].align = 'right';
|
982 | columns[1].columnWidth = `${columnsWidth[1] * 17}px`;
|
983 | columns[0].optionsWidth = columns[2].optionsWidth = `${width * 17}px`;
|
984 | columns[2].align = 'left';
|
985 | }
|
986 | return columns;
|
987 | };
|
988 | const DEFAULT_FORMAT = 'MMM D, YYYY';
|
989 | let datetimeIds = 0;
|
990 | Datetime.style = {
|
991 | ios: datetimeIosCss,
|
992 | md: datetimeMdCss
|
993 | };
|
994 |
|
995 |
|
996 |
|
997 |
|
998 | const iosEnterAnimation = (baseEl) => {
|
999 | const baseAnimation = animation.createAnimation();
|
1000 | const backdropAnimation = animation.createAnimation();
|
1001 | const wrapperAnimation = animation.createAnimation();
|
1002 | backdropAnimation
|
1003 | .addElement(baseEl.querySelector('ion-backdrop'))
|
1004 | .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
1005 | .beforeStyles({
|
1006 | 'pointer-events': 'none'
|
1007 | })
|
1008 | .afterClearStyles(['pointer-events']);
|
1009 | wrapperAnimation
|
1010 | .addElement(baseEl.querySelector('.picker-wrapper'))
|
1011 | .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
1012 | return baseAnimation
|
1013 | .addElement(baseEl)
|
1014 | .easing('cubic-bezier(.36,.66,.04,1)')
|
1015 | .duration(400)
|
1016 | .addAnimation([backdropAnimation, wrapperAnimation]);
|
1017 | };
|
1018 |
|
1019 |
|
1020 |
|
1021 |
|
1022 | const iosLeaveAnimation = (baseEl) => {
|
1023 | const baseAnimation = animation.createAnimation();
|
1024 | const backdropAnimation = animation.createAnimation();
|
1025 | const wrapperAnimation = animation.createAnimation();
|
1026 | backdropAnimation
|
1027 | .addElement(baseEl.querySelector('ion-backdrop'))
|
1028 | .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
|
1029 | wrapperAnimation
|
1030 | .addElement(baseEl.querySelector('.picker-wrapper'))
|
1031 | .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
|
1032 | return baseAnimation
|
1033 | .addElement(baseEl)
|
1034 | .easing('cubic-bezier(.36,.66,.04,1)')
|
1035 | .duration(400)
|
1036 | .addAnimation([backdropAnimation, wrapperAnimation]);
|
1037 | };
|
1038 |
|
1039 | const pickerIosCss = ".sc-ion-picker-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}[dir=rtl].sc-ion-picker-ios-h,[dir=rtl] .sc-ion-picker-ios-h{left:unset;right:unset;right:0}.overlay-hidden.sc-ion-picker-ios-h{display:none}.picker-wrapper.sc-ion-picker-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-wrapper.sc-ion-picker-ios{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.picker-toolbar.sc-ion-picker-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-ios:active,.picker-button.sc-ion-picker-ios:focus{outline:none}.picker-columns.sc-ion-picker-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;direction:ltr;overflow:hidden}.picker-above-highlight.sc-ion-picker-ios,.picker-below-highlight.sc-ion-picker-ios{display:none;pointer-events:none}.sc-ion-picker-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-ios:last-child .picker-button.sc-ion-picker-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-ios,.picker-button.ion-activated.sc-ion-picker-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:1em;padding-right:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-button.sc-ion-picker-ios,.picker-button.ion-activated.sc-ion-picker-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em}}.picker-columns.sc-ion-picker-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-ios{left:0;top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}[dir=rtl].sc-ion-picker-ios .picker-above-highlight.sc-ion-picker-ios,[dir=rtl].sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}.picker-below-highlight.sc-ion-picker-ios{left:0;top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}[dir=rtl].sc-ion-picker-ios .picker-below-highlight.sc-ion-picker-ios,[dir=rtl].sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}";
|
1040 |
|
1041 | const pickerMdCss = ".sc-ion-picker-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}[dir=rtl].sc-ion-picker-md-h,[dir=rtl] .sc-ion-picker-md-h{left:unset;right:unset;right:0}.overlay-hidden.sc-ion-picker-md-h{display:none}.picker-wrapper.sc-ion-picker-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-wrapper.sc-ion-picker-md{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.picker-toolbar.sc-ion-picker-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-md:active,.picker-button.sc-ion-picker-md:focus{outline:none}.picker-columns.sc-ion-picker-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;direction:ltr;overflow:hidden}.picker-above-highlight.sc-ion-picker-md,.picker-below-highlight.sc-ion-picker-md{display:none;pointer-events:none}.sc-ion-picker-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:1.1em;padding-right:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{padding-left:unset;padding-right:unset;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em}}.picker-columns.sc-ion-picker-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-md{left:0;top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}[dir=rtl].sc-ion-picker-md .picker-above-highlight.sc-ion-picker-md,[dir=rtl].sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}.picker-below-highlight.sc-ion-picker-md{left:0;top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}[dir=rtl].sc-ion-picker-md .picker-below-highlight.sc-ion-picker-md,[dir=rtl].sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}";
|
1042 |
|
1043 | const Picker = class {
|
1044 | constructor(hostRef) {
|
1045 | index.registerInstance(this, hostRef);
|
1046 | this.didPresent = index.createEvent(this, "ionPickerDidPresent", 7);
|
1047 | this.willPresent = index.createEvent(this, "ionPickerWillPresent", 7);
|
1048 | this.willDismiss = index.createEvent(this, "ionPickerWillDismiss", 7);
|
1049 | this.didDismiss = index.createEvent(this, "ionPickerDidDismiss", 7);
|
1050 | this.presented = false;
|
1051 | |
1052 |
|
1053 |
|
1054 | this.keyboardClose = true;
|
1055 | |
1056 |
|
1057 |
|
1058 | this.buttons = [];
|
1059 | |
1060 |
|
1061 |
|
1062 | this.columns = [];
|
1063 | |
1064 |
|
1065 |
|
1066 | this.duration = 0;
|
1067 | |
1068 |
|
1069 |
|
1070 | this.showBackdrop = true;
|
1071 | |
1072 |
|
1073 |
|
1074 | this.backdropDismiss = true;
|
1075 | |
1076 |
|
1077 |
|
1078 | this.animated = true;
|
1079 | this.onBackdropTap = () => {
|
1080 | this.dismiss(undefined, overlays.BACKDROP);
|
1081 | };
|
1082 | this.dispatchCancelHandler = (ev) => {
|
1083 | const role = ev.detail.role;
|
1084 | if (overlays.isCancel(role)) {
|
1085 | const cancelButton = this.buttons.find(b => b.role === 'cancel');
|
1086 | this.callButtonHandler(cancelButton);
|
1087 | }
|
1088 | };
|
1089 | }
|
1090 | connectedCallback() {
|
1091 | overlays.prepareOverlay(this.el);
|
1092 | }
|
1093 | |
1094 |
|
1095 |
|
1096 | async present() {
|
1097 | await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
|
1098 | if (this.duration > 0) {
|
1099 | this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
1100 | }
|
1101 | }
|
1102 | |
1103 |
|
1104 |
|
1105 |
|
1106 |
|
1107 |
|
1108 |
|
1109 |
|
1110 |
|
1111 | dismiss(data, role) {
|
1112 | if (this.durationTimeout) {
|
1113 | clearTimeout(this.durationTimeout);
|
1114 | }
|
1115 | return overlays.dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
|
1116 | }
|
1117 | |
1118 |
|
1119 |
|
1120 | onDidDismiss() {
|
1121 | return overlays.eventMethod(this.el, 'ionPickerDidDismiss');
|
1122 | }
|
1123 | |
1124 |
|
1125 |
|
1126 | onWillDismiss() {
|
1127 | return overlays.eventMethod(this.el, 'ionPickerWillDismiss');
|
1128 | }
|
1129 | |
1130 |
|
1131 |
|
1132 |
|
1133 |
|
1134 | getColumn(name) {
|
1135 | return Promise.resolve(this.columns.find(column => column.name === name));
|
1136 | }
|
1137 | async buttonClick(button) {
|
1138 | const role = button.role;
|
1139 | if (overlays.isCancel(role)) {
|
1140 | return this.dismiss(undefined, role);
|
1141 | }
|
1142 | const shouldDismiss = await this.callButtonHandler(button);
|
1143 | if (shouldDismiss) {
|
1144 | return this.dismiss(this.getSelected(), button.role);
|
1145 | }
|
1146 | return Promise.resolve();
|
1147 | }
|
1148 | async callButtonHandler(button) {
|
1149 | if (button) {
|
1150 |
|
1151 |
|
1152 | const rtn = await overlays.safeCall(button.handler, this.getSelected());
|
1153 | if (rtn === false) {
|
1154 |
|
1155 | return false;
|
1156 | }
|
1157 | }
|
1158 | return true;
|
1159 | }
|
1160 | getSelected() {
|
1161 | const selected = {};
|
1162 | this.columns.forEach((col, index) => {
|
1163 | const selectedColumn = col.selectedIndex !== undefined
|
1164 | ? col.options[col.selectedIndex]
|
1165 | : undefined;
|
1166 | selected[col.name] = {
|
1167 | text: selectedColumn ? selectedColumn.text : undefined,
|
1168 | value: selectedColumn ? selectedColumn.value : undefined,
|
1169 | columnIndex: index
|
1170 | };
|
1171 | });
|
1172 | return selected;
|
1173 | }
|
1174 | render() {
|
1175 | const mode = ionicGlobal.getIonMode(this);
|
1176 | return (index.h(index.Host, { "aria-modal": "true", tabindex: "-1", class: Object.assign({ [mode]: true,
|
1177 |
|
1178 | [`picker-${mode}`]: true }, theme.getClassMap(this.cssClass)), style: {
|
1179 | zIndex: `${20000 + this.overlayIndex}`
|
1180 | }, onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }, index.h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { tabindex: "0" }), index.h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { class: "picker-toolbar" }, this.buttons.map(b => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { class: "picker-columns" }, index.h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map(c => index.h("ion-picker-column", { col: c })), index.h("div", { class: "picker-below-highlight" }))), index.h("div", { tabindex: "0" })));
|
1181 | }
|
1182 | get el() { return index.getElement(this); }
|
1183 | };
|
1184 | const buttonWrapperClass = (button) => {
|
1185 | return {
|
1186 | [`picker-toolbar-${button.role}`]: button.role !== undefined,
|
1187 | 'picker-toolbar-button': true
|
1188 | };
|
1189 | };
|
1190 | const buttonClass = (button) => {
|
1191 | return Object.assign({ 'picker-button': true, 'ion-activatable': true }, theme.getClassMap(button.cssClass));
|
1192 | };
|
1193 | Picker.style = {
|
1194 | ios: pickerIosCss,
|
1195 | md: pickerMdCss
|
1196 | };
|
1197 |
|
1198 | const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{left:0;top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{padding-left:4px;padding-right:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-col{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}";
|
1199 |
|
1200 | const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{left:0;top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.picker-col{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
|
1201 |
|
1202 | const PickerColumnCmp = class {
|
1203 | constructor(hostRef) {
|
1204 | index.registerInstance(this, hostRef);
|
1205 | this.ionPickerColChange = index.createEvent(this, "ionPickerColChange", 7);
|
1206 | this.optHeight = 0;
|
1207 | this.rotateFactor = 0;
|
1208 | this.scaleFactor = 1;
|
1209 | this.velocity = 0;
|
1210 | this.y = 0;
|
1211 | this.noAnimate = true;
|
1212 | }
|
1213 | colChanged() {
|
1214 | this.refresh();
|
1215 | }
|
1216 | async connectedCallback() {
|
1217 | let pickerRotateFactor = 0;
|
1218 | let pickerScaleFactor = 0.81;
|
1219 | const mode = ionicGlobal.getIonMode(this);
|
1220 | if (mode === 'ios') {
|
1221 | pickerRotateFactor = -0.46;
|
1222 | pickerScaleFactor = 1;
|
1223 | }
|
1224 | this.rotateFactor = pickerRotateFactor;
|
1225 | this.scaleFactor = pickerScaleFactor;
|
1226 | this.gesture = (await Promise.resolve().then(function () { return require('./index-a1dd5c93.js'); })).createGesture({
|
1227 | el: this.el,
|
1228 | gestureName: 'picker-swipe',
|
1229 | gesturePriority: 100,
|
1230 | threshold: 0,
|
1231 | passive: false,
|
1232 | onStart: ev => this.onStart(ev),
|
1233 | onMove: ev => this.onMove(ev),
|
1234 | onEnd: ev => this.onEnd(ev),
|
1235 | });
|
1236 | this.gesture.enable();
|
1237 | this.tmrId = setTimeout(() => {
|
1238 | this.noAnimate = false;
|
1239 | this.refresh(true);
|
1240 | }, 250);
|
1241 | }
|
1242 | componentDidLoad() {
|
1243 | const colEl = this.optsEl;
|
1244 | if (colEl) {
|
1245 |
|
1246 |
|
1247 | this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
|
1248 | }
|
1249 | this.refresh();
|
1250 | }
|
1251 | disconnectedCallback() {
|
1252 | cancelAnimationFrame(this.rafId);
|
1253 | clearTimeout(this.tmrId);
|
1254 | if (this.gesture) {
|
1255 | this.gesture.destroy();
|
1256 | this.gesture = undefined;
|
1257 | }
|
1258 | }
|
1259 | emitColChange() {
|
1260 | this.ionPickerColChange.emit(this.col);
|
1261 | }
|
1262 | setSelected(selectedIndex, duration) {
|
1263 |
|
1264 |
|
1265 | const y = (selectedIndex > -1) ? -(selectedIndex * this.optHeight) : 0;
|
1266 | this.velocity = 0;
|
1267 |
|
1268 | cancelAnimationFrame(this.rafId);
|
1269 | this.update(y, duration, true);
|
1270 | this.emitColChange();
|
1271 | }
|
1272 | update(y, duration, saveY) {
|
1273 | if (!this.optsEl) {
|
1274 | return;
|
1275 | }
|
1276 |
|
1277 | let translateY = 0;
|
1278 | let translateZ = 0;
|
1279 | const { col, rotateFactor } = this;
|
1280 | const selectedIndex = col.selectedIndex = this.indexForY(-y);
|
1281 | const durationStr = (duration === 0) ? '' : duration + 'ms';
|
1282 | const scaleStr = `scale(${this.scaleFactor})`;
|
1283 | const children = this.optsEl.children;
|
1284 | for (let i = 0; i < children.length; i++) {
|
1285 | const button = children[i];
|
1286 | const opt = col.options[i];
|
1287 | const optOffset = (i * this.optHeight) + y;
|
1288 | let transform = '';
|
1289 | if (rotateFactor !== 0) {
|
1290 | const rotateX = optOffset * rotateFactor;
|
1291 | if (Math.abs(rotateX) <= 90) {
|
1292 | translateY = 0;
|
1293 | translateZ = 90;
|
1294 | transform = `rotateX(${rotateX}deg) `;
|
1295 | }
|
1296 | else {
|
1297 | translateY = -9999;
|
1298 | }
|
1299 | }
|
1300 | else {
|
1301 | translateZ = 0;
|
1302 | translateY = optOffset;
|
1303 | }
|
1304 | const selected = selectedIndex === i;
|
1305 | transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
|
1306 | if (this.scaleFactor !== 1 && !selected) {
|
1307 | transform += scaleStr;
|
1308 | }
|
1309 |
|
1310 | if (this.noAnimate) {
|
1311 | opt.duration = 0;
|
1312 | button.style.transitionDuration = '';
|
1313 | }
|
1314 | else if (duration !== opt.duration) {
|
1315 | opt.duration = duration;
|
1316 | button.style.transitionDuration = durationStr;
|
1317 | }
|
1318 |
|
1319 | if (transform !== opt.transform) {
|
1320 | opt.transform = transform;
|
1321 | button.style.transform = transform;
|
1322 | }
|
1323 |
|
1324 | if (selected !== opt.selected) {
|
1325 | opt.selected = selected;
|
1326 | if (selected) {
|
1327 | button.classList.add(PICKER_OPT_SELECTED);
|
1328 | }
|
1329 | else {
|
1330 | button.classList.remove(PICKER_OPT_SELECTED);
|
1331 | }
|
1332 | }
|
1333 | }
|
1334 | this.col.prevSelected = selectedIndex;
|
1335 | if (saveY) {
|
1336 | this.y = y;
|
1337 | }
|
1338 | if (this.lastIndex !== selectedIndex) {
|
1339 |
|
1340 | haptic.hapticSelectionChanged();
|
1341 | this.lastIndex = selectedIndex;
|
1342 | }
|
1343 | }
|
1344 | decelerate() {
|
1345 | if (this.velocity !== 0) {
|
1346 |
|
1347 | this.velocity *= DECELERATION_FRICTION;
|
1348 |
|
1349 | this.velocity = (this.velocity > 0)
|
1350 | ? Math.max(this.velocity, 1)
|
1351 | : Math.min(this.velocity, -1);
|
1352 | let y = this.y + this.velocity;
|
1353 | if (y > this.minY) {
|
1354 |
|
1355 | y = this.minY;
|
1356 | this.velocity = 0;
|
1357 | }
|
1358 | else if (y < this.maxY) {
|
1359 |
|
1360 | y = this.maxY;
|
1361 | this.velocity = 0;
|
1362 | }
|
1363 | this.update(y, 0, true);
|
1364 | const notLockedIn = (Math.round(y) % this.optHeight !== 0) || (Math.abs(this.velocity) > 1);
|
1365 | if (notLockedIn) {
|
1366 |
|
1367 | this.rafId = requestAnimationFrame(() => this.decelerate());
|
1368 | }
|
1369 | else {
|
1370 | this.velocity = 0;
|
1371 | this.emitColChange();
|
1372 | haptic.hapticSelectionEnd();
|
1373 | }
|
1374 | }
|
1375 | else if (this.y % this.optHeight !== 0) {
|
1376 |
|
1377 | const currentPos = Math.abs(this.y % this.optHeight);
|
1378 |
|
1379 | this.velocity = (currentPos > (this.optHeight / 2) ? 1 : -1);
|
1380 | this.decelerate();
|
1381 | }
|
1382 | }
|
1383 | indexForY(y) {
|
1384 | return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
|
1385 | }
|
1386 |
|
1387 | onStart(detail) {
|
1388 |
|
1389 |
|
1390 |
|
1391 | if (detail.event.cancelable) {
|
1392 | detail.event.preventDefault();
|
1393 | }
|
1394 | detail.event.stopPropagation();
|
1395 | haptic.hapticSelectionStart();
|
1396 |
|
1397 | cancelAnimationFrame(this.rafId);
|
1398 | const options = this.col.options;
|
1399 | let minY = (options.length - 1);
|
1400 | let maxY = 0;
|
1401 | for (let i = 0; i < options.length; i++) {
|
1402 | if (!options[i].disabled) {
|
1403 | minY = Math.min(minY, i);
|
1404 | maxY = Math.max(maxY, i);
|
1405 | }
|
1406 | }
|
1407 | this.minY = -(minY * this.optHeight);
|
1408 | this.maxY = -(maxY * this.optHeight);
|
1409 | }
|
1410 | onMove(detail) {
|
1411 | if (detail.event.cancelable) {
|
1412 | detail.event.preventDefault();
|
1413 | }
|
1414 | detail.event.stopPropagation();
|
1415 |
|
1416 | let y = this.y + detail.deltaY;
|
1417 | if (y > this.minY) {
|
1418 |
|
1419 | y = Math.pow(y, 0.8);
|
1420 | this.bounceFrom = y;
|
1421 | }
|
1422 | else if (y < this.maxY) {
|
1423 |
|
1424 | y += Math.pow(this.maxY - y, 0.9);
|
1425 | this.bounceFrom = y;
|
1426 | }
|
1427 | else {
|
1428 | this.bounceFrom = 0;
|
1429 | }
|
1430 | this.update(y, 0, false);
|
1431 | }
|
1432 | onEnd(detail) {
|
1433 | if (this.bounceFrom > 0) {
|
1434 |
|
1435 | this.update(this.minY, 100, true);
|
1436 | this.emitColChange();
|
1437 | return;
|
1438 | }
|
1439 | else if (this.bounceFrom < 0) {
|
1440 |
|
1441 | this.update(this.maxY, 100, true);
|
1442 | this.emitColChange();
|
1443 | return;
|
1444 | }
|
1445 | this.velocity = helpers.clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
|
1446 | if (this.velocity === 0 && detail.deltaY === 0) {
|
1447 | const opt = detail.event.target.closest('.picker-opt');
|
1448 | if (opt && opt.hasAttribute('opt-index')) {
|
1449 | this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
|
1450 | }
|
1451 | }
|
1452 | else {
|
1453 | this.y += detail.deltaY;
|
1454 | if (Math.abs(detail.velocityY) < 0.05) {
|
1455 | const isScrollingUp = detail.deltaY > 0;
|
1456 | const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
|
1457 | if (isScrollingUp && optHeightFraction > 0.5) {
|
1458 | this.velocity = Math.abs(this.velocity) * -1;
|
1459 | }
|
1460 | else if (!isScrollingUp && optHeightFraction <= 0.5) {
|
1461 | this.velocity = Math.abs(this.velocity);
|
1462 | }
|
1463 | }
|
1464 | this.decelerate();
|
1465 | }
|
1466 | }
|
1467 | refresh(forceRefresh) {
|
1468 | let min = this.col.options.length - 1;
|
1469 | let max = 0;
|
1470 | const options = this.col.options;
|
1471 | for (let i = 0; i < options.length; i++) {
|
1472 | if (!options[i].disabled) {
|
1473 | min = Math.min(min, i);
|
1474 | max = Math.max(max, i);
|
1475 | }
|
1476 | }
|
1477 | |
1478 |
|
1479 |
|
1480 |
|
1481 |
|
1482 |
|
1483 |
|
1484 | if (this.velocity !== 0) {
|
1485 | return;
|
1486 | }
|
1487 | const selectedIndex = helpers.clamp(min, this.col.selectedIndex || 0, max);
|
1488 | if (this.col.prevSelected !== selectedIndex || forceRefresh) {
|
1489 | const y = (selectedIndex * this.optHeight) * -1;
|
1490 | this.velocity = 0;
|
1491 | this.update(y, TRANSITION_DURATION, true);
|
1492 | }
|
1493 | }
|
1494 | render() {
|
1495 | const col = this.col;
|
1496 | const Button = 'button';
|
1497 | const mode = ionicGlobal.getIonMode(this);
|
1498 | return (index.h(index.Host, { class: {
|
1499 | [mode]: true,
|
1500 | 'picker-col': true,
|
1501 | 'picker-opts-left': this.col.align === 'left',
|
1502 | 'picker-opts-right': this.col.align === 'right'
|
1503 | }, style: {
|
1504 | 'max-width': this.col.columnWidth
|
1505 | } }, col.prefix && (index.h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index.h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: el => this.optsEl = el }, col.options.map((o, index$1) => index.h(Button, { type: "button", class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index$1 }, o.text))), col.suffix && (index.h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
1506 | }
|
1507 | get el() { return index.getElement(this); }
|
1508 | static get watchers() { return {
|
1509 | "col": ["colChanged"]
|
1510 | }; }
|
1511 | };
|
1512 | const PICKER_OPT_SELECTED = 'picker-opt-selected';
|
1513 | const DECELERATION_FRICTION = 0.97;
|
1514 | const MAX_PICKER_SPEED = 90;
|
1515 | const TRANSITION_DURATION = 150;
|
1516 | PickerColumnCmp.style = {
|
1517 | ios: pickerColumnIosCss,
|
1518 | md: pickerColumnMdCss
|
1519 | };
|
1520 |
|
1521 | exports.ion_datetime = Datetime;
|
1522 | exports.ion_picker = Picker;
|
1523 | exports.ion_picker_column = PickerColumnCmp;
|