${fileName}
`);\n }\n\n /**\n * Create delete button element\n *\n * @param {string} fileName\n * @returns {(HTMLElement|Zepto)} button with a span element\n */\n createDeleteFileButton(fileName) {\n const $deleteFileButton = $('', {\n id: fileName,\n class: `${fileUploaderClass}__item-delete`,\n type: 'button',\n });\n const $deleteFileContent = $('', {\n class: 'xvx-screen-reader-only',\n html: `${this.accessibleDeleteFileText} ${fileName}`,\n });\n\n $deleteFileButton.on('click', this.onClickDeleteItem);\n return $deleteFileButton.append($deleteFileContent);\n }\n\n /**\n * Removes list elements from the DOM and\n * removes value from array\n *\n * @param {e} event\n */\n onClickDeleteItem(e) {\n const $itemToDelete = $(e.target);\n const $parentUl = $itemToDelete.closest('ul.xvx-list');\n\n const valuePositionToDelete = this.files.findIndex((filesItem) => filesItem.name === $itemToDelete.attr('id'));\n if (valuePositionToDelete >= 0) {\n this.files.splice(valuePositionToDelete, 1);\n\n $itemToDelete.closest('.xvx-list__item').remove();\n if (!$parentUl.children().length) {\n $parentUl.remove();\n }\n }\n }\n\n /**\n * Returns an object with files buffer from\n * the input file native data\n *\n * @param {String} name\n * @returns {object}\n */\n getFilesObject() {\n const sealedFiles = Object.seal([].concat(this.files));\n const files = Object.create(sealedFiles);\n return Object.freeze(files);\n }\n\n /**\n * Returns object from getFilesObject\n *\n */\n getFiles() {\n return this.getFilesObject();\n }\n}\n","import $ from 'zepto';\nimport { onDocumentReady, expose } from '../../main';\nimport FileUploader from './fileUploader';\nimport {\n fileUploaderInputSelector,\n fileUploaderNotEnhacedClass,\n fileUploaderNotEnhacedSelector,\n} from '../../utils/constants/classes';\n\nconst $body = $(document.body);\nexport const fileUploaders = {};\n\nexport const getFilesById = (id) => {\n if (!id) {\n return null;\n }\n\n const fileUploaderInstance = fileUploaders[id];\n return fileUploaderInstance ? fileUploaderInstance.getFiles() : [];\n};\n\nexport const initFileUploader = ($context = $body) => {\n const $fileUploaderInputElement = $context.find(fileUploaderInputSelector);\n\n $(fileUploaderNotEnhacedSelector).removeClass(fileUploaderNotEnhacedClass);\n\n $fileUploaderInputElement.each((index, inputElement) => {\n const $inputElement = $(inputElement);\n const fileUploaderId = $inputElement.attr('id');\n fileUploaders[fileUploaderId] = new FileUploader({ id: fileUploaderId });\n fileUploaders[fileUploaderId].initInputFile($inputElement);\n });\n\n expose({ getFilesById });\n};\n\nonDocumentReady('FileUploader', () => {\n initFileUploader();\n});\n","import $ from 'zepto';\nimport { onDocumentReady } from '../../main';\n\nconst $body = $(document.body);\n\nexport function initPasswordField($context = $body) {\n const $passwordInputAnchor = $($context).find('.ui-action-password');\n if ($passwordInputAnchor.length) {\n const eyeOpenClass = 'ui-action-password-visible';\n\n const onClick = (event) => {\n const $target = $(event.target);\n event.preventDefault();\n const $passwordInput = $target.parent('div').children('input');\n if ($passwordInput.attr('type') === 'password') {\n $passwordInput.attr('type', 'text');\n $target.addClass(eyeOpenClass);\n } else if ($passwordInput.attr('type') === 'text') {\n $passwordInput.attr('type', 'password');\n $target.removeClass(eyeOpenClass);\n }\n };\n\n $passwordInputAnchor.off();\n $passwordInputAnchor.on('click', onClick);\n }\n}\n\n// TODO: Add context implementation\nonDocumentReady('PasswordField', () => {\n initPasswordField();\n});\n\nexport default {\n initPasswordField,\n};\n","import $ from 'zepto';\nimport { onDocumentReady } from '../main';\nimport { initToggleSlideElement } from '../utils';\n\nconst $body = $(document.body);\n\nexport function initAccordions(accordionClass, accordionSlideDuration, $context = $body) {\n const accordionItemClass = `${accordionClass}__item`;\n const closeAccordionItemClass = `${accordionItemClass}--close`;\n const accordionItemSelector = `.${accordionItemClass}`;\n const accordionHeaderSelector = `.${accordionClass}__header`;\n const accordionBodySelector = `.${accordionClass}__body`;\n\n function eachHeader(index, item) {\n const $accordionItem = $(item).closest(accordionItemSelector);\n initToggleSlideElement({\n $targetElement: $accordionItem.find(accordionBodySelector),\n $triggerElement: $accordionItem.find(accordionHeaderSelector),\n duration: accordionSlideDuration,\n callback({ isSlideDown }) {\n if (isSlideDown) {\n $accordionItem.removeClass(closeAccordionItemClass);\n } else {\n $accordionItem.addClass(closeAccordionItemClass);\n }\n },\n });\n }\n\n $context.find(accordionHeaderSelector).each(eachHeader);\n $context.find(accordionBodySelector)\n .hide()\n .attr('aria-hidden', true)\n .closest(accordionItemSelector)\n .addClass(closeAccordionItemClass);\n\n $context.find(accordionHeaderSelector)\n .attr('aria-expanded', false);\n}\n\nonDocumentReady('Accordions', () => {\n initAccordions('xvx-accordion', 300, $body);\n});\nexport default {\n initAccordions,\n};\n","import $ from 'zepto';\n\nimport {\n $$$,\n} from '../../../utils/legacy';\n\nimport { isVisible, log } from '../../../utils';\nimport { initPopups } from '../tooltips';\n\nimport {\n FOCUS,\n SCROLL_BAR_EXTRA,\n CLEAR_INPUT_DELAY,\n} from '../../../utils/legacy/constants';\n\nimport {\n WRAPPER_MARKUP,\n COUNTRY_MARKUP,\n PULLDOWN_MARKUP,\n INPUT_MARKUP,\n SEL_COUNTRY,\n} from '../../../utils/legacy/templateConstants';\n\n/**\n * Sets width of original element to custom dropdown in order to match both elements\n * @method adjustDropDownWidthBeforeShowing\n*/\nexport function adjustDropDownWidthBeforeShowing() {\n let newPulldownWidth = this.customPulldownContentWidth;\n // fluid responsive code:\n this.$originalHtmlSelectElement.show(); // show the original element so that we can get the width;\n this.originalHtmlSelectElementWidth = this.$originalHtmlSelectElement[0].offsetWidth; // get the width\n this.$originalHtmlSelectElement.hide(); // hide original element now that we have the width\n // Don't make options pulldown narrower than the original HTML select element\n if (this.customPulldownContentWidth < this.originalHtmlSelectElementWidth) {\n newPulldownWidth = this.originalHtmlSelectElementWidth;\n }\n // update the drop down width\n this.dropDown.setOption('width', newPulldownWidth);\n}\n\n/**\n * If needed it sets scroll to custom pulldown\n * @method setScrollWhilePulldown\n * @param {Event} e Event object\n*/\nfunction setScrollWhilePulldown(e) {\n const originalEvent = e.originalEvent || e;\n const delta = originalEvent.wheelDelta || -originalEvent.detail;\n const { currentTarget } = e;\n\n if ((delta > 0) && ($(currentTarget).scrollTop() <= 0)) {\n return false;\n }\n if ((delta < 0) && $(currentTarget).scrollTop() >= (currentTarget.scrollHeight - $(currentTarget).height())) {\n return false;\n }\n\n return true;\n}\n\n/**\n * Removes css classes that show an item as selected in custom pulldown\n * @method unhiliteField\n*/\nexport function unhiliteField() {\n $('.customSelect', this.$customPulldownFieldElement).removeClass(FOCUS);\n this.$customPulldownFieldElement.removeClass('custom-pulldown-popup-isabove custom-pulldown-popup-isbelow');\n}\n\n/**\n * Hides custom pulldown and clear timeout for showPulldownTimeout\n * @method hidePulldown\n*/\nexport function hidePulldown() {\n clearTimeout(this.showPulldownTimeout);\n this.unhiliteField();\n this.dropDown.hide();\n}\n\n/**\n * Adds css class that show an item as selected in custom pulldown\n * @method hiliteField\n*/\nexport function hiliteField() {\n $('.customSelect', this.$customPulldownFieldElement).addClass(FOCUS);\n}\n\n/**\n * Ensures that the specified module exists in memory\n * @method objectTest\n * @param {String} moduleName Specify the module name that is going to be verified\n*/\nexport function objectTest(moduleName) {\n let mod = window.xoom;\n const parts = moduleName.split('.');\n const partsLength = parts.length;\n\n for (let i = 0; i < partsLength; i += 1) {\n if (i !== 0) {\n mod = mod[parts[i]];\n }\n if (!mod) {\n break;\n }\n }\n return mod;\n}\n\n/**\n * Updates original element with selected item in custom pulldown and update visual selected item\n * in custom pulldown.\n * @method updateVisualsWithSelItem\n*/\nexport function updateVisualsWithSelItem() {\n const newOpt = $('select option', this.$originalHtmlSelectElement)\n .filter(function selected() { return this.selected; });\n\n let newOptTitle = newOpt.attr('title');\n if (!newOptTitle) {\n newOpt.attr('title', '');\n newOptTitle = newOpt.attr('title');\n }\n const newOptClass = newOpt.attr('class') || '';\n const newOptText = newOpt.text().escapeHTML() || '';\n let displayString = SEL_COUNTRY.replaceTokens(newOptClass,\n newOptText,\n newOptTitle.escapeHTML());\n\n if (this.updateVisualCallback) {\n displayString = this.updateVisualCallback(newOpt);\n }\n this.$selectedItemDisplayElement.html(displayString);\n\n // update the markup stored in the dropDown 'customPulldownTargetElement' attribute.\n this.dropDown.setOption('customPulldownTargetElement', this.$customPulldownFieldElement.html());\n}\n\n/**\n * After selecting an item in custom pulldown a callback is called, if no callback is called the user\n * is returned to the hidden field after selecting an item.\n * @method chooseCallback\n * @param {domElement} stayOnField Element where the custom pulldown open\n * @param {Event} event Event object\n*/\nexport function chooseCallback(stayOnField, event) {\n // data-pulldown-after-selection specifies a custom callback to be run after the user has made a selection\n if (this.afterSelectionCallbackName && !this.afterSelectionCallback) {\n this.afterSelectionCallback = this.objectTest(this.afterSelectionCallbackName);\n }\n\n if (this.afterSelectionCallback) {\n // Use custom supplied callback if available\n this.afterSelectionCallback.apply(this.$originalHtmlSelectElement[0], [event]);\n } else if (stayOnField) {\n // return the user to the hidden field after\n // they clicked on a selection in the custom pulldown\n // We need this so that they can tab to the next field\n // successfully.\n this.hiliteField();\n this.$inputElt.trigger('softfocus');\n }\n}\n\n/**\n * Updates custom pulldown and original element with the chosen item\n * @method chooseCountry\n*/\nexport function chooseCountry() {\n if (this.$originalHtmlSelectElement.val() !== this.savedChoice) {\n this.$originalHtmlSelectElement.trigger('change');\n this.savedChoice = this.$originalHtmlSelectElement.val();\n }\n\n this.hidePulldown();\n this.updateVisualsWithSelItem();\n}\n\n/**\n * Shows or hide custom pulldown if this has items\n * @method togglePulldown\n*/\nexport function togglePulldown() {\n // toggle only if there are options. Otherwise ignore click.\n if ($('.countryItem', this.$pickerElt).length > 0) {\n if (isVisible(this.$pickerElt)) {\n this.hidePulldown();\n } else {\n this.$inputElt.trigger(FOCUS);\n }\n }\n}\n\n/**\n * Clears input on custom pulldown\n * @method clearInput\n*/\nexport function clearInput() {\n this.$inputElt.val('');\n}\n\n/**\n * Returns if option has valid values\n * @method getOptionsFlag\n * @param {String} optionVal Option element value\n * @param {domElement} $option Options element\n * @param {String} emptyOptionValue Constant string used in data attribute for option element\n*/\nexport function getOptionsFlag(optionVal, $option, emptyOptionValue) {\n return (optionVal === '') && !($option.hasClass(emptyOptionValue)\n || $option.data(emptyOptionValue));\n}\n\n/**\n * Gets options markup for each custom pulldown. It set visual display settings for each item in\n * custom pulldown\n * @method getOptionsMarkup\n * @param {domElement} $options Options element\n*/\nexport function getOptionsMarkup($options) {\n const PULLDOWN_LINEITEM = '