https://www.honda.it/etc/designs/honda/hme-core-front-end/bike-specifications-visualiser.mez5887a559y7pw4.js

1var t=Object.defineProperty,e=(e,o,s)=>((e,o,s)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[o]=s)(e,"symbol"!=typeof o?o+"":o,s);import{A as o}from"./index.fwy4myo0zwt1lnjt.js";import"./index.cz83wh4sws6slzdm.js";const s="bike-specifications-visualiser",i=`[data-hme-is='${s}']`,n="hme-bike-specifications-visualiser__variants-dropdown--expanded",a="hme-bike-specifications-visualiser__variants-dropdown-list-item--selected",r="hme-bike-specifications-visualiser__image--active",l="hme-bike-specifications-visualiser__colour-dropdown--expanded",d="hme-bike-specifications-visualiser__colour-dropdown-list-item--selected",u="hme-bike-specifications-visualiser__colour-dropdown-list-item--active",c=".hme-bike-specifications-visualiser__variants-dropdown-list-item-button",h=".hme-bike-specifications-visualiser__colour-dropdown-list-item-button";class p extends o{constructor(){super(...arguments),e(this,"isVariantsDropdownOpen",!1),e(this,"selectedVariantId"),e(this,"focusedVariantId"),e(this,"isColourDropdownOpen",!1),e(this,"selectedColorId"),e(this,"focusedColourId"),e(this,"activeColourListItems",[]),e(this,"activeColourListItemButtons",[])}init(){this.addEventHandlers(),this.updateInitialParams(),this.updateActiveColourItems(),this.updateVariantButtonsTabIndex(),this.updateColourButtonsTabIndex()}updateInitialParams(){var t,e,o;const s=new URLSearchParams(window.location.hash.slice(1)),i=s.get("bikeId");let n="",a="";this.options.bikeId===i&&(n=s.get("model")||"",a=s.get("colour")||""),n=n||this.options.variantId||(null==(e=null==(t=this.elements.variantsListItems)?void 0:t[0])?void 0:e.dataset.variantId)||"",this.selectedVariantId=n,this.focusedVariantId=n,this.onVariantSelect(this.selectedVariantId,!1),a=a||this.options.colorId||(null==(o=this.activeColourListItems[0])?void 0:o.dataset.colorId)||"",this.selectedColorId=a,this.focusedColourId=a,this.onColourSelect(this.selectedColorId,!1)}addEventHandlers(){this.elements.variantsDropdown&&this.elements.variantsDropdownButton&&this.elements.variantsList&&this.elements.variantsListButtons&&(this.elements.variantsDropdownButton.addEventListener("click",()=>{this.toggleVariantsDropdown()}),this.elements.variantsDropdownButton.addEventListener("keydown",t=>{this.onVariantsDropdownButtonKeydown(t)}),this.elements.variantsList.addEventListener("keydown",t=>{this.onVariantsListKeydown(t)}),this.elements.variantsList.addEventListener("focusout",t=>{this.onVariantsListFocusOut(t)}),this.elements.variantsListButtons.forEach(t=>{t.addEventListener("click",()=>{this.onVariantSelect(t.dataset.variantId||"")})})),this.elements.colourDropdown&&this.elements.colourDropdownButton&&this.elements.colourList&&this.elements.colourListButtons&&(this.elements.colourDropdownButton.addEventListener("click",()=>{this.toggleColourDropdown()}),this.elements.colourDropdownButton.addEventListener("keydown",t=>{this.onColourDropdownButtonKeydown(t)}),this.elements.colourList.addEventListener("keydown",t=>{this.onColourListKeydown(t)}),this.elements.colourList.addEventListener("focusout",t=>{this.onColourListFocusOut(t)}),this.elements.colourListButtons.forEach(t=>{t.addEventListener("click",()=>{this.onColourSelect(t.dataset.colorId||"")})}))}openVariantsDropdown(){var t,e,o;if(this.isVariantsDropdownOpen=!0,null==(t=this.elements.variantsDropdown)||t.classList.add(n),null==(e=this.elements.variantsDropdownButton)||e.setAttribute("aria-expanded","true"),!this.selectedVariantId)return;this.focusedVariantId=this.selectedVariantId;const s=this.getVariantItemByVariantId(this.focusedVariantId);null==s||s.classList.add(a),null==(o=null==s?void 0:s.querySelector(c))||o.focus()}closeVariantsDropdown(t=!0){var e,o,s;this.isVariantsDropdownOpen=!1,null==(e=this.elements.variantsDropdown)||e.classList.remove(n),null==(o=this.elements.variantsDropdownButton)||o.setAttribute("aria-expanded","false"),t&&(null==(s=this.elements.variantsDropdownButton)||s.focus())}toggleVariantsDropdown(){this.isVariantsDropdownOpen?this.closeVariantsDropdown():this.openVariantsDropdown()}onVariantsDropdownButtonKeydown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.toggleV

1ariantsDropdown()),"ArrowDown"!==t.key&&"ArrowUp"!==t.key||(t.preventDefault(),this.openVariantsDropdown())}onVariantsListKeydown(t){var e,o,s;if(" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),""!==this.focusedVariantId&&this.onVariantSelect(this.focusedVariantId),this.closeVariantsDropdown()),"Escape"===t.key&&(t.preventDefault(),this.closeVariantsDropdown()),"ArrowDown"===t.key||"ArrowUp"===t.key||"ArrowLeft"===t.key||"ArrowRight"===t.key){t.preventDefault();const i=null!=(e=this.elements.variantsListItems)?e:[],n=i.map(t=>{var e;return null!=(e=t.dataset.variantId)?e:""}),a=this.focusedVariantId?n.indexOf(this.focusedVariantId):0;let r;r="ArrowDown"===t.key||"ArrowRight"===t.key?(a+1)%n.length:(a-1+n.length)%n.length,this.focusedVariantId=n[r],null==(s=null==(o=i[r])?void 0:o.querySelector(c))||s.focus()}}onVariantsListFocusOut(t){var e;t.relatedTarget&&((null==(e=this.elements.variantsList)?void 0:e.contains(t.relatedTarget))||t.relatedTarget===this.elements.variantsDropdownButton)||this.closeVariantsDropdown()}onVariantSelect(t,e=!0){var o,s,i,n;this.selectedVariantId=t,null==(o=this.elements.variantsListItems)||o.forEach(t=>{t.classList.toggle(a,t.dataset.variantId===this.selectedVariantId)});const r=this.getVariantItemByVariantId(this.selectedVariantId);r&&this.elements.variantsDropdownButtonContent&&(this.elements.variantsDropdownButtonContent.innerHTML=(null==(s=r.querySelector(c))?void 0:s.innerHTML)||""),this.updateVariantButtonsTabIndex(),this.updateActiveColourItems(),this.activeColourListItems.some(t=>t.dataset.colorId===this.selectedColorId)?this.onColourSelect(this.selectedColorId,e):this.onColourSelect(null!=(n=null==(i=this.activeColourListItems[0])?void 0:i.dataset.colorId)?n:"",e),this.closeVariantsDropdown(e)}openColourDropdown(){var t,e,o;if(this.isColourDropdownOpen=!0,null==(t=this.elements.colourDropdown)||t.classList.add(l),null==(e=this.elements.colourDropdownButton)||e.setAttribute("aria-expanded","true"),!this.selectedColorId)return;this.focusedColourId=this.selectedColorId;const s=this.activeColourListItems.find(t=>t.dataset.colorId===this.focusedColourId);null==s||s.classList.add(d),null==(o=null==s?void 0:s.querySelector(h))||o.focus()}closeColourDropdown(t=!0){var e,o,s;this.isColourDropdownOpen=!1,null==(e=this.elements.colourDropdown)||e.classList.remove(l),null==(o=this.elements.colourDropdownButton)||o.setAttribute("aria-expanded","false"),t&&(null==(s=this.elements.colourDropdownButton)||s.focus())}toggleColourDropdown(){this.isColourDropdownOpen?this.closeColourDropdown():this.openColourDropdown()}onColourDropdownButtonKeydown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.toggleColourDropdown()),"ArrowDown"!==t.key&&"ArrowUp"!==t.key||(t.preventDefault(),this.openColourDropdown())}onColourListKeydown(t){var e,o;if(" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),""!==this.focusedColourId&&this.onColourSelect(this.focusedColourId),this.closeColourDropdown()),"Escape"===t.key&&(t.preventDefault(),this.closeColourDropdown()),"ArrowDown"===t.key||"ArrowUp"===t.key||"ArrowLeft"===t.key||"ArrowRight"===t.key){if(t.preventDefault(),0===this.activeColourListItems.length)return;const s=this.activeColourListItems.map(t=>{var e;return null!=(e=t.dataset.colorId)?e:""}),i=this.focusedColourId?s.indexOf(this.focusedColourId):0;let n;n="ArrowDown"===t.key||"ArrowRight"===t.key?(i+1)%s.length:(i-1+s.length)%s.length,this.focusedColourId=s[n],null==(o=null==(e=this.activeColourListItems[n])?void 0:e.querySelector(h))||o.focus()}}onColourListFocusOut(t){t.relatedTarget?this.elements.colourList&&!this.elements.colourList.contains(t.relatedTarget)&&t.relatedTarget!==this.elements.colourDropdownButton&&this.closeColourDropdown():this.closeColourDropdown()}onColourSelect(t,e=!0){var o;this.selectedColorId=t,this.activeColourListItems.forEach(t=>{t.classList.toggle(d,t.dataset.colorId===this.selectedColorId)}),this.updateColourButtonsTabIndex();const s=this.activeColourListItems.find(t=>t.dataset.colorId===this.selectedColorId);s&&(this.updatePriceDisplay(s),this.updateMainImage(s),this.updateUrlParamsByColorItem(s),this.dispatchFinanceCalculatorEvent(s),this.elements.colourDropdownButtonContent&&(this.elements.colourDropdownButtonContent.innerHTML=(null==(o=s.querySelector(h))?void 0:o.innerHTML)||"")),this.closeColourDropdown(e)}getVariantItemByVariantId(t){var e;return null==(e=this.elements.variantsListItems)?void 0:e.find(e=>e.dataset.variantId===t)}updateActiveColourItems(){var t,e,o,s,i;this.activeColourListItems=null!=(e=null==(t=this.elements.colourListItems)?void 0:t.filter(t=>t.dataset.variantId===this.selectedVariantId))?e:[],this.activeColourListItemButtons=null!=(s=null==(o=this.elements.colourListButtons)?void 0:o.filter(t=>t.dataset.variantId===this.selectedVariantId))?s:[],null==(i=this.elements.colourListItems)||i.forEac

1h(t=>{this.activeColourListItems.includes(t)?t.classList.add(u):(t.classList.remove(u),t.classList.remove(d))})}updateVariantButtonsTabIndex(){var t;null==(t=this.elements.variantsListButtons)||t.forEach(t=>{t.setAttribute("tabindex",t.dataset.variantId===this.selectedVariantId?"0":"-1")})}updateColourButtonsTabIndex(){this.elements.colourListButtons.forEach(t=>{t.setAttribute("tabindex","-1")}),this.activeColourListItemButtons.forEach(t=>{t.setAttribute("tabindex",t.dataset.colorId===this.selectedColorId?"0":"-1")})}updatePriceDisplay(t){var e,o,s,i,n;const a=null!=(e=t.dataset.variantName)?e:"",r=null!=(o=t.dataset.colorName)?o:"",l=null!=(s=t.dataset.price)?s:"",d=null!=(i=t.dataset.priceTwo)?i:"",u=null!=(n=t.dataset.priceThree)?n:"";this.elements.name.textContent=a,this.elements.price.textContent=l,this.elements.colourLabel.textContent=r,this.elements.priceTwo&&(d&&this.elements.priceTwoValue?(this.elements.priceTwo.style.display="block",this.elements.priceTwoValue.textContent=d):this.elements.priceTwo.style.display="none"),this.elements.priceThree&&(u&&this.elements.priceThreeValue?(this.elements.priceThree.style.display="block",this.elements.priceThreeValue.textContent=u):this.elements.priceThree.style.display="none")}updateMainImage(t){var e;null==(e=this.elements.images)||e.forEach(e=>{e.dataset.variantId===t.dataset.variantId&&e.dataset.colorId===t.dataset.colorId?e.classList.add(r):e.classList.remove(r)})}dispatchFinanceCalculatorEvent(t){var e,o,s;const i=null!=(e=t.dataset.bikeId)?e:"",n=null!=(o=t.dataset.variantId)?o:"",a=null!=(s=t.dataset.colorId)?s:"";super.dispatchEvent("hme-bike-specifications-2-finance-calculator.updateConfig",{bike:i,bikeVariant:n,bikeColour:a})}updateUrlParamsByColorItem(t){var e,o,s;const i=null!=(e=t.dataset.bikeId)?e:"",n=null!=(o=t.dataset.variantId)?o:"",a=null!=(s=t.dataset.colorId)?s:"";this.updateUrlParams(i,n,a)}updateUrlParams(t,e,o){const s=new URLSearchParams(window.location.hash.slice(1));s.set("bike",t),s.set("model",e),s.set("colour",o),window.location.hash=s.toString()}}e(p,"SELF",i),e(p,"NS","hme"),e(p,"IS",s);export{i as SELF,p as default};