(self["webpackChunkapp"] = self["webpackChunkapp"] || []).push([[9689],{ /***/ 52037: /*!************************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/data-caf38df0.js ***! \************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "A": () => (/* binding */ getDayColumnData), /* harmony export */ "B": () => (/* binding */ getYearColumnData), /* harmony export */ "C": () => (/* binding */ isMonthFirstLocale), /* harmony export */ "D": () => (/* binding */ getTimeColumnsData), /* harmony export */ "E": () => (/* binding */ isLocaleDayPeriodRTL), /* harmony export */ "F": () => (/* binding */ getDaysOfWeek), /* harmony export */ "G": () => (/* binding */ getMonthAndYear), /* harmony export */ "H": () => (/* binding */ getDaysOfMonth), /* harmony export */ "I": () => (/* binding */ generateMonths), /* harmony export */ "J": () => (/* binding */ is24Hour), /* harmony export */ "K": () => (/* binding */ getLocalizedTime), /* harmony export */ "L": () => (/* binding */ getMonthAndDay), /* harmony export */ "M": () => (/* binding */ formatValue), /* harmony export */ "N": () => (/* binding */ getNextYear), /* harmony export */ "O": () => (/* binding */ getPreviousYear), /* harmony export */ "P": () => (/* binding */ clampDate), /* harmony export */ "Q": () => (/* binding */ parseAmPm), /* harmony export */ "R": () => (/* binding */ calculateHourFromAMPM), /* harmony export */ "S": () => (/* binding */ getLocalizedDateTime), /* harmony export */ "T": () => (/* binding */ getMonthDayAndYear), /* harmony export */ "a": () => (/* binding */ getDay), /* harmony export */ "b": () => (/* binding */ isAfter), /* harmony export */ "c": () => (/* binding */ isSameDay), /* harmony export */ "d": () => (/* binding */ getPreviousMonth), /* harmony export */ "e": () => (/* binding */ getNextMonth), /* harmony export */ "f": () => (/* binding */ getPartsFromCalendarDay), /* harmony export */ "g": () => (/* binding */ generateDayAriaLabel), /* harmony export */ "h": () => (/* binding */ getEndOfWeek), /* harmony export */ "i": () => (/* binding */ isBefore), /* harmony export */ "j": () => (/* binding */ getStartOfWeek), /* harmony export */ "k": () => (/* binding */ getPreviousDay), /* harmony export */ "l": () => (/* binding */ getNextDay), /* harmony export */ "m": () => (/* binding */ getPreviousWeek), /* harmony export */ "n": () => (/* binding */ getNextWeek), /* harmony export */ "o": () => (/* binding */ parseMaxParts), /* harmony export */ "p": () => (/* binding */ parseMinParts), /* harmony export */ "q": () => (/* binding */ parseDate), /* harmony export */ "r": () => (/* binding */ convertToArrayOfNumbers), /* harmony export */ "s": () => (/* binding */ convertDataToISO), /* harmony export */ "t": () => (/* binding */ getToday), /* harmony export */ "u": () => (/* binding */ getClosestValidDate), /* harmony export */ "v": () => (/* binding */ validateParts), /* harmony export */ "w": () => (/* binding */ warnIfValueOutOfBounds), /* harmony export */ "x": () => (/* binding */ getNumDaysInMonth), /* harmony export */ "y": () => (/* binding */ getCombinedDateColumnData), /* harmony export */ "z": () => (/* binding */ getMonthColumnData) /* harmony export */ }); /* harmony import */ var _index_c4b11676_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index-c4b11676.js */ 99273); /*! * (C) Ionic http://ionicframework.com - MIT License */ /** * Returns true if the selected day is equal to the reference day */ const isSameDay = (baseParts, compareParts) => { return baseParts.month === compareParts.month && baseParts.day === compareParts.day && baseParts.year === compareParts.year; }; /** * Returns true is the selected day is before the reference day. */ const isBefore = (baseParts, compareParts) => { return !!(baseParts.year < compareParts.year || baseParts.year === compareParts.year && baseParts.month < compareParts.month || baseParts.year === compareParts.year && baseParts.month === compareParts.month && baseParts.day !== null && baseParts.day < compareParts.day); }; /** * Returns true is the selected day is after the reference day. */ const isAfter = (baseParts, compareParts) => { return !!(baseParts.year > compareParts.year || baseParts.year === compareParts.year && baseParts.month > compareParts.month || baseParts.year === compareParts.year && baseParts.month === compareParts.month && baseParts.day !== null && baseParts.day > compareParts.day); }; const warnIfValueOutOfBounds = (value, min, max) => { const valueArray = Array.isArray(value) ? value : [value]; for (const val of valueArray) { if (min !== undefined && isBefore(val, min) || max !== undefined && isAfter(val, max)) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_0__.p)('The value provided to ion-datetime is out of bounds.\n\n' + `Min: ${JSON.stringify(min)}\n` + `Max: ${JSON.stringify(max)}\n` + `Value: ${JSON.stringify(value)}`); break; } } }; /** * Determines if given year is a * leap year. Returns `true` if year * is a leap year. Returns `false` * otherwise. */ const isLeapYear = year => { return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0; }; const is24Hour = (locale, hourCycle) => { /** * If developer has explicitly enabled h23 time * then return early and do not look at the system default. */ if (hourCycle !== undefined) { return hourCycle === 'h23'; } /** * If hourCycle was not specified, check the locale * that is set on the user's device. We first check the * Intl.DateTimeFormat hourCycle option as developers can encode this * option into the locale string. Example: `en-US-u-hc-h23` */ const formatted = new Intl.DateTimeFormat(locale, { hour: 'numeric' }); const options = formatted.resolvedOptions(); if (options.hourCycle !== undefined) { return options.hourCycle === 'h23'; } /** * If hourCycle is not specified (either through lack * of browser support or locale information) then fall * back to this slower hourCycle check. */ const date = new Date('5/18/2021 00:00'); const parts = formatted.formatToParts(date); const hour = parts.find(p => p.type === 'hour'); if (!hour) { throw new Error('Hour value not found from DateTimeFormat'); } return hour.value === '00'; }; /** * Given a date object, returns the number * of days in that month. * Month value begin at 1, not 0. * i.e. January = month 1. */ const getNumDaysInMonth = (month, year) => { return month === 4 || month === 6 || month === 9 || month === 11 ? 30 : month === 2 ? isLeapYear(year) ? 29 : 28 : 31; }; /** * Certain locales display month then year while * others display year then month. * We can use Intl.DateTimeFormat to determine * the ordering for each locale. * The formatOptions param can be used to customize * which pieces of a date to compare against the month * with. For example, some locales render dd/mm/yyyy * while others render mm/dd/yyyy. This function can be * used for variations of the same "month first" check. */ const isMonthFirstLocale = (locale, formatOptions = { month: 'numeric', year: 'numeric' }) => { /** * By setting month and year we guarantee that only * month, year, and literal (slashes '/', for example) * values are included in the formatToParts results. * * The ordering of the parts will be determined by * the locale. So if the month is the first value, * then we know month should be shown first. If the * year is the first value, then we know year should be shown first. * * This ordering can be controlled by customizing the locale property. */ const parts = new Intl.DateTimeFormat(locale, formatOptions).formatToParts(new Date()); return parts[0].type === 'month'; }; /** * Determines if the given locale formats the day period (am/pm) to the * left or right of the hour. * @param locale The locale to check. * @returns `true` if the locale formats the day period to the left of the hour. */ const isLocaleDayPeriodRTL = locale => { const parts = new Intl.DateTimeFormat(locale, { hour: 'numeric' }).formatToParts(new Date()); return parts[0].type === 'dayPeriod'; }; const ISO_8601_REGEXP = // eslint-disable-next-line no-useless-escape /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/; // eslint-disable-next-line no-useless-escape const TIME_REGEXP = /^((\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/; /** * Use to convert a string of comma separated numbers or * an array of numbers, and clean up any user input */ const convertToArrayOfNumbers = input => { if (input === undefined) { return; } let processedInput = input; if (typeof input === 'string') { // convert the string to an array of strings // auto remove any whitespace and [] characters processedInput = input.replace(/\[|\]|\s/g, '').split(','); } let values; if (Array.isArray(processedInput)) { // ensure each value is an actual number in the returned array values = processedInput.map(num => parseInt(num, 10)).filter(isFinite); } else { values = [processedInput]; } return values; }; /** * Extracts date information * from a .calendar-day element * into DatetimeParts. */ const getPartsFromCalendarDay = el => { return { month: parseInt(el.getAttribute('data-month'), 10), day: parseInt(el.getAttribute('data-day'), 10), year: parseInt(el.getAttribute('data-year'), 10), dayOfWeek: parseInt(el.getAttribute('data-day-of-week'), 10) }; }; function parseDate(val) { if (Array.isArray(val)) { return val.map(valStr => parseDate(valStr)); } // manually parse IS0 cuz Date.parse cannot be trusted // ISO 8601 format: 1994-12-15T13:47:20Z let parse = null; if (val != null && val !== '') { // try parsing for just time first, HH:MM parse = TIME_REGEXP.exec(val); if (parse) { // adjust the array so it fits nicely with the datetime parse parse.unshift(undefined, undefined); parse[2] = parse[3] = undefined; } else { // try parsing for full ISO datetime parse = ISO_8601_REGEXP.exec(val); } } if (parse === null) { // wasn't able to parse the ISO datetime return undefined; } // ensure all the parse values exist with at least 0 for (let i = 1; i < 8; i++) { parse[i] = parse[i] !== undefined ? parseInt(parse[i], 10) : undefined; } let tzOffset = 0; if (parse[9] && parse[10]) { // hours tzOffset = parseInt(parse[10], 10) * 60; if (parse[11]) { // minutes tzOffset += parseInt(parse[11], 10); } if (parse[9] === '-') { // + or - tzOffset *= -1; } } // can also get second and millisecond from parse[6] and parse[7] if needed return { year: parse[1], month: parse[2], day: parse[3], hour: parse[4], minute: parse[5], tzOffset, ampm: parse[4] < 12 ? 'am' : 'pm' }; } const clampDate = (dateParts, minParts, maxParts) => { if (minParts && isBefore(dateParts, minParts)) { return minParts; } else if (maxParts && isAfter(dateParts, maxParts)) { return maxParts; } return dateParts; }; /** * Parses an hour and returns if the value is in the morning (am) or afternoon (pm). * @param hour The hour to format, should be 0-23 * @returns `pm` if the hour is greater than or equal to 12, `am` if less than 12. */ const parseAmPm = hour => { return hour >= 12 ? 'pm' : 'am'; }; /** * Takes a max date string and creates a DatetimeParts * object, filling in any missing information. * For example, max="2012" would fill in the missing * month, day, hour, and minute information. */ const parseMaxParts = (max, todayParts) => { const { month, day, year, hour, minute } = parseDate(max); /** * When passing in `max` or `min`, developers * can pass in any ISO-8601 string. This means * that not all of the date/time fields are defined. * For example, passing max="2012" is valid even though * there is no month, day, hour, or minute data. * However, all of this data is required when clamping the date * so that the correct initial value can be selected. As a result, * we need to fill in any omitted data with the min or max values. */ const yearValue = year !== null && year !== void 0 ? year : todayParts.year; const monthValue = month !== null && month !== void 0 ? month : 12; return { month: monthValue, day: day !== null && day !== void 0 ? day : getNumDaysInMonth(monthValue, yearValue), /** * Passing in "HH:mm" is a valid ISO-8601 * string, so we just default to the current year * in this case. */ year: yearValue, hour: hour !== null && hour !== void 0 ? hour : 23, minute: minute !== null && minute !== void 0 ? minute : 59 }; }; /** * Takes a min date string and creates a DatetimeParts * object, filling in any missing information. * For example, min="2012" would fill in the missing * month, day, hour, and minute information. */ const parseMinParts = (min, todayParts) => { const { month, day, year, hour, minute } = parseDate(min); /** * When passing in `max` or `min`, developers * can pass in any ISO-8601 string. This means * that not all of the date/time fields are defined. * For example, passing max="2012" is valid even though * there is no month, day, hour, or minute data. * However, all of this data is required when clamping the date * so that the correct initial value can be selected. As a result, * we need to fill in any omitted data with the min or max values. */ return { month: month !== null && month !== void 0 ? month : 1, day: day !== null && day !== void 0 ? day : 1, /** * Passing in "HH:mm" is a valid ISO-8601 * string, so we just default to the current year * in this case. */ year: year !== null && year !== void 0 ? year : todayParts.year, hour: hour !== null && hour !== void 0 ? hour : 0, minute: minute !== null && minute !== void 0 ? minute : 0 }; }; const twoDigit = val => { return ('0' + (val !== undefined ? Math.abs(val) : '0')).slice(-2); }; const fourDigit = val => { return ('000' + (val !== undefined ? Math.abs(val) : '0')).slice(-4); }; function convertDataToISO(data) { if (Array.isArray(data)) { return data.map(parts => convertDataToISO(parts)); } // https://www.w3.org/TR/NOTE-datetime let rtn = ''; if (data.year !== undefined) { // YYYY rtn = fourDigit(data.year); if (data.month !== undefined) { // YYYY-MM rtn += '-' + twoDigit(data.month); if (data.day !== undefined) { // YYYY-MM-DD rtn += '-' + twoDigit(data.day); if (data.hour !== undefined) { // YYYY-MM-DDTHH:mm:SS rtn += `T${twoDigit(data.hour)}:${twoDigit(data.minute)}:00`; if (data.tzOffset === undefined) { // YYYY-MM-DDTHH:mm:SSZ rtn += 'Z'; } else { // YYYY-MM-DDTHH:mm:SS+/-HH:mm rtn += (data.tzOffset > 0 ? '+' : '-') + twoDigit(Math.floor(Math.abs(data.tzOffset / 60))) + ':' + twoDigit(data.tzOffset % 60); } } } } } else if (data.hour !== undefined) { // HH:mm rtn = twoDigit(data.hour) + ':' + twoDigit(data.minute); } return rtn; } /** * Converts an 12 hour value to 24 hours. */ const convert12HourTo24Hour = (hour, ampm) => { if (ampm === undefined) { return hour; } /** * If AM and 12am * then return 00:00. * Otherwise just return * the hour since it is * already in 24 hour format. */ if (ampm === 'am') { if (hour === 12) { return 0; } return hour; } /** * If PM and 12pm * just return 12:00 * since it is already * in 24 hour format. * Otherwise add 12 hours * to the time. */ if (hour === 12) { return 12; } return hour + 12; }; const getStartOfWeek = refParts => { const { dayOfWeek } = refParts; if (dayOfWeek === null || dayOfWeek === undefined) { throw new Error('No day of week provided'); } return subtractDays(refParts, dayOfWeek); }; const getEndOfWeek = refParts => { const { dayOfWeek } = refParts; if (dayOfWeek === null || dayOfWeek === undefined) { throw new Error('No day of week provided'); } return addDays(refParts, 6 - dayOfWeek); }; const getNextDay = refParts => { return addDays(refParts, 1); }; const getPreviousDay = refParts => { return subtractDays(refParts, 1); }; const getPreviousWeek = refParts => { return subtractDays(refParts, 7); }; const getNextWeek = refParts => { return addDays(refParts, 7); }; /** * Given datetime parts, subtract * numDays from the date. * Returns a new DatetimeParts object * Currently can only go backward at most 1 month. */ const subtractDays = (refParts, numDays) => { const { month, day, year } = refParts; if (day === null) { throw new Error('No day provided'); } const workingParts = { month, day, year }; workingParts.day = day - numDays; /** * If wrapping to previous month * update days and decrement month */ if (workingParts.day < 1) { workingParts.month -= 1; } /** * If moving to previous year, reset * month to December and decrement year */ if (workingParts.month < 1) { workingParts.month = 12; workingParts.year -= 1; } /** * Determine how many days are in the current * month */ if (workingParts.day < 1) { const daysInMonth = getNumDaysInMonth(workingParts.month, workingParts.year); /** * Take num days in month and add the * number of underflow days. This number will * be negative. * Example: 1 week before Jan 2, 2021 is * December 26, 2021 so: * 2 - 7 = -5 * 31 + (-5) = 26 */ workingParts.day = daysInMonth + workingParts.day; } return workingParts; }; /** * Given datetime parts, add * numDays to the date. * Returns a new DatetimeParts object * Currently can only go forward at most 1 month. */ const addDays = (refParts, numDays) => { const { month, day, year } = refParts; if (day === null) { throw new Error('No day provided'); } const workingParts = { month, day, year }; const daysInMonth = getNumDaysInMonth(month, year); workingParts.day = day + numDays; /** * If wrapping to next month * update days and increment month */ if (workingParts.day > daysInMonth) { workingParts.day -= daysInMonth; workingParts.month += 1; } /** * If moving to next year, reset * month to January and increment year */ if (workingParts.month > 12) { workingParts.month = 1; workingParts.year += 1; } return workingParts; }; /** * Given DatetimeParts, generate the previous month. */ const getPreviousMonth = refParts => { /** * If current month is January, wrap backwards * to December of the previous year. */ const month = refParts.month === 1 ? 12 : refParts.month - 1; const year = refParts.month === 1 ? refParts.year - 1 : refParts.year; const numDaysInMonth = getNumDaysInMonth(month, year); const day = numDaysInMonth < refParts.day ? numDaysInMonth : refParts.day; return { month, year, day }; }; /** * Given DatetimeParts, generate the next month. */ const getNextMonth = refParts => { /** * If current month is December, wrap forwards * to January of the next year. */ const month = refParts.month === 12 ? 1 : refParts.month + 1; const year = refParts.month === 12 ? refParts.year + 1 : refParts.year; const numDaysInMonth = getNumDaysInMonth(month, year); const day = numDaysInMonth < refParts.day ? numDaysInMonth : refParts.day; return { month, year, day }; }; const changeYear = (refParts, yearDelta) => { const month = refParts.month; const year = refParts.year + yearDelta; const numDaysInMonth = getNumDaysInMonth(month, year); const day = numDaysInMonth < refParts.day ? numDaysInMonth : refParts.day; return { month, year, day }; }; /** * Given DatetimeParts, generate the previous year. */ const getPreviousYear = refParts => { return changeYear(refParts, -1); }; /** * Given DatetimeParts, generate the next year. */ const getNextYear = refParts => { return changeYear(refParts, 1); }; /** * If PM, then internal value should * be converted to 24-hr time. * Does not apply when public * values are already 24-hr time. */ const getInternalHourValue = (hour, use24Hour, ampm) => { if (use24Hour) { return hour; } return convert12HourTo24Hour(hour, ampm); }; /** * Unless otherwise stated, all month values are * 1 indexed instead of the typical 0 index in JS Date. * Example: * January = Month 0 when using JS Date * January = Month 1 when using this datetime util */ /** * Given the current datetime parts and a new AM/PM value * calculate what the hour should be in 24-hour time format. * Used when toggling the AM/PM segment since we store our hours * in 24-hour time format internally. */ const calculateHourFromAMPM = (currentParts, newAMPM) => { const { ampm: currentAMPM, hour } = currentParts; let newHour = hour; /** * If going from AM --> PM, need to update the * */ if (currentAMPM === 'am' && newAMPM === 'pm') { newHour = convert12HourTo24Hour(newHour, 'pm'); /** * If going from PM --> AM */ } else if (currentAMPM === 'pm' && newAMPM === 'am') { newHour = Math.abs(newHour - 12); } return newHour; }; /** * Updates parts to ensure that month and day * values are valid. For days that do not exist, * the closest valid day is used. */ const validateParts = (parts, minParts, maxParts) => { const { month, day, year } = parts; const partsCopy = Object.assign({}, parts); const numDays = getNumDaysInMonth(month, year); /** * If the max number of days * is greater than the day we want * to set, update the DatetimeParts * day field to be the max days. */ if (day !== null && numDays < day) { partsCopy.day = numDays; } /** * If value is same day as min day, * make sure the time value is in bounds. */ if (minParts !== undefined && isSameDay(partsCopy, minParts)) { /** * If the hour is out of bounds, * update both the hour and minute. * This is done so that the new time * is closest to what the user selected. */ if (partsCopy.hour !== undefined && minParts.hour !== undefined) { if (partsCopy.hour < minParts.hour) { partsCopy.hour = minParts.hour; partsCopy.minute = minParts.minute; /** * If only the minute is out of bounds, * set it to the min minute. */ } else if (partsCopy.hour === minParts.hour && partsCopy.minute !== undefined && minParts.minute !== undefined && partsCopy.minute < minParts.minute) { partsCopy.minute = minParts.minute; } } } /** * If value is same day as max day, * make sure the time value is in bounds. */ if (maxParts !== undefined && isSameDay(parts, maxParts)) { /** * If the hour is out of bounds, * update both the hour and minute. * This is done so that the new time * is closest to what the user selected. */ if (partsCopy.hour !== undefined && maxParts.hour !== undefined) { if (partsCopy.hour > maxParts.hour) { partsCopy.hour = maxParts.hour; partsCopy.minute = maxParts.minute; /** * If only the minute is out of bounds, * set it to the max minute. */ } else if (partsCopy.hour === maxParts.hour && partsCopy.minute !== undefined && maxParts.minute !== undefined && partsCopy.minute > maxParts.minute) { partsCopy.minute = maxParts.minute; } } } return partsCopy; }; /** * Returns the closest date to refParts * that also meets the constraints of * the *Values params. * @param refParts The reference date * @param monthValues The allowed month values * @param dayValues The allowed day (of the month) values * @param yearValues The allowed year values * @param hourValues The allowed hour values * @param minuteValues The allowed minute values */ const getClosestValidDate = (refParts, monthValues, dayValues, yearValues, hourValues, minuteValues) => { const { hour, minute, day, month, year } = refParts; const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined }); if (monthValues !== undefined) { copyParts.month = findClosestValue(month, monthValues); } // Day is nullable but cannot be undefined if (day !== null && dayValues !== undefined) { copyParts.day = findClosestValue(day, dayValues); } if (yearValues !== undefined) { copyParts.year = findClosestValue(year, yearValues); } if (hour !== undefined && hourValues !== undefined) { copyParts.hour = findClosestValue(hour, hourValues); copyParts.ampm = parseAmPm(copyParts.hour); } if (minute !== undefined && minuteValues !== undefined) { copyParts.minute = findClosestValue(minute, minuteValues); } return copyParts; }; /** * Finds the value in "values" that is * numerically closest to "reference". * This function assumes that "values" is * already sorted in ascending order. * @param reference The reference number to use * when finding the closest value * @param values The allowed values that will be * searched to find the closest value to "reference" */ const findClosestValue = (reference, values) => { let closestValue = values[0]; let rank = Math.abs(closestValue - reference); for (let i = 1; i < values.length; i++) { const value = values[i]; /** * This code prioritizes the first * closest result. Given two values * with the same distance from reference, * this code will prioritize the smaller of * the two values. */ const valueRank = Math.abs(value - reference); if (valueRank < rank) { closestValue = value; rank = valueRank; } } return closestValue; }; const getFormattedDayPeriod = dayPeriod => { if (dayPeriod === undefined) { return ''; } return dayPeriod.toUpperCase(); }; const getLocalizedTime = (locale, refParts, use24Hour) => { const timeParts = { hour: refParts.hour, minute: refParts.minute }; if (timeParts.hour === undefined || timeParts.minute === undefined) { return 'Invalid Time'; } return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: 'numeric', timeZone: 'UTC', /** * We use hourCycle here instead of hour12 due to: * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2 */ hourCycle: use24Hour ? 'h23' : 'h12' }).format(new Date(convertDataToISO(Object.assign(Object.assign({ /** * JS uses a simplified ISO 8601 format which allows for * date-only formats and date-time formats, but not * time-only formats: https://tc39.es/ecma262/#sec-date-time-string-format * As a result, developers who only pass a time will get * an "Invalid Date" error. To account for this, we make sure that * year/day/month values are set when passing to new Date(). * The Intl.DateTimeFormat call above only uses the hour/minute * values, so passing these date values should have no impact * on the time output. */ year: 2023, day: 1, month: 1 }, timeParts), { // TODO: FW-1831 will remove the need to manually set the tzOffset to undefined tzOffset: undefined })))); }; /** * Adds padding to a time value so * that it is always 2 digits. */ const addTimePadding = value => { const valueToString = value.toString(); if (valueToString.length > 1) { return valueToString; } return `0${valueToString}`; }; /** * Formats 24 hour times so that * it always has 2 digits. For * 12 hour times it ensures that * hour 0 is formatted as '12'. */ const getFormattedHour = (hour, use24Hour) => { if (use24Hour) { return addTimePadding(hour); } /** * If using 12 hour * format, make sure hour * 0 is formatted as '12'. */ if (hour === 0) { return '12'; } return hour.toString(); }; /** * Generates an aria-label to be read by screen readers * given a local, a date, and whether or not that date is * today's date. */ const generateDayAriaLabel = (locale, today, refParts) => { if (refParts.day === null) { return null; } /** * MM/DD/YYYY will return midnight in the user's timezone. */ const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`); const labelString = new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(date); /** * If date is today, prepend "Today" so screen readers indicate * that the date is today. */ return today ? `Today, ${labelString}` : labelString; }; /** * Gets the day of the week, month, and day * Used for the header in MD mode. */ const getMonthAndDay = (locale, refParts) => { const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`); return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date); }; /** * Given a locale and a date object, * return a formatted string that includes * the month name and full year. * Example: May 2021 */ const getMonthAndYear = (locale, refParts) => { const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`); return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date); }; /** * Given a locale and a date object, * return a formatted string that includes * the short month, numeric day, and full year. * Example: Apr 22, 2021 */ const getMonthDayAndYear = (locale, refParts) => { return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' }); }; /** * Given a locale and a date object, * return a formatted string that includes * the numeric day. * Note: Some languages will add literal characters * to the end. This function removes those literals. * Example: 29 */ const getDay = (locale, refParts) => { return getLocalizedDateTimeParts(locale, refParts, { day: 'numeric' }).find(obj => obj.type === 'day').value; }; /** * Given a locale and a date object, * return a formatted string that includes * the numeric year. * Example: 2022 */ const getYear = (locale, refParts) => { return getLocalizedDateTime(locale, refParts, { year: 'numeric' }); }; const getNormalizedDate = refParts => { const timeString = refParts.hour !== undefined && refParts.minute !== undefined ? ` ${refParts.hour}:${refParts.minute}` : ''; return new Date(`${refParts.month}/${refParts.day}/${refParts.year}${timeString} GMT+0000`); }; /** * Given a locale, DatetimeParts, and options * format the DatetimeParts according to the options * and locale combination. This returns a string. If * you want an array of the individual pieces * that make up the localized date string, use * getLocalizedDateTimeParts. */ const getLocalizedDateTime = (locale, refParts, options) => { const date = getNormalizedDate(refParts); return getDateTimeFormat(locale, options).format(date); }; /** * Given a locale, DatetimeParts, and options * format the DatetimeParts according to the options * and locale combination. This returns an array of * each piece of the date. */ const getLocalizedDateTimeParts = (locale, refParts, options) => { const date = getNormalizedDate(refParts); return getDateTimeFormat(locale, options).formatToParts(date); }; /** * Wrapper function for Intl.DateTimeFormat. * Allows developers to apply an allowed format to DatetimeParts. * This function also has built in safeguards for older browser bugs * with Intl.DateTimeFormat. */ const getDateTimeFormat = (locale, options) => { return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, options), { timeZone: 'UTC' })); }; /** * Gets a localized version of "Today" * Falls back to "Today" in English for * browsers that do not support RelativeTimeFormat. */ const getTodayLabel = locale => { if ('RelativeTimeFormat' in Intl) { const label = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(0, 'day'); return label.charAt(0).toUpperCase() + label.slice(1); } else { return 'Today'; } }; /** * When calling toISOString(), the browser * will convert the date to UTC time by either adding * or subtracting the time zone offset. * To work around this, we need to either add * or subtract the time zone offset to the Date * object prior to calling toISOString(). * This allows us to get an ISO string * that is in the user's time zone. * * Example: * Time zone offset is 240 * Meaning: The browser needs to add 240 minutes * to the Date object to get UTC time. * What Ionic does: We subtract 240 minutes * from the Date object. The browser then adds * 240 minutes in toISOString(). The result * is a time that is in the user's time zone * and not UTC. * * Note: Some timezones include minute adjustments * such as 30 or 45 minutes. This is why we use setMinutes * instead of setHours. * Example: India Standard Time * Timezone offset: -330 = -5.5 hours. * * List of timezones with 30 and 45 minute timezones: * https://www.timeanddate.com/time/time-zones-interesting.html */ const removeDateTzOffset = date => { const tzOffset = date.getTimezoneOffset(); date.setMinutes(date.getMinutes() - tzOffset); return date; }; const DATE_AM = removeDateTzOffset(new Date('2022T01:00')); const DATE_PM = removeDateTzOffset(new Date('2022T13:00')); /** * Formats the locale's string representation of the day period (am/pm) for a given * ref parts day period. * * @param locale The locale to format the day period in. * @param value The date string, in ISO format. * @returns The localized day period (am/pm) representation of the given value. */ const getLocalizedDayPeriod = (locale, dayPeriod) => { const date = dayPeriod === 'am' ? DATE_AM : DATE_PM; const localizedDayPeriod = new Intl.DateTimeFormat(locale, { hour: 'numeric', timeZone: 'UTC' }).formatToParts(date).find(part => part.type === 'dayPeriod'); if (localizedDayPeriod) { return localizedDayPeriod.value; } return getFormattedDayPeriod(dayPeriod); }; /** * Formats the datetime's value to a string, for use in the native input. * * @param value The value to format, either an ISO string or an array thereof. */ const formatValue = value => { return Array.isArray(value) ? value.join(',') : value; }; /** * Returns the current date as * an ISO string in the user's * time zone. */ const getToday = () => { /** * ion-datetime intentionally does not * parse time zones/do automatic time zone * conversion when accepting user input. * However when we get today's date string, * we want it formatted relative to the user's * time zone. * * When calling toISOString(), the browser * will convert the date to UTC time by either adding * or subtracting the time zone offset. * To work around this, we need to either add * or subtract the time zone offset to the Date * object prior to calling toISOString(). * This allows us to get an ISO string * that is in the user's time zone. */ return removeDateTzOffset(new Date()).toISOString(); }; const minutes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59]; const hour12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]; /** * Given a locale and a mode, * return an array with formatted days * of the week. iOS should display days * such as "Mon" or "Tue". * MD should display days such as "M" * or "T". */ const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => { /** * Nov 1st, 2020 starts on a Sunday. * ion-datetime assumes weeks start on Sunday, * but is configurable via `firstDayOfWeek`. */ const weekdayFormat = mode === 'ios' ? 'short' : 'narrow'; const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat }); const startDate = new Date('11/01/2020'); const daysOfWeek = []; /** * For each day of the week, * get the day name. */ for (let i = firstDayOfWeek; i < firstDayOfWeek + 7; i++) { const currentDate = new Date(startDate); currentDate.setDate(currentDate.getDate() + i); daysOfWeek.push(intl.format(currentDate)); } return daysOfWeek; }; /** * Returns an array containing all of the * days in a month for a given year. Values are * aligned with a week calendar starting on * the firstDayOfWeek value (Sunday by default) * using null values. */ const getDaysOfMonth = (month, year, firstDayOfWeek) => { const numDays = getNumDaysInMonth(month, year); const firstOfMonth = new Date(`${month}/1/${year}`).getDay(); /** * To get the first day of the month aligned on the correct * day of the week, we need to determine how many "filler" days * to generate. These filler days as empty/disabled buttons * that fill the space of the days of the week before the first * of the month. * * There are two cases here: * * 1. If firstOfMonth = 4, firstDayOfWeek = 0 then the offset * is (4 - (0 + 1)) = 3. Since the offset loop goes from 0 to 3 inclusive, * this will generate 4 filler days (0, 1, 2, 3), and then day of week 4 will have * the first day of the month. * * 2. If firstOfMonth = 2, firstDayOfWeek = 4 then the offset * is (6 - (4 - 2)) = 4. Since the offset loop goes from 0 to 4 inclusive, * this will generate 5 filler days (0, 1, 2, 3, 4), and then day of week 5 will have * the first day of the month. */ const offset = firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth); let days = []; for (let i = 1; i <= numDays; i++) { days.push({ day: i, dayOfWeek: (offset + i) % 7 }); } for (let i = 0; i <= offset; i++) { days = [{ day: null, dayOfWeek: null }, ...days]; } return days; }; /** * Given a local, reference datetime parts and option * max/min bound datetime parts, calculate the acceptable * hour and minute values according to the bounds and locale. */ const generateTime = (refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => { const use24Hour = hourCycle === 'h23'; let processedHours = use24Hour ? hour23 : hour12; let processedMinutes = minutes; let isAMAllowed = true; let isPMAllowed = true; if (hourValues) { processedHours = processedHours.filter(hour => hourValues.includes(hour)); } if (minuteValues) { processedMinutes = processedMinutes.filter(minute => minuteValues.includes(minute)); } if (minParts) { /** * If ref day is the same as the * minimum allowed day, filter hour/minute * values according to min hour and minute. */ if (isSameDay(refParts, minParts)) { /** * Users may not always set the hour/minute for * min value (i.e. 2021-06-02) so we should allow * all hours/minutes in that case. */ if (minParts.hour !== undefined) { processedHours = processedHours.filter(hour => { const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour; return (use24Hour ? hour : convertedHour) >= minParts.hour; }); isAMAllowed = minParts.hour < 13; } if (minParts.minute !== undefined) { /** * The minimum minute range should not be enforced when * the hour is greater than the min hour. * * For example with a minimum range of 09:30, users * should be able to select 10:00-10:29 and beyond. */ let isPastMinHour = false; if (minParts.hour !== undefined && refParts.hour !== undefined) { if (refParts.hour > minParts.hour) { isPastMinHour = true; } } processedMinutes = processedMinutes.filter(minute => { if (isPastMinHour) { return true; } return minute >= minParts.minute; }); } /** * If ref day is before minimum * day do not render any hours/minute values */ } else if (isBefore(refParts, minParts)) { processedHours = []; processedMinutes = []; isAMAllowed = isPMAllowed = false; } } if (maxParts) { /** * If ref day is the same as the * maximum allowed day, filter hour/minute * values according to max hour and minute. */ if (isSameDay(refParts, maxParts)) { /** * Users may not always set the hour/minute for * max value (i.e. 2021-06-02) so we should allow * all hours/minutes in that case. */ if (maxParts.hour !== undefined) { processedHours = processedHours.filter(hour => { const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour; return (use24Hour ? hour : convertedHour) <= maxParts.hour; }); isPMAllowed = maxParts.hour >= 12; } if (maxParts.minute !== undefined && refParts.hour === maxParts.hour) { // The available minutes should only be filtered when the hour is the same as the max hour. // For example if the max hour is 10:30 and the current hour is 10:00, // users should be able to select 00-30 minutes. // If the current hour is 09:00, users should be able to select 00-60 minutes. processedMinutes = processedMinutes.filter(minute => minute <= maxParts.minute); } /** * If ref day is after minimum * day do not render any hours/minute values */ } else if (isAfter(refParts, maxParts)) { processedHours = []; processedMinutes = []; isAMAllowed = isPMAllowed = false; } } return { hours: processedHours, minutes: processedMinutes, am: isAMAllowed, pm: isPMAllowed }; }; /** * Given DatetimeParts, generate the previous, * current, and and next months. */ const generateMonths = refParts => { return [getPreviousMonth(refParts), { month: refParts.month, year: refParts.year, day: refParts.day }, getNextMonth(refParts)]; }; const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = { month: 'long' }) => { const { year } = refParts; const months = []; if (monthValues !== undefined) { let processedMonths = monthValues; if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.month) !== undefined) { processedMonths = processedMonths.filter(month => month <= maxParts.month); } if ((minParts === null || minParts === void 0 ? void 0 : minParts.month) !== undefined) { processedMonths = processedMonths.filter(month => month >= minParts.month); } processedMonths.forEach(processedMonth => { const date = new Date(`${processedMonth}/1/${year} GMT+0000`); const monthString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date); months.push({ text: monthString, value: processedMonth }); }); } else { const maxMonth = maxParts && maxParts.year === year ? maxParts.month : 12; const minMonth = minParts && minParts.year === year ? minParts.month : 1; for (let i = minMonth; i <= maxMonth; i++) { /** * * There is a bug on iOS 14 where * Intl.DateTimeFormat takes into account * the local timezone offset when formatting dates. * * Forcing the timezone to 'UTC' fixes the issue. However, * we should keep this workaround as it is safer. In the event * this breaks in another browser, we will not be impacted * because all dates will be interpreted in UTC. * * Example: * new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date('Sat Apr 01 2006 00:00:00 GMT-0400 (EDT)')) // "March" * new Intl.DateTimeFormat('en-US', { month: 'long', timeZone: 'UTC' }).format(new Date('Sat Apr 01 2006 00:00:00 GMT-0400 (EDT)')) // "April" * * In certain timezones, iOS 14 shows the wrong * date for .toUTCString(). To combat this, we * force all of the timezones to GMT+0000 (UTC). * * Example: * Time Zone: Central European Standard Time * new Date('1/1/1992').toUTCString() // "Tue, 31 Dec 1991 23:00:00 GMT" * new Date('1/1/1992 GMT+0000').toUTCString() // "Wed, 01 Jan 1992 00:00:00 GMT" */ const date = new Date(`${i}/1/${year} GMT+0000`); const monthString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date); months.push({ text: monthString, value: i }); } } return months; }; /** * Returns information regarding * selectable dates (i.e 1st, 2nd, 3rd, etc) * within a reference month. * @param locale The locale to format the date with * @param refParts The reference month/year to generate dates for * @param minParts The minimum bound on the date that can be returned * @param maxParts The maximum bound on the date that can be returned * @param dayValues The allowed date values * @returns Date data to be used in ion-picker-column-internal */ const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = { day: 'numeric' }) => { const { month, year } = refParts; const days = []; /** * If we have max/min bounds that in the same * month/year as the refParts, we should * use the define day as the max/min day. * Otherwise, fallback to the max/min days in a month. */ const numDaysInMonth = getNumDaysInMonth(month, year); const maxDay = (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== null && (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== undefined && maxParts.year === year && maxParts.month === month ? maxParts.day : numDaysInMonth; const minDay = (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== null && (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== undefined && minParts.year === year && minParts.month === month ? minParts.day : 1; if (dayValues !== undefined) { let processedDays = dayValues; processedDays = processedDays.filter(day => day >= minDay && day <= maxDay); processedDays.forEach(processedDay => { const date = new Date(`${month}/${processedDay}/${year} GMT+0000`); const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date); days.push({ text: dayString, value: processedDay }); }); } else { for (let i = minDay; i <= maxDay; i++) { const date = new Date(`${month}/${i}/${year} GMT+0000`); const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date); days.push({ text: dayString, value: i }); } } return days; }; const getYearColumnData = (locale, refParts, minParts, maxParts, yearValues) => { var _a, _b; let processedYears = []; if (yearValues !== undefined) { processedYears = yearValues; if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== undefined) { processedYears = processedYears.filter(year => year <= maxParts.year); } if ((minParts === null || minParts === void 0 ? void 0 : minParts.year) !== undefined) { processedYears = processedYears.filter(year => year >= minParts.year); } } else { const { year } = refParts; const maxYear = (_a = maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== null && _a !== void 0 ? _a : year; const minYear = (_b = minParts === null || minParts === void 0 ? void 0 : minParts.year) !== null && _b !== void 0 ? _b : year - 100; for (let i = maxYear; i >= minYear; i--) { processedYears.push(i); } } return processedYears.map(year => ({ text: getYear(locale, { year, month: refParts.month, day: refParts.day }), value: year })); }; /** * Given a starting date and an upper bound, * this functions returns an array of all * month objects in that range. */ const getAllMonthsInRange = (currentParts, maxParts) => { if (currentParts.month === maxParts.month && currentParts.year === maxParts.year) { return [currentParts]; } return [currentParts, ...getAllMonthsInRange(getNextMonth(currentParts), maxParts)]; }; /** * Creates and returns picker items * that represent the days in a month. * Example: "Thu, Jun 2" */ const getCombinedDateColumnData = (locale, todayParts, minParts, maxParts, dayValues, monthValues) => { let items = []; let parts = []; /** * Get all month objects from the min date * to the max date. Note: Do not use getMonthColumnData * as that function only generates dates within a * single year. */ let months = getAllMonthsInRange(minParts, maxParts); /** * Filter out any disallowed month values. */ if (monthValues) { months = months.filter(({ month }) => monthValues.includes(month)); } /** * Get all of the days in the month. * From there, generate an array where * each item has the month, date, and day * of work as the text. */ months.forEach(monthObject => { const referenceMonth = { month: monthObject.month, day: null, year: monthObject.year }; const monthDays = getDayColumnData(locale, referenceMonth, minParts, maxParts, dayValues, { month: 'short', day: 'numeric', weekday: 'short' }); const dateParts = []; const dateColumnItems = []; monthDays.forEach(dayObject => { const isToday = isSameDay(Object.assign(Object.assign({}, referenceMonth), { day: dayObject.value }), todayParts); /** * Today's date should read as "Today" (localized) * not the actual date string */ dateColumnItems.push({ text: isToday ? getTodayLabel(locale) : dayObject.text, value: `${referenceMonth.year}-${referenceMonth.month}-${dayObject.value}` }); /** * When selecting a date in the wheel picker * we need access to the raw datetime parts data. * The picker column only accepts values of * type string or number, so we need to return * two sets of data: A data set to be passed * to the picker column, and a data set to * be used to reference the raw data when * updating the picker column value. */ dateParts.push({ month: referenceMonth.month, year: referenceMonth.year, day: dayObject.value }); }); parts = [...parts, ...dateParts]; items = [...items, ...dateColumnItems]; }); return { parts, items }; }; const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues) => { const use24Hour = is24Hour(locale, hourCycle); const { hours, minutes, am, pm } = generateTime(refParts, use24Hour ? 'h23' : 'h12', minParts, maxParts, allowedHourValues, allowedMinuteValues); const hoursItems = hours.map(hour => { return { text: getFormattedHour(hour, use24Hour), value: getInternalHourValue(hour, use24Hour, refParts.ampm) }; }); const minutesItems = minutes.map(minute => { return { text: addTimePadding(minute), value: minute }; }); const dayPeriodItems = []; if (am && !use24Hour) { dayPeriodItems.push({ text: getLocalizedDayPeriod(locale, 'am'), value: 'am' }); } if (pm && !use24Hour) { dayPeriodItems.push({ text: getLocalizedDayPeriod(locale, 'pm'), value: 'pm' }); } return { minutesData: minutesItems, hoursData: hoursItems, dayPeriodData: dayPeriodItems }; }; /***/ }), /***/ 17481: /*!***********************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/dir-e8b767a8.js ***! \***********************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "i": () => (/* binding */ isRTL) /* harmony export */ }); /*! * (C) Ionic http://ionicframework.com - MIT License */ /** * Returns `true` if the document or host element * has a `dir` set to `rtl`. The host value will always * take priority over the root document value. */ const isRTL = hostEl => { if (hostEl) { if (hostEl.dir !== '') { return hostEl.dir.toLowerCase() === 'rtl'; } } return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl'; }; /***/ }), /***/ 69118: /*!*********************************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/focus-visible-bd02518b.js ***! \*********************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "startFocusVisible": () => (/* binding */ startFocusVisible) /* harmony export */ }); /*! * (C) Ionic http://ionicframework.com - MIT License */ const ION_FOCUSED = 'ion-focused'; const ION_FOCUSABLE = 'ion-focusable'; const FOCUS_KEYS = ['Tab', 'ArrowDown', 'Space', 'Escape', ' ', 'Shift', 'Enter', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Home', 'End']; const startFocusVisible = rootEl => { let currentFocus = []; let keyboardMode = true; const ref = rootEl ? rootEl.shadowRoot : document; const root = rootEl ? rootEl : document.body; const setFocus = elements => { currentFocus.forEach(el => el.classList.remove(ION_FOCUSED)); elements.forEach(el => el.classList.add(ION_FOCUSED)); currentFocus = elements; }; const pointerDown = () => { keyboardMode = false; setFocus([]); }; const onKeydown = ev => { keyboardMode = FOCUS_KEYS.includes(ev.key); if (!keyboardMode) { setFocus([]); } }; const onFocusin = ev => { if (keyboardMode && ev.composedPath !== undefined) { const toFocus = ev.composedPath().filter(el => { // TODO(FW-2832): type if (el.classList) { return el.classList.contains(ION_FOCUSABLE); } return false; }); setFocus(toFocus); } }; const onFocusout = () => { if (ref.activeElement === root) { setFocus([]); } }; ref.addEventListener('keydown', onKeydown); ref.addEventListener('focusin', onFocusin); ref.addEventListener('focusout', onFocusout); ref.addEventListener('touchstart', pointerDown); ref.addEventListener('mousedown', pointerDown); const destroy = () => { ref.removeEventListener('keydown', onKeydown); ref.removeEventListener('focusin', onFocusin); ref.removeEventListener('focusout', onFocusout); ref.removeEventListener('touchstart', pointerDown); ref.removeEventListener('mousedown', pointerDown); }; return { destroy, setFocus }; }; /***/ }), /***/ 12815: /*!**************************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/haptic-029a46f6.js ***! \**************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "a": () => (/* binding */ hapticSelectionStart), /* harmony export */ "b": () => (/* binding */ hapticSelectionChanged), /* harmony export */ "c": () => (/* binding */ hapticSelection), /* harmony export */ "d": () => (/* binding */ hapticImpact), /* harmony export */ "h": () => (/* binding */ hapticSelectionEnd) /* harmony export */ }); /*! * (C) Ionic http://ionicframework.com - MIT License */ const HapticEngine = { getEngine() { var _a; const win = window; return win.TapticEngine || ((_a = win.Capacitor) === null || _a === void 0 ? void 0 : _a.isPluginAvailable('Haptics')) && win.Capacitor.Plugins.Haptics; }, available() { var _a; const win = window; const engine = this.getEngine(); if (!engine) { return false; } /** * Developers can manually import the * Haptics plugin in their app which will cause * getEngine to return the Haptics engine. However, * the Haptics engine will throw an error if * used in a web browser that does not support * the Vibrate API. This check avoids that error * if the browser does not support the Vibrate API. */ if (((_a = win.Capacitor) === null || _a === void 0 ? void 0 : _a.getPlatform()) === 'web') { return typeof navigator !== 'undefined' && navigator.vibrate !== undefined; } return true; }, isCordova() { return !!window.TapticEngine; }, isCapacitor() { const win = window; return !!win.Capacitor; }, impact(options) { const engine = this.getEngine(); if (!engine) { return; } const style = this.isCapacitor() ? options.style.toUpperCase() : options.style; engine.impact({ style }); }, notification(options) { const engine = this.getEngine(); if (!engine) { return; } const style = this.isCapacitor() ? options.style.toUpperCase() : options.style; engine.notification({ style }); }, selection() { this.impact({ style: 'light' }); }, selectionStart() { const engine = this.getEngine(); if (!engine) { return; } if (this.isCapacitor()) { engine.selectionStart(); } else { engine.gestureSelectionStart(); } }, selectionChanged() { const engine = this.getEngine(); if (!engine) { return; } if (this.isCapacitor()) { engine.selectionChanged(); } else { engine.gestureSelectionChanged(); } }, selectionEnd() { const engine = this.getEngine(); if (!engine) { return; } if (this.isCapacitor()) { engine.selectionEnd(); } else { engine.gestureSelectionEnd(); } } }; /** * Check to see if the Haptic Plugin is available * @return Returns `true` or false if the plugin is available */ const hapticAvailable = () => { return HapticEngine.available(); }; /** * Trigger a selection changed haptic event. Good for one-time events * (not for gestures) */ const hapticSelection = () => { hapticAvailable() && HapticEngine.selection(); }; /** * Tell the haptic engine that a gesture for a selection change is starting. */ const hapticSelectionStart = () => { hapticAvailable() && HapticEngine.selectionStart(); }; /** * Tell the haptic engine that a selection changed during a gesture. */ const hapticSelectionChanged = () => { hapticAvailable() && HapticEngine.selectionChanged(); }; /** * Tell the haptic engine we are done with a gesture. This needs to be * called lest resources are not properly recycled. */ const hapticSelectionEnd = () => { hapticAvailable() && HapticEngine.selectionEnd(); }; /** * Use this to indicate success/failure/warning to the user. * options should be of the type `{ style: 'light' }` (or `medium`/`heavy`) */ const hapticImpact = options => { hapticAvailable() && HapticEngine.impact(options); }; /***/ }), /***/ 7309: /*!*************************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/index-2bcb741c.js ***! \*************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "a": () => (/* binding */ arrowBackSharp), /* harmony export */ "b": () => (/* binding */ closeCircle), /* harmony export */ "c": () => (/* binding */ chevronBack), /* harmony export */ "d": () => (/* binding */ closeSharp), /* harmony export */ "e": () => (/* binding */ searchSharp), /* harmony export */ "f": () => (/* binding */ checkmarkOutline), /* harmony export */ "g": () => (/* binding */ ellipseOutline), /* harmony export */ "h": () => (/* binding */ caretBackSharp), /* harmony export */ "i": () => (/* binding */ arrowDown), /* harmony export */ "j": () => (/* binding */ reorderThreeOutline), /* harmony export */ "k": () => (/* binding */ reorderTwoSharp), /* harmony export */ "l": () => (/* binding */ chevronDown), /* harmony export */ "m": () => (/* binding */ chevronForwardOutline), /* harmony export */ "n": () => (/* binding */ ellipsisHorizontal), /* harmony export */ "o": () => (/* binding */ chevronForward), /* harmony export */ "p": () => (/* binding */ caretUpSharp), /* harmony export */ "q": () => (/* binding */ caretDownSharp), /* harmony export */ "r": () => (/* binding */ removeOutline), /* harmony export */ "s": () => (/* binding */ searchOutline), /* harmony export */ "t": () => (/* binding */ close), /* harmony export */ "u": () => (/* binding */ menuOutline), /* harmony export */ "v": () => (/* binding */ menuSharp) /* harmony export */ }); /*! * (C) Ionic http://ionicframework.com - MIT License */ /* Ionicons v6.1.3, ES Modules */ const arrowBackSharp = "data:image/svg+xml;utf8,"; const arrowDown = "data:image/svg+xml;utf8,"; const caretBackSharp = "data:image/svg+xml;utf8,"; const caretDownSharp = "data:image/svg+xml;utf8,"; const caretUpSharp = "data:image/svg+xml;utf8,"; const checkmarkOutline = "data:image/svg+xml;utf8,"; const chevronBack = "data:image/svg+xml;utf8,"; const chevronDown = "data:image/svg+xml;utf8,"; const chevronForward = "data:image/svg+xml;utf8,"; const chevronForwardOutline = "data:image/svg+xml;utf8,"; const close = "data:image/svg+xml;utf8,"; const closeCircle = "data:image/svg+xml;utf8,"; const closeSharp = "data:image/svg+xml;utf8,"; const ellipseOutline = "data:image/svg+xml;utf8,"; const ellipsisHorizontal = "data:image/svg+xml;utf8,"; const menuOutline = "data:image/svg+xml;utf8,"; const menuSharp = "data:image/svg+xml;utf8,"; const removeOutline = "data:image/svg+xml;utf8,"; const reorderThreeOutline = "data:image/svg+xml;utf8,"; const reorderTwoSharp = "data:image/svg+xml;utf8,"; const searchOutline = "data:image/svg+xml;utf8,"; const searchSharp = "data:image/svg+xml;utf8,"; /***/ }), /***/ 99273: /*!*************************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/index-c4b11676.js ***! \*************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "a": () => (/* binding */ printRequiredElementError), /* harmony export */ "b": () => (/* binding */ printIonError), /* harmony export */ "p": () => (/* binding */ printIonWarning) /* harmony export */ }); /*! * (C) Ionic http://ionicframework.com - MIT License */ /** * Logs a warning to the console with an Ionic prefix * to indicate the library that is warning the developer. * * @param message - The string message to be logged to the console. */ const printIonWarning = (message, ...params) => { return console.warn(`[Ionic Warning]: ${message}`, ...params); }; /* * Logs an error to the console with an Ionic prefix * to indicate the library that is warning the developer. * * @param message - The string message to be logged to the console. * @param params - Additional arguments to supply to the console.error. */ const printIonError = (message, ...params) => { return console.error(`[Ionic Error]: ${message}`, ...params); }; /** * Prints an error informing developers that an implementation requires an element to be used * within a specific selector. * * @param el The web component element this is requiring the element. * @param targetSelectors The selector or selectors that were not found. */ const printRequiredElementError = (el, ...targetSelectors) => { return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`); }; /***/ }), /***/ 79689: /*!*******************************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/ion-datetime_3.entry.js ***! \*******************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "ion_datetime": () => (/* binding */ Datetime), /* harmony export */ "ion_picker": () => (/* binding */ Picker), /* harmony export */ "ion_picker_column": () => (/* binding */ PickerColumnCmp) /* harmony export */ }); /* harmony import */ var _Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 71670); /* harmony import */ var _index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./index-8e692445.js */ 91559); /* harmony import */ var _index_2bcb741c_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./index-2bcb741c.js */ 7309); /* harmony import */ var _ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ionic-global-c74e4951.js */ 95823); /* harmony import */ var _focus_visible_bd02518b_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./focus-visible-bd02518b.js */ 69118); /* harmony import */ var _helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./helpers-3b390e48.js */ 29259); /* harmony import */ var _index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./index-c4b11676.js */ 99273); /* harmony import */ var _dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./dir-e8b767a8.js */ 17481); /* harmony import */ var _theme_7670341c_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./theme-7670341c.js */ 50320); /* harmony import */ var _data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./data-caf38df0.js */ 52037); /* harmony import */ var _overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./overlays-58fa8e4d.js */ 6605); /* harmony import */ var _animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./animation-4ff3f603.js */ 15933); /* harmony import */ var _haptic_029a46f6_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./haptic-029a46f6.js */ 12815); /* harmony import */ var _hardware_back_button_490df115_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./hardware-back-button-490df115.js */ 70159); /* harmony import */ var _index_33ffec25_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./index-33ffec25.js */ 42286); /*! * (C) Ionic http://ionicframework.com - MIT License */ const isYearDisabled = (refYear, minParts, maxParts) => { if (minParts && minParts.year > refYear) { return true; } if (maxParts && maxParts.year < refYear) { return true; } return false; }; /** * Returns true if a given day should * not be interactive according to its value, * or the max/min dates. */ const isDayDisabled = (refParts, minParts, maxParts, dayValues) => { /** * If this is a filler date (i.e. padding) * then the date is disabled. */ if (refParts.day === null) { return true; } /** * If user passed in a list of acceptable day values * check to make sure that the date we are looking * at is in this array. */ if (dayValues !== undefined && !dayValues.includes(refParts.day)) { return true; } /** * Given a min date, perform the following * checks. If any of them are true, then the * day should be disabled: * 1. Is the current year < the min allowed year? * 2. Is the current year === min allowed year, * but the current month < the min allowed month? * 3. Is the current year === min allowed year, the * current month === min allow month, but the current * day < the min allowed day? */ if (minParts && (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.i)(refParts, minParts)) { return true; } /** * Given a max date, perform the following * checks. If any of them are true, then the * day should be disabled: * 1. Is the current year > the max allowed year? * 2. Is the current year === max allowed year, * but the current month > the max allowed month? * 3. Is the current year === max allowed year, the * current month === max allow month, but the current * day > the max allowed day? */ if (maxParts && (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.b)(refParts, maxParts)) { return true; } /** * If none of these checks * passed then the date should * be interactive. */ return false; }; /** * Given a locale, a date, the selected date(s), and today's date, * generate the state for a given calendar day button. */ const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => { /** * activeParts signals what day(s) are currently selected in the datetime. * If multiple="true", this will be an array, but the logic in this util * is the same whether we have one selected day or many because we're only * calculating the state for one button. So, we treat a single activeParts value * the same as an array of length one. */ const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts]; /** * The day button is active if it is selected, or in other words, if refParts * matches at least one selected date. */ const isActive = activePartsArray.find(parts => (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.c)(refParts, parts)) !== undefined; const isToday = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.c)(refParts, todayParts); const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues); /** * Note that we always return one object regardless of whether activeParts * was an array, since we pare down to one value for isActive. */ return { disabled, isActive, isToday, ariaSelected: isActive ? 'true' : null, ariaLabel: (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.g)(locale, isToday, refParts), text: refParts.day != null ? (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.a)(locale, refParts) : null }; }; /** * Returns `true` if the month is disabled given the * current date value and min/max date constraints. */ const isMonthDisabled = (refParts, { minParts, maxParts }) => { // If the year is disabled then the month is disabled. if (isYearDisabled(refParts.year, minParts, maxParts)) { return true; } // If the date value is before the min date, then the month is disabled. // If the date value is after the max date, then the month is disabled. if (minParts && (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.i)(refParts, minParts) || maxParts && (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.b)(refParts, maxParts)) { return true; } return false; }; /** * Given a working date, an optional minimum date range, * and an optional maximum date range; determine if the * previous navigation button is disabled. */ const isPrevMonthDisabled = (refParts, minParts, maxParts) => { const prevMonth = Object.assign(Object.assign({}, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.d)(refParts)), { day: null }); return isMonthDisabled(prevMonth, { minParts, maxParts }); }; /** * Given a working date and a maximum date range, * determine if the next navigation button is disabled. */ const isNextMonthDisabled = (refParts, maxParts) => { const nextMonth = Object.assign(Object.assign({}, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.e)(refParts)), { day: null }); return isMonthDisabled(nextMonth, { maxParts }); }; /** * Given the value of the highlightedDates property * and an ISO string, return the styles to use for * that date, or undefined if none are found. */ const getHighlightStyles = (highlightedDates, dateIsoString, el) => { if (Array.isArray(highlightedDates)) { const dateStringWithoutTime = dateIsoString.split('T')[0]; const matchingHighlight = highlightedDates.find(hd => hd.date === dateStringWithoutTime); if (matchingHighlight) { return { textColor: matchingHighlight.textColor, backgroundColor: matchingHighlight.backgroundColor }; } } else { /** * Wrap in a try-catch to prevent exceptions in the user's function * from interrupting the calendar's rendering. */ try { return highlightedDates(dateIsoString); } catch (e) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.b)('Exception thrown from provided `highlightedDates` callback. Please check your function and try again.', el, e); } } return undefined; }; const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day-highlight{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:32px;height:32px;z-index:-1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.calendar-day-highlight{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:14px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:16px;font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:12px;font-weight:600;line-height:24px;text-transform:uppercase}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;height:calc(100% - 16px)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-day{font-size:20px}.calendar-day:focus .calendar-day-highlight,.calendar-day.calendar-day-active .calendar-day-highlight{opacity:0.2}.calendar-day.calendar-day-active .calendar-day-highlight{background:var(--ion-color-base)}.calendar-day:focus .calendar-day-highlight{background:var(--ion-color-base) !important}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-today.calendar-day-active .calendar-day-highlight{background:var(--ion-color-base);opacity:1}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:16px;font-size:16px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}"; const datetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day-highlight{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:32px;height:32px;z-index:-1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.calendar-day-highlight{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}:host .datetime-header{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}:host .datetime-header .datetime-title{font-size:12px;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:34px}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{color:var(--ion-color-step-650, #595959)}:host .calendar-days-of-week{padding-left:10px;padding-right:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:14px;line-height:36px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-day{padding-left:0px;padding-right:0;padding-top:13px;padding-bottom:13px;font-size:14px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0;padding-inline-end:0}}.calendar-day:focus .calendar-day-highlight{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}.calendar-day.calendar-day-today .calendar-day-highlight{border:1px solid var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active .calendar-day-highlight{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .time-header{color:var(--ion-color-step-650, #595959)}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .datetime-view-buttons ion-button{color:var(--ion-color-step-800, #333333)}"; const Datetime = class { constructor(hostRef) { (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.r)(this, hostRef); this.ionCancel = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionCancel", 7); this.ionChange = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionChange", 7); this.ionFocus = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionFocus", 7); this.ionBlur = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionBlur", 7); this.ionStyle = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionStyle", 7); this.ionRender = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionRender", 7); this.inputId = `ion-dt-${datetimeIds++}`; this.prevPresentation = null; /** * Duplicate reference to `activeParts` that does not trigger a re-render of the component. * Allows caching an instance of the `activeParts` in between render cycles. */ this.activePartsClone = []; this.showMonthAndYear = false; this.activeParts = []; this.workingParts = { month: 5, day: 28, year: 2021, hour: 13, minute: 52, ampm: 'pm' }; this.isPresented = false; this.isTimePopoverOpen = false; /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * For more information on colors, see [theming](/docs/theming/basics). */ this.color = 'primary'; /** * The name of the control, which is submitted with the form data. */ this.name = this.inputId; /** * If `true`, the user cannot interact with the datetime. */ this.disabled = false; /** * If `true`, the datetime appears normal but is not interactive. */ this.readonly = false; /** * Which values you want to select. `'date'` will show * a calendar picker to select the month, day, and year. `'time'` * will show a time picker to select the hour, minute, and (optionally) * AM/PM. `'date-time'` will show the date picker first and time picker second. * `'time-date'` will show the time picker first and date picker second. */ this.presentation = 'date-time'; /** * The text to display on the picker's cancel button. */ this.cancelText = 'Cancel'; /** * The text to display on the picker's "Done" button. */ this.doneText = 'Done'; /** * The text to display on the picker's "Clear" button. */ this.clearText = 'Clear'; /** * The locale to use for `ion-datetime`. This * impacts month and day name formatting. * The `'default'` value refers to the default * locale set by your device. */ this.locale = 'default'; /** * The first day of the week to use for `ion-datetime`. The * default value is `0` and represents Sunday. */ this.firstDayOfWeek = 0; /** * If `true`, multiple dates can be selected at once. Only * applies to `presentation="date"` and `preferWheel="false"`. */ this.multiple = false; /** * If `true`, a header will be shown above the calendar * picker. This will include both the slotted title, and * the selected date. */ this.showDefaultTitle = false; /** * If `true`, the default "Cancel" and "OK" buttons * will be rendered at the bottom of the `ion-datetime` * component. Developers can also use the `button` slot * if they want to customize these buttons. If custom * buttons are set in the `button` slot then the * default buttons will not be rendered. */ this.showDefaultButtons = false; /** * If `true`, a "Clear" button will be rendered alongside * the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` * component. Developers can also use the `button` slot * if they want to customize these buttons. If custom * buttons are set in the `button` slot then the * default buttons will not be rendered. */ this.showClearButton = false; /** * If `true`, the default "Time" label will be rendered * for the time selector of the `ion-datetime` component. * Developers can also use the `time-label` slot * if they want to customize this label. If a custom * label is set in the `time-label` slot then the * default label will not be rendered. */ this.showDefaultTimeLabel = true; /** * If `cover`, the `ion-datetime` will expand to cover the full width of its container. * If `fixed`, the `ion-datetime` will have a fixed width. */ this.size = 'fixed'; /** * If `true`, a wheel picker will be rendered instead of a calendar grid * where possible. If `false`, a calendar grid will be rendered instead of * a wheel picker where possible. * * A wheel picker can be rendered instead of a grid when `presentation` is * one of the following values: `'date'`, `'date-time'`, or `'time-date'`. * * A wheel picker will always be rendered regardless of * the `preferWheel` value when `presentation` is one of the following values: * `'time'`, `'month'`, `'month-year'`, or `'year'`. */ this.preferWheel = false; /** * Returns the DatetimePart interface * to use when rendering an initial set of * data. This should be used when rendering an * interface in an environment where the `value` * may not be set. This function works * by returning the first selected date in * "activePartsClone" and then falling back to * defaultParts if no active date is selected. */ this.getActivePartsWithFallback = () => { var _a; const { defaultParts } = this; return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts; }; this.getActivePart = () => { const { activePartsClone } = this; return Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone; }; this.closeParentOverlay = () => { const popoverOrModal = this.el.closest('ion-modal, ion-popover'); if (popoverOrModal) { popoverOrModal.dismiss(); } }; this.setWorkingParts = parts => { this.workingParts = Object.assign({}, parts); }; this.setActiveParts = (parts, removeDate = false) => { const { multiple, minParts, maxParts, activePartsClone } = this; /** * When setting the active parts, it is possible * to set invalid data. For example, * when updating January 31 to February, * February 31 does not exist. As a result * we need to validate the active parts and * ensure that we are only setting valid dates. * Additionally, we need to update the working parts * too in the event that the validated parts are different. */ const validatedParts = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.v)(parts, minParts, maxParts); this.setWorkingParts(validatedParts); if (multiple) { /** * We read from activePartsClone here because valueChanged() only updates that, * so it's the more reliable source of truth. If we read from activeParts, then * if you click July 1, manually set the value to July 2, and then click July 3, * the new value would be [July 1, July 3], ignoring the value set. * * We can then pass the new value to activeParts (rather than activePartsClone) * since the clone will be updated automatically by activePartsChanged(). */ const activePartsArray = Array.isArray(activePartsClone) ? activePartsClone : [activePartsClone]; if (removeDate) { this.activeParts = activePartsArray.filter(p => !(0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.c)(p, validatedParts)); } else { this.activeParts = [...activePartsArray, validatedParts]; } } else { this.activeParts = Object.assign({}, validatedParts); } const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null; if (hasSlottedButtons || this.showDefaultButtons) { return; } this.confirm(); }; this.initializeKeyboardListeners = () => { const calendarBodyRef = this.calendarBodyRef; if (!calendarBodyRef) { return; } const root = this.el.shadowRoot; /** * Get a reference to the month * element we are currently viewing. */ const currentMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(2)'); /** * When focusing the calendar body, we want to pass focus * to the working day, but other days should * only be accessible using the arrow keys. Pressing * Tab should jump between bodies of selectable content. */ const checkCalendarBodyFocus = ev => { var _a; const record = ev[0]; /** * If calendar body was already focused * when this fired or if the calendar body * if not currently focused, we should not re-focus * the inner day. */ if (((_a = record.oldValue) === null || _a === void 0 ? void 0 : _a.includes('ion-focused')) || !calendarBodyRef.classList.contains('ion-focused')) { return; } this.focusWorkingDay(currentMonth); }; const mo = new MutationObserver(checkCalendarBodyFocus); mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true }); this.destroyKeyboardMO = () => { mo === null || mo === void 0 ? void 0 : mo.disconnect(); }; /** * We must use keydown not keyup as we want * to prevent scrolling when using the arrow keys. */ calendarBodyRef.addEventListener('keydown', ev => { const activeElement = root.activeElement; if (!activeElement || !activeElement.classList.contains('calendar-day')) { return; } const parts = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.f)(activeElement); let partsToFocus; switch (ev.key) { case 'ArrowDown': ev.preventDefault(); partsToFocus = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.n)(parts); break; case 'ArrowUp': ev.preventDefault(); partsToFocus = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.m)(parts); break; case 'ArrowRight': ev.preventDefault(); partsToFocus = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.l)(parts); break; case 'ArrowLeft': ev.preventDefault(); partsToFocus = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.k)(parts); break; case 'Home': ev.preventDefault(); partsToFocus = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.j)(parts); break; case 'End': ev.preventDefault(); partsToFocus = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.h)(parts); break; case 'PageUp': ev.preventDefault(); partsToFocus = ev.shiftKey ? (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.O)(parts) : (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.d)(parts); break; case 'PageDown': ev.preventDefault(); partsToFocus = ev.shiftKey ? (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.N)(parts) : (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.e)(parts); break; /** * Do not preventDefault here * as we do not want to override other * browser defaults such as pressing Enter/Space * to select a day. */ default: return; } /** * If the day we want to move focus to is * disabled, do not do anything. */ if (isDayDisabled(partsToFocus, this.minParts, this.maxParts)) { return; } this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), partsToFocus)); /** * Give view a chance to re-render * then move focus to the new working day */ requestAnimationFrame(() => this.focusWorkingDay(currentMonth)); }); }; this.focusWorkingDay = currentMonth => { /** * Get the number of padding days so * we know how much to offset our next selector by * to grab the correct calenday-day element. */ const padding = currentMonth.querySelectorAll('.calendar-day-padding'); const { day } = this.workingParts; if (day === null) { return; } /** * Get the calendar day element * and focus it. */ const dayEl = currentMonth.querySelector(`.calendar-day:nth-of-type(${padding.length + day})`); if (dayEl) { dayEl.focus(); } }; this.processMinParts = () => { const { min, defaultParts } = this; if (min === undefined) { this.minParts = undefined; return; } this.minParts = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.p)(min, defaultParts); }; this.processMaxParts = () => { const { max, defaultParts } = this; if (max === undefined) { this.maxParts = undefined; return; } this.maxParts = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.o)(max, defaultParts); }; this.initializeCalendarListener = () => { const calendarBodyRef = this.calendarBodyRef; if (!calendarBodyRef) { return; } /** * For performance reasons, we only render 3 * months at a time: The current month, the previous * month, and the next month. We have a scroll listener * on the calendar body to append/prepend new months. * * We can do this because Stencil is smart enough to not * re-create the .calendar-month containers, but rather * update the content within those containers. * * As an added bonus, WebKit has some troubles with * scroll-snap-stop: always, so not rendering all of * the months in a row allows us to mostly sidestep * that issue. */ const months = calendarBodyRef.querySelectorAll('.calendar-month'); const startMonth = months[0]; const workingMonth = months[1]; const endMonth = months[2]; const mode = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_3__.b)(this); const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1; /** * Before setting up the scroll listener, * scroll the middle month into view. * scrollIntoView() will scroll entire page * if element is not in viewport. Use scrollLeft instead. */ (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.c)(() => { calendarBodyRef.scrollLeft = startMonth.clientWidth * ((0,_dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_7__.i)(this.el) ? -1 : 1); const getChangedMonth = parts => { const box = calendarBodyRef.getBoundingClientRect(); const root = this.el.shadowRoot; /** * Get the element that is in the center of the calendar body. * This will be an element inside of the active month. */ const elementAtCenter = root.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2); /** * If there is no element then the * component may be re-rendering on a slow device. */ if (!elementAtCenter) return; const month = elementAtCenter.closest('.calendar-month'); if (!month) return; /** * The edge of the month must be lined up with * the edge of the calendar body in order for * the component to update. Otherwise, it * may be the case that the user has paused their * swipe or the browser has not finished snapping yet. * Rather than check if the x values are equal, * we give it a tolerance of 2px to account for * sub pixel rendering. */ const monthBox = month.getBoundingClientRect(); if (Math.abs(monthBox.x - box.x) > 2) return; /** * From here, we can determine if the start * month or the end month was scrolled into view. * If no month was changed, then we can return from * the scroll callback early. */ if (month === startMonth) { return (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.d)(parts); } else if (month === endMonth) { return (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.e)(parts); } else { return; } }; const updateActiveMonth = () => { if (needsiOSRubberBandFix) { calendarBodyRef.style.removeProperty('pointer-events'); appliediOSRubberBandFix = false; } /** * If the month did not change * then we can return early. */ const newDate = getChangedMonth(this.workingParts); if (!newDate) return; const { month, day, year } = newDate; if (isMonthDisabled({ month, year, day: null }, { minParts: Object.assign(Object.assign({}, this.minParts), { day: null }), maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }) })) { return; } /** * Prevent scrolling for other browsers * to give the DOM time to update and the container * time to properly snap. */ calendarBodyRef.style.setProperty('overflow', 'hidden'); /** * Use a writeTask here to ensure * that the state is updated and the * correct month is scrolled into view * in the same frame. This is not * typically a problem on newer devices * but older/slower device may have a flicker * if we did not do this. */ (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.c)(() => { this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year })); calendarBodyRef.scrollLeft = workingMonth.clientWidth * ((0,_dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_7__.i)(this.el) ? -1 : 1); calendarBodyRef.style.removeProperty('overflow'); }); }; /** * When the container finishes scrolling we * need to update the DOM with the selected month. */ let scrollTimeout; /** * We do not want to attempt to set pointer-events * multiple times within a single swipe gesture as * that adds unnecessary work to the main thread. */ let appliediOSRubberBandFix = false; const scrollCallback = () => { if (scrollTimeout) { clearTimeout(scrollTimeout); } /** * On iOS it is possible to quickly rubber band * the scroll area before the scroll timeout has fired. * This results in users reaching the end of the scrollable * container before the DOM has updated. * By setting `pointer-events: none` we can ensure that * subsequent swipes do not happen while the container * is snapping. */ if (!appliediOSRubberBandFix && needsiOSRubberBandFix) { calendarBodyRef.style.setProperty('pointer-events', 'none'); appliediOSRubberBandFix = true; } // Wait ~3 frames scrollTimeout = setTimeout(updateActiveMonth, 50); }; calendarBodyRef.addEventListener('scroll', scrollCallback); this.destroyCalendarListener = () => { calendarBodyRef.removeEventListener('scroll', scrollCallback); }; }); }; /** * Clean up all listeners except for the overlay * listener. This is so that we can re-create the listeners * if the datetime has been hidden/presented by a modal or popover. */ this.destroyInteractionListeners = () => { const { destroyCalendarListener, destroyKeyboardMO } = this; if (destroyCalendarListener !== undefined) { destroyCalendarListener(); } if (destroyKeyboardMO !== undefined) { destroyKeyboardMO(); } }; this.processValue = value => { /** * TODO FW-2646 remove value !== '' */ const hasValue = value !== '' && value !== null && value !== undefined; let valueToProcess = hasValue ? (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.q)(value) : this.defaultParts; const { minParts, maxParts, multiple } = this; if (!multiple && Array.isArray(value)) { this.value = value[0]; valueToProcess = valueToProcess[0]; } /** * Datetime should only warn of out of bounds values * if set by the user. If the `value` is undefined, * we will default to today's date which may be out * of bounds. In this case, the warning makes it look * like the developer did something wrong which is * not true. */ if (hasValue) { (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.w)(valueToProcess, minParts, maxParts); } /** * If there are multiple values, pick an arbitrary one to clamp to. This way, * if the values are across months, we always show at least one of them. Note * that the values don't necessarily have to be in order. */ const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess; const { month, day, year, hour, minute, tzOffset } = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.P)(singleValue, minParts, maxParts); const ampm = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.Q)(hour); this.setWorkingParts({ month, day, year, hour, minute, tzOffset, ampm }); /** * Since `activeParts` indicates a value that * been explicitly selected either by the * user or the app, only update `activeParts` * if the `value` property is set. */ if (hasValue) { if (Array.isArray(valueToProcess)) { this.activeParts = [...valueToProcess]; } else { this.activeParts = { month, day, year, hour, minute, tzOffset, ampm }; } } else { /** * Reset the active parts if the value is not set. * This will clear the selected calendar day when * performing a clear action or using the reset() method. */ this.activeParts = []; } }; this.onFocus = () => { this.ionFocus.emit(); }; this.onBlur = () => { this.ionBlur.emit(); }; this.hasValue = () => { return this.value != null && this.value !== ''; }; this.nextMonth = () => { const calendarBodyRef = this.calendarBodyRef; if (!calendarBodyRef) { return; } const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type'); if (!nextMonth) { return; } const left = nextMonth.offsetWidth * 2; calendarBodyRef.scrollTo({ top: 0, left: left * ((0,_dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_7__.i)(this.el) ? -1 : 1), behavior: 'smooth' }); }; this.prevMonth = () => { const calendarBodyRef = this.calendarBodyRef; if (!calendarBodyRef) { return; } const prevMonth = calendarBodyRef.querySelector('.calendar-month:first-of-type'); if (!prevMonth) { return; } calendarBodyRef.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); }; this.toggleMonthAndYearView = () => { this.showMonthAndYear = !this.showMonthAndYear; }; } disabledChanged() { this.emitStyle(); } minChanged() { this.processMinParts(); } maxChanged() { this.processMaxParts(); } yearValuesChanged() { this.parsedYearValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.yearValues); } monthValuesChanged() { this.parsedMonthValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.monthValues); } dayValuesChanged() { this.parsedDayValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.dayValues); } hourValuesChanged() { this.parsedHourValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.hourValues); } minuteValuesChanged() { this.parsedMinuteValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.minuteValues); } activePartsChanged() { this.activePartsClone = this.activeParts; } /** * Update the datetime value when the value changes */ valueChanged() { const { value, minParts, maxParts, workingParts, multiple } = this; if (this.hasValue()) { if (!multiple && Array.isArray(value)) { this.value = value[0]; return; // setting this.value will trigger re-run of this function } /** * Clones the value of the `activeParts` to the private clone, to update * the date display on the current render cycle without causing another render. * * This allows us to update the current value's date/time display without * refocusing or shifting the user's display (leaves the user in place). */ const valueDateParts = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.q)(value); if (valueDateParts) { (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.w)(valueDateParts, minParts, maxParts); if (Array.isArray(valueDateParts)) { this.activePartsClone = [...valueDateParts]; } else { const { month, day, year, hour, minute } = valueDateParts; const ampm = hour != null ? hour >= 12 ? 'pm' : 'am' : undefined; this.activePartsClone = Object.assign(Object.assign({}, this.activeParts), { month, day, year, hour, minute, ampm }); /** * The working parts am/pm value must be updated when the value changes, to * ensure the time picker hour column values are generated correctly. * * Note that we don't need to do this if valueDateParts is an array, since * multiple="true" does not apply to time pickers. */ this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm })); } } else { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.p)(`Unable to parse date string: ${value}. Please provide a valid ISO 8601 datetime string.`); } } this.emitStyle(); this.ionChange.emit({ value }); } /** * Confirms the selected datetime value, updates the * `value` property, and optionally closes the popover * or modal that the datetime was presented in. */ confirm() { var _this = this; return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (closeOverlay = false) { const { isCalendarPicker, activeParts } = _this; /** * We only update the value if the presentation is not a calendar picker. */ if (activeParts !== undefined || !isCalendarPicker) { const activePartsIsArray = Array.isArray(activeParts); if (activePartsIsArray && activeParts.length === 0) { _this.value = undefined; } else { /** * Prevent convertDataToISO from doing any * kind of transformation based on timezone * This cancels out any change it attempts to make * * Important: Take the timezone offset based on * the date that is currently selected, otherwise * there can be 1 hr difference when dealing w/ DST */ if (activePartsIsArray) { const dates = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.s)(activeParts).map(str => new Date(str)); for (let i = 0; i < dates.length; i++) { activeParts[i].tzOffset = dates[i].getTimezoneOffset() * -1; } } else { const date = new Date((0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.s)(activeParts)); activeParts.tzOffset = date.getTimezoneOffset() * -1; } _this.value = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.s)(activeParts); } } if (closeOverlay) { _this.closeParentOverlay(); } }).apply(this, arguments); } /** * Resets the internal state of the datetime but does not update the value. * Passing a valid ISO-8601 string will reset the state of the component to the provided date. * If no value is provided, the internal state will be reset to the clamped value of the min, max and today. */ reset(startDate) { var _this2 = this; return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () { _this2.processValue(startDate); })(); } /** * Emits the ionCancel event and * optionally closes the popover * or modal that the datetime was * presented in. */ cancel() { var _this3 = this; return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (closeOverlay = false) { _this3.ionCancel.emit(); if (closeOverlay) { _this3.closeParentOverlay(); } }).apply(this, arguments); } get isCalendarPicker() { const { presentation } = this; return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date'; } connectedCallback() { this.clearFocusVisible = (0,_focus_visible_bd02518b_js__WEBPACK_IMPORTED_MODULE_4__.startFocusVisible)(this.el).destroy; } disconnectedCallback() { if (this.clearFocusVisible) { this.clearFocusVisible(); this.clearFocusVisible = undefined; } } initializeListeners() { this.initializeCalendarListener(); this.initializeKeyboardListeners(); } componentDidLoad() { /** * If a scrollable element is hidden using `display: none`, * it will not have a scroll height meaning we cannot scroll elements * into view. As a result, we will need to wait for the datetime to become * visible if used inside of a modal or a popover otherwise the scrollable * areas will not have the correct values snapped into place. */ const visibleCallback = entries => { const ev = entries[0]; if (!ev.isIntersecting) { return; } this.initializeListeners(); /** * TODO FW-2793: Datetime needs a frame to ensure that it * can properly scroll contents into view. As a result * we hide the scrollable content until after that frame * so users do not see the content quickly shifting. The downside * is that the content will pop into view a frame after. Maybe there * is a better way to handle this? */ (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.c)(() => { this.el.classList.add('datetime-ready'); }); }; const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 }); /** * Use raf to avoid a race condition between the component loading and * its display animation starting (such as when shown in a modal). This * could cause the datetime to start at a visibility of 0, erroneously * triggering the `hiddenIO` observer below. */ (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__.r)(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(this.el)); /** * We need to clean up listeners when the datetime is hidden * in a popover/modal so that we can properly scroll containers * back into view if they are re-presented. When the datetime is hidden * the scroll areas have scroll widths/heights of 0px, so any snapping * we did originally has been lost. */ const hiddenCallback = entries => { const ev = entries[0]; if (ev.isIntersecting) { return; } this.destroyInteractionListeners(); /** * When datetime is hidden, we need to make sure that * the month/year picker is closed. Otherwise, * it will be open when the datetime re-appears * and the scroll area of the calendar grid will be 0. * As a result, the wrong month will be shown. */ this.showMonthAndYear = false; (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.c)(() => { this.el.classList.remove('datetime-ready'); }); }; const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 }); (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__.r)(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(this.el)); /** * Datetime uses Ionic components that emit * ionFocus and ionBlur. These events are * composed meaning they will cross * the shadow dom boundary. We need to * stop propagation on these events otherwise * developers will see 2 ionFocus or 2 ionBlur * events at a time. */ const root = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__.g)(this.el); root.addEventListener('ionFocus', ev => ev.stopPropagation()); root.addEventListener('ionBlur', ev => ev.stopPropagation()); } /** * When the presentation is changed, all calendar content is recreated, * so we need to re-init behavior with the new elements. */ componentDidRender() { const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel } = this; /** * TODO(FW-2165) * Remove this when https://bugs.webkit.org/show_bug.cgi?id=235960 is fixed. * When using `min`, we add `scroll-snap-align: none` * to the disabled month so that users cannot scroll to it. * This triggers a bug in WebKit where the scroll position is reset. * Since the month change logic is handled by a scroll listener, * this causes the month to change leading to `scroll-snap-align` * changing again, thus changing the scroll position again and causing * an infinite loop. * This issue only applies to the calendar grid, so we can disable * it if the calendar grid is not being used. */ const hasCalendarGrid = !preferWheel && ['date-time', 'time-date', 'date'].includes(presentation); if (minParts !== undefined && hasCalendarGrid && calendarBodyRef) { const workingMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(1)'); if (workingMonth) { calendarBodyRef.scrollLeft = workingMonth.clientWidth * ((0,_dir_e8b767a8_js__WEBPACK_IMPORTED_MODULE_7__.i)(this.el) ? -1 : 1); } } if (prevPresentation === null) { this.prevPresentation = presentation; return; } if (presentation === prevPresentation) { return; } this.prevPresentation = presentation; this.destroyInteractionListeners(); this.initializeListeners(); /** * The month/year picker from the date interface * should be closed as it is not available in non-date * interfaces. */ this.showMonthAndYear = false; (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__.r)(() => { this.ionRender.emit(); }); } componentWillLoad() { const { el, highlightedDates, multiple, presentation, preferWheel } = this; if (multiple) { if (presentation !== 'date') { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.p)('Multiple date selection is only supported for presentation="date".', el); } if (preferWheel) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.p)('Multiple date selection is not supported with preferWheel="true".', el); } } if (highlightedDates !== undefined) { if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.p)('The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el); } if (preferWheel) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.p)('The highlightedDates property is not supported with preferWheel="true".', el); } } this.processMinParts(); this.processMaxParts(); const hourValues = this.parsedHourValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.hourValues); const minuteValues = this.parsedMinuteValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.minuteValues); const monthValues = this.parsedMonthValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.monthValues); const yearValues = this.parsedYearValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.yearValues); const dayValues = this.parsedDayValues = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.r)(this.dayValues); const todayParts = this.todayParts = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.q)((0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.t)()); this.defaultParts = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.u)(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues); this.processValue(this.value); this.emitStyle(); } emitStyle() { this.ionStyle.emit({ interactive: true, datetime: true, 'interactive-disabled': this.disabled }); } /** * Universal render methods * These are pieces of datetime that * are rendered independently of presentation. */ renderFooter() { const { showDefaultButtons, showClearButton } = this; const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null; if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) { return; } const clearButtonClick = () => { this.reset(); this.value = undefined; }; /** * By default we render two buttons: * Cancel - Dismisses the datetime and * does not update the `value` prop. * OK - Dismisses the datetime and * updates the `value` prop. */ return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-footer" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-buttons" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: { ['datetime-action-buttons']: true, ['has-clear-button']: this.showClearButton } }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("slot", { name: "buttons" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-buttons", null, showDefaultButtons && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true) }, this.cancelText), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", null, showClearButton && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick() }, this.clearText), showDefaultButtons && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true) }, this.doneText))))))); } /** * Wheel picker render methods */ renderWheelPicker(forcePresentation = this.presentation) { /** * If presentation="time-date" we switch the * order of the render array here instead of * manually reordering each date/time picker * column with CSS. This allows for additional * flexibility if we need to render subsets * of the date/time data or do additional ordering * within the child render functions. */ const renderArray = forcePresentation === 'time-date' ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)] : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)]; return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-internal", null, renderArray); } renderDatePickerColumns(forcePresentation) { return forcePresentation === 'date-time' || forcePresentation === 'time-date' ? this.renderCombinedDatePickerColumn() : this.renderIndividualDatePickerColumns(forcePresentation); } renderCombinedDatePickerColumn() { const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this; const activePart = this.getActivePartsWithFallback(); /** * By default, generate a range of 3 months: * Previous month, current month, and next month */ const monthsToRender = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.I)(workingParts); const lastMonth = monthsToRender[monthsToRender.length - 1]; /** * Ensure that users can select the entire window of dates. */ monthsToRender[0].day = 1; lastMonth.day = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.x)(lastMonth.month, lastMonth.year); /** * Narrow the dates rendered based on min/max dates (if any). * The `min` date is used if the min is after the generated min month. * The `max` date is used if the max is before the generated max month. * This ensures that the sliding window always stays at 3 months * but still allows future dates to be lazily rendered based on any min/max * constraints. */ const min = minParts !== undefined && (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.b)(minParts, monthsToRender[0]) ? minParts : monthsToRender[0]; const max = maxParts !== undefined && (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.i)(maxParts, lastMonth) ? maxParts : lastMonth; const result = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.y)(locale, todayParts, min, max, this.parsedDayValues, this.parsedMonthValues); let items = result.items; const parts = result.parts; if (isDateEnabled) { items = items.map((itemObject, index) => { const referenceParts = parts[index]; let disabled; try { /** * The `isDateEnabled` implementation is try-catch wrapped * to prevent exceptions in the user's function from * interrupting the calendar rendering. */ disabled = !isDateEnabled((0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.s)(referenceParts)); } catch (e) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.b)('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e); } return Object.assign(Object.assign({}, itemObject), { disabled }); }); } /** * If we have selected a day already, then default the column * to that value. Otherwise, set it to the default date. */ const todayString = workingParts.day !== null ? `${workingParts.year}-${workingParts.month}-${workingParts.day}` : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`; return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column-internal", { class: "date-column", color: this.color, items: items, value: todayString, onIonChange: ev => { // TODO(FW-1823) Remove this when iOS 14 support is dropped. // Due to a Safari 14 issue we need to destroy // the scroll listener before we update state // and trigger a re-render. if (this.destroyCalendarListener) { this.destroyCalendarListener(); } const { value } = ev.detail; const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`); this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart)); this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart)); // We can re-attach the scroll listener after // the working parts have been updated. this.initializeCalendarListener(); ev.stopPropagation(); } }); } renderIndividualDatePickerColumns(forcePresentation) { const { workingParts, isDateEnabled } = this; const shouldRenderMonths = forcePresentation !== 'year' && forcePresentation !== 'time'; const months = shouldRenderMonths ? (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.z)(this.locale, workingParts, this.minParts, this.maxParts, this.parsedMonthValues) : []; const shouldRenderDays = forcePresentation === 'date'; let days = shouldRenderDays ? (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.A)(this.locale, workingParts, this.minParts, this.maxParts, this.parsedDayValues) : []; if (isDateEnabled) { days = days.map(dayObject => { const { value } = dayObject; const valueNum = typeof value === 'string' ? parseInt(value) : value; const referenceParts = { month: workingParts.month, day: valueNum, year: workingParts.year }; let disabled; try { /** * The `isDateEnabled` implementation is try-catch wrapped * to prevent exceptions in the user's function from * interrupting the calendar rendering. */ disabled = !isDateEnabled((0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.s)(referenceParts)); } catch (e) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.b)('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e); } return Object.assign(Object.assign({}, dayObject), { disabled }); }); } const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time'; const years = shouldRenderYears ? (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.B)(this.locale, this.defaultParts, this.minParts, this.maxParts, this.parsedYearValues) : []; /** * Certain locales show the day before the month. */ const showMonthFirst = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.C)(this.locale, { month: 'numeric', day: 'numeric' }); let renderArray = []; if (showMonthFirst) { renderArray = [this.renderMonthPickerColumn(months), this.renderDayPickerColumn(days), this.renderYearPickerColumn(years)]; } else { renderArray = [this.renderDayPickerColumn(days), this.renderMonthPickerColumn(months), this.renderYearPickerColumn(years)]; } return renderArray; } renderDayPickerColumn(days) { var _a; if (days.length === 0) { return []; } const { workingParts } = this; const activePart = this.getActivePartsWithFallback(); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column-internal", { class: "day-column", color: this.color, items: days, value: (_a = workingParts.day !== null ? workingParts.day : this.defaultParts.day) !== null && _a !== void 0 ? _a : undefined, onIonChange: ev => { // TODO(FW-1823) Remove this when iOS 14 support is dropped. // Due to a Safari 14 issue we need to destroy // the scroll listener before we update state // and trigger a re-render. if (this.destroyCalendarListener) { this.destroyCalendarListener(); } this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value })); this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value })); // We can re-attach the scroll listener after // the working parts have been updated. this.initializeCalendarListener(); ev.stopPropagation(); } }); } renderMonthPickerColumn(months) { if (months.length === 0) { return []; } const { workingParts } = this; const activePart = this.getActivePartsWithFallback(); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column-internal", { class: "month-column", color: this.color, items: months, value: workingParts.month, onIonChange: ev => { // TODO(FW-1823) Remove this when iOS 14 support is dropped. // Due to a Safari 14 issue we need to destroy // the scroll listener before we update state // and trigger a re-render. if (this.destroyCalendarListener) { this.destroyCalendarListener(); } this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value })); this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value })); // We can re-attach the scroll listener after // the working parts have been updated. this.initializeCalendarListener(); ev.stopPropagation(); } }); } renderYearPickerColumn(years) { if (years.length === 0) { return []; } const { workingParts } = this; const activePart = this.getActivePartsWithFallback(); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column-internal", { class: "year-column", color: this.color, items: years, value: workingParts.year, onIonChange: ev => { // TODO(FW-1823) Remove this when iOS 14 support is dropped. // Due to a Safari 14 issue we need to destroy // the scroll listener before we update state // and trigger a re-render. if (this.destroyCalendarListener) { this.destroyCalendarListener(); } this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value })); this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value })); // We can re-attach the scroll listener after // the working parts have been updated. this.initializeCalendarListener(); ev.stopPropagation(); } }); } renderTimePickerColumns(forcePresentation) { if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) { return []; } /** * If a user has not selected a date, * then we should show all times. If the * user has selected a date (even if it has * not been confirmed yet), we should apply * the max and min restrictions so that the * time picker shows values that are * appropriate for the selected date. */ const activePart = this.getActivePart(); const userHasSelectedDate = activePart !== undefined; const { hoursData, minutesData, dayPeriodData } = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.D)(this.locale, this.workingParts, this.hourCycle, userHasSelectedDate ? this.minParts : undefined, userHasSelectedDate ? this.maxParts : undefined, this.parsedHourValues, this.parsedMinuteValues); return [this.renderHourPickerColumn(hoursData), this.renderMinutePickerColumn(minutesData), this.renderDayPeriodPickerColumn(dayPeriodData)]; } renderHourPickerColumn(hoursData) { const { workingParts } = this; if (hoursData.length === 0) return []; const activePart = this.getActivePartsWithFallback(); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column-internal", { color: this.color, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: ev => { this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value })); this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value })); ev.stopPropagation(); } }); } renderMinutePickerColumn(minutesData) { const { workingParts } = this; if (minutesData.length === 0) return []; const activePart = this.getActivePartsWithFallback(); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column-internal", { color: this.color, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: ev => { this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value })); this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value })); ev.stopPropagation(); } }); } renderDayPeriodPickerColumn(dayPeriodData) { const { workingParts } = this; if (dayPeriodData.length === 0) { return []; } const activePart = this.getActivePartsWithFallback(); const isDayPeriodRTL = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.E)(this.locale); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, value: activePart.ampm, items: dayPeriodData, onIonChange: ev => { const hour = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.R)(workingParts, ev.detail.value); this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour })); this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour })); ev.stopPropagation(); } }); } renderWheelView(forcePresentation) { const { locale } = this; const showMonthFirst = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.C)(locale); const columnOrder = showMonthFirst ? 'month-first' : 'year-first'; return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: { [`wheel-order-${columnOrder}`]: true } }, this.renderWheelPicker(forcePresentation)); } /** * Grid Render Methods */ renderCalendarHeader(mode) { const expandedIcon = mode === 'ios' ? _index_2bcb741c_js__WEBPACK_IMPORTED_MODULE_2__.l : _index_2bcb741c_js__WEBPACK_IMPORTED_MODULE_2__.p; const collapsedIcon = mode === 'ios' ? _index_2bcb741c_js__WEBPACK_IMPORTED_MODULE_2__.o : _index_2bcb741c_js__WEBPACK_IMPORTED_MODULE_2__.q; const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts); const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts); // don't use the inheritAttributes util because it removes dir from the host, and we still need that const hostDir = this.el.getAttribute('dir') || undefined; return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-header" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-action-buttons" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-month-year" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-item", { button: true, detail: false, lines: "none", onClick: () => this.toggleMonthAndYearView() }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-label", null, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.G)(this.locale, this.workingParts), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-next-prev" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-buttons", null, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-button", { "aria-label": "previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: _index_2bcb741c_js__WEBPACK_IMPORTED_MODULE_2__.c, lazy: false, flipRtl: true })), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-button", { "aria-label": "next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: _index_2bcb741c_js__WEBPACK_IMPORTED_MODULE_2__.o, lazy: false, flipRtl: true }))))), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.F)(this.locale, mode, this.firstDayOfWeek % 7).map(d => { return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "day-of-week" }, d); }))); } renderMonth(month, year) { const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year); const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month); const isCalMonthDisabled = !yearAllowed || !monthAllowed; const swipeDisabled = isMonthDisabled({ month, year, day: null }, { // The day is not used when checking if a month is disabled. // Users should be able to access the min or max month, even if the // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled). minParts: Object.assign(Object.assign({}, this.minParts), { day: null }), maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }) }); // The working month should never have swipe disabled. // Otherwise the CSS scroll snap will not work and the user // can free-scroll the calendar. const isWorkingMonth = this.workingParts.month === month && this.workingParts.year === year; const activePart = this.getActivePartsWithFallback(); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { "aria-hidden": !isWorkingMonth ? 'true' : null, class: { 'calendar-month': true, // Prevents scroll snap swipe gestures for months outside of the min/max bounds 'calendar-month-disabled': !isWorkingMonth && swipeDisabled } }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-month-grid" }, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.H)(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => { const { day, dayOfWeek } = dateObject; const { el, highlightedDates, isDateEnabled, multiple } = this; const referenceParts = { month, day, year }; const isCalendarPadding = day === null; const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activePartsClone, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues); const dateIsoString = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.s)(referenceParts); let isCalDayDisabled = isCalMonthDisabled || disabled; if (!isCalDayDisabled && isDateEnabled !== undefined) { try { /** * The `isDateEnabled` implementation is try-catch wrapped * to prevent exceptions in the user's function from * interrupting the calendar rendering. */ isCalDayDisabled = !isDateEnabled(dateIsoString); } catch (e) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.b)('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e); } } let dateStyle = undefined; /** * Custom highlight styles should not override the style for selected dates, * nor apply to "filler days" at the start of the grid. */ if (highlightedDates !== undefined && !isActive && day !== null) { dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el); } return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("button", { tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: { 'calendar-day-padding': isCalendarPadding, 'calendar-day': true, 'calendar-day-active': isActive, 'calendar-day-today': isToday }, style: dateStyle && { color: dateStyle.textColor }, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => { if (isCalendarPadding) { return; } this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day, year })); // multiple only needs date info, so we can wipe out other fields like time if (multiple) { this.setActiveParts({ month, day, year }, isActive); } else { this.setActiveParts(Object.assign(Object.assign({}, activePart), { month, day, year })); } } }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-day-highlight", style: { backgroundColor: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.backgroundColor } }), text); }))); } renderCalendarBody() { return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "calendar-body ion-focusable", ref: el => this.calendarBodyRef = el, tabindex: "0" }, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.I)(this.workingParts).map(({ month, year }) => { return this.renderMonth(month, year); })); } renderCalendar(mode) { return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()); } renderTimeLabel() { const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null; if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) { return; } return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("slot", { name: "time-label" }, "Time"); } renderTimeOverlay() { var _this4 = this; const use24Hour = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.J)(this.locale, this.hourCycle); const activePart = this.getActivePartsWithFallback(); return [(0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "time-header" }, this.renderTimeLabel()), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("button", { class: { 'time-body': true, 'time-body-active': this.isTimePopoverOpen }, "aria-expanded": "false", "aria-haspopup": "true", onClick: function () { var _ref = (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (ev) { const { popoverRef } = _this4; if (popoverRef) { _this4.isTimePopoverOpen = true; popoverRef.present(new CustomEvent('ionShadowTarget', { detail: { ionShadowTarget: ev.target } })); yield popoverRef.onWillDismiss(); _this4.isTimePopoverOpen = false; } }); return function onClick(_x) { return _ref.apply(this, arguments); }; }() }, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.K)(this.locale, activePart, use24Hour)), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: ev => { /** * Intersection Observers do not consistently fire between Blink and Webkit * when toggling the visibility of the popover and trying to scroll the picker * column to the correct time value. * * This will correctly scroll the element position to the correct time value, * before the popover is fully presented. */ const cols = ev.target.querySelectorAll('ion-picker-column-internal'); // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column cols.forEach(col => col.scrollActiveItemIntoView()); }, style: { '--offset-y': '-10px', '--min-width': 'fit-content' }, // Allow native browser keyboard events to support up/down/home/end key // navigation within the time picker. keyboardEvents: true, ref: el => this.popoverRef = el }, this.renderWheelPicker('time'))]; } getHeaderSelectedDateText() { const { activeParts, multiple, titleSelectedDatesFormatter } = this; const isArray = Array.isArray(activeParts); let headerText; if (multiple && isArray && activeParts.length !== 1) { headerText = `${activeParts.length} days`; // default/fallback for multiple selection if (titleSelectedDatesFormatter !== undefined) { try { headerText = titleSelectedDatesFormatter((0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.s)(activeParts)); } catch (e) { (0,_index_c4b11676_js__WEBPACK_IMPORTED_MODULE_6__.b)('Exception in provided `titleSelectedDatesFormatter`: ', e); } } } else { // for exactly 1 day selected (multiple set or not), show a formatted version of that headerText = (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.L)(this.locale, this.getActivePartsWithFallback()); } return headerText; } renderHeader(showExpandedHeader = true) { const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null; if (!hasSlottedTitle && !this.showDefaultTitle) { return; } return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-header" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-title" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("slot", { name: "title" }, "Select Date")), showExpandedHeader && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())); } /** * Render time picker inside of datetime. * Do not pass color prop to segment on * iOS mode. MD segment has been customized and * should take on the color prop, but iOS * should just be the default segment. */ renderTime() { const { presentation } = this; const timeOnlyPresentation = presentation === 'time'; return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()); } /** * Renders the month/year picker that is * displayed on the calendar grid. * The .datetime-year class has additional * styles that let us show/hide the * picker when the user clicks on the * toggle in the calendar header. */ renderCalendarViewMonthYearPicker() { return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "datetime-year" }, this.renderWheelView('month-year')); } /** * Render entry point * All presentation types are rendered from here. */ renderDatetime(mode) { const { presentation, preferWheel } = this; /** * Certain presentation types have separate grid and wheel displays. * If preferWheel is true then we should show a wheel picker instead. */ const hasWheelVariant = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date'; if (preferWheel && hasWheelVariant) { return [this.renderHeader(false), this.renderWheelView(), this.renderFooter()]; } switch (presentation) { case 'date-time': return [this.renderHeader(), this.renderCalendar(mode), this.renderCalendarViewMonthYearPicker(), this.renderTime(), this.renderFooter()]; case 'time-date': return [this.renderHeader(), this.renderTime(), this.renderCalendar(mode), this.renderCalendarViewMonthYearPicker(), this.renderFooter()]; case 'time': return [this.renderHeader(false), this.renderTime(), this.renderFooter()]; case 'month': case 'month-year': case 'year': return [this.renderHeader(false), this.renderWheelView(), this.renderFooter()]; default: return [this.renderHeader(), this.renderCalendar(mode), this.renderCalendarViewMonthYearPicker(), this.renderFooter()]; } } render() { const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, preferWheel, presentation, size } = this; const mode = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_3__.b)(this); const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year'; const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation; const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation; const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date'; const hasWheelVariant = hasDatePresentation && preferWheel; const hasGrid = hasDatePresentation && !preferWheel; (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__.e)(true, el, name, (0,_data_caf38df0_js__WEBPACK_IMPORTED_MODULE_9__.M)(value), disabled); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)(_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.H, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, (0,_theme_7670341c_js__WEBPACK_IMPORTED_MODULE_8__.c)(color, { [mode]: true, ['datetime-presented']: isPresented, ['datetime-readonly']: readonly, ['datetime-disabled']: disabled, 'show-month-and-year': shouldShowMonthAndYear, 'month-year-picker-open': monthYearPickerOpen, [`datetime-presentation-${presentation}`]: true, [`datetime-size-${size}`]: true, [`datetime-prefer-wheel`]: hasWheelVariant, [`datetime-grid`]: hasGrid })) }, this.renderDatetime(mode)); } get el() { return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.i)(this); } static get watchers() { return { "disabled": ["disabledChanged"], "min": ["minChanged"], "max": ["maxChanged"], "yearValues": ["yearValuesChanged"], "monthValues": ["monthValuesChanged"], "dayValues": ["dayValuesChanged"], "hourValues": ["hourValuesChanged"], "minuteValues": ["minuteValuesChanged"], "activeParts": ["activePartsChanged"], "value": ["valueChanged"] }; } }; let datetimeIds = 0; Datetime.style = { ios: datetimeIosCss, md: datetimeMdCss }; /** * iOS Picker Enter Animation */ const iosEnterAnimation = baseEl => { const baseAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_11__.c)(); const backdropAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_11__.c)(); const wrapperAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_11__.c)(); backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')).fromTo('opacity', 0.01, 'var(--backdrop-opacity)').beforeStyles({ 'pointer-events': 'none' }).afterClearStyles(['pointer-events']); wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper')).fromTo('transform', 'translateY(100%)', 'translateY(0%)'); return baseAnimation.addElement(baseEl).easing('cubic-bezier(.36,.66,.04,1)').duration(400).addAnimation([backdropAnimation, wrapperAnimation]); }; /** * iOS Picker Leave Animation */ const iosLeaveAnimation = baseEl => { const baseAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_11__.c)(); const backdropAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_11__.c)(); const wrapperAnimation = (0,_animation_4ff3f603_js__WEBPACK_IMPORTED_MODULE_11__.c)(); backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')).fromTo('opacity', 'var(--backdrop-opacity)', 0.01); wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper')).fromTo('transform', 'translateY(0%)', 'translateY(100%)'); return baseAnimation.addElement(baseEl).easing('cubic-bezier(.36,.66,.04,1)').duration(400).addAnimation([backdropAnimation, wrapperAnimation]); }; 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}"; 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}"; const Picker = class { constructor(hostRef) { (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.r)(this, hostRef); this.didPresent = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPickerDidPresent", 7); this.willPresent = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPickerWillPresent", 7); this.willDismiss = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPickerWillDismiss", 7); this.didDismiss = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPickerDidDismiss", 7); this.presented = false; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ this.keyboardClose = true; /** * Array of buttons to be displayed at the top of the picker. */ this.buttons = []; /** * Array of columns to be displayed in the picker. */ this.columns = []; /** * Number of milliseconds to wait before dismissing the picker. */ this.duration = 0; /** * If `true`, a backdrop will be displayed behind the picker. */ this.showBackdrop = true; /** * If `true`, the picker will be dismissed when the backdrop is clicked. */ this.backdropDismiss = true; /** * If `true`, the picker will animate. */ this.animated = true; this.onBackdropTap = () => { this.dismiss(undefined, _overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.B); }; this.dispatchCancelHandler = ev => { const role = ev.detail.role; if ((0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.i)(role)) { const cancelButton = this.buttons.find(b => b.role === 'cancel'); this.callButtonHandler(cancelButton); } }; } connectedCallback() { (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.e)(this.el); } /** * Present the picker overlay after it has been created. */ present() { var _this5 = this; return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () { yield (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.d)(_this5, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined); if (_this5.duration > 0) { _this5.durationTimeout = setTimeout(() => _this5.dismiss(), _this5.duration); } })(); } /** * Dismiss the picker overlay after it has been presented. * * @param data Any data to emit in the dismiss events. * @param role The role of the element that is dismissing the picker. * This can be useful in a button handler for determining which button was * clicked to dismiss the picker. * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. */ dismiss(data, role) { if (this.durationTimeout) { clearTimeout(this.durationTimeout); } return (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.f)(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation); } /** * Returns a promise that resolves when the picker did dismiss. */ onDidDismiss() { return (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.g)(this.el, 'ionPickerDidDismiss'); } /** * Returns a promise that resolves when the picker will dismiss. */ onWillDismiss() { return (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.g)(this.el, 'ionPickerWillDismiss'); } /** * Get the column that matches the specified name. * * @param name The name of the column. */ getColumn(name) { return Promise.resolve(this.columns.find(column => column.name === name)); } buttonClick(button) { var _this6 = this; return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () { const role = button.role; if ((0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.i)(role)) { return _this6.dismiss(undefined, role); } const shouldDismiss = yield _this6.callButtonHandler(button); if (shouldDismiss) { return _this6.dismiss(_this6.getSelected(), button.role); } return Promise.resolve(); })(); } callButtonHandler(button) { var _this7 = this; return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () { if (button) { // a handler has been provided, execute it // pass the handler the values from the inputs const rtn = yield (0,_overlays_58fa8e4d_js__WEBPACK_IMPORTED_MODULE_10__.s)(button.handler, _this7.getSelected()); if (rtn === false) { // if the return value of the handler is false then do not dismiss return false; } } return true; })(); } getSelected() { const selected = {}; this.columns.forEach((col, index) => { const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined; selected[col.name] = { text: selectedColumn ? selectedColumn.text : undefined, value: selectedColumn ? selectedColumn.value : undefined, columnIndex: index }; }); return selected; } render() { const { htmlAttributes } = this; const mode = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_3__.b)(this); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)(_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.H, Object.assign({ "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: { zIndex: `${20000 + this.overlayIndex}` }, class: Object.assign({ [mode]: true, // Used internally for styling [`picker-${mode}`]: true, 'overlay-hidden': true }, (0,_theme_7670341c_js__WEBPACK_IMPORTED_MODULE_8__.g)(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { tabindex: "0" }), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-toolbar" }, this.buttons.map(b => (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: buttonWrapperClass(b) }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text)))), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-columns" }, (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-above-highlight" }), this.presented && this.columns.map(c => (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("ion-picker-column", { col: c })), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-below-highlight" }))), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { tabindex: "0" })); } get el() { return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.i)(this); } }; const buttonWrapperClass = button => { return { [`picker-toolbar-${button.role}`]: button.role !== undefined, 'picker-toolbar-button': true }; }; const buttonClass = button => { return Object.assign({ 'picker-button': true, 'ion-activatable': true }, (0,_theme_7670341c_js__WEBPACK_IMPORTED_MODULE_8__.g)(button.cssClass)); }; Picker.style = { ios: pickerIosCss, md: pickerMdCss }; 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}"; 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)}"; const PickerColumnCmp = class { constructor(hostRef) { (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.r)(this, hostRef); this.ionPickerColChange = (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.e)(this, "ionPickerColChange", 7); this.optHeight = 0; this.rotateFactor = 0; this.scaleFactor = 1; this.velocity = 0; this.y = 0; this.noAnimate = true; } colChanged() { this.refresh(); } connectedCallback() { var _this8 = this; return (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* () { let pickerRotateFactor = 0; let pickerScaleFactor = 0.81; const mode = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_3__.b)(_this8); if (mode === 'ios') { pickerRotateFactor = -0.46; pickerScaleFactor = 1; } _this8.rotateFactor = pickerRotateFactor; _this8.scaleFactor = pickerScaleFactor; _this8.gesture = (yield Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./index-422b6e83.js */ 36366))).createGesture({ el: _this8.el, gestureName: 'picker-swipe', gesturePriority: 100, threshold: 0, passive: false, onStart: ev => _this8.onStart(ev), onMove: ev => _this8.onMove(ev), onEnd: ev => _this8.onEnd(ev) }); _this8.gesture.enable(); _this8.tmrId = setTimeout(() => { _this8.noAnimate = false; _this8.refresh(true); }, 250); })(); } componentDidLoad() { const colEl = this.optsEl; if (colEl) { // DOM READ // We perfom a DOM read over a rendered item, this needs to happen after the first render this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0; } this.refresh(); } disconnectedCallback() { if (this.rafId !== undefined) cancelAnimationFrame(this.rafId); if (this.tmrId) clearTimeout(this.tmrId); if (this.gesture) { this.gesture.destroy(); this.gesture = undefined; } } emitColChange() { this.ionPickerColChange.emit(this.col); } setSelected(selectedIndex, duration) { // if there is a selected index, then figure out it's y position // if there isn't a selected index, then just use the top y position const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0; this.velocity = 0; // set what y position we're at if (this.rafId !== undefined) cancelAnimationFrame(this.rafId); this.update(y, duration, true); this.emitColChange(); } update(y, duration, saveY) { if (!this.optsEl) { return; } // ensure we've got a good round number :) let translateY = 0; let translateZ = 0; const { col, rotateFactor } = this; const selectedIndex = col.selectedIndex = this.indexForY(-y); const durationStr = duration === 0 ? '' : duration + 'ms'; const scaleStr = `scale(${this.scaleFactor})`; const children = this.optsEl.children; for (let i = 0; i < children.length; i++) { const button = children[i]; const opt = col.options[i]; const optOffset = i * this.optHeight + y; let transform = ''; if (rotateFactor !== 0) { const rotateX = optOffset * rotateFactor; if (Math.abs(rotateX) <= 90) { translateY = 0; translateZ = 90; transform = `rotateX(${rotateX}deg) `; } else { translateY = -9999; } } else { translateZ = 0; translateY = optOffset; } const selected = selectedIndex === i; transform += `translate3d(0px,${translateY}px,${translateZ}px) `; if (this.scaleFactor !== 1 && !selected) { transform += scaleStr; } // Update transition duration if (this.noAnimate) { opt.duration = 0; button.style.transitionDuration = ''; } else if (duration !== opt.duration) { opt.duration = duration; button.style.transitionDuration = durationStr; } // Update transform if (transform !== opt.transform) { opt.transform = transform; } button.style.transform = transform; // Update selected item if (selected !== opt.selected) { opt.selected = selected; if (selected) { button.classList.add(PICKER_OPT_SELECTED); } else { button.classList.remove(PICKER_OPT_SELECTED); } } } this.col.prevSelected = selectedIndex; if (saveY) { this.y = y; } if (this.lastIndex !== selectedIndex) { // have not set a last index yet (0,_haptic_029a46f6_js__WEBPACK_IMPORTED_MODULE_12__.b)(); this.lastIndex = selectedIndex; } } decelerate() { if (this.velocity !== 0) { // still decelerating this.velocity *= DECELERATION_FRICTION; // do not let it go slower than a velocity of 1 this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1); let y = this.y + this.velocity; if (y > this.minY) { // whoops, it's trying to scroll up farther than the options we have! y = this.minY; this.velocity = 0; } else if (y < this.maxY) { // gahh, it's trying to scroll down farther than we can! y = this.maxY; this.velocity = 0; } this.update(y, 0, true); const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1; if (notLockedIn) { // isn't locked in yet, keep decelerating until it is this.rafId = requestAnimationFrame(() => this.decelerate()); } else { this.velocity = 0; this.emitColChange(); (0,_haptic_029a46f6_js__WEBPACK_IMPORTED_MODULE_12__.h)(); } } else if (this.y % this.optHeight !== 0) { // needs to still get locked into a position so options line up const currentPos = Math.abs(this.y % this.optHeight); // create a velocity in the direction it needs to scroll this.velocity = currentPos > this.optHeight / 2 ? 1 : -1; this.decelerate(); } } indexForY(y) { return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1); } onStart(detail) { // We have to prevent default in order to block scrolling under the picker // but we DO NOT have to stop propagation, since we still want // some "click" events to capture if (detail.event.cancelable) { detail.event.preventDefault(); } detail.event.stopPropagation(); (0,_haptic_029a46f6_js__WEBPACK_IMPORTED_MODULE_12__.a)(); // reset everything if (this.rafId !== undefined) cancelAnimationFrame(this.rafId); const options = this.col.options; let minY = options.length - 1; let maxY = 0; for (let i = 0; i < options.length; i++) { if (!options[i].disabled) { minY = Math.min(minY, i); maxY = Math.max(maxY, i); } } this.minY = -(minY * this.optHeight); this.maxY = -(maxY * this.optHeight); } onMove(detail) { if (detail.event.cancelable) { detail.event.preventDefault(); } detail.event.stopPropagation(); // update the scroll position relative to pointer start position let y = this.y + detail.deltaY; if (y > this.minY) { // scrolling up higher than scroll area y = Math.pow(y, 0.8); this.bounceFrom = y; } else if (y < this.maxY) { // scrolling down below scroll area y += Math.pow(this.maxY - y, 0.9); this.bounceFrom = y; } else { this.bounceFrom = 0; } this.update(y, 0, false); } onEnd(detail) { if (this.bounceFrom > 0) { // bounce back up this.update(this.minY, 100, true); this.emitColChange(); return; } else if (this.bounceFrom < 0) { // bounce back down this.update(this.maxY, 100, true); this.emitColChange(); return; } this.velocity = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__.l)(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED); if (this.velocity === 0 && detail.deltaY === 0) { const opt = detail.event.target.closest('.picker-opt'); if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) { this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION); } } else { this.y += detail.deltaY; if (Math.abs(detail.velocityY) < 0.05) { const isScrollingUp = detail.deltaY > 0; const optHeightFraction = Math.abs(this.y) % this.optHeight / this.optHeight; if (isScrollingUp && optHeightFraction > 0.5) { this.velocity = Math.abs(this.velocity) * -1; } else if (!isScrollingUp && optHeightFraction <= 0.5) { this.velocity = Math.abs(this.velocity); } } this.decelerate(); } } refresh(forceRefresh) { var _a; let min = this.col.options.length - 1; let max = 0; const options = this.col.options; for (let i = 0; i < options.length; i++) { if (!options[i].disabled) { min = Math.min(min, i); max = Math.max(max, i); } } /** * Only update selected value if column has a * velocity of 0. If it does not, then the * column is animating might land on * a value different than the value at * selectedIndex */ if (this.velocity !== 0) { return; } const selectedIndex = (0,_helpers_3b390e48_js__WEBPACK_IMPORTED_MODULE_5__.l)(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max); if (this.col.prevSelected !== selectedIndex || forceRefresh) { const y = selectedIndex * this.optHeight * -1; this.velocity = 0; this.update(y, TRANSITION_DURATION, true); } } render() { const col = this.col; const mode = (0,_ionic_global_c74e4951_js__WEBPACK_IMPORTED_MODULE_3__.b)(this); return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)(_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.H, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, (0,_theme_7670341c_js__WEBPACK_IMPORTED_MODULE_8__.g)(col.cssClass)), style: { 'max-width': this.col.columnWidth } }, col.prefix && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix), (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: el => this.optsEl = el }, col.options.map((o, index) => (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text))), col.suffix && (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.h)("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix)); } get el() { return (0,_index_8e692445_js__WEBPACK_IMPORTED_MODULE_1__.i)(this); } static get watchers() { return { "col": ["colChanged"] }; } }; const PICKER_OPT_SELECTED = 'picker-opt-selected'; const DECELERATION_FRICTION = 0.97; const MAX_PICKER_SPEED = 90; const TRANSITION_DURATION = 150; PickerColumnCmp.style = { ios: pickerColumnIosCss, md: pickerColumnMdCss }; /***/ }), /***/ 50320: /*!*************************************************************!*\ !*** ./node_modules/@ionic/core/dist/esm/theme-7670341c.js ***! \*************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "c": () => (/* binding */ createColorClasses), /* harmony export */ "g": () => (/* binding */ getClassMap), /* harmony export */ "h": () => (/* binding */ hostContext), /* harmony export */ "o": () => (/* binding */ openURL) /* harmony export */ }); /* harmony import */ var _Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js */ 71670); /*! * (C) Ionic http://ionicframework.com - MIT License */ const hostContext = (selector, el) => { return el.closest(selector) !== null; }; /** * Create the mode and color classes for the component based on the classes passed in */ const createColorClasses = (color, cssClassMap) => { return typeof color === 'string' && color.length > 0 ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap; }; const getClassList = classes => { if (classes !== undefined) { const array = Array.isArray(classes) ? classes : classes.split(' '); return array.filter(c => c != null).map(c => c.trim()).filter(c => c !== ''); } return []; }; const getClassMap = classes => { const map = {}; getClassList(classes).forEach(c => map[c] = true); return map; }; const SCHEME = /^[a-z][a-z0-9+\-.]*:/; const openURL = /*#__PURE__*/function () { var _ref = (0,_Volumes_case_workspace_work_APPS_KA_APP_WORK_NOW_KA_PASS_V2_2_6_node_modules_babel_runtime_helpers_esm_asyncToGenerator_js__WEBPACK_IMPORTED_MODULE_0__["default"])(function* (url, ev, direction, animation) { if (url != null && url[0] !== '#' && !SCHEME.test(url)) { const router = document.querySelector('ion-router'); if (router) { if (ev != null) { ev.preventDefault(); } return router.push(url, direction, animation); } } return false; }); return function openURL(_x, _x2, _x3, _x4) { return _ref.apply(this, arguments); }; }(); /***/ }) }]) //# sourceMappingURL=9689.js.map