\r\n\t\t\t
\r\n\t`;\r\n}\r\n\r\nexport const renderAttractionListData = (list: IAttraction[] | null) => {\r\n\tconst type = 'attraction';\r\n\tconst errorMessage = t.error[type];\r\n\r\n\tif(!list) {\r\n\t\treturn `\r\n\t\t\t${repeatFunction(4, () => (\r\n\t\t\t\tskeleton({ layout: 'block', size: 'sm' })\r\n\t\t\t)).join('')}\r\n\t\t\t\r\n\t\t\t\t${isEditable ? `\r\n\t\t\t\t\t`: ``}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t${booking.attraction.attractionName}\r\n\t\t\t\t\t${booking.attraction.description}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t${isEditable ? ``: ``}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\tGuests\r\n\t\t\t\t\t${nicknames}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t${isEditable ? ``: ``}\r\n\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\tDate\r\n\t\t\t\t\t${cultureFormattedDate(booking.startDate)}\r\n\t\t\t\t\t${booking.startTime ? `${booking.startTime.slice(0,5)}` : ''}\r\n\t\t\t\t
\r\n\t\t\t- \r\n\t\t\t\t
- \r\n\t\t\t\t\t\r\n\t\t\t\t \r\n\t\t\t
- \r\n\t\t\t\t
- \r\n\t\t\t\t\t\r\n\t\t\t\t \r\n\t\t\t
- \r\n\t\t\t${list.map((item) => renderAttractionListItem(item, errorMessage)).join('')}\r\n\t\t
- \r\n\t\t\t\t
- \r\n\t\t\t\t\t\r\n\t\t\t\t \r\n\t\t\t
- \r\n\t\t\t\t
- \r\n\t\t\t\t\t\r\n\t\t\t\t \r\n\t\t\t
- \r\n\t\t\t${list.map((item, index: number) => renderPassListItem(item, errorMessage, index, checkedBarcodes)).join('')}\r\n\t\t
![](\"/dist/assets/gfx/Under_3s_Day_Pass.png\")
\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t
\r\n\t\t\r\n\t\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\t\r\n\t\t- \r\n\t\t\t\t
- \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t${item.imageUrl ? `\r\n\t\t\t\t\t
` : ''}\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t${item.nickname}
\r\n\t\t\t\t\t${formattedDateString}\r\n\t\t\t\t \r\n\t\t\t
\r\n\t\t
`;\r\n}\r\n\r\nexport const renderTicketsData = (tickets: ITicket[] | null) => {\r\n\tif(!tickets) {\r\n\t\treturn`\r\n\t\t${t.headline.arrivalTime}
\r\n\t\t\r\n\t\t\t
\r\n\t- \r\n\t\t\t\t${list.map((item, i) => {\r\n\t\t\t\t\tlet available = item.available;\r\n\t\t\t\t\tconst time = `\r\n\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t`}}).join('')}\r\n\t\t\t
${item.startTime}
\r\n\t\t\t\t\t\t${item.endTime ? 'to' : ''}
\r\n\t\t\t\t\t\t${item.endTime || ''}
\r\n\t\t\t\t\t`;\r\n\t\t\t\t\tif(item.available == '' || item.available == null) {\r\n\t\t\t\t\t\tavailable = '0';\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif(parseInt(available) >= amount) {\r\n\t\t\t\t\t\treturn `\r\n\t\t\t\t\t\t\r\n\t\t\t
`\r\n\t}\r\n\r\n\treturn `\r\n\t\t0 Tickets
\r\n\t\t\t\r\n\t\t\t\t${skeleton({ layout: 'block', size: 'xl' })}\r\n\t\t\t
\r\n\t\t\r\n\t\t\t
\r\n\t`;\r\n}","import { sleep } from \"./utils\";\r\n\r\nexport const startButtonLoadingState = (button: HTMLButtonElement, callback?: () => void) => {\r\n\tif(!button) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tconst text = button.querySelector('span');\r\n\r\n\tif(!text) {\r\n\t\treturn;\r\n\t}\r\n\r\n\ttext.classList.add('is-hidden');\r\n\tbutton.setAttribute('disabled', '');\r\n\r\n\tgetLoadingDots(button, () => {\r\n\t\tcallback && callback();\r\n\t}); \r\n\r\n\t// const onTransitionEnd = () => {\r\n\t// \ttext.removeEventListener('transitionend', onTransitionEnd);\r\n\t// \tgetLoadingDots(button, () => {\r\n\t// \t\tcallback();\r\n\t// \t}); \r\n\t// }\r\n\r\n\t// text.addEventListener('transitionend', onTransitionEnd);\r\n\r\n}\r\n\r\nconst getLoadingDots = (button: HTMLButtonElement, callback: () => void) => {\r\n\tif(!button) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tconst alreadyDots = button.querySelector('.load-dot-container');\r\n\r\n\tif(alreadyDots) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tconst markup = `\r\n\t\t${tickets.length} Tickets
\r\n\t\t\t\r\n\t\t\t\t${tickets.map((ticket: ITicket) => `\r\n\t\t\t\t\t
\r\n\t\t\r\n\t\t\t\t\t\t![\"Logo\"](\"${ticket.attraction.imageUrl}?anchor=center&mode=crop&width=260&height=180\")
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t`).join('')}\r\n\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t${!ticket.isFreeTicket ? `` : ''}\r\n\t\t\t\t\t\t${ticket.attraction.attractionName}
\r\n\t\t\t\t\t\t\t${cultureFormattedDate(ticket.startDate)} ${ticket.startTime.slice(0,5)}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t${ticket.passTier ? t.label.individual : t.label.freeTicket}
\r\n\t\t\t\t\t\t\t${ticket.nickname}
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t${ticket.passTier ? ticket.passTier : ''}
\r\n\t\t\t\t\t\t\t${expiryDate(ticket.expiryDate)}
\r\n\t\t\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t
\r\n\t`;\r\n\r\n\tbutton.innerHTML += markup;\r\n\r\n\tcallback();\r\n\r\n\t\r\n}\r\n\r\nexport const endButtonLoadingState = async (button: HTMLButtonElement) => {\r\n\tawait sleep(400);\r\n\tbutton.removeAttribute('disabled');\r\n\r\n\tconst dot = button.querySelector('.load-dot-container');\r\n\r\n\tif(dot) {\r\n\t\tdot.remove();\r\n\t}\r\n\r\n\tconst text = button.querySelector('span');\r\n\r\n\tif(text) {\r\n\t\ttext.classList.remove('is-hidden');\r\n\t}\r\n}","import { editBooking } from '../constants/dialogs';\r\nimport DialogViewBase, { ButtonVariation, IDialogOptions } from '../core/dialog-view-base';\r\nimport { IBooking, renderPassFullItem, renderBookingSummary } from '../templates/list-items';\r\nimport { IPassFullModel } from '../types/main';\r\nimport { endButtonLoadingState, startButtonLoadingState } from '../utils/animations';\r\n\r\nexport interface IExtendedDialogOptions extends IDialogOptions {\r\n\tbooking?: IBooking;\r\n\tpass?: IPassFullModel;\r\n\tonConfirm: () => void;\r\n\tonReject: () => void;\r\n\tprimaryButtonVariation?: ButtonVariation;\r\n\tsecondaryButtonVariation?: ButtonVariation;\r\n\tprimaryButtonText?: string;\r\n\tsecondaryButtonText?: string;\r\n\tisEditMode?: boolean;\r\n\tconfirmHandlerWithoutClosingDialog?: boolean;\r\n}\r\n\r\nexport default class DialogView extends DialogViewBase {\r\n\tprimaryButton: HTMLButtonElement | null;\r\n\tsecondaryButton: HTMLButtonElement | null;\r\n\taddEventListeners?: () => void;\r\n\tconstructor(options: IExtendedDialogOptions) {\r\n\t\tsuper(options);\r\n\t\tthis.handleConfirm = this.handleConfirm.bind(this);\r\n\t\tthis.handleReject = this.handleReject.bind(this);\r\n\t}\r\n\r\n\tasync handleConfirm() {\r\n\t\tthis.primaryButton && startButtonLoadingState(this.primaryButton);\r\n\r\n\t\tif(this.options.onConfirm) {\r\n\t\t\tawait this.options.onConfirm();\r\n\t\t}\r\n\r\n\t\tthis.primaryButton && endButtonLoadingState(this.primaryButton);\r\n\r\n\t\tif(!this.options.confirmHandlerWithoutClosingDialog) {\r\n\t\t\tthis.remove();\r\n\t\t}\t\r\n\t}\r\n\r\n\thandleReject() {\r\n\t\tthis.remove();\r\n\t}\r\n\r\n\tregisterEventListeners() {\r\n\t\tthis.primaryButton = this.el.querySelector('[data-primary-button]');\r\n\t\tthis.secondaryButton = this.el.querySelector('[data-secondary-button]');\r\n\t\t\r\n\t\tif(this.primaryButton) {\r\n\t\t\tthis.primaryButton.addEventListener('click', this.handleConfirm);\r\n\t\t}\r\n\t\tif(this.secondaryButton) {\r\n\t\t\tthis.secondaryButton.addEventListener('click', this.handleReject);\r\n\t\t}\r\n\r\n\t\tif(this.options.registerEventListeners) {\r\n\t\t\tthis.options.registerEventListeners();\r\n\t\t}\r\n\r\n\t\tif(this.options.isEditMode) {\r\n\t\t\tthis.handleEditBookingEventListeners();\r\n\t\t}\r\n\t}\r\n\r\n\thandleEditBookingEventListeners() {\r\n\t\tconst summaryGuestsEditButton = this.el.querySelector('[data-summary-guests]');\r\n\t\tconst summaryDateEditButton = this.el.querySelector('[data-summary-date]');\r\n\r\n\t\tif(summaryGuestsEditButton) {\r\n\t\t\tsummaryGuestsEditButton.addEventListener('click', () => editBooking(this.options.booking, 0));\r\n\t\t}\r\n\t\tif(summaryDateEditButton) {\r\n\t\t\tsummaryDateEditButton.addEventListener('click', () => editBooking(this.options.booking, 1));\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst wrapper = this.el.querySelector('.dialog-content-wrapper');\r\n\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t\r\n\t\twrapper.innerHTML = `\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t`;\r\n\r\n\t\tthis.registerEventListeners();\r\n\t\tthis.show();\r\n\t}\r\n}\r\n","export const listsRoutes = {\r\n attractions: '/api/Prebook/Booking/GetListOfAttractions',\r\n tickets: 'https://assets.codepen.io/19711/tickets.json',\r\n attractionAvailability: '/api/Prebook/Booking/GetAttractionAvailability'\r\n};\r\n\r\nexport const passesForAttractionRoute = (attractionid: string) => {\r\n return `/api/Prebook/Booking/GetListOfPassesForAttraction/${attractionid}`;\r\n};\r\n\r\nexport const passRoutes = {\r\n add: '/api/Prebook/Pass/AddPass',\r\n remove: `/api/PreBook/Pass/RemovePass`\r\n}\r\n\r\nexport const attractionAvailabilityRoute = (passtypes: string, attractionid: string, fromDate: string) => {\r\n return `/api/Prebook/Booking/GetAttractionAvailability?passtypes=${passtypes}&attractionid=${attractionid}&from=${fromDate}`;\r\n};\r\n\r\nexport const bookingRoutes = {\r\n cancelBooking: `/api/Prebook/Booking/CancelBooking`,\r\n createReservation: '/api/Prebook/Booking/CreateReservation',\r\n convertReservationToBooking: '/api/Prebook/Booking/ConvertReservationToBooking',\r\n getTickets: '/api/Prebook/Booking/GetTickets',\r\n};","export interface IFetchError {\r\n\terrors: any[];\r\n\terrorCode: number;\r\n\terrorMessage: string;\r\n\tdetail?: string;\r\n }\r\n \r\n export function isFetchErrorResponse(\r\n\tresponse: IFetchError | any,\r\n ): response is IFetchError {\r\n\treturn (response as IFetchError).errorCode !== undefined || (response as IFetchError).errorMessage !== undefined;\r\n }\r\n \r\n export interface IAttraction {\r\n\tattractionName: string;\r\n\tdescription?: string;\r\n\tmerlinAttractionId: string;\r\n\taccessoAttractionId: string;\r\n\timageUrl?: string;\r\n\tallowFreeTickets: boolean;\r\n }\r\n \r\n export interface IPass {\r\n\tnickname: string;\r\n\timageUrl?: string;\r\n\texpiryDate: string;\r\n\tpassTier: string;\r\n\tpassTierId: string;\r\n\tbarCode: string;\r\n }\r\n\r\n export interface IPassFullModel {\r\n\tid: string;\r\n\tnickname: string;\r\n\tbarCode: string;\r\n\texpiryDate: string;\r\n\tisExpired: boolean;\r\n\tpassTypeId: string;\r\n\tpassTier: string;\r\n\timageUrl?: string;\r\n\tdescription?: string;\r\n }\r\n \r\n export interface ITimeslot {\r\n\t startTime: string;\r\n\t capacity: string;\r\n\t available: string;\r\n\t endTime: string;\r\n }\r\n \r\n export interface IAvailability {\r\n\t calendarDate: string;\r\n\t isBlockedOut: boolean;\r\n\t blockOutReason: string;\r\n\t cardTypeid: string;\r\n\t cardType: string;\r\n\t timeSlots: ITimeslot[] | null;\r\n }\r\n \r\n export interface IGetAttractionAvailability {\r\n\t restrictions: string;\r\n\t availabilities: IAvailability[];\r\n }","import { IFetchError, isFetchErrorResponse } from '../types/main';\r\n\r\nexport default async function fetcher\r\n\t\t\t\t\t
\r\n\t\t\t\t${this.options.title}
\r\n\t\t\t\t\t${this.options.message ? `${this.options.message}
` : ''}\r\n\t\t\t\t\r\n\t\t\t\t${this.options.booking ? renderBookingSummary(this.options.booking, this.options.isEditMode) : ''}\r\n\t\t\t\t${this.options.pass ? renderPassFullItem(this.options.pass) : ''}\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t${this.options.primaryButtonText ? `` : ''}\r\n\t\t\t\t\t${this.options.secondaryButtonText ? `` : ''}\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t`;\r\n\r\n\t\tthis.registerEventListeners();\r\n\t\tthis.show();\r\n\t}\r\n}","export function hasProperty(obj, prop) {\n return Object.prototype.hasOwnProperty.call(obj, prop);\n}\n\nexport function lastItemOf(arr) {\n return arr[arr.length - 1];\n}\n\n// push only the items not included in the array\nexport function pushUnique(arr, ...items) {\n items.forEach((item) => {\n if (arr.includes(item)) {\n return;\n }\n arr.push(item);\n });\n return arr;\n}\n\nexport function stringToArray(str, separator) {\n // convert empty string to an empty array\n return str ? str.split(separator) : [];\n}\n\nexport function isInRange(testVal, min, max) {\n const minOK = min === undefined || testVal >= min;\n const maxOK = max === undefined || testVal <= max;\n return minOK && maxOK;\n}\n\nexport function limitToRange(val, min, max) {\n if (val < min) {\n return min;\n }\n if (val > max) {\n return max;\n }\n return val;\n}\n\nexport function createTagRepeat(tagName, repeat, attributes = {}, index = 0, html = '') {\n const openTagSrc = Object.keys(attributes).reduce((src, attr) => {\n let val = attributes[attr];\n if (typeof val === 'function') {\n val = val(index);\n }\n return `${src} ${attr}=\"${val}\"`;\n }, tagName);\n html += `<${openTagSrc}>`;\n\n const next = index + 1;\n return next < repeat\n ? createTagRepeat(tagName, repeat, attributes, next, html)\n : html;\n}\n\n// Remove the spacing surrounding tags for HTML parser not to create text nodes\n// before/after elements\nexport function optimizeTemplateHTML(html) {\n return html.replace(/>\\s+/g, '>').replace(/\\s+ name.toLowerCase().startsWith(monthName);\n // compare with both short and full names because some locales have periods\n // in the short names (not equal to the first X letters of the full names)\n monthIndex = locale.monthsShort.findIndex(compareNames);\n if (monthIndex < 0) {\n monthIndex = locale.months.findIndex(compareNames);\n }\n if (monthIndex < 0) {\n return NaN;\n }\n }\n\n newDate.setMonth(monthIndex);\n return newDate.getMonth() !== normalizeMonth(monthIndex)\n ? newDate.setDate(0)\n : newDate.getTime();\n },\n d(date, day) {\n return new Date(date).setDate(parseInt(day, 10));\n },\n};\n// format functions for date parts\nconst formatFns = {\n d(date) {\n return date.getDate();\n },\n dd(date) {\n return padZero(date.getDate(), 2);\n },\n D(date, locale) {\n return locale.daysShort[date.getDay()];\n },\n DD(date, locale) {\n return locale.days[date.getDay()];\n },\n m(date) {\n return date.getMonth() + 1;\n },\n mm(date) {\n return padZero(date.getMonth() + 1, 2);\n },\n M(date, locale) {\n return locale.monthsShort[date.getMonth()];\n },\n MM(date, locale) {\n return locale.months[date.getMonth()];\n },\n y(date) {\n return date.getFullYear();\n },\n yy(date) {\n return padZero(date.getFullYear(), 2).slice(-2);\n },\n yyyy(date) {\n return padZero(date.getFullYear(), 4);\n },\n};\n\n// get month index in normal range (0 - 11) from any number\nfunction normalizeMonth(monthIndex) {\n return monthIndex > -1 ? monthIndex % 12 : normalizeMonth(monthIndex + 12);\n}\n\nfunction padZero(num, length) {\n return num.toString().padStart(length, '0');\n}\n\nfunction parseFormatString(format) {\n if (typeof format !== 'string') {\n throw new Error(\"Invalid date format.\");\n }\n if (format in knownFormats) {\n return knownFormats[format];\n }\n\n // sprit the format string into parts and seprators\n const separators = format.split(reFormatTokens);\n const parts = format.match(new RegExp(reFormatTokens, 'g'));\n if (separators.length === 0 || !parts) {\n throw new Error(\"Invalid date format.\");\n }\n\n // collect format functions used in the format\n const partFormatters = parts.map(token => formatFns[token]);\n\n // collect parse function keys used in the format\n // iterate over parseFns' keys in order to keep the order of the keys.\n const partParserKeys = Object.keys(parseFns).reduce((keys, key) => {\n const token = parts.find(part => part[0] !== 'D' && part[0].toLowerCase() === key);\n if (token) {\n keys.push(key);\n }\n return keys;\n }, []);\n\n return knownFormats[format] = {\n parser(dateStr, locale) {\n const dateParts = dateStr.split(reNonDateParts).reduce((dtParts, part, index) => {\n if (part.length > 0 && parts[index]) {\n const token = parts[index][0];\n if (token === 'M') {\n dtParts.m = part;\n } else if (token !== 'D') {\n dtParts[token] = part;\n }\n }\n return dtParts;\n }, {});\n\n // iterate over partParserkeys so that the parsing is made in the oder\n // of year, month and day to prevent the day parser from correcting last\n // day of month wrongly\n return partParserKeys.reduce((origDate, key) => {\n const newDate = parseFns[key](origDate, dateParts[key], locale);\n // ingnore the part failed to parse\n return isNaN(newDate) ? origDate : newDate;\n }, today());\n },\n formatter(date, locale) {\n let dateStr = partFormatters.reduce((str, fn, index) => {\n return str += `${separators[index]}${fn(date, locale)}`;\n }, '');\n // separators' length is always parts' length + 1,\n return dateStr += lastItemOf(separators);\n },\n };\n}\n\nexport function parseDate(dateStr, format, locale) {\n if (dateStr instanceof Date || typeof dateStr === 'number') {\n const date = stripTime(dateStr);\n return isNaN(date) ? undefined : date;\n }\n if (!dateStr) {\n return undefined;\n }\n if (dateStr === 'today') {\n return today();\n }\n\n if (format && format.toValue) {\n const date = format.toValue(dateStr, format, locale);\n return isNaN(date) ? undefined : stripTime(date);\n }\n\n return parseFormatString(format).parser(dateStr, locale);\n}\n\nexport function formatDate(date, format, locale) {\n if (isNaN(date) || (!date && date !== 0)) {\n return '';\n }\n\n const dateObj = typeof date === 'number' ? new Date(date) : date;\n\n if (format.toDisplay) {\n return format.toDisplay(dateObj, format, locale);\n }\n\n return parseFormatString(format).formatter(dateObj, locale);\n}\n","const range = document.createRange();\n\nexport function parseHTML(html) {\n return range.createContextualFragment(html);\n}\n\nexport function getParent(el) {\n return el.parentElement\n || (el.parentNode instanceof ShadowRoot ? el.parentNode.host : undefined);\n}\n\nexport function isActiveElement(el) {\n return el.getRootNode().activeElement === el;\n}\n\n// equivalent to jQuery's :visble\nexport function isVisible(el) {\n return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);\n}\n\nexport function hideElement(el) {\n if (el.style.display === 'none') {\n return;\n }\n // back up the existing display setting in data-style-display\n if (el.style.display) {\n el.dataset.styleDisplay = el.style.display;\n }\n el.style.display = 'none';\n}\n\nexport function showElement(el) {\n if (el.style.display !== 'none') {\n return;\n }\n if (el.dataset.styleDisplay) {\n // restore backed-up dispay property\n el.style.display = el.dataset.styleDisplay;\n delete el.dataset.styleDisplay;\n } else {\n el.style.display = '';\n }\n}\n\nexport function emptyChildNodes(el) {\n if (el.firstChild) {\n el.removeChild(el.firstChild);\n emptyChildNodes(el);\n }\n}\n\nexport function replaceChildNodes(el, newChildNodes) {\n emptyChildNodes(el);\n if (newChildNodes instanceof DocumentFragment) {\n el.appendChild(newChildNodes);\n } else if (typeof newChildNodes === 'string') {\n el.appendChild(parseHTML(newChildNodes));\n } else if (typeof newChildNodes.forEach === 'function') {\n newChildNodes.forEach((node) => {\n el.appendChild(node);\n });\n }\n}\n","const listenerRegistry = new WeakMap();\nconst {addEventListener, removeEventListener} = EventTarget.prototype;\n\n// Register event listeners to a key object\n// listeners: array of listener definitions;\n// - each definition must be a flat array of event target and the arguments\n// used to call addEventListener() on the target\nexport function registerListeners(keyObj, listeners) {\n let registered = listenerRegistry.get(keyObj);\n if (!registered) {\n registered = [];\n listenerRegistry.set(keyObj, registered);\n }\n listeners.forEach((listener) => {\n addEventListener.call(...listener);\n registered.push(listener);\n });\n}\n\nexport function unregisterListeners(keyObj) {\n let listeners = listenerRegistry.get(keyObj);\n if (!listeners) {\n return;\n }\n listeners.forEach((listener) => {\n removeEventListener.call(...listener);\n });\n listenerRegistry.delete(keyObj);\n}\n\n// Event.composedPath() polyfill for Edge\n// based on https://gist.github.com/kleinfreund/e9787d73776c0e3750dcfcdc89f100ec\nif (!Event.prototype.composedPath) {\n const getComposedPath = (node, path = []) => {\n path.push(node);\n\n let parent;\n if (node.parentNode) {\n parent = node.parentNode;\n } else if (node.host) { // ShadowRoot\n parent = node.host;\n } else if (node.defaultView) { // Document\n parent = node.defaultView;\n }\n return parent ? getComposedPath(parent, path) : path;\n };\n\n Event.prototype.composedPath = function () {\n return getComposedPath(this.target);\n };\n}\n\nfunction findFromPath(path, criteria, currentTarget) {\n const [node, ...rest] = path;\n if (criteria(node)) {\n return node;\n }\n if (node === currentTarget || node.tagName === 'HTML' || rest.length === 0) {\n // stop when reaching currentTarget or \n return;\n }\n return findFromPath(rest, criteria, currentTarget);\n}\n\n// Search for the actual target of a delegated event\nexport function findElementInEventPath(ev, selector) {\n const criteria = typeof selector === 'function'\n ? selector\n : el => el instanceof Element && el.matches(selector);\n return findFromPath(ev.composedPath(), criteria, ev.currentTarget);\n}\n","// default locales\nexport const locales = {\n en: {\n days: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n daysShort: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"],\n daysMin: [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"],\n months: [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"],\n monthsShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n today: \"Today\",\n clear: \"Clear\",\n titleFormat: \"MM y\"\n }\n};\n","// config options updatable by setOptions() and their default values\nconst defaultOptions = {\n autohide: false,\n beforeShowDay: null,\n beforeShowDecade: null,\n beforeShowMonth: null,\n beforeShowYear: null,\n calendarWeeks: false,\n clearBtn: false,\n dateDelimiter: ',',\n datesDisabled: [],\n daysOfWeekDisabled: [],\n daysOfWeekHighlighted: [],\n defaultViewDate: undefined, // placeholder, defaults to today() by the program\n disableTouchKeyboard: false,\n format: 'mm/dd/yyyy',\n language: 'en',\n maxDate: null,\n maxNumberOfDates: 1,\n maxView: 3,\n minDate: null,\n nextArrow: '»',\n orientation: 'auto',\n pickLevel: 0,\n prevArrow: '«',\n showDaysOfWeek: true,\n showOnClick: true,\n showOnFocus: true,\n startView: 0,\n title: '',\n todayBtn: false,\n todayBtnMode: 0,\n todayHighlight: false,\n updateOnBlur: true,\n weekStart: 0,\n};\n\nexport default defaultOptions;\n","import {hasProperty, pushUnique} from '../lib/utils.js';\nimport {dateValue, regularizeDate} from '../lib/date.js';\nimport {reFormatTokens, parseDate} from '../lib/date-format.js';\nimport {parseHTML} from '../lib/dom.js';\nimport defaultOptions from './defaultOptions.js';\n\nconst {\n language: defaultLang,\n format: defaultFormat,\n weekStart: defaultWeekStart,\n} = defaultOptions;\n\n// Reducer function to filter out invalid day-of-week from the input\nfunction sanitizeDOW(dow, day) {\n return dow.length < 6 && day >= 0 && day < 7\n ? pushUnique(dow, day)\n : dow;\n}\n\nfunction calcEndOfWeek(startOfWeek) {\n return (startOfWeek + 6) % 7;\n}\n\n// validate input date. if invalid, fallback to the original value\nfunction validateDate(value, format, locale, origValue) {\n const date = parseDate(value, format, locale);\n return date !== undefined ? date : origValue;\n}\n\n// Validate viewId. if invalid, fallback to the original value\nfunction validateViewId(value, origValue, max = 3) {\n const viewId = parseInt(value, 10);\n return viewId >= 0 && viewId <= max ? viewId : origValue;\n}\n\n// Create Datepicker configuration to set\nexport default function processOptions(options, datepicker) {\n const inOpts = Object.assign({}, options);\n const config = {};\n const locales = datepicker.constructor.locales;\n const rangeSideIndex = datepicker.rangeSideIndex;\n let {\n format,\n language,\n locale,\n maxDate,\n maxView,\n minDate,\n pickLevel,\n startView,\n weekStart,\n } = datepicker.config || {};\n\n if (inOpts.language) {\n let lang;\n if (inOpts.language !== language) {\n if (locales[inOpts.language]) {\n lang = inOpts.language;\n } else {\n // Check if langauge + region tag can fallback to the one without\n // region (e.g. fr-CA → fr)\n lang = inOpts.language.split('-')[0];\n if (locales[lang] === undefined) {\n lang = false;\n }\n }\n }\n delete inOpts.language;\n if (lang) {\n language = config.language = lang;\n\n // update locale as well when updating language\n const origLocale = locale || locales[defaultLang];\n // use default language's properties for the fallback\n locale = Object.assign({\n format: defaultFormat,\n weekStart: defaultWeekStart\n }, locales[defaultLang]);\n if (language !== defaultLang) {\n Object.assign(locale, locales[language]);\n }\n config.locale = locale;\n // if format and/or weekStart are the same as old locale's defaults,\n // update them to new locale's defaults\n if (format === origLocale.format) {\n format = config.format = locale.format;\n }\n if (weekStart === origLocale.weekStart) {\n weekStart = config.weekStart = locale.weekStart;\n config.weekEnd = calcEndOfWeek(locale.weekStart);\n }\n }\n }\n\n if (inOpts.format) {\n const hasToDisplay = typeof inOpts.format.toDisplay === 'function';\n const hasToValue = typeof inOpts.format.toValue === 'function';\n const validFormatString = reFormatTokens.test(inOpts.format);\n if ((hasToDisplay && hasToValue) || validFormatString) {\n format = config.format = inOpts.format;\n }\n delete inOpts.format;\n }\n\n //*** pick level ***//\n let newPickLevel = pickLevel;\n if (inOpts.pickLevel !== undefined) {\n newPickLevel = validateViewId(inOpts.pickLevel, 2);\n delete inOpts.pickLevel;\n }\n if (newPickLevel !== pickLevel) {\n if (newPickLevel > pickLevel) {\n // complement current minDate/madDate so that the existing range will be\n // expanded to fit the new level later\n if (inOpts.minDate === undefined) {\n inOpts.minDate = minDate;\n }\n if (inOpts.maxDate === undefined) {\n inOpts.maxDate = maxDate;\n }\n }\n // complement datesDisabled so that it will be reset later\n if (!inOpts.datesDisabled) {\n inOpts.datesDisabled = [];\n }\n pickLevel = config.pickLevel = newPickLevel;\n }\n\n //*** dates ***//\n // while min and maxDate for \"no limit\" in the options are better to be null\n // (especially when updating), the ones in the config have to be undefined\n // because null is treated as 0 (= unix epoch) when comparing with time value\n let minDt = minDate;\n let maxDt = maxDate;\n if (inOpts.minDate !== undefined) {\n const defaultMinDt = dateValue(0, 0, 1);\n minDt = inOpts.minDate === null\n ? defaultMinDt // set 0000-01-01 to prevent negative values for year\n : validateDate(inOpts.minDate, format, locale, minDt);\n if (minDt !== defaultMinDt) {\n minDt = regularizeDate(minDt, pickLevel, false);\n }\n delete inOpts.minDate;\n }\n if (inOpts.maxDate !== undefined) {\n maxDt = inOpts.maxDate === null\n ? undefined\n : validateDate(inOpts.maxDate, format, locale, maxDt);\n if (maxDt !== undefined) {\n maxDt = regularizeDate(maxDt, pickLevel, true);\n }\n delete inOpts.maxDate;\n }\n if (maxDt < minDt) {\n minDate = config.minDate = maxDt;\n maxDate = config.maxDate = minDt;\n } else {\n if (minDate !== minDt) {\n minDate = config.minDate = minDt;\n }\n if (maxDate !== maxDt) {\n maxDate = config.maxDate = maxDt;\n }\n }\n\n if (inOpts.datesDisabled) {\n config.datesDisabled = inOpts.datesDisabled.reduce((dates, dt) => {\n const date = parseDate(dt, format, locale);\n return date !== undefined\n ? pushUnique(dates, regularizeDate(date, pickLevel, rangeSideIndex))\n : dates;\n }, []);\n delete inOpts.datesDisabled;\n }\n if (inOpts.defaultViewDate !== undefined) {\n const viewDate = parseDate(inOpts.defaultViewDate, format, locale);\n if (viewDate !== undefined) {\n config.defaultViewDate = viewDate;\n }\n delete inOpts.defaultViewDate;\n }\n\n //*** days of week ***//\n if (inOpts.weekStart !== undefined) {\n const wkStart = Number(inOpts.weekStart) % 7;\n if (!isNaN(wkStart)) {\n weekStart = config.weekStart = wkStart;\n config.weekEnd = calcEndOfWeek(wkStart);\n }\n delete inOpts.weekStart;\n }\n if (inOpts.daysOfWeekDisabled) {\n config.daysOfWeekDisabled = inOpts.daysOfWeekDisabled.reduce(sanitizeDOW, []);\n delete inOpts.daysOfWeekDisabled;\n }\n if (inOpts.daysOfWeekHighlighted) {\n config.daysOfWeekHighlighted = inOpts.daysOfWeekHighlighted.reduce(sanitizeDOW, []);\n delete inOpts.daysOfWeekHighlighted;\n }\n\n //*** multi date ***//\n if (inOpts.maxNumberOfDates !== undefined) {\n const maxNumberOfDates = parseInt(inOpts.maxNumberOfDates, 10);\n if (maxNumberOfDates >= 0) {\n config.maxNumberOfDates = maxNumberOfDates;\n config.multidate = maxNumberOfDates !== 1;\n }\n delete inOpts.maxNumberOfDates;\n }\n if (inOpts.dateDelimiter) {\n config.dateDelimiter = String(inOpts.dateDelimiter);\n delete inOpts.dateDelimiter;\n }\n\n //*** view ***//\n let newMaxView = maxView;\n if (inOpts.maxView !== undefined) {\n newMaxView = validateViewId(inOpts.maxView, maxView);\n delete inOpts.maxView;\n }\n // ensure max view >= pick level\n newMaxView = pickLevel > newMaxView ? pickLevel : newMaxView;\n if (newMaxView !== maxView) {\n maxView = config.maxView = newMaxView;\n }\n\n let newStartView = startView;\n if (inOpts.startView !== undefined) {\n newStartView = validateViewId(inOpts.startView, newStartView);\n delete inOpts.startView;\n }\n // ensure pick level <= start view <= max view\n if (newStartView < pickLevel) {\n newStartView = pickLevel;\n } else if (newStartView > maxView) {\n newStartView = maxView;\n }\n if (newStartView !== startView) {\n config.startView = newStartView;\n }\n\n //*** template ***//\n if (inOpts.prevArrow) {\n const prevArrow = parseHTML(inOpts.prevArrow);\n if (prevArrow.childNodes.length > 0) {\n config.prevArrow = prevArrow.childNodes;\n }\n delete inOpts.prevArrow;\n }\n if (inOpts.nextArrow) {\n const nextArrow = parseHTML(inOpts.nextArrow);\n if (nextArrow.childNodes.length > 0) {\n config.nextArrow = nextArrow.childNodes;\n }\n delete inOpts.nextArrow;\n }\n\n //*** misc ***//\n if (inOpts.disableTouchKeyboard !== undefined) {\n config.disableTouchKeyboard = 'ontouchstart' in document && !!inOpts.disableTouchKeyboard;\n delete inOpts.disableTouchKeyboard;\n }\n if (inOpts.orientation) {\n const orientation = inOpts.orientation.toLowerCase().split(/\\s+/g);\n config.orientation = {\n x: orientation.find(x => (x === 'left' || x === 'right')) || 'auto',\n y: orientation.find(y => (y === 'top' || y === 'bottom')) || 'auto',\n };\n delete inOpts.orientation;\n }\n if (inOpts.todayBtnMode !== undefined) {\n switch(inOpts.todayBtnMode) {\n case 0:\n case 1:\n config.todayBtnMode = inOpts.todayBtnMode;\n }\n delete inOpts.todayBtnMode;\n }\n\n //*** copy the rest ***//\n Object.keys(inOpts).forEach((key) => {\n if (inOpts[key] !== undefined && hasProperty(defaultOptions, key)) {\n config[key] = inOpts[key];\n }\n });\n\n return config;\n}\n","import {optimizeTemplateHTML} from '../../lib/utils.js';\n\nconst pickerTemplate = optimizeTemplateHTML(`\r\n\t\t\t\t\t
\r\n\t\t\t\t${this.options.title}
\r\n\t\t\t\t\t${this.options.message}
\r\n\t\t\t\t\t${t.description.registerPassNote}
\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\n
`);\n\nexport default pickerTemplate;\n","import {createTagRepeat, optimizeTemplateHTML} from '../../lib/utils.js';\n\nconst daysTemplate = optimizeTemplateHTML(`\n
\n\n \n
\n \n \n \n \n \n \n
\n \n
`);\n\nexport default daysTemplate;\n","import {createTagRepeat, optimizeTemplateHTML} from '../../lib/utils.js';\n\nconst calendarWeeksTemplate = optimizeTemplateHTML(`${createTagRepeat('span', 7, {class: 'dow'})}
\n ${createTagRepeat('span', 42)}
\n\n
`);\n\nexport default calendarWeeksTemplate;\n","import {pushUnique} from '../../lib/utils.js';\nimport {parseHTML, replaceChildNodes} from '../../lib/dom.js';\n\n// Base class of the view classes\nexport default class View {\n constructor(picker, config) {\n Object.assign(this, config, {\n picker,\n element: parseHTML(``).firstChild,\n selected: [],\n });\n this.init(this.picker.datepicker.config);\n }\n\n init(options) {\n if (options.pickLevel !== undefined) {\n this.isMinView = this.id === options.pickLevel;\n }\n this.setOptions(options);\n this.updateFocus();\n this.updateSelection();\n }\n\n // Execute beforeShow() callback and apply the result to the element\n // args:\n // - current - current value on the iteration on view rendering\n // - timeValue - time value of the date to pass to beforeShow()\n performBeforeHook(el, current, timeValue) {\n let result = this.beforeShow(new Date(timeValue));\n switch (typeof result) {\n case 'boolean':\n result = {enabled: result};\n break;\n case 'string':\n result = {classes: result};\n }\n\n if (result) {\n if (result.enabled === false) {\n el.classList.add('disabled');\n pushUnique(this.disabled, current);\n }\n if (result.classes) {\n const extraClasses = result.classes.split(/\\s+/);\n el.classList.add(...extraClasses);\n if (extraClasses.includes('disabled')) {\n pushUnique(this.disabled, current);\n }\n }\n if (result.content) {\n replaceChildNodes(el, result.content);\n }\n }\n }\n}\n","import {hasProperty, pushUnique} from '../../lib/utils.js';\nimport {today, dateValue, addDays, addWeeks, dayOfTheWeekOf, getWeek} from '../../lib/date.js';\nimport {formatDate} from '../../lib/date-format.js';\nimport {parseHTML, showElement, hideElement} from '../../lib/dom.js';\nimport daysTemplate from '../templates/daysTemplate.js';\nimport calendarWeeksTemplate from '../templates/calendarWeeksTemplate.js';\nimport View from './View.js';\n\nexport default class DaysView extends View {\n constructor(picker) {\n super(picker, {\n id: 0,\n name: 'days',\n cellClass: 'day',\n });\n }\n\n init(options, onConstruction = true) {\n if (onConstruction) {\n const inner = parseHTML(daysTemplate).firstChild;\n this.dow = inner.firstChild;\n this.grid = inner.lastChild;\n this.element.appendChild(inner);\n }\n super.init(options);\n }\n\n setOptions(options) {\n let updateDOW;\n\n if (hasProperty(options, 'minDate')) {\n this.minDate = options.minDate;\n }\n if (hasProperty(options, 'maxDate')) {\n this.maxDate = options.maxDate;\n }\n if (options.datesDisabled) {\n this.datesDisabled = options.datesDisabled;\n }\n if (options.daysOfWeekDisabled) {\n this.daysOfWeekDisabled = options.daysOfWeekDisabled;\n updateDOW = true;\n }\n if (options.daysOfWeekHighlighted) {\n this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;\n }\n if (options.todayHighlight !== undefined) {\n this.todayHighlight = options.todayHighlight;\n }\n if (options.weekStart !== undefined) {\n this.weekStart = options.weekStart;\n this.weekEnd = options.weekEnd;\n updateDOW = true;\n }\n if (options.locale) {\n const locale = this.locale = options.locale;\n this.dayNames = locale.daysMin;\n this.switchLabelFormat = locale.titleFormat;\n updateDOW = true;\n }\n if (options.beforeShowDay !== undefined) {\n this.beforeShow = typeof options.beforeShowDay === 'function'\n ? options.beforeShowDay\n : undefined;\n }\n\n if (options.calendarWeeks !== undefined) {\n if (options.calendarWeeks && !this.calendarWeeks) {\n const weeksElem = parseHTML(calendarWeeksTemplate).firstChild;\n this.calendarWeeks = {\n element: weeksElem,\n dow: weeksElem.firstChild,\n weeks: weeksElem.lastChild,\n };\n this.element.insertBefore(weeksElem, this.element.firstChild);\n } else if (this.calendarWeeks && !options.calendarWeeks) {\n this.element.removeChild(this.calendarWeeks.element);\n this.calendarWeeks = null;\n }\n }\n if (options.showDaysOfWeek !== undefined) {\n if (options.showDaysOfWeek) {\n showElement(this.dow);\n if (this.calendarWeeks) {\n showElement(this.calendarWeeks.dow);\n }\n } else {\n hideElement(this.dow);\n if (this.calendarWeeks) {\n hideElement(this.calendarWeeks.dow);\n }\n }\n }\n\n // update days-of-week when locale, daysOfweekDisabled or weekStart is changed\n if (updateDOW) {\n Array.from(this.dow.children).forEach((el, index) => {\n const dow = (this.weekStart + index) % 7;\n el.textContent = this.dayNames[dow];\n el.className = this.daysOfWeekDisabled.includes(dow) ? 'dow disabled' : 'dow';\n });\n }\n }\n\n // Apply update on the focused date to view's settings\n updateFocus() {\n const viewDate = new Date(this.picker.viewDate);\n const viewYear = viewDate.getFullYear();\n const viewMonth = viewDate.getMonth();\n const firstOfMonth = dateValue(viewYear, viewMonth, 1);\n const start = dayOfTheWeekOf(firstOfMonth, this.weekStart, this.weekStart);\n\n this.first = firstOfMonth;\n this.last = dateValue(viewYear, viewMonth + 1, 0);\n this.start = start;\n this.focused = this.picker.viewDate;\n }\n\n // Apply update on the selected dates to view's settings\n updateSelection() {\n const {dates, rangepicker} = this.picker.datepicker;\n this.selected = dates;\n if (rangepicker) {\n this.range = rangepicker.dates;\n }\n }\n\n // Update the entire view UI\n render() {\n // update today marker on ever render\n this.today = this.todayHighlight ? today() : undefined;\n // refresh disabled dates on every render in order to clear the ones added\n // by beforeShow hook at previous render\n this.disabled = [...this.datesDisabled];\n\n const switchLabel = formatDate(this.focused, this.switchLabelFormat, this.locale);\n this.picker.setViewSwitchLabel(switchLabel);\n this.picker.setPrevBtnDisabled(this.first <= this.minDate);\n this.picker.setNextBtnDisabled(this.last >= this.maxDate);\n\n if (this.calendarWeeks) {\n // start of the UTC week (Monday) of the 1st of the month\n const startOfWeek = dayOfTheWeekOf(this.first, 1, 1);\n Array.from(this.calendarWeeks.weeks.children).forEach((el, index) => {\n el.textContent = getWeek(addWeeks(startOfWeek, index));\n });\n }\n Array.from(this.grid.children).forEach((el, index) => {\n const classList = el.classList;\n const current = addDays(this.start, index);\n const date = new Date(current);\n const day = date.getDay();\n\n el.className = `datepicker-cell ${this.cellClass}`;\n el.dataset.date = current;\n el.textContent = date.getDate();\n\n if (current < this.first) {\n classList.add('prev');\n } else if (current > this.last) {\n classList.add('next');\n }\n if (this.today === current) {\n classList.add('today');\n }\n if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {\n classList.add('disabled');\n }\n if (this.daysOfWeekDisabled.includes(day)) {\n classList.add('disabled');\n pushUnique(this.disabled, current);\n }\n if (this.daysOfWeekHighlighted.includes(day)) {\n classList.add('highlighted');\n }\n if (this.range) {\n const [rangeStart, rangeEnd] = this.range;\n if (current > rangeStart && current < rangeEnd) {\n classList.add('range');\n }\n if (current === rangeStart) {\n classList.add('range-start');\n }\n if (current === rangeEnd) {\n classList.add('range-end');\n }\n }\n if (this.selected.includes(current)) {\n classList.add('selected');\n }\n if (current === this.focused) {\n classList.add('focused');\n }\n\n if (this.beforeShow) {\n this.performBeforeHook(el, current, current);\n }\n });\n }\n\n // Update the view UI by applying the changes of selected and focused items\n refresh() {\n const [rangeStart, rangeEnd] = this.range || [];\n this.grid\n .querySelectorAll('.range, .range-start, .range-end, .selected, .focused')\n .forEach((el) => {\n el.classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');\n });\n Array.from(this.grid.children).forEach((el) => {\n const current = Number(el.dataset.date);\n const classList = el.classList;\n if (current > rangeStart && current < rangeEnd) {\n classList.add('range');\n }\n if (current === rangeStart) {\n classList.add('range-start');\n }\n if (current === rangeEnd) {\n classList.add('range-end');\n }\n if (this.selected.includes(current)) {\n classList.add('selected');\n }\n if (current === this.focused) {\n classList.add('focused');\n }\n });\n }\n\n // Update the view UI by applying the change of focused item\n refreshFocus() {\n const index = Math.round((this.focused - this.start) / 86400000);\n this.grid.querySelectorAll('.focused').forEach((el) => {\n el.classList.remove('focused');\n });\n this.grid.children[index].classList.add('focused');\n }\n}\n","import {hasProperty, pushUnique, createTagRepeat} from '../../lib/utils.js';\nimport {dateValue} from '../../lib/date.js';\nimport {parseHTML} from '../../lib/dom.js';\nimport View from './View.js';\n\nfunction computeMonthRange(range, thisYear) {\n if (!range || !range[0] || !range[1]) {\n return;\n }\n\n const [[startY, startM], [endY, endM]] = range;\n if (startY > thisYear || endY < thisYear) {\n return;\n }\n return [\n startY === thisYear ? startM : -1,\n endY === thisYear ? endM : 12,\n ];\n}\n\nexport default class MonthsView extends View {\n constructor(picker) {\n super(picker, {\n id: 1,\n name: 'months',\n cellClass: 'month',\n });\n }\n\n init(options, onConstruction = true) {\n if (onConstruction) {\n this.grid = this.element;\n this.element.classList.add('months', 'datepicker-grid');\n this.grid.appendChild(parseHTML(createTagRepeat('span', 12, {'data-month': ix => ix})));\n }\n super.init(options);\n }\n\n setOptions(options) {\n if (options.locale) {\n this.monthNames = options.locale.monthsShort;\n }\n if (hasProperty(options, 'minDate')) {\n if (options.minDate === undefined) {\n this.minYear = this.minMonth = this.minDate = undefined;\n } else {\n const minDateObj = new Date(options.minDate);\n this.minYear = minDateObj.getFullYear();\n this.minMonth = minDateObj.getMonth();\n this.minDate = minDateObj.setDate(1);\n }\n }\n if (hasProperty(options, 'maxDate')) {\n if (options.maxDate === undefined) {\n this.maxYear = this.maxMonth = this.maxDate = undefined;\n } else {\n const maxDateObj = new Date(options.maxDate);\n this.maxYear = maxDateObj.getFullYear();\n this.maxMonth = maxDateObj.getMonth();\n this.maxDate = dateValue(this.maxYear, this.maxMonth + 1, 0);\n }\n }\n if (this.isMinView) {\n if (options.datesDisabled) {\n this.datesDisabled = options.datesDisabled;\n }\n } else {\n this.datesDisabled = [];\n }\n if (options.beforeShowMonth !== undefined) {\n this.beforeShow = typeof options.beforeShowMonth === 'function'\n ? options.beforeShowMonth\n : undefined;\n }\n }\n\n // Update view's settings to reflect the viewDate set on the picker\n updateFocus() {\n const viewDate = new Date(this.picker.viewDate);\n this.year = viewDate.getFullYear();\n this.focused = viewDate.getMonth();\n }\n\n // Update view's settings to reflect the selected dates\n updateSelection() {\n const {dates, rangepicker} = this.picker.datepicker;\n this.selected = dates.reduce((selected, timeValue) => {\n const date = new Date(timeValue);\n const year = date.getFullYear();\n const month = date.getMonth();\n if (selected[year] === undefined) {\n selected[year] = [month];\n } else {\n pushUnique(selected[year], month);\n }\n return selected;\n }, {});\n if (rangepicker && rangepicker.dates) {\n this.range = rangepicker.dates.map(timeValue => {\n const date = new Date(timeValue);\n return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];\n });\n }\n }\n\n // Update the entire view UI\n render() {\n // refresh disabled months on every render in order to clear the ones added\n // by beforeShow hook at previous render\n // this.disabled = [...this.datesDisabled];\n this.disabled = this.datesDisabled.reduce((arr, disabled) => {\n const dt = new Date(disabled);\n if (this.year === dt.getFullYear()) {\n arr.push(dt.getMonth());\n }\n return arr;\n }, []);\n\n this.picker.setViewSwitchLabel(this.year);\n this.picker.setPrevBtnDisabled(this.year <= this.minYear);\n this.picker.setNextBtnDisabled(this.year >= this.maxYear);\n\n const selected = this.selected[this.year] || [];\n const yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;\n const isMinYear = this.year === this.minYear;\n const isMaxYear = this.year === this.maxYear;\n const range = computeMonthRange(this.range, this.year);\n\n Array.from(this.grid.children).forEach((el, index) => {\n const classList = el.classList;\n const date = dateValue(this.year, index, 1);\n\n el.className = `datepicker-cell ${this.cellClass}`;\n if (this.isMinView) {\n el.dataset.date = date;\n }\n // reset text on every render to clear the custom content set\n // by beforeShow hook at previous render\n el.textContent = this.monthNames[index];\n\n if (\n yrOutOfRange\n || isMinYear && index < this.minMonth\n || isMaxYear && index > this.maxMonth\n || this.disabled.includes(index)\n ) {\n classList.add('disabled');\n }\n if (range) {\n const [rangeStart, rangeEnd] = range;\n if (index > rangeStart && index < rangeEnd) {\n classList.add('range');\n }\n if (index === rangeStart) {\n classList.add('range-start');\n }\n if (index === rangeEnd) {\n classList.add('range-end');\n }\n }\n if (selected.includes(index)) {\n classList.add('selected');\n }\n if (index === this.focused) {\n classList.add('focused');\n }\n\n if (this.beforeShow) {\n this.performBeforeHook(el, index, date);\n }\n });\n }\n\n // Update the view UI by applying the changes of selected and focused items\n refresh() {\n const selected = this.selected[this.year] || [];\n const [rangeStart, rangeEnd] = computeMonthRange(this.range, this.year) || [];\n this.grid\n .querySelectorAll('.range, .range-start, .range-end, .selected, .focused')\n .forEach((el) => {\n el.classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');\n });\n Array.from(this.grid.children).forEach((el, index) => {\n const classList = el.classList;\n if (index > rangeStart && index < rangeEnd) {\n classList.add('range');\n }\n if (index === rangeStart) {\n classList.add('range-start');\n }\n if (index === rangeEnd) {\n classList.add('range-end');\n }\n if (selected.includes(index)) {\n classList.add('selected');\n }\n if (index === this.focused) {\n classList.add('focused');\n }\n });\n }\n\n // Update the view UI by applying the change of focused item\n refreshFocus() {\n this.grid.querySelectorAll('.focused').forEach((el) => {\n el.classList.remove('focused');\n });\n this.grid.children[this.focused].classList.add('focused');\n }\n}","import {hasProperty, pushUnique, createTagRepeat} from '../../lib/utils.js';\nimport {dateValue, startOfYearPeriod} from '../../lib/date.js';\nimport {parseHTML} from '../../lib/dom.js';\nimport View from './View.js';\n\nfunction toTitleCase(word) {\n return [...word].reduce((str, ch, ix) => str += ix ? ch : ch.toUpperCase(), '');\n}\n\n// Class representing the years and decades view elements\nexport default class YearsView extends View {\n constructor(picker, config) {\n super(picker, config);\n }\n\n init(options, onConstruction = true) {\n if (onConstruction) {\n this.navStep = this.step * 10;\n this.beforeShowOption = `beforeShow${toTitleCase(this.cellClass)}`;\n this.grid = this.element;\n this.element.classList.add(this.name, 'datepicker-grid');\n this.grid.appendChild(parseHTML(createTagRepeat('span', 12)));\n }\n super.init(options);\n }\n\n setOptions(options) {\n if (hasProperty(options, 'minDate')) {\n if (options.minDate === undefined) {\n this.minYear = this.minDate = undefined;\n } else {\n this.minYear = startOfYearPeriod(options.minDate, this.step);\n this.minDate = dateValue(this.minYear, 0, 1);\n }\n }\n if (hasProperty(options, 'maxDate')) {\n if (options.maxDate === undefined) {\n this.maxYear = this.maxDate = undefined;\n } else {\n this.maxYear = startOfYearPeriod(options.maxDate, this.step);\n this.maxDate = dateValue(this.maxYear, 11, 31);\n }\n }\n if (this.isMinView) {\n if (options.datesDisabled) {\n this.datesDisabled = options.datesDisabled;\n }\n } else {\n this.datesDisabled = [];\n }\n if (options[this.beforeShowOption] !== undefined) {\n const beforeShow = options[this.beforeShowOption];\n this.beforeShow = typeof beforeShow === 'function' ? beforeShow : undefined;\n }\n }\n\n // Update view's settings to reflect the viewDate set on the picker\n updateFocus() {\n const viewDate = new Date(this.picker.viewDate);\n const first = startOfYearPeriod(viewDate, this.navStep);\n const last = first + 9 * this.step;\n\n this.first = first;\n this.last = last;\n this.start = first - this.step;\n this.focused = startOfYearPeriod(viewDate, this.step);\n }\n\n // Update view's settings to reflect the selected dates\n updateSelection() {\n const {dates, rangepicker} = this.picker.datepicker;\n this.selected = dates.reduce((years, timeValue) => {\n return pushUnique(years, startOfYearPeriod(timeValue, this.step));\n }, []);\n if (rangepicker && rangepicker.dates) {\n this.range = rangepicker.dates.map(timeValue => {\n if (timeValue !== undefined) {\n return startOfYearPeriod(timeValue, this.step);\n }\n });\n }\n }\n\n // Update the entire view UI\n render() {\n // refresh disabled years on every render in order to clear the ones added\n // by beforeShow hook at previous render\n // this.disabled = [...this.datesDisabled];\n this.disabled = this.datesDisabled.map(disabled => new Date(disabled).getFullYear());\n\n this.picker.setViewSwitchLabel(`${this.first}-${this.last}`);\n this.picker.setPrevBtnDisabled(this.first <= this.minYear);\n this.picker.setNextBtnDisabled(this.last >= this.maxYear);\n\n Array.from(this.grid.children).forEach((el, index) => {\n const classList = el.classList;\n const current = this.start + (index * this.step);\n const date = dateValue(current, 0, 1);\n\n el.className = `datepicker-cell ${this.cellClass}`;\n if (this.isMinView) {\n el.dataset.date = date;\n }\n el.textContent = el.dataset.year = current;\n\n if (index === 0) {\n classList.add('prev');\n } else if (index === 11) {\n classList.add('next');\n }\n if (current < this.minYear || current > this.maxYear || this.disabled.includes(current)) {\n classList.add('disabled');\n }\n if (this.range) {\n const [rangeStart, rangeEnd] = this.range;\n if (current > rangeStart && current < rangeEnd) {\n classList.add('range');\n }\n if (current === rangeStart) {\n classList.add('range-start');\n }\n if (current === rangeEnd) {\n classList.add('range-end');\n }\n }\n if (this.selected.includes(current)) {\n classList.add('selected');\n }\n if (current === this.focused) {\n classList.add('focused');\n }\n\n if (this.beforeShow) {\n this.performBeforeHook(el, current, date);\n }\n });\n }\n\n // Update the view UI by applying the changes of selected and focused items\n refresh() {\n const [rangeStart, rangeEnd] = this.range || [];\n this.grid\n .querySelectorAll('.range, .range-start, .range-end, .selected, .focused')\n .forEach((el) => {\n el.classList.remove('range', 'range-start', 'range-end', 'selected', 'focused');\n });\n Array.from(this.grid.children).forEach((el) => {\n const current = Number(el.textContent);\n const classList = el.classList;\n if (current > rangeStart && current < rangeEnd) {\n classList.add('range');\n }\n if (current === rangeStart) {\n classList.add('range-start');\n }\n if (current === rangeEnd) {\n classList.add('range-end');\n }\n if (this.selected.includes(current)) {\n classList.add('selected');\n }\n if (current === this.focused) {\n classList.add('focused');\n }\n });\n }\n\n // Update the view UI by applying the change of focused item\n refreshFocus() {\n const index = Math.round((this.focused - this.start) / this.step);\n this.grid.querySelectorAll('.focused').forEach((el) => {\n el.classList.remove('focused');\n });\n this.grid.children[index].classList.add('focused');\n }\n}\n","import {limitToRange} from '../lib/utils.js';\nimport {addMonths, addYears} from '../lib/date.js';\n\nexport function triggerDatepickerEvent(datepicker, type) {\n const detail = {\n date: datepicker.getDate(),\n viewDate: new Date(datepicker.picker.viewDate),\n viewId: datepicker.picker.currentView.id,\n datepicker,\n };\n datepicker.element.dispatchEvent(new CustomEvent(type, {detail}));\n}\n\n// direction: -1 (to previous), 1 (to next)\nexport function goToPrevOrNext(datepicker, direction) {\n const {minDate, maxDate} = datepicker.config;\n const {currentView, viewDate} = datepicker.picker;\n let newViewDate;\n switch (currentView.id) {\n case 0:\n newViewDate = addMonths(viewDate, direction);\n break;\n case 1:\n newViewDate = addYears(viewDate, direction);\n break;\n default:\n newViewDate = addYears(viewDate, direction * currentView.navStep);\n }\n newViewDate = limitToRange(newViewDate, minDate, maxDate);\n datepicker.picker.changeFocus(newViewDate).render();\n}\n\nexport function switchView(datepicker) {\n const viewId = datepicker.picker.currentView.id;\n if (viewId === datepicker.config.maxView) {\n return;\n }\n datepicker.picker.changeView(viewId + 1).render();\n}\n\nexport function unfocus(datepicker) {\n if (datepicker.config.updateOnBlur) {\n datepicker.update({revert: true});\n } else {\n datepicker.refresh('input');\n }\n datepicker.hide();\n}\n","import {today, addMonths, addYears} from '../lib/date.js';\nimport {findElementInEventPath} from '../lib/event.js';\nimport {goToPrevOrNext, switchView} from './functions.js';\n\nfunction goToSelectedMonthOrYear(datepicker, selection) {\n const picker = datepicker.picker;\n const viewDate = new Date(picker.viewDate);\n const viewId = picker.currentView.id;\n const newDate = viewId === 1\n ? addMonths(viewDate, selection - viewDate.getMonth())\n : addYears(viewDate, selection - viewDate.getFullYear());\n\n picker.changeFocus(newDate).changeView(viewId - 1).render();\n}\n\nexport function onClickTodayBtn(datepicker) {\n const picker = datepicker.picker;\n const currentDate = today();\n if (datepicker.config.todayBtnMode === 1) {\n if (datepicker.config.autohide) {\n datepicker.setDate(currentDate);\n return;\n }\n datepicker.setDate(currentDate, {render: false});\n picker.update();\n }\n if (picker.viewDate !== currentDate) {\n picker.changeFocus(currentDate);\n }\n picker.changeView(0).render();\n}\n\nexport function onClickClearBtn(datepicker) {\n datepicker.setDate({clear: true});\n}\n\nexport function onClickViewSwitch(datepicker) {\n switchView(datepicker);\n}\n\nexport function onClickPrevBtn(datepicker) {\n goToPrevOrNext(datepicker, -1);\n}\n\nexport function onClickNextBtn(datepicker) {\n goToPrevOrNext(datepicker, 1);\n}\n\n// For the picker's main block to delegete the events from `datepicker-cell`s\nexport function onClickView(datepicker, ev) {\n const target = findElementInEventPath(ev, '.datepicker-cell');\n if (!target || target.classList.contains('disabled')) {\n return;\n }\n\n const {id, isMinView} = datepicker.picker.currentView;\n if (isMinView) {\n datepicker.setDate(Number(target.dataset.date));\n } else if (id === 1) {\n goToSelectedMonthOrYear(datepicker, Number(target.dataset.month));\n } else {\n goToSelectedMonthOrYear(datepicker, Number(target.dataset.year));\n }\n}\n\nexport function onMousedownPicker(ev) {\n ev.preventDefault();\n}\n","import {hasProperty, lastItemOf, isInRange, limitToRange} from '../lib/utils.js';\nimport {today} from '../lib/date.js';\nimport {parseHTML, getParent, showElement, hideElement, emptyChildNodes} from '../lib/dom.js';\nimport {registerListeners} from '../lib/event.js';\nimport pickerTemplate from './templates/pickerTemplate.js';\nimport DaysView from './views/DaysView.js';\nimport MonthsView from './views/MonthsView.js';\nimport YearsView from './views/YearsView.js';\nimport {triggerDatepickerEvent} from '../events/functions.js';\nimport {\n onClickTodayBtn,\n onClickClearBtn,\n onClickViewSwitch,\n onClickPrevBtn,\n onClickNextBtn,\n onClickView,\n onMousedownPicker,\n} from '../events/pickerListeners.js';\n\nconst orientClasses = ['left', 'top', 'right', 'bottom'].reduce((obj, key) => {\n obj[key] = `datepicker-orient-${key}`;\n return obj;\n}, {});\nconst toPx = num => num ? `${num}px` : num;\n\nfunction processPickerOptions(picker, options) {\n if (options.title !== undefined) {\n if (options.title) {\n picker.controls.title.textContent = options.title;\n showElement(picker.controls.title);\n } else {\n picker.controls.title.textContent = '';\n hideElement(picker.controls.title);\n }\n }\n if (options.prevArrow) {\n const prevBtn = picker.controls.prevBtn;\n emptyChildNodes(prevBtn);\n options.prevArrow.forEach((node) => {\n prevBtn.appendChild(node.cloneNode(true));\n });\n }\n if (options.nextArrow) {\n const nextBtn = picker.controls.nextBtn;\n emptyChildNodes(nextBtn);\n options.nextArrow.forEach((node) => {\n nextBtn.appendChild(node.cloneNode(true));\n });\n }\n if (options.locale) {\n picker.controls.todayBtn.textContent = options.locale.today;\n picker.controls.clearBtn.textContent = options.locale.clear;\n }\n if (options.todayBtn !== undefined) {\n if (options.todayBtn) {\n showElement(picker.controls.todayBtn);\n } else {\n hideElement(picker.controls.todayBtn);\n }\n }\n if (hasProperty(options, 'minDate') || hasProperty(options, 'maxDate')) {\n const {minDate, maxDate} = picker.datepicker.config;\n picker.controls.todayBtn.disabled = !isInRange(today(), minDate, maxDate);\n }\n if (options.clearBtn !== undefined) {\n if (options.clearBtn) {\n showElement(picker.controls.clearBtn);\n } else {\n hideElement(picker.controls.clearBtn);\n }\n }\n}\n\n// Compute view date to reset, which will be...\n// - the last item of the selected dates or defaultViewDate if no selection\n// - limitted to minDate or maxDate if it exceeds the range\nfunction computeResetViewDate(datepicker) {\n const {dates, config} = datepicker;\n const viewDate = dates.length > 0 ? lastItemOf(dates) : config.defaultViewDate;\n return limitToRange(viewDate, config.minDate, config.maxDate);\n}\n\n// Change current view's view date\nfunction setViewDate(picker, newDate) {\n const oldViewDate = new Date(picker.viewDate);\n const newViewDate = new Date(newDate);\n const {id, year, first, last} = picker.currentView;\n const viewYear = newViewDate.getFullYear();\n\n picker.viewDate = newDate;\n if (viewYear !== oldViewDate.getFullYear()) {\n triggerDatepickerEvent(picker.datepicker, 'changeYear');\n }\n if (newViewDate.getMonth() !== oldViewDate.getMonth()) {\n triggerDatepickerEvent(picker.datepicker, 'changeMonth');\n }\n\n // return whether the new date is in different period on time from the one\n // displayed in the current view\n // when true, the view needs to be re-rendered on the next UI refresh.\n switch (id) {\n case 0:\n return newDate < first || newDate > last;\n case 1:\n return viewYear !== year;\n default:\n return viewYear < first || viewYear > last;\n }\n}\n\nfunction getTextDirection(el) {\n return window.getComputedStyle(el).direction;\n}\n\n// find the closet scrollable ancestor elemnt under the body\nfunction findScrollParents(el) {\n const parent = getParent(el);\n if (parent === document.body || !parent) {\n return;\n }\n\n // checking overflow only is enough because computed overflow cannot be\n // visible or a combination of visible and other when either axis is set\n // to other than visible.\n // (Setting one axis to other than 'visible' while the other is 'visible'\n // results in the other axis turning to 'auto')\n return window.getComputedStyle(parent).overflow !== 'visible'\n ? parent\n : findScrollParents(parent);\n}\n\n// Class representing the picker UI\nexport default class Picker {\n constructor(datepicker) {\n const {config} = this.datepicker = datepicker;\n\n const template = pickerTemplate.replace(/%buttonClass%/g, config.buttonClass);\n const element = this.element = parseHTML(template).firstChild;\n const [header, main, footer] = element.firstChild.children;\n const title = header.firstElementChild;\n const [prevBtn, viewSwitch, nextBtn] = header.lastElementChild.children;\n const [todayBtn, clearBtn] = footer.firstChild.children;\n const controls = {\n title,\n prevBtn,\n viewSwitch,\n nextBtn,\n todayBtn,\n clearBtn,\n };\n this.main = main;\n this.controls = controls;\n\n const elementClass = datepicker.inline ? 'inline' : 'dropdown';\n element.classList.add(`datepicker-${elementClass}`);\n\n processPickerOptions(this, config);\n this.viewDate = computeResetViewDate(datepicker);\n\n // set up event listeners\n registerListeners(datepicker, [\n [element, 'mousedown', onMousedownPicker],\n [main, 'click', onClickView.bind(null, datepicker)],\n [controls.viewSwitch, 'click', onClickViewSwitch.bind(null, datepicker)],\n [controls.prevBtn, 'click', onClickPrevBtn.bind(null, datepicker)],\n [controls.nextBtn, 'click', onClickNextBtn.bind(null, datepicker)],\n [controls.todayBtn, 'click', onClickTodayBtn.bind(null, datepicker)],\n [controls.clearBtn, 'click', onClickClearBtn.bind(null, datepicker)],\n ]);\n\n // set up views\n this.views = [\n new DaysView(this),\n new MonthsView(this),\n new YearsView(this, {id: 2, name: 'years', cellClass: 'year', step: 1}),\n new YearsView(this, {id: 3, name: 'decades', cellClass: 'decade', step: 10}),\n ];\n this.currentView = this.views[config.startView];\n\n this.currentView.render();\n this.main.appendChild(this.currentView.element);\n if (config.container) {\n config.container.appendChild(this.element);\n } else {\n datepicker.inputField.after(this.element);\n }\n }\n\n setOptions(options) {\n processPickerOptions(this, options);\n this.views.forEach((view) => {\n view.init(options, false);\n });\n this.currentView.render();\n }\n\n detach() {\n this.element.remove();\n }\n\n show() {\n if (this.active) {\n return;\n }\n\n const {datepicker, element} = this;\n if (datepicker.inline) {\n element.classList.add('active');\n } else {\n // ensure picker's direction matches input's\n const inputDirection = getTextDirection(datepicker.inputField);\n if (inputDirection !== getTextDirection(getParent(element))) {\n element.dir = inputDirection;\n } else if (element.dir) {\n element.removeAttribute('dir');\n }\n\n element.style.visiblity = 'hidden';\n element.classList.add('active');\n this.place();\n element.style.visiblity = '';\n\n if (datepicker.config.disableTouchKeyboard) {\n datepicker.inputField.blur();\n }\n }\n this.active = true;\n triggerDatepickerEvent(datepicker, 'show');\n }\n\n hide() {\n if (!this.active) {\n return;\n }\n this.datepicker.exitEditMode();\n this.element.classList.remove('active');\n this.active = false;\n triggerDatepickerEvent(this.datepicker, 'hide');\n }\n\n place() {\n const {classList, offsetParent, style} = this.element;\n const {config, inputField} = this.datepicker;\n const {\n width: calendarWidth,\n height: calendarHeight,\n } = this.element.getBoundingClientRect();\n const {\n left: inputLeft,\n top: inputTop,\n right: inputRight,\n bottom: inputBottom,\n width: inputWidth,\n height: inputHeight\n } = inputField.getBoundingClientRect();\n let {x: orientX, y: orientY} = config.orientation;\n let left = inputLeft;\n let top = inputTop;\n\n // caliculate offsetLeft/Top of inputField\n if (offsetParent === document.body || !offsetParent) {\n left += window.scrollX;\n top += window.scrollY;\n } else {\n const offsetParentRect = offsetParent.getBoundingClientRect();\n left -= offsetParentRect.left - offsetParent.scrollLeft;\n top -= offsetParentRect.top - offsetParent.scrollTop;\n }\n\n // caliculate the boundaries of the visible area that contains inputField\n const scrollParent = findScrollParents(inputField);\n let scrollAreaLeft = 0;\n let scrollAreaTop = 0;\n let {\n clientWidth: scrollAreaRight,\n clientHeight: scrollAreaBottom,\n } = document.documentElement;\n\n if (scrollParent) {\n const scrollParentRect = scrollParent.getBoundingClientRect();\n if (scrollParentRect.top > 0) {\n scrollAreaTop = scrollParentRect.top;\n }\n if (scrollParentRect.left > 0) {\n scrollAreaLeft = scrollParentRect.left;\n }\n if (scrollParentRect.right < scrollAreaRight) {\n scrollAreaRight = scrollParentRect.right;\n }\n if (scrollParentRect.bottom < scrollAreaBottom) {\n scrollAreaBottom = scrollParentRect.bottom;\n }\n }\n\n // determine the horizontal orientation and left position\n let adjustment = 0;\n if (orientX === 'auto') {\n if (inputLeft < scrollAreaLeft) {\n orientX = 'left';\n adjustment = scrollAreaLeft - inputLeft;\n } else if (inputLeft + calendarWidth > scrollAreaRight) {\n orientX = 'right';\n if (scrollAreaRight < inputRight) {\n adjustment = scrollAreaRight - inputRight;\n }\n } else if (getTextDirection(inputField) === 'rtl') {\n orientX = inputRight - calendarWidth < scrollAreaLeft ? 'left' : 'right';\n } else {\n orientX = 'left';\n }\n }\n if (orientX === 'right') {\n left += inputWidth - calendarWidth;\n }\n left += adjustment;\n\n // determine the vertical orientation and top position\n if (orientY === 'auto') {\n if (inputTop - calendarHeight > scrollAreaTop) {\n orientY = inputBottom + calendarHeight > scrollAreaBottom ? 'top' : 'bottom';\n } else {\n orientY = 'bottom';\n }\n }\n if (orientY === 'top') {\n top -= calendarHeight;\n } else {\n top += inputHeight;\n }\n\n classList.remove(...Object.values(orientClasses));\n classList.add(orientClasses[orientX], orientClasses[orientY]);\n\n style.left = toPx(left);\n style.top = toPx(top);\n }\n\n setViewSwitchLabel(labelText) {\n this.controls.viewSwitch.textContent = labelText;\n }\n\n setPrevBtnDisabled(disabled) {\n this.controls.prevBtn.disabled = disabled;\n }\n\n setNextBtnDisabled(disabled) {\n this.controls.nextBtn.disabled = disabled;\n }\n\n changeView(viewId) {\n const oldView = this.currentView;\n const newView = this.views[viewId];\n if (newView.id !== oldView.id) {\n this.currentView = newView;\n this._renderMethod = 'render';\n triggerDatepickerEvent(this.datepicker, 'changeView');\n this.main.replaceChild(newView.element, oldView.element);\n }\n return this;\n }\n\n // Change the focused date (view date)\n changeFocus(newViewDate) {\n this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refreshFocus';\n this.views.forEach((view) => {\n view.updateFocus();\n });\n return this;\n }\n\n // Apply the change of the selected dates\n update() {\n const newViewDate = computeResetViewDate(this.datepicker);\n this._renderMethod = setViewDate(this, newViewDate) ? 'render' : 'refresh';\n this.views.forEach((view) => {\n view.updateFocus();\n view.updateSelection();\n });\n return this;\n }\n\n // Refresh the picker UI\n render(quickRender = true) {\n const renderMethod = (quickRender && this._renderMethod) || 'render';\n delete this._renderMethod;\n\n this.currentView[renderMethod]();\n }\n}\n","import {isInRange} from '../lib/utils.js';\nimport {isActiveElement} from '../lib/dom.js';\nimport {addDays, addMonths, addYears, startOfYearPeriod} from '../lib/date.js';\nimport {goToPrevOrNext, switchView, unfocus} from './functions.js';\n\n// Find the closest date that doesn't meet the condition for unavailable date\n// Returns undefined if no available date is found\n// addFn: function to calculate the next date\n// - args: time value, amount\n// increase: amount to pass to addFn\n// testFn: function to test the unavailablity of the date\n// - args: time value; retun: true if unavailable\nfunction findNextAvailableOne(date, addFn, increase, testFn, min, max) {\n if (!isInRange(date, min, max)) {\n return;\n }\n if (testFn(date)) {\n const newDate = addFn(date, increase);\n return findNextAvailableOne(newDate, addFn, increase, testFn, min, max);\n }\n return date;\n}\n\n// direction: -1 (left/up), 1 (right/down)\n// vertical: true for up/down, false for left/right\nfunction moveByArrowKey(datepicker, ev, direction, vertical) {\n const picker = datepicker.picker;\n const currentView = picker.currentView;\n const step = currentView.step || 1;\n let viewDate = picker.viewDate;\n let addFn;\n let testFn;\n switch (currentView.id) {\n case 0:\n if (vertical) {\n viewDate = addDays(viewDate, direction * 7);\n } else if (ev.ctrlKey || ev.metaKey) {\n viewDate = addYears(viewDate, direction);\n } else {\n viewDate = addDays(viewDate, direction);\n }\n addFn = addDays;\n testFn = (date) => currentView.disabled.includes(date);\n break;\n case 1:\n viewDate = addMonths(viewDate, vertical ? direction * 4 : direction);\n addFn = addMonths;\n testFn = (date) => {\n const dt = new Date(date);\n const {year, disabled} = currentView;\n return dt.getFullYear() === year && disabled.includes(dt.getMonth());\n };\n break;\n default:\n viewDate = addYears(viewDate, direction * (vertical ? 4 : 1) * step);\n addFn = addYears;\n testFn = date => currentView.disabled.includes(startOfYearPeriod(date, step));\n }\n viewDate = findNextAvailableOne(\n viewDate,\n addFn,\n direction < 0 ? -step : step,\n testFn,\n currentView.minDate,\n currentView.maxDate\n );\n if (viewDate !== undefined) {\n picker.changeFocus(viewDate).render();\n }\n}\n\nexport function onKeydown(datepicker, ev) {\n const key = ev.key;\n if (key === 'Tab') {\n unfocus(datepicker);\n return;\n }\n\n const picker = datepicker.picker;\n const {id, isMinView} = picker.currentView;\n if (!picker.active) {\n if (key === 'ArrowDown') {\n picker.show();\n } else {\n if (key === 'Enter') {\n datepicker.update();\n } else if (key === 'Escape') {\n picker.show();\n }\n return;\n }\n } else if (datepicker.editMode) {\n if (key === 'Enter') {\n datepicker.exitEditMode({update: true, autohide: datepicker.config.autohide});\n } else if (key === 'Escape') {\n picker.hide();\n }\n return;\n } else {\n if (key === 'ArrowLeft') {\n if (ev.ctrlKey || ev.metaKey) {\n goToPrevOrNext(datepicker, -1);\n } else if (ev.shiftKey) {\n datepicker.enterEditMode();\n return;\n } else {\n moveByArrowKey(datepicker, ev, -1, false);\n }\n } else if (key === 'ArrowRight') {\n if (ev.ctrlKey || ev.metaKey) {\n goToPrevOrNext(datepicker, 1);\n } else if (ev.shiftKey) {\n datepicker.enterEditMode();\n return;\n } else {\n moveByArrowKey(datepicker, ev, 1, false);\n }\n } else if (key === 'ArrowUp') {\n if (ev.ctrlKey || ev.metaKey) {\n switchView(datepicker);\n } else if (ev.shiftKey) {\n datepicker.enterEditMode();\n return;\n } else {\n moveByArrowKey(datepicker, ev, -1, true);\n }\n } else if (key === 'ArrowDown') {\n if (ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {\n datepicker.enterEditMode();\n return;\n }\n moveByArrowKey(datepicker, ev, 1, true);\n } else if (key === 'Enter') {\n if (isMinView) {\n datepicker.setDate(picker.viewDate);\n return;\n }\n picker.changeView(id - 1).render();\n } else {\n if (key === 'Escape') {\n picker.hide();\n } else if (\n key === 'Backspace'\n || key === 'Delete'\n || (key.length === 1 && !ev.ctrlKey && !ev.metaKey)\n ) {\n datepicker.enterEditMode();\n }\n return;\n }\n }\n ev.preventDefault();\n}\n\nexport function onFocus(datepicker) {\n if (datepicker.config.showOnFocus && !datepicker._showing) {\n datepicker.show();\n }\n}\n\n// for the prevention for entering edit mode while getting focus on click\nexport function onMousedown(datepicker, ev) {\n const el = ev.target;\n if (datepicker.picker.active || datepicker.config.showOnClick) {\n el._active = isActiveElement(el);\n el._clicking = setTimeout(() => {\n delete el._active;\n delete el._clicking;\n }, 2000);\n }\n}\n\nexport function onClickInput(datepicker, ev) {\n const el = ev.target;\n if (!el._clicking) {\n return;\n }\n clearTimeout(el._clicking);\n delete el._clicking;\n\n if (el._active) {\n datepicker.enterEditMode();\n }\n delete el._active;\n\n if (datepicker.config.showOnClick) {\n datepicker.show();\n }\n}\n\nexport function onPaste(datepicker, ev) {\n if (ev.clipboardData.types.includes('text/plain')) {\n datepicker.enterEditMode();\n }\n}\n","import {isActiveElement} from '../lib/dom.js';\nimport {findElementInEventPath} from '../lib/event.js';\nimport {unfocus} from './functions.js';\n\n// for the `document` to delegate the events from outside the picker/input field\nexport function onClickOutside(datepicker, ev) {\n const {element, picker} = datepicker;\n // check both picker's and input's activeness to make updateOnBlur work in\n // the cases where...\n // - picker is hidden by ESC key press → input stays focused\n // - input is unfocused by closing mobile keyboard → piker is kept shown\n if (!picker.active && !isActiveElement(element)) {\n return;\n }\n const pickerElem = picker.element;\n if (findElementInEventPath(ev, el => el === element || el === pickerElem)) {\n return;\n }\n unfocus(datepicker);\n}\n","import {lastItemOf, stringToArray, isInRange} from './lib/utils.js';\nimport {today, regularizeDate} from './lib/date.js';\nimport {parseDate, formatDate} from './lib/date-format.js';\nimport {isActiveElement} from './lib/dom.js';\nimport {registerListeners, unregisterListeners} from './lib/event.js';\nimport {locales} from './i18n/base-locales.js';\nimport defaultOptions from './options/defaultOptions.js';\nimport processOptions from './options/processOptions.js';\nimport Picker from './picker/Picker.js';\nimport {triggerDatepickerEvent} from './events/functions.js';\nimport {onKeydown, onFocus, onMousedown, onClickInput, onPaste} from './events/inputFieldListeners.js';\nimport {onClickOutside} from './events/otherListeners.js';\n\nfunction stringifyDates(dates, config) {\n return dates\n .map(dt => formatDate(dt, config.format, config.locale))\n .join(config.dateDelimiter);\n}\n\n// parse input dates and create an array of time values for selection\n// returns undefined if there are no valid dates in inputDates\n// when origDates (current selection) is passed, the function works to mix\n// the input dates into the current selection\nfunction processInputDates(datepicker, inputDates, clear = false) {\n // const {config, dates: origDates, rangepicker} = datepicker;\n const {config, dates: origDates, rangeSideIndex} = datepicker;\n if (inputDates.length === 0) {\n // empty input is considered valid unless origiDates is passed\n return clear ? [] : undefined;\n }\n\n // const rangeEnd = rangepicker && datepicker === rangepicker.datepickers[1];\n let newDates = inputDates.reduce((dates, dt) => {\n let date = parseDate(dt, config.format, config.locale);\n if (date === undefined) {\n return dates;\n }\n // adjust to 1st of the month/Jan 1st of the year\n // or to the last day of the monh/Dec 31st of the year if the datepicker\n // is the range-end picker of a rangepicker\n date = regularizeDate(date, config.pickLevel, rangeSideIndex);\n if (\n isInRange(date, config.minDate, config.maxDate)\n && !dates.includes(date)\n && !config.datesDisabled.includes(date)\n && (config.pickLevel > 0 || !config.daysOfWeekDisabled.includes(new Date(date).getDay()))\n ) {\n dates.push(date);\n }\n return dates;\n }, []);\n if (newDates.length === 0) {\n return;\n }\n if (config.multidate && !clear) {\n // get the synmetric difference between origDates and newDates\n newDates = newDates.reduce((dates, date) => {\n if (!origDates.includes(date)) {\n dates.push(date);\n }\n return dates;\n }, origDates.filter(date => !newDates.includes(date)));\n }\n // do length check always because user can input multiple dates regardless of the mode\n return config.maxNumberOfDates && newDates.length > config.maxNumberOfDates\n ? newDates.slice(config.maxNumberOfDates * -1)\n : newDates;\n}\n\n// refresh the UI elements\n// modes: 1: input only, 2, picker only, 3 both\nfunction refreshUI(datepicker, mode = 3, quickRender = true) {\n const {config, picker, inputField} = datepicker;\n if (mode & 2) {\n const newView = picker.active ? config.pickLevel : config.startView;\n picker.update().changeView(newView).render(quickRender);\n }\n if (mode & 1 && inputField) {\n inputField.value = stringifyDates(datepicker.dates, config);\n }\n}\n\nfunction setDate(datepicker, inputDates, options) {\n let {clear, render, autohide, revert} = options;\n if (render === undefined) {\n render = true;\n }\n if (!render) {\n autohide = false;\n } else if (autohide === undefined) {\n autohide = datepicker.config.autohide;\n }\n\n const newDates = processInputDates(datepicker, inputDates, clear);\n if (!newDates && !revert) {\n return;\n }\n if (newDates && newDates.toString() !== datepicker.dates.toString()) {\n datepicker.dates = newDates;\n refreshUI(datepicker, render ? 3 : 1);\n triggerDatepickerEvent(datepicker, 'changeDate');\n } else {\n refreshUI(datepicker, 1);\n }\n\n if (autohide) {\n datepicker.hide();\n }\n}\n\n/**\n * Class representing a date picker\n */\nexport default class Datepicker {\n /**\n * Create a date picker\n * @param {Element} element - element to bind a date picker\n * @param {Object} [options] - config options\n * @param {DateRangePicker} [rangepicker] - DateRangePicker instance the\n * date picker belongs to. Use this only when creating date picker as a part\n * of date range picker\n */\n constructor(element, options = {}, rangepicker = undefined) {\n element.datepicker = this;\n this.element = element;\n\n const config = this.config = Object.assign({\n buttonClass: (options.buttonClass && String(options.buttonClass)) || 'button',\n container: null,\n defaultViewDate: today(),\n maxDate: undefined,\n minDate: undefined,\n }, processOptions(defaultOptions, this));\n // configure by type\n const inline = this.inline = element.tagName !== 'INPUT';\n let inputField;\n if (inline) {\n config.container = element;\n } else {\n if (options.container) {\n // omit string type check because it doesn't guarantee to avoid errors\n // (invalid selector string causes abend with sytax error)\n config.container = options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container);\n }\n inputField = this.inputField = element;\n inputField.classList.add('datepicker-input');\n }\n if (rangepicker) {\n // check validiry\n const index = rangepicker.inputs.indexOf(inputField);\n const datepickers = rangepicker.datepickers;\n if (index < 0 || index > 1 || !Array.isArray(datepickers)) {\n throw Error('Invalid rangepicker object.');\n }\n // attach itaelf to the rangepicker here so that processInputDates() can\n // determine if this is the range-end picker of the rangepicker while\n // setting inital values when pickLevel > 0\n datepickers[index] = this;\n // add getter for rangepicker\n Object.defineProperty(this, 'rangepicker', {\n get() {\n return rangepicker;\n },\n });\n Object.defineProperty(this, 'rangeSideIndex', {\n get() {\n return index;\n },\n });\n }\n\n // set up config\n this._options = options;\n Object.assign(config, processOptions(options, this));\n\n // set initial dates\n let initialDates;\n if (inline) {\n initialDates = stringToArray(element.dataset.date, config.dateDelimiter);\n delete element.dataset.date;\n } else {\n initialDates = stringToArray(inputField.value, config.dateDelimiter);\n }\n this.dates = [];\n // process initial value\n const inputDateValues = processInputDates(this, initialDates);\n if (inputDateValues && inputDateValues.length > 0) {\n this.dates = inputDateValues;\n }\n if (inputField) {\n inputField.value = stringifyDates(this.dates, config);\n }\n\n const picker = this.picker = new Picker(this);\n\n if (inline) {\n this.show();\n } else {\n // set up event listeners in other modes\n const onMousedownDocument = onClickOutside.bind(null, this);\n const listeners = [\n [inputField, 'keydown', onKeydown.bind(null, this)],\n [inputField, 'focus', onFocus.bind(null, this)],\n [inputField, 'mousedown', onMousedown.bind(null, this)],\n [inputField, 'click', onClickInput.bind(null, this)],\n [inputField, 'paste', onPaste.bind(null, this)],\n [document, 'mousedown', onMousedownDocument],\n [document, 'touchstart', onMousedownDocument],\n [window, 'resize', picker.place.bind(picker)]\n ];\n registerListeners(this, listeners);\n }\n }\n\n /**\n * Format Date object or time value in given format and language\n * @param {Date|Number} date - date or time value to format\n * @param {String|Object} format - format string or object that contains\n * toDisplay() custom formatter, whose signature is\n * - args:\n * - date: {Date} - Date instance of the date passed to the method\n * - format: {Object} - the format object passed to the method\n * - locale: {Object} - locale for the language specified by `lang`\n * - return:\n * {String} formatted date\n * @param {String} [lang=en] - language code for the locale to use\n * @return {String} formatted date\n */\n static formatDate(date, format, lang) {\n return formatDate(date, format, lang && locales[lang] || locales.en);\n }\n\n /**\n * Parse date string\n * @param {String|Date|Number} dateStr - date string, Date object or time\n * value to parse\n * @param {String|Object} format - format string or object that contains\n * toValue() custom parser, whose signature is\n * - args:\n * - dateStr: {String|Date|Number} - the dateStr passed to the method\n * - format: {Object} - the format object passed to the method\n * - locale: {Object} - locale for the language specified by `lang`\n * - return:\n * {Date|Number} parsed date or its time value\n * @param {String} [lang=en] - language code for the locale to use\n * @return {Number} time value of parsed date\n */\n static parseDate(dateStr, format, lang) {\n return parseDate(dateStr, format, lang && locales[lang] || locales.en);\n }\n\n /**\n * @type {Object} - Installed locales in `[languageCode]: localeObject` format\n * en`:_English (US)_ is pre-installed.\n */\n static get locales() {\n return locales;\n }\n\n /**\n * @type {Boolean} - Whether the picker element is shown. `true` whne shown\n */\n get active() {\n return !!(this.picker && this.picker.active);\n }\n\n /**\n * @type {HTMLDivElement} - DOM object of picker element\n */\n get pickerElement() {\n return this.picker ? this.picker.element : undefined;\n }\n\n /**\n * Set new values to the config options\n * @param {Object} options - config options to update\n */\n setOptions(options) {\n const picker = this.picker;\n const newOptions = processOptions(options, this);\n Object.assign(this._options, options);\n Object.assign(this.config, newOptions);\n picker.setOptions(newOptions);\n\n refreshUI(this, 3);\n }\n\n /**\n * Show the picker element\n */\n show() {\n if (this.inputField) {\n if (this.inputField.disabled) {\n return;\n }\n if (!isActiveElement(this.inputField) && !this.config.disableTouchKeyboard) {\n this._showing = true;\n this.inputField.focus();\n delete this._showing;\n }\n }\n this.picker.show();\n }\n\n /**\n * Hide the picker element\n * Not available on inline picker\n */\n hide() {\n if (this.inline) {\n return;\n }\n this.picker.hide();\n this.picker.update().changeView(this.config.startView).render();\n }\n\n /**\n * Destroy the Datepicker instance\n * @return {Detepicker} - the instance destroyed\n */\n destroy() {\n this.hide();\n unregisterListeners(this);\n this.picker.detach();\n if (!this.inline) {\n this.inputField.classList.remove('datepicker-input');\n }\n delete this.element.datepicker;\n return this;\n }\n\n /**\n * Get the selected date(s)\n *\n * The method returns a Date object of selected date by default, and returns\n * an array of selected dates in multidate mode. If format string is passed,\n * it returns date string(s) formatted in given format.\n *\n * @param {String} [format] - Format string to stringify the date(s)\n * @return {Date|String|Date[]|String[]} - selected date(s), or if none is\n * selected, empty array in multidate mode and untitled in sigledate mode\n */\n getDate(format = undefined) {\n const callback = format\n ? date => formatDate(date, format, this.config.locale)\n : date => new Date(date);\n\n if (this.config.multidate) {\n return this.dates.map(callback);\n }\n if (this.dates.length > 0) {\n return callback(this.dates[0]);\n }\n }\n\n /**\n * Set selected date(s)\n *\n * In multidate mode, you can pass multiple dates as a series of arguments\n * or an array. (Since each date is parsed individually, the type of the\n * dates doesn't have to be the same.)\n * The given dates are used to toggle the select status of each date. The\n * number of selected dates is kept from exceeding the length set to\n * maxNumberOfDates.\n *\n * With clear: true option, the method can be used to clear the selection\n * and to replace the selection instead of toggling in multidate mode.\n * If the option is passed with no date arguments or an empty dates array,\n * it works as \"clear\" (clear the selection then set nothing), and if the\n * option is passed with new dates to select, it works as \"replace\" (clear\n * the selection then set the given dates)\n *\n * When render: false option is used, the method omits re-rendering the\n * picker element. In this case, you need to call refresh() method later in\n * order for the picker element to reflect the changes. The input field is\n * refreshed always regardless of this option.\n *\n * When invalid (unparsable, repeated, disabled or out-of-range) dates are\n * passed, the method ignores them and applies only valid ones. In the case\n * that all the given dates are invalid, which is distinguished from passing\n * no dates, the method considers it as an error and leaves the selection\n * untouched. (The input field also remains untouched unless revert: true\n * option is used.)\n *\n * @param {...(Date|Number|String)|Array} [dates] - Date strings, Date\n * objects, time values or mix of those for new selection\n * @param {Object} [options] - function options\n * - clear: {boolean} - Whether to clear the existing selection\n * defualt: false\n * - render: {boolean} - Whether to re-render the picker element\n * default: true\n * - autohide: {boolean} - Whether to hide the picker element after re-render\n * Ignored when used with render: false\n * default: config.autohide\n * - revert: {boolean} - Whether to refresh the input field when all the\n * passed dates are invalid\n * default: false\n */\n setDate(...args) {\n const dates = [...args];\n const opts = {};\n const lastArg = lastItemOf(args);\n if (\n typeof lastArg === 'object'\n && !Array.isArray(lastArg)\n && !(lastArg instanceof Date)\n && lastArg\n ) {\n Object.assign(opts, dates.pop());\n }\n\n const inputDates = Array.isArray(dates[0]) ? dates[0] : dates;\n setDate(this, inputDates, opts);\n }\n\n /**\n * Update the selected date(s) with input field's value\n * Not available on inline picker\n *\n * The input field will be refreshed with properly formatted date string.\n *\n * In the case that all the entered dates are invalid (unparsable, repeated,\n * disabled or out-of-range), whixh is distinguished from empty input field,\n * the method leaves the input field untouched as well as the selection by\n * default. If revert: true option is used in this case, the input field is\n * refreshed with the existing selection.\n *\n * @param {Object} [options] - function options\n * - autohide: {boolean} - whether to hide the picker element after refresh\n * default: false\n * - revert: {boolean} - Whether to refresh the input field when all the\n * passed dates are invalid\n * default: false\n */\n update(options = undefined) {\n if (this.inline) {\n return;\n }\n\n const opts = Object.assign(options || {}, {clear: true, render: true});\n const inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);\n setDate(this, inputDates, opts);\n }\n\n /**\n * Refresh the picker element and the associated input field\n * @param {String} [target] - target item when refreshing one item only\n * 'picker' or 'input'\n * @param {Boolean} [forceRender] - whether to re-render the picker element\n * regardless of its state instead of optimized refresh\n */\n refresh(target = undefined, forceRender = false) {\n if (target && typeof target !== 'string') {\n forceRender = target;\n target = undefined;\n }\n\n let mode;\n if (target === 'picker') {\n mode = 2;\n } else if (target === 'input') {\n mode = 1;\n } else {\n mode = 3;\n }\n refreshUI(this, mode, !forceRender);\n }\n\n /**\n * Enter edit mode\n * Not available on inline picker or when the picker element is hidden\n */\n enterEditMode() {\n if (this.inline || !this.picker.active || this.editMode) {\n return;\n }\n this.editMode = true;\n this.inputField.classList.add('in-edit');\n }\n\n /**\n * Exit from edit mode\n * Not available on inline picker\n * @param {Object} [options] - function options\n * - update: {boolean} - whether to call update() after exiting\n * If false, input field is revert to the existing selection\n * default: false\n */\n exitEditMode(options = undefined) {\n if (this.inline || !this.editMode) {\n return;\n }\n const opts = Object.assign({update: false}, options);\n delete this.editMode;\n this.inputField.classList.remove('in-edit');\n if (opts.update) {\n this.update(opts);\n }\n }\n}\n","import { makeElement, sleep } from './utils';\r\n\r\nconst Default = {\r\n\tinterval : 3000\r\n};\r\n\r\n\r\n/**\r\n * This method handles all validation functions inside our form\r\n * @param {HTMLElement} el container where you want validation, for example in our Stepper Form, this would be the current step\r\n * @param {HTMLElement} context main wrapper, that contains the entire form\r\n * @param {Object} options { showError: boolean; showGlobalErrorFlag: boolean; } local/global validation error messages\r\n */\r\n export default class FormValidation {\r\n\tel: HTMLElement;\r\n\tcontext: any;\r\n\toptions: any;\r\n\terrorTemplate: HTMLElement;\r\n\t_interval: any;\r\n\t_isPaused: boolean;\r\n\tconstructor(el: HTMLElement, context: any, options: any) {\r\n\t\tthis.el = el;\r\n\t\tthis.context = context;\r\n\t\tthis.options = {\r\n\t\t\tshowError: true,\r\n\t\t\tshowGlobalErrorFlag: false\r\n\t\t};\r\n\t\tthis.options = {...this.options, ...options};\r\n\t\tthis._isPaused = false;\r\n\t\tthis._interval = null;\r\n\t\tconst temp = document.querySelector(\"#error-template\") as any;\r\n\t\tthis.errorTemplate = temp && document.importNode(temp.content, true).querySelector(\".error-template\");\r\n\t}\r\n\tonInputChange(e: Event) {\r\n\t\tthis.validateInput(e.target as HTMLElement);\r\n\t}\r\n\tonSubmit() {\r\n\t\tlet errors = 0;\r\n\t\tfor (const field of Array.from(this.el.querySelectorAll('.input-validation:not(.is-hidden)'))) {\r\n\t\t\tif (!this.validateInput(field as HTMLElement)) {\r\n\t\t\t\terrors += 1;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (errors) {\r\n\t\t\tthis.options.scrollToInput && this.onFormValidationFail();\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\treturn true;\r\n\t}\r\n\r\n\tvalidateInput(container: HTMLElement) {\r\n\t\tthis.clearError(container);\r\n\r\n\t\tlet validateType = container.dataset.validate || '';\r\n\t\tconst field = container.querySelector(\".input-field\") as HTMLInputElement;\r\n\t\tlet value = '';\r\n\r\n\t\tif(field) {\r\n\t\t\tvalue = field.value;\r\n\t\t}\r\n\t\r\n\t\tlet ok = false;\r\n let showGlobalErrorFlag = false;\r\n\r\n\t\tswitch (validateType) {\r\n\t\t\tcase \"email\":\r\n\t\t\t\tok = (/^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/).test(value);\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"checkbox\":\r\n\t\t\t\tok = field.checked;\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"date\":\r\n\t\t\t\tshowGlobalErrorFlag = true;\r\n\t\t\t\tconst dates: HTMLSpanElement[] = Array.from(this.el.querySelectorAll('[data-date]'));\r\n\t\t\t\tfor (const date of dates) {\r\n\t\t\t\t\tif (date.classList.contains('selected')) {\r\n\t\t\t\t\t\tok = true;\r\n\t\t\t\t\t break;\r\n\t\t\t\t\t}\r\n\t\t\t\t }\r\n\t\t\t\tbreak;\r\n\t\t\tcase \"group\":\r\n\t\t\t\tshowGlobalErrorFlag = true;\r\n\t\t\t\tconst fields: HTMLInputElement[] = Array.from(this.el.querySelectorAll(\".input-field\"));\r\n\t\t\t\tfor (const input of fields) {\r\n\t\t\t\t\tif (input.checked) {\r\n\t\t\t\t\t\tok = true;\r\n\t\t\t\t\t break;\r\n\t\t\t\t\t}\r\n\t\t\t\t }\r\n\t\t\t\tbreak;\t\r\n\t\t\tdefault:\r\n\t\t\t\tok = true;\r\n\t\t}\r\n\r\n\t\tif (!ok) {\r\n\t\t\tif(this.options.showError) {\r\n\t\t\t\tthis.showError(container);\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\tif(this.options.showGlobalErrorFlag && showGlobalErrorFlag) { \r\n\t\t\t\tthis.showGlobalError(container.dataset.error || ''); \r\n\t\t\t}\r\n\r\n\t\t\tcontainer.classList.add(\"validation-fail\");\r\n\t\t\tconst f = this.el.querySelector(\".validation-fail .input-field\") as HTMLInputElement;\r\n\t\t\tf && f.focus();\r\n\t\t}\r\n\r\n\t\treturn ok;\r\n\t}\r\n\r\n\tclearError(container: HTMLElement) {\r\n\t\tif (!container.querySelector(\".error-container\")) {\r\n\t\t\t// container.appendChild(makeElement(\"div\", \"error-container\"));\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tcontainer.classList.remove(\"validation-fail\");\r\n\t\tconst error = container.querySelector(\".error-container\");\r\n\t\tif(error) {\r\n\t\t\terror.innerHTML = \"\";\r\n\t\t}\r\n\t}\r\n\r\n\tshowError(container: HTMLElement) { //error: string\r\n\t\tcontainer.classList.add(\"validation-fail\");\r\n\t\t// const templateClone = this.errorTemplate.cloneNode(true);\r\n\t\t\r\n\t\t// if(!this.options.showGlobalErrorFlag) { \r\n\t\t// \tcontainer.querySelector(\".error-container\").insertBefore(templateClone.querySelector(\".\" + error), null); \r\n\t\t// }\r\n\t}\r\n\r\n\tasync showGlobalError(message: string, errorContainerClass = \".global-error\"){\r\n\t\tif (this.context.querySelector(\".global-error-container\") || !message) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// this.context.appendChild(makeElement(\"div\", \"global-error-container\"));\r\n\t\tthis.context.insertBefore(makeElement(\"div\", \"global-error-container\"), this.context.querySelector(\".button-wrapper\"));\r\n\r\n\t\tconst container = this.context.querySelector(\".global-error-container\");\r\n\t\tconst templateClone: any = this.errorTemplate.cloneNode(true);\r\n\t\tcontainer.insertBefore(templateClone.querySelector(errorContainerClass), null);\r\n\r\n\t\tcontainer.querySelector(\".error-description\").innerHTML = message;\r\n\t\tcontainer.querySelector(\".error-close-button\").addEventListener(\"click\", this.hideGlobalError.bind(this));\r\n\r\n\t\tawait sleep(300);\r\n \tcontainer.classList.add(\"is-shown\");\r\n\t\tawait sleep(400);\r\n \tthis.cycle();\r\n\t}\r\n\r\n\tasync hideGlobalError(animated = true) {\r\n\t\tclearInterval(this._interval);\r\n\t\tthis._interval = null;\r\n\r\n\t\tconst el = this.context.querySelector(\".global-error-container\");\r\n\r\n\t\tel && el.classList.add(\"is-removed\");\r\n\t\tanimated && await sleep(500);\r\n\t\tel && el.parentNode && el.parentNode.removeChild(el);\r\n\t}\r\n\r\n\tcycle(event?: Event) {\r\n if (!event) {\r\n this._isPaused = false;\r\n }\r\n\r\n if (this._interval) {\r\n clearInterval(this._interval);\r\n this._interval = null;\r\n }\r\n\r\n if (Default.interval && !this._isPaused) {\r\n this._interval = setInterval(\r\n this.hideGlobalError.bind(this),\r\n Default.interval\r\n );\r\n }\r\n\t}\r\n\r\n\tonFormValidationFail() {\r\n\t\tconst element = this.el.querySelector(\".validation-fail\");\r\n\t\telement && window.scrollTo(0, element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - 200);\r\n\t}\r\n\r\n\r\n}\r\n","import { makeElement } from \"../utils/utils\";\r\n\r\nimport FormValidation from '../utils/form-validation';\r\n// const FormValidation = require('../utils/form-validation.js');\r\n\r\n/**\r\n * Step Form object\r\n * @param {HTMLElement} el\r\n * @param {number} startAtStep which step you want the form to start at, 0 is default\r\n */\r\n export default class Stepper {\r\n\tprivate el: HTMLElement;\r\n\tprivate options: any;\r\n\tprivate steps: HTMLElement[];\r\n\tprivate nextButton: HTMLButtonElement;\r\n\tprivate currentStep: number;\r\n\tprivate formControls: HTMLElement[];\r\n formValidation: FormValidation;\r\n\t\r\n constructor(el: HTMLElement, options: any) {\r\n \r\n this.el = el;\r\n\t\tthis.options = options;\r\n this.steps = Array.from(this.el.querySelectorAll('[data-step]'));\r\n this.formControls = Array.from(this.el.querySelectorAll('.input-field'));\r\n this.nextButton = this.el.querySelector('.next-button') || makeElement(\"button\", \"next-button\");\r\n this.currentStep = this.options.startAtStep || 0;\r\n\r\n this.init();\r\n }\r\n\r\n init() {\r\n this.showStep(this.currentStep);\r\n\t\tthis.renderNavigationItems(this.options.navigationSteps, this.currentStep);\r\n this.addEvents();\r\n }\r\n\r\n showStep(step = 0) {\r\n this.steps[step].classList.add('is-active');\r\n this.nextButton.innerHTML = `${this.nextButton.dataset[step === this.steps.length - 1 ? 'finalStepText' : 'stepText'] || ''}`;\r\n this.updateNavigationItems(step);\r\n\r\n if(this.options.handleStepChange) {\r\n\t\t\tthis.options.handleStepChange(step);\r\n\t\t}\r\n\r\n try {\r\n this.formValidation = new FormValidation(this.steps[this.currentStep], this.el.querySelector('.bottom-panel-wrapper'), { showGlobalErrorFlag: true });\r\n } catch(e: any) {\r\n console.error(e.message);\r\n }\r\n }\r\n\r\n showGlobalError(message: string) {\r\n this.formValidation?.showGlobalError(message);\r\n }\r\n\r\n navigate(step: number) {\r\n\t\tif (step === this.currentStep) {\r\n return;\r\n }\r\n\r\n if (step > this.currentStep && !this.formValidation.onSubmit()) {\r\n return;\r\n }\r\n\r\n\t\tif (step >= this.steps.length) {\r\n this.onSubmitCallback();\r\n return;\r\n }\r\n\r\n this.formValidation?.hideGlobalError(false);\r\n this.steps[this.currentStep].classList.remove('is-active');\r\n this.currentStep = step;\r\n this.showStep(this.currentStep);\r\n }\r\n\r\n\tasync onSubmitCallback() {\r\n\t\tif(this.options.onSubmit) {\r\n\t\t\tawait this.options.onSubmit();\r\n\t\t}\r\n\t}\r\n\r\n\tgetNextStep() {\r\n\t\tthis.navigate(this.currentStep + 1);\r\n\t}\r\n\r\n\tonStepChange(step: number) {\r\n\t\tif (step < this.currentStep) {\r\n\t\t\tthis.navigate(step);\r\n\t\t}\r\n\t}\r\n\r\n\trenderNavigationItems(steps: any[], currentStep: number) {\r\n\t\tif(steps.length === 0) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\r\n\t\tconst container = document.querySelector('.prebook-navigation');\r\n\t\r\n\t\tif(!container) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\r\n\t\tconst markup = `\r\n\t\t\t\n
${createTagRepeat('span', 6, {class: 'week'})}
\n- \r\n\t\t\t\t${steps.map((step, i) => `\r\n\t\t\t\t\t
- \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t`).join('')} \r\n\t\t\t
${t.feedback.restrictedDates} ${response.restrictions}
`;\r\n\t\t\t}\r\n\r\n\t\t\tdatesDisabled =\r\n\t\t\tthis.attractionAvailability\r\n\t\t\t\t.filter(date => {\r\n\t\t\t\t\treturn date.isBlockedOut\r\n\t\t\t\t})\r\n\t\t\t\t.map(date => date.calendarDate);\r\n\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t} catch (error) {\r\n\t\t\tNotification.add(error.errorMessage || error.detail);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t}\r\n\r\n\t\tthis.initDatePicker(datesDisabled, date);\r\n\t}\r\n\r\n\tasync initDatePicker(datesDisabled: string[] | null, setDate?: string) {\r\n\t\tconst amount = this.data.barcodes.length + this.data.freeTickets;\r\n\r\n\t\tgetArrivalTime(this.el, [], this.setArrivalTime, amount, this.data.startTime);\r\n\r\n\t\t// show error here maybe t.feedback.date\r\n\t\tconst dateInputElement: HTMLElement | null = this.el.querySelector('.date-input-wrapper');\r\n\r\n\t\tif(!datesDisabled) {\r\n\t\t\tdatesDisabled = getAllDaysInMonth(this.currentSelectedDate.getFullYear(), this.currentSelectedDate.getMonth());\r\n\t\t}\r\n\r\n\t\tconst convertedDisabledDates = datesDisabled.map((dateString) => {\r\n\t\t\tconst numArr = dateString.split('-');\r\n\t\t\treturn numArr[1] + \" \" + numArr[2] + \" \" + numArr[0];\r\n\t\t});\r\n\r\n\t\tObject.assign(Datepicker.locales, deDE, enAU, enGB, esES, itIT, ptBR, ptPT);\r\n\r\n\t\tconst currentCulture = document.querySelector('body')?.getAttribute('data-culture') ?? 'en';\r\n\t\tlet lang = 'en'\r\n\r\n\t\tif (Datepicker.locales.hasOwnProperty(currentCulture)) {\r\n\t\t\tlang = currentCulture\r\n\t\t}\r\n\r\n\t\tconst options = {\r\n\t\t\tlanguage: lang,\r\n\t\t\tdatesDisabled: convertedDisabledDates,\r\n\t\t\tminDate: new Date(),\r\n\t\t\tdefaultViewDate: this.currentSelectedDate,\r\n\t\t};\r\n\r\n\t\tif(dateInputElement) {\r\n\t\t\tif(this.datePicker) {\r\n\t\t\t\tdateInputElement.removeEventListener('changeDate', this.changeDate);\r\n\t\t\t\tdateInputElement.removeEventListener('changeMonth', this.changeMonth);\r\n\t\t\t\tthis.datePicker.destroy();\r\n\t\t\t\tdateInputElement.innerHTML = '';\r\n\t\t\t}\r\n\r\n\t\t\tthis.datePicker = new Datepicker(dateInputElement, options);\r\n\r\n\t\t\tif(setDate) {\r\n\t\t\t\tconst dateObject = formattedDate(setDate);\r\n\t\t\t\tthis.datePicker.setDate(dateObject);\r\n\t\t\t\tthis.data.startDate = dateObject;\r\n\t\t\t\tthis.displayArrivalTime(new Date(setDate));\r\n\t\t\t}\r\n\r\n\t\t\tdateInputElement.addEventListener('changeDate', this.changeDate);\r\n\t\t\tdateInputElement.addEventListener('changeMonth', this.changeMonth);\r\n\t\t}\r\n\r\n\t\tthis.registerEventListenersForDisabledDates();\r\n\t}\r\n\r\n\tregisterEventListenersForDisabledDates() {\r\n\t\tArray.from(this.el.querySelectorAll('.datepicker-cell.disabled')).forEach((day: Element) => {\r\n\t\t\tconst callback = (day: Element) => {\r\n\t\t\t\tlet message = '', date = '';\r\n\t\t\t\tconst selectedDateMs = day.getAttribute('data-date');\r\n\r\n\t\t\t\tif(selectedDateMs) {\r\n\t\t\t\t\tdate = dateWithDashes(new Date(parseInt(selectedDateMs)));\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst attraction = this.attractionAvailability.find(attraction => attraction.calendarDate === date);\r\n\r\n\t\t\t\tif(attraction){\r\n\t\t\t\t\tif(attraction.cardType.length > 0) {\r\n\t\t\t\t\t\tmessage = replaceTerm(t.error.unavailableDate, {\r\n\t\t\t\t\t\t\tpass: attraction.cardType\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tmessage = attraction.blockOutReason;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\tthis.stepper?.showGlobalError(message);\r\n\t\t\t}\r\n\r\n\t\t\tday.addEventListener('click', () => callback(day));\r\n\t\t});\r\n\t}\r\n\r\n\tonAttractionChangeHandler(e: Event) {\r\n\t\tconst { id, value } = e.target as HTMLInputElement;\r\n\t\tconst el = e.target as HTMLInputElement;\r\n\t\tthis.data.attraction.accessoAttractionId = id;\r\n\t\tthis.data.attraction.merlinAttractionId = el.getAttribute('data-attraction-id') || '';\r\n\t\tthis.data.attraction.attractionName = value;\r\n\t\tthis.data.attraction.allowFreeTickets = el.getAttribute('data-allow-free-tickets') === 'true' ? true : false;\r\n\r\n\t\tthis.data.freeTickets = 0;\r\n\t\tconst selectedAttraction = this.tripData ? this.tripData.find(trip => trip.accessoAttractionId === id) : null;\r\n\t\tthis.data.attraction.description = selectedAttraction && selectedAttraction.description ? selectedAttraction.description : '';\r\n\r\n\t\tthis.submitButton.disabled = false;\r\n\r\n\t\tconst underThreeTicketButton = document.querySelector('.add-under-three-ticket-button') as HTMLButtonElement;\r\n\t\tif (underThreeTicketButton) {\r\n\t\t\tunderThreeTicketButton.hidden = !this.data.attraction.allowFreeTickets;\r\n\t\t}\r\n\r\n\t\tif(this.datePicker) {\r\n\t\t\tthis.datePicker.destroy();\r\n\t\t\tthis.datePicker = null;\r\n\t\t}\r\n\t}\r\n\r\n\tbindSearchEvents() {\r\n\t\tconst tripSelectionWrapper = document.querySelector('.trip-selection');\r\n\r\n\t\tif(!tripSelectionWrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst searchAttractions = (e: any) => {\r\n\t\t\tconst { value } = e.target;\r\n\t\t\tconst filtered = this.tripData ? this.tripData.filter(element => {\r\n\t\t\t\tfor (const key in element) {\r\n\t\t\t\t\tif (Object.prototype.hasOwnProperty.call(element, key)) {\r\n\t\t\t\t\t\tconst text = (element as any)[key];\r\n\t\t\t\t\t\tif (text.toString().toLowerCase().includes(value.toLowerCase())) return true;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}) : [];\r\n\r\n\t\t\tlet results = filtered.length > 0 ? renderAttractionListData(filtered) : t.feedback.noAttractionsFound;\r\n\r\n\t\t\ttripSelectionWrapper.innerHTML = results;\r\n\r\n\r\n\t\t\t// Register attraction change event listener\r\n\t\t\tconst attractions = Array.from(tripSelectionWrapper.querySelectorAll('[data-attraction]'));\r\n\t\t\tfor (let attraction of attractions) {\r\n\t\t\t\tattraction.addEventListener('change', this.onAttractionChangeHandler);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst searchInputField = document.querySelector('.search-attraction-input-field');\r\n\t\tsearchInputField && searchInputField.addEventListener('keyup', searchAttractions);\r\n\t}\r\n\r\n\tasync createReservation() {\r\n\t\tstartButtonLoadingState(this.submitButton);\r\n\r\n\t\ttry {\r\n\t\t\tclearSummaryTicket(this.el);\r\n\t\t\tawait sleep(500);\r\n\r\n\t\t\tconsole.log('this.data.startDate: ', this.data.startDate);\r\n\r\n\t\t\tconst numbers: number[] = this.data.startDate.split('-').map((number, index) => {\r\n\t\t\t\tif (index === 1) return parseInt(number) - 1; //The month is zero index, so we need to subtract 1\r\n\t\t\t\treturn parseInt(number);\r\n\t\t\t});\r\n\r\n\t\t\tconst newArrivalDateTimeZoneAdjusted = dateWithTimeZone(numbers[0], numbers[1], numbers[2], 0 ,0, 0);\r\n\t\t\tconst newArrivalDate = dateWithDashes(newArrivalDateTimeZoneAdjusted);\r\n\r\n\t\t\tconsole.log('newArrivalDateTimeZoneAdjusted: ', newArrivalDateTimeZoneAdjusted);\r\n\t\t\tconsole.log('newArrivalDate: ', newArrivalDate);\r\n\r\n\t\t\tconst response: string | any = await createReservation({\r\n\t\t\t\tattractionAccessoId: this.data.attraction.accessoAttractionId,\r\n\t\t\t\tstartDate: this.data.startDate,\r\n\t\t\t\tstartTime: this.data.startTime || '',\r\n\t\t\t\tquantity: this.data.barcodes.length + this.data.freeTickets,\r\n\t\t\t\tfreeTickets: this.data.freeTickets,\r\n\t\t\t});\r\n\r\n\t\t\tif (response.errorMessage) {\r\n\t\t\t\tthrow response;\r\n\t\t\t}\r\n\r\n\t\t\tthis.data.reservationId = response;\r\n\r\n\t\t\tgenerateSummaryTicket('create', this.data, this.el, this.stepper);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\r\n\t\t} catch (error) {\r\n\t\t\tNotification.add(error.errorMessage || error.detail);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tasync onSubmit() {\r\n\t\tstartButtonLoadingState(this.submitButton)\r\n\r\n\t\ttry {\r\n\t\t\tawait sleep(1000);\r\n\r\n\t\t\tif(!this.data.startDate || this.data.startDate === '') {\r\n\t\t\t\tthrow 'Date must be selected';\r\n\t\t\t}\r\n\r\n\t\t\tconsole.log('this.data.startDate: ', this.data.startDate);\r\n\r\n\t\t\tconst numbers: number[] = this.data.startDate.split('-').map((number, index) => {\r\n\t\t\t\tif (index === 1) return parseInt(number) - 1; //The month is zero index, so we need to subtract 1\r\n\t\t\t\treturn parseInt(number);\r\n\t\t\t});\r\n\r\n\t\t\tconst newArrivalDateTimeZoneAdjusted = dateWithTimeZone(numbers[0], numbers[1], numbers[2], 0 ,0, 0);\r\n\t\t\tconst newArrivalDate = dateWithDashes(newArrivalDateTimeZoneAdjusted);\r\n\r\n\t\t\tconsole.log('newArrivalDateTimeZoneAdjusted: ', newArrivalDateTimeZoneAdjusted);\r\n\t\t\tconsole.log('newArrivalDate: ', newArrivalDate);\r\n\r\n\t\t\tconst response: any = await convertReservationToBooking({\r\n\t\t\t\tattractionAccessoId: this.data.attraction.accessoAttractionId,\r\n\t\t\t\tstartDate: this.data.startDate,\r\n\t\t\t\tstartTime: this.data.startTime || '',\r\n\t\t\t\treservationId: this.data.reservationId || '',\r\n\t\t\t\tbookingId: '',\r\n\t\t\t\tbarcodes: this.data.barcodes,\r\n\t\t\t\tfreeTickets: this.data.freeTickets,\r\n\t\t\t});\r\n\r\n\t\t\tif (response.errorMessage) {\r\n\t\t\t\tthrow response;\r\n\t\t\t}\r\n\r\n\t\t\tif(response.orderid) {\r\n\t\t\t\tthis.data.bookingId = response.orderid;\r\n\t\t\t}\r\n\r\n\t\t\tbookingSuccessful(this.data);\r\n\t\t} catch (error) {\r\n\t\t\tconsole.error(error)\r\n\t\t\tNotification.add(error.errorMessage || error.detail);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t}\r\n\t}\r\n\r\n\tregisterEventListeners() {\r\n\t\tthis.submitButton = this.el.querySelector('.next-button') || makeElement(\"button\", \"next-button\");\r\n\t\tconst button = document.querySelector('.add-new-pass-button');\r\n\r\n\t\tif(button){\r\n\t\t\tbutton.addEventListener('click', addNewPass);\r\n\t\t}\r\n\r\n\t\tconst underThreeTicketButton = document.querySelector('.add-under-three-ticket-button') as HTMLButtonElement;\r\n\r\n\t\tif (underThreeTicketButton) {\r\n\t\t\tunderThreeTicketButton.addEventListener('click', () => this.underThreeTicketHandler(1));\r\n\t\t}\r\n\r\n\t\tthis.bindSearchEvents();\r\n\r\n\t\tconst stepperElement: HTMLElement | null = this.el.querySelector('[data-multi-stepper]');\r\n\t\tif(stepperElement) {\r\n\t\t\tconst options = {\r\n\t\t\t\tnavigationSteps,\r\n\t\t\t\tstartAtStep: 0,\r\n\t\t\t\tonSubmit: this.onSubmit,\r\n\t\t\t\thandleStepChange: this.handleStepChange,\r\n\t\t\t};\r\n\r\n\t\t\tthis.stepper = new Stepper(stepperElement, options);\r\n\t\t}\r\n\t}\r\n\r\n\tstringToHTML(str: string) {\r\n\t\tvar parser = new DOMParser();\r\n\t\tvar doc = parser.parseFromString(str, 'text/html');\r\n\t\treturn doc.body;\r\n\t};\r\n\r\n\tunderThreeTicketHandler(number: number = 1) {\r\n\t\tif(!this.passData) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst wrapper = this.el.querySelector('.pass-selection__list');\r\n\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (this.el.querySelectorAll('[data-under-three]').length >= 4) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// This re-renders all the normal tickets, which unselects them when adding an under 3 pass\r\n\t\t// wrapper.innerHTML += renderUnderThreeTicket();\r\n\r\n\t\tconst fragment = document.createDocumentFragment();\r\n\r\n\t\tfor (let i = 0; i < number; i++) {\r\n\t\t\tconst under3Ticket = renderUnderThreeTicket() as string;\r\n\t\t\tconst el = this.stringToHTML(under3Ticket) as HTMLBodyElement;\r\n\t\t\tconst li = el.querySelector('li') as HTMLLIElement;\r\n\r\n\t\t\tfragment.appendChild(li);\r\n\t\t}\r\n\r\n\r\n\t\twrapper.appendChild(fragment);\r\n\r\n\t\t// Register event listeners\r\n\t\tconst tickets = Array.from(this.el.querySelectorAll('[data-under-three]'));\r\n\t\tthis.data.freeTickets = tickets.length;\r\n\r\n\t\tfor (let ticket of tickets) {\r\n\t\t\tticket.addEventListener('change', (e: Event) => {\r\n\t\t\t\tconst el = e.target as HTMLInputElement;\r\n\r\n\t\t\t\tif(!el.checked) {\r\n\t\t\t\t\tel.parentElement && el.parentElement.remove();\r\n\r\n\t\t\t\t\tconst ticketsAfterRemoval = Array.from(this.el.querySelectorAll('[data-under-three]'));\r\n\t\t\t\t\tthis.data.freeTickets = ticketsAfterRemoval.length;\r\n\t\t\t\t\tpubSub.publish(\"UnderThreeTicketsChanged\", { number: this.data.freeTickets });\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t\tpubSub.publish(\"UnderThreeTicketsChanged\", { number: this.data.freeTickets });\r\n\t}\r\n\r\n\thandleStepChange(step: number) {\r\n\t\t// console.log(this.data)\r\n\t\tswitch(step) {\r\n\t\t\tcase 0:\r\n\t\t\t\tconst hasAttractions = this.tripData && this.tripData.length > 0;\r\n\t\t\t\tif(!hasAttractions) {\r\n\t\t\t\t\tthis.fetchTripData();\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tcase 1:\r\n\t\t\t\tthis.fetchPassData();\r\n\t\t\t\tbreak;\r\n\t\t\tcase 2:\r\n\t\t\t\tif(!this.datePicker) {\r\n\t\t\t\t\tthis.initDatePicker(null).then(() => {\r\n\t\t\t\t\t\tthis.initDatePickerForMonth(dateWithDashes(this.currentSelectedDate));\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tcase 3:\r\n\t\t\t\tthis.createReservation();\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst wrapper = this.el.querySelector('.dialog-content-wrapper');\r\n\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t/*\r\n\t\t\t${this.data.attraction.allowFreeTickets ? `\r\n\t\t\t\t`:''}\r\n\t\t*/\r\n\r\n\t\twrapper.innerHTML = `\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t`;\r\n\r\n\t\tthis.registerEventListeners();\r\n\t\tthis.show();\r\n\t}\r\n}","import { Datepicker } from 'vanillajs-datepicker';\r\nimport { convertReservationToBooking, createReservation, getAttractionAvailability, getListOfPassesForAttraction } from '../api/umbraco-api';\r\nimport Notification from '../components/notification';\r\nimport Stepper from '../components/stepper';\r\nimport { bookingSuccessful } from '../constants/dialogs';\r\nimport DialogViewBase, { ButtonVariation, IDialogOptions } from '../core/dialog-view-base';\r\nimport { PubSub } from '../core/pubsub';\r\nimport { arrivalTimeData, editNavigationSteps, ticketSvg } from '../data/data';\r\nimport { deDE, enAU, enGB, esES, itIT, ptBR, ptPT } from '../i18n/locales';\r\nimport { IBooking, clearSummaryTicket, generateSummaryTicket, getArrivalTime, renderArrivalTime, renderPassListData, renderUnderThreeTicket } from '../templates/list-items';\r\nimport { IAvailability, IGetAttractionAvailability, IPass, isFetchErrorResponse } from '../types/main';\r\nimport { endButtonLoadingState, startButtonLoadingState } from '../utils/animations';\r\nimport { dateWithDashes, dateWithTimeZone, formattedDate, getAllDaysInMonth, makeElement, replaceTerm, sleep, t } from '../utils/utils';\r\n\r\ninterface IExtendedDialogOptions extends IDialogOptions {\r\n\tonConfirm: () => void;\r\n\tonReject: () => void;\r\n\tprimaryButtonVariation?: ButtonVariation;\r\n\tsecondaryButtonVariation?: ButtonVariation;\r\n\tstartAtStep: number;\r\n}\r\n\r\nconst pubSub = PubSub\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t${t.feedback.restrictedDates} ${response.restrictions}
`;\r\n\t\t\t}\r\n\r\n\t\t\tdatesDisabled =\r\n\t\t\tthis.attractionAvailability\r\n\t\t\t\t.filter(date => {\r\n\t\t\t\t\treturn date.isBlockedOut\r\n\t\t\t\t})\r\n\t\t\t\t.map(date => date.calendarDate);\r\n\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t} catch (error) {\r\n\t\t\tNotification.add(error.errorMessage || error.detail);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t}\r\n\r\n\r\n\t\tthis.initDatePicker(datesDisabled, date);\r\n\t}\r\n\r\n\tasync initDatePicker(datesDisabled: string[] | null, setDate?: string) {\r\n\t\tconst amount = this.data.barcodes.length + this.data.freeTickets;\r\n\r\n\t\tgetArrivalTime(this.el, [], this.setArrivalTime, amount, this.data.startTime);\r\n\t\tconst dateInputElement: HTMLElement | null = this.el.querySelector('.date-input-wrapper');\r\n\r\n\r\n\t\tif(!datesDisabled) {\r\n\t\t\tdatesDisabled = getAllDaysInMonth(this.currentSelectedDate.getFullYear(), this.currentSelectedDate.getMonth());\r\n\t\t}\r\n\r\n\t\tconst convertedDisabledDates = datesDisabled.map((dateString) => {\r\n\t\t\tconst numArr = dateString.split('-');\r\n\t\t\treturn numArr[1] + \" \" + numArr[2] + \" \" + numArr[0];\r\n\t\t});\r\n\r\n\t\tObject.assign(Datepicker.locales, deDE, enAU, enGB, esES, itIT, ptBR, ptPT);\r\n\r\n\t\tconst currentCulture = document.querySelector('body')?.getAttribute('data-culture') ?? 'en';\r\n\t\tlet lang = 'en'\r\n\r\n\t\tif (Datepicker.locales.hasOwnProperty(currentCulture)) {\r\n\t\t\tlang = currentCulture\r\n\t\t}\r\n\r\n\t\tconst options = {\r\n\t\t\tlanguage: lang,\r\n\t\t\tdatesDisabled: convertedDisabledDates,\r\n\t\t\tminDate: new Date(),\r\n\t\t\tdefaultViewDate: this.currentSelectedDate,\r\n\t\t};\r\n\r\n\t\tif(dateInputElement) {\r\n\t\t\tif(this.datePicker) {\r\n\t\t\t\tdateInputElement.removeEventListener('changeDate', this.changeDate);\r\n\t\t\t\tdateInputElement.removeEventListener('changeMonth', this.changeMonth);\r\n\t\t\t\tthis.datePicker.destroy();\r\n\t\t\t\tdateInputElement.innerHTML = '';\r\n\t\t\t}\r\n\r\n\t\t\tthis.datePicker = new Datepicker(dateInputElement, options);\r\n\r\n\t\t\tif(setDate) {\r\n\t\t\t\tconst dateObject = formattedDate(setDate);\r\n\t\t\t\tthis.datePicker.setDate(dateObject);\r\n\t\t\t\tthis.data.startDate = dateObject;\r\n\t\t\t\tthis.displayArrivalTime(new Date(setDate));\r\n\t\t\t}\r\n\r\n\t\t\tdateInputElement.addEventListener('changeDate', this.changeDate);\r\n\t\t\tdateInputElement.addEventListener('changeMonth', this.changeMonth);\r\n\t\t}\r\n\r\n\t\tthis.registerEventListenersForDisabledDates();\r\n\t}\r\n\r\n\tdisplayArrivalTime(forDate: Date) {\r\n\t\tif(!this.attractionAvailability) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst datesAvailable =\r\n\t\t\tthis.attractionAvailability\r\n\t\t\t\t.filter(date => !date.isBlockedOut);\r\n\r\n\t\tconst selectedDate = datesAvailable.find(date => date.calendarDate === dateWithDashes(forDate));\r\n\r\n\t\tif(!selectedDate) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif(!selectedDate.timeSlots) {\r\n\t\t\tthis.data.startTime = null;\r\n\t\t}\r\n\r\n\t\tconst amount = this.data.barcodes.length + this.data.freeTickets;\r\n\r\n\t\tgetArrivalTime(this.el, selectedDate.timeSlots || [], this.setArrivalTime, amount, this.data.startTime);\r\n\t}\r\n\r\n\tsetArrivalTime(e: Event) {\r\n\t\tconst el = e.target as HTMLInputElement;\r\n\t\tthis.data.startTime = el.getAttribute('data-start-time');\r\n\t}\r\n\r\n\tregisterEventListenersForDisabledDates() {\r\n\t\tArray.from(this.el.querySelectorAll('.datepicker-cell.disabled')).forEach((day: Element) => {\r\n\t\t\tconst callback = (day: Element) => {\r\n\t\t\t\tlet message = '', date = '';\r\n\t\t\t\tconst selectedDateMs = day.getAttribute('data-date');\r\n\r\n\t\t\t\tif(selectedDateMs) {\r\n\t\t\t\t\tdate = dateWithDashes(new Date(parseInt(selectedDateMs)));\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst attraction = this.attractionAvailability.find(attraction => attraction.calendarDate === date);\r\n\r\n\t\t\t\tif(attraction){\r\n\t\t\t\t\tif(attraction.cardType.length > 0) {\r\n\t\t\t\t\t\tmessage = replaceTerm(t.error.unavailableDate, {\r\n\t\t\t\t\t\t\tpass: attraction.cardType\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tmessage = attraction.blockOutReason;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\tthis.stepper?.showGlobalError(message);\r\n\t\t\t}\r\n\r\n\t\t\tday.addEventListener('click', () => callback(day));\r\n\t\t});\r\n\t}\r\n\r\n\tasync createReservation() {\r\n\t\tstartButtonLoadingState(this.submitButton);\r\n\r\n\t\ttry {\r\n\t\t\tclearSummaryTicket(this.el);\r\n\t\t\tawait sleep(500);\r\n\r\n\t\t\tconsole.log('this.data.startDate: ', this.data.startDate);\r\n\r\n\t\t\tconst numbers: number[] = this.data.startDate.split('-').map((number, index) => {\r\n\t\t\t\tif (index === 1) return parseInt(number) - 1; //The month is zero index, so we need to subtract 1\r\n\t\t\t\treturn parseInt(number);\r\n\t\t\t});\r\n\r\n\t\t\tconst newArrivalDateTimeZoneAdjusted = dateWithTimeZone(numbers[0], numbers[1], numbers[2], 0 ,0, 0);\r\n\t\t\tconst newArrivalDate = dateWithDashes(newArrivalDateTimeZoneAdjusted);\r\n\r\n\t\t\tconsole.log('newArrivalDateTimeZoneAdjusted: ', newArrivalDateTimeZoneAdjusted);\r\n\t\t\tconsole.log('newArrivalDate: ', newArrivalDate);\r\n\r\n\t\t\tconst response: string | any = await createReservation({\r\n\t\t\t\tattractionAccessoId: this.data.attraction.accessoAttractionId,\r\n\t\t\t\tstartDate: this.data.startDate,\r\n\t\t\t\tstartTime: this.data.startTime || '',\r\n\t\t\t\tquantity: this.data.barcodes.length + this.data.freeTickets,\r\n\t\t\t\tfreeTickets: this.data.freeTickets,\r\n\t\t\t});\r\n\r\n\t\t\tif (response.errorMessage) {\r\n\t\t\t\tthrow response;\r\n\t\t\t}\r\n\r\n\t\t\tthis.data.reservationId = response;\r\n\r\n\t\t\tgenerateSummaryTicket('edit', this.data, this.el, this.stepper);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\r\n\t\t} catch (error) {\r\n\t\t\tNotification.add(error.errorMessage || error.detail);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t}\r\n\t}\r\n\r\n\tasync onSubmit() {\r\n\t\tstartButtonLoadingState(this.submitButton);\r\n\r\n\t\ttry {\r\n\t\t\tawait sleep(1000);\r\n\r\n\t\t\tif(!this.data.startDate || this.data.startDate === '') {\r\n\t\t\t\tthrow 'Date must be selected';\r\n\t\t\t}\r\n\r\n\t\t\tconsole.log('this.data.startDate: ', this.data.startDate);\r\n\r\n\t\t\tconst numbers: number[] = this.data.startDate.split('-').map((number, index) => {\r\n\t\t\t\tif (index === 1) return parseInt(number) - 1; //The month is zero index, so we need to subtract 1\r\n\t\t\t\treturn parseInt(number);\r\n\t\t\t});\r\n\r\n\t\t\tconst newArrivalDateTimeZoneAdjusted = dateWithTimeZone(numbers[0], numbers[1], numbers[2], 0 ,0, 0);\r\n\t\t\tconst newArrivalDate = dateWithDashes(newArrivalDateTimeZoneAdjusted);\r\n\r\n\t\t\tconsole.log('newArrivalDateTimeZoneAdjusted: ', newArrivalDateTimeZoneAdjusted);\r\n\t\t\tconsole.log('newArrivalDate: ', newArrivalDate);\r\n\r\n\t\t\tconst response: any = await convertReservationToBooking({\r\n\t\t\t\tattractionAccessoId: this.data.attraction.accessoAttractionId,\r\n\t\t\t\tstartDate: this.data.startDate,\r\n\t\t\t\tstartTime: this.data.startTime || '',\r\n\t\t\t\treservationId: this.data.reservationId || '',\r\n\t\t\t\tbookingId: this.data.bookingId || '',\r\n\t\t\t\tbarcodes: this.data.barcodes,\r\n\t\t\t\tfreeTickets: this.data.freeTickets,\r\n\t\t\t});\r\n\r\n\t\t\tif (response.errorMessage) {\r\n\t\t\t\tthrow response;\r\n\t\t\t}\r\n\r\n\t\t\tif(response.orderid) {\r\n\t\t\t\tthis.data.bookingId = response.orderid;\r\n\t\t\t}\r\n\r\n\t\t\tbookingSuccessful(this.data);\r\n\t\t} catch (error) {\r\n\t\t\tNotification.add(error.errorMessage || error.detail);\r\n\t\t\tendButtonLoadingState(this.submitButton);\r\n\t\t}\r\n\t}\r\n\r\n\tstringToHTML(str: string) {\r\n\t\tvar parser = new DOMParser();\r\n\t\tvar doc = parser.parseFromString(str, 'text/html');\r\n\t\treturn doc.body;\r\n\t};\r\n\r\n\tunderThreeTicketHandler(number: number = 1) {\r\n\t\tif(!this.passData) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst wrapper = this.el.querySelector('.pass-selection__list');\r\n\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif(this.el.querySelectorAll('[data-under-three]').length >= 4) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// This re-renders all the normal tickets, which unselects them when adding an under 3 pass\r\n\t\t// wrapper.innerHTML += renderUnderThreeTicket();\r\n\r\n\t\tconst fragment = document.createDocumentFragment();\r\n\r\n\t\tfor (let i = 0; i < number; i++) {\r\n\t\t\tconst under3Ticket = renderUnderThreeTicket() as string;\r\n\t\t\tconst el = this.stringToHTML(under3Ticket) as HTMLBodyElement;\r\n\t\t\tconst li = el.querySelector('li') as HTMLLIElement;\r\n\r\n\t\t\tfragment.appendChild(li);\r\n\t\t}\r\n\r\n\r\n\t\twrapper.appendChild(fragment);\r\n\r\n\t\t// Register event listeners\r\n\t\tconst tickets = Array.from(this.el.querySelectorAll('[data-under-three]'));\r\n\t\tthis.data.freeTickets = tickets.length;\r\n\r\n\t\tfor (let ticket of tickets) {\r\n\t\t\tticket.addEventListener('change', (e: Event) => {\r\n\t\t\t\tconst el = e.target as HTMLInputElement;\r\n\r\n\t\t\t\tif(!el.checked) {\r\n\t\t\t\t\tel.parentElement && el.parentElement.remove();\r\n\r\n\t\t\t\t\tconst ticketsAfterRemoval = Array.from(this.el.querySelectorAll('[data-under-three]'));\r\n\t\t\t\t\tthis.data.freeTickets = ticketsAfterRemoval.length;\r\n\t\t\t\t\tpubSub.publish(\"UnderThreeTicketsChanged\", { number: this.data.freeTickets });\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t\tpubSub.publish(\"UnderThreeTicketsChanged\", { number: this.data.freeTickets });\r\n\t}\r\n\r\n\tregisterEventListeners() {\r\n\t\tthis.submitButton = this.el.querySelector('.next-button') || makeElement(\"button\", \"next-button\");\r\n\r\n\t\tconst underThreeTicketButton = document.querySelector('.add-under-three-ticket-button') as HTMLButtonElement;\r\n\r\n\t\tif (underThreeTicketButton) {\r\n\t\t\tif (this.data.attraction.allowFreeTickets) {\r\n\t\t\t\tunderThreeTicketButton.addEventListener('click', () => this.underThreeTicketHandler(1));\r\n\t\t\t} else {\r\n\t\t\t\tunderThreeTicketButton.hidden = true;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst stepperElement: HTMLElement | null = this.el.querySelector('[data-multi-stepper]');\r\n\t\tif(stepperElement) {\r\n\t\t\tconst options = {\r\n\t\t\t\tnavigationSteps: editNavigationSteps,\r\n\t\t\t\tstartAtStep: this.options.startAtStep || 0,\r\n\t\t\t\tonSubmit: this.onSubmit,\r\n\t\t\t\thandleStepChange: this.handleStepChange,\r\n\t\t\t}\r\n\t\t\tthis.stepper = new Stepper(stepperElement, options);\r\n\t\t}\r\n\t}\r\n\r\n\thandleStepChange(step: number) {\r\n\t\tswitch(step) {\r\n\t\t\tcase 0:\r\n\t\t\t\tthis.fetchPassData();\r\n\t\t\t\tbreak;\r\n\t\t\tcase 1:\r\n\t\t\t\tif(!this.datePicker) {\r\n\t\t\t\t\tthis.initDatePicker(null).then(() => {\r\n\t\t\t\t\t\tthis.initDatePickerForMonth(dateWithDashes(this.currentSelectedDate));\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\tbreak;\r\n\t\t\tcase 2:\r\n\t\t\t\tthis.createReservation();\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst wrapper = this.el.querySelector('.dialog-content-wrapper');\r\n\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst amount = this.data.barcodes.length + this.data.freeTickets;\r\n\r\n\t\twrapper.innerHTML = `\r\n\t\t\t\r\n\t\t\t\t
\r\n\t\t`;\r\n\r\n\t\tthis.registerEventListeners();\r\n\t\tthis.show();\r\n\t}\r\n}","import DialogViewBase, { ButtonVariation, IDialogOptions } from '../core/dialog-view-base';\r\nimport { ITicket, renderTicketsData } from '../templates/list-items';\r\nimport { isFetchErrorResponse } from '../types/main';\r\nimport { sleep, t } from '../utils/utils';\r\nimport Notification from '../components/notification';\r\nimport { getTickets } from '../api/umbraco-api';\r\n\r\ninterface IExtendedDialogOptions extends IDialogOptions {\r\n\tonConfirm: () => void;\r\n\tonReject: () => void;\r\n\tprimaryButtonVariation?: ButtonVariation;\r\n\tsecondaryButtonVariation?: ButtonVariation;\r\n}\r\n\r\nexport default class ViewTicketsDialog extends DialogViewBase {\r\n\tbookingId: string;\r\n primaryButton: HTMLButtonElement | null;\r\n tickets: ITicket[];\r\n\tconstructor(bookingId: string, options: IExtendedDialogOptions) {\r\n\t\tsuper(options);\r\n\t\tthis.bookingId = bookingId;\r\n this.handleConfirm = this.handleConfirm.bind(this);\r\n\r\n this.fetchTicketData();\r\n\t}\r\n\r\n\tasync fetchTicketData() {\r\n\t\tif(!this.bookingId) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\ttry {\r\n\t\t\tconst response: ITicket[] = await getTickets(this.bookingId);\r\n\r\n\t\t\tif (isFetchErrorResponse(response)) {\r\n\t\t\t\tthrow response;\r\n\t\t\t}\r\n\r\n\t\t\tthis.tickets = response;\r\n\t\t\t\r\n\t\t} catch (error) {\r\n\t\t\tthis.tickets = [];\r\n\t\t\tNotification.add('We could not load your ticket. Try again in a few minutes...');\r\n\t\t}\r\n\r\n\t\tawait sleep(500);\r\n\r\n this.render();\r\n\r\n\t}\r\n\r\n\tregisterEventListeners() {\r\n this.primaryButton = this.el.querySelector('[data-primary-button]');\r\n\t\t\r\n\t\tif(this.primaryButton) {\r\n\t\t\tthis.primaryButton.addEventListener('click', this.handleConfirm);\r\n\t\t}\r\n\r\n // const observableTickets = Array.from(this.el.querySelectorAll('.printable-tickets-item'));\r\n const ticketCount = this.el.querySelector('.printable-tickets-count > span') as HTMLSpanElement;\r\n ticketCount.textContent = `${this.tickets ? this.tickets.length : 0}`;\r\n //if ('IntersectionObserver' in window) {\r\n // ticketCount.textContent = `1/${observableTickets.length}`;\r\n // const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {\r\n\r\n // entries.forEach((entry: IntersectionObserverEntry) => {\r\n // console.log('target: ', (entry.target as HTMLDivElement));\r\n // console.log('target index: ', (entry.target as HTMLDivElement).dataset.index);\r\n // console.log('intersectionRatio: ', entry.intersectionRatio);\r\n // console.log('rootBounds: ', entry.rootBounds);\r\n // console.log('isIntersecting: ', entry.isIntersecting);\r\n // if (entry.intersectionRatio > 0) {\r\n // ticketCount.textContent = `${(entry.target as HTMLDivElement).dataset.index}/${observableTickets.length}`;\r\n // }\r\n // });\r\n\r\n // }, {\r\n // root: this.el.querySelector('.printable-tickets-scroller') as HTMLDivElement,\r\n // rootMargin: '0px',\r\n // threshold: 1.0,\r\n // });\r\n\r\n // observableTickets.forEach((ticket: any) => {\r\n // observer.observe(ticket);\r\n // });\r\n //}\r\n\r\n //window.addEventListener('resize', () => {\r\n // observableTickets[0].scrollIntoView({ behavior: 'smooth', inline: 'start' })\r\n //});\r\n\t}\r\n\r\n async handleConfirm() {\r\n\t\tif(this.options.onConfirm) {\r\n\t\t\tawait this.options.onConfirm();\r\n\t\t}\r\n\t\tthis.remove();\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst wrapper = this.el.querySelector('.dialog-content-wrapper');\r\n\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\twrapper.innerHTML = `\r\n\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\r\n \r\n\r\n
\r\n\t\t`;\r\n\r\n\t\tthis.registerEventListeners();\r\n\t\tthis.show();\r\n\t}\r\n}\r\n","import { ButtonVariation, IDialogOptions } from '../core/dialog-view-base';\r\nimport { renderPassFullItem } from '../templates/list-items';\r\nimport { IPassFullModel } from '../types/main';\r\nimport DialogView from './dialog-view';\r\n\r\nexport interface IExtendedDialogOptions extends IDialogOptions {\r\n\tpass: IPassFullModel;\r\n\tonConfirm: () => void;\r\n\tonReject: () => void;\r\n\tsecondaryButtonVariation?: ButtonVariation;\r\n\tsecondaryButtonText?: string;\r\n}\r\n\r\nexport default class PassInfoDialog extends DialogView {\r\n\tconstructor(options: IExtendedDialogOptions) {\r\n\t\tsuper(options);\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst wrapper = this.el.querySelector('.dialog-content-wrapper');\r\n\r\n\t\tif(!wrapper) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\t\r\n\t\twrapper.innerHTML = `\r\n\t\t\t\r\n\t\t\t\t\t
\r\n ${this.options.title}
\r\n\t\t\t\t\tBooking ID: ${this.bookingId}
\r\n\r\n ${renderTicketsData(this.tickets)}\r\n
\r\n \r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t${this.options.pass ? renderPassFullItem(this.options.pass) : ''}\r\n\t\t\t\t
\r\n\t\t`;\r\n\r\n\t\tthis.registerEventListeners();\r\n\t\tthis.show();\r\n\t}\r\n}\r\n","import DialogView from '../dialogs/dialog-view';\r\nimport AddPassDialog from '../dialogs/add-pass-dialog';\r\nimport AddBookingDialog from '../dialogs/add-booking-dialog';\r\nimport { formattedDate, replaceTerm, sleep, t, windowRef } from '../utils/utils';\r\nimport EditBookingDialog from '../dialogs/edit-booking-dialog';\r\nimport ViewTicketsDialog from '../dialogs/view-tickets-dialog';\r\nimport { IBooking } from '../templates/list-items';\r\nimport { cancelBooking, deletePass } from '../api/umbraco-api';\r\nimport { IPassFullModel, isFetchErrorResponse } from '../types/main';\r\nimport Notification from '../components/notification';\r\nimport PassInfoDialog from '../dialogs/pass-info-dialog';\r\n\r\nwindowRef.prebookDialogViews = {};\r\n\r\nexport const verifyPass = (title: string, message: string) => {\r\n const key = addNewPass.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new DialogView({ \r\n title,\r\n message,\r\n onConfirm: () => {\r\n windowRef.location.reload();\r\n },\r\n onReject: () => {\r\n delete windowRef.prebookDialogViews[key];\r\n windowRef.location.reload();\r\n },\r\n // primaryButtonVariation: { variation: 'primary' },\r\n secondaryButtonVariation: { variation: 'secondary' },\r\n // primaryButtonText: t.button.addAdditionalPass,\r\n secondaryButtonText: t.button.back,\r\n classes: 'curtain',\r\n });\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nexport const registerYourPass = () => {\r\n const key = registerYourPass.name;\r\n\r\n closeBooking();\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new AddPassDialog({ \r\n title: t.headline.registerPass,\r\n message: t.description.registerPass,\r\n onConfirm: () => {},\r\n onReject: () => { \r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n classes: 'curtain',\r\n });\r\n \r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nexport const addNewPass = () => {\r\n const key = addNewPass.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new DialogView({ \r\n title: t.button.addNewPass,\r\n message: t.description.addNewPass,\r\n onConfirm: () => registerYourPass(),\r\n onReject: () => { \r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n classes: 'curtain',\r\n primaryButtonVariation: { variation: 'primary' },\r\n secondaryButtonVariation: { variation: 'secondary' },\r\n primaryButtonText: t.button.confirm,\r\n secondaryButtonText: t.button.cancel,\r\n });\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nconst cancelTripSuccess = (booking: IBooking) => {\r\n const key = cancelTripSuccess.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new DialogView(\r\n {\r\n title: replaceTerm(t.headline.cancelBookingConfirmation, {\r\n attractionName: booking.attraction.attractionName\r\n }),\r\n message: t.description.booking,\r\n booking,\r\n onConfirm: () => {\r\n windowRef.location.reload();\r\n },\r\n onReject: () => {\r\n delete windowRef.prebookDialogViews[key];\r\n windowRef.location.reload();\r\n },\r\n secondaryButtonVariation: { variation: 'primary' },\r\n secondaryButtonText: t.button.bookingOverView,\r\n classes: 'curtain',\r\n }\r\n );\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nexport const cancelTripConfirmation = (booking: IBooking) => {\r\n const key = cancelTripConfirmation.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new DialogView(\r\n {\r\n title: t.headline.cancelBooking,\r\n message: t.description.cancelBooking,\r\n booking,\r\n onConfirm: async () => {\r\n await sleep(400);\r\n\r\n if(!booking.bookingId) {\r\n return;\r\n }\r\n\r\n const response = await cancelBooking(booking.bookingId);\r\n\r\n if (response.errorMessage) {\r\n // Failed to delete booking\r\n return response;\r\n }\r\n\r\n cancelTripSuccess(booking);\r\n },\r\n onReject: () => {\r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n primaryButtonVariation: { variation: 'primary' },\r\n secondaryButtonVariation: { variation: 'secondary' },\r\n primaryButtonText: t.button.cancelBookingConfirm || 'Cancel Booking',\r\n secondaryButtonText: t.button.cancelBookingCancel || 'Back',\r\n classes: 'curtain',\r\n }\r\n );\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nexport const editBookingConfirmation = (booking: IBooking) => {\r\n const key = editBookingConfirmation.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new DialogView(\r\n {\r\n title: t.headline.editBooking,\r\n booking,\r\n isEditMode: true,\r\n onConfirm: () => {},\r\n onReject: () => {\r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n secondaryButtonVariation: { variation: 'secondary' },\r\n secondaryButtonText: t.button.cancel,\r\n classes: 'curtain',\r\n }\r\n );\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nexport const editBooking = (booking: IBooking, startAtStep: number) => {\r\n const key = editBooking.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new EditBookingDialog(\r\n booking,\r\n {\r\n startAtStep,\r\n onConfirm: () => {},\r\n onReject: () => { \r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n classes: 'alternate-close-button-color',\r\n }\r\n );\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nconst closeEditBooking = () => {\r\n const bookingFlow = windowRef.prebookDialogViews[\"editBooking\"];\r\n if(bookingFlow) {\r\n bookingFlow.remove();\r\n delete windowRef.prebookDialogViews[\"editBooking\"];\r\n }\r\n}\r\n\r\nconst closeEditBookingConfirmation = () => {\r\n const bookingFlow = windowRef.prebookDialogViews[\"editBookingConfirmation\"];\r\n if(bookingFlow) {\r\n bookingFlow.remove();\r\n delete windowRef.prebookDialogViews[\"editBookingConfirmation\"];\r\n }\r\n}\r\n\r\nexport const startBooking = () => {\r\n const key = startBooking.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new AddBookingDialog({\r\n onConfirm: () => {},\r\n onReject: () => { \r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n classes: 'alternate-close-button-color',\r\n });\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n\r\n //Add event listener to hide 'book new trip' button\r\n const bookNewBtn = document.querySelector('.book-trip-button');\r\n const body = document.querySelector('body');\r\n\r\n if(bookNewBtn != null) {\r\n bookNewBtn.addEventListener('click', () => {\r\n if(body != null) {\r\n body.classList.add('hide-book-new-trip-btn')\r\n }\r\n });\r\n }\r\n}\r\n\r\nconst closeBooking = () => {\r\n //Add event listener to show 'book new trip' button that's been hidden\r\n const closeBtn = document.querySelector('.alternate-close-button-color .dialog-close');\r\n const body = document.querySelector('body');\r\n if(closeBtn != null) {\r\n closeBtn.addEventListener('click', () => {\r\n if(body != null) {\r\n body.classList.remove('hide-book-new-trip-btn')\r\n }\r\n })\r\n }\r\n\r\n const bookingFlow = windowRef.prebookDialogViews[\"startBooking\"];\r\n if(bookingFlow) {\r\n bookingFlow.remove();\r\n delete windowRef.prebookDialogViews[\"startBooking\"];\r\n }\r\n}\r\n\r\nexport const bookingSuccessful = (booking: IBooking) => {\r\n const key = bookingSuccessful.name;\r\n\r\n closeBooking();\r\n closeEditBooking();\r\n closeEditBookingConfirmation();\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new DialogView(\r\n {\r\n title: replaceTerm(t.headline.createBooking, {\r\n attractionName: booking.attraction.attractionName\r\n }),\r\n message: t.description.booking,\r\n booking,\r\n confirmHandlerWithoutClosingDialog: true,\r\n onConfirm: () => {\r\n viewTickets(booking);\r\n },\r\n onReject: () => {\r\n delete windowRef.prebookDialogViews[key];\r\n windowRef.location.reload();\r\n },\r\n primaryButtonVariation: { variation: 'secondary' },\r\n secondaryButtonVariation: { variation: 'primary' },\r\n primaryButtonText: t.button.viewTickets,\r\n secondaryButtonText: t.button.bookingOverView,\r\n classes: 'curtain',\r\n }\r\n );\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nconst closeBookingSuccessful = () => {\r\n const bookingFlow = windowRef.prebookDialogViews[\"bookingSuccessful\"];\r\n if(bookingFlow) {\r\n bookingFlow.remove();\r\n delete windowRef.prebookDialogViews[\"bookingSuccessful\"];\r\n }\r\n}\r\n\r\nexport const viewTickets = (booking: IBooking) => {\r\n const key = viewTickets.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new ViewTicketsDialog(booking.bookingId || '', {\r\n title: replaceTerm(t.headline.tickets, {\r\n attractionName: booking.attraction.attractionName,\r\n date: formattedDate(booking.startDate)\r\n }),\r\n onConfirm: async () => {\r\n delete windowRef.prebookDialogViews[key];\r\n closeBookingSuccessful();\r\n },\r\n onReject: () => {\r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n primaryButtonVariation: { variation: 'primary' },\r\n secondaryButtonVariation: { variation: 'secondary' },\r\n classes: '',\r\n });\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nexport const deletePassConfirmation = (pass: IPassFullModel) => {\r\n const key = deletePassConfirmation.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new DialogView(\r\n {\r\n title: t.headline.cancelPass,\r\n pass,\r\n onConfirm: async () => {\r\n await sleep(500);\r\n\r\n if(!pass.barCode) {\r\n Notification.add('Pass barcode is missing');\r\n return;\r\n }\r\n\r\n try {\t\r\n const response = await deletePass(pass.barCode);\r\n \r\n if (isFetchErrorResponse(response)) {\r\n throw response;\r\n }\r\n \r\n windowRef.location.reload();\r\n } catch (error) {\r\n Notification.add(error.errorMessage || error.detail);\r\n }\r\n\r\n },\r\n onReject: () => {\r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n primaryButtonVariation: { variation: 'primary' },\r\n secondaryButtonVariation: { variation: 'secondary' },\r\n primaryButtonText: t.button.confirm,\r\n secondaryButtonText: t.button.cancel,\r\n classes: 'curtain',\r\n }\r\n );\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}\r\n\r\nexport const passInfo = (pass: IPassFullModel) => {\r\n const key = passInfo.name;\r\n\r\n if (windowRef.prebookDialogViews[key]) {\r\n return;\r\n }\r\n\r\n const dialog = new PassInfoDialog({ \r\n title: pass.nickname,\r\n message: pass.description,\r\n pass,\r\n onConfirm: () => {},\r\n onReject: () => { \r\n delete windowRef.prebookDialogViews[key];\r\n },\r\n classes: 'curtain',\r\n secondaryButtonVariation: { variation: 'secondary' },\r\n secondaryButtonText: t.button.ok || 'Ok',\r\n });\r\n\r\n dialog.render();\r\n windowRef.prebookDialogViews[key] = dialog;\r\n}","import Accordion from './components/Accordion';\r\nimport IApp from './core/iapp';\r\nimport { cancelTripConfirmation, deletePassConfirmation, editBookingConfirmation, passInfo, registerYourPass, startBooking, viewTickets } from './constants/dialogs';\r\nimport { IBooking } from './templates/list-items';\r\nimport { IPassFullModel } from './types/main';\r\n\r\nclass ViewLoader {\r\n\tconstructor(querySelector: string, load: (el: HTMLElement) => void) {\r\n\t\tthis.querySelector = querySelector;\r\n\t\tthis.load = load;\r\n\t}\r\n\tquerySelector: string;\r\n\tload: (el: HTMLElement) => void;\r\n}\r\n\r\nexport default class App implements IApp {\r\n\tviewLoaders: ViewLoader[] = [\r\n\t\tnew ViewLoader('.accordion', (el) => new Accordion(el)),\r\n\t];\r\n\tel: Element;\r\n\tconstructor() {\r\n\t\tconst el = document.querySelector('#prebook-portal-app');\r\n\t\t\r\n\t\tif(!el) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tthis.el = el;\r\n\t\tthis.init();\r\n\t}\r\n\r\n\tasync init() {\r\n\t\tthis.initViews();\r\n\t\tthis.initBookingsOverviewEvents();\r\n\t\tthis.initPassesOverviewEvents();\r\n\t}\r\n\r\n\r\n\tinitPassesOverviewEvents() {\r\n\t\tconst button = this.el.querySelector('[data-manage-passes]');\r\n\r\n\t\tif(button) {\r\n\t\t\t// Register pass flow\r\n\t\t\tbutton.addEventListener('click', registerYourPass);\r\n\t\t}\r\n\r\n\t\tconst passes = Array.from(this.el.querySelectorAll('[data-pass]'));\r\n\r\n\t\tif (passes.length) {\r\n\t\t\tfor (let el of passes) {\r\n\t\t\t\tconst pass = JSON.parse(el.getAttribute('data-pass') || '');\r\n\t\t\t\tthis.deletePassHandler(el, pass);\r\n\t\t\t\tthis.infoPassHandler(el, pass);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tinitBookingsOverviewEvents() {\r\n\t\tconst button = this.el.querySelector('[data-book-trip]');\r\n\r\n\t\tif(button) {\r\n\t\t\t// Add booking flow\r\n\t\t\tbutton.addEventListener('click', startBooking);\r\n\t\t}\t\r\n\r\n\t\tconst bookings = Array.from(this.el.querySelectorAll('[data-booking]'));\r\n\r\n\t\tif (bookings.length) {\r\n\t\t\tfor (let el of bookings) {\r\n\t\t\t\tconst booking = JSON.parse(el.getAttribute('data-booking') || '');\r\n\t\t\t\tthis.editBookingHandler(el, booking);\r\n\t\t\t\tthis.deleteBookingHandler(el, booking);\r\n\t\t\t\tthis.viewTicketsHandler(el, booking);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\teditBookingHandler(el: Element, booking: IBooking) {\r\n\t\tconst buttons = Array.from(el.querySelectorAll('[data-edit-booking]'));\r\n\t\t\r\n\t\tif (buttons.length) {\r\n\t\t\tfor (let button of buttons) {\r\n\t\t\t\tbutton.addEventListener('click', () => editBookingConfirmation(booking));\t\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tdeleteBookingHandler(el: Element, booking: IBooking) {\r\n\t\tconst buttons = Array.from(el.querySelectorAll('[data-delete-booking]'));\r\n\t\t\r\n\t\tif (buttons.length) {\r\n\t\t\tfor (let button of buttons) {\r\n\t\t\t\tbutton.addEventListener('click', () => cancelTripConfirmation(booking));\t\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tdeletePassHandler(el: Element, pass: IPassFullModel) {\r\n\t\tconst buttons = Array.from(el.querySelectorAll('[data-delete-pass]'));\r\n\t\t\r\n\t\tif (buttons.length) {\r\n\t\t\tfor (let button of buttons) {\r\n\t\t\t\tbutton.addEventListener('click', () => deletePassConfirmation(pass));\t\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tinfoPassHandler(el: Element, pass: IPassFullModel) {\r\n\t\tconst buttons = Array.from(el.querySelectorAll('[data-pass-info]'));\r\n\t\t\r\n\t\tif (buttons.length) {\r\n\t\t\tfor (let button of buttons) {\r\n\t\t\t\tbutton.addEventListener('click', () => passInfo(pass));\t\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tviewTicketsHandler(el: Element, booking: IBooking) {\r\n\t\tconst buttons = Array.from(el.querySelectorAll('[data-view-ticket]'));\r\n\r\n\t\tif (buttons.length) {\r\n\t\t\tfor (let button of buttons) {\r\n\t\t\t\tbutton.addEventListener('click', () => viewTickets(booking));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tinitViews() {\r\n\t\tfor (const loader of this.viewLoaders) {\r\n\t\t\tfor (const node of this.el.querySelectorAll(loader.querySelector) as any) {\r\n\t\t\t\tloader.load(node as HTMLElement);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}","import App from './app';\r\n\r\nwindow.addEventListener('load', () => {\t\r\n\tnew App();\r\n});\r\n"],"sourceRoot":""}\r\n\t\t\t\t\t
\r\n\t\t\t\t${this.options.title}
\r\n\t\t\t\t\t${this.options.message ? `${this.options.message}
` : ''}\r\n\t\t\t\t\r\n\t\t\t\t\t${this.options.secondaryButtonText ? `` : ''}\r\n\t\t\t\t
\r\n\t\t\t