${itemData.title}
\n\n ${itemData.suburb}\n ${itemData.postcode}\n
\n \n \n \n This will save you time when your loved one passes. At that time we will ask you \n to return to your dashboard to review your answers and provide additional information \n on the passing.\n
\n\n We are here to support you and your family throughout this time, so please don’t hesitate \n to call or email if you have any questions.\n
\n\n For now, you can click on the button below to return to your dashboard.\n
\n `;\n }\n}\n","export default (survey, options) => {\n if (options.name === \"applicant_id_photo\" || options.name === \"applicant_id_uploaded_file\") {\n if (options.value) {\n const yesButton = document.querySelector(\".button--primary\");\n yesButton?.classList.remove(\"disabled\");\n }\n }\n};\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"navigation\", \"content\"];\n static values = {\n brand: String,\n };\n\n connect() {\n const brand = this.brandValue ? this.brandValue : \"bare\";\n this.setCurrentNavDot(brand);\n\n document.addEventListener(\"scrollElementIntoView\", (event) => {\n this.scrollElementIntoView(event.detail);\n });\n }\n\n scrollElementIntoView(index) {\n this.contentTarget.children[index].scrollIntoView({ behavior: \"smooth\" });\n }\n\n scrollLeft() {\n this.contentTarget.scrollBy({ left: -1 * this.getScroll(), top: 0, behavior: \"smooth\" });\n }\n\n scrollRight() {\n this.contentTarget.scrollBy({ left: this.getScroll(), top: 0, behavior: \"smooth\" });\n }\n\n getScroll() {\n const videoCard = this.contentTarget.querySelector(\":first-child\");\n const gap = parseInt(getComputedStyle(this.contentTarget).gap, 10);\n const { width } = videoCard.getBoundingClientRect();\n return width + gap;\n }\n\n setCurrentNavDot(brand) {\n const colorPrimary = brand === \"bare\" ? \"#035E61\" : \"#A6CDE7\";\n const colorSecondary = brand === \"bare\" ? \"#B0E0d6\" : \"#003164\";\n\n const navDots = this.navigationTarget.querySelectorAll(\".nav-dot\");\n const itemLength = navDots.length;\n let currentNavDot = 0;\n navDots[currentNavDot].firstElementChild.style.fill = colorPrimary; // Set initial color\n this.contentTarget.onscroll = function (event) {\n let currentScroll = event.target.scrollLeft;\n const maxScrollLeft = event.target.scrollWidth - event.target.clientWidth;\n const navDotIncrement = maxScrollLeft / (itemLength - 1);\n currentNavDot = Math.round(currentScroll / navDotIncrement);\n navDots.forEach((navDot) => {\n navDot.firstElementChild.style.fill = colorSecondary; // Set secondary color\n });\n if (navDots[currentNavDot]) {\n navDots[currentNavDot].firstElementChild.style.fill = colorPrimary; // Set primary color for current nav dot\n }\n };\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport flatpickr from \"flatpickr\";\n\nexport default class extends Controller {\n connect() {\n this.noKeyboardMobile();\n\n const withTime = this.data.get(\"with-time\") == \"true\";\n const withWeekends = this.data.get(\"with-weekends\") == \"true\";\n const withMinDate = this.data.get(\"with-min-date\") == \"true\";\n\n this.initFlatpickr(withTime, withWeekends, withMinDate, navigator.userAgent);\n }\n\n noKeyboardMobile() {\n document.querySelectorAll(\".datepicker\").forEach((element) => {\n element.setAttribute(\"autocomplete\", \"off\");\n element.addEventListener(\"focus\", function () {\n this.blur();\n });\n });\n }\n\n setRequired() {\n const firstDatepickerElement = document.querySelector(\".datepicker\");\n firstDatepickerElement.setAttribute(\"required\", \"true\");\n }\n\n initFlatpickr(withTime, withWeekends, withMinDate, useragent) {\n const currentDate = new Date();\n\n if (withMinDate) {\n currentDate.setDate(currentDate.getDate() + 7);\n }\n\n if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(useragent)) {\n flatpickr(\".datepicker\", {\n enableTime: withTime,\n });\n } else {\n flatpickr(\".datepicker\", {\n dateFormat: withTime ? \"d-m-Y H:i\" : \"d-m-Y\",\n allowInput: true,\n minDate: currentDate,\n enableTime: withTime,\n enable: [\n function (date) {\n return withWeekends || date.getDay() % 6 != 0; // disable weekends\n },\n ],\n });\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"options\", \"dropdownField\", \"fieldName\", \"input\"];\n\n connect() {\n if (this.hasInputTarget && this.inputTarget.type === \"checkbox\") {\n this._getCheckedUnchecked();\n } else if (this.hasInputTarget && this.inputTarget.type === \"radio\") {\n this._getSelectedRadio();\n }\n\n this._getSelectedChanged();\n\n document.addEventListener(\"DOMContentLoaded\", async () => {\n this.closeDropdown = this.closeDropdown.bind(this);\n document.addEventListener(\"click\", this.closeDropdown);\n });\n }\n\n closeDropdown(event) {\n if (!this.element.contains(event.target)) {\n this.optionsTarget.removeAttribute(\"collapsed\");\n }\n }\n\n showOptions() {\n if (this.optionsTarget.getAttribute(\"collapsed\") === \"\") {\n this.optionsTarget.removeAttribute(\"collapsed\");\n } else {\n this.optionsTarget.setAttribute(\"collapsed\", \"\");\n }\n }\n\n _getCheckedUnchecked() {\n const checkboxes = this.optionsTarget.querySelectorAll(\".checkbox-input\");\n let selectedOptions = [];\n\n checkboxes.forEach((checkbox) => {\n checkbox.addEventListener(\"change\", (event) => {\n const option = event.target.id;\n if (event.target.checked) {\n selectedOptions.push(option);\n } else {\n selectedOptions.splice(selectedOptions.indexOf(option), 1);\n }\n\n this._setFieldName(selectedOptions.length, selectedOptions[0]);\n\n // Dispatch event with selected options that can be listened to by other controllers.\n const selectedOptionsEvent = new CustomEvent(\"selectedOptionsChanged\", {\n detail: {\n allSelectedOptions: selectedOptions,\n currentOption: { option: option, checked: event.target.checked },\n id: this.element.id,\n },\n });\n document.dispatchEvent(selectedOptionsEvent);\n });\n });\n }\n\n _getSelectedRadio() {\n const radios = this.optionsTarget.querySelectorAll(\".option-radio\");\n let selectedOption;\n\n radios.forEach((radio) => {\n radio.addEventListener(\"change\", (event) => {\n const option = event.target.nextElementSibling.innerText;\n if (event.target.checked) {\n selectedOption = option;\n }\n\n this._setFieldName(selectedOption ? 1 : 0, selectedOption);\n\n // Dispatch event with selected options that can be listened to by other controllers.\n const selectedOptionsEvent = new CustomEvent(\"selectedOptionsChanged\", {\n detail: {\n allSelectedOptions: selectedOption ? [selectedOption] : [],\n currentOption: { option: option, checked: event.target.checked },\n id: this.element.id,\n },\n });\n document.dispatchEvent(selectedOptionsEvent);\n this.showOptions();\n });\n });\n }\n\n _getSelectedChanged() {\n document.addEventListener(\"removeTagClicked\", ({ detail: { tag, selectedTags } }) => {\n document.getElementById(tag).checked = false;\n this._setFieldName(selectedTags.length, selectedTags[0]);\n });\n }\n\n _setFieldName(amount, option) {\n if (amount === 0) {\n this.dropdownFieldTarget.value = \"All\";\n } else if (amount === 1) {\n this.dropdownFieldTarget.value = option;\n } else {\n this.dropdownFieldTarget.value = amount + \" selected\";\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport collapsibleContainer from \"@app/components/common/collapsibleContainer\";\n\nexport default class extends Controller {\n connect() {\n collapsibleContainer();\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"select\", \"error\"];\n\n connect() {\n if (this.hasSelectTarget) {\n this.selectTarget.addEventListener(\"change\", this.toggleError.bind(this));\n }\n }\n\n toggleError() {\n if (this.selectTarget.value) {\n this.errorTarget.style.display = \"none\";\n } else {\n this.errorTarget.style.display = \"block\";\n }\n }\n}\n","/* global google */\nimport { Controller } from \"@hotwired/stimulus\";\nimport styles from \"./styles.json\";\n\nexport default class extends Controller {\n connect() {\n this.loadMapScript();\n }\n\n loadMapScript() {\n const script = document.createElement(\"script\");\n script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_GEOCODING_API_KEY}&callback=initMap`;\n script.async = true;\n script.defer = true;\n\n window.initMap = this.initMap.bind(this);\n document.body.appendChild(script);\n }\n\n async initMap() {\n const geocoder = new google.maps.Geocoder();\n this.geocodeAddress(geocoder);\n }\n\n geocodeAddress(geocoder) {\n const address = this.element.dataset.address;\n geocoder.geocode({ address: address }, (results, status) => {\n if (status === \"OK\") {\n const map = new google.maps.Map(this.element, {\n zoom: 12,\n center: results[0].geometry.location,\n styles: styles,\n });\n\n new google.maps.Marker({\n map: map,\n position: results[0].geometry.location,\n // icon: {\n // url: \"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png\", // URL of your custom image\n // // scaledSize: new google.maps.Size(50, 50), // size of your icon\n // },\n });\n }\n });\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n connect() {\n const formInputs = document.querySelectorAll(\".quote-form input, .quote-form select\");\n\n this.closeModal();\n this._hideByClassName(\"rails-survey-ok-button\");\n\n this.closeModalOnClickOutside = this.closeModalOnClickOutside.bind(this);\n document.addEventListener(\"click\", this.closeModalOnClickOutside);\n\n if (formInputs) {\n formInputs.forEach((input) => {\n input.addEventListener(\"change\", this.updateButtonState.bind(this, formInputs));\n });\n }\n }\n\n openInfoModal(event) {\n event.stopPropagation();\n var modals = this.element.getElementsByClassName(\"rails-modal\");\n modals[0].style.display = \"block\";\n }\n\n openInfoComponentModal(event) {\n event.stopPropagation();\n var modals = document.getElementsByClassName(\"rails-modal\");\n modals[0].style.display = \"block\";\n }\n\n openCarouselModal(event) {\n event.stopPropagation();\n var modals = this.element.getElementsByClassName(\"rails-modal\");\n modals[0].style.display = \"block\";\n modals[0].id = event.currentTarget.dataset.index || 0;\n document.dispatchEvent(\n new CustomEvent(\"scrollElementIntoView\", {\n detail: event.currentTarget.dataset.index || 0,\n })\n );\n }\n\n openModalDashboardRedirect(event) {\n event.stopPropagation();\n var modals = this.element.getElementsByClassName(\"rails-modal\");\n modals[0].style.display = \"block\";\n\n // wait 3 seconds and redirect to nok dashboard.\n setTimeout(() => {\n window.location.href = window.location.href.replace(\"immediate_services/quote\", \"home\");\n }, 3000);\n }\n\n openModalQuoteRedirect(event) {\n if (document.getElementById(\"at_need_quote_enquiry_read_eula\").checked == true) {\n event.stopPropagation();\n var modals = this.element.getElementsByClassName(\"rails-modal\");\n modals[0].style.display = \"block\";\n }\n }\n\n updateButtonState(formInputs) {\n const quoteButton = document.querySelector(\".quote-form__submit\");\n let allValid = true;\n\n formInputs.forEach((input) => {\n if (!input.validity.valid && input.required) {\n allValid = false;\n }\n });\n\n quoteButton.classList.toggle(\"disabled\", !allValid);\n }\n\n openShareModal(event) {\n event.stopPropagation();\n var modal = document.getElementById(\"share-modal-\" + event.currentTarget.id);\n modal.style.display = \"block\";\n }\n\n closeModalOnClickOutside(event) {\n var overlay = document.querySelector(\".rails-modal\");\n if (!this.element.contains(event.target) || event.target === overlay) {\n this.closeModal();\n }\n }\n\n closeModal() {\n this._hideByClassName(\"rails-modal\");\n this._toggleCopyLink(false);\n }\n\n closeSurveyModal() {\n this._hideByClassName(\"rails-survey-modal\");\n }\n\n copyLink(event) {\n navigator.clipboard.writeText(event.currentTarget.id);\n this._toggleCopyLink(true);\n }\n\n sendRequest() {\n const requestButton = document.querySelector(\".button-request\");\n const exitButton = document.querySelector(\".button-exit\");\n const infoText = document.querySelector(\".service-cta-modal-header\");\n\n const secondHeader = infoText.dataset.secondHeader;\n\n requestButton.style.display = \"none\";\n\n exitButton.innerText = \"Ok\";\n exitButton.classList.add(\"button--primary\");\n exitButton.classList.remove(\"button--secondary\");\n\n infoText.innerHTML = secondHeader;\n }\n\n _toggleCopyLink(toggle) {\n var elements = document.getElementsByClassName(\"copy-link\");\n var element_text = document.getElementById(\"copy-link-text\");\n if (element_text && element_text.innerHTML == \"Copied!\") {\n element_text.innerHTML = \"Copy Link\";\n elements[0].classList.add(\"button--reverse\");\n elements[0].classList.remove(\"button--secondary\");\n } else if (toggle) {\n element_text.innerHTML = \"Copied!\";\n elements[0].classList.add(\"button--secondary\");\n elements[0].classList.remove(\"button--reverse\");\n }\n }\n\n _hideByClassName(className) {\n var modals = document.getElementsByClassName(className);\n for (let i = 0; i < modals.length; i++) {\n modals[i].style.display = \"none\";\n\n // Reset video if modal is closed.\n if (modals[i].querySelector(\"iframe\") != null) {\n const iframe = modals[i].querySelector(\"iframe\");\n const videoSrc = iframe.getAttribute(\"src\");\n iframe.setAttribute(\"src\", \"\");\n iframe.setAttribute(\"src\", videoSrc);\n }\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n connect() {\n this.navElement = this.element.querySelector(\".pagy\");\n this.prevPageElement = this.navElement.querySelector('[aria-label=\"Previous\"]');\n this.nextPageElement = this.navElement.querySelector('[aria-label=\"Next\"]');\n\n this.replaceIcon(this.prevPageElement, \"‹\");\n this.replaceIcon(this.nextPageElement, \"›\");\n this.addFirstAndLastButtons();\n }\n\n replaceIcon(element, icon) {\n if (element) element.innerHTML = icon;\n }\n\n addFirstAndLastButtons() {\n const firstPageLink = this.prevPageElement.nextElementSibling;\n const lastPageLink = this.nextPageElement.previousElementSibling;\n\n const firstPageHref = firstPageLink ? firstPageLink.href : \"#\";\n const lastPageHref = lastPageLink ? lastPageLink.href : \"#\";\n\n const isPrevDisabled = this.prevPageElement.getAttribute(\"aria-disabled\") === \"true\";\n const isNextDisabled = this.nextPageElement.getAttribute(\"aria-disabled\") === \"true\";\n\n const firstButton = this.createPageButton(\"«\", firstPageHref, isPrevDisabled);\n const lastButton = this.createPageButton(\"»\", lastPageHref, isNextDisabled);\n\n this.navElement.insertBefore(firstButton, this.navElement.firstChild);\n this.navElement.appendChild(lastButton);\n }\n\n createPageButton(icon, href, isDisabled) {\n const button = document.createElement(\"span\");\n button.innerHTML = isDisabled\n ? `${icon}`\n : `${icon}`;\n return button;\n }\n\n reloadPartial(event) {\n event.preventDefault();\n const url = new URL(event.currentTarget.href);\n const partialName = url.searchParams.get(\"partial\");\n\n const customEvent = new CustomEvent(\"partial_navigation:loadPartial\", {\n detail: { partialName: partialName },\n });\n\n history.pushState(null, \"\", url);\n document.dispatchEvent(customEvent);\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"toggle\", \"drawer\"];\n\n connect() {\n super.connect();\n }\n\n toggleDrawer() {\n this.toggleTarget.classList.toggle(\"open\");\n this.drawerTarget.classList.toggle(\"show\");\n }\n\n toggleCollapsible(event) {\n const id = event.currentTarget.dataset.value;\n var el = document.querySelector(\"#\" + id);\n el.classList.toggle(\"open\");\n }\n}\n","import {Controller} from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"toggle\", \"menu\"];\n\n connect() {\n super.connect()\n document.addEventListener('click', (event) => {\n const isWithinComponent = !!event.target.closest('.profile_container');\n\n if (!isWithinComponent) {\n // Closes menu on off click.\n this.menuTarget.classList.add('menu-hide');\n }\n });\n }\n\n toggleMenu() {\n this.menuTarget.classList.toggle('menu-hide');\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport collapsibleContainer from \"@app/components/common/collapsibleContainer\";\n\nconst BREAKPOINT_TABLET = 992;\n\nexport default class extends Controller {\n connect() {\n // Collapse collapsable for mobile and tablet\n if (window.innerWidth < BREAKPOINT_TABLET) {\n collapsibleContainer();\n } else {\n collapsibleContainer(true);\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nexport default class extends Controller {\n // static targets = [\"content\", \"button\"];\n // onCollapse() {\n // this.contentTarget.classList.toggle(\"max-md:hidden\");\n // this.buttonTarget.classList.toggle(\"hidden\");\n // }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport SignaturePad from \"signature_pad\";\n\nexport default class extends Controller {\n static targets = [\"canvas\", \"placeholder\"];\n\n connect() {\n this.initialize();\n }\n\n show() {\n if (!this.sigPad || this.sigPad.isEmpty()) {\n this.initialize();\n }\n }\n\n initialize() {\n if (!this.isVisible(this.canvasTarget)) return;\n\n this.setUpSignaturePad();\n this.resizeCanvas();\n this.addListeners();\n }\n\n setUpSignaturePad() {\n const brand = this.data.get(\"brandValue\") || \"bare\";\n const penColor = (() => {\n switch (brand) {\n case \"bare\":\n return \"#035e61\";\n case \"light\":\n return \"#003164\";\n case \"goodbyegoodboy\":\n return \"#7372a0\";\n }\n })();\n\n const penConfig = {\n minWidth: 1,\n maxWidth: 3,\n penColor: penColor,\n };\n\n if (!this.sigPad) {\n this.sigPad = new SignaturePad(this.canvasTarget, penConfig);\n }\n }\n\n resizeCanvas() {\n const ratio = Math.max(window.devicePixelRatio || 1, 1);\n const fixedHeight = 250;\n\n this.canvasTarget.width = this.canvasTarget.offsetWidth * ratio;\n this.canvasTarget.height = fixedHeight * ratio;\n this.canvasTarget.style.height = `${fixedHeight}px`;\n\n const context = this.canvasTarget.getContext(\"2d\");\n context.scale(ratio, ratio);\n\n this.showPlaceholder();\n }\n\n addListeners() {\n this.canvasTarget.addEventListener(\"pointerdown\", this.hidePlaceholder.bind(this));\n window.addEventListener(\"resize\", this.resizeCanvas.bind(this));\n }\n\n clearSignature(event) {\n event.preventDefault();\n this.sigPad?.clear();\n this.showPlaceholder();\n }\n\n hidePlaceholder() {\n this.placeholderTarget.classList.add(\"hidden\");\n this.fireSignedEvent();\n }\n\n showPlaceholder() {\n this.placeholderTarget.classList.remove(\"hidden\");\n this.fireUnSignedEvent();\n }\n\n getSignatureData() {\n return new Promise((resolve, reject) => {\n if (!this.sigPad.isEmpty()) {\n this.canvasTarget.toBlob((blob) => {\n resolve(blob);\n }, \"image/png\");\n } else {\n reject(new Error(\"Signature pad is empty\"));\n }\n });\n }\n\n isSigned() {\n return !this.sigPad.isEmpty();\n }\n\n isVisible(element) {\n return !!element && element.offsetWidth > 0 && element.offsetHeight > 0;\n }\n\n fireSignedEvent() {\n this.element.dispatchEvent(new CustomEvent(\"signature_pad:signed\", { bubbles: true }));\n }\n\n fireUnSignedEvent() {\n this.element.dispatchEvent(new CustomEvent(\"signature_pad:unsigned\", { bubbles: true }));\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n show() {\n var element = document.getElementsByClassName(\"spinner-content\");\n var spinner = document.getElementsByClassName(\"spinner-loader\");\n\n if (element.length > 0 && spinner.length > 0) {\n spinner[0].classList.add(\"active\");\n element[0].style.display = \"none\";\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport collapsibleContainer from \"@app/components/common/collapsibleContainer\";\n\nexport default class extends Controller {\n connect() {\n const statusComp = document.querySelector(\".arrangement-status\");\n if (!statusComp) {\n return;\n };\n const dashboardType = statusComp.classList[1];\n if (dashboardType === \"deal\") {\n collapsibleContainer(true);\n } else {\n collapsibleContainer();\n }\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { documentToHtmlString } from '@contentful/rich-text-html-renderer';\n\nexport default class extends Controller {\n static targets = [\"content\"];\n\n connect() {\n this._renderContent();\n this._handleLinks();\n window.sendSegmentAnalytics(\"Nok\", \"Article\", \"Viewed\", this.getSegmentProps());\n }\n\n _renderContent() {\n const content = JSON.parse(this.data.get(\"content\"));\n this.contentTarget.innerHTML = documentToHtmlString(content);\n }\n\n _handleLinks() {\n const links = this.contentTarget.querySelectorAll(\"a\");\n const linksArray = Array.prototype.slice.call(links);\n linksArray.forEach((link) => {\n if (!link.href.includes(\"/next_of_kin/\")) {\n link.setAttribute(\"target\", \"_blank\");\n }\n });\n }\n\n getSegmentProps() {\n const id = window.location.pathname.split(\"/\")[3];\n var article_referrer = \"\"\n if (document.referrer) {\n article_referrer = new URL(document.referrer).pathname.split(\"/\")[2];\n }\n \n return {\n title: this.data.get(\"title\"),\n article_id: id,\n article_location: article_referrer,\n customer_type: this.data.get(\"customer-type\"),\n service_type: this.data.get(\"service-type\"),\n };\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport iconClose from \"../../../../assets/images/global/icons/icon-close.svg\";\n\nexport default class extends Controller {\n static targets = [\"articles\"];\n\n connect() {\n const allArticles = document.querySelectorAll(\".article-tile-container\");\n\n this.selectedTagsContainer = document.querySelector(\".articles-selected-tags\");\n this.articlesArray = Array.prototype.slice.call(allArticles);\n this.currentArticleIndex = this._getColumns() * 2;\n\n this._getOptionsChanged();\n this._initializeArticles(this.articlesArray);\n }\n\n loadMoreArticles() {\n this.currentArticleIndex += this._getColumns();\n this.articlesArray.forEach((article, index) => {\n if (index >= this.currentArticleIndex) {\n article.style.display = \"none\";\n } else {\n article.style.display = \"flex\";\n }\n });\n }\n\n _getOptionsChanged() {\n document.addEventListener(\n \"selectedOptionsChanged\",\n ({ detail: { allSelectedOptions, currentOption } }) => {\n this._filterArticles(allSelectedOptions);\n if (currentOption.checked) {\n this._addSelectedTag(allSelectedOptions, currentOption.option);\n } else {\n this._removeSelectedTag(currentOption.option);\n }\n }\n );\n }\n\n _getColumns() {\n this.articlesContainer = document.querySelector(\".articles-body\");\n const columnString = getComputedStyle(this.articlesContainer).gridTemplateColumns;\n return columnString.split(\" \").length;\n }\n\n _initializeArticles(articlesArray) {\n articlesArray.forEach((article, index) => {\n if (index >= this.currentArticleIndex) {\n article.style.display = \"none\";\n }\n });\n }\n\n // Adds tags as labels to top of the page.\n _addSelectedTag(selectedTags, tag) {\n const tagElement = document.createElement(\"div\");\n\n tagElement.classList.add(\"selected-tag\", tag);\n tagElement.innerHTML = `${tag.replace(\n /-/g,\n \" \"\n )}