\n \n `;\n }\n\n /**\n * @function renderAbandonConfigurationModal\n * @description Will add an onclick listener to all 'Wijzigen' cta's inside the minicart. When clicked on, the abandonConfiguration modal will show up.\n */\n // eslint-disable-next-line\n renderAbandonConfigurationModal() {\n const editButtons = [...document.querySelectorAll('.js-edit-button')];\n editButtons.forEach((editButton) => {\n editButton.addEventListener('click', () => {\n const { abandonConfigurationModalId } = editButton.dataset;\n\n const abandonConfigurationModal = document.getElementById(abandonConfigurationModalId);\n abandonConfigurationModal?.render();\n });\n });\n }\n}\n","'use-strict';\n\nimport ModalHelper from './modalHelper';\n\n/**\n * @class VZModal\n * @description Creates a modal based on defaultModalHTML or the HTML within the custom element.\n * @example\n * \n
Optional custom HTML if not using defaultModalHTML
\n \n * @usage\n * const modal = document.getElementById('specific-modal-name');\n * modal.render(); // An optional object can be passed to render() to overwrite the defaults.\n */\nexport default class VZModal extends HTMLElement {\n constructor() {\n super();\n this.setAttribute('tabindex', '-1');\n this.setAttribute('aria-hidden', 'true');\n this.hasCustomHtml = this.dataset.customModal === 'true';\n this.modalHelper = new ModalHelper();\n }\n\n /**\n * @function createTemplate\n * @description Injects the default modal HTML into the modal container.\n * @param {string} templateHtml - String representing default modal HTML.\n */\n createTemplate(templateHtml) {\n const template = document.createElement('template');\n template.innerHTML = templateHtml;\n this.appendChild(template.content.cloneNode(true));\n }\n\n connectedCallback() {\n document.addEventListener('minicart:open', this.modalHelper.renderAbandonConfigurationModal);\n }\n\n disconnectedCallback() {\n document.removeEventListener('minicart:open', this.modalHelper.renderAbandonConfigurationModal);\n }\n\n /**\n * @function render\n * @description Renders the contents of the addToBasketModal and injects text based on data attributes.\n * @param {Object} options - An optional parameter with configuration options for the modal. To be used to overwrite the default options.\n */\n render(options = {}) {\n // If the default modal does not fit the requirement, custom HTML can be added within the custom element.\n if (this.hasCustomHtml) {\n this.showModal();\n return;\n }\n\n this.configurationOptions = { ...this.dataset, ...ModalHelper.defaultOptions, ...options };\n const defaultModalHTML = ModalHelper.getDefaultModalHtml(this.configurationOptions);\n\n // Remove existing modal so the template can be recreated with new content.\n this.querySelector('.js-modal-dialog')?.remove();\n\n this.createTemplate(defaultModalHTML); // Inject the template, add it to the DOM.\n\n this.showModal(); // Display the modal.\n }\n\n /**\n * @function showModal\n * @description Checks if modal already exists and either creates a new one to show, or shows the existing one.\n */\n showModal() {\n const { backdrop, keyboard } = { ...this.configurationOptions, ...this.dataset }; // If passed in the dataset, the default values for keyboard and backdrop will be overwritten.\n const keyboardSetting = typeof keyboard === 'string' ? keyboard === 'true' : keyboard;\n\n const newModal = new window.bs.Modal(this, { backdrop, keyboard: keyboardSetting }); // Options come from data attributes.\n if (newModal) newModal.show();\n }\n\n /**\n * @function hideModal\n * @description Hides the modal\n */\n hideModal() {\n window.bs.Modal.getInstance(this)?.hide();\n }\n}\n\nif (!window.customElements.get('vz-modal')) {\n window.customElements.define('vz-modal', VZModal);\n}\n","'use strict';\n\n// Can't import cartridges/app_vodafone_ziggo/cartridge/scripts/forms/validator.js\nconst ID_TYPES_CODES = {\n idCard: '1',\n passport: '2',\n driversLicense: '3',\n permit1: '4',\n permit2: '5',\n permit3: '6',\n permit4: '7',\n permit5: '8',\n permitEU: '9',\n other: '10'\n};\n\nconst ID_VALIDATION_RULES = {};\nID_VALIDATION_RULES[ID_TYPES_CODES.passport] = /^[A-NP-Z]{2}[\\dA-NP-Z]{6}\\d{1}$/gi;\nID_VALIDATION_RULES[ID_TYPES_CODES.idCard] = ID_VALIDATION_RULES[ID_TYPES_CODES.passport];\nID_VALIDATION_RULES[ID_TYPES_CODES.driversLicense] = /^\\d{10}$/gi;\nID_VALIDATION_RULES[ID_TYPES_CODES.permit1] = /^(?!(X00|V))[\\dA-Z]{8,9}$/gi;\nID_VALIDATION_RULES[ID_TYPES_CODES.permit2] = ID_VALIDATION_RULES[ID_TYPES_CODES.permit1];\nID_VALIDATION_RULES[ID_TYPES_CODES.permit2] = ID_VALIDATION_RULES[ID_TYPES_CODES.permit1];\nID_VALIDATION_RULES[ID_TYPES_CODES.permit3] = ID_VALIDATION_RULES[ID_TYPES_CODES.permit1];\nID_VALIDATION_RULES[ID_TYPES_CODES.permit4] = ID_VALIDATION_RULES[ID_TYPES_CODES.permit1];\nID_VALIDATION_RULES[ID_TYPES_CODES.permit5] = ID_VALIDATION_RULES[ID_TYPES_CODES.permit1];\nID_VALIDATION_RULES[ID_TYPES_CODES.permitEU] = ID_VALIDATION_RULES[ID_TYPES_CODES.permit1];\n\n// this regexp is always invalid\nID_VALIDATION_RULES[ID_TYPES_CODES.other] = /(?=a)b/;\n\n/**\n * @constant {string} ID_TYPE - Selector for identification type\n */\nconst ID_TYPE = 'dwfrm_checkoutDetails_identification_idtype';\n\n/**\n * @private setValidationPattern\n * @param {Event} evt - Change or load event\n */\nfunction setValidationPattern(evt) {\n const element = evt.target.id === ID_TYPE ? evt.target : document.getElementById(ID_TYPE);\n if (element.value) {\n element.closest('form').dispatchEvent(\n new CustomEvent('identificationTypeChanged', {\n detail: {\n type: element.value,\n regex: ID_VALIDATION_RULES[element.value]\n }\n })\n );\n }\n}\n\n/**\n * @public idType\n * @param {HTMLSelectElement} element - Identification type selector\n */\nexport default function idType(element) {\n if (element.id !== ID_TYPE) return;\n\n element.addEventListener('change', setValidationPattern);\n window.addEventListener('load', setValidationPattern);\n}\n","'use strict';\n\n/**\n * @constant {string} CAPS_MASK_ATTRIBUTE - Attribute value for caps mask\n */\nexport const CAPS_MASK_ATTRIBUTE = 'caps';\n\n/**\n * @class CapsMask\n * @param {HTMLInputElement} element - An input field\n */\nexport class CapsMask {\n constructor(element) {\n element.addEventListener('input', this.onInput.bind(element));\n element.addEventListener('change', this.onInput.bind(element));\n }\n\n onInput() {\n const position = this.selectionStart;\n this.value = this.value.toUpperCase();\n this.setSelectionRange(position, position);\n }\n}\n","'use strict';\n\nimport { CapsMask } from './caps';\n\n/**\n * @constant {string} POSTCODE_MASK_ATTRIBUTE - Attribute value for postcode mask\n */\nconst POSTCODE_MASK_ATTRIBUTE = 'postcode';\n\n/**\n * @constant {integer} BACKSPACE_KEYCODE\n */\nconst BACKSPACE_KEYCODE = 8;\n\n/**\n * @constant {integer} DELETE_KEYCODE\n */\nconst DELETE_KEYCODE = 46;\n\n/**\n * @constant {Array} UNDO_KEYS\n */\nconst UNDO_KEYS = [BACKSPACE_KEYCODE, DELETE_KEYCODE, 'backspace', 'delete'];\n\n/**\n * @class PostCodeMask\n * @param {HTMLInputElement} element - The input field to put the postcode mask on.\n */\nclass PostCodeMask extends CapsMask {\n constructor(element) {\n super(element);\n this.element = element;\n this.onKeyUp = this.onKeyUp.bind(this);\n\n element.addEventListener('keyup', this.onKeyUp);\n }\n\n /**\n * @private onKeyUp\n * @param {KeyboardEvent} evt - On key up event\n */\n onKeyUp(evt) {\n const key = evt.key && typeof evt.key !== 'number' ? evt.key.toLocaleLowerCase() : evt.key || null;\n if (key && UNDO_KEYS.some((k) => k === key)) {\n if (this.element.value.length === 5) {\n this.element.value = this.element.value.substring(0, 4);\n }\n return;\n }\n\n // Mask the input value for postcodes using a regular expression.\n this.element.value = this.element.value.replace(/(^\\d{4})(\\w{0,2}$)/, '$1 $2');\n }\n}\n\nexport { PostCodeMask, POSTCODE_MASK_ATTRIBUTE };\n","'use strict';\n\nimport { CapsMask } from './caps';\n\n/**\n * @constant {string} POSTCODE_MASK_ATTRIBUTE - Attribute value for postcode mask\n */\nconst IBAN_MASK_ATTRIBUTE = 'iban';\n\n/**\n * @constant {integer} BACKSPACE_KEYCODE\n */\nconst BACKSPACE_KEYCODE = 8;\n\n/**\n * @constant {integer} DELETE_KEYCODE\n */\nconst DELETE_KEYCODE = 46;\n\n/**\n * @constant {Array} UNDO_KEYS\n */\nconst UNDO_KEYS = [BACKSPACE_KEYCODE, DELETE_KEYCODE, 'backspace', 'delete'];\n\nclass IBANMask extends CapsMask {\n constructor(element) {\n super(element);\n this.element = element;\n this.onKeyUp = this.onKeyUp.bind(this);\n\n element.addEventListener('keyup', this.onKeyUp);\n }\n\n /**\n * @private onKeyUp\n * @param {KeyboardEvent} evt - On key up event\n */\n onKeyUp(evt) {\n const key = evt.key && typeof evt.key !== 'number' ? evt.key.toLocaleLowerCase() : evt.key || null;\n if (key && UNDO_KEYS.some((k) => k === key)) {\n if (this.element.value.length % 4 === 1) {\n this.element.value = this.element.value.substring(0, this.element.value.length);\n }\n return;\n }\n\n // Mask the input value for iban using a regular expression.\n this.element.value = this.element.value\n .replace(/\\s/g, '')\n .replace(/^([a-zA-Z]{2}\\d{2})(\\w{0,4})(\\d{0,4})(\\d{0,4})(\\d{0,2})/, '$1 $2 $3 $4 $5')\n .replace(/\\s\\s+/g, ' ');\n }\n}\n\nexport { IBANMask, IBAN_MASK_ATTRIBUTE };\n","'use strict';\n\n/**\n * @constant {string} DATE_MASK_ATTRIBUTE - Attribute value for date mask\n */\nconst DATE_MASK_ATTRIBUTE = 'date';\n\nclass DateMask {\n constructor(element) {\n this.field = element;\n this.cursorIndex = 0;\n this.maskText = element.getAttribute('data-mask-text');\n this.pressedCharacters = [];\n\n this.onInput = this.onInput.bind(this);\n this.onPaste = this.onPaste.bind(this);\n this.replaceRemovedDigitWithLetter = this.replaceRemovedDigitWithLetter.bind(this);\n this.onArrowRight = this.onArrowRight.bind(this);\n this.onArrowLeft = this.onArrowLeft.bind(this);\n this.onCharacterRemoval = this.onCharacterRemoval.bind(this);\n this.checkIfDashIsSelected = this.checkIfDashIsSelected.bind(this);\n this.replaceAsYouType = this.replaceAsYouType.bind(this);\n\n element.addEventListener('keydown', this.onKeyDown.bind(this));\n element.addEventListener('keyup', this.onInput);\n element.addEventListener('paste', this.onPaste);\n }\n\n /**\n * @private runRegexOnValue\n * @param {string} value - The value\n * @returns {array} - The final manipulated value as an array with each character\n *\n * @description\n * Mask the input value for date using regular expressions and enforcing dashes at specific locations\n */\n static runRegexOnValue(value) {\n return value\n .toUpperCase() // In case lowercase d/m/j letters are entered\n .replace(/^(\\d{1}-)-/, '0$1-') // If we already have the mask and one digit plus a dash has been entered, prepend a 0\n .replace(/-(\\d{1}-)-/, '-0$1-') // For the 2nd group, do the same and prepend a 0\n\n .replace(/-+-/g, '-') // Convert multiple dashes to a single dash\n .replace(/[^\\dDMJ-]/g, '') // Remove any character that is not [numeric, letters D/M/J, a dash]\n .replace(/^-(\\d{1})/, '$1') // If the string starts with a dash, remove the dash\n .replace(/-/g, '') // After all manipulations and cleaning up, remove all dashes (which could also have been added in the 3rd group) and..\n .split(''); // split up our current string so we can enforce dashes on specific locations only\n }\n\n /**\n * @private totalLengthUntilLastDigit\n * @param {string} newVal - The value\n * @returns {number} - The total length\n *\n * @description\n * Calculate what the total length of newVal would be once the dashes are added through `splice`, only until the last entered digit\n * We need this to do calculations for cursorOffset\n */\n static totalLengthUntilLastDigit(newVal) {\n const untilLastDigit = newVal.join('').replace(/[\\D]*$/, '');\n let totalLength = untilLastDigit.length;\n if (totalLength > 4) {\n totalLength += 1;\n }\n if (totalLength > 2) {\n totalLength += 1;\n }\n\n return totalLength;\n }\n\n /**\n * @private replaceRemovedDigitWithLetter\n * @param {string} newVal - The value\n * @returns {array} - The updated newVal\n *\n * @description\n * Will replace the removed digit with a corresponding letter from the maskText\n */\n replaceRemovedDigitWithLetter(newVal) {\n // Calculate the offset which is necessary to determine where the replacing character should be placed\n // The offset is based on the cursorIndex and the amount of dashes that are present\n let cursorOffset = 0;\n const cursorIndex = this.cursorIndex;\n\n if (cursorIndex === 3 || cursorIndex === 4) {\n cursorOffset -= 1;\n } else if (cursorIndex > 4) {\n cursorOffset -= 2;\n }\n\n // Decide which character should take it's place and add it to the array\n const removedCharacter = this.maskText.substring(cursorIndex, cursorIndex + 1);\n\n if (removedCharacter !== '-') {\n newVal.splice(cursorIndex + cursorOffset, 0, removedCharacter);\n }\n\n return newVal;\n }\n\n /**\n * @private addDashes\n * @param {string} newVal - The value\n * @returns {array} - The updated newVal\n *\n * @description\n * Will add dashes at specific spots\n */\n static addDashes(newVal) {\n // If we have 4 or more digits, add a dash\n if (newVal.length >= 4) {\n newVal.splice(4, 0, '-');\n }\n\n // If we have 2 or more digits, add a dash\n if (newVal.length >= 2) {\n newVal.splice(2, 0, '-');\n }\n\n return newVal;\n }\n\n /**\n * @private onArrowRight\n * @param {string} newVal - The value\n *\n * @description\n * Will move the cursor to the right based on some checks\n */\n onArrowRight(newVal) {\n if (this.checkIfDashIsSelected(newVal)) this.cursorIndex += 1;\n this.field.setSelectionRange(this.cursorIndex, this.cursorIndex);\n }\n\n /**\n * @private onArrowLeft\n * @param {string} newVal - The value\n *\n * @description\n * Will move the cursor to the left based on some checks\n */\n onArrowLeft(newVal) {\n if (this.checkIfDashIsSelected(newVal, 'left')) this.cursorIndex -= 1;\n this.field.setSelectionRange(this.cursorIndex, this.cursorIndex);\n }\n\n /**\n * @private onCharacterRemoval\n * @param {string} newVal - The value\n *\n * @description\n * Will move the cursor to the left based on some checks\n */\n onCharacterRemoval(newVal) {\n // If the character on the left is a dash, move an extra spot to the left\n if (this.checkIfDashIsSelected(newVal, 'left')) this.cursorIndex -= 1;\n\n // If we end up before the beginning, reset the index\n if (this.cursorIndex < 0) this.cursorIndex = 0;\n\n this.field.setSelectionRange(this.cursorIndex, this.cursorIndex);\n }\n\n /**\n * @private checkIfDashIsSelected\n * @param {string} value - The string to check\n * @param {string} direction - Either 'left' or 'right'\n * @param {number} offset - An optional offset\n * @returns {boolean} - True of false\n */\n checkIfDashIsSelected(value, direction, offset = 0) {\n const cursorIndex = this.cursorIndex + offset;\n\n if (direction === 'left') {\n return value.substring(cursorIndex - 1, cursorIndex) === '-';\n }\n\n return value.substring(cursorIndex, cursorIndex + 1) === '-';\n }\n\n /**\n * @private replaceAt\n * @param {string} value - The original value\n * @param {number} index - The position of the old character to replace\n * @param {string} replacement - The replacement character\n * @returns {string} - An updated value\n */\n static replaceAt(value, index, replacement) {\n return value.substring(0, index) + replacement + value.substring(index + 1);\n }\n\n /**\n * @private replaceAsYouType\n * @param {string} key - The pressed key as a string\n * @returns {string} - A possibly updated value\n * @description\n * Will replace the next character as you type. This is necessary since we have a max-length on the field.\n */\n replaceAsYouType(key) {\n let value = this.field.value;\n const isDigit = !window.isNaN(key);\n const allowedDash = key === '-' && this.checkIfDashIsSelected(value, 'right', 1);\n\n // If we're not at the end\n // and there's no selection at the moment\n // and the inputted character is either a digit or a dash\n if (this.cursorIndex < value.length && !this.hasSelection && (isDigit || allowedDash)) {\n // If we're before a dash, replace the character after the dash\n if (this.checkIfDashIsSelected(value)) {\n this.cursorIndex++;\n }\n\n value = this.constructor.replaceAt(value, this.cursorIndex, key);\n this.cursorIndex++;\n }\n\n return value;\n }\n\n /**\n * @private onKeyDown\n * @param {KeyboardEvent} evt - On key down event\n */\n onKeyDown(evt) {\n // If the user is holding the key down, and it's not the backspace/delete button, preventDefault\n if (evt.repeat && evt.key !== 'Backspace' && evt.key !== 'Delete') {\n evt.preventDefault();\n return;\n }\n\n this.hasSelection = evt.target.selectionEnd > evt.target.selectionStart;\n const isDigit = !window.isNaN(evt.key);\n\n if (isDigit || evt.key === '-') {\n evt.preventDefault();\n this.pressedCharacters.push(evt.key);\n this.onInput(evt);\n }\n }\n\n /**\n * @private onInput\n * @param {KeyboardEvent} evt - On key up event\n */\n onInput(evt) {\n if (\n evt.type === 'keyup' &&\n (evt.key === 'Escape' ||\n evt.key === 'Enter' ||\n evt.key === 'Tab' ||\n evt.key === 'Control' ||\n evt.key === 'Shift' ||\n evt.key === 'Alt' ||\n evt.key === 'Meta' ||\n evt.key === 'ArrowUp' ||\n evt.key === 'ArrowDown')\n ) {\n return;\n }\n\n const field = this.field;\n const val = field.value;\n let charRemoved = evt.type === 'keyup' && (evt.key === 'Backspace' || evt.key === 'Delete');\n this.cursorIndex = field.selectionStart;\n\n // Getting the pressed character from the array is to cater for the edge case where the user held down for example '1' and then pressed '2'.\n // This should force '1' to be shown first and then '2', instead of the other way around if we would just get evt.key.\n // This is a \"complex\" workaround for a simple problem which would much easier be fixed by using `onKeyDown` instead of `onKeyUp`, but it's\n // too late to refactor half of this file now...\n const firstPressedCharacter = this.pressedCharacters[0];\n\n // If the entire value/date has been selected\n if (evt.target.selectionStart === 0 && evt.target.selectionEnd === 10) {\n if (firstPressedCharacter) {\n // If a character has been entered, reset the value to the pressed character\n field.value = firstPressedCharacter;\n this.cursorIndex++;\n } else {\n // Stop executing the rest of this method so the user can \"select all\" and then hit backspace/delete\n return;\n }\n }\n\n // Init the mask if there is no value yet (seeing as we preventDefault in `onKeyDown`)\n // Also adjust the `empty` class accordingly\n if (val.length === 0 && firstPressedCharacter) {\n field.value = firstPressedCharacter;\n field.classList.remove('empty');\n } else if (val.length === 0) {\n field.classList.add('empty');\n }\n\n // Replace characters as you type\n let newVal = this.replaceAsYouType(firstPressedCharacter, val);\n field.value = newVal;\n\n this.pressedCharacters.shift();\n\n // Mask the input value for date using regular expressions and enforcing dashes at specific locations\n newVal = this.constructor.runRegexOnValue(newVal);\n\n // Calculate what the total length of newVal would be once the dashes are added through `splice`, only until the last entered digit\n // We need this to do calculations for cursorOffset\n const totalLength = this.constructor.totalLengthUntilLastDigit(newVal);\n\n // Will replace the removed digit with a corresponding letter from the maskText\n if (charRemoved) {\n newVal = this.replaceRemovedDigitWithLetter(newVal);\n }\n\n // If we removed any digit \"in the middle\",\n // Reset `charRemoved` to false, in order to keep the cursor in the current position\n if (charRemoved && this.cursorIndex < totalLength) {\n charRemoved = false;\n }\n\n // Add dashes at specific spots\n newVal = this.constructor.addDashes(newVal);\n\n // Set final value with a format of xx-xx-xxxx\n // If the value is incomplete, finish the rest with the mask\n if (totalLength > 0) {\n newVal = newVal.join('').substring(0, 10);\n newVal += this.maskText.substring(newVal.length, 10);\n this.field.value = newVal;\n } else {\n this.field.value = '';\n return;\n }\n\n // If arrow left was pressed\n if (evt.key === 'ArrowLeft') {\n this.onArrowLeft(newVal);\n return;\n }\n\n // If arrow right was pressed\n if (evt.key === 'ArrowRight') {\n this.onArrowRight(newVal);\n return;\n }\n\n // If a character was removed\n if (charRemoved) {\n this.onCharacterRemoval(newVal);\n return;\n }\n\n // When a character has been entered, increment the cursorIndex\n if (this.checkIfDashIsSelected(newVal)) {\n this.cursorIndex += 1;\n }\n\n // Set the new selection based on calculations done in above methods\n this.field.setSelectionRange(this.cursorIndex, this.cursorIndex);\n }\n\n /**\n * @private onPaste\n * @param {KeyboardEvent} evt - On key up event\n */\n onPaste(evt) {\n this.onInput(evt);\n\n setTimeout(() => {\n const val = this.field.value;\n this.field.setSelectionRange(val.length, val.length);\n }, 100); // small delay is necessary because the dashes are added after paste\n }\n}\n\nexport { DateMask, DATE_MASK_ATTRIBUTE };\n","'use strict';\n\nimport { POSTCODE_MASK_ATTRIBUTE, PostCodeMask } from './masks/postcode';\nimport { IBAN_MASK_ATTRIBUTE, IBANMask } from './masks/iban';\nimport { DATE_MASK_ATTRIBUTE, DateMask } from './masks/date';\nimport { CAPS_MASK_ATTRIBUTE, CapsMask } from './masks/caps';\n\n/**\n * @class Mask\n * @param {HTMLInputElement} element - The input field to put a mask on\n */\nclass Mask {\n constructor(element) {\n this.element = element;\n this.maskType = this.element.getAttribute('data-mask');\n\n // PostCode mask\n if (this.maskType === POSTCODE_MASK_ATTRIBUTE) {\n this.mask = new PostCodeMask(this.element);\n }\n if (this.maskType === IBAN_MASK_ATTRIBUTE) {\n this.mask = new IBANMask(this.element);\n }\n if (this.maskType === DATE_MASK_ATTRIBUTE) {\n this.mask = new DateMask(this.element);\n }\n if (this.maskType === CAPS_MASK_ATTRIBUTE) {\n this.mask = new CapsMask(this.element);\n }\n }\n}\n\nexport default Mask;\n","'use strict';\n\n/**\n * @private preventCharacters\n * @param {Event} event - Keydown or paste event\n */\nfunction preventCharacters(event) {\n const { target } = event;\n const bannedCharacters = target.getAttribute('data-prevent');\n\n if (event.key && bannedCharacters.includes(event.key)) {\n event.preventDefault();\n } else if (event.clipboardData) {\n event.preventDefault();\n\n const clipboardData = event.clipboardData.getData('text/plain');\n const dataWithoutBannedCharacters = clipboardData\n .split('')\n .filter((character) => !bannedCharacters.includes(character))\n .join('');\n const currValue = target.value;\n\n if (typeof target.selectionStart === 'number') {\n const start = target.selectionStart;\n const end = target.selectionEnd;\n const newVal = [];\n\n if (start === 0 && end === 0) {\n newVal.push(dataWithoutBannedCharacters);\n newVal.push(currValue);\n } else {\n newVal.push(currValue.substr(0, start));\n newVal.push(dataWithoutBannedCharacters);\n newVal.push(currValue.substr(end, currValue.length - 1));\n }\n\n target.value = newVal.join('');\n } else {\n // Some input types don't support `selectionStart`. In this edge case, just append it to the end\n target.value = currValue + dataWithoutBannedCharacters;\n }\n }\n}\n\n/**\n * @public preventCharactersOnInput\n * @param {HTMLInputElement} element - The input element\n */\nexport default function preventCharactersOnInput(element) {\n if (!element.getAttribute('data-prevent')) return;\n\n element.addEventListener('keydown', preventCharacters);\n element.addEventListener('paste', preventCharacters);\n}\n","'use strict';\n\nconst events = ['keydown', 'paste', 'focus', 'mousedown'];\n\n/**\n * Prevent entry in the field\n * @param {Event} evt - An event\n */\nfunction preventEntry(evt) {\n // ignore tab\n if (evt.keyCode !== 9) evt.preventDefault();\n}\n\n/**\n * Enable the read-only feature\n * @param {HTMLElement} element - The element to make read-only\n * @returns {bool} enabled\n */\nfunction enable(element) {\n events.forEach((event) => {\n element.addEventListener(event, preventEntry);\n });\n return true;\n}\n\n/**\n * Disable the read-only feature\n * @param {HTMLElement} element - The element to make read-only\n * @returns {bool} enabled\n */\nfunction disable(element) {\n events.forEach((event) => {\n element.removeEventListener(event, preventEntry);\n });\n return false;\n}\n\n/**\n * @public idType\n * @param {HTMLSelectElement} element - Identification type selector\n */\nexport default function idType(element) {\n if (!element.hasAttribute('read-only')) return;\n Object.defineProperty(element, 'read-only', {\n enumerable: false,\n configurable: false,\n set: (bool) => {\n if (bool) {\n this.value = enable(element);\n return;\n }\n this.value = disable(element);\n }\n });\n element['read-only'] = element.getAttribute('read-only');\n}\n","'use strict';\n\nimport documentNumber from './documentNumber';\nimport idType from './idType';\nimport mask from './mask';\nimport password from './password';\nimport preventCharacters from './preventCharacters';\nimport readonly from './readonly';\nimport regex from './regex';\nimport valid from './valid';\n\nexport default {\n documentNumber,\n idType,\n mask,\n password,\n preventCharacters,\n readonly,\n regex,\n valid\n};\n","'use strict';\n\n/**\n * @constant {string} DOCUMENT_NUMBER - Input field for document number\n */\nconst DOCUMENT_NUMBER = 'dwfrm_checkoutDetails_identification_documentNumber';\n\n/**\n * @public documentNumber\n * @param {HTMLInputElement} element - Document Number input field\n */\nexport default function documentNumber(element) {\n if (element.name !== DOCUMENT_NUMBER) return;\n\n element.closest('form').addEventListener('identificationTypeChanged', (evt) => {\n // First reset regex state due to /g entries\n // https://stackoverflow.com/questions/2630418/javascript-regex-returning-true-then-false-then-true-etc/2630538#2630538\n element.pattern = evt.detail.regex.toString().replace('/^', '^').replace('$/gi', '$');\n element.regex.lastIndex = 0;\n element.regex = new RegExp(element.pattern);\n if (element.value.length > 0) {\n element.dispatchEvent(new CustomEvent('input'));\n element.dispatchEvent(new CustomEvent('blur'));\n }\n });\n\n const originalErrorMsg = element.dataset.patternError;\n element.addEventListener('input', () => {\n // Reset to original error message\n element.dataset.patternError = originalErrorMsg;\n if (element.dataset.selectedId && element.dataset.selectedId.includes('verblijfsdocument')) {\n if (element.value.toLowerCase().startsWith('x00')) element.dataset.patternError = element.dataset.patternX00Error;\n if (element.value.toLowerCase().startsWith('v')) element.dataset.patternError = element.dataset.patternVError;\n }\n });\n}\n","'use strict';\n\nimport Mask from 'Components/form/mask';\n\n/**\n * @public regex\n * @param {HTMLInputElement} element - The element to put the mask on\n */\nexport default function mask(element) {\n Object.defineProperty(element, 'mask', {\n enumerable: false,\n configurable: false,\n value: new Mask(element)\n });\n}\n","'use strict';\n\n/**\n * @constant {string} PASSWORD_VIEW_TOGGLE - Selector for toggling the view state of a password field.\n */\nconst PASSWORD_VIEW_TOGGLE = '.js-password-toggle';\n\n/**\n * @public showPassword\n * @param {HTMLInputElement} element - The element used to set the password toggle.\n */\nexport default function showPassword(element) {\n const feedbackElement = element.parentElement.querySelector(PASSWORD_VIEW_TOGGLE);\n if (!feedbackElement) return;\n\n feedbackElement.addEventListener('click', () => {\n element.showPassword = element.type === 'password';\n });\n Object.defineProperty(element, 'showPassword', {\n enumerable: false,\n configurable: false,\n set: (value) => {\n if (value) {\n element.type = 'text';\n } else {\n element.type = 'password';\n }\n }\n });\n}\n","'use strict';\n\n/**\n * @public regex\n * @param {HTMLInputElement} element - The element used to set the regex.\n */\nexport default function regex(element) {\n Object.defineProperty(element, 'regex', {\n enumerable: false,\n configurable: true,\n writable: true,\n value: element.required ? new RegExp(element.pattern) : new RegExp() // Pattern or empty when not mandatory\n });\n}\n","'use strict';\n\n/**\n * @public validate\n * @param {HTMLInputElement} element - The element used to validate.\n */\nexport default function validate(element) {\n Object.defineProperty(element, 'valid', {\n enumerable: true,\n configurable: false,\n set: (value) => {\n if (value) {\n element.classList.add('valid');\n element.classList.remove('invalid');\n } else {\n element.classList.add('invalid');\n element.classList.remove('valid');\n }\n }\n });\n}\n","'use strict';\n\nimport decorators from 'Decorators/index';\nimport { validate } from 'app_vodafone_ziggo/util/validation';\n\n/**\n * @class InputField\n * @param {HTMLInputElement} element - The element to create an instance on\n */\nclass VZInputField extends HTMLInputElement {\n constructor() {\n super();\n this.validatePattern = this.validatePattern.bind(this);\n this.setFieldStatus = this.setFieldStatus.bind(this);\n this.onPaste = this.onPaste.bind(this);\n\n this.addEventListener('input', this.validatePattern);\n this.addEventListener('input', this.setFieldStatus);\n this.addEventListener('changeDate', this.setFieldStatus);\n this.addEventListener('changeDate', validate);\n this.addEventListener('paste', this.onPaste);\n this.validate = validate;\n\n decorators.readonly(this);\n decorators.regex(this);\n decorators.valid(this);\n decorators.documentNumber(this);\n\n if (this.hasAttribute('data-mask')) {\n decorators.mask(this);\n }\n\n if (this.hasAttribute('data-prevent')) {\n decorators.preventCharacters(this);\n }\n\n if (this.type === 'password') {\n decorators.password(this);\n }\n\n // Set initial state\n this.setFieldStatus();\n\n if (this.type === 'radio' || this.type === 'checkbox') {\n this.addEventListener('change', validate);\n } else {\n this.addEventListener('blur', validate);\n }\n\n this.closest('form').addEventListener('submit', this.disableExcludedFields);\n }\n\n onPaste(evt) {\n // Execute these methods at the end of the callstack, otherwise `field.value` will be the value before the paste.\n setTimeout(() => {\n this.setFieldStatus();\n validate(evt);\n }, 1);\n }\n\n disableExcludedFields() {\n if (this.hasAttribute('data-exclude')) {\n this.setAttribute('disabled', 'disabled');\n }\n }\n\n /**\n * @private setFieldStatus\n * @description\n * Sets an empty class when the element is empty for styling purposes.\n */\n setFieldStatus() {\n const hasValue = this.value.length > 0;\n const placeholderIsShown = this.constructor.placeholderActive(this);\n if (hasValue) {\n this.classList.remove('empty');\n } else if (placeholderIsShown) {\n // input[type=\"number\"] accepts dash and dots but returns no value for that.\n this.classList.add('empty');\n }\n }\n\n /**\n * @private validatePattern\n * @description\n * Checks whether the value is valid based on pattern\n */\n validatePattern() {\n this.valid = this.regex.test(this.value);\n }\n\n /**\n * @function placeholderActive\n *\n * @param {HTMLInputElement} element - Input element\n * @return {boolean} whether the placeholder is shown or not\n */\n static placeholderActive(element) {\n const selector = `${element.nodeName.toLowerCase()}[name=\"${element.name}\"]:placeholder-shown`;\n return !!document.querySelector(selector);\n }\n}\n\nexport default window.customElements.get('vz-input') || VZInputField;\nif (!window.customElements.get('vz-input')) {\n window.customElements.define('vz-input', VZInputField, { extends: 'input' });\n}\n","'use-strict';\n\nimport { showErrorModal } from 'Root/modal';\n\nexport default class PostcodeCheckHelpers {\n /**\n * @function stripLeadingZero\n * @param {Event} event - InputEvent\n * @description Strips the leading zero and disallows zero as a value.\n */\n static stripLeadingZero(event) {\n const { target: field, data } = event;\n\n if (data === '0') {\n const value = parseInt(field.value, 10);\n field.value = value > 0 ? value : '';\n }\n }\n\n /**\n * @function preventDashDotComma\n * @param {KeyboardEvent} event - keydown\n * @description Prevents a user from filling in a dash, dot or a comma.\n */\n static preventDashDotComma(event) {\n const { key } = event;\n if (['-', ',', '.'].includes(key)) {\n event.preventDefault();\n }\n }\n\n /**\n * @function respectMaxLength\n * @param {Event} event - Input event\n * @description input[type=\"number\"] doesn't respect max-length attribute.\n * This method slices of the last character when exceeding the max length.\n */\n static respectMaxLength(event) {\n const { target } = event;\n if (target.value.length > target.maxLength) {\n target.value = target.value.slice(0, target.maxLength);\n }\n }\n\n /**\n * @function removePAID\n * @description Will remove the PAID when the user has made a change to the address while in edit mode. This references the VZPostcodeCheck form.\n */\n static removePAID() {\n if (this.hiddenInputWithPaid) this.hiddenInputWithPaid.remove();\n }\n\n /**\n * @function hideForm\n * @description Hides the location search form. This references the VZPostcodeCheck form.\n */\n static hideForm() {\n this.classList.add('d-none');\n }\n\n /**\n * @function showForm\n * @description Shows the location search form. This references the VZPostcodeCheck form.\n */\n static showForm() {\n this.classList.remove('d-none');\n }\n\n /**\n * @function handleErrors\n * @description handles network errors with a generic modal. This references the VZPostcodeCheck form.\n * @param {Error} error - The error thrown by fn fetchAddressAndAvailability is the response is not OK.\n */\n static handleErrors(error) {\n if (error) console.warn(error);\n const { title, body, cta } = JSON.parse(this.dataset?.generalError);\n showErrorModal(title, body, cta);\n }\n\n /**\n * @async\n * @function fetchAddressAndAvailability\n * @description Fetches either the address check or the availability endpoint based on waht's passed in.\n * @param {string} endpoint - A string representing the endpoint to fetch.\n * @param {HTMLFormElement} form - The availability check (VZPostcodeCheck) form.\n * @returns {Object} A Json object returned from the endpoint.\n */\n static async fetchAddressAndAvailability(endpoint, form) {\n const formData = new FormData(form);\n formData.append(window.csrf.tokenName, window.csrf.token);\n\n // This is not available in response.isml, so sending it to the BE to make it available there.\n formData.append('configuratorType', form.configuratorType);\n\n const fetchOptions = { method: 'POST', body: formData };\n const response = await fetch(endpoint, fetchOptions);\n\n if (!response.ok) {\n throw new Error(`There was an error fetching the endpoint - ${endpoint} - status: ${response.status}`);\n }\n\n const responseJson = await response.json();\n return responseJson;\n }\n\n /**\n * @function removeExistingFeedbackMessage\n * @description Removes the existing feedback messages if they exist.\n * @param {HTMLFormElement} form - The availability check (VZPostcodeCheck) form.\n * @param {string} classNames - A comma separated string of class selectors.\n */\n static removeExistingFeedbackMessage(form, classNames) {\n const existingMessages = [...form.querySelectorAll(classNames)];\n if (existingMessages) existingMessages.forEach((message) => message.remove());\n }\n\n /**\n * @function showFeedbackMessage\n * @description Shows the message by creating an element with the message and injects it into the VZPostcodeCheck form.\n * This references the VZPostcodeCheck form.\n * @param {string} message - The message to show in the form.\n * @param {boolean} isError - Determines whether the message passed in is an error message or not.\n */\n static showFeedbackMessage(message, isError = true) {\n const templateString = `
\n
${message}
\n
`;\n const domParser = new DOMParser();\n const messageElement = domParser.parseFromString(templateString, 'text/html').querySelector('.js-availability-address-check-message');\n\n PostcodeCheckHelpers.removeExistingFeedbackMessage(this, '.js-availability-address-check-message');\n this.appendChild(messageElement);\n }\n\n /**\n * @function handleUnableToOrder\n * @description Updates availability check response heading with the address from the address check when a given location has no availability.\n * @returns {void} Early exit if the element is not found.\n */\n static handleUnableToOrder() {\n const responseHeadingElement = this.parentElement.querySelector('.js-availability-response-address');\n responseHeadingElement.setAttribute('unabletoorder', true);\n if (!responseHeadingElement) return;\n\n responseHeadingElement.textContent = this.addressCheckAddress;\n }\n\n /**\n * @function pushErrorsToDataLayer\n * @description When there is an error during the availability check, this will push an event notifying tag manager of the error.\n * @param {Object} addressParts - An object containing address details including the PAID.\n * @param {boolean} locationAlreadyInBasket - Whether the location is in the basket or not.\n */\n static pushErrorsToDataLayer(addressParts, locationAlreadyInBasket) {\n // Not a real error, so locationAlreadyInBasket errors won't be pushed.\n if (locationAlreadyInBasket) return;\n\n window.dataLayer = window.dataLayer || [];\n const { postalCode, houseNumber, extension, paid } = addressParts;\n\n // FYI - using addressCheckAddressParts from AddressCheck instead of address in the response of the availability check because that address is sometimes undefined.\n const erroneousAddressCombination = `${postalCode}-${houseNumber}${extension ? `-${extension}` : ''}`;\n const elementToPush = {\n event: 'availabilityCheckError', // eslint-disable-line quote-props\n payload: {\n // eslint-disable-line quote-props\n erroneousAddressCombination: erroneousAddressCombination.replace(/\\s/g, ''),\n paid: paid || 'No PAID available for this address combination.'\n }\n };\n\n window.dataLayer.push(elementToPush);\n }\n}\n","'use-strict';\n\nimport 'core-js/features/array/at';\n\nimport PCHelpers from './postcodeCheckHelpers';\nimport VZSpinner from 'Components/VZSpinner';\nimport { toggleButtonState } from 'Root/util/util';\n\nexport default class AddressCheck {\n constructor(availabilityForm, additionSelectElement) {\n this.availabilityForm = availabilityForm;\n this.additionSelectElement = additionSelectElement;\n this.addressCheckEndpoint = this.availabilityForm.dataset?.addressCheckUrl;\n this.spinner = document.querySelector('vz-spinner') || new VZSpinner();\n this.postalCode = null;\n this.houseNumber = null;\n this.addition = null;\n\n // Hook up a change event to the addition select field so we can grab the PAID to do the availability check using that\n this.additionSelectElement.addEventListener('blur', this.handleAdditionOnBlur.bind(this));\n [...this.availabilityForm.querySelectorAll('input')].forEach((input) => input.addEventListener('blur', this.handleAddressCheckOnBlur.bind(this)));\n this.executeAddressCheckOnLoad();\n }\n\n /**\n * @function sortAddressExtensions\n * @description Sorts the addresses based on the extension. Manipulates the existing array.\n * @param {Array} addressInfoArray - The array of address information returned from the addressCheck endpoint.\n */\n static sortAddressExtensions(addressInfoArray) {\n addressInfoArray.sort((a, b) => (a.extension.toLowerCase() < b.extension.toLowerCase() ? -1 : 0));\n\n // Get the index of the no extension array item.\n const indexOfNoExtension = addressInfoArray.indexOf(addressInfoArray.find((address) => !address.extensionRequired));\n if (indexOfNoExtension >= 0) {\n // Move the no extension item to the beginning of the array, and delete it in the original location, only if it exists.\n addressInfoArray.splice(0, 0, addressInfoArray.splice(indexOfNoExtension, 1)[0]);\n }\n }\n\n /**\n * @function removeAdditionOptions\n * @description Empties the additionSelectElement except for the default option. Makes the default selected.\n * @param {HTMLOptionsCollection} options - The additionSelectElement options.\n */\n removeAdditionOptions(options) {\n const optionsArray = [...options];\n const defaultOption = optionsArray.find((option) => option.hasAttribute('default'));\n\n optionsArray.filter((option) => !option.hasAttribute('default')).forEach((option) => option.remove()); // Remove options.\n this.additionSelectElement.selectedIndex = optionsArray.indexOf(defaultOption); // Set the default value as selected.\n this.additionSelectElement.classList.remove('valid'); // Reset the validity state.\n }\n\n /**\n * @function generateAdditionElementOptions\n * @description Generates the option elements to populate the additionSelectElement based on the address info passed in.\n * @param {Array} addressInfo - The array of address information returned from the addressCheck endpoint.\n * @param {boolean} hasMultipleExtensions - A boolean determining whether the address entered by the user has more extensions than 'No extension'\n */\n generateAdditionElementOptions(addressInfo, hasMultipleExtensions) {\n // skips if there is already additions selected\n if (this.addition) {\n return;\n }\n this.removeAdditionOptions(this.additionSelectElement.options); // Prevent duplicate options from being generated.\n AddressCheck.sortAddressExtensions(addressInfo); // Sort alphabetically based on extensions.\n\n // Generate option elements based on address info returned from fetch.\n this.additionSelectElement.innerHTML = addressInfo.reduce((result, address, index) => {\n const { paid, extension, extensionRequired, formattedAddress, addressParts } = address;\n const stringifiedAddressParts = JSON.stringify(addressParts).replace(/'/g, '''); // JSON.stringify does not escape single quotes so it needs to be done manually\n\n return `${result}\n \n `;\n }, this.additionSelectElement.innerHTML);\n }\n\n /**\n * @function handleAdditionOnBlur\n * @description Grabs the PAID to be used for the availability check. Sets the address to be used when the availability service returns\n * 'unableToOrder = true'. Validates the additionSelectElement and enables the CTA.\n * @param {Event} event - The blur event fired from the additionSelectElement.\n */\n handleAdditionOnBlur(event) {\n const { target: additionSelectElement } = event;\n const selectedExtensionOption = [...additionSelectElement.options].find((option) => option.selected);\n const { paid: addressCheckPAID, formattedAddress: addressCheckAddress, addressParts } = selectedExtensionOption.dataset;\n this.addition = selectedExtensionOption.value; // set addition to stop the regeneration of additions dropdown\n const paidHiddenInput = this.availabilityForm.hiddenInputWithPAID;\n paidHiddenInput.value = addressCheckPAID; // Set the PAID to the hidden input so the availability check is performed with the PAID\n\n // Update the address on change so its up to date for use in fn handleUnableToOrder. This is used to show the address in the availability check response.\n this.availabilityForm.addressCheckAddress = addressCheckAddress;\n\n // Provide the availability check element with the parts of the address so it can be used when pushing errors to the dataLayer. See fn pushAvailabilityCheckErrorsToDataLayer().\n // This is also used to show addresses in the sidebar for One Net where there is no availability.\n this.availabilityForm.addressCheckAddressParts = JSON.parse(decodeURI(addressParts));\n\n // If the user has selected a value, mark the field as valid and enable the CTA to perform the availability check.\n if (additionSelectElement.checkValidity()) {\n additionSelectElement.classList.add('valid');\n\n // Enable the CTA once a selection has been made.\n toggleButtonState(this.availabilityForm.submitButton, true);\n }\n\n additionSelectElement.setAttribute('value', event.target.value);\n }\n\n /**\n * @function handleAddressCheckOnBlur\n * @description Executes the address check on blur of the postcode and/or house number field, given that both have a valid value.\n * @param {Event} event - The blur event.\n */\n handleAddressCheckOnBlur() {\n const { postcodeInputElement, houseNumberInputElement } = this.availabilityForm;\n // checks if there was anything changed since previous time\n if (this.postalCode !== postcodeInputElement.value || this.houseNumber !== houseNumberInputElement.value) {\n this.addition = null; // resets additions after a change in postal or houseNumber\n this.postalCode = postcodeInputElement.value;\n this.houseNumber = houseNumberInputElement.value;\n const isMinimumRequirementMet = [postcodeInputElement, houseNumberInputElement].every((element) => element.value && element.checkValidity());\n if (isMinimumRequirementMet) {\n this.executeAddressCheck().catch((error) => PCHelpers.showFeedbackMessage.bind(this.availabilityForm)(error)); // Handle rejection from promise returned in fn executeAddressCheck.\n }\n }\n }\n\n /**\n * @function handleAddressNotFound\n * @description Handles the scenario where no address is found.\n */\n handleAddressNotFound() {\n this.removeAdditionOptions(this.additionSelectElement.options); // Reset the additionSelectElement when an address is not found.\n toggleButtonState(this.availabilityForm.submitButton, false);\n PCHelpers.removeExistingFeedbackMessage(this.availabilityForm, '.js-availability-address-check-message');\n }\n\n /**\n * @function handleMultipleAdditions\n * @description When the address check responds with multiple additions for a postcode and house number,\n * this will generate options and append them to the additionSelectElement.\n * @param {Object} addressCheckResponseData - The JSON response returned from the address check.\n */\n handleMultipleAdditions(addressCheckResponseData) {\n const { addressInfo, hasMultipleExtensions } = addressCheckResponseData;\n const { additionHelpText } = this.availabilityForm.dataset;\n\n if (!this.addition) {\n this.additionSelectElement.classList.remove('valid'); // Reset the validity state of the addition element\n }\n this.generateAdditionElementOptions(addressInfo, hasMultipleExtensions); // Populate the additions field.\n this.additionSelectElement.removeAttribute('read-only'); // In case the field was previously disabled, enable it again.\n PCHelpers.removeExistingFeedbackMessage(this.availabilityForm, '.js-availability-address-check-message');\n PCHelpers.showFeedbackMessage.bind(this.availabilityForm)(additionHelpText, false); // Show a help message when there are multiple extensions\n if (!this.addition) {\n toggleButtonState(this.availabilityForm.submitButton, false); // Disable the CTA until a selection has been made\n }\n }\n\n /**\n * @function handleSuccessfulAddressCheck\n * @description Handles the successful addressCheck scenario.\n * @param {Object} addressCheckResponseData - The JSON response returned from the address check.\n */\n handleSuccessfulAddressCheck(addressCheckResponseData) {\n const { formattedAddress = null, hasMultipleExtensions, addressInfo } = addressCheckResponseData;\n\n // Update the address on change so its up to date for use in fn handleUnableToOrder\n this.availabilityForm.addressCheckAddress = formattedAddress;\n this.generateAdditionElementOptions(addressInfo, hasMultipleExtensions); // Populate the additions field.\n\n // Disable the field when there are no extensions apart from 'No Extension'.\n if (!hasMultipleExtensions && !addressInfo.extensionRequired) {\n this.additionSelectElement.setAttribute('read-only', 'true');\n this.additionSelectElement.dispatchEvent(new Event('blur'));\n }\n\n PCHelpers.removeExistingFeedbackMessage(this.availabilityForm, '.js-availability-address-check-message, .error-msg');\n }\n\n /**\n * @function executeAddressCheck\n * @description Executes the address check.\n * @returns {Promise} A promise determining whether the address check was succesful or not. Rejected when address is not found,\n * resolved in other scenarios so the availability check can be performed.\n */\n executeAddressCheck() {\n this.spinner.start();\n\n /**\n * BO-1570 - To make sure that the availability check is only executed for found addresses, a promise needs to be returned and\n * rejected when the address is not found so that the availability check is not performed.\n */\n return new Promise((resolve, reject) => {\n PCHelpers.fetchAddressAndAvailability(this.addressCheckEndpoint, this.availabilityForm)\n .then((addressCheckResponseData) => {\n const multipleExtensionsFound = addressCheckResponseData?.multipleExtensionsFound;\n\n if (!addressCheckResponseData?.success && multipleExtensionsFound) {\n this.handleMultipleAdditions(addressCheckResponseData);\n resolve();\n } else if (!addressCheckResponseData?.success) {\n this.handleAddressNotFound();\n reject(addressCheckResponseData?.serverErrors[0]);\n } else {\n this.handleSuccessfulAddressCheck(addressCheckResponseData);\n resolve();\n }\n })\n .catch(PCHelpers.handleErrors.bind(this))\n .finally(this.spinner.stop);\n });\n }\n\n /**\n * @function executeAddressCheckOnLoad\n * @description Executes the address check on load if values are present. This is mainly so the extension list is populated already,\n * and that the CTA is enabled/disabled based on the status of the address check.\n */\n executeAddressCheckOnLoad() {\n const { postcodeInputElement, houseNumberInputElement } = this.availabilityForm;\n\n if (postcodeInputElement.checkValidity() && houseNumberInputElement.checkValidity()) {\n this.executeAddressCheck().catch((error) => PCHelpers.showFeedbackMessage.bind(this.availabilityForm)(error)); // Handle rejection from promise returned in fn executeAddressCheck.\n }\n }\n}\n","/**\n * @public setCookie\n * @param {string} cookieName - The cookie name\n * @param {string} cookieValue - The cookie value\n * @param {string} domain - The domain\n * @param {string} expirationDays - The expiration in days\n */\nfunction setCookie(cookieName, cookieValue, domain, expirationDays = 30) {\n const date = new Date();\n date.setTime(date.getTime() + expirationDays * 24 * 60 * 60 * 1000);\n const expires = `expires=${date.toUTCString()}`;\n const domainAndPath = `${domain ? `domain=${domain};` : ''}path=/; secure; sameSite=None`;\n const cookieString = `${cookieName}=${cookieValue};${expires};${domainAndPath}`;\n\n document.cookie = cookieString;\n}\n\n/**\n * @public getCookie\n * @param {string} cookieName - The cookie name\n * @return {string|null} The value of the cookie || null\n */\nfunction getCookie(cookieName) {\n const value = `; ${document.cookie}`;\n const parts = value.split(`; ${cookieName}=`);\n if (parts.length === 2) return parts.pop().split(';').shift();\n return null;\n}\n\nexport { setCookie, getCookie };\n","'use strict';\n\nimport 'core-js/features/array/at';\n\nimport 'Components/form/VZInputField';\nimport { appendParamToURL, getParamFromURL } from 'Util/urlUtils';\nimport { toggleButtonState, trackPdpEccomerceEvent } from 'Root/util/util';\nimport VZSpinner from 'Components/VZSpinner';\nimport PCHelpers from './postcodeCheckHelpers';\nimport AddressCheck from './AddressCheck';\nimport { setCookie, getCookie } from 'Util/cookies';\nimport { isIOS, scrollTo } from 'Util/util';\n\nconst spinner = document.querySelector('vz-spinner') || new VZSpinner();\n\n/**\n * @class PostCodeCheck\n * @description the availability check component used in the BIF configurator and for a Page Designer component.\n * It performs an address check and an availability check for the given address.\n */\nexport default class VZPostCodeCheck extends HTMLFormElement {\n constructor() {\n super();\n }\n\n connectedCallback() {\n this.form = document.getElementById('product-form');\n this.sidebar = document.querySelector('.js-configurator-summary');\n this.pdpSubmitButtons = [...document.querySelectorAll('.js-pdp-submit-button button')];\n this.editMode = document.querySelector('.js-edit-mode');\n this.hiddenInputWithPAID = this.querySelector('[name=\"paid\"]');\n this.postcodeInputElement = this.querySelector('.js-postcode-check-postcode');\n this.houseNumberInputElement = this.querySelector('.js-postcode-check-house-number');\n this.additionSelectElement = this.querySelector('.js-postcode-check-addition');\n this.submitButton = this.querySelector('button[type=\"submit\"]');\n this.isPageDesignerComponent = !!document.querySelector('.js-pd-postcode-check');\n this.parentSelector = this.isPageDesignerComponent ? document.querySelector('.js-pd-postcode-check') : this.form;\n this.configuratorType = this.dataset.configuratorType;\n this.isOneNet = this.dataset.configuratorType === 'one-net';\n this.isBusinessInternet = this.dataset.configuratorType === 'internet';\n this.isSharedOneNetConfiguration = window.location.href.includes('sharedonenet');\n\n this.removeLocation = this.removeLocation.bind(this);\n this.updateChatInfo = this.updateChatInfo.bind(this);\n\n // Initialise the address check.\n this.addressCheck = new AddressCheck(this, this.additionSelectElement);\n\n this.addEventListener('submit', this.handleAvailabilityFormSubmit.bind(this));\n this.toggleButtonState();\n\n if (this.editMode || window.location.href.includes('paid=')) {\n this.autoSubmitForm();\n }\n\n [...this.querySelectorAll('input')].forEach((field) => {\n if (field.type === 'number') {\n field.addEventListener('input', PCHelpers.respectMaxLength);\n field.addEventListener('input', PCHelpers.stripLeadingZero);\n field.addEventListener('keydown', PCHelpers.preventDashDotComma);\n }\n\n // The order of eventListeners is important, toggle the button state after the above events are done\n field.addEventListener('input focus', this.toggleButtonState.bind(this));\n\n if (this.editMode || window.location.href.includes('paid=')) {\n field.addEventListener('input', PCHelpers.removePAID.bind(this));\n }\n });\n\n // Add an event listener to select fields change event\n [...this.querySelectorAll('select')].forEach((select) => {\n select.addEventListener('change', this.toggleButtonState.bind(this));\n });\n\n // Add an event listener to enable product configuration after one net seat is selected.\n document.addEventListener('oneNet:seatSelection', this.enableProductConfiguration.bind(this));\n }\n\n /**\n * @function toggleButtonState\n * @description Validates the form and toggles the location submit button state.\n */\n toggleButtonState() {\n if (this.checkValidity() || (this.postcodeInputElement.checkValidity() && this.houseNumberInputElement.checkValidity())) {\n this.additionSelectElement.removeAttribute('read-only');\n toggleButtonState(this.submitButton, true);\n } else {\n this.additionSelectElement.setAttribute('read-only', 'true');\n toggleButtonState(this.submitButton, false);\n }\n }\n\n /**\n * @function enableProductConfiguration\n * @description Remove transparent layer from the form and add pointer events.\n * This does/should not execute for the PD postcode check component.\n * @param {Event} event - The oneNet:seatSelection event fired from VZQuantitySelector fn. onChange().\n */\n enableProductConfiguration(event = null) {\n const oneNetTierCard = [...document.querySelectorAll('.js-one-net-variation-card')].map((card) => card.closest('.pdp-card-section'));\n const isOneNetSeatSelectionEventFired = event && event.type === 'oneNet:seatSelection';\n this.isOneNetSeatSelected = isOneNetSeatSelectionEventFired && event?.detail?.isOneNetSeatSelected;\n this.areOneNetSeatsBelowThreshold = isOneNetSeatSelectionEventFired && event?.detail?.areOneNetSeatsBelowThreshold;\n this.shouldDisableOneNetConfiguration = !this.isOneNetSeatSelected || this.areOneNetSeatsBelowThreshold; // Minimum requirement to enable the whole configurator.\n\n // Enable the sidebar on availability check success or if one net and a seat has been selected.\n const elements = [\n this.form,\n ...this.pdpSubmitButtons,\n ...(this.isOneNet ? oneNetTierCard : []),\n ...(this.isBusinessInternet || this.isOneNetSeatSelected || this.editMode || this.isSharedOneNetConfiguration ? [this.sidebar] : [])\n ];\n const elementsToEnable = elements.filter(Boolean); // Filter out falsy values.\n const oneNetCriteria = this.isOneNet && this.success && !this.isPageDesignerComponent;\n const businessInternetCriteria = this.isBusinessInternet && this.success && !this.unableToOrder && !this.isPageDesignerComponent;\n\n if (businessInternetCriteria || oneNetCriteria) {\n elementsToEnable.forEach((element) => {\n if (element) {\n element.classList.remove('opacity-50', 'pe-none');\n element.removeAttribute('disabled');\n }\n });\n }\n\n // For one net, on availability check success, we only enable the tier card, rest must be disabled and enabled only after selecting a seat, see fn disableProductConfiguration. Do not disable for edit mode, since seats are already selected\n if (oneNetCriteria && this.shouldDisableOneNetConfiguration && !this.editMode && !this.isSharedOneNetConfiguration)\n this.disableProductConfiguration.bind(this)({ isEditLocation: false });\n }\n\n /**\n * @function disableProductConfiguration\n * @description Fade out the form and remove pointer events. This does/should not execute for the PD postcode check component.\n * @param {boolean} isEditLocation - Default is true for when this function is being called by an event listener.\n */\n disableProductConfiguration({ isEditLocation = true }) {\n if (this.isPageDesignerComponent) return;\n const nonTierOneNetCards = [...document.querySelectorAll('.js-pdp-card-section:not(.js-one-net-variation-card)')];\n\n // Remove all olds cards\n if (this.isOneNet) {\n nonTierOneNetCards.forEach((card) => card.parentElement?.removeChild(card));\n }\n\n // If we are in edit mode, then we disable the entire form regardless of configurator type, the configurator specific elements will be re-evaluated in fn enableProductConfiguration.\n const elements = [...this.pdpSubmitButtons, ...(this.isOneNet && !isEditLocation ? nonTierOneNetCards : [this.form, this.sidebar])];\n\n // If one-net, disable sidebar if seats are below threshold after selection.\n if (this.shouldDisableOneNetConfiguration) elements.push(this.sidebar);\n\n elements.forEach((element) => {\n if (element) {\n element.classList.add('opacity-50', 'pe-none');\n element.setAttribute('disabled', '');\n }\n });\n\n // Reset contract duration\n const defaultDuration = document.querySelector('.js-contract-duration-card input[name=\"contractDuration\"][value=\"36\"]:not(:checked)');\n defaultDuration?.dispatchEvent(new CustomEvent('change'));\n }\n\n /**\n * @function removeLocation\n * @description Removes the previous location result.\n */\n removeLocation() {\n [this.parentElement.querySelector('.js-postcode-response'), document.querySelector('.js-current-address')].forEach((element) =>\n element?.parentElement.removeChild(element)\n );\n }\n\n /**\n * @function showEditLocation\n * @description Shows a button which allows a customer to edit the configuration.\n */\n showEditLocation() {\n const editButton = this.parentElement.querySelector('.js-postcode-edit');\n if (editButton) {\n editButton.addEventListener('click', this.removeLocation);\n editButton.addEventListener('click', PCHelpers.showForm.bind(this));\n editButton.addEventListener('click', this.disableProductConfiguration.bind(this));\n }\n spinner.stop();\n }\n\n /**\n * @function setAddress\n * @description Sets the address in the sidebar.\n * @returns {void} Early exit if this is the PD component version of VZPostcodeCheck.\n */\n setAddress() {\n if (this.isPageDesignerComponent) return;\n\n const extension = this.address.extension || this.address.houseNumberExtension || '';\n const template = `