\n `;\n\n this.veil = this.querySelector('.veil');\n this.veil.addEventListener('click', (evt) => evt.stopPropagation());\n }\n}\n\nwindow.VZSpinner = window.customElements.get('vz-spinner') || VZSpinner;\nexport default window.VZSpinner;\n\nif (!window.customElements.get('vz-spinner')) {\n window.customElements.define('vz-spinner', VZSpinner);\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 decorators from 'Decorators/index';\nimport { validate } from 'app_vodafone_ziggo/util/validation';\n\n/**\n * @class Select\n * @param {HTMLSelectElement} element - The element to create an instance on\n */\nexport default class VZSelect extends HTMLSelectElement {\n constructor() {\n super();\n\n decorators.valid(this, this);\n decorators.readonly(this, this);\n\n if (this.classList.contains('js-custom-select-validation')) {\n this.addEventListener('change', validate);\n }\n\n this.addEventListener('blur', validate);\n }\n\n connectedCallback() {\n this.selectCorrectValue();\n }\n\n /**\n * @public selectCorrectValue\n * @description\n * Safari decided to preselect the second item in the row for no reason.\n */\n selectCorrectValue() {\n const selectedValue = [...this.options].find((opt) => {\n return opt.getAttribute('selected') !== null;\n });\n\n this.selectedIndex = [...this.options].indexOf(selectedValue);\n\n if (\n (this.getAttribute('name').includes('identification_nationality') ||\n this.getAttribute('name').includes('identification_idtype') ||\n this.getAttribute('name').includes('contact_phonePrefix')) &&\n this.selectedIndex !== 0\n ) {\n this.dispatchEvent(new CustomEvent('blur'));\n }\n }\n}\n\nif (!window.customElements.get('vz-select')) {\n window.customElements.define('vz-select', VZSelect, { extends: 'select' });\n}\n","'use strict';\n\n/**\n * @public prepareFormValues\n * @param {HTMLElement} app - The app component\n *\n * @description\n * Sets the value of an input field as a property. By doing this, a previous\n * selection can be preselected when navigating back in the product configurator.\n */\nexport function prepareFormValues(app) {\n const valueTypes = ['text', 'hidden', 'range', 'email', 'number', 'tel', 'password'];\n [...app.querySelectorAll('input')].forEach((field) => {\n if (valueTypes.indexOf(field.type) !== -1) {\n field.setAttribute('value', field.value);\n } else if (field.type === 'radio' || field.type === 'checkbox') {\n if (field.checked) {\n field.setAttribute('checked', true);\n } else {\n field.removeAttribute('checked');\n }\n }\n });\n}\n\n/**\n * @public getFieldValidationMessage\n * @param {HTMLInputElement | HTMLSelectElement} field - Invalid field element\n * @returns {string | false} - Error message for invalid field\n */\nexport function getFieldValidationMessage(field) {\n // Valid\n if (field.validity.valid) return false;\n\n // Required\n if (field.required && field.value.length === 0) return field.getAttribute('data-missing-error');\n\n // Checked\n if (!field.checked && (field.matches('[type=\"checkbox\"]') || field.matches('[type=\"radio\"]'))) return field.getAttribute('data-missing-error');\n\n // Regex\n if (field.pattern && !new RegExp(field.pattern).test(field.value)) return field.getAttribute('data-pattern-error');\n\n // Dates\n if (field.dataset.mask === 'date' && field.dataset.invalid === 'true') return field.getAttribute('data-invalid-error');\n if (field.dataset.mask === 'date' && field.dataset.invalidMin === 'true') return field.getAttribute('data-mindate-error');\n if (field.dataset.mask === 'date' && field.dataset.invalidMax === 'true') return field.getAttribute('data-maxdate-error');\n if (field.dataset.mask === 'addition' && field.dataset.multipleAdditions === 'true') return field.getAttribute('data-missing-error');\n\n // No valid error messages\n return false;\n}\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 * @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\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 { 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\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\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\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\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\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 * @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\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 * as throttle from 'lodash/throttle';\n\n/**\n * @function getVerticalScrollPercentage\n * @returns {number} the percentage\n */\nfunction getVerticalScrollPercentage() {\n const parentNode = document.body.parentNode;\n return ((document.body.scrollTop || parentNode.scrollTop) / (parentNode.scrollHeight - parentNode.clientHeight)) * 100;\n}\n\n/**\n * @function isWithin24Hours\n * @returns {boolean} Whether the modal was closed within 24 hours\n */\nfunction isWithin24Hours() {\n const then = new Date(localStorage.getItem('modalCloseDate'));\n const now = new Date();\n\n const msBetweenDates = Math.abs(then.getTime() - now.getTime());\n\n // convert ms to hours min sec ms\n const hoursBetweenDates = msBetweenDates / (60 * 60 * 1000);\n return hoursBetweenDates < 24;\n}\n\n/**\n * @function closeModal\n * @param {Event} evt - Click event\n */\nfunction closeModal(evt) {\n // hide modal\n evt.currentTarget.parentNode.removeChild(evt.target);\n localStorage.setItem('modalCloseDate', new Date());\n}\n\n/**\n * @function getAgentStatus\n * @returns {string} Checks if the chat is online\n */\nfunction getAgentStatus() {\n return document.querySelector('.dimelo_chat_mode_online') ? 'online' : 'offline';\n}\n\n/**\n * @function onModalClick\n * @param {Event} Click Event\n */\nfunction onModalClick({ target }) {\n if (!target.classList.contains('btn-close')) {\n if (getAgentStatus() === 'online') {\n document.querySelector('.js-btn-contactmodal').click();\n } else {\n document.querySelector('vz-contactmodal')?.show();\n }\n }\n}\n\n/**\n * @function showModal\n */\nfunction showModal() {\n const engagementModal = document.querySelector('.engagement-modal');\n engagementModal.classList.remove('d-none');\n engagementModal.addEventListener('click', onModalClick);\n document.querySelector('.engagement-modal .btn-close').addEventListener('click', closeModal);\n}\n\n/**\n * @function modalThreshold\n */\nconst modalThreshold = throttle(() => {\n if (getVerticalScrollPercentage() > 75) {\n document.removeEventListener('scroll', modalThreshold);\n setTimeout(showModal, 120_000); // 2 minutes delay\n }\n}, 100);\n\n/**\n * @function shakeThreshold\n */\nconst shakeThreshold = throttle(() => {\n if (getVerticalScrollPercentage() > 30) {\n [...document.querySelectorAll('.dimelo_chat_show_when_online,.dimelo_chat_show_when_offline')].forEach((button) => button.classList.add('shake'));\n document.removeEventListener('scroll', shakeThreshold);\n\n if (!isWithin24Hours()) {\n document.addEventListener('scroll', modalThreshold);\n }\n }\n}, 100);\n\n/**\n * @function startEngagement\n */\n(function startEngagement() {\n const pageView = Math.abs(localStorage.getItem('pageView') || 0) + 1;\n localStorage.setItem('pageView', pageView);\n\n if (pageView === 2) {\n document.addEventListener('scroll', shakeThreshold);\n }\n})();\n","'use strict';\n\nimport { validateField, removeValidationMessageElement } from 'app_vodafone_ziggo/util/validation';\n\n/**\n * Dispatches an 'input' event on the given element.\n * @param {HTMLElement} element - The element to dispatch the event on.\n */\nfunction dispatchInputEvent(element) {\n const event = new Event('input', { bubbles: true, cancelable: true });\n element.dispatchEvent(event);\n}\n\n/**\n * Clears all the fields in the provided form elements object and resets the validation.\n *\n * @param {Object} formElements - The form elements to be cleared.\n */\nfunction clearFormFields(formElements) {\n Object.keys(formElements).forEach((key) => {\n const element = formElements[key];\n // Preselect the only option from a select element\n if (element.tagName === 'SELECT') {\n const notDisabledOptions = Array.from(element.options).filter((option) => !option.disabled);\n if (notDisabledOptions.length === 1) {\n element.selectedIndex = notDisabledOptions[0].index;\n }\n } else {\n element.value = '';\n formElements[key].classList.add('empty');\n validateField(formElements[key]);\n }\n\n dispatchInputEvent(element);\n element.classList.remove('invalid');\n removeValidationMessageElement(element);\n });\n}\n\n/**\n * Prefills the form fields with provided data.\n *\n * @param {Object} formElements - The form elements to be prefilled.\n * @param {Object} data - The data used to prefill the form elements.\n */\nfunction prefillFormFields(formElements, data) {\n Object.keys(formElements).forEach((key) => {\n const element = formElements[key];\n element.value = data[key] || '';\n\n if (element.value) {\n element.classList.remove('empty');\n }\n\n dispatchInputEvent(element);\n });\n}\n\n/**\n * Sets the required attribute on specified contact form fields.\n *\n * @param {Object} formElements - An object containing the form elements to be modified.\n * @param {boolean} isRequired - A boolean indicating whether the fields should be marked as required.\n */\nfunction makeContactFormFieldsRequired(formElements, isRequired) {\n [formElements.initials, formElements.lastName, formElements.email, formElements.phone].forEach((input) => {\n input.required = isRequired;\n input.setAttribute('aria-required', isRequired.toString());\n });\n}\n\nexport { clearFormFields, prefillFormFields, makeContactFormFieldsRequired };\n","'use strict';\n\nimport 'Root/VZLeadForm';\nimport 'Root/VZLeadFormTrigger';\n\nclass ChatPrompt {\n constructor() {\n this.chatOfflineButton = document.querySelector('.dimelo_chat_show_when_offline');\n this.activeConfiguratorGroup = document.getElementById('activeConfiguratorGroup');\n this.committedConfiguratorGroups = document.getElementById('committedConfiguratorGroups');\n this.customerEmail = document.getElementById('customerEmail');\n this.lastOrderNr = document.getElementById('lastOrderNr');\n\n this.prompt = false;\n window.dataLayer = window.dataLayer || [];\n\n this.assignListeners = this.assignListeners.call(this);\n this.openChatPrompt = this.openChatPrompt.bind(this);\n this.closeChatPrompt = this.closeChatPrompt.bind(this);\n this.openChatWhenLoaded = this.openChatWhenLoaded.bind(this);\n\n this.addConfiguratorGroupsToDatalayer = this.addConfiguratorGroupsToDatalayer.bind(this);\n\n if (this.chatOfflineButton && this.chatOfflineButton.length) {\n this.chatOfflineButton.setAttribute('tabindex', 0); // Do this so the element can get a `:focus` state\n }\n }\n\n assignListeners() {\n window.addEventListener('load', () => {\n this.addConfiguratorGroupsToDatalayer.call(this);\n\n if (this.customerEmail) {\n window.dataLayer.push({\n customerEmail: this.customerEmail.value\n });\n }\n if (this.lastOrderNr) {\n window.dataLayer.push({\n lastOrderNr: this.lastOrderNr.value\n });\n }\n this.openByDefault = document.querySelector('.js-dimelo-chat-state')?.value === 'show';\n if (this.openByDefault) {\n if (this.chatOfflineButton) {\n this.chatOfflineButton.querySelector('.js-btn-leadmodal')?.click();\n } else {\n this.interval = setInterval(this.openChatWhenLoaded, 1000);\n }\n }\n });\n\n window.addEventListener('dimelo:chat:load', () => {\n this.openByDefault = document.querySelector('.js-dimelo-chat-state')?.value === 'show';\n this.chatOfflineButton.addEventListener('click', this.openChatPrompt);\n if (this.openByDefault) {\n this.openChatPrompt();\n }\n });\n }\n\n openChatPrompt() {\n if (!this.prompt) {\n const target = this.chatOfflineButton.getAttribute('data-target');\n this.prompt = document.querySelector(target);\n }\n\n if (this.prompt) {\n this.prompt.classList.add('active');\n this.closeButton = this.prompt.querySelector('.js-btn-prompt-cancel');\n this.closeButton.addEventListener('click', this.closeChatPrompt);\n } else {\n this.chatOfflineButton.removeEventListener('click', this.openChatPrompt);\n }\n }\n\n closeChatPrompt(event) {\n event.preventDefault();\n this.prompt.classList.remove('active');\n this.closeButton.removeEventListener('click', this.closeChatPrompt);\n }\n\n // Retrieve the configuration from the dataLayer like this:\n // google_tag_manager[containerId].dataLayer.get(groupName);\n addConfiguratorGroupsToDatalayer() {\n [this.committedConfiguratorGroups, this.activeConfiguratorGroup].forEach((group) => {\n if (!group) return;\n\n this.constructor.pushToDataLayer(group);\n\n group.addEventListener('locationChange', (customEvent) => {\n this.constructor.updateGroupLocation(group, customEvent);\n this.constructor.pushToDataLayer(group);\n });\n\n group.addEventListener('change', () => {\n this.constructor.pushToDataLayer(group);\n });\n });\n }\n\n static pushToDataLayer(group) {\n if (!group) return;\n\n const groupObj = {};\n groupObj[group.id] = JSON.parse(group.value);\n window.dataLayer.push(groupObj);\n }\n\n static updateGroupLocation(group, customEvent) {\n const data = JSON.parse(group.value);\n const address = customEvent.detail;\n\n data.location = {\n street: address.street,\n houseNumber: address.houseNumber,\n appendix: address.extension,\n postCode: address.postalCode,\n city: address.city,\n room: address.room,\n paid: address.paid\n };\n\n group.value = JSON.stringify(data);\n }\n\n /**\n * Opens the chat when the chat button is loaded and available.\n * Clears the interval once the chat button is clicked.\n * @returns {void}\n */\n openChatWhenLoaded() {\n const chatBtn = document.querySelector('.dimelo_chat_show_when_online button');\n if (chatBtn) {\n chatBtn.click();\n clearInterval(this.interval);\n }\n }\n}\n\nnew ChatPrompt(); // eslint-disable-line no-new\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 { setCookie, getCookie } from 'Util/cookies';\n\n/**\n * @private startDevToolsDetector\n *\n * @description\n * Detect whether chrome devtools is open or not.\n * Based on https://stackoverflow.com/a/67148898/8823973\n *\n * Once detected, set a cookie and never fire this again. The cookie is used in the following file\n * to determine that the \"iPad useragent\" is in fact an iPad emulation in Chrome/Firefox devtools:\n * app_vodafone_ziggo/cartridge/scripts/helpers/hookHelpers.js\n *\n * It has been a real challenge to find a method that works properly with the current version of\n * Chrome (v95). This method seems to work since version 89.\n * Chrome usually patches \"hacks\" that try to detect this, so this might stop working in the future.\n * Good luck to the chap that can search for a new way to detect devtools in that case.\n */\nfunction startDevToolsDetector() {\n const devToolsOpen = () => {};\n\n const interval = setInterval(() => {\n console.profile(devToolsOpen);\n console.profileEnd(devToolsOpen);\n }, 5000);\n\n devToolsOpen.toString = () => {\n setCookie('devToolsUser', true, window.location.hostname, 365);\n clearInterval(interval);\n return '-';\n };\n}\n\nif (!getCookie('devToolsUser')) {\n startDevToolsDetector();\n}\n","'use strict';\n\nimport { documentReady, getPosition } from 'Util/util';\n\nlet lastScrollPos = 0;\nlet elementsToFadeIn = []; // An array of all \"fade in\" elements. Will be filled on page load and emptied once the elements are faded in\nlet currentElements = []; // An array of all elements in view at the time of \"checkElements\"\nlet adviceScrollArea;\n\n// Animation vars\nconst fadeInOffset = 250; // Offset from the bottom of the viewport in pixels, before the element is faded in\nconst fadeInTime = 700; // The time it takes to fade in an element. should match the scss transition time value\nconst staggerDelay = 100; // The delay between each element that needs to fade in on page load\n\nconst selectors = {\n fadeInElements: '.js-fade-in-element:not(.faded-in)',\n adviceScrollArea: '.js-bscan-step.bscan-advice .js-bscan-step-scroll-area'\n};\n\n/**\n * @private updateElementsArrays\n *\n * @description\n * Will update the array of elements to fade in. This is done after some elements have been faded in\n */\nfunction updateElementsArrays() {\n elementsToFadeIn = [...document.querySelectorAll(selectors.fadeInElements)];\n currentElements = [];\n\n // If there are no more elements, remove the event listener\n if (elementsToFadeIn.length === 0) {\n window.removeEventListener('scroll', checkElements); // eslint-disable-line no-use-before-define\n }\n}\n\n/**\n * @private fadeInElements\n *\n * @description\n * Will loop over all elements currently in view, then fade them in\n * In case of multiple elements, the fade-in's are staggered through an incremental transition delay\n */\nfunction fadeInElements() {\n currentElements.forEach((initialElement, index) => {\n initialElement.style.transitionDelay = `${(index * (fadeInTime + staggerDelay)) / 1000}s`;\n initialElement.classList.add('faded-in');\n });\n\n updateElementsArrays();\n}\n\n/**\n * @private checkElements\n *\n * @description Will check to see if there are any elements that need to fade in once they get into view\n */\nfunction checkElements() {\n const currentScrollPos = adviceScrollArea ? adviceScrollArea.scrollTop : window.pageYOffset || document.documentElement.scrollTop;\n const viewHeight = window.innerHeight;\n const isNotScrollingUp = currentScrollPos >= lastScrollPos;\n\n // If there are elements to fade in, and we're not scrolling up\n if (elementsToFadeIn.length > 0 && isNotScrollingUp) {\n elementsToFadeIn.forEach((element) => {\n // First get the element's position relative to the body (+ a possible offset)\n const elementFadeInPosition = getPosition(element).top + fadeInOffset;\n // Then get the bottom of the current viewport\n const bottomOfViewport = currentScrollPos + viewHeight;\n\n // If the element is placed higher than the bottom of the current viewport, add it to an array of elements to fade in\n if (elementFadeInPosition < bottomOfViewport) {\n currentElements.push(element);\n }\n });\n\n fadeInElements();\n }\n\n lastScrollPos = currentScrollPos <= 0 ? 0 : currentScrollPos;\n}\n\nexport default (function init() {\n elementsToFadeIn = [...document.querySelectorAll(selectors.fadeInElements)];\n adviceScrollArea = document.querySelector(selectors.adviceScrollArea);\n\n // Check to see if any elements should be faded in\n documentReady(checkElements); // On document ready so the first one is done ASAP\n window.addEventListener('load', checkElements); // Also on window load, because for some reason the 2nd+ elements can sometimes not fade in without this\n\n if (adviceScrollArea) {\n adviceScrollArea.addEventListener('scroll', checkElements);\n } else {\n window.addEventListener('scroll', checkElements);\n }\n\n document.addEventListener('bscan:step', (e) => {\n if (e.detail === 'bs-advice') {\n adviceScrollArea = document.querySelector(selectors.adviceScrollArea);\n if (adviceScrollArea) {\n adviceScrollArea.addEventListener('scroll', checkElements);\n }\n\n elementsToFadeIn = [...document.querySelectorAll(selectors.fadeInElements)];\n checkElements();\n }\n });\n\n // Also do it with a timeout for PageDesigner, seeing as the initial execution (nor window.load) does not seem to do much when inside PD\n if (window.frameElement && window.frameElement.closest('.page-designer-ui')) {\n setTimeout(checkElements.bind(true), 1000);\n setTimeout(checkElements.bind(true), 3000);\n }\n})();\n","'use strict';\n\nimport { getPosition, scrollTo } from 'app_vodafone_ziggo/util/util';\nimport { removeHash } from 'app_vodafone_ziggo/util/urlUtils';\nimport Collapse from 'bootstrap/js/src/collapse';\n\nwindow.bs = window.bs || {};\nwindow.bs.Collapse = Collapse;\n\n/**\n * @private scrollToQuestion\n */\nfunction scrollToQuestion() {\n if (window.location.hash) {\n const hash = window.location.hash;\n const collapseEl = document.querySelector(hash);\n if (!collapseEl) return;\n\n const elementsToExpand = [collapseEl];\n\n // If we're inside a collapsable group, expand the group\n // Otherwise we can't show the child collapsable item\n const group = collapseEl.closest('.faq-items.collapse');\n if (group) elementsToExpand.push(group);\n\n // Auto expand the collapsable items on page load\n elementsToExpand.forEach((item) => {\n /* eslint-disable-next-line no-new */\n new window.bs.Collapse(item, {\n toggle: true\n });\n });\n\n const togglerEl = document.querySelector(`[data-bs-target=\"${hash}\"]`);\n\n // Finally, scroll to the question\n const elementPosition = togglerEl ? getPosition(togglerEl) : getPosition(collapseEl);\n\n // Scroll after a really short timeout for some edgecases where a browser's autoscroll is\n // firing after our custom `scrollTo` functionality. This might have something to do with the\n // callstack, so make sure our `scrollTo` is fired last.\n setTimeout(() => {\n scrollTo(elementPosition);\n }, 1);\n }\n}\n\n/**\n * @private updateHash\n * @param {HTMLElement} target - The clicked element\n */\nfunction updateHash(target) {\n const hashValue = target.getAttribute('data-bs-target');\n const urlWithoutHash = window.location.href.split('#')[0];\n\n // Use replaceState instead of window.location.hash. Otherwise, the user would have a lot of history\n // entries after clicking various questions. Also the browser would auto scroll on hash change.\n window.history.replaceState({}, document.title, urlWithoutHash + hashValue);\n}\n\n/**\n * @private onCollapseToggle\n * @param {event} event - The click event\n */\nfunction onCollapseToggle(event) {\n const { target } = event;\n\n if (target.getAttribute('aria-expanded') === 'true') {\n updateHash(target);\n } else {\n removeHash();\n }\n}\n\nwindow.addEventListener('load', scrollToQuestion);\n\n[...document.querySelectorAll('.btn-faq-item')].forEach((button) => {\n button.addEventListener('click', onCollapseToggle);\n});\n","'use strict';\n\nimport { CONST, addEvent, exists, isAemMobileView, assignStyling, documentReady } from 'Util/util';\nimport * as debounce from 'lodash/debounce';\n\nconst selectors = {\n listColumn: '.js-col-link-list',\n listLink: 'h6 a',\n listGroup: '.list-group'\n};\n\nconst siteFooter = document.querySelector('.js-site-footer');\n\n/**\n * @private toggleMobileMenu\n * @param {Event} event - The click/tap event\n */\nfunction toggleMobileMenu(event) {\n const element = event.target;\n const listElements = document.querySelectorAll(`${selectors.listColumn} ${selectors.listLink}, ${selectors.listColumn} ${selectors.listGroup}`);\n const currentColumn = element.closest(selectors.listColumn);\n const currentElements = currentColumn.querySelectorAll(`${selectors.listLink}, ${selectors.listGroup}`);\n\n if (!exists(listElements) || !exists(currentElements)) {\n console.error('fn toggleMobileMenu: required elements are missing');\n return;\n }\n\n if (isAemMobileView()) {\n event.preventDefault();\n }\n\n [...listElements].forEach((listElement) => listElement.classList.remove(CONST.classes.active));\n [...currentElements].forEach((currentElement) => currentElement.classList.add(CONST.classes.active));\n}\n\n/**\n * @private checkFooterOverlaping\n */\nfunction checkFooterOverlaping() {\n const notFoundAbsoluteContainer = document.querySelector('#js-404-page-absolute-container');\n if (exists(notFoundAbsoluteContainer)) {\n const absolutelyPositionedElementRect = notFoundAbsoluteContainer.getBoundingClientRect();\n const siteFooterRect = siteFooter.getBoundingClientRect();\n\n if (absolutelyPositionedElementRect.bottom >= siteFooterRect.top) {\n siteFooter.classList.remove('mt-5');\n assignStyling(siteFooter, {\n 'margin-top': `${absolutelyPositionedElementRect.bottom - siteFooterRect.top + 10}px`\n });\n }\n }\n}\n\naddEvent(document, CONST.events.click, `${selectors.listColumn} ${selectors.listLink}`, toggleMobileMenu);\ndocumentReady(checkFooterOverlaping);\nwindow.addEventListener(\n 'resize',\n debounce(() => {\n siteFooter.classList.add('mt-5');\n siteFooter.style.removeProperty('margin-top');\n checkFooterOverlaping();\n }),\n 150\n);\n","'use strict';\n\nimport decorators from 'Decorators/index';\nimport { getFieldValidationMessage } from 'Components/form/form';\n\n/**\n * @class VZDateField\n * @param {HTMLInputElement} element - The element to create an instance on\n *\n * @example\n * \n */\nclass VZDateField extends HTMLInputElement {\n constructor() {\n super();\n\n const minDate = this.getAttribute('data-min-date');\n const maxDate = this.getAttribute('data-max-date');\n\n this.minDate = minDate !== null ? new Date(minDate) : null;\n this.maxDate = maxDate !== null ? new Date(maxDate) : null;\n\n this.setFieldStatus = this.setFieldStatus.bind(this);\n\n this.addEventListener('input', this.setFieldStatus);\n this.addEventListener('change', this.setFieldStatus);\n\n this.addEventListener('change', this.validateDate);\n this.addEventListener('change', this.validateField);\n\n this.addEventListener('blur', this.validateDate);\n this.addEventListener('blur', this.validateField);\n\n decorators.valid(this, this);\n\n if (this.hasAttribute('data-mask')) {\n decorators.mask(this, this);\n }\n\n // Set initial state\n this.setFieldStatus();\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 if (hasValue) {\n this.classList.remove('empty');\n } else {\n this.classList.add('empty');\n }\n }\n\n /**\n * @private validateDate\n * @param {Event} evt - On Blur even\n */\n validateDate(evt) {\n if (evt.target.value.length === 0) return;\n\n const element = evt.target;\n const elValue = element.dataset.value ? element.dataset.value : element.value;\n const elementIsDatepicker = element.classList.contains('js-is-datepicker');\n const [day, month, year] = elValue.split('-');\n const dateValue = `${month}/${day}/${year}`;\n const chosenDate = new Date(dateValue);\n\n let dateIsInvalid = false;\n\n element.dataset.invalid = false;\n element.dataset.invalidMax = false;\n element.dataset.invalidMin = false;\n\n element.setCustomValidity('');\n\n /**\n * BO-3100 & BO-3316:\n * Base date field validation breaks appointment picker date fields.\n * We are using vanillajs-datepicker there so we will rely on it instead for min/max or unavailable dates.\n */\n if (elementIsDatepicker) return;\n\n // Invalid\n if (window.isNaN(chosenDate) || elValue.length < 10) {\n element.dataset.invalid = true;\n dateIsInvalid = true;\n }\n\n // Before min date\n if (this.minDate !== null && chosenDate < this.minDate) {\n element.dataset.invalidMin = true;\n dateIsInvalid = true;\n }\n\n // After max date\n if (this.maxDate !== null && chosenDate > this.maxDate) {\n element.dataset.invalidMax = true;\n dateIsInvalid = true;\n }\n\n // Date is not valid\n if (dateIsInvalid) element.setCustomValidity('invalid');\n }\n\n /**\n * @private validateField\n * @param {Event} evt - blur or invalid event\n * @param {string} [msg] - validation message\n */\n validateField(evt, msg) {\n const message = msg || getFieldValidationMessage(evt.target);\n\n if (message) {\n const element =\n this.parentElement.querySelector('.error-msg') ||\n (function createErrorElement() {\n const el = document.createElement('small');\n\n el.classList.add('error-msg', 'text-primary');\n\n return el;\n })();\n\n element.innerText = message;\n\n evt.target.parentElement.insertAdjacentElement('beforeend', element);\n evt.target.classList.add('invalid');\n evt.target.classList.remove('valid');\n } else {\n const element = this.parentElement.querySelector('.error-msg');\n\n if (element) element.remove();\n\n evt.target.classList.remove('invalid');\n evt.target.classList.add('valid');\n }\n }\n}\n\nexport default window.customElements.get('vz-datefield') || VZDateField;\nif (!window.customElements.get('vz-datefield')) {\n window.customElements.define('vz-datefield', VZDateField, { extends: 'input' });\n}\n","'use strict';\n\nimport { Datepicker } from 'vanillajs-datepicker';\nimport NL from 'vanillajs-datepicker/locales/nl';\nimport moment from 'moment';\n\nimport VZDateField from './VZDateField';\n\nObject.assign(Datepicker.locales, NL);\n\n/**\n * @class VZDatePicker\n * @param {HTMLInputElement} element - The element to create an instance on\n *\n * @example\n *
\n * \n * \n * \n * \n *
\n *\n *
\n *
\n *
\n * \n * \n *
\n *
\n *
\n * {DATEPICKER_FORM_GROUP}\n *
\n *
\n */\nclass VZDatePicker extends VZDateField {\n constructor() {\n super();\n\n this.availableDates = this.getAttribute('data-available-dates')?.split(',') || [];\n this.maxDate = this.getAttribute('data-max-date');\n this.minDate = this.getAttribute('data-min-date');\n this.minDateUnFormatted = new Date(this.minDate);\n this.maxDateUnFormatted = new Date(this.maxDate);\n\n this.now = Date.now();\n this.parentElement.setAttribute('id', `c${this.now}`);\n\n this.createDatePicker = this.createDatePicker.bind(this);\n this.datesDisabled = this.datesDisabled.bind(this);\n this.changeDate = this.changeDate.bind(this);\n this.fixUnavailableDateOnBlur = this.fixUnavailableDateOnBlur.bind(this);\n this.setDatePickerDate = this.setDatePickerDate.bind(this);\n this.setDatePickerDefault = this.setDatePickerDefault.bind(this);\n\n this.datepicker = this.createDatePicker();\n\n this.addEventListener('show', this.constructor.setView);\n this.addEventListener('changeView', this.constructor.setView);\n this.addEventListener('changeDate', this.changeDate);\n this.addEventListener('setDatePickerDate', this.setDatePickerDate);\n\n // Invalid date inputs are ignored, so lets listen for the blur event as well\n this.addEventListener('blur', this.fixUnavailableDateOnBlur);\n\n this.setFieldStatus();\n\n // Enable ASAP option\n this.dataAsapDateAttribute = 'data-asap-date';\n this.datePickerContainer = this.parentElement.closest('.js-datepicker-form');\n this.asapToggle = this.datePickerContainer ? this.datePickerContainer.querySelector('input.js-datepicker-asap') : null;\n\n if (this.asapToggle) {\n this.setDatePickerAsap = this.setDatePickerAsap.bind(this);\n this.asapToggle.addEventListener('change', this.setDatePickerAsap);\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\n if (hasValue) {\n this.setAttribute('data-value', this.value);\n this.classList.remove('empty');\n } else {\n this.classList.add('empty');\n }\n }\n\n /**\n * @private datesDisabled\n * @param {Date} date - A date object\n * @returns {boolean} - Whether a date should be disabled\n *\n * @description\n * If availableDates is not empty, disable dates that are not in this array\n */\n datesDisabled(date) {\n // If availableDates is empty, do not disable any dates\n if (!this.availableDates || this.availableDates.length === 0) return false;\n\n let day = date.getDate();\n let month = date.getMonth() + 1; // Month is index based, so we need to do +1\n const year = date.getFullYear();\n day = day < 10 ? `0${day}` : day;\n month = month < 10 ? `0${month}` : month;\n\n // Needs to be mm-dd-yyyy for the disable functionality to work\n const dateString = `${month}-${day}-${year}`;\n\n return !this.availableDates.includes(dateString);\n }\n\n /**\n * @private createDatePicker\n * @returns {HTMLElement} - A datepicker element\n *\n * @description\n * Will instantiate a datepicker for this element\n */\n createDatePicker() {\n const options = {\n autohide: true,\n container: `#c${this.now}`,\n defaultViewDate: this.now,\n datesDisabled: this.datesDisabled,\n format: {\n toValue(date) {\n return Datepicker.parseDate(date, 'dd-mm-yyyy', 'nl');\n },\n toDisplay(date) {\n return Datepicker.formatDate(date, 'dd-mm-yyyy', 'nl');\n }\n },\n language: 'nl',\n maxDate: new Date(this.maxDate),\n minDate: new Date(this.minDate),\n nextArrow: '',\n orientation: 'bottom auto',\n prevArrow: '',\n updateOnBlur: true\n };\n\n return new Datepicker(this, options);\n }\n\n /**\n * @private setView\n * @param {Event} evt - Custom event fired by the datepicker\n *\n * @description\n * Sets a data-view attribute used for styling purposes\n */\n static setView(evt) {\n evt.detail.datepicker.picker.element.setAttribute('data-view', evt.detail.viewId);\n }\n\n /**\n * @private getFormattedDate\n * @param {Date} dateObj - A date object\n * @returns {string} formattedDate\n */\n static getFormattedDate(dateObj) {\n const day = `0${dateObj.getDate()}`.slice(-2);\n const month = `0${dateObj.getMonth() + 1}`.slice(-2);\n const year = dateObj.getFullYear();\n\n return `${year}-${month}-${day}`;\n }\n\n /**\n * @private changeDate\n * @param {Event} evt - Custom event fired by the datepicker\n *\n * @description\n * Updates the data-value attribute on the datepicker and triggers form update.\n */\n changeDate(evt) {\n if (evt && evt.detail?.date) {\n this.setAttribute('data-value', this.constructor.getFormattedDate(evt.detail.date));\n\n // If ASAP date was previously selected check if checkbox should be toggled\n if (this.getAttribute(this.dataAsapDateAttribute)) this.resetDatePickerAsap(evt.detail.date);\n } else {\n this.removeAttribute('data-value');\n }\n\n this.closest('form').dispatchEvent(new CustomEvent('change'));\n this.dispatchEvent(new CustomEvent('input'));\n this.blur();\n }\n\n /**\n * @private fixUnavailableDateOnBlur\n * @param {Event} evt - Blur event fired by the datepicker\n *\n * @description\n * Checks if provided date is part of availableDates and if not triggers a value change.\n */\n fixUnavailableDateOnBlur(evt) {\n const newDate = moment(evt.target.value, 'DD-MM-YYYY').format('MM-DD-YYYY');\n\n // If the provided date is not available, automatically set a default value that is available\n if (!this.availableDates.includes(newDate)) this.setDatePickerDefault(newDate);\n }\n\n /**\n * @private setDatePickerDefault\n * @param {string} date - A date string\n *\n * @description\n * Sets datepicker value to `minDateUnFormatted` (if given date is in he past) or `maxDateUnFormatted` (if given date is in the future, or invalid somehow).\n *\n */\n setDatePickerDefault(date) {\n const newDate = moment(date, 'MM-DD-YYYY').isBefore(this.minDate) ? this.minDateUnFormatted : this.maxDateUnFormatted;\n\n // Set new automatic value and refresh date input\n this.datepicker.setDate(newDate);\n\n this.dispatchEvent(new CustomEvent('change'));\n }\n\n /**\n * @private setDatePickerAsap\n *\n * @description\n * Sets datepicker value to `minDate` (first available) on ASAP checkbox checked.\n *\n */\n setDatePickerAsap() {\n if (this.asapToggle.checked) {\n const date = this.momentFormatter(this.minDate);\n\n this.setAttribute(this.dataAsapDateAttribute, date);\n this.datepicker.setDate(date);\n\n // Refresh date field (make sure change event didn't affect checkbox)\n this.dispatchEvent(new CustomEvent('change'));\n\n this.asapToggle.checked = true;\n this.asapToggle.setAttribute('value', true);\n } else {\n this.removeAttribute(this.dataAsapDateAttribute);\n this.asapToggle.setAttribute('value', false);\n }\n }\n\n /**\n * @private setDatePickerDate\n * @param {Event} evt - Custom event fired by other components\n *\n * @description\n * Sets datepicker value to whatever is sent by the component\n *\n */\n setDatePickerDate(evt) {\n if (evt && evt.detail?.date) {\n const asapDate = evt.detail.asap && evt.detail.asap === 'true';\n\n if (asapDate) this.setAttribute(this.dataAsapDateAttribute, evt.detail.date);\n this.datepicker.setDate(evt.detail.date);\n\n // Refresh date field\n this.dispatchEvent(new CustomEvent('change'));\n\n // Handle ASAP toggle\n if (asapDate) {\n this.asapToggle.checked = true;\n this.asapToggle.setAttribute('value', true);\n }\n }\n }\n\n /**\n * @private resetDatePickerAsap\n * @param {string} date - Selected date\n *\n * @description\n * Resets ASAP checkbox if first available date is no longer selected.\n *\n */\n resetDatePickerAsap(date) {\n if (this.getAttribute(this.dataAsapDateAttribute) !== this.momentFormatter(date)) this.asapToggle.checked = false;\n }\n\n /* eslint-disable class-methods-use-this */\n /**\n * @private momentFormatter\n * @param {string} date - Date to be formatted\n * @returns {string} - momentjs formatted date\n *\n * @description\n * Using momentjs to format date to a desired format for vanillajs-datepicker display\n *\n */\n momentFormatter(date) {\n return moment ? moment(date).locale('nl').format('DD-MM-YYYY') : date;\n }\n /* eslint-enable class-methods-use-this */\n}\n\nexport default window.customElements.get('vz-datepicker') || VZDatePicker;\nif (!window.customElements.get('vz-datepicker')) {\n window.customElements.define('vz-datepicker', VZDatePicker, { extends: 'input' });\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t\n
\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\nimport * as debounce from 'lodash/debounce';\nimport { CONST, documentReady, isAemMobileView } from 'Util/util';\nimport 'Components/modals/VZModal';\n\nconst classes = {\n navigationActive: 'navigation-active',\n open: 'open',\n scrollLock: 'scroll-lock',\n sticky: 'sticky'\n};\n\nconst selectors = {\n body: 'body',\n flyout: '.flyout',\n header: 'header',\n navigation: '.js-navigation',\n navigationColumn: '.js-navigation-column',\n navigationItems: '.js-navigation-item',\n navigationTitles: '.js-navigation-column-title',\n navigationToggler: '.js-navigation-toggler',\n navigationWrapper: '.js-navigation-wrapper',\n notification: '.js-notification',\n notificationContent: '.js-notification .alert',\n subNavigation: '.js-sub-navigation',\n subNavigationWrapper: '.js-sub-navigation-wrapper',\n storefrontPage: '.pd-page',\n subNavigationBtnSmallBusiness: '.js-btn-small-business',\n subNavigationBtnLargeBusiness: '.js-btn-large-business'\n};\n\nconst body = document.querySelector(selectors.body);\nconst notification = document.querySelector(selectors.notification);\nlet header;\nlet navigation;\nlet navigationToggler;\nlet navigationWrapperMobile;\n\n/**\n * @private toggleStickyClass\n *\n * @description\n * Toggle the sticky class on the header on page scroll\n */\nfunction toggleStickyClass() {\n if (window.pageYOffset > 0) {\n body.classList.add(classes.sticky);\n } else {\n body.classList.remove(classes.sticky);\n }\n}\n\n/**\n * @private updateNotificationHeight\n *\n * @description\n * If there is a notification element:\n * - Adjust the padding on the body\n * - Set a height on the notification for css-transition purposes\n */\nfunction updateNotificationHeight() {\n notification.setAttribute('style', 'height: auto !important');\n body.style.paddingTop = 'auto';\n\n const notificationHeight = notification.offsetHeight;\n const headerHeight = header.offsetHeight;\n\n notification.style.height = `${notificationHeight}px`;\n body.style.paddingTop = `${headerHeight}px`;\n}\n\n/**\n * @function getFlyoutMinHeight\n * @description\n * Iterates over navigation items to get the largest flyout.\n * @return {string} flyout minimum height\n */\nfunction getFlyoutMinHeight() {\n if (!isAemMobileView) return 'auto';\n\n return `${[...navigation.querySelectorAll(selectors.flyout)].reduce((result, item) => {\n return result > item.clientHeight ? result : item.clientHeight;\n }, 0)}px`;\n}\n\n/**\n * @function setFlyoutHeight\n * @default\n * Sets the flyout minimum height on desktop to the largest flyout.\n * On mobile the minimum height is reset to auto.\n */\nfunction setFlyoutHeight() {\n if (isAemMobileView) return;\n\n const flyouts = [...navigation.querySelectorAll(selectors.flyout)];\n const flyoutMinHeight = getFlyoutMinHeight();\n flyouts.forEach((flyout) => {\n flyout.style.minHeight = flyoutMinHeight;\n });\n}\n\n/**\n * @private handleDesktopHoverClasses\n *\n * @description\n * Will toggle an active class on the navigation when hovering over navigation items for desktop\n */\nfunction handleDesktopHoverClasses() {\n if (!isAemMobileView) return;\n\n navigationWrapperMobile?.addEventListener(CONST.events.mouseover, () => {\n body.classList.add(classes.scrollLock);\n navigation.classList.add(classes.navigationActive);\n navigationToggler.classList.add(classes.navigationActive);\n });\n navigationWrapperMobile?.addEventListener(CONST.events.mouseleave, () => {\n body.classList.remove(classes.scrollLock);\n navigation.classList.remove(classes.navigationActive);\n navigationToggler.classList.remove(classes.navigationActive);\n });\n}\n\n/**\n * @private bindItemToggling\n * @param {HTMLElement} item - The navigation item that can be toggled\n *\n * @description\n * Will create toggling functionality on navigation items\n */\nfunction bindItemToggling(item) {\n item.addEventListener(CONST.events.click, (evt) => {\n const targetElement = evt.target.closest(selectors.navigationColumn);\n if (targetElement.classList.contains(classes.open)) {\n targetElement.classList.remove(classes.open);\n } else {\n targetElement.classList.add(classes.open);\n }\n });\n}\n\n/**\n * @private updateMobileMenuPosition\n *\n */\nfunction updateMobileMenuPosition() {\n if (isAemMobileView && navigationWrapperMobile) navigationWrapperMobile.style.top = `${header.offsetHeight}px`;\n}\n\n/**\n * @private toggleMobileMenu\n *\n * @description\n * Calculate top offset for navigation & handle scrollLock/active classes\n */\nfunction toggleMobileMenu() {\n updateMobileMenuPosition();\n\n if (navigation.classList.contains(classes.navigationActive)) {\n body.classList.remove(classes.scrollLock);\n navigation.classList.remove(classes.navigationActive);\n navigationToggler.classList.remove(classes.navigationActive);\n } else {\n body.classList.add(classes.scrollLock);\n navigation.classList.add(classes.navigationActive);\n navigationToggler.classList.add(classes.navigationActive);\n }\n}\n\nexport default documentReady(() => {\n header = document.querySelector(selectors.header);\n navigation = document.querySelector(selectors.navigation);\n const subNavigation = document.querySelector(selectors.subNavigation);\n const subNavigationBtnSmallBusiness = document.querySelector(selectors.subNavigationBtnSmallBusiness);\n const subNavigationBtnLargeBusiness = document.querySelector(selectors.subNavigationBtnLargeBusiness);\n\n if (!navigation) return;\n\n navigationToggler = navigation.querySelector(selectors.navigationToggler);\n navigationWrapperMobile = document.querySelector(selectors.navigationWrapper);\n\n // If there is a notification, adjust the padding on the body and set a height on the notification\n if (document.querySelector(selectors.notificationContent)) {\n updateNotificationHeight();\n\n window.addEventListener(\n 'resize',\n debounce(() => {\n updateNotificationHeight();\n updateMobileMenuPosition();\n setFlyoutHeight();\n }, 100)\n );\n }\n\n // Handle scrolling & sticky header\n toggleStickyClass();\n document.addEventListener('scroll', toggleStickyClass);\n\n // Handle classes for desktop\n handleDesktopHoverClasses();\n setFlyoutHeight();\n\n // Handle classes & offset for mobile navigation\n if (!navigationToggler) return;\n navigationToggler.addEventListener(CONST.events.click, toggleMobileMenu);\n\n // For mobile, add a click event to toggle collapse\n [...navigation.querySelectorAll(selectors.navigationTitles)].forEach(bindItemToggling);\n\n [subNavigationBtnSmallBusiness, subNavigationBtnLargeBusiness]\n .filter((item) => item)\n .forEach((subNavButton) => {\n subNavButton.addEventListener(CONST.events.click, (evt) => {\n const isEmptyBasket = subNavigation.dataset.basketIsEmpty;\n if (isEmptyBasket === 'false') {\n evt.preventDefault();\n const notEmptyBasketModal = document.getElementById('modal-basket-not-empty');\n const primaryBtnText = subNavButton.dataset.modalBtnText;\n notEmptyBasketModal.render({ primaryBtnText, primaryBtnUrl: evt.target.href });\n }\n });\n });\n});\n","'use strict';\n\nimport { getPosition, scrollTo } from 'app_vodafone_ziggo/util/util';\n\n/**\n * @private scrollToHash\n */\nfunction scrollToHash() {\n const hash = window.location.hash;\n\n if (hash) {\n const element = document.querySelector(hash);\n\n if (!element) return;\n if (element.classList.contains('faq-item')) return; // FAQ has it's own scrolling\n\n const elementPosition = getPosition(element);\n\n // Scroll after a really short timeout for some edgecases where a browser's autoscroll is\n // firing after our custom `scrollTo` functionality. This might have something to do with the\n // callstack, so make sure our `scrollTo` is fired last.\n setTimeout(() => {\n scrollTo(elementPosition);\n }, 1);\n }\n}\n\nwindow.addEventListener('load', scrollToHash);\nwindow.addEventListener('hashchange', scrollToHash, false);\n","'use strict';\n\nimport { getCurrentBreakpoint } from 'Util/util';\n\n/**\n * @private detectBreakpointChange\n */\nfunction detectBreakpointChange() {\n const currentBreakpoint = getCurrentBreakpoint();\n\n if (JSON.stringify(window.currentBreakpoint) !== JSON.stringify(currentBreakpoint)) {\n const customEvent = new CustomEvent('breakpointChange', {\n detail: {\n breakpoint: currentBreakpoint\n }\n });\n document.dispatchEvent(customEvent);\n }\n\n window.currentBreakpoint = currentBreakpoint;\n}\n\nwindow.addEventListener('resize', detectBreakpointChange);\n","'use strict';\n\nimport { CONST, documentReady } from 'Util/util';\n\nconst selectors = {\n searchField: '.js-search-field',\n searchForm: '.js-search-form',\n searchTrigger: '.js-search-trigger'\n};\n\nexport default documentReady(() => {\n const searchField = document.querySelector(selectors.searchField);\n const searchForm = document.querySelector(selectors.searchForm);\n const trigger = document.querySelector(selectors.searchTrigger);\n\n if (!searchForm || !searchField) return;\n\n trigger.addEventListener(CONST.events.click, () => {\n if (searchForm.classList.contains(CONST.classes.active)) {\n searchForm.classList.remove(CONST.classes.active);\n } else {\n searchForm.classList.add(CONST.classes.active);\n searchField.focus();\n }\n });\n\n searchField.addEventListener(CONST.events.blur, () => {\n searchForm.classList.remove(CONST.classes.active);\n searchField.value = '';\n });\n});\n","'use strict';\n\nimport Drawer from 'bootstrap/js/src/offcanvas';\nimport VZSpinner from 'Components/VZSpinner';\nimport { appendCsrfToUrl, getParamFromURL, removeParamFromURL } from 'Util/urlUtils';\nimport { showErrorModal } from 'Root/modal';\nimport { appendParamToURL } from 'Root/util/urlUtils';\nimport { loadCSS } from 'Util/util';\n\nconst spinner = document.querySelector('vz-spinner') || new VZSpinner();\n\n/**\n * @class VZOpenDrawer\n * @description Specifically used for the more information drawer\n * @example\n * \n * \n * \n */\nexport default class VZOpenDrawer extends HTMLElement {\n constructor() {\n super();\n\n this.endpoint = this.dataset.drawerUrl;\n this.onClick = this.onClick.bind(this);\n this.handleSuccessResponse = this.handleSuccessResponse.bind(this);\n }\n\n connectedCallback() {\n this.isMinicartButton = this.classList.contains('js-minicart-button');\n this.isEditMode = document.querySelector('.js-edit-mode');\n this.addEventListener('click', this.onClick);\n this.showMinicartDrawerOnLoad();\n }\n\n disconnectedCallback() {\n this.removeEventListener('click', this.onClick);\n }\n\n /**\n * @function showDrawer\n * @description creates a Boostrap offcanvas drawer and shows it\n * @param {HTMLElement} drawerElement the element from which to create a Boostrap Offcanvas element (A.K.A Drawer)\n */\n static showDrawer(drawerElement) {\n const bsDrawer = new Drawer(drawerElement);\n bsDrawer.show();\n }\n\n /**\n * @function showMinicartDrawerOnLoad\n * @description Reopens the minicart after a product is deleted from it and the page reloads.\n * @returns {void} Early exit if the button is not the minicart button.\n */\n showMinicartDrawerOnLoad() {\n if (!this.isMinicartButton) return;\n const showMinicart = getParamFromURL(window.location.href, 'showMinicart') === 'true';\n\n if (showMinicart) {\n this.dispatchEvent(new CustomEvent('click'));\n\n // To avoid opening the minicart again and again on page refresh, the param needs to removed\n const urlWithoutParam = removeParamFromURL(window.location.href, 'showMinicart');\n window.history.pushState(null, '', urlWithoutParam); // Update URL without refreshing the page\n }\n }\n\n /**\n * @function addDrawerToDOM\n * @description adds the drawer returned from the endpoint to the DOM\n * @param {JSON} data returned from calling Drawer-Show\n */\n static addDrawerToDOM(data) {\n const body = document.body;\n body.insertAdjacentHTML('beforeend', data.html);\n }\n\n /**\n * @function handleSuccessResponse\n * @description handles a successful call to Drawer-Show\n * @param {JSON} data returned from calling Drawer-Show\n */\n handleSuccessResponse(data) {\n this.constructor.addDrawerToDOM(data);\n loadCSS(this.getAttribute('loadcss'));\n const drawer = document.getElementById('drawer');\n const drawerElement = drawer.closest('.js-drawer-container');\n\n if (!drawerElement) return;\n this.constructor.showDrawer(drawerElement);\n if (this.isMinicartButton && !this.isEditMode) {\n document.dispatchEvent(new CustomEvent('minicart:open')); // This will open the abandonConfigurationModel triggered inside VZModal.js\n }\n if (this.isMinicartButton && !this.isEditMode) {\n document.dispatchEvent(new CustomEvent('minicart:open')); // This will open the abandonConfigurationModel triggered inside VZModal.js\n }\n }\n\n /**\n * @function onClick\n * @description Handles the click event on an open drawer button\n * @param {Event} event - The click event\n */\n async onClick(event) {\n event.preventDefault(); // This is needed so that checkboxes on the configurator are not checked when more information is clicked\n const endpointWithCsrf = appendCsrfToUrl(this.endpoint);\n const isConfiguratorPage = this.isMinicartButton ? this?.dataset.isConfiguratorPage : false;\n\n // Get and Add the pliId to the querystring to make it available in the minicart drawer only in edit mode.\n const productPliID = this.isMinicartButton && this.isEditMode ? getParamFromURL(window.location.href, 'pliId') : false;\n const editModeEndpoint = productPliID ? appendParamToURL(endpointWithCsrf, 'productPliID', productPliID) : false;\n const finalEndpoint = this.isMinicartButton ? appendParamToURL(editModeEndpoint || endpointWithCsrf, 'isConfiguratorPage', isConfiguratorPage) : endpointWithCsrf;\n\n spinner.start();\n try {\n const response = await fetch(finalEndpoint);\n\n if (!response.ok) {\n throw new Error(`There was an error fetching the endpoint - ${this.endpoint} - status: ${response.status}`);\n }\n\n const data = await response.json();\n this.handleSuccessResponse(data);\n } catch (error) {\n console.warn(error);\n const { title, body, cta } = JSON.parse(this.dataset?.generalError);\n showErrorModal(title, body, cta);\n } finally {\n spinner.stop();\n }\n }\n}\n\nif (!window.customElements.get('vz-open-drawer')) {\n window.customElements.define('vz-open-drawer', VZOpenDrawer);\n}\n","'use strict';\n\nimport initCollapsibleSpecs from 'Components/collapsibleSpecs';\n\n/**\n * @class VZDrawer\n */\nexport default class VZDrawer extends HTMLElement {\n constructor() {\n super();\n }\n\n connectedCallback() {\n this.scrollBarWidth = window.innerWidth - document.body.clientWidth;\n this.pageHeader = document.querySelector('.js-page-header');\n\n document.addEventListener('hidden.bs.offcanvas', this.removeDrawer.bind(this));\n document.addEventListener('show.bs.offcanvas', this.prepareDocumentBody.bind(this));\n document.addEventListener('hide.bs.offcanvas', this.constructor.preventDrawerClosing.bind(this));\n document.addEventListener('show.bs.modal', this.constructor.preventInfiniteLoop.bind(this));\n initCollapsibleSpecs();\n }\n\n disconnectedCallback() {\n document.removeEventListener('hidden.bs.offcanvas', this.removeDrawer);\n document.removeEventListener('show.bs.offcanvas', this.prepareDocumentBody);\n document.removeEventListener('hide.bs.offcanvas', this.constructor.preventDrawerClosing);\n document.removeEventListener('show.bs.modal', this.constructor.preventInfiniteLoop);\n }\n\n /**\n * @function preventInfiniteLoop\n * @description When a drawer is open, if a modal is opened thereafter, an infinite loop can be created. Removing the tabIndex\n * will prevent that. See https://stackoverflow.com/questions/55867609/bootstrap-modal-called-from-jquery-ui-dialog-maximum-call-stack-size-exceeded.\n * @param {Event} event - The show.bs.modal event.\n */\n static preventInfiniteLoop(event) {\n if (document.body.classList.contains('offcanvas-backdrop')) {\n event.target.removeAttribute('tabIndex');\n }\n }\n\n /**\n * @function preventDrawerClosing\n * @description When a drawer is open, and then a modal is opened, this function prevents the drawer from closing when\n * the modal is interacted with.\n * @param {Event} event - The hide.bs.offcanvas event.\n */\n static preventDrawerClosing(event) {\n if (document.body.classList.contains('modal-open')) {\n event.preventDefault();\n }\n }\n\n /**\n * @function removeDrawer\n * @description removes the drawer from the DOM\n */\n removeDrawer() {\n document.body.style.paddingRight = 0;\n this.pageHeader.style.paddingRight = 0;\n\n const parentElement = this.parentElement;\n parentElement.remove();\n }\n\n /**\n * @function prepareDocumentBody\n * @description Sets some styling on the body to match what the drawer will set from Bootstrap.\n * This is to make sure there is no \"jumpy\" effect for some properties that are missing initially. (boo Bootstrap)\n * We only need to do this once, as Bootstrap will set the proper styling after the drawer has already been opened once.\n * See BO-1532 for more context.\n */\n prepareDocumentBody() {\n if (!('drawerInitiated' in document.body.dataset)) {\n document.body.dataset.drawerInitiated = '';\n document.body.style.paddingRight = `${this.scrollBarWidth}px`;\n document.body.setAttribute('overflow', 'hidden');\n }\n\n this.pageHeader.style.paddingRight = `${this.scrollBarWidth}px`;\n }\n}\n\nif (!window.customElements.get('vz-drawer')) {\n window.customElements.define('vz-drawer', VZDrawer);\n}\n","import { isMobile } from 'Util/util';\n\n/**\n * Initializes collapsible specifications.\n *\n * @param {HTMLElement} [wrapper] - The wrapper element containing collapsible specs controls.\n * @private\n */\nexport default function initCollapsibleSpecs(wrapper) {\n const collapseControls = wrapper ? [...wrapper.querySelectorAll('.js-collapsible-specs-control')] : [...document.querySelectorAll('.js-collapsible-specs-control')];\n\n collapseControls.forEach((control) => {\n const toggleState = () => {\n // Toggle aria-expanded attribute\n const isExpanded = control.getAttribute('aria-expanded') === 'true';\n control.setAttribute('aria-expanded', (!isExpanded).toString());\n\n control.classList.toggle('collapsible-specs-control-closed');\n // If the class js-collapsible-specs-independent present each control toggles one item\n // In opposite on the cart page one controll toggles all the product items\n if (control.classList.contains('js-collapsible-specs-independent')) {\n control.closest('.js-collapsible-specs')?.classList.toggle('collapsible-specs-collapsed');\n } else {\n const specs = [...(control.closest('.card')?.querySelectorAll('.js-collapsible-specs') || [])];\n specs.forEach((item) => {\n item.classList.toggle('collapsible-specs-collapsed');\n });\n }\n };\n const tapArea = control.closest('.js-collapsible-specs')?.querySelector('.js-collapsible-specs-tap-area');\n if (tapArea) {\n tapArea.addEventListener('click', toggleState);\n } else {\n control.addEventListener('click', toggleState);\n }\n // Collapse open item on mobile if indicated by the class\n if (isMobile() && control.classList.contains('js-collapsible-specs-collapse-mobile') && control.getAttribute('aria-expanded') === 'true') {\n toggleState();\n }\n });\n}\n","'use strict';\n\nimport { CONST, documentReady, addEvent } from 'app_vodafone_ziggo/util/util';\n\n/**\n * @constant {Object} selectors - Selectors used for the Prompt\n * @property {string} promptOpen - .js-btn-prompt-open\n * @property {string} promptCancel - .js-btn-prompt-cancel\n * @property {string} promptConfirm - .js-btn-prompt-confirm\n */\nconst selectors = {\n prompt: '.js-prompt',\n promptOpen: '.js-btn-prompt-open',\n promptCancel: '.js-btn-prompt-cancel',\n promptConfirm: '.js-btn-prompt-confirm',\n chatPromptOpen: '.dimelo_chat_show_when_offline',\n chatClosedPrompt: '#bscan-chat-closed'\n};\n\n/**\n * @private promptOpen\n * @param {event} event - The click event\n */\nfunction promptOpen(event) {\n const button = event.target;\n const target = button.getAttribute(CONST.attributes.target);\n const prompt = document.querySelector(target);\n\n if (prompt) {\n prompt.classList.add(CONST.classes.active);\n }\n}\n\n/**\n * @private promptClose\n * @param {event} event - The click event\n * @param {boolean} confirm - If the \"confirm\" button has been clicked\n */\nfunction promptClose(event, confirm) {\n if (!confirm) {\n event.preventDefault();\n }\n\n const button = event.target;\n const prompt = button.closest(selectors.prompt);\n\n if (prompt) {\n prompt.classList.remove(CONST.classes.active);\n button.blur(); // Remove the focus on the button, necessary for BScan keyboard navigation\n }\n}\n\ndocumentReady(() => {\n addEvent(document, CONST.events.click, selectors.promptOpen, promptOpen);\n addEvent(document, CONST.events.click, selectors.promptCancel, (event) => {\n promptClose(event, false);\n });\n addEvent(document, CONST.events.click, selectors.promptConfirm, (event) => {\n promptClose(event, true);\n });\n\n addEvent(document, CONST.events.click, selectors.chatPromptOpen, (event) => {\n const button = event.target;\n\n if (!button.getAttribute(CONST.attributes.target)) {\n button.setAttribute(CONST.attributes.target, selectors.chatClosedPrompt);\n }\n\n promptOpen(event);\n });\n});\n","'use strict';\n\n/**\n * @constant {Object} ADDRESS_MAPPING - Mapping company lookup response with form fields.\n */\nconst ADDRESS_MAPPING = {\n postalCode: 'dwfrm_checkoutDetails_company_postcode',\n houseNumber: 'dwfrm_checkoutDetails_company_housenumber',\n houseNumberAddition: 'dwfrm_checkoutDetails_company_addition',\n street: 'dwfrm_checkoutDetails_company_address1',\n city: 'dwfrm_checkoutDetails_company_city',\n country: 'dwfrm_checkoutDetails_company_country',\n foundationDate: 'dwfrm_checkoutDetails_company_creationDate',\n legalForm: 'dwfrm_checkoutDetails_company_legalform'\n};\n\n/**\n * @constant {Object} LEGAL_FORM - Mapping legal form field values with legal form types.\n */\nconst LEGAL_FORM = {\n BV: '1',\n NV: '2',\n VOF: '3',\n Eenmanszaak: '4',\n CV: '5',\n Maatschap: '6',\n Vereniging: '7',\n 'onderlinge waarborgmaatschappij': '8',\n Stichting: '9'\n};\n\n/**\n * @public startsWithNumber\n * @description tests an input against a regex to evaluate if it starts with a number\n * @param {string} value the value to test\n * @returns {boolean} whether it starts with a number or not\n */\nfunction startsWithNumber(value) {\n const regex = /^\\d/;\n return regex.test(value);\n}\n\n/**\n * @private getCompanyRelatedFields\n * @description converts a group of selectors into elements\n * @returns {Array} an array of elements\n */\nfunction getCompanyRelatedFields() {\n return [\n '.js-kvk-number',\n '.js-creation-date',\n '[name=\"dwfrm_checkoutDetails_company_legalform\"]',\n '[name=\"dwfrm_checkoutDetails_company_country\"]',\n '[name=\"dwfrm_checkoutDetails_company_companyName\"]',\n '[name=\"dwfrm_checkoutDetails_company_postcode\"]',\n '[name=\"dwfrm_checkoutDetails_company_housenumber\"]',\n '[name=\"dwfrm_checkoutDetails_company_addition\"]',\n '[name=\"dwfrm_checkoutDetails_company_address1\"]',\n '[name=\"dwfrm_checkoutDetails_company_city\"]'\n ]\n .map((selector) => {\n return document.querySelector(selector);\n })\n .filter((item) => item); // Filter out null values\n}\n\n/**\n * @public clearCompanyRelatedFields\n * @description clears all company related fields and sets correct classes\n */\nfunction clearCompanyRelatedFields() {\n getCompanyRelatedFields().forEach((element) => {\n // eslint-disable-next-line default-case\n switch (element.tagName) {\n case 'INPUT':\n element.value = '';\n element.classList.add('empty');\n break;\n case 'SELECT':\n element.selectedIndex = 0;\n\n if (element.classList.contains('js-kvk-companies') && element.options.length) {\n [...element.options].forEach((option) => {\n if (option.value !== '' && !option.hasAttribute('disabled')) option.remove();\n });\n }\n break;\n }\n });\n}\n\n/**\n * @public getCompanyDetailsUrl\n * @description returns a company's details URL given a list of companies and a KVK number\n * @param {array} companies an array of companies to search in\n * @param {string} kvkNumber a KVK number to search for in the list of companies passed in the first parameter'\n * @returns {string} the details URL for the given KVK number\n */\nfunction getCompanyDetailsUrl(companies, kvkNumber) {\n return companies.find((company) => company.kvkNumber === kvkNumber).detailsUrl;\n}\n\n/**\n * @function getKeyByValue\n * @private\n * @param {Array} map - The Array to search in\n * @param {string} value - The value used to find a key\n * @returns {string | null} - Returns the key when found or null when not found.\n */\nfunction getKeyByValue(map, value) {\n return Object.keys(map).find((key) => map[key] === value) || null;\n}\n\n/**\n * @function onCompanyChange\n * @private\n * @description when fn populateCompanyNameField in VZCompanySearch.js fires a change event, this function handles populating all related fields\n * @param {ChangeEvent} evt - Change event on company selector\n */\nfunction onCompanyChange(evt) {\n const checkedOption = evt.target.querySelector('option:checked');\n if (!checkedOption) return;\n const val = checkedOption.getAttribute('data-value');\n if (!val) return;\n\n try {\n const address = JSON.parse(decodeURI(val)).address;\n Object.keys(ADDRESS_MAPPING)\n .map((key) => document.getElementById(ADDRESS_MAPPING[key]))\n .filter((el) => el) // Filter out null values\n .forEach((element) => {\n const key = getKeyByValue(ADDRESS_MAPPING, element.id);\n const value = key === 'legalForm' ? LEGAL_FORM[address[key]] : address[key];\n const isNoValidOption = element.options && ![...element.options].find((option) => option.value === value);\n const allowManuallyEntry = [ADDRESS_MAPPING.legalForm, ADDRESS_MAPPING.foundationDate].includes(element.id);\n\n if (isNoValidOption && allowManuallyEntry) {\n [...element.options].forEach((option) => {\n if (option.value.length > 0) option.removeAttribute('disabled');\n });\n }\n\n if ((!value || isNoValidOption) && allowManuallyEntry) {\n element.setAttribute('read-only', 'false');\n return;\n }\n\n element.value = value;\n });\n } catch (e) {\n console.error(e);\n }\n}\n\nexport { startsWithNumber, clearCompanyRelatedFields, getCompanyDetailsUrl, onCompanyChange };\n","'use strict';\n\nimport { validateField } from 'app_vodafone_ziggo/util/validation';\n\nconst selectors = {\n chooserInviteWrapper: '.js-chooser-invite',\n chooserInviteCheckbox: '.js-chooser-invite-toggle',\n chooserInviteContent: '.js-chooser-invite-content'\n};\n\n/**\n * Toggles the visibility and disabled state of form fields based on the state of the invite toggle.\n * @param {HTMLElement} chooserInviteToggle - The invite toggle element.\n * @param {HTMLElement} chooserInviteContent - The invite content element.\n */\nfunction toggleContentAndFields(chooserInviteToggle, chooserInviteContent) {\n chooserInviteContent.classList.toggle('show', !chooserInviteToggle.checked);\n const formFields = chooserInviteContent.querySelectorAll('.form-control, .custom-select');\n formFields.forEach((field) => {\n field.disabled = chooserInviteToggle.checked;\n\n // Validate the prefilled phone prefix field when showing the form\n if (field.classList.contains('js-phone-prefix')) {\n validateField(field);\n }\n });\n}\n\n/**\n * Toggles the visibility of the chooser invite section based on the provided condition.\n * @param {boolean} condition - The condition to toggle the visibility.\n */\nfunction showChooserInviteSection(condition) {\n const chooserInviteSection = document.querySelector(selectors.chooserInviteWrapper);\n const chooserInviteCheckbox = document.querySelector(selectors.chooserInviteCheckbox);\n\n // Set the state of the checkbox to checked if the Chooser Invite section gets hidden and collapse the form\n if (!condition && chooserInviteCheckbox) {\n chooserInviteCheckbox.checked = true;\n }\n\n if (chooserInviteSection) {\n chooserInviteSection.classList.toggle('d-none', !condition);\n }\n}\n\n/**\n * Initializes the chooser invite by setting up the toggle functionality.\n */\nfunction initChooserInvite() {\n const chooserInviteToggle = document.querySelector(selectors.chooserInviteCheckbox);\n const chooserInviteContent = document.querySelector(selectors.chooserInviteContent);\n\n if (chooserInviteToggle) {\n toggleContentAndFields(chooserInviteToggle, chooserInviteContent);\n chooserInviteToggle.addEventListener('change', () => toggleContentAndFields(chooserInviteToggle, chooserInviteContent));\n }\n}\n\nexport { initChooserInvite, showChooserInviteSection };\n","'use strict';\n\nimport * as debounce from 'lodash/debounce';\nimport { removeChildNodes, removeAccentCharacters } from 'Util/util';\nimport VZSpinner from 'Components/VZSpinner';\nimport { startsWithNumber, clearCompanyRelatedFields, getCompanyDetailsUrl } from './helpers/companySearchHelpers';\nimport { appendParamToURL, appendCsrfToUrl } from 'Util/urlUtils';\nimport moment from 'moment-timezone';\nimport { showChooserInviteSection } from 'Components/chooserInvite';\n\nexport default class VZCompanySearch extends HTMLElement {\n constructor() {\n super();\n this.inputField = this.querySelector('.js-company-search');\n this.form = this.querySelector('.js-company-search-section');\n this.result = this.querySelector('.js-company-result');\n this.searchResults = this.querySelector('.js-company-search-results');\n this.kvkNumberField = this.querySelector('.js-kvk-number');\n this.companySelector = this.querySelector('.js-kvk-companies');\n this.chooserInviteElement = this.querySelector('.js-chooser-invite');\n this.companyInformationCards = ['companyInformation', 'paymentInformation', 'checkoutNavigation', 'installationInformation']\n .map((item) => document.getElementById(item))\n .filter((item) => item);\n\n this.minQueryLengthText = parseInt(this.inputField.dataset.minQueryLengthText, 10);\n this.minQueryLengthNumber = parseInt(this.inputField.dataset.minQueryLengthNumber, 10);\n this.tradenameEndpoint = this.inputField.dataset.tradenameUrl;\n this.kvkEndpoint = this.inputField.dataset.kvkUrl;\n this.hasExistingKvk = this.getAttribute('has-existing-kvk') === 'true';\n this.isLeadForm = this.getAttribute('is-lead-form') === 'true';\n this.spinner = document.querySelector('vz-spinner') || new VZSpinner();\n\n this.onEdit = this.onEdit.bind(this);\n this.onKeyup = this.onKeyup.bind(this);\n this.onSearchResultClick = this.onSearchResultClick.bind(this);\n this.handleSearchResultClick = this.handleSearchResultClick.bind(this);\n this.populateKvkField = this.populateKvkField.bind(this);\n this.handleDocumentClick = this.handleDocumentClick.bind(this);\n this.fetchExistingKvk = this.fetchExistingKvk.bind(this);\n this.getEndpoint = this.getEndpoint.bind(this);\n this.onExistingKvkFetch = this.onExistingKvkFetch.bind(this);\n }\n\n /**\n * @function observedAttributes\n * @description observes the mentioned attribute and fires attributeChangedCallback when the value has changed\n * @returns {Attr} the companies attribute. This attribute's value is an encoded JSON string so should be decoded when using.\n */\n static get observedAttributes() {\n return ['companies'];\n }\n\n connectedCallback() {\n this.inputField.addEventListener('keyup', debounce(this.onKeyup, 500));\n this.inputField.addEventListener('keydown', VZCompanySearch.onKeydown.bind(this));\n this.searchResults.addEventListener('click', this.onSearchResultClick);\n document.addEventListener('click', this.handleDocumentClick);\n\n if (this.kvkNumberField && this.kvkNumberField.value.length > 0 && this.hasExistingKvk) {\n window.addEventListener('load', this.fetchExistingKvk);\n }\n\n if (this.querySelector('.js-company-edit')) this.querySelector('.js-company-edit').addEventListener('click', this.onEdit);\n }\n\n disconnectedCallback() {\n this.inputField.removeEventListener('keyup', this.onKeyup, 500);\n this.inputField.removeEventListener('keydown', VZCompanySearch.onKeydown);\n this.searchResults.removeEventListener('click', this.onSearchResultClick);\n document.removeEventListener('click', this.handleDocumentClick);\n if (this.querySelector('.js-company-edit')) this.querySelector('.js-company-edit').removeEventListener('click', this.onEdit);\n }\n\n /**\n * @function attributeChangedCallback\n * @description fired when an observed attribute changes\n * @param {string} name the name of the attribute\n * @param {any} oldValue the previous value of the attribute\n * @param {any} newValue the new value of the attribute\n */\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'companies' && this.hasExistingKvk) {\n this.onExistingKvkFetch(newValue);\n }\n }\n\n /**\n * @function handleDocumentClick\n * @private\n * @description handles closing the result list if a user clicks somewhere outside it and reopens if input is clicked again\n * @param {Event} evt the click event\n */\n handleDocumentClick(evt) {\n const { target } = evt;\n const resultsOpen = this.searchResults.classList.contains('open');\n const resultsContainer = this.searchResults.querySelector('.js-company-search-results-container');\n const hasInput = this.inputField.value.length > 0;\n\n if (!hasInput || !resultsContainer || !resultsOpen) {\n return;\n }\n if (!target.classList.contains('.js-company-search-results')) {\n resultsContainer.classList.add('d-none');\n }\n if (target.classList.contains('js-company-search')) {\n resultsContainer.classList.remove('d-none');\n }\n }\n\n /**\n * @function handleSearchResultClick\n * @private\n * @description updates the HTML when a search result is clicked\n */\n handleSearchResultClick() {\n removeChildNodes(this.searchResults);\n this.inputField.value = '';\n this.inputField.dispatchEvent(new CustomEvent('input'));\n }\n\n /**\n * @function populateKvkField\n * @private\n * @param {string} value the kvk number\n */\n populateKvkField(value) {\n this.kvkNumberField.value = value;\n ['input', 'blur'].forEach((event) => this.kvkNumberField.dispatchEvent(new CustomEvent(event)));\n }\n\n /**\n * @function clearResults\n * @private\n * @description resets the company selector dropdown\n */\n clearResults() {\n this.companySelector.options.length = 1;\n this.companySelector.options[0].removeAttribute('selected');\n }\n\n /**\n * @function populateCompanyNameField\n * @private\n * @description populates the company name field and triggers change which populates other related fields. See fn OnCompanyChange in checkout.js\n * @param {Object} data the data returned from the details endpoint\n */\n populateCompanyNameField(data) {\n const {\n companyData,\n companyData: { companyName },\n isExistingCompany\n } = data;\n const address = { ...companyData };\n const companies = [{ address, companyName }];\n\n // When the customer is unkown, enable the chooser information\n showChooserInviteSection(!isExistingCompany);\n\n this.companySelector.innerHTML = companies.reduce((result, company, index) => {\n if (!company.address?.country) company.address.country = 'NL';\n const stringifiedCompany = JSON.stringify(company).replace(/'/g, '''); // JSON.stringify does not escape single quotes so it needs to be done manually.\n\n return `${result}\n \n ${company.companyName}\n \n `;\n }, this.companySelector.innerHTML);\n\n const postcode = companies[0]?.address?.postalCode;\n const postcodeFormatted = postcode ? postcode.replace(/(^\\d{4})([A-Za-z]{2})/, '$1 $2') : '';\n this.querySelector('.js-company-name').innerText = companies[0].companyName;\n this.querySelector('.js-company-address').innerText =\n `${companies[0].address.kvkNumber} - ${companies[0].address.street} ${companies[0].address.houseNumber}${companies[0].address.houseNumberAddition}, ${postcodeFormatted} ${companies[0].address.city}`;\n this.companyInformationCards.forEach((card) => card.setAttribute('visible', 'true'));\n\n ['change', 'blur'].forEach((event) => this.companySelector.dispatchEvent(new CustomEvent(event)));\n this.companySelector.classList.add('valid');\n const nowTime = moment().tz('Europe/Amsterdam').format('HH:mm');\n const currentTimeInput = document.querySelector('input[name=currentTime]');\n if (currentTimeInput) currentTimeInput.value = nowTime;\n }\n\n /**\n * @function fetchCompanyDetails\n * @private\n * @description fetches the selected company details on click of a search result\n * @param {string} url the endpoint url\n */\n fetchCompanyDetails(url) {\n this.spinner.start();\n\n fetch(url)\n .then((res) => res.json())\n .then((res) => {\n this.clearResults();\n this.populateCompanyNameField(res);\n this.form.classList.add('d-none');\n this.result.classList.remove('d-none');\n\n // This event is used to enable or disable the checkout button in checkout.js when a company is changed. See BO-1648 for more info.\n this.result.dispatchEvent(new CustomEvent('shown:companySearchResult'));\n })\n .finally(this.spinner.stop);\n }\n\n /**\n * @function fetchCompanyList\n * @private\n * @description fetches the list of companies on entry in the search field\n * @param {string} url the endpoint url\n */\n fetchCompanyList(url) {\n this.spinner.start();\n\n fetch(url)\n .then((res) => res.json())\n .then((res) => {\n if (!res.success) throw res.serverErrors;\n this.searchResults.innerHTML = res.html || this.constructor.generateResponseHTML(res);\n this.searchResults.classList.add('open');\n this.setAttribute('companies', encodeURI(JSON.stringify(res.companies)));\n })\n .catch((res) => {\n const [title, body] = res;\n removeChildNodes(this.searchResults);\n this.searchResults.innerHTML = `\n
\n
\n
\n
${title}
\n
${body}
\n
\n
\n
\n `;\n })\n .finally(this.spinner.stop);\n }\n\n /**\n * @function generateResponseHTML\n *\n * @param {JSON} response - Response from the CompanyInfo-Profile call\n * @return {HTMLElement} search result shown as HTML\n *\n * @description\n * Sync this file with cartridges/app_business_scan/cartridge/templates/default/businessScan/components/searchCompanyResults.isml\n */\n static generateResponseHTML(response) {\n const {\n companyData: { resources, companyName }\n } = response;\n return `\n
\n `;\n }\n\n /**\n * @function onSearchResultClick\n * @private\n * @description handles clicking on a search result by setting calling the details URL for the selected result\n * @param {event} evt a click event on a search result\n */\n onSearchResultClick(evt) {\n const { target } = evt;\n this.searchResultsContainer = this.searchResults.querySelector('.js-company-search-results-container');\n\n if (target.classList.contains('js-company-search-result-item')) {\n if (this.isLeadForm) {\n // For Lead Form replace search query with selected company name\n const selectedNameField = target.querySelector('.js-business-name');\n if (selectedNameField) {\n this.inputField.value = selectedNameField.textContent;\n } else {\n // Clear results on click on 'No results' option\n removeChildNodes(this.searchResults);\n }\n } else {\n const selectedKvkField = target.querySelector('.js-search-result-kvk');\n if (selectedKvkField) {\n // Extract the number from the string to populate kvk field\n const [kvkNumber] = selectedKvkField.textContent.match(/\\d+/);\n\n // Parse companies to find matching company KVK and create URL\n let companyDetailsUrl = getCompanyDetailsUrl(JSON.parse(decodeURI(this.getAttribute('companies'))), kvkNumber);\n companyDetailsUrl = appendParamToURL(companyDetailsUrl, 'investigate', true);\n const selectedCompanyDetailsUrl = appendCsrfToUrl(companyDetailsUrl);\n this.handleSearchResultClick();\n this.populateKvkField(kvkNumber);\n\n // Fetch details endpoint and populate company name field\n this.fetchCompanyDetails(selectedCompanyDetailsUrl);\n }\n }\n }\n }\n\n /**\n * @function getEndpoint\n * @param {string} value - The value entered by a customer to search for.\n *\n * @return {string} The endpoint to call\n * @description\n * When a customer enters a trade name, the Company-Search controller should be called.\n * When a customer entered a KVK number, the Company-Profile endpoint should be called.\n */\n getEndpoint(value) {\n // Number constructor trims “0” from the beginning of a value.\n // so Number(\"0123456\") becomes 123456 which leads to an incorrect KVK number\n return /^\\d{8}$/.test(value) ? `${this.kvkEndpoint}?id=${value}&investigate=true` : `${this.tradenameEndpoint}?q=${value}`;\n }\n\n /**\n * @function fetchExistingKvk\n * @private\n * @description When a user lands on the page with an existing KVK this function triggers the search to populate companies\n */\n fetchExistingKvk() {\n const existingKvkNumber = this.kvkNumberField.value;\n const url = appendCsrfToUrl(this.getEndpoint(existingKvkNumber));\n this.fetchCompanyList(url);\n }\n\n /**\n * @function onExistingKvkFetch\n * @private\n * @description Called when companies attribute changes, this function fetches company details for an existing KVK number\n * @param {string} companies an encoded string of an array of companies - coming from attributeChangedCallback\n */\n onExistingKvkFetch(companies) {\n const existingKvkNumber = this.kvkNumberField.value;\n if (!companies || !existingKvkNumber) return;\n let companyDetailsUrl = getCompanyDetailsUrl(JSON.parse(decodeURI(companies)), existingKvkNumber);\n companyDetailsUrl = appendParamToURL(companyDetailsUrl, 'investigate', true);\n const selectedCompanyDetailsUrl = appendCsrfToUrl(companyDetailsUrl);\n this.fetchCompanyDetails(selectedCompanyDetailsUrl);\n }\n\n /**\n * @function onKeyup\n * @private\n * @description handles entry in the search field. Calls company search endpoint and clears related fields.\n * @param {event} evt a keyup event on the search field\n */\n onKeyup(evt) {\n const {\n target: { value: searchQuery }\n } = evt;\n const minSearchQueryLength = startsWithNumber(searchQuery) ? this.minQueryLengthNumber : this.minQueryLengthText;\n const meetsMinLengthRequirement = searchQuery.length >= minSearchQueryLength;\n clearCompanyRelatedFields();\n\n if (meetsMinLengthRequirement) {\n const url = appendCsrfToUrl(this.getEndpoint(removeAccentCharacters(searchQuery)));\n this.fetchCompanyList(url);\n } else if (this.isLeadForm) {\n // Clear results if the query removed\n removeChildNodes(this.searchResults);\n }\n }\n\n /**\n * @function onKeydown\n * @description Prevents the checkout form being submitted if enter is pressed from within the KVK field.\n * @param {Event} event - The keydown event on the company search field.\n */\n static onKeydown(event) {\n if (event.key === 'Enter' || event.keyCode === 13) {\n event.preventDefault();\n }\n }\n\n onEdit() {\n this.form.classList.remove('d-none');\n this.result.classList.add('d-none');\n this.inputField.value = '';\n this.clearResults();\n showChooserInviteSection(false);\n }\n}\n\nif (!window.customElements.get('vz-company-search')) {\n window.customElements.define('vz-company-search', VZCompanySearch);\n}\n","import { CONST } from 'Util/util';\nimport { validateForm, validateField } from 'app_vodafone_ziggo/util/validation';\nimport Modal from 'bootstrap/js/src/modal';\nimport VZSpinner from 'Components/VZSpinner';\nimport { appendCsrfToUrl } from 'app_vodafone_ziggo/util/urlUtils';\n\nwindow.bs = window.bs || {};\nwindow.bs.Modal = Modal;\n\nconst spinner = document.querySelector('vz-spinner') || new VZSpinner();\n\nconst selectors = {\n errorModal: 'error-modal',\n activeModal: '.modal.show',\n modalStepContainer: '.js-modal-step-container',\n modalStep: '.js-modal-step',\n modalStepInputs: '.form-control, .custom-control'\n};\n\n/**\n * @function showErrorModal\n * @param {string|null} title - The title of the modal\n * @param {string|null} body - The error message within the modal\n * @param {string|null} cta - The cta text within the modal\n */\nfunction showErrorModal(title, body, cta) {\n const errorModalHtml = `\n
\n
\n
\n
\n
${title}
\n \n
\n\n
\n
\n
${body}
\n
\n
\n\n \n \n
\n
\n
`;\n\n const existingModal = document.getElementById(selectors.errorModal);\n\n if (existingModal) {\n window.bs.Modal.getInstance(existingModal).show();\n } else {\n document.body.insertAdjacentHTML('beforeend', errorModalHtml);\n const modal = new window.bs.Modal(document.getElementById(selectors.errorModal));\n modal.show();\n window.addEventListener(CONST.events.popstate, () => {\n modal.hide();\n });\n }\n}\n\n/**\n * @public resetModalState\n * @param {HTMLElement} modal - A DOM modal element\n *\n * In case of a modal that has multiple steps\n * Loop over the steps to remove the active class\n * and add the active class to the first step\n */\nfunction resetModalState(modal) {\n [...modal.querySelectorAll(selectors.modalStep)].forEach((step, index) => {\n if (index === 0) {\n step.classList.add(CONST.classes.active);\n } else {\n step.classList.remove(CONST.classes.active);\n }\n });\n}\n\n/**\n * @public createModalByUrl\n * @param {string} targetId - The id of the target modal\n * @param {string} targetEndpoint - The url to call which should return the modal html\n * @returns {Promise} - Promise\n *\n * @description\n * Will create/show a modal based on a URL to a pipeline.\n * That pipeline should return a template with the modal HTML for more creative freedom\n */\nfunction createModalByUrl(targetId, targetEndpoint) {\n const modalId = `modal-${targetId}`;\n const existingModal = document.getElementById(modalId);\n\n if (existingModal) {\n return new Promise((resolve) => {\n resetModalState(existingModal);\n window.bs.Modal.getInstance(existingModal).show();\n resolve(existingModal);\n });\n }\n\n spinner.start();\n return fetch(targetEndpoint)\n .then((res) => {\n if (res.status === 500) throw new Error('Fetch failed');\n return res.text();\n })\n .then((response) => {\n document.body.insertAdjacentHTML('beforeend', response);\n\n const modalElement = document.getElementById(modalId);\n const modal = new window.bs.Modal(modalElement);\n\n new ModalClass(modal); // eslint-disable-line\n modal.show();\n document.dispatchEvent(new CustomEvent('custom_modal:shown'));\n return modalElement;\n })\n .catch((response) => {\n console.error('error', response);\n return response;\n })\n .finally(spinner.stop);\n}\n\n/**\n * @class ModalClass\n */\nclass ModalClass {\n constructor(modalInstance) {\n this.modal = modalInstance._element; // eslint-disable-line no-underscore-dangle\n this.modalActiveStep = this.modal.querySelector(`${selectors.modalStep}.${CONST.classes.active}`);\n this.modalFields = [...this.modal.querySelectorAll(selectors.modalStepInputs)];\n\n this.validateModalField = this.validateModalField.bind(this);\n this.submitStepForm = this.submitStepForm.bind(this);\n this.appendModalStep = this.appendModalStep.bind(this);\n\n this.modalFields.forEach((field) => {\n field.addEventListener(CONST.events.blur, (event) => {\n this.lastFocussedField = event.target;\n });\n\n field.addEventListener(CONST.events.keyUp, this.validateModalField);\n field.addEventListener(CONST.events.change, this.validateModalField);\n });\n\n this.modalActiveStep.addEventListener(CONST.events.submit, this.submitStepForm);\n\n const customEvent = new CustomEvent('modalLoaded', {\n detail: {\n modal: this.modal\n }\n });\n document.dispatchEvent(customEvent);\n }\n\n /**\n * @method validateModalField\n * @param {event} event - The submit event\n */\n validateModalField(event) {\n // If we're using tab, make sure to validate the previous field instead of the new field\n if (this.lastFocussedField && event.key && event.key.toLowerCase() === 'tab') {\n validateField(this.lastFocussedField);\n this.lastFocussedField = event.target;\n } else {\n const currField = event.target;\n this.lastFocussedField = currField;\n validateField(currField);\n }\n }\n\n /**\n * @method submitStepForm\n * @param {event} event - The submit event\n */\n submitStepForm(event) {\n event.preventDefault();\n const form = event.target;\n\n const validForm = validateForm(form);\n if (!validForm) {\n return;\n }\n\n const endpoint = form.getAttribute('action');\n const formData = new FormData(form);\n const csrfName = form && form.getAttribute(CONST.attributes.csrfName);\n const csrfToken = form && form.getAttribute(CONST.attributes.csrfToken);\n formData.append(csrfName, csrfToken);\n\n /* eslint-disable no-underscore-dangle */\n if (window._dd && window._dd.user && window._dd.user.ids && window._dd.user.ids.ga_id) {\n formData.append('gaId', window._dd.user.ids.ga_id);\n }\n /* eslint-enable no-underscore-dangle */\n\n spinner.start();\n\n fetch(endpoint, {\n method: 'POST',\n body: formData\n })\n .then((res) => res.text())\n .then(this.appendModalStep)\n .catch((error) => {\n console.error('submitStepForm error', error);\n })\n .finally(spinner.stop);\n }\n\n /**\n * @method scrollToTop\n */\n static scrollToTop() {\n const activeModal = document.querySelector(selectors.activeModal);\n const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;\n if (supportsNativeSmoothScroll) {\n activeModal.scrollTo({\n top: 0,\n left: 0,\n behavior: 'smooth'\n });\n } else {\n activeModal.scrollTop = 0;\n }\n }\n\n /**\n * @method appendModalStep\n * @param {string} response - The response containing the next step\n */\n appendModalStep(response) {\n const modalStepContainer = document.querySelector(`${selectors.activeModal} ${selectors.modalStepContainer}`);\n const currentStep = modalStepContainer.querySelector(`${selectors.modalStep}.${CONST.classes.active}`);\n\n currentStep.classList.remove(CONST.classes.active);\n modalStepContainer.insertAdjacentHTML('beforeend', response);\n\n const newStep = modalStepContainer.querySelector(`${selectors.modalStep}:last-child`);\n newStep.classList.add(CONST.classes.active);\n\n this.constructor.scrollToTop();\n\n const customEvent = new CustomEvent('modalStep', {\n detail: {\n currentStep: currentStep,\n newStep: newStep\n }\n });\n document.dispatchEvent(customEvent);\n }\n}\n\n/**\n * @function refreshToken\n * @description Calls an endpoint to execute authorization when the Business Scan contact me modals are opened - BO-1488.\n */\nfunction refreshToken() {\n const container = document.querySelector('[data-refresh-token-url]');\n const { refreshTokenUrl } = container.dataset;\n if (!refreshTokenUrl) return;\n\n const endpoint = appendCsrfToUrl(refreshTokenUrl);\n\n fetch(endpoint);\n}\n\nexport { showErrorModal, createModalByUrl, refreshToken };\n","if ('serviceWorker' in navigator) {\n window.addEventListener('load', () => {\n if (document.documentElement.dataset.serviceWorkerEnabled === 'true') {\n navigator.serviceWorker.register('/sw.js', { scope: '.' }).catch((e) => {\n console.error('Serviceworker - Registration failed with error '.concat(e));\n });\n } else {\n navigator.serviceWorker.getRegistrations().then((serviceWorkers) => {\n serviceWorkers.forEach((workerInstance) => {\n workerInstance.unregister();\n });\n });\n }\n });\n}\n","'use strict';\n\nconst computedStyles = getComputedStyle(document.documentElement);\n\n/**\n * @constant {Object} events - All common events\n * @property {string} blur - Blur event\n * @property {string} change - Change event\n * @property {string} click - Click event\n * @property {string} keyUp - Keyup event\n * @property {string} load - Load event\n * @property {string} mousedown - Mouse down event\n * @property {string} mouseleave - Mouse leave event\n * @property {string} mouseover - Mouse over event\n * @property {string} popstate - Popstate event\n * @property {string} resize - Resize event\n * @property {string} scroll - Scroll event\n * @property {string} submit - Submit event\n * @property {string} update - Custom update event\n */\nconst events = {\n blur: 'blur',\n change: 'change',\n click: 'click',\n input: 'input',\n keyUp: 'keyup',\n load: 'load',\n mousedown: 'mousedown',\n mouseleave: 'mouseleave',\n mouseover: 'mouseover',\n paste: 'paste',\n popstate: 'popstate',\n resize: 'resize',\n responseError: 'responseError',\n scroll: 'scroll',\n submit: 'submit',\n transitionEnd: 'transitionend',\n update: 'update',\n invalid: 'invalid'\n};\n\n/**\n * @constant {Object} selectors - Common selectors\n * @property {string} body - body\n * @property {Object} form - form related selectors\n * @property {string} checkbox - checkbox\n * @property {string} form - form\n * @property {string} input - input\n * @property {string} inputFieldClear - .js-input-clear\n * @property {string} inputFieldFeedback - .js-invalid-feedback\n * @property {string} label - label\n * @property {string} radio - radio\n * @property {string} select - select\n * @property {string} submit - [type=\"submit\"]\n * @property {string} textarea - textarea\n * @property {string} html - html\n * @property {string} htmlBody - html, body\n * @property {string} img - img\n * @property {string} input - input\n */\nconst selectors = {\n body: 'body',\n form: {\n checkbox: 'input[type=\"checkbox\"]',\n file: 'input[type=\"file\"]',\n form: 'form',\n input: 'input',\n inputFieldClear: '.js-input-clear',\n inputFieldFeedback: '.js-invalid-feedback',\n label: 'label',\n radio: 'input[type=\"radio\"]',\n select: 'select',\n submit: '[type=\"submit\"]',\n textarea: 'textarea'\n },\n html: 'html',\n htmlBody: 'html, body',\n img: 'img',\n input: 'input',\n interactiveElements: 'input, button, select, textarea, a[href]'\n};\n\n/**\n * @constant {Object} classes - Common classes\n * @property {string} active - active\n * @property {Object} buttons - buttons\n * @property {string} next - next\n * @property {string} previous - previous\n * @property {string} warning - warning\n * @property {string} dBlock - d-block\n * @property {string} dFlex - d-flex\n * @property {string} dInlineBlock - d-inline-block\n * @property {string} dNone - d-none\n * @property {string} disabled - disabled\n * @property {string} empty - empty\n * @property {string} inactive - inactive\n * @property {string} invalid - invalid\n * @property {string} hidden - hidden\n * @property {string} last - last\n * @property {string} show - show\n * @property {string} valid - valid\n */\nconst classes = {\n active: 'active',\n buttons: {\n next: 'js-button-next',\n previous: 'js-button-previous',\n warning: 'js-button-warning'\n },\n dBlock: 'd-block',\n dFlex: 'd-flex',\n dInlineBlock: 'd-inline-block',\n dNone: 'd-none',\n disabled: 'disabled',\n empty: 'empty',\n inactive: 'inactive',\n invalid: 'invalid',\n hidden: 'hidden',\n last: 'last',\n show: 'show',\n valid: 'valid'\n};\n\n/**\n * @constant {Object} attributes - Common attributes\n * @property {string} action - action\n * @property {string} class - class\n * @property {string} csrfToken - data-csrf-token\n * @property {string} csrfName - data-csrf-name\n * @property {string} disabled - disabled\n * @property {string} exclude - data-exclude\n * @property {string} href - href\n * @property {string} id - id\n * @property {string} pattern - pattern\n * @property {string} url - url\n * @property {string} readonly - readonly\n * @property {string} target - data-bs-target\n * @property {string} value - value\n * @property {Object} validation - Validation related attributes\n * @property {string} patternMismatch - data-pattern-mismatch\n * @property {string} valueMissing - data-missing-error\n */\nconst attributes = {\n action: 'action',\n class: 'class',\n checked: 'checked',\n csrfToken: 'data-csrf-token',\n csrfName: 'data-csrf-name',\n disabled: 'disabled',\n exclude: 'data-exclude',\n href: 'href',\n id: 'id',\n pattern: 'pattern',\n placeholder: 'placeholder',\n required: 'required',\n readonly: 'readonly',\n selected: 'selected',\n target: 'data-bs-target',\n url: 'url',\n value: 'value',\n validation: {\n patternMismatch: 'data-pattern-mismatch',\n valueMissing: 'data-missing-error',\n tooShort: 'data-too-short'\n }\n};\n\n/**\n * @constant {Object} breakpoints - Common reusable breakpoints\n * @property {string} xxs - 0\n * @property {string} xs - 368\n * @property {string} sm - 576\n * @property {string} md - 768\n * @property {string} lg - 992\n * @property {string} xl - 1200\n * @property {string} xxl - 1400\n */\n\nconst breakpoints = {\n xxs: parseInt(computedStyles.getPropertyValue('--breakpoint-xxs'), 10),\n xs: parseInt(computedStyles.getPropertyValue('--breakpoint-xs'), 10),\n sm: parseInt(computedStyles.getPropertyValue('--breakpoint-sm'), 10),\n md: parseInt(computedStyles.getPropertyValue('--breakpoint-md'), 10),\n lg: parseInt(computedStyles.getPropertyValue('--breakpoint-lg'), 10),\n xl: parseInt(computedStyles.getPropertyValue('--breakpoint-xl'), 10),\n xxl: parseInt(computedStyles.getPropertyValue('--breakpoint-xxl'), 10)\n};\n\n/**\n * @constant {Object} localStorage - constants for local storage items\n * @property {string} preferredLayoutId - preferredLayoutId\n */\nconst localStorage = {\n preferredLayoutId: 'preferredLayoutId'\n};\n\n/**\n * @constant {Object} bscanSteps - constants for Business Scan Steps\n * @property {string} ADVICE - The advice Step\n * @property {string} INTRO - The intro Step\n * @property {string} GROUPED_QUESTIONS - The grouped questions Step\n * @property {string} THANKYOU - The thank you Step\n */\nconst bscanSteps = {\n INTRO: 'intro',\n STATEMENTS_DONE: 'bs-statements-done',\n GROUPED_QUESTIONS: 'js-bscan-question-group',\n ADVICE: 'bs-advice',\n THANKYOU: 'bs-thank-you'\n};\n\n/**\n * @constant {Object} vzLayoutToggle - Attributes used for VZLayoutToggle\n * @property {string} class - data-layout-class\n * @property {string} container - data-layout-container\n * @property {string} enabledBreakpoint - data-layout-enabled-breakpoint\n * @property {string} id - data-layout-id\n * @property {string} idDefault - data-layout-id-default\n * @property {string} localStorageKey - data-layout-key\n */\nconst vzLayoutToggle = {\n class: 'data-layout-class',\n container: 'data-layout-container',\n enabledBreakpoint: 'data-layout-enabled-breakpoint',\n id: 'data-layout-id',\n idDefault: 'data-layout-id-default',\n localStorageKey: 'data-layout-key'\n};\n\nexport default {\n bscanSteps,\n attributes,\n breakpoints,\n classes,\n events,\n selectors,\n localStorage,\n vzLayoutToggle\n};\n","'use stict';\n\nimport 'core-js/features/array/at';\n\n/**\n * @private splitUpUrl\n * @param {string} url - The url to split up\n * @returns {Object} values\n *\n * @description\n * Will return an object with different parts of the url\n */\nexport function splitUpUrl(url) {\n if (!url.includes('?')) return {};\n\n let hash;\n let paramUrl = url.split('?').at(1);\n\n // if there is a hash at the end, store the hash\n if (paramUrl.includes('#')) {\n hash = paramUrl.split('#').at(1);\n paramUrl = paramUrl.split('#').at(0);\n }\n\n return {\n domain: url.split('?').at(0),\n params: paramUrl.split('&'),\n hash: hash\n };\n}\n\n/**\n * @public removeParamFromURL\n * @param {string} url - The url from which the parameter will be removed\n * @param {string} name - The name of the parameter that will be removed from url\n * @returns {string} url\n *\n * @description\n * remove the parameter and its value from the given url and returns the\n * changed url\n */\nexport function removeParamFromURL(url, name) {\n if (!url.includes('?') || !url.includes(`${name}=`)) return url;\n\n const urlValues = splitUpUrl(url);\n const newParams = urlValues.params.filter((param) => param.split('=').at(0) !== name);\n\n return `${urlValues.domain}?${newParams.join('&')}${urlValues.hash ? `#${urlValues.hash}` : ''}`;\n}\n\n/**\n * @public getParamFromURL\n * @param {string} url - The url from which the parameter will be retrieved\n * @param {string} name - The name of the parameter that will be retrieved from url\n * @returns {string} The value of the parameter\n *\n * @description\n * remove the parameter and its value from the given url and returns the\n * changed url\n */\nexport function getParamFromURL(url, name) {\n if (!url.includes('?') || !url.includes(`${name}=`)) return url;\n\n const urlValues = splitUpUrl(url);\n const nameMatch = urlValues.params.find((item) => item.includes(`${name}=`));\n\n return nameMatch && nameMatch.split('=').at(1);\n}\n\n/**\n * @public appendParamToURL\n * @param {string} url - The url to which the parameter will be added\n * @param {string} name - The name of the parameter\n * @param {string} value the value of the parameter\n * @returns {string} url\n *\n * @description\n * appends the parameter with the given name and value to the given url\n * and returns the changed url\n */\nexport function appendParamToURL(url, name, value) {\n let newURL = url;\n // remove if the param already exists\n if (url.includes(`${name}=`)) {\n newURL = removeParamFromURL(url, name);\n }\n const separator = newURL.includes('?') ? '&' : '?';\n return `${newURL}${separator}${name}=${encodeURIComponent(value)}`;\n}\n\n/**\n * @public appendCsrfToUrl\n * @description Takes a URL and adds a CSRF token to it\n * @param {string} url - The URL to append the CSRF token on\n * @returns {string} The URL with the CSRF token appended\n */\nexport function appendCsrfToUrl(url) {\n const separator = url.includes('?') ? '&' : '?';\n return `${url}${separator}${window.csrf.tokenName}=${window.csrf.token}`;\n}\n\n/**\n * @public removeHash\n * @description Will remove the hash from the url\n */\nexport function removeHash() {\n window.history.replaceState({}, document.title, window.location.pathname + window.location.search);\n}\n\nexport const getUrlFromAttributes = (url, component, excludedAttributes) => {\n const newUrl = new URL(url);\n const urlParams = newUrl.searchParams;\n\n // Get all attributeNames except for the irrelevant ones.\n const attributeNames = component.getAttributeNames().filter((attributeName) => !excludedAttributes.includes(attributeName));\n\n // Filter the attributeNames which will be replaced by the new URL.\n attributeNames\n .filter((param) => !urlParams.has(param.replaceAll('-', '')))\n .forEach((attr) => {\n const attrValue = component.getAttribute(attr);\n if (attrValue) {\n const attrName = attr.replaceAll('-', '');\n // Append all other attributes to the new URL\n urlParams.append(attrName, attrValue);\n }\n });\n\n return `${newUrl.origin}${newUrl.pathname}?${urlParams}`;\n};\n\n/**\n * This function checks if the provided element is a part of BM Hardware card. In case of true it appends\n * the 'editIndex' parameter to the URL with the index of the current BM Hardware card, in order to keep the\n * card open after Product-Variation ajax.\n *\n * @public appendBmHardwareCardIndex\n * @param {HTMLElement} element - The HTML element triggering the ajax.\n * @param {string} url - The URL to which the parameter will be appended.\n * @returns {string} The modified URL with the appended parameter.\n */\nexport function appendBmHardwareCardIndex(element, url) {\n let newURL = url;\n if (!element.closest('.js-hardware-device-card')?.classList.contains('is-collapsed') && element.closest('.js-hardware-phones')) {\n newURL = appendParamToURL(url, 'editIndex', element.closest('.js-hardware-phones').dataset.index);\n }\n return newURL;\n}\n","'use strict';\n\nimport CONST from './constants';\n\n/**\n * addEvent - Will add an event listener to an element inside a parent\n *\n * @param {string} parent - The parent element\n * @param {string} passedEvent - The event\n * @param {string} selector - The targeted element\n * @param {function} handler - The handler\n */\nfunction addEvent(parent, passedEvent, selector, handler) {\n parent.addEventListener(\n passedEvent,\n function fnAddEvent(event) {\n // If the clicked element matches the selector, or is a child of the selector\n if (event.target.matches(`${selector} , ${selector} *`)) {\n handler.apply(event.target.closest(selector), arguments);\n }\n },\n false\n );\n}\n\n/**\n * @public documentReady\n * @param {Function} fn - function to be called after document is done loading.\n */\nfunction documentReady(fn) {\n if (document.readyState !== 'loading') {\n fn();\n } else {\n document.addEventListener('DOMContentLoaded', fn);\n }\n}\n\n/**\n * @public exists\n * @param {*} selection - The element or nodelist to verify for existence\n * @returns {boolean} - Boolean value stating the existance of the selection\n * @description\n * Verifies existance of a certain element by checking for type, null and length\n * Usage: use with either querySelector() or querySelectorAll()\n * querySelector will not have a 'length', e.g. this would return true if other conditions are true\n * querySelectorAll will have a 'length', e.g. this would return true if all conditions are true\n */\nfunction exists(selection) {\n return typeof selection !== 'undefined' && selection !== null && ('length' in selection ? selection.length > 0 : true);\n}\n\n/**\n * @public getPosition\n * @param {*} element - The element to get the position for\n * @returns {Object} - An object containing the left and top position of the element\n *\n * @description\n * Will get the position of an element relative to the document\n */\nfunction getPosition(element) {\n let top = element.offsetTop;\n let left = element.offsetLeft;\n\n let currentElement = element;\n while (currentElement.offsetParent && currentElement.offsetParent !== window) {\n currentElement = currentElement.offsetParent;\n top += currentElement.offsetTop;\n left += currentElement.offsetLeft;\n }\n\n return { left, top };\n}\n\n/**\n * isKeyInObject\n * @param {Object} object - The object\n * @param {string} key - The key\n * @returns {boolean} - True or false\n */\nfunction isKeyInObject(object, key) {\n return Object.prototype.hasOwnProperty.call(object, key);\n}\n\n/**\n * @private isAemMobileView\n * @returns {boolean} - Whether the user is on a \"mobile\" viewport or not based on AEM rules\n *\n * @description\n * Checks to see whether the user is on a \"mobile\" viewport or not based on AEM rules\n * Please note that www.vodafone.nl/zakelijk will show the mobile menu from viewports 1023 and smaller\n */\nfunction isAemMobileView() {\n return window.innerWidth < 1024;\n}\n\n/**\n * @memberof util\n * @param {string} breakpointKey from constants that should match css breakpoint\n * @param {boolean} [isUp] by default is true since mobile first, reverses condition\n * @return {boolean} whether window is larger than specified breakpoint\n */\nfunction isMediaBreakpoint(breakpointKey, isUp = true) {\n if (!isKeyInObject(CONST.breakpoints, breakpointKey)) {\n console.error(`fn isMediaBreakpoint: ${breakpointKey} -- does not exist in constants breakpoints object`); // eslint-disable-line\n }\n\n const outerWidth = window.innerWidth;\n const breakpointValue = parseInt(CONST.breakpoints[breakpointKey], 10);\n\n return isUp ? outerWidth > breakpointValue : outerWidth < breakpointValue - 1;\n}\n\n/**\n * @memberof util\n * @return {Object} An object containing the name and value of the current breakpoint\n */\nfunction getCurrentBreakpoint() {\n const breakpoints = CONST.breakpoints;\n const screenSize = document.documentElement.clientWidth;\n const currentBreakpoint = [...Object.keys(breakpoints)].reverse().find((key) => screenSize > breakpoints[key]);\n\n return {\n name: currentBreakpoint,\n value: breakpoints[currentBreakpoint]\n };\n}\n\n/**\n * @memberof util\n * @return {number} a unique number\n */\nfunction generateUniqueNumber() {\n return performance.now().toString().replace('.', 0);\n}\n\n/**\n * @public empty\n * @param {*} element - The element to remove child nodes from\n * @description\n * Empties a given element completely while the given element has child nodes.\n * Plain strings are also considered child nodes and are thus also removed.\n */\nfunction removeChildNodes(element) {\n while (element.hasChildNodes()) {\n element.removeChild(element.lastChild);\n }\n}\n\n/**\n * @public tryParseJSON\n * @param {string} string - The possible JON string\n * @returns {Object} - Either the JSON object or an empty object for consistent return\n * @description\n * Copied from https://stackoverflow.com/a/20392392\n */\nfunction tryParseJSON(string) {\n try {\n const o = JSON.parse(string);\n\n // Handle non-exception-throwing cases:\n // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,\n // but... JSON.parse(null) returns null, and typeof null === \"object\",\n // so we must check for that, too. Thankfully, null is falsey, so this suffices:\n if (o && typeof o === 'object') {\n return o;\n }\n } catch (e) {} // eslint-disable-line no-empty\n\n return {};\n}\n\n/**\n * @function isIOS\n * @public\n * @description returns a boolean to determine whether a device's OS is IOS or not\n * @returns {boolean} whether the device OS is IOS or not\n */\nfunction isIOS() {\n return (/iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) && !window.MSStream;\n}\n\n/**\n * @function isMobile\n * @returns {boolean} whether the device is an mobile device or not\n */\nfunction isMobile() {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n}\n\n/**\n * @public scrollTo\n * @param {Object} data - The optional object containing the top & left positions to scroll to\n */\nfunction scrollTo(data) {\n const position = data || {\n top: 0,\n left: 0\n };\n\n const stickyHeader = document.querySelector('.page-header');\n const headerHeight = stickyHeader ? stickyHeader.offsetHeight : 0;\n const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;\n let positionTop = position.top;\n\n if (headerHeight > 0) {\n positionTop = position.top - headerHeight - 15; // Removing an additional 15px to put some space between the sticky site header and the element\n }\n\n if (supportsNativeSmoothScroll) {\n document.documentElement.scrollTo({\n top: positionTop,\n left: position.left,\n behavior: 'smooth'\n });\n } else {\n document.documentElement.scrollTop = positionTop;\n }\n}\n\n/**\n * @function toggleButtonState\n * @description Enables or disabled the button passed in based on the value of the second parameter.\n * @param {HTMLElement} button - A button element to be enabled or disabled.\n * @param {boolean} enable - True for enable and false for disable.\n */\nfunction toggleButtonState(button, enable) {\n if (enable) {\n button.classList.remove('disabled');\n button.removeAttribute('disabled');\n } else {\n button.classList.add('disabled');\n button.setAttribute('disabled', 'disabled');\n }\n}\n\n/**\n * @function removeAccentCharacters\n * @description Removes a accents from a string.\n * @param {string} string - The string from which we want to remove accents.\n * @returns {string} The string without accents.\n */\nfunction removeAccentCharacters(string) {\n return string.normalize('NFD').replace(/\\p{Diacritic}/gu, '');\n}\n\n/**\n * @function chunkArrayInGroups\n * @param {Array} arr - Array to be splitted\n * @param {number} size - Max size of the array chunk\n * @return {Array} - Array of grouped chunks\n * @description Splitting an array up into chunks of a given size\n */\nfunction chunkArrayInGroups(arr, size) {\n var groupedChunks = [];\n for (let i = 0; i < arr.length; i += size) {\n groupedChunks.push(arr.slice(i, i + size));\n }\n return groupedChunks;\n}\n\n/**\n * @function chunkGroupArrayInGroups\n * @param {Array} groupArr - Array to be splitted\n * @return {Array} - Array of grouped chunks\n * @description Splitting an array up into chunks of a given size\n */\nfunction chunkGroupArrayInGroups(groupArr) {\n // This one sorts and groups the alike product groups together\n // We need to send the requests to backend in a specific order, so we make it grouped\n const chunkGroups = [];\n Object.keys(groupArr).forEach((groupKey) => {\n const arr = groupArr[groupKey];\n const groupedChunks = [];\n // Sorts the product objects based on pids\n arr.sort((a, b) => {\n return a.pid >= b.pid ? 1 : -1;\n });\n for (let i = 0; i < arr.length; i += Math.round(arr.length / 3)) {\n groupedChunks.push(arr.slice(i, i + Math.round(arr.length / 3)));\n }\n // This makes sure that we have a separate business mobile group to send to backend\n groupedChunks.forEach((chunk, chunkIndex) => {\n Object.keys(chunk).forEach((key, index) => {\n const item = chunk[key];\n if (item?.pdpConfiguratorType === 'business-mobile') {\n chunk.splice(index, 1);\n if (chunk.length < 1) groupedChunks.splice(chunkIndex, 1);\n groupedChunks.push(item);\n }\n });\n });\n chunkGroups.push(groupedChunks);\n });\n return chunkGroups;\n}\n\n/**\n * @function trackPdpEccomerceEvent\n * @param {string} productType - Configurator type\n * @param {Object} step - Step to track\n * @description Builds and submits ecommerce event to track btn clicks on PDP\n */\nfunction trackPdpEccomerceEvent(productType, step) {\n const products = {\n brand: 'vodafone',\n category: `business-sme/acquisition/postpaid/${productType.replace(/\\s|business-/gi, '')}`,\n market: 'b2b'\n };\n\n const ecommerceObject = {\n event: 'checkout',\n events: {\n category: 'ecommerce',\n action: 'checkout'\n },\n ecommerce: {\n checkout: {\n action: 'checkout',\n has_vodafone: true,\n has_ziggo: true,\n products: products,\n step_name: step.name,\n step_nr: step.number\n }\n }\n };\n\n /* eslint-disable no-underscore-dangle */\n if (ecommerceObject && window._ddm) {\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push(ecommerceObject);\n window._ddm.trigger('ecommerce.checkout', {\n data: ecommerceObject.ecommerce.checkout\n });\n }\n /* eslint-enable no-underscore-dangle */\n}\n\n/**\n * @function assignStyling\n * @private\n * @param {Element} el - Element\n * @param {Object} styles - Styles\n * @description Assign a style object to an element\n */\nfunction assignStyling(el, styles) {\n Object.assign(el.style, styles);\n}\n\n/**\n * Calculate the total width of a collection of elements.\n *\n * @param {NodeListOf} elements - A collection of HTML elements.\n * @param {number} spacing - flex gap value in px.\n * @returns {number} The total width of all elements.\n */\nfunction getTotalWidth(elements, spacing = 0) {\n return Array.from(elements).reduce((totalWidth, element) => {\n const elementStyles = window.getComputedStyle(element);\n const elementWidth = element.offsetWidth + parseFloat(elementStyles.marginLeft) + parseFloat(elementStyles.marginRight);\n return totalWidth + elementWidth;\n }, spacing);\n}\n\n/**\n * Checks if a flex container is wrapped by comparing the total width of its flex items\n * with the container's width.\n *\n * @param {HTMLElement} flexContainer - The HTML element representing the flex container.\n * @param {NodeListOf} flexItems - A collection of HTML elements representing the flex items.\n * @param {number} spacing - flex gap value in px.\n * @returns {boolean} True if the flex container is wrapped, false if all items fit in a single row.\n */\nfunction isFlexContainerWrapped(flexContainer, flexItems, spacing) {\n const containerWidth = flexContainer.clientWidth;\n const itemsTotalWidth = getTotalWidth(flexItems, spacing);\n // Check if the items are wrapped by comparing their total width with the container width.\n const isWrapped = itemsTotalWidth > containerWidth;\n return isWrapped;\n}\n\n/**\n * @function loadCSS\n * @param {string} url - The URL of the CSS file to load.\n * @description Creates a link element and appends it to the document head to load a CSS file.\n */\nfunction loadCSS(url) {\n if (!url || document.querySelector(`link[href=\"${url}\"]`)) {\n return;\n }\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = url;\n document.head.appendChild(link);\n}\n\n/**\n * The function formats input to money string\n *\n * @param {number} num Source number\n * @returns {string} Formatted string € 1.111,11\n */\nfunction formatToPriceString(num) {\n const parts = Number.parseFloat(num, 10).toFixed(2).toString().split('.');\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, '.');\n if (parts[1] === '00') {\n return `€ ${parts[0]},00`;\n }\n return `€ ${parts.join(',')}`;\n}\n\n/**\n * Checks if two arrays of objects are equal by comparing their elements.\n *\n * @param {Array} arr1 - The first array to compare.\n * @param {Array} arr2 - The second array to compare.\n * @returns {boolean} True if the arrays are equal, false otherwise.\n */\nfunction arraysAreEqual(arr1, arr2) {\n if (arr1.length !== arr2.length) {\n return false;\n }\n\n return (\n !arr1.some((obj1) => !arr2.some((obj2) => JSON.stringify(obj1) === JSON.stringify(obj2))) &&\n !arr2.some((obj2) => !arr1.some((obj1) => JSON.stringify(obj1) === JSON.stringify(obj2)))\n );\n}\n\nexport {\n CONST,\n addEvent,\n documentReady,\n exists,\n generateUniqueNumber,\n getCurrentBreakpoint,\n getPosition,\n isIOS,\n isMobile,\n isKeyInObject,\n isAemMobileView,\n isMediaBreakpoint,\n removeChildNodes,\n scrollTo,\n tryParseJSON,\n toggleButtonState,\n removeAccentCharacters,\n chunkArrayInGroups,\n chunkGroupArrayInGroups,\n trackPdpEccomerceEvent,\n assignStyling,\n isFlexContainerWrapped,\n getTotalWidth,\n loadCSS,\n formatToPriceString,\n arraysAreEqual\n};\n","'use strict';\n\nimport { CONST } from 'Util/util';\nimport { getFieldValidationMessage } from 'Components/form/form';\n\nconst validationAttributes = ['valueMissing', 'patternMismatch', 'tooShort'];\n\n/**\n * toggleValidityClass\n * @param {boolean} [isValid] - valid or not - true or false\n * @param {HTMLElement} [target] - target element\n */\nfunction toggleValidityClass(isValid, target) {\n if (isValid) {\n target.classList.remove('invalid');\n target.classList.add('valid');\n } else {\n target.classList.add('invalid');\n target.classList.remove('valid');\n }\n}\n\n/**\n * removeValidationMessageElement\n * @param {HTMLElement} [target] - target element\n */\nfunction removeValidationMessageElement(target) {\n const element = target.parentElement.querySelector('.error-msg');\n if (element) element.remove();\n}\n\n/**\n * createValidationMessageElement\n * @param {string} [message] - validation message\n * @param {HTMLElement} [target] - target element\n */\nfunction createValidationMessageElement(message, target) {\n const element =\n target.parentElement.querySelector('.error-msg') ||\n (function createErrorElement() {\n const el = document.createElement('small');\n el.classList.add('error-msg', 'text-primary');\n return el;\n })();\n element.innerText = message;\n if (target.dataset.selectedId && target.dataset.selectedId.includes('verblijfsdocument')) element.classList.add('d-inline-flex');\n target.parentElement.insertAdjacentElement('beforeend', element);\n}\n\n/**\n * @public validateField\n * @param {HTMLFormElement} field - The form field\n * @return {boolean} valid - Whether the field is valid or not\n */\nfunction validateField(field) {\n let validField = true;\n\n validationAttributes.forEach((attribute) => {\n if (field.validity && field.validity[attribute]) {\n const errorMessage = field.getAttribute(CONST.attributes.validation[attribute]);\n validField = false;\n createValidationMessageElement(errorMessage, field);\n toggleValidityClass(false, field);\n }\n });\n\n if (validField) {\n removeValidationMessageElement(field);\n toggleValidityClass(true, field);\n }\n\n return validField;\n}\n\n/**\n * @public validateForm\n * @param {HTMLForm} form - The form\n * @return {boolean} valid - Whether the form is valid or not\n */\nfunction validateForm(form) {\n let validForm = true;\n const formFields = [...form.querySelectorAll(CONST.selectors.form.input), ...form.querySelectorAll(CONST.selectors.form.textarea)];\n const dropdowns = [...form.querySelectorAll('.js-custom-select-validation')];\n\n formFields.forEach((field) => {\n if (field.type === 'hidden') {\n return;\n }\n\n const validField = validateField(field);\n\n if (!validField) {\n validForm = false;\n }\n });\n\n dropdowns.forEach((dropdown) => {\n const validField = dropdown.checkValidity();\n\n if (!validField) {\n validForm = false;\n }\n });\n\n return validForm;\n}\n\n/**\n * @private validate\n * @param {Event} evt - blur or invalid event\n * @param {string} [msg] - validation message\n */\nfunction validate(evt, msg) {\n const message = msg || getFieldValidationMessage(evt.target);\n if (message) {\n createValidationMessageElement(message, evt.target);\n toggleValidityClass(false, evt.target);\n } else {\n removeValidationMessageElement(evt.target);\n toggleValidityClass(true, evt.target);\n }\n}\n\nexport { validateForm, validateField, validate, removeValidationMessageElement, toggleValidityClass };\n","// Polyfill for creating CustomEvents on IE9/10/11\n\n// code pulled from:\n// https://github.com/d4tocchini/customevent-polyfill\n// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#Polyfill\n\n(function() {\n if (typeof window === 'undefined') {\n return;\n }\n\n try {\n var ce = new window.CustomEvent('test', { cancelable: true });\n ce.preventDefault();\n if (ce.defaultPrevented !== true) {\n // IE has problems with .preventDefault() on custom events\n // http://stackoverflow.com/questions/23349191\n throw new Error('Could not prevent default');\n }\n } catch (e) {\n var CustomEvent = function(event, params) {\n var evt, origPrevent;\n params = params || {};\n params.bubbles = !!params.bubbles;\n params.cancelable = !!params.cancelable;\n\n evt = document.createEvent('CustomEvent');\n evt.initCustomEvent(\n event,\n params.bubbles,\n params.cancelable,\n params.detail\n );\n origPrevent = evt.preventDefault;\n evt.preventDefault = function() {\n origPrevent.call(this);\n try {\n Object.defineProperty(this, 'defaultPrevented', {\n get: function() {\n return true;\n }\n });\n } catch (e) {\n this.defaultPrevented = true;\n }\n };\n return evt;\n };\n\n CustomEvent.prototype = window.Event.prototype;\n window.CustomEvent = CustomEvent; // expose definition to window\n }\n})();\n","(function(window, factory) {\n\tvar lazySizes = factory(window, window.document, Date);\n\twindow.lazySizes = lazySizes;\n\tif(typeof module == 'object' && module.exports){\n\t\tmodule.exports = lazySizes;\n\t}\n}(typeof window != 'undefined' ?\n window : {}, \n/**\n * import(\"./types/global\")\n * @typedef { import(\"./types/lazysizes-config\").LazySizesConfigPartial } LazySizesConfigPartial\n */\nfunction l(window, document, Date) { // Pass in the window Date function also for SSR because the Date class can be lost\n\t'use strict';\n\t/*jshint eqnull:true */\n\n\tvar lazysizes,\n\t\t/**\n\t\t * @type { LazySizesConfigPartial }\n\t\t */\n\t\tlazySizesCfg;\n\n\t(function(){\n\t\tvar prop;\n\n\t\tvar lazySizesDefaults = {\n\t\t\tlazyClass: 'lazyload',\n\t\t\tloadedClass: 'lazyloaded',\n\t\t\tloadingClass: 'lazyloading',\n\t\t\tpreloadClass: 'lazypreload',\n\t\t\terrorClass: 'lazyerror',\n\t\t\t//strictClass: 'lazystrict',\n\t\t\tautosizesClass: 'lazyautosizes',\n\t\t\tfastLoadedClass: 'ls-is-cached',\n\t\t\tiframeLoadMode: 0,\n\t\t\tsrcAttr: 'data-src',\n\t\t\tsrcsetAttr: 'data-srcset',\n\t\t\tsizesAttr: 'data-sizes',\n\t\t\t//preloadAfterLoad: false,\n\t\t\tminSize: 40,\n\t\t\tcustomMedia: {},\n\t\t\tinit: true,\n\t\t\texpFactor: 1.5,\n\t\t\thFac: 0.8,\n\t\t\tloadMode: 2,\n\t\t\tloadHidden: true,\n\t\t\tricTimeout: 0,\n\t\t\tthrottleDelay: 125,\n\t\t};\n\n\t\tlazySizesCfg = window.lazySizesConfig || window.lazysizesConfig || {};\n\n\t\tfor(prop in lazySizesDefaults){\n\t\t\tif(!(prop in lazySizesCfg)){\n\t\t\t\tlazySizesCfg[prop] = lazySizesDefaults[prop];\n\t\t\t}\n\t\t}\n\t})();\n\n\tif (!document || !document.getElementsByClassName) {\n\t\treturn {\n\t\t\tinit: function () {},\n\t\t\t/**\n\t\t\t * @type { LazySizesConfigPartial }\n\t\t\t */\n\t\t\tcfg: lazySizesCfg,\n\t\t\t/**\n\t\t\t * @type { true }\n\t\t\t */\n\t\t\tnoSupport: true,\n\t\t};\n\t}\n\n\tvar docElem = document.documentElement;\n\n\tvar supportPicture = window.HTMLPictureElement;\n\n\tvar _addEventListener = 'addEventListener';\n\n\tvar _getAttribute = 'getAttribute';\n\n\t/**\n\t * Update to bind to window because 'this' becomes null during SSR\n\t * builds.\n\t */\n\tvar addEventListener = window[_addEventListener].bind(window);\n\n\tvar setTimeout = window.setTimeout;\n\n\tvar requestAnimationFrame = window.requestAnimationFrame || setTimeout;\n\n\tvar requestIdleCallback = window.requestIdleCallback;\n\n\tvar regPicture = /^picture$/i;\n\n\tvar loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded'];\n\n\tvar regClassCache = {};\n\n\tvar forEach = Array.prototype.forEach;\n\n\t/**\n\t * @param ele {Element}\n\t * @param cls {string}\n\t */\n\tvar hasClass = function(ele, cls) {\n\t\tif(!regClassCache[cls]){\n\t\t\tregClassCache[cls] = new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)');\n\t\t}\n\t\treturn regClassCache[cls].test(ele[_getAttribute]('class') || '') && regClassCache[cls];\n\t};\n\n\t/**\n\t * @param ele {Element}\n\t * @param cls {string}\n\t */\n\tvar addClass = function(ele, cls) {\n\t\tif (!hasClass(ele, cls)){\n\t\t\tele.setAttribute('class', (ele[_getAttribute]('class') || '').trim() + ' ' + cls);\n\t\t}\n\t};\n\n\t/**\n\t * @param ele {Element}\n\t * @param cls {string}\n\t */\n\tvar removeClass = function(ele, cls) {\n\t\tvar reg;\n\t\tif ((reg = hasClass(ele,cls))) {\n\t\t\tele.setAttribute('class', (ele[_getAttribute]('class') || '').replace(reg, ' '));\n\t\t}\n\t};\n\n\tvar addRemoveLoadEvents = function(dom, fn, add){\n\t\tvar action = add ? _addEventListener : 'removeEventListener';\n\t\tif(add){\n\t\t\taddRemoveLoadEvents(dom, fn);\n\t\t}\n\t\tloadEvents.forEach(function(evt){\n\t\t\tdom[action](evt, fn);\n\t\t});\n\t};\n\n\t/**\n\t * @param elem { Element }\n\t * @param name { string }\n\t * @param detail { any }\n\t * @param noBubbles { boolean }\n\t * @param noCancelable { boolean }\n\t * @returns { CustomEvent }\n\t */\n\tvar triggerEvent = function(elem, name, detail, noBubbles, noCancelable){\n\t\tvar event = document.createEvent('Event');\n\n\t\tif(!detail){\n\t\t\tdetail = {};\n\t\t}\n\n\t\tdetail.instance = lazysizes;\n\n\t\tevent.initEvent(name, !noBubbles, !noCancelable);\n\n\t\tevent.detail = detail;\n\n\t\telem.dispatchEvent(event);\n\t\treturn event;\n\t};\n\n\tvar updatePolyfill = function (el, full){\n\t\tvar polyfill;\n\t\tif( !supportPicture && ( polyfill = (window.picturefill || lazySizesCfg.pf) ) ){\n\t\t\tif(full && full.src && !el[_getAttribute]('srcset')){\n\t\t\t\tel.setAttribute('srcset', full.src);\n\t\t\t}\n\t\t\tpolyfill({reevaluate: true, elements: [el]});\n\t\t} else if(full && full.src){\n\t\t\tel.src = full.src;\n\t\t}\n\t};\n\n\tvar getCSS = function (elem, style){\n\t\treturn (getComputedStyle(elem, null) || {})[style];\n\t};\n\n\t/**\n\t *\n\t * @param elem { Element }\n\t * @param parent { Element }\n\t * @param [width] {number}\n\t * @returns {number}\n\t */\n\tvar getWidth = function(elem, parent, width){\n\t\twidth = width || elem.offsetWidth;\n\n\t\twhile(width < lazySizesCfg.minSize && parent && !elem._lazysizesWidth){\n\t\t\twidth = parent.offsetWidth;\n\t\t\tparent = parent.parentNode;\n\t\t}\n\n\t\treturn width;\n\t};\n\n\tvar rAF = (function(){\n\t\tvar running, waiting;\n\t\tvar firstFns = [];\n\t\tvar secondFns = [];\n\t\tvar fns = firstFns;\n\n\t\tvar run = function(){\n\t\t\tvar runFns = fns;\n\n\t\t\tfns = firstFns.length ? secondFns : firstFns;\n\n\t\t\trunning = true;\n\t\t\twaiting = false;\n\n\t\t\twhile(runFns.length){\n\t\t\t\trunFns.shift()();\n\t\t\t}\n\n\t\t\trunning = false;\n\t\t};\n\n\t\tvar rafBatch = function(fn, queue){\n\t\t\tif(running && !queue){\n\t\t\t\tfn.apply(this, arguments);\n\t\t\t} else {\n\t\t\t\tfns.push(fn);\n\n\t\t\t\tif(!waiting){\n\t\t\t\t\twaiting = true;\n\t\t\t\t\t(document.hidden ? setTimeout : requestAnimationFrame)(run);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\trafBatch._lsFlush = run;\n\n\t\treturn rafBatch;\n\t})();\n\n\tvar rAFIt = function(fn, simple){\n\t\treturn simple ?\n\t\t\tfunction() {\n\t\t\t\trAF(fn);\n\t\t\t} :\n\t\t\tfunction(){\n\t\t\t\tvar that = this;\n\t\t\t\tvar args = arguments;\n\t\t\t\trAF(function(){\n\t\t\t\t\tfn.apply(that, args);\n\t\t\t\t});\n\t\t\t}\n\t\t;\n\t};\n\n\tvar throttle = function(fn){\n\t\tvar running;\n\t\tvar lastTime = 0;\n\t\tvar gDelay = lazySizesCfg.throttleDelay;\n\t\tvar rICTimeout = lazySizesCfg.ricTimeout;\n\t\tvar run = function(){\n\t\t\trunning = false;\n\t\t\tlastTime = Date.now();\n\t\t\tfn();\n\t\t};\n\t\tvar idleCallback = requestIdleCallback && rICTimeout > 49 ?\n\t\t\tfunction(){\n\t\t\t\trequestIdleCallback(run, {timeout: rICTimeout});\n\n\t\t\t\tif(rICTimeout !== lazySizesCfg.ricTimeout){\n\t\t\t\t\trICTimeout = lazySizesCfg.ricTimeout;\n\t\t\t\t}\n\t\t\t} :\n\t\t\trAFIt(function(){\n\t\t\t\tsetTimeout(run);\n\t\t\t}, true)\n\t\t;\n\n\t\treturn function(isPriority){\n\t\t\tvar delay;\n\n\t\t\tif((isPriority = isPriority === true)){\n\t\t\t\trICTimeout = 33;\n\t\t\t}\n\n\t\t\tif(running){\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\trunning = true;\n\n\t\t\tdelay = gDelay - (Date.now() - lastTime);\n\n\t\t\tif(delay < 0){\n\t\t\t\tdelay = 0;\n\t\t\t}\n\n\t\t\tif(isPriority || delay < 9){\n\t\t\t\tidleCallback();\n\t\t\t} else {\n\t\t\t\tsetTimeout(idleCallback, delay);\n\t\t\t}\n\t\t};\n\t};\n\n\t//based on http://modernjavascript.blogspot.de/2013/08/building-better-debounce.html\n\tvar debounce = function(func) {\n\t\tvar timeout, timestamp;\n\t\tvar wait = 99;\n\t\tvar run = function(){\n\t\t\ttimeout = null;\n\t\t\tfunc();\n\t\t};\n\t\tvar later = function() {\n\t\t\tvar last = Date.now() - timestamp;\n\n\t\t\tif (last < wait) {\n\t\t\t\tsetTimeout(later, wait - last);\n\t\t\t} else {\n\t\t\t\t(requestIdleCallback || run)(run);\n\t\t\t}\n\t\t};\n\n\t\treturn function() {\n\t\t\ttimestamp = Date.now();\n\n\t\t\tif (!timeout) {\n\t\t\t\ttimeout = setTimeout(later, wait);\n\t\t\t}\n\t\t};\n\t};\n\n\tvar loader = (function(){\n\t\tvar preloadElems, isCompleted, resetPreloadingTimer, loadMode, started;\n\n\t\tvar eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden;\n\n\t\tvar regImg = /^img$/i;\n\t\tvar regIframe = /^iframe$/i;\n\n\t\tvar supportScroll = ('onscroll' in window) && !(/(gle|ing)bot/.test(navigator.userAgent));\n\n\t\tvar shrinkExpand = 0;\n\t\tvar currentExpand = 0;\n\n\t\tvar isLoading = 0;\n\t\tvar lowRuns = -1;\n\n\t\tvar resetPreloading = function(e){\n\t\t\tisLoading--;\n\t\t\tif(!e || isLoading < 0 || !e.target){\n\t\t\t\tisLoading = 0;\n\t\t\t}\n\t\t};\n\n\t\tvar isVisible = function (elem) {\n\t\t\tif (isBodyHidden == null) {\n\t\t\t\tisBodyHidden = getCSS(document.body, 'visibility') == 'hidden';\n\t\t\t}\n\n\t\t\treturn isBodyHidden || !(getCSS(elem.parentNode, 'visibility') == 'hidden' && getCSS(elem, 'visibility') == 'hidden');\n\t\t};\n\n\t\tvar isNestedVisible = function(elem, elemExpand){\n\t\t\tvar outerRect;\n\t\t\tvar parent = elem;\n\t\t\tvar visible = isVisible(elem);\n\n\t\t\teLtop -= elemExpand;\n\t\t\teLbottom += elemExpand;\n\t\t\teLleft -= elemExpand;\n\t\t\teLright += elemExpand;\n\n\t\t\twhile(visible && (parent = parent.offsetParent) && parent != document.body && parent != docElem){\n\t\t\t\tvisible = ((getCSS(parent, 'opacity') || 1) > 0);\n\n\t\t\t\tif(visible && getCSS(parent, 'overflow') != 'visible'){\n\t\t\t\t\touterRect = parent.getBoundingClientRect();\n\t\t\t\t\tvisible = eLright > outerRect.left &&\n\t\t\t\t\t\teLleft < outerRect.right &&\n\t\t\t\t\t\teLbottom > outerRect.top - 1 &&\n\t\t\t\t\t\teLtop < outerRect.bottom + 1\n\t\t\t\t\t;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn visible;\n\t\t};\n\n\t\tvar checkElements = function() {\n\t\t\tvar eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal,\n\t\t\t\tbeforeExpandVal, defaultExpand, preloadExpand, hFac;\n\t\t\tvar lazyloadElems = lazysizes.elements;\n\n\t\t\tif((loadMode = lazySizesCfg.loadMode) && isLoading < 8 && (eLlen = lazyloadElems.length)){\n\n\t\t\t\ti = 0;\n\n\t\t\t\tlowRuns++;\n\n\t\t\t\tfor(; i < eLlen; i++){\n\n\t\t\t\t\tif(!lazyloadElems[i] || lazyloadElems[i]._lazyRace){continue;}\n\n\t\t\t\t\tif(!supportScroll || (lazysizes.prematureUnveil && lazysizes.prematureUnveil(lazyloadElems[i]))){unveilElement(lazyloadElems[i]);continue;}\n\n\t\t\t\t\tif(!(elemExpandVal = lazyloadElems[i][_getAttribute]('data-expand')) || !(elemExpand = elemExpandVal * 1)){\n\t\t\t\t\t\telemExpand = currentExpand;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (!defaultExpand) {\n\t\t\t\t\t\tdefaultExpand = (!lazySizesCfg.expand || lazySizesCfg.expand < 1) ?\n\t\t\t\t\t\t\tdocElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370 :\n\t\t\t\t\t\t\tlazySizesCfg.expand;\n\n\t\t\t\t\t\tlazysizes._defEx = defaultExpand;\n\n\t\t\t\t\t\tpreloadExpand = defaultExpand * lazySizesCfg.expFactor;\n\t\t\t\t\t\thFac = lazySizesCfg.hFac;\n\t\t\t\t\t\tisBodyHidden = null;\n\n\t\t\t\t\t\tif(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden){\n\t\t\t\t\t\t\tcurrentExpand = preloadExpand;\n\t\t\t\t\t\t\tlowRuns = 0;\n\t\t\t\t\t\t} else if(loadMode > 1 && lowRuns > 1 && isLoading < 6){\n\t\t\t\t\t\t\tcurrentExpand = defaultExpand;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tcurrentExpand = shrinkExpand;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif(beforeExpandVal !== elemExpand){\n\t\t\t\t\t\teLvW = innerWidth + (elemExpand * hFac);\n\t\t\t\t\t\telvH = innerHeight + elemExpand;\n\t\t\t\t\t\telemNegativeExpand = elemExpand * -1;\n\t\t\t\t\t\tbeforeExpandVal = elemExpand;\n\t\t\t\t\t}\n\n\t\t\t\t\trect = lazyloadElems[i].getBoundingClientRect();\n\n\t\t\t\t\tif ((eLbottom = rect.bottom) >= elemNegativeExpand &&\n\t\t\t\t\t\t(eLtop = rect.top) <= elvH &&\n\t\t\t\t\t\t(eLright = rect.right) >= elemNegativeExpand * hFac &&\n\t\t\t\t\t\t(eLleft = rect.left) <= eLvW &&\n\t\t\t\t\t\t(eLbottom || eLright || eLleft || eLtop) &&\n\t\t\t\t\t\t(lazySizesCfg.loadHidden || isVisible(lazyloadElems[i])) &&\n\t\t\t\t\t\t((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){\n\t\t\t\t\t\tunveilElement(lazyloadElems[i]);\n\t\t\t\t\t\tloadedSomething = true;\n\t\t\t\t\t\tif(isLoading > 9){break;}\n\t\t\t\t\t} else if(!loadedSomething && isCompleted && !autoLoadElem &&\n\t\t\t\t\t\tisLoading < 4 && lowRuns < 4 && loadMode > 2 &&\n\t\t\t\t\t\t(preloadElems[0] || lazySizesCfg.preloadAfterLoad) &&\n\t\t\t\t\t\t(preloadElems[0] || (!elemExpandVal && ((eLbottom || eLright || eLleft || eLtop) || lazyloadElems[i][_getAttribute](lazySizesCfg.sizesAttr) != 'auto')))){\n\t\t\t\t\t\tautoLoadElem = preloadElems[0] || lazyloadElems[i];\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif(autoLoadElem && !loadedSomething){\n\t\t\t\t\tunveilElement(autoLoadElem);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tvar throttledCheckElements = throttle(checkElements);\n\n\t\tvar switchLoadingClass = function(e){\n\t\t\tvar elem = e.target;\n\n\t\t\tif (elem._lazyCache) {\n\t\t\t\tdelete elem._lazyCache;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tresetPreloading(e);\n\t\t\taddClass(elem, lazySizesCfg.loadedClass);\n\t\t\tremoveClass(elem, lazySizesCfg.loadingClass);\n\t\t\taddRemoveLoadEvents(elem, rafSwitchLoadingClass);\n\t\t\ttriggerEvent(elem, 'lazyloaded');\n\t\t};\n\t\tvar rafedSwitchLoadingClass = rAFIt(switchLoadingClass);\n\t\tvar rafSwitchLoadingClass = function(e){\n\t\t\trafedSwitchLoadingClass({target: e.target});\n\t\t};\n\n\t\tvar changeIframeSrc = function(elem, src){\n\t\t\tvar loadMode = elem.getAttribute('data-load-mode') || lazySizesCfg.iframeLoadMode;\n\n\t\t\t// loadMode can be also a string!\n\t\t\tif (loadMode == 0) {\n\t\t\t\telem.contentWindow.location.replace(src);\n\t\t\t} else if (loadMode == 1) {\n\t\t\t\telem.src = src;\n\t\t\t}\n\t\t};\n\n\t\tvar handleSources = function(source){\n\t\t\tvar customMedia;\n\n\t\t\tvar sourceSrcset = source[_getAttribute](lazySizesCfg.srcsetAttr);\n\n\t\t\tif( (customMedia = lazySizesCfg.customMedia[source[_getAttribute]('data-media') || source[_getAttribute]('media')]) ){\n\t\t\t\tsource.setAttribute('media', customMedia);\n\t\t\t}\n\n\t\t\tif(sourceSrcset){\n\t\t\t\tsource.setAttribute('srcset', sourceSrcset);\n\t\t\t}\n\t\t};\n\n\t\tvar lazyUnveil = rAFIt(function (elem, detail, isAuto, sizes, isImg){\n\t\t\tvar src, srcset, parent, isPicture, event, firesLoad;\n\n\t\t\tif(!(event = triggerEvent(elem, 'lazybeforeunveil', detail)).defaultPrevented){\n\n\t\t\t\tif(sizes){\n\t\t\t\t\tif(isAuto){\n\t\t\t\t\t\taddClass(elem, lazySizesCfg.autosizesClass);\n\t\t\t\t\t} else {\n\t\t\t\t\t\telem.setAttribute('sizes', sizes);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsrcset = elem[_getAttribute](lazySizesCfg.srcsetAttr);\n\t\t\t\tsrc = elem[_getAttribute](lazySizesCfg.srcAttr);\n\n\t\t\t\tif(isImg) {\n\t\t\t\t\tparent = elem.parentNode;\n\t\t\t\t\tisPicture = parent && regPicture.test(parent.nodeName || '');\n\t\t\t\t}\n\n\t\t\t\tfiresLoad = detail.firesLoad || (('src' in elem) && (srcset || src || isPicture));\n\n\t\t\t\tevent = {target: elem};\n\n\t\t\t\taddClass(elem, lazySizesCfg.loadingClass);\n\n\t\t\t\tif(firesLoad){\n\t\t\t\t\tclearTimeout(resetPreloadingTimer);\n\t\t\t\t\tresetPreloadingTimer = setTimeout(resetPreloading, 2500);\n\t\t\t\t\taddRemoveLoadEvents(elem, rafSwitchLoadingClass, true);\n\t\t\t\t}\n\n\t\t\t\tif(isPicture){\n\t\t\t\t\tforEach.call(parent.getElementsByTagName('source'), handleSources);\n\t\t\t\t}\n\n\t\t\t\tif(srcset){\n\t\t\t\t\telem.setAttribute('srcset', srcset);\n\t\t\t\t} else if(src && !isPicture){\n\t\t\t\t\tif(regIframe.test(elem.nodeName)){\n\t\t\t\t\t\tchangeIframeSrc(elem, src);\n\t\t\t\t\t} else {\n\t\t\t\t\t\telem.src = src;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif(isImg && (srcset || isPicture)){\n\t\t\t\t\tupdatePolyfill(elem, {src: src});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif(elem._lazyRace){\n\t\t\t\tdelete elem._lazyRace;\n\t\t\t}\n\t\t\tremoveClass(elem, lazySizesCfg.lazyClass);\n\n\t\t\trAF(function(){\n\t\t\t\t// Part of this can be removed as soon as this fix is older: https://bugs.chromium.org/p/chromium/issues/detail?id=7731 (2015)\n\t\t\t\tvar isLoaded = elem.complete && elem.naturalWidth > 1;\n\n\t\t\t\tif( !firesLoad || isLoaded){\n\t\t\t\t\tif (isLoaded) {\n\t\t\t\t\t\taddClass(elem, lazySizesCfg.fastLoadedClass);\n\t\t\t\t\t}\n\t\t\t\t\tswitchLoadingClass(event);\n\t\t\t\t\telem._lazyCache = true;\n\t\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t\tif ('_lazyCache' in elem) {\n\t\t\t\t\t\t\tdelete elem._lazyCache;\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 9);\n\t\t\t\t}\n\t\t\t\tif (elem.loading == 'lazy') {\n\t\t\t\t\tisLoading--;\n\t\t\t\t}\n\t\t\t}, true);\n\t\t});\n\n\t\t/**\n\t\t *\n\t\t * @param elem { Element }\n\t\t */\n\t\tvar unveilElement = function (elem){\n\t\t\tif (elem._lazyRace) {return;}\n\t\t\tvar detail;\n\n\t\t\tvar isImg = regImg.test(elem.nodeName);\n\n\t\t\t//allow using sizes=\"auto\", but don't use. it's invalid. Use data-sizes=\"auto\" or a valid value for sizes instead (i.e.: sizes=\"80vw\")\n\t\t\tvar sizes = isImg && (elem[_getAttribute](lazySizesCfg.sizesAttr) || elem[_getAttribute]('sizes'));\n\t\t\tvar isAuto = sizes == 'auto';\n\n\t\t\tif( (isAuto || !isCompleted) && isImg && (elem[_getAttribute]('src') || elem.srcset) && !elem.complete && !hasClass(elem, lazySizesCfg.errorClass) && hasClass(elem, lazySizesCfg.lazyClass)){return;}\n\n\t\t\tdetail = triggerEvent(elem, 'lazyunveilread').detail;\n\n\t\t\tif(isAuto){\n\t\t\t\t autoSizer.updateElem(elem, true, elem.offsetWidth);\n\t\t\t}\n\n\t\t\telem._lazyRace = true;\n\t\t\tisLoading++;\n\n\t\t\tlazyUnveil(elem, detail, isAuto, sizes, isImg);\n\t\t};\n\n\t\tvar afterScroll = debounce(function(){\n\t\t\tlazySizesCfg.loadMode = 3;\n\t\t\tthrottledCheckElements();\n\t\t});\n\n\t\tvar altLoadmodeScrollListner = function(){\n\t\t\tif(lazySizesCfg.loadMode == 3){\n\t\t\t\tlazySizesCfg.loadMode = 2;\n\t\t\t}\n\t\t\tafterScroll();\n\t\t};\n\n\t\tvar onload = function(){\n\t\t\tif(isCompleted){return;}\n\t\t\tif(Date.now() - started < 999){\n\t\t\t\tsetTimeout(onload, 999);\n\t\t\t\treturn;\n\t\t\t}\n\n\n\t\t\tisCompleted = true;\n\n\t\t\tlazySizesCfg.loadMode = 3;\n\n\t\t\tthrottledCheckElements();\n\n\t\t\taddEventListener('scroll', altLoadmodeScrollListner, true);\n\t\t};\n\n\t\treturn {\n\t\t\t_: function(){\n\t\t\t\tstarted = Date.now();\n\n\t\t\t\tlazysizes.elements = document.getElementsByClassName(lazySizesCfg.lazyClass);\n\t\t\t\tpreloadElems = document.getElementsByClassName(lazySizesCfg.lazyClass + ' ' + lazySizesCfg.preloadClass);\n\n\t\t\t\taddEventListener('scroll', throttledCheckElements, true);\n\n\t\t\t\taddEventListener('resize', throttledCheckElements, true);\n\n\t\t\t\taddEventListener('pageshow', function (e) {\n\t\t\t\t\tif (e.persisted) {\n\t\t\t\t\t\tvar loadingElements = document.querySelectorAll('.' + lazySizesCfg.loadingClass);\n\n\t\t\t\t\t\tif (loadingElements.length && loadingElements.forEach) {\n\t\t\t\t\t\t\trequestAnimationFrame(function () {\n\t\t\t\t\t\t\t\tloadingElements.forEach( function (img) {\n\t\t\t\t\t\t\t\t\tif (img.complete) {\n\t\t\t\t\t\t\t\t\t\tunveilElement(img);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tif(window.MutationObserver){\n\t\t\t\t\tnew MutationObserver( throttledCheckElements ).observe( docElem, {childList: true, subtree: true, attributes: true} );\n\t\t\t\t} else {\n\t\t\t\t\tdocElem[_addEventListener]('DOMNodeInserted', throttledCheckElements, true);\n\t\t\t\t\tdocElem[_addEventListener]('DOMAttrModified', throttledCheckElements, true);\n\t\t\t\t\tsetInterval(throttledCheckElements, 999);\n\t\t\t\t}\n\n\t\t\t\taddEventListener('hashchange', throttledCheckElements, true);\n\n\t\t\t\t//, 'fullscreenchange'\n\t\t\t\t['focus', 'mouseover', 'click', 'load', 'transitionend', 'animationend'].forEach(function(name){\n\t\t\t\t\tdocument[_addEventListener](name, throttledCheckElements, true);\n\t\t\t\t});\n\n\t\t\t\tif((/d$|^c/.test(document.readyState))){\n\t\t\t\t\tonload();\n\t\t\t\t} else {\n\t\t\t\t\taddEventListener('load', onload);\n\t\t\t\t\tdocument[_addEventListener]('DOMContentLoaded', throttledCheckElements);\n\t\t\t\t\tsetTimeout(onload, 20000);\n\t\t\t\t}\n\n\t\t\t\tif(lazysizes.elements.length){\n\t\t\t\t\tcheckElements();\n\t\t\t\t\trAF._lsFlush();\n\t\t\t\t} else {\n\t\t\t\t\tthrottledCheckElements();\n\t\t\t\t}\n\t\t\t},\n\t\t\tcheckElems: throttledCheckElements,\n\t\t\tunveil: unveilElement,\n\t\t\t_aLSL: altLoadmodeScrollListner,\n\t\t};\n\t})();\n\n\n\tvar autoSizer = (function(){\n\t\tvar autosizesElems;\n\n\t\tvar sizeElement = rAFIt(function(elem, parent, event, width){\n\t\t\tvar sources, i, len;\n\t\t\telem._lazysizesWidth = width;\n\t\t\twidth += 'px';\n\n\t\t\telem.setAttribute('sizes', width);\n\n\t\t\tif(regPicture.test(parent.nodeName || '')){\n\t\t\t\tsources = parent.getElementsByTagName('source');\n\t\t\t\tfor(i = 0, len = sources.length; i < len; i++){\n\t\t\t\t\tsources[i].setAttribute('sizes', width);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif(!event.detail.dataAttr){\n\t\t\t\tupdatePolyfill(elem, event.detail);\n\t\t\t}\n\t\t});\n\t\t/**\n\t\t *\n\t\t * @param elem {Element}\n\t\t * @param dataAttr\n\t\t * @param [width] { number }\n\t\t */\n\t\tvar getSizeElement = function (elem, dataAttr, width){\n\t\t\tvar event;\n\t\t\tvar parent = elem.parentNode;\n\n\t\t\tif(parent){\n\t\t\t\twidth = getWidth(elem, parent, width);\n\t\t\t\tevent = triggerEvent(elem, 'lazybeforesizes', {width: width, dataAttr: !!dataAttr});\n\n\t\t\t\tif(!event.defaultPrevented){\n\t\t\t\t\twidth = event.detail.width;\n\n\t\t\t\t\tif(width && width !== elem._lazysizesWidth){\n\t\t\t\t\t\tsizeElement(elem, parent, event, width);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tvar updateElementsSizes = function(){\n\t\t\tvar i;\n\t\t\tvar len = autosizesElems.length;\n\t\t\tif(len){\n\t\t\t\ti = 0;\n\n\t\t\t\tfor(; i < len; i++){\n\t\t\t\t\tgetSizeElement(autosizesElems[i]);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tvar debouncedUpdateElementsSizes = debounce(updateElementsSizes);\n\n\t\treturn {\n\t\t\t_: function(){\n\t\t\t\tautosizesElems = document.getElementsByClassName(lazySizesCfg.autosizesClass);\n\t\t\t\taddEventListener('resize', debouncedUpdateElementsSizes);\n\t\t\t},\n\t\t\tcheckElems: debouncedUpdateElementsSizes,\n\t\t\tupdateElem: getSizeElement\n\t\t};\n\t})();\n\n\tvar init = function(){\n\t\tif(!init.i && document.getElementsByClassName){\n\t\t\tinit.i = true;\n\t\t\tautoSizer._();\n\t\t\tloader._();\n\t\t}\n\t};\n\n\tsetTimeout(function(){\n\t\tif(lazySizesCfg.init){\n\t\t\tinit();\n\t\t}\n\t});\n\n\tlazysizes = {\n\t\t/**\n\t\t * @type { LazySizesConfigPartial }\n\t\t */\n\t\tcfg: lazySizesCfg,\n\t\tautoSizer: autoSizer,\n\t\tloader: loader,\n\t\tinit: init,\n\t\tuP: updatePolyfill,\n\t\taC: addClass,\n\t\trC: removeClass,\n\t\thC: hasClass,\n\t\tfire: triggerEvent,\n\t\tgW: getWidth,\n\t\trAF: rAF,\n\t};\n\n\treturn lazysizes;\n}\n));\n","var map = {\n\t\"./nl\": 2572,\n\t\"./nl.js\": 2572\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 9122;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\tloaded: false,\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Flag the module as loaded\n\tmodule.loaded = true;\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","__webpack_require__.amdO = {};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","__webpack_require__.nmd = (module) => {\n\tmodule.paths = [];\n\tif (!module.children) module.children = [];\n\treturn module;\n};","__webpack_require__.j = 416;","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t416: 0,\n\t636: 0,\n\t90: 0,\n\t274: 0,\n\t915: 0,\n\t171: 0,\n\t221: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar [chunkIds, moreModules, runtime] = data;\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = globalThis[\"webpackChunkvodafoneziggo\"] = globalThis[\"webpackChunkvodafoneziggo\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [395,661,139,66], () => (__webpack_require__(8180)))\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n"],"names":["deferred","initLetsTalk","modal","spinner","document","querySelector","window","VZSpinner","day","timeSlot","employeesField","resetTimeSlot","selectAppointmentTimeElement","options","filter","option","hasAttribute","forEach","remove","classList","setAttribute","timeSlotErrorMessageElement","parentElement","handleChangeDate","event","value","detail","date","getFullYear","getMonth","getDate","target","dataset","url","employeesValue","trim","urlWithParams","encodeURIComponent","dayErrorMessageElement","start","fetch","then","response","status","text","innerHTML","finally","stop","handleEmployeesDateUpdate","dateSection","currentDateField","wasDatePickerOpen","newDateField","addEventListener","focus","handleEmployeeChange","threshold","parseInt","employeeThreshold","oldValue","lastValue","surpassedThreshold","newValue","oldCount","newCount","Math","floor","hasPassedThreshold","removeAttribute","validate","surpassThresholdError","add","removeEventListener","VZLeadForm","HTMLElement","constructor","super","this","letsTalkHandler","connectedCallback","bs","Modal","readyState","initLeadform","bind","leadModalElement","leadModal","form","submitBtn","setPlpBasket","onModalShow","onModalHidden","submit","updateLeadSource","updateActionUrl","prefixField","validateField","disconnectedCallback","open","show","customEvent","CustomEvent","_element","dispatchEvent","checkGA","cleanupLetsTalk","cleanupForm","reset","clearFormFields","timeSlotSelect","disabled","plpSidebar","plpBasket","getAttribute","parseFormFields","Promise","resolve","Date","selectedIndex","toISOString","leadSourceName","leadSource","actionUrl","action","setSelectedResourceId","timeSelector","selectedTimeOption","resourceId","getCurrentTime","now","moment","format","evt","preventDefault","CONST","attributes","validateForm","customElements","get","define","VZLeadFormTrigger","triggerBtn","openLeadForm","e","formId","leadForm","console","error","counter","gaCheckInterval","setInterval","ga","clearInterval","documentReady","body","redSpinnerData","require","parentEl","showing","veil","tagName","appendChild","lottie","Lottie","container","renderer","loop","autoplay","animationData","msg","getComputedStyle","getPropertyValue","style","position","insertAdjacentHTML","setTimeout","play","contains","content","stopPropagation","VZInputField","HTMLInputElement","validatePattern","setFieldStatus","onPaste","decorators","readonly","regex","valid","documentNumber","mask","preventCharacters","type","password","closest","disableExcludedFields","hasValue","length","placeholderIsShown","placeholderActive","test","element","selector","nodeName","toLowerCase","name","extends","VZSelect","HTMLSelectElement","selectCorrectValue","selectedValue","find","opt","indexOf","includes","getFieldValidationMessage","field","validity","required","checked","matches","pattern","RegExp","invalid","invalidMin","invalidMax","multipleAdditions","maskType","POSTCODE_MASK_ATTRIBUTE","PostCodeMask","IBAN_MASK_ATTRIBUTE","IBANMask","DATE_MASK_ATTRIBUTE","DateMask","CAPS_MASK_ATTRIBUTE","CapsMask","onInput","selectionStart","toUpperCase","setSelectionRange","cursorIndex","maskText","pressedCharacters","replaceRemovedDigitWithLetter","onArrowRight","onArrowLeft","onCharacterRemoval","checkIfDashIsSelected","replaceAsYouType","onKeyDown","runRegexOnValue","replace","split","totalLengthUntilLastDigit","newVal","totalLength","join","cursorOffset","removedCharacter","substring","splice","addDashes","direction","offset","replaceAt","index","replacement","key","isDigit","isNaN","allowedDash","hasSelection","repeat","selectionEnd","push","val","charRemoved","firstPressedCharacter","shift","UNDO_KEYS","onKeyUp","toLocaleLowerCase","some","k","DOCUMENT_NUMBER","toString","lastIndex","originalErrorMsg","patternError","selectedId","startsWith","patternX00Error","patternVError","ID_TYPES_CODES","ID_VALIDATION_RULES","ID_TYPE","setValidationPattern","id","getElementById","idType","Object","defineProperty","enumerable","configurable","Mask","PASSWORD_VIEW_TOGGLE","showPassword","feedbackElement","set","bannedCharacters","clipboardData","dataWithoutBannedCharacters","getData","character","currValue","end","substr","preventCharactersOnInput","events","preventEntry","keyCode","bool","enable","disable","writable","getVerticalScrollPercentage","parentNode","scrollTop","scrollHeight","clientHeight","closeModal","currentTarget","removeChild","localStorage","setItem","onModalClick","click","showModal","engagementModal","modalThreshold","throttle","shakeThreshold","querySelectorAll","button","getItem","abs","getTime","isWithin24Hours","pageView","dispatchInputEvent","Event","bubbles","cancelable","formElements","keys","notDisabledOptions","Array","from","removeValidationMessageElement","chatOfflineButton","activeConfiguratorGroup","committedConfiguratorGroups","customerEmail","lastOrderNr","prompt","dataLayer","assignListeners","call","openChatPrompt","closeChatPrompt","openChatWhenLoaded","addConfiguratorGroupsToDatalayer","openByDefault","interval","closeButton","group","pushToDataLayer","updateGroupLocation","groupObj","JSON","parse","data","address","location","street","houseNumber","appendix","extension","postCode","postalCode","city","room","paid","stringify","chatBtn","cookieName","parts","cookie","pop","getCookie","devToolsOpen","profile","profileEnd","cookieValue","domain","expirationDays","setTime","cookieString","toUTCString","setCookie","hostname","startDevToolsDetector","adviceScrollArea","lastScrollPos","elementsToFadeIn","currentElements","fadeInOffset","fadeInTime","staggerDelay","selectors","fadeInElements","initialElement","transitionDelay","checkElements","currentScrollPos","pageYOffset","documentElement","viewHeight","innerHeight","isNotScrollingUp","getPosition","top","frameElement","onCollapseToggle","hashValue","urlWithoutHash","href","history","replaceState","title","updateHash","removeHash","Collapse","hash","collapseEl","elementsToExpand","item","toggle","togglerEl","elementPosition","scrollTo","siteFooter","checkFooterOverlaping","notFoundAbsoluteContainer","exists","absolutelyPositionedElementRect","getBoundingClientRect","siteFooterRect","bottom","assignStyling","addEvent","listElements","isAemMobileView","listElement","classes","active","currentElement","debounce","removeProperty","VZDateField","minDate","maxDate","validateDate","elValue","elementIsDatepicker","month","year","chosenDate","dateIsInvalid","setCustomValidity","message","el","createElement","innerText","insertAdjacentElement","assign","Datepicker","locales","NL","VZDatePicker","availableDates","minDateUnFormatted","maxDateUnFormatted","createDatePicker","datesDisabled","changeDate","fixUnavailableDateOnBlur","setDatePickerDate","setDatePickerDefault","datepicker","setView","dataAsapDateAttribute","datePickerContainer","asapToggle","setDatePickerAsap","dateString","autohide","defaultViewDate","toValue","parseDate","toDisplay","formatDate","language","nextArrow","orientation","prevArrow","updateOnBlur","picker","viewId","getFormattedDate","dateObj","slice","resetDatePickerAsap","blur","newDate","isBefore","setDate","momentFormatter","asapDate","asap","locale","r","t","f","n","isArray","arguments","ModalHelper","defaultOptions","headerBorder","backdrop","keyboard","closeBtn","getDefaultModalHtml","configurationOptions","bodyText","bodyTitle","closeBtnUrl","iconName","isSecondaryBtnDismiss","primaryBtnUrl","primaryBtnTarget","primaryBtnText","secondaryBtnTarget","secondaryBtnText","secondaryBtnUrl","titleText","modalFooterClasses","tertiaryBtnTarget","tertiaryBtnText","tertiaryBtnUrl","clsx","renderAbandonConfigurationModal","editButton","abandonConfigurationModalId","abandonConfigurationModal","render","VZModal","hasCustomHtml","customModal","modalHelper","createTemplate","templateHtml","template","cloneNode","defaultModalHTML","keyboardSetting","newModal","hideModal","getInstance","hide","flyout","header","navigation","navigationColumn","navigationItems","navigationTitles","navigationToggler","navigationWrapper","notification","notificationContent","subNavigation","subNavigationWrapper","storefrontPage","subNavigationBtnSmallBusiness","subNavigationBtnLargeBusiness","navigationWrapperMobile","toggleStickyClass","updateNotificationHeight","paddingTop","notificationHeight","offsetHeight","headerHeight","height","setFlyoutHeight","flyouts","flyoutMinHeight","reduce","result","minHeight","bindItemToggling","targetElement","updateMobileMenuPosition","toggleMobileMenu","mouseover","mouseleave","subNavButton","basketIsEmpty","notEmptyBasketModal","modalBtnText","scrollToHash","currentBreakpoint","getCurrentBreakpoint","breakpoint","searchField","searchForm","trigger","VZOpenDrawer","endpoint","drawerUrl","onClick","handleSuccessResponse","isMinicartButton","isEditMode","showMinicartDrawerOnLoad","showDrawer","drawerElement","Drawer","getParamFromURL","urlWithoutParam","removeParamFromURL","pushState","addDrawerToDOM","html","loadCSS","endpointWithCsrf","appendCsrfToUrl","isConfiguratorPage","productPliID","editModeEndpoint","appendParamToURL","finalEndpoint","ok","Error","json","warn","cta","generalError","showErrorModal","VZDrawer","wrapper","scrollBarWidth","innerWidth","clientWidth","pageHeader","removeDrawer","prepareDocumentBody","preventDrawerClosing","preventInfiniteLoop","control","toggleState","isExpanded","tapArea","isMobile","paddingRight","drawerInitiated","promptOpen","promptClose","confirm","clearCompanyRelatedFields","map","getCompanyDetailsUrl","companies","kvkNumber","company","detailsUrl","showChooserInviteSection","condition","chooserInviteSection","chooserInviteCheckbox","VZCompanySearch","inputField","searchResults","kvkNumberField","companySelector","chooserInviteElement","companyInformationCards","minQueryLengthText","minQueryLengthNumber","tradenameEndpoint","tradenameUrl","kvkEndpoint","kvkUrl","hasExistingKvk","isLeadForm","onEdit","onKeyup","onSearchResultClick","handleSearchResultClick","populateKvkField","handleDocumentClick","fetchExistingKvk","getEndpoint","onExistingKvkFetch","observedAttributes","onKeydown","attributeChangedCallback","resultsOpen","resultsContainer","removeChildNodes","clearResults","populateCompanyNameField","companyData","companyName","isExistingCompany","country","stringifiedCompany","encodeURI","postcode","postcodeFormatted","houseNumberAddition","card","nowTime","tz","currentTimeInput","fetchCompanyDetails","res","fetchCompanyList","success","serverErrors","generateResponseHTML","catch","resources","kvk","searchResultsContainer","selectedNameField","textContent","selectedKvkField","match","companyDetailsUrl","decodeURI","selectedCompanyDetailsUrl","existingKvkNumber","searchQuery","minSearchQueryLength","meetsMinLengthRequirement","removeAccentCharacters","errorModal","activeModal","modalStepContainer","modalStep","modalStepInputs","errorModalHtml","existingModal","popstate","navigator","serviceWorkerEnabled","serviceWorker","register","scope","concat","getRegistrations","serviceWorkers","workerInstance","unregister","computedStyles","bscanSteps","INTRO","STATEMENTS_DONE","GROUPED_QUESTIONS","ADVICE","THANKYOU","class","csrfToken","csrfName","exclude","placeholder","selected","validation","patternMismatch","valueMissing","tooShort","breakpoints","xxs","xs","sm","md","lg","xl","xxl","buttons","next","previous","warning","dBlock","dFlex","dInlineBlock","dNone","empty","inactive","hidden","last","change","input","keyUp","load","mousedown","paste","resize","responseError","scroll","transitionEnd","update","checkbox","file","inputFieldClear","inputFieldFeedback","label","radio","select","textarea","htmlBody","img","interactiveElements","preferredLayoutId","vzLayoutToggle","enabledBreakpoint","idDefault","localStorageKey","splitUpUrl","paramUrl","at","params","urlValues","newParams","param","nameMatch","newURL","separator","csrf","tokenName","token","pathname","search","parent","passedEvent","handler","apply","fn","selection","offsetTop","left","offsetLeft","offsetParent","screenSize","reverse","hasChildNodes","lastChild","userAgent","stickyHeader","supportsNativeSmoothScroll","positionTop","behavior","string","normalize","styles","link","rel","head","validationAttributes","toggleValidityClass","isValid","createValidationMessageElement","validField","attribute","errorMessage","validForm","formFields","dropdowns","dropdown","checkValidity","ce","defaultPrevented","origPrevent","createEvent","initCustomEvent","prototype","factory","lazySizes","lazysizes","lazySizesCfg","prop","lazySizesDefaults","lazyClass","loadedClass","loadingClass","preloadClass","errorClass","autosizesClass","fastLoadedClass","iframeLoadMode","srcAttr","srcsetAttr","sizesAttr","minSize","customMedia","init","expFactor","hFac","loadMode","loadHidden","ricTimeout","throttleDelay","lazySizesConfig","lazysizesConfig","getElementsByClassName","cfg","noSupport","docElem","supportPicture","HTMLPictureElement","_addEventListener","_getAttribute","requestAnimationFrame","requestIdleCallback","regPicture","loadEvents","regClassCache","hasClass","ele","cls","addClass","removeClass","reg","addRemoveLoadEvents","dom","triggerEvent","elem","noBubbles","noCancelable","instance","initEvent","updatePolyfill","full","polyfill","picturefill","pf","src","reevaluate","elements","getCSS","getWidth","width","offsetWidth","_lazysizesWidth","rAF","firstFns","secondFns","fns","run","runFns","running","waiting","rafBatch","queue","_lsFlush","rAFIt","simple","that","args","lastTime","gDelay","rICTimeout","idleCallback","timeout","isPriority","delay","func","timestamp","wait","later","loader","regImg","regIframe","supportScroll","shrinkExpand","currentExpand","isLoading","lowRuns","resetPreloading","isVisible","isBodyHidden","isNestedVisible","elemExpand","outerRect","visible","eLtop","eLbottom","eLleft","eLright","right","eLlen","i","rect","autoLoadElem","loadedSomething","elemNegativeExpand","elemExpandVal","beforeExpandVal","defaultExpand","preloadExpand","lazyloadElems","_lazyRace","prematureUnveil","unveilElement","expand","_defEx","eLvW","elvH","isCompleted","preloadElems","preloadAfterLoad","throttledCheckElements","switchLoadingClass","_lazyCache","rafSwitchLoadingClass","rafedSwitchLoadingClass","changeIframeSrc","contentWindow","handleSources","source","sourceSrcset","lazyUnveil","isAuto","sizes","isImg","srcset","isPicture","firesLoad","clearTimeout","resetPreloadingTimer","getElementsByTagName","isLoaded","complete","naturalWidth","loading","autoSizer","updateElem","afterScroll","altLoadmodeScrollListner","onload","started","_","persisted","loadingElements","MutationObserver","observe","childList","subtree","checkElems","unveil","_aLSL","sizeElement","sources","len","dataAttr","getSizeElement","debouncedUpdateElementsSizes","autosizesElems","uP","aC","rC","hC","fire","gW","module","exports","webpackContext","req","webpackContextResolve","__webpack_require__","o","code","__webpack_module_cache__","moduleId","cachedModule","undefined","loaded","__webpack_modules__","m","amdO","O","chunkIds","priority","notFulfilled","Infinity","fulfilled","j","every","getter","__esModule","d","a","definition","g","globalThis","Function","obj","hasOwnProperty","nmd","paths","children","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","moreModules","runtime","chunkLoadingGlobal","__webpack_exports__"],"sourceRoot":""}