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