@aotearoan/neon/dist/components/presentation/image-carousel/NeonImageCarousel.vue.cjs.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

"use strict";const c=require("./NeonImageCarousel.cjs.js"),e=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d={class:"neon-image-carousel-wrapper"},m={class:"neon-image-carousel__container",tabindex:"-1"},p={ref:"carouselItems",class:"no-style neon-image-carousel__items"},g=["alt","src"],v={key:0,class:"neon-image-carousel__item-title"},k={class:"neon-image-carousel__nav",tabindex:"-1"},C=["onClickCapture"],_={key:0,class:"neon-image-carousel__label",tabindex:"-1"};function b(n,o,E,h,w,f){const l=e.resolveComponent("neon-button"),i=e.resolveComponent("neon-link"),r=e.resolveComponent("neon-stack");return e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel--initialised":n.initialised,"neon-image-carousel--expanded":n.isExpanded},"neon-image-carousel"]),tabindex:"0",onKeydown:[o[2]||(o[2]=e.withKeys(e.withModifiers((...t)=>n.previous&&n.previous(...t),["stop","prevent"]),["left"])),o[3]||(o[3]=e.withKeys(e.withModifiers((...t)=>n.next&&n.next(...t),["stop","prevent"]),["right"])),o[4]||(o[4]=e.withKeys(t=>n.isExpanded&&n.toggleExpanded(),["esc"]))]},[e.createElementVNode("div",m,[n.isExpanded?(e.openBlock(),e.createBlock(l,{key:0,title:n.closeLabel,"button-style":"text",class:"neon-image-carousel__close",color:"low-contrast",icon:"close",size:"l",transparent:"",onClick:o[0]||(o[0]=t=>n.isExpanded&&n.toggleExpanded())},null,8,["title"])):e.createCommentVNode("",!0),e.createVNode(l,{disabled:n.currentImage===0,title:n.previousLabel,transparent:!0,"button-style":"text",class:"neon-image-carousel__previous",color:"neutral",icon:"chevron-left",size:"l",onClickCapture:e.withModifiers(n.previous,["stop"])},null,8,["disabled","title","onClickCapture"]),e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createElementBlock("li",{key:t.src,ref_for:!0,ref:"carouselItem",class:e.normalizeClass([{"neon-image-carousel__item--active":s===n.currentImage},"neon-image-carousel__item"])},[e.createElementVNode("img",{alt:t.alt,src:t.src,class:"neon-image-carousel__image",onClick:o[1]||(o[1]=e.withModifiers(a=>!n.isExpanded&&n.toggleExpanded(),["stop"]))},null,8,g),n.isExpanded&&t.title?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0)],2))),128))],512),e.createVNode(l,{disabled:n.currentImage===n.images.length-1,title:n.nextLabel,transparent:!0,"button-style":"text",class:"neon-image-carousel__next",color:"neutral",icon:"chevron-right",size:"l",onClickCapture:e.withModifiers(n.next,["stop"])},null,8,["disabled","title","onClickCapture"])]),e.createVNode(r,{class:"neon-image-carousel__nav-container",gap:"s"},{default:e.withCtx(()=>[e.createElementVNode("div",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createBlock(i,{key:s,"aria-label":`Display image ${s+1}`,class:"neon-image-carousel__nav-item-link","no-style":"","outline-style":"none",role:"button",tabindex:"0",onKeydownCapture:[e.withKeys(e.withModifiers(a=>n.scrollTo(s),["stop","prevent"]),["enter"]),e.withKeys(e.withModifiers(a=>n.scrollTo(s),["stop","prevent"]),["space"])]},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel__nav-item--active":s===n.currentImage},"neon-image-carousel__nav-item"]),tabindex:"-1",onClickCapture:e.withModifiers(a=>n.scrollTo(s),["stop"])},[...o[5]||(o[5]=[e.createElementVNode("div",{class:"neon-image-carousel__nav-item-indicator"},null,-1)])],42,C)]),_:2},1032,["aria-label","onKeydownCapture"]))),128))]),n.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(n.imageCountLabel||`${n.images.length} ${n.images.length===1?"image":"images"}`),1))]),_:1})],34)])}const y=u(c,[["render",b]]);module.exports=y;
//# sourceMappingURL=NeonImageCarousel.vue.cjs.js.map