', {\r\n class: 'suggestion-pills'\r\n });\r\n\r\n if (program.IncludedStates) {\r\n const pillSpanIns = $('
', {\r\n class: 'suggestion-pill-ins',\r\n text: program.IncludedStates\r\n });\r\n suggestionPillWrapper.append(pillSpanIns);\r\n }\r\n\r\n if (program.LevelCode) {\r\n const transformedLevelCode = transformLevelCode(\r\n program.LevelCode\r\n );\r\n const bgColor = getLevelCodeColor(transformedLevelCode);\r\n\r\n let title;\r\n switch (transformedLevelCode) {\r\n case 'UG':\r\n title = 'Undergraduate';\r\n break;\r\n case 'GR':\r\n title = 'Graduate';\r\n break;\r\n case 'CE':\r\n title = 'Continuing Education';\r\n break;\r\n default:\r\n title = '';\r\n }\r\n\r\n const pillSpanLevelCode = $('', {\r\n class: 'suggestion-pill-levelcode',\r\n text: transformedLevelCode,\r\n style: `background-color: ${bgColor};`,\r\n title: title\r\n });\r\n suggestionPillWrapper.append(pillSpanLevelCode);\r\n }\r\n\r\n const suggestionsListLi = $('', {\r\n id: 'suggestion-' + index,\r\n tabindex: '-1',\r\n role: 'option',\r\n 'aria-selected': 'false'\r\n });\r\n\r\n suggestionsListLi.append(suggestionTextSpan, suggestionPillWrapper);\r\n suggestionsList.append(suggestionsListLi);\r\n });\r\n\r\n suggestionsList.show();\r\n if (!suggestionsContainer.hasClass('has-suggestions')) {\r\n suggestionsContainer.addClass('has-suggestions');\r\n }\r\n if (!suggestionsContainer.hasClass('icon-rotate')) {\r\n suggestionsContainer.addClass('icon-rotate');\r\n }\r\n } else {\r\n if (suggestionsContainer.hasClass('has-suggestions')) {\r\n suggestionsContainer.removeClass('has-suggestions');\r\n }\r\n if (suggestionsContainer.hasClass('icon-rotate')) {\r\n suggestionsList.hide();\r\n suggestionsContainer.removeClass('icon-rotate');\r\n }\r\n }\r\n }\r\n\r\n function toggleSuggestionsDisplay() {\r\n if (suggestionsList.is(':visible')) {\r\n suggestionsList.hide();\r\n suggestionsContainer.removeClass('icon-rotate');\r\n } else {\r\n suggestionsList.show();\r\n suggestionsContainer.addClass('icon-rotate');\r\n }\r\n }\r\n\r\n function setSuccessState() {\r\n const fieldContainer = $('.programs .uxAbleForms--field');\r\n fieldContainer.addClass('successState');\r\n fieldContainer.removeClass('errorState');\r\n $('.programs .uxAbleForms--errorMessageText').text('');\r\n }\r\n\r\n function setErrorState() {\r\n const fieldContainer = $('.programs .uxAbleForms--field');\r\n fieldContainer.addClass('errorState');\r\n fieldContainer.removeClass('successState');\r\n $('.programs .uxAbleForms--errorMessageText').text(\r\n 'Please provide your desired program before proceeding.'\r\n );\r\n $('#exp-continue-btn').prop('disabled', true);\r\n }\r\n\r\n inputProgramFinder.on('input', function () {\r\n const inputVal = $(this).val();\r\n showSuggestions(search(inputVal), inputVal);\r\n });\r\n\r\n $(document).on('click', '#exp-program-suggestions-list li', function () {\r\n suggestionClicked = true;\r\n const text = $(this)\r\n .find('span')\r\n .first()\r\n .text()\r\n .replace(/|<\\/strong>/gi, '');\r\n inputProgramFinder.val(text).trigger('click');\r\n inputProgramFinder.trigger('input');\r\n if (suggestionsContainer.hasClass('icon-rotate')) {\r\n suggestionsList.hide();\r\n suggestionsContainer.removeClass('icon-rotate');\r\n }\r\n suggestionClicked = false;\r\n inputProgramFinder.focus();\r\n });\r\n\r\n $(document).on(\r\n 'mouseenter',\r\n '#exp-program-suggestions-list li',\r\n function () {\r\n $(this).addClass('active').siblings().removeClass('active');\r\n }\r\n );\r\n\r\n $(document).on('click', function (e) {\r\n if (\r\n !$(e.target).closest('.programs.uxAbleForms--fieldContainer').length\r\n ) {\r\n if (suggestionsContainer.hasClass('icon-rotate')) {\r\n suggestionsList.hide();\r\n suggestionsContainer.removeClass('icon-rotate');\r\n }\r\n }\r\n });\r\n\r\n inputProgramFinder.on('blur', function () {\r\n setTimeout(() => {\r\n if (!suggestionClicked) {\r\n if (suggestionsContainer.hasClass('icon-rotate')) {\r\n suggestionsList.hide();\r\n suggestionsContainer.removeClass('icon-rotate');\r\n }\r\n if (\r\n !$(this).val().trim() ||\r\n !programData.find(\r\n (program) =>\r\n program.ProgramName.toLowerCase() ===\r\n $(this).val().toLowerCase()\r\n )\r\n ) {\r\n setErrorState();\r\n } else {\r\n setSuccessState();\r\n }\r\n }\r\n updateButtons();\r\n }, 200);\r\n });\r\n\r\n searchIcon.on('click', function () {\r\n suggestionClicked = true;\r\n if (\r\n !suggestionsContainer.hasClass('has-suggestions') &&\r\n inputProgramFinder.val() == ''\r\n ) {\r\n showSuggestions(search(''), '');\r\n } else {\r\n toggleSuggestionsDisplay();\r\n }\r\n suggestionClicked = false;\r\n });\r\n\r\n searchIcon.on('keydown', function (e) {\r\n if (e.key === 'Enter') {\r\n toggleSuggestionsDisplay();\r\n }\r\n });\r\n\r\n inputProgramFinder.on('keydown', function (e) {\r\n let activeItem = suggestionsList.find('li.active');\r\n let newActiveItem;\r\n\r\n if (e.key === 'Tab' && !e.shiftKey) {\r\n e.preventDefault();\r\n suggestionClicked = true;\r\n searchIcon.focus();\r\n }\r\n\r\n if (suggestionsContainer.hasClass('has-suggestions')) {\r\n switch (e.key) {\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (!activeItem.length) {\r\n newActiveItem = suggestionsList.find('li').first();\r\n } else if (!activeItem.is(':last-child')) {\r\n newActiveItem = activeItem.next();\r\n }\r\n break;\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (!activeItem.is(':first-child')) {\r\n newActiveItem = activeItem.prev();\r\n }\r\n break;\r\n case 'Enter':\r\n e.preventDefault();\r\n if (activeItem.length) {\r\n activeItem.trigger('click');\r\n inputProgramFinder.trigger('input');\r\n }\r\n if (suggestionsContainer.hasClass('icon-rotate')) {\r\n suggestionsList.hide();\r\n suggestionsContainer.removeClass('icon-rotate');\r\n }\r\n break;\r\n case 'Escape':\r\n toggleSuggestionsDisplay();\r\n break;\r\n }\r\n\r\n if (newActiveItem && newActiveItem.length) {\r\n activeItem.removeClass('active');\r\n newActiveItem.addClass('active');\r\n inputProgramFinder.attr(\r\n 'aria-activedescendant',\r\n newActiveItem[0].id\r\n );\r\n\r\n let newScrollTop =\r\n newActiveItem[0].offsetTop +\r\n newActiveItem.outerHeight() / 2 -\r\n suggestionsList.height() / 2;\r\n suggestionsList.scrollTop(newScrollTop);\r\n }\r\n }\r\n if (e.key == 'Enter') {\r\n inputProgramFinder.trigger('blur');\r\n }\r\n });\r\n\r\n function debounce(func, wait, immediate) {\r\n let timeout;\r\n return function () {\r\n const context = this;\r\n const args = arguments;\r\n const later = function () {\r\n timeout = null;\r\n if (!immediate) {\r\n updateValidationStates();\r\n func.apply(context, args);\r\n updateButtons();\r\n }\r\n };\r\n const callNow = immediate && !timeout;\r\n clearTimeout(timeout);\r\n timeout = setTimeout(later, wait);\r\n if (callNow) {\r\n updateValidationStates();\r\n func.apply(context, args);\r\n updateButtons();\r\n }\r\n };\r\n }\r\n\r\n function debouncedUpdateFieldStateEP(inputField, fieldType, wait) {\r\n let timeout;\r\n return function () {\r\n const context = this;\r\n const args = arguments;\r\n clearTimeout(timeout);\r\n const validation = validateInput(inputField.value, fieldType);\r\n if (!validation.isValid) {\r\n timeout = setTimeout(function () {\r\n updateValidationStates();\r\n updateFieldState.apply(context, args);\r\n updateButtons();\r\n }, wait);\r\n } else {\r\n updateValidationStates();\r\n updateFieldState.apply(context, args);\r\n updateButtons();\r\n }\r\n };\r\n }\r\n\r\n function resetFieldState(inputField, fieldType) {\r\n const fieldContainer = inputField.parentElement.parentElement;\r\n const errorMessageText = fieldContainer.parentElement.querySelector(\r\n '.uxAbleForms--errorMessageText'\r\n );\r\n if (fieldType === 'phone') {\r\n fieldContainer.parentElement.parentElement.querySelector(\r\n '.uxAbleForms--errorMessageText'\r\n ).textContent = '';\r\n fieldContainer.parentElement.classList.remove(\r\n 'successState',\r\n 'errorState'\r\n );\r\n } else {\r\n errorMessageText.textContent = '';\r\n fieldContainer.classList.remove('successState', 'errorState');\r\n }\r\n }\r\n\r\n function updateValidationStates() {\r\n isFirstNameValid = validateInput(\r\n document.getElementById('exp-firstname').value,\r\n 'firstName'\r\n ).isValid;\r\n isLastNameValid = validateInput(\r\n document.getElementById('exp-lastname').value,\r\n 'lastName'\r\n ).isValid;\r\n isEmailAddressValid = validateInput(\r\n document.getElementById('exp-emailaddress').value,\r\n 'email'\r\n ).isValid;\r\n isPhoneNumberValid = validateInput(\r\n document.getElementById('exp-phonenumber').value,\r\n 'phone'\r\n ).isValid;\r\n }\r\n\r\n function getPrograms() {\r\n if (window.sessionStorage.getItem('programs')) {\r\n setPrograms(\r\n JSON.parse(window.sessionStorage.getItem('programs')),\r\n $(`#exp-degree`)\r\n );\r\n clearInterval(interval);\r\n }\r\n }\r\n\r\n function setPrograms(programsData, targetSelect) {\r\n programs = programsData;\r\n let tempDegrees = [];\r\n\r\n programs.forEach((element) => {\r\n if (!tempDegrees.includes(element)) {\r\n tempDegrees.push(element.LevelDescription.trim());\r\n }\r\n });\r\n\r\n tempDegrees = tempDegrees.filter(function (element, index, self) {\r\n return index === self.indexOf(element);\r\n });\r\n\r\n tempDegrees = tempDegrees.sort();\r\n const defaultOption = targetSelect.find('option[value=\"default\"]');\r\n targetSelect.empty().append(defaultOption);\r\n\r\n tempDegrees.forEach((element) => {\r\n targetSelect.append($('