@aotearoan/neon 22.2.0 → 22.3.0

package/dist/components/presentation/image-carousel/NeonImageCarousel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\nimport type { NeonCarouselImage } from '@/common/models/NeonCarouselImage';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * <p>\n *   The <strong>NeonImageCarousel</strong> is used to display a carousel of images for the user to swipe\n *   through. NOTE: It is recommended to explicitly set the width & height of the carousel via CSS, this will\n *   ensure it will not be impacted by images with different aspect ratios. Images are automatically resized to fit the\n *   carousel dimensions.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonImageCarousel',\n  components: {\n    NeonButton,\n    NeonLink,\n  },\n  props: {\n    /**\n     * The images to be displayed in the carousel.\n     */\n    images: { type: Array as () => Array<NeonCarouselImage>, required: true },\n    /**\n     * Provide an alternative image count label. This can be useful for translations. The default is e.g.\n     * <em>2 images</em>.\n     */\n    imageCountLabel: { type: String, default: undefined },\n    /**\n     * Hide the label under the dot navigation.\n     */\n    hideLabel: { type: Boolean, default: false },\n    /**\n     * Provide an alternative label for the Previous button.\n     */\n    previousLabel: { type: String, default: 'Previous' },\n    /**\n     * Provide an alternative label for the Next button.\n     */\n    nextLabel: { type: String, default: 'Next' },\n  },\n  emits: [\n    /**\n     * The index of the currently visible image.\n     *\n     * @type {number}\n     */\n    'current-image',\n  ],\n  setup(props, { emit }) {\n    const initialised = ref<boolean>(false);\n    const currentImage = ref<number>(0);\n    const carouselItems = ref<HTMLUListElement | null>(null);\n    const carouselItem = ref<Array<HTMLLIElement>>([]);\n    const observers = ref<Array<IntersectionObserver>>([]);\n\n    const changeImage = (index: number) => {\n      if (index !== currentImage.value) {\n        currentImage.value = index;\n        emit('current-image', index);\n      }\n    };\n\n    const scrollTo = (index: number) => {\n      if (carouselItems.value && props.images.length > 0) {\n        changeImage(index);\n        carouselItems.value.scrollTo(carouselItems.value.clientWidth * index, 0);\n      }\n    };\n\n    const next = () => {\n      if (currentImage.value < props.images.length - 1) {\n        scrollTo(currentImage.value + 1);\n      }\n    };\n\n    const previous = () => {\n      if (currentImage.value !== 0) {\n        scrollTo(currentImage.value - 1);\n      }\n    };\n\n    onMounted(() => {\n      const options = {\n        root: carouselItems.value,\n        rootMargin: '0px',\n        threshold: 0.6,\n      };\n\n      observers.value = carouselItem.value.map((el, index) => {\n        const obs = new IntersectionObserver((entries) => {\n          entries.forEach((entry) => {\n            // filter out the observations on initialization\n            if (initialised.value && entry.isIntersecting) {\n              changeImage(index);\n            }\n          });\n        }, options);\n        obs.observe(el);\n\n        return obs;\n      });\n\n      setTimeout(() => {\n        // initialise scroll position to first element\n        if (carouselItems.value && carouselItems.value.scrollLeft !== 0) {\n          carouselItems.value.scrollLeft = 0;\n        }\n        initialised.value = true;\n      }, 50);\n    });\n\n    onUnmounted(() => {\n      observers.value.forEach((observer) => observer.disconnect());\n    });\n\n    return {\n      emit,\n      currentImage,\n      carouselItem,\n      carouselItems,\n      initialised,\n      next,\n      previous,\n      scrollTo,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonLink","props","emit","initialised","ref","currentImage","carouselItems","carouselItem","observers","changeImage","index","scrollTo","next","previous","onMounted","options","el","obs","entries","entry","onUnmounted","observer"],"mappings":";;;AAaA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,QAAQ,EAAE,MAAM,OAAyC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnE,iBAAiB,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1C,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,eAAe,EAAE,MAAM,QAAQ,SAAS,WAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,WAAW,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA,EAAO;AAAA,EAE7C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAcC,EAAa,EAAK,GAChCC,IAAeD,EAAY,CAAC,GAC5BE,IAAgBF,EAA6B,IAAI,GACjDG,IAAeH,EAA0B,EAAE,GAC3CI,IAAYJ,EAAiC,EAAE,GAE/CK,IAAc,CAACC,MAAkB;AACrC,MAAIA,MAAUL,EAAa,UACzBA,EAAa,QAAQK,GACrBR,EAAK,iBAAiBQ,CAAK;AAAA,IAE/B,GAEMC,IAAW,CAACD,MAAkB;AAClC,MAAIJ,EAAc,SAASL,EAAM,OAAO,SAAS,MAC/CQ,EAAYC,CAAK,GACjBJ,EAAc,MAAM,SAASA,EAAc,MAAM,cAAcI,GAAO,CAAC;AAAA,IAE3E,GAEME,IAAO,MAAM;AACjB,MAAIP,EAAa,QAAQJ,EAAM,OAAO,SAAS,KAC7CU,EAASN,EAAa,QAAQ,CAAC;AAAA,IAEnC,GAEMQ,IAAW,MAAM;AACrB,MAAIR,EAAa,UAAU,KACzBM,EAASN,EAAa,QAAQ,CAAC;AAAA,IAEnC;AAEA,WAAAS,EAAU,MAAM;AACd,YAAMC,IAAU;AAAA,QACd,MAAMT,EAAc;AAAA,QACpB,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAGb,MAAAE,EAAU,QAAQD,EAAa,MAAM,IAAI,CAACS,GAAIN,MAAU;AACtD,cAAMO,IAAM,IAAI,qBAAqB,CAACC,MAAY;AAChD,UAAAA,EAAQ,QAAQ,CAACC,MAAU;AAEzB,YAAIhB,EAAY,SAASgB,EAAM,kBAC7BV,EAAYC,CAAK;AAAA,UAErB,CAAC;AAAA,QACH,GAAGK,CAAO;AACV,eAAAE,EAAI,QAAQD,CAAE,GAEPC;AAAA,MACT,CAAC,GAED,WAAW,MAAM;AAEf,QAAIX,EAAc,SAASA,EAAc,MAAM,eAAe,MAC5DA,EAAc,MAAM,aAAa,IAEnCH,EAAY,QAAQ;AAAA,MACtB,GAAG,EAAE;AAAA,IACP,CAAC,GAEDiB,EAAY,MAAM;AAChB,MAAAZ,EAAU,MAAM,QAAQ,CAACa,MAAaA,EAAS,YAAY;AAAA,IAC7D,CAAC,GAEM;AAAA,MACL,MAAAnB;AAAA,MACA,cAAAG;AAAA,MACA,cAAAE;AAAA,MACA,eAAAD;AAAA,MACA,aAAAH;AAAA,MACA,MAAAS;AAAA,MACA,UAAAC;AAAA,MACA,UAAAF;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonImageCarousel.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport type { NeonCarouselImage } from '@/common/models/NeonCarouselImage';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\n\n/**\n * <p>\n *   The <strong>NeonImageCarousel</strong> is used to display a carousel of images for the user to swipe\n *   through. NOTE: It is recommended to explicitly set the width & height of the carousel via CSS, this will\n *   ensure it will not be impacted by images with different aspect ratios. Images are automatically resized to fit the\n *   carousel dimensions.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonImageCarousel',\n  components: {\n    NeonButton,\n    NeonLink,\n    NeonStack,\n  },\n  props: {\n    /**\n     * The images to be displayed in the carousel.\n     */\n    images: { type: Array as () => Array<NeonCarouselImage>, required: true },\n    /**\n     * Provide an alternative image count label. This can be useful for translations. The default is e.g.\n     * <em>2 images</em>.\n     */\n    imageCountLabel: { type: String, default: undefined },\n    /**\n     * Hide the label under the dot navigation.\n     */\n    hideLabel: { type: Boolean, default: false },\n    /**\n     * Provide an alternative label for the Previous button.\n     */\n    closeLabel: { type: String, default: 'Close' },\n    /**\n     * Provide an alternative label for the Previous button.\n     */\n    previousLabel: { type: String, default: 'Previous' },\n    /**\n     * Provide an alternative label for the Next button.\n     */\n    nextLabel: { type: String, default: 'Next' },\n  },\n  emits: [\n    /**\n     * The index of the currently visible image.\n     *\n     * @type {number}\n     */\n    'current-image',\n  ],\n  setup(props, { emit }) {\n    const initialised = ref<boolean>(false);\n    const currentImage = ref<number>(0);\n    const carouselItems = ref<HTMLUListElement | null>(null);\n    const carouselItem = ref<Array<HTMLLIElement>>([]);\n    const observers = ref<Array<IntersectionObserver>>([]);\n    const expanded = ref<boolean>(false);\n\n    const changeImage = (index: number) => {\n      if (index !== currentImage.value) {\n        currentImage.value = index;\n        emit('current-image', index);\n      }\n    };\n\n    const scrollTo = (index: number) => {\n      if (carouselItems.value && props.images.length > 0) {\n        changeImage(index);\n        carouselItems.value.scrollTo(carouselItems.value.clientWidth * index, 0);\n      }\n    };\n\n    const next = () => {\n      if (currentImage.value < props.images.length - 1) {\n        scrollTo(currentImage.value + 1);\n      }\n    };\n\n    const previous = () => {\n      if (currentImage.value !== 0) {\n        scrollTo(currentImage.value - 1);\n      }\n    };\n\n    onMounted(() => {\n      const options = {\n        root: carouselItems.value,\n        rootMargin: '0px',\n        threshold: 0.6,\n      };\n\n      observers.value = carouselItem.value.map((el, index) => {\n        const obs = new IntersectionObserver((entries) => {\n          entries.forEach((entry) => {\n            // filter out the observations on initialization\n            if (initialised.value && entry.isIntersecting) {\n              changeImage(index);\n            }\n          });\n        }, options);\n        obs.observe(el);\n\n        return obs;\n      });\n\n      setTimeout(() => {\n        // initialise scroll position to first element\n        if (carouselItems.value && carouselItems.value.scrollLeft !== 0) {\n          carouselItems.value.scrollLeft = 0;\n        }\n        initialised.value = true;\n      }, 50);\n    });\n\n    onUnmounted(() => {\n      observers.value.forEach((observer) => observer.disconnect());\n    });\n\n    watch(\n      () => expanded.value,\n      (value: boolean) => {\n        if (value) {\n          document.body.classList.add('neon-closable--open');\n        } else {\n          document.body.classList.remove('neon-closable--open');\n        }\n      },\n    );\n\n    return {\n      emit,\n      currentImage,\n      carouselItem,\n      carouselItems,\n      initialised,\n      expanded,\n      next,\n      previous,\n      scrollTo,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonLink","NeonStack","props","emit","initialised","ref","currentImage","carouselItems","carouselItem","observers","expanded","changeImage","index","scrollTo","next","previous","onMounted","options","el","obs","entries","entry","onUnmounted","observer","watch","value"],"mappings":"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"}

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.cjs.js

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

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.vue.cjs.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{ 'neon-image-carousel--initialised': initialised }\"\n    class=\"neon-image-carousel\"\n    tabindex=\"0\"\n    @keydown.stop.prevent.left=\"previous\"\n    @keydown.stop.prevent.right=\"next\"\n  >\n    <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === 0\"\n        :title=\"previousLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__previous\"\n        color=\"neutral\"\n        icon=\"chevron-left\"\n        size=\"l\"\n        @click=\"previous\"\n      />\n      <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n        <li\n          v-for=\"(image, index) in images\"\n          :key=\"image.src\"\n          ref=\"carouselItem\"\n          :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n          class=\"neon-image-carousel__item\"\n        >\n          <img :alt=\"image.alt\" :src=\"image.src\" class=\"neon-image-carousel__image\" />\n        </li>\n      </ul>\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === images.length - 1\"\n        :title=\"nextLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__next\"\n        color=\"neutral\"\n        icon=\"chevron-right\"\n        size=\"l\"\n        @click=\"next\"\n      />\n    </div>\n    <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n      <neon-link\n        v-for=\"(_image, index) in images\"\n        :key=\"index\"\n        :aria-label=\"`Display image ${index + 1}`\"\n        class=\"neon-image-carousel__nav-item-link\"\n        outline-style=\"none\"\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown.stop.prevent.enter=\"scrollTo(index)\"\n        @keydown.stop.prevent.space=\"scrollTo(index)\"\n      >\n        <div\n          :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n          class=\"neon-image-carousel__nav-item\"\n          tabindex=\"-1\"\n          @click=\"scrollTo(index)\"\n        >\n          <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n        </div>\n      </neon-link>\n    </div>\n    <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n      {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","args","_createElementVNode","_hoisted_1","_createVNode","_component_neon_button","_hoisted_2","_openBlock","_Fragment","_renderList","image","index","_hoisted_4","_image","_createBlock","_component_neon_link","_withKeys","_withModifiers","$event","_hoisted_6","_toDisplayString"],"mappings":"+IAQS,MAAM,iCAAiC,SAAS,SAa/C,IAAI,gBAAgB,MAAM,0DAwB3B,MAAM,2BAA2B,SAAS,6BAsBvB,MAAM,6BAA6B,SAAS,+HAlEtEA,EAAAA,mBAqEM,MAAA,CApEH,MAAKC,EAAAA,eAAA,CAAA,CAAA,mCAAwCC,EAAA,WAAW,EACnD,qBAAqB,CAAA,EAC3B,SAAS,IACR,UAAO,gDAAoBA,EAAA,UAAAA,EAAA,SAAA,GAAAC,CAAA,EAAQ,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,MAAA,CAAA,kDACPD,EAAA,MAAAA,EAAA,KAAA,GAAAC,CAAA,EAAI,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,MAEjCC,EAAAA,mBAoCM,MApCNC,EAoCM,CAnCJC,EAAAA,YAWEC,EAAA,CAVC,SAAU,GACV,SAAUL,EAAA,eAAY,EACtB,MAAOA,EAAA,cACP,YAAa,GACd,eAAa,OACb,MAAM,gCACN,MAAM,UACN,KAAK,eACL,KAAK,IACJ,QAAOA,EAAA,iDAEVE,EAAAA,mBAUK,KAVLI,EAUK,EATHC,EAAAA,UAAA,EAAA,EAAAT,EAAAA,mBAQKU,WAAA,KAAAC,EAAAA,WAPsBT,EAAA,OAAM,CAAvBU,EAAOC,mBADjBb,EAAAA,mBAQK,KAAA,CANF,IAAKY,EAAM,eACZ,IAAI,eACH,MAAKX,EAAAA,eAAA,CAAA,CAAA,oCAAyCY,IAAUX,EAAA,YAAY,EAC/D,2BAA2B,CAAA,IAEjCE,EAAAA,mBAA4E,MAAA,CAAtE,IAAKQ,EAAM,IAAM,IAAKA,EAAM,IAAK,MAAM,0DAGjDN,EAAAA,YAWEC,EAAA,CAVC,SAAU,GACV,SAAUL,EAAA,eAAiBA,EAAA,OAAO,OAAM,EACxC,MAAOA,EAAA,UACP,YAAa,GACd,eAAa,OACb,MAAM,4BACN,MAAM,UACN,KAAK,gBACL,KAAK,IACJ,QAAOA,EAAA,+CAGZE,EAAAA,mBAqBM,MArBNU,EAqBM,EApBJL,EAAAA,UAAA,EAAA,EAAAT,EAAAA,mBAmBYU,WAAA,KAAAC,EAAAA,WAlBgBT,EAAA,OAAM,CAAxBa,EAAQF,mBADlBG,EAAAA,YAmBYC,EAAA,CAjBT,IAAKJ,EACL,8BAA6BA,EAAK,CAAA,GACnC,MAAM,qCACN,gBAAc,OACd,KAAK,SACL,SAAS,IACR,UAAO,CAAqBK,EAAAA,SAAAC,EAAAA,cAAAC,GAAAlB,EAAA,SAASW,CAAK,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EACdK,EAAAA,SAAAC,EAAAA,cAAAC,GAAAlB,EAAA,SAASW,CAAK,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,uBAE3C,IAOM,CAPNT,EAAAA,mBAOM,MAAA,CANH,MAAKH,EAAAA,eAAA,CAAA,CAAA,wCAA6CY,IAAUX,EAAA,cACvD,+BAA+B,CAAA,EACrC,SAAS,KACR,QAAKkB,GAAElB,EAAA,SAASW,CAAK,oBAEtBT,EAAAA,mBAA2D,MAAA,CAAtD,MAAM,yCAAyC,EAAA,KAAA,EAAA,6DAI7CF,EAAA,qDAAbF,qBAEO,OAFPqB,EAEOC,EAAAA,gBADFpB,EAAA,iBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,SAAM,EAAA,QAAA,QAAA,EAAA,EAAA,CAAA"}
+{"version":3,"file":"NeonImageCarousel.vue.cjs.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': expanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"expanded = false\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\" @click.stop=\"expanded = false\">\n        <neon-button\n          v-if=\"expanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"expanded = false\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"expanded = !expanded\"\n            />\n            <p v-if=\"expanded\" class=\"neon-image-carousel__item-title\">{{ image.alt }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\" @click.stop=\"expanded = false\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_createBlock","_component_neon_button","_createVNode","_hoisted_2","_Fragment","_renderList","image","index","_cache","_withModifiers","$event","_hoisted_4","_toDisplayString","_component_neon_stack","_hoisted_5","_image","_component_neon_link","_withKeys","_hoisted_7"],"mappings":"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"}

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.es.js

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

package/dist/components/presentation/image-carousel/NeonImageCarousel.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{ 'neon-image-carousel--initialised': initialised }\"\n    class=\"neon-image-carousel\"\n    tabindex=\"0\"\n    @keydown.stop.prevent.left=\"previous\"\n    @keydown.stop.prevent.right=\"next\"\n  >\n    <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === 0\"\n        :title=\"previousLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__previous\"\n        color=\"neutral\"\n        icon=\"chevron-left\"\n        size=\"l\"\n        @click=\"previous\"\n      />\n      <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n        <li\n          v-for=\"(image, index) in images\"\n          :key=\"image.src\"\n          ref=\"carouselItem\"\n          :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n          class=\"neon-image-carousel__item\"\n        >\n          <img :alt=\"image.alt\" :src=\"image.src\" class=\"neon-image-carousel__image\" />\n        </li>\n      </ul>\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === images.length - 1\"\n        :title=\"nextLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__next\"\n        color=\"neutral\"\n        icon=\"chevron-right\"\n        size=\"l\"\n        @click=\"next\"\n      />\n    </div>\n    <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n      <neon-link\n        v-for=\"(_image, index) in images\"\n        :key=\"index\"\n        :aria-label=\"`Display image ${index + 1}`\"\n        class=\"neon-image-carousel__nav-item-link\"\n        outline-style=\"none\"\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown.stop.prevent.enter=\"scrollTo(index)\"\n        @keydown.stop.prevent.space=\"scrollTo(index)\"\n      >\n        <div\n          :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n          class=\"neon-image-carousel__nav-item\"\n          tabindex=\"-1\"\n          @click=\"scrollTo(index)\"\n        >\n          <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n        </div>\n      </neon-link>\n    </div>\n    <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n      {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","args","_createElementVNode","_hoisted_1","_createVNode","_component_neon_button","_hoisted_2","_openBlock","_Fragment","_renderList","image","index","_hoisted_4","_image","_createBlock","_component_neon_link","_withKeys","_withModifiers","$event","_hoisted_6","_toDisplayString"],"mappings":";;;;EAQS,OAAM;AAAA,EAAiC,UAAS;;EAa/C,KAAI;AAAA,EAAgB,OAAM;;EAwB3B,OAAM;AAAA,EAA2B,UAAS;;;EAsBvB,OAAM;AAAA,EAA6B,UAAS;;;;cAlEtEA,EAqEM,OAAA;AAAA,IApEH,OAAKC,EAAA,CAAA,EAAA,oCAAwCC,EAAA,YAAW,GACnD,qBAAqB,CAAA;AAAA,IAC3B,UAAS;AAAA,IACR,WAAO;AAAA,oCAAoBA,EAAA,YAAAA,EAAA,SAAA,GAAAC,CAAA,GAAQ,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,oCACPD,EAAA,QAAAA,EAAA,KAAA,GAAAC,CAAA,GAAI,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;IAEjCC,EAoCM,OApCNC,GAoCM;AAAA,MAnCJC,EAWEC,GAAA;AAAA,QAVC,UAAU;AAAA,QACV,UAAUL,EAAA,iBAAY;AAAA,QACtB,OAAOA,EAAA;AAAA,QACP,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,SAAOA,EAAA;AAAA;MAEVE,EAUK,MAVLI,GAUK;AAAA,SATHC,EAAA,EAAA,GAAAT,EAQKU,GAAA,MAAAC,EAPsBT,EAAA,QAAM,CAAvBU,GAAOC,YADjBb,EAQK,MAAA;AAAA,UANF,KAAKY,EAAM;AAAA;UACZ,KAAI;AAAA,UACH,OAAKX,EAAA,CAAA,EAAA,qCAAyCY,MAAUX,EAAA,aAAY,GAC/D,2BAA2B,CAAA;AAAA;UAEjCE,EAA4E,OAAA;AAAA,YAAtE,KAAKQ,EAAM;AAAA,YAAM,KAAKA,EAAM;AAAA,YAAK,OAAM;AAAA;;;MAGjDN,EAWEC,GAAA;AAAA,QAVC,UAAU;AAAA,QACV,UAAUL,EAAA,iBAAiBA,EAAA,OAAO,SAAM;AAAA,QACxC,OAAOA,EAAA;AAAA,QACP,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,SAAOA,EAAA;AAAA;;IAGZE,EAqBM,OArBNU,GAqBM;AAAA,OApBJL,EAAA,EAAA,GAAAT,EAmBYU,GAAA,MAAAC,EAlBgBT,EAAA,QAAM,CAAxBa,GAAQF,YADlBG,EAmBYC,GAAA;AAAA,QAjBT,KAAKJ;AAAA,QACL,+BAA6BA,IAAK,CAAA;AAAA,QACnC,OAAM;AAAA,QACN,iBAAc;AAAA,QACd,MAAK;AAAA,QACL,UAAS;AAAA,QACR,WAAO;AAAA,UAAqBK,EAAAC,EAAA,CAAAC,MAAAlB,EAAA,SAASW,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,UACdK,EAAAC,EAAA,CAAAC,MAAAlB,EAAA,SAASW,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;mBAE3C,MAOM;AAAA,UAPNT,EAOM,OAAA;AAAA,YANH,OAAKH,EAAA,CAAA,EAAA,yCAA6CY,MAAUX,EAAA,gBACvD,+BAA+B,CAAA;AAAA,YACrC,UAAS;AAAA,YACR,SAAK,CAAAkB,MAAElB,EAAA,SAASW,CAAK;AAAA;YAEtBT,EAA2D,OAAA,EAAtD,OAAM,0CAAyC,GAAA,MAAA,EAAA;AAAA;;;;;IAI7CF,EAAA,8BAAbF,EAEO,QAFPqB,GAEOC,EADFpB,EAAA,mBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,WAAM,IAAA,UAAA,QAAA,EAAA,GAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': expanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"expanded = false\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\" @click.stop=\"expanded = false\">\n        <neon-button\n          v-if=\"expanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"expanded = false\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"expanded = !expanded\"\n            />\n            <p v-if=\"expanded\" class=\"neon-image-carousel__item-title\">{{ image.alt }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\" @click.stop=\"expanded = false\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_createBlock","_component_neon_button","_createVNode","_hoisted_2","_Fragment","_renderList","image","index","_cache","_withModifiers","$event","_hoisted_4","_toDisplayString","_component_neon_stack","_hoisted_5","_image","_component_neon_link","_withKeys","_hoisted_7"],"mappings":"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"}

package/dist/components/user-input/toggle/NeonToggle.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),d=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),g=require("../../../common/enums/NeonToggleStyle.cjs.js"),y=require("../../../common/enums/NeonOrientation.cjs.js"),m=require("../../presentation/icon/NeonIcon.vue.cjs.js"),p=n.defineComponent({name:"NeonToggle",components:{NeonIcon:m},props:{name:{type:String,required:!0},modelValue:{type:String,required:!0},model:{type:Array,required:!0},toggleStyle:{type:String,default:()=>g.NeonToggleStyle.Toggle},size:{type:String,default:()=>d.NeonSize.Medium},orientation:{type:String,default:()=>y.NeonOrientation.Vertical},color:{type:String,default:()=>c.NeonFunctionalColor.Primary},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:i,slots:r}){const l=n.useAttrs(),o=e=>{i("update:modelValue",e)},u=e=>{!t.disabled&&!e.disabled&&t.modelValue!==e.key&&o(e.key)},s=n.computed(()=>{const{onClick:e,...a}=l;return a});return{selectOption:e=>{!t.disabled&&!e.disabled&&o(e.key)},onInput:u,sanitizedAttributes:s,slots:r}}});module.exports=p;
+"use strict";const n=require("vue"),c=require("../../../common/enums/NeonSize.cjs.js"),g=require("../../../common/enums/NeonFunctionalColor.cjs.js"),i=require("../../../common/enums/NeonToggleStyle.cjs.js"),y=require("../../../common/enums/NeonOrientation.cjs.js"),m=require("../../presentation/icon/NeonIcon.vue.cjs.js"),p=n.defineComponent({name:"NeonToggle",components:{NeonIcon:m},props:{name:{type:String,required:!0},modelValue:{type:String,required:!0},model:{type:Array,required:!0},toggleStyle:{type:String,default:()=>i.NeonToggleStyle.Toggle},size:{type:String,default:()=>c.NeonSize.Medium},orientation:{type:String,default:()=>y.NeonOrientation.Vertical},color:{type:String,default:()=>g.NeonFunctionalColor.Primary},disabled:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r,slots:l}){const u=n.useAttrs(),o=e=>{r("update:modelValue",e)},s=e=>{!t.disabled&&!e.disabled&&t.modelValue!==e.key&&o(e.key)},a=n.computed(()=>{const{onClick:e,...d}=u;return d});return{selectOption:e=>{!t.disabled&&!e.disabled&&o(e.key)},onInput:s,sanitizedAttributes:a,slots:l,NeonToggleStyle:i.NeonToggleStyle}}});module.exports=p;
 //# sourceMappingURL=NeonToggle.cjs.js.map

package/dist/components/user-input/toggle/NeonToggle.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":"kUAWAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,MAAO,CAAE,KAAM,MAAuC,SAAU,EAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,MAAA,EAIrF,KAAM,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,MAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,QAAA,EAIrF,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,OAAA,EAIvF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAaC,GAAgB,CACjCL,EAAK,oBAAqBK,CAAG,CAC/B,EAEMC,EAAWC,GAA4B,CACvC,CAACR,EAAM,UAAY,CAACQ,EAAO,UAAYR,EAAM,aAAeQ,EAAO,KACrEH,EAAUG,EAAO,GAAG,CAExB,EAEMC,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAC,EAAS,GAAGC,CAAA,EAAcT,EAClC,OAAOS,CACT,CAAC,EAQD,MAAO,CACL,aAPoBJ,GAA4B,CAC5C,CAACR,EAAM,UAAY,CAACQ,EAAO,UAC7BH,EAAUG,EAAO,GAAG,CAExB,EAIE,QAAAD,EACA,oBAAAE,EACA,MAAAP,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonToggle.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n      NeonToggleStyle,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":"kUAWAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,WAAY,CAAE,KAAM,OAAQ,SAAU,EAAA,EAItC,MAAO,CAAE,KAAM,MAAuC,SAAU,EAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,MAAA,EAIrF,KAAM,CAAE,KAAM,OAA0B,QAAS,IAAMC,EAAAA,SAAS,MAAA,EAIhE,YAAa,CAAE,KAAM,OAAiC,QAAS,IAAMC,EAAAA,gBAAgB,QAAA,EAIrF,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,OAAA,EAIvF,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAaC,GAAgB,CACjCL,EAAK,oBAAqBK,CAAG,CAC/B,EAEMC,EAAWC,GAA4B,CACvC,CAACR,EAAM,UAAY,CAACQ,EAAO,UAAYR,EAAM,aAAeQ,EAAO,KACrEH,EAAUG,EAAO,GAAG,CAExB,EAEMC,EAAsBC,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAC,EAAS,GAAGC,CAAA,EAAcT,EAClC,OAAOS,CACT,CAAC,EAQD,MAAO,CACL,aAPoBJ,GAA4B,CAC5C,CAACR,EAAM,UAAY,CAACQ,EAAO,UAC7BH,EAAUG,EAAO,GAAG,CAExB,EAIE,QAAAD,EACA,oBAAAE,EACA,MAAAP,EAAA,gBACAN,EAAAA,eAAA,CAEJ,CACF,CAAC"}

package/dist/components/user-input/toggle/NeonToggle.es.js

@@ -1,10 +1,10 @@
-import { defineComponent as u, useAttrs as m, computed as s } from "vue";
-import { NeonSize as p } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as c } from "../../../common/enums/NeonFunctionalColor.es.js";
-import { NeonToggleStyle as f } from "../../../common/enums/NeonToggleStyle.es.js";
+import { defineComponent as m, useAttrs as s, computed as p } from "vue";
+import { NeonSize as c } from "../../../common/enums/NeonSize.es.js";
+import { NeonFunctionalColor as f } from "../../../common/enums/NeonFunctionalColor.es.js";
+import { NeonToggleStyle as r } from "../../../common/enums/NeonToggleStyle.es.js";
 import { NeonOrientation as y } from "../../../common/enums/NeonOrientation.es.js";
 import g from "../../presentation/icon/NeonIcon.vue.es.js";
-const A = u({
+const A = m({
   name: "NeonToggle",
   components: {
     NeonIcon: g
@@ -25,11 +25,11 @@ const A = u({
     /**
      * The style of toggle to display to the user.
      */
-    toggleStyle: { type: String, default: () => f.Toggle },
+    toggleStyle: { type: String, default: () => r.Toggle },
     /**
      * The size of the toggle.
      */
-    size: { type: String, default: () => p.Medium },
+    size: { type: String, default: () => c.Medium },
     /**
      * The orientation of the toggle if the style is a radio button group.
      */
@@ -37,7 +37,7 @@ const A = u({
     /**
      * The color of the toggle.
      */
-    color: { type: String, default: () => c.Primary },
+    color: { type: String, default: () => f.Primary },
     /**
      * Whether the toggle is disabled.
      */
@@ -50,22 +50,23 @@ const A = u({
      */
     "update:modelValue"
   ],
-  setup(t, { emit: r, slots: n }) {
-    const i = m(), o = (e) => {
-      r("update:modelValue", e);
-    }, l = (e) => {
+  setup(t, { emit: n, slots: i }) {
+    const l = s(), o = (e) => {
+      n("update:modelValue", e);
+    }, a = (e) => {
       !t.disabled && !e.disabled && t.modelValue !== e.key && o(e.key);
-    }, a = s(() => {
-      const { onClick: e, ...d } = i;
-      return d;
+    }, d = p(() => {
+      const { onClick: e, ...u } = l;
+      return u;
     });
     return {
       selectOption: (e) => {
         !t.disabled && !e.disabled && o(e.key);
       },
-      onInput: l,
-      sanitizedAttributes: a,
-      slots: n
+      onInput: a,
+      sanitizedAttributes: d,
+      slots: i,
+      NeonToggleStyle: r
     };
   }
 });

package/dist/components/user-input/toggle/NeonToggle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":";;;;;;AAWA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,YAAY,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,OAAO,EAAE,MAAM,OAAuC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,OAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,MAAM,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,SAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,OAAO,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIvF,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAQC,EAAA,GACRC,IAAY,CAACC,MAAgB;AACjC,MAAAL,EAAK,qBAAqBK,CAAG;AAAA,IAC/B,GAEMC,IAAU,CAACC,MAA4B;AAC3C,MAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAAYR,EAAM,eAAeQ,EAAO,OACrEH,EAAUG,EAAO,GAAG;AAAA,IAExB,GAEMC,IAAsBC,EAAS,MAAM;AAEzC,YAAM,EAAE,SAAAC,GAAS,GAAGC,EAAA,IAAcT;AAClC,aAAOS;AAAA,IACT,CAAC;AAQD,WAAO;AAAA,MACL,cAPmB,CAACJ,MAA4B;AAChD,QAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAC7BH,EAAUG,EAAO,GAAG;AAAA,MAExB;AAAA,MAIE,SAAAD;AAAA,MACA,qBAAAE;AAAA,MACA,OAAAP;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonToggle.es.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport type { NeonToggleModel } from '@/common/models/NeonToggleModel';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonToggleStyle } from '@/common/enums/NeonToggleStyle';\nimport { NeonOrientation } from '@/common/enums/NeonOrientation';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\n\n/**\n * <p>A toggle component for selecting one value from a range of options. This is equivalent to a radio button group. It can be styled as a <em>Toggle</em> or as <em>Radio buttons</em>.\n */\nexport default defineComponent({\n  name: 'NeonToggle',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The name of the radio button group.\n     */\n    name: { type: String, required: true },\n    /**\n     * The key of the selected option.\n     */\n    modelValue: { type: String, required: true },\n    /**\n     * The list of options to present to the user.\n     */\n    model: { type: Array as () => Array<NeonToggleModel>, required: true },\n    /**\n     * The style of toggle to display to the user.\n     */\n    toggleStyle: { type: String as () => NeonToggleStyle, default: () => NeonToggleStyle.Toggle },\n    /**\n     * The size of the toggle.\n     */\n    size: { type: String as () => NeonSize, default: () => NeonSize.Medium },\n    /**\n     * The orientation of the toggle if the style is a radio button group.\n     */\n    orientation: { type: String as () => NeonOrientation, default: () => NeonOrientation.Vertical },\n    /**\n     * The color of the toggle.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Primary },\n    /**\n     * Whether the toggle is disabled.\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the selected value changes.\n     * @type {string} The key of the selected model item.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit, slots }) {\n    const attrs = useAttrs();\n    const emitInput = (key: string) => {\n      emit('update:modelValue', key);\n    };\n\n    const onInput = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled && props.modelValue !== option.key) {\n        emitInput(option.key);\n      }\n    };\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const selectOption = (option: NeonToggleModel) => {\n      if (!props.disabled && !option.disabled) {\n        emitInput(option.key);\n      }\n    };\n\n    return {\n      selectOption,\n      onInput,\n      sanitizedAttributes,\n      slots,\n      NeonToggleStyle,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonToggleStyle","NeonSize","NeonOrientation","NeonFunctionalColor","props","emit","slots","attrs","useAttrs","emitInput","key","onInput","option","sanitizedAttributes","computed","onClick","sanitized"],"mappings":";;;;;;AAWA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,YAAY,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,OAAO,EAAE,MAAM,OAAuC,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,OAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,MAAM,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAIhE,aAAa,EAAE,MAAM,QAAiC,SAAS,MAAMC,EAAgB,SAAA;AAAA;AAAA;AAAA;AAAA,IAIrF,OAAO,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIvF,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAQC,EAAA,GACRC,IAAY,CAACC,MAAgB;AACjC,MAAAL,EAAK,qBAAqBK,CAAG;AAAA,IAC/B,GAEMC,IAAU,CAACC,MAA4B;AAC3C,MAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAAYR,EAAM,eAAeQ,EAAO,OACrEH,EAAUG,EAAO,GAAG;AAAA,IAExB,GAEMC,IAAsBC,EAAS,MAAM;AAEzC,YAAM,EAAE,SAAAC,GAAS,GAAGC,EAAA,IAAcT;AAClC,aAAOS;AAAA,IACT,CAAC;AAQD,WAAO;AAAA,MACL,cAPmB,CAACJ,MAA4B;AAChD,QAAI,CAACR,EAAM,YAAY,CAACQ,EAAO,YAC7BH,EAAUG,EAAO,GAAG;AAAA,MAExB;AAAA,MAIE,SAAAD;AAAA,MACA,qBAAAE;AAAA,MACA,OAAAP;AAAA,MACA,iBAAAN;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/user-input/toggle/NeonToggle.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const d=require("./NeonToggle.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-checked","aria-disabled","tabindex","onKeydown"],i=["checked","disabled","name","value","onClick"],c={key:0,class:"neon-toggle__radio-button"},g={key:0,class:"neon-toggle__radio-button-indicator"},b={key:1};function u(l,m,y,_,h,p){const a=e.resolveComponent("neon-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-toggle--${l.toggleStyle}`,`neon-toggle--${l.disabled?"low-contrast":l.color}`,`neon-toggle--${l.orientation}`,`neon-toggle--${l.size}`,{"neon-toggle--disabled":l.disabled}],"neon-toggle"]),role:"radiogroup"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.model,(n,t)=>(e.openBlock(),e.createElementBlock("label",{key:n.key,"aria-checked":n.key===l.modelValue,"aria-disabled":l.disabled||n.disabled,class:e.normalizeClass([{"neon-toggle__label--disabled":l.disabled||n.disabled,"neon-toggle__label--checked":n.key===l.modelValue,"neon-toggle__label--with-icon":n.icon,"neon-toggle__label--with-slot-override":l.slots.option,"neon-toggle__label--with-text":n.label},"neon-toggle__label no-style"]),tabindex:!l.disabled&&!n.disabled?0:void 0,role:"radio",onKeydown:[e.withKeys(o=>l.selectOption(n),["enter"]),e.withKeys(e.withModifiers(o=>l.selectOption(n),["prevent"]),["space"])]},[e.createElementVNode("input",e.mergeProps({checked:n.key===l.modelValue,disabled:l.disabled||n.disabled,name:l.name,tabindex:-1,value:n.key,class:"neon-toggle__input",type:"radio"},{ref_for:!0},l.sanitizedAttributes,{onClick:o=>l.onInput(n)}),null,16,i),l.toggleStyle==="radio-buttons"?(e.openBlock(),e.createElementBlock("div",c,[n.key===l.modelValue?(e.openBlock(),e.createElementBlock("div",g)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"option",{index:t,option:n},()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,disabled:l.disabled||n.disabled,name:n.icon},null,8,["disabled","name"])):e.createCommentVNode("",!0),n.label?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(n.label),1)):e.createCommentVNode("",!0)])],42,r))),128))],2)}const k=s(d,[["render",u]]);module.exports=k;
+"use strict";const t=require("./NeonToggle.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-checked","aria-disabled","tabindex","onKeydown"],i=["checked","disabled","name","value","onClick"],c={key:0,class:"neon-toggle__radio-button"},g={key:0,class:"neon-toggle__radio-button-indicator"},b={key:1};function u(l,m,y,_,h,p){const a=e.resolveComponent("neon-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[`neon-toggle--${l.toggleStyle}`,`neon-toggle--${l.disabled?"low-contrast":l.color}`,`neon-toggle--${l.orientation}`,`neon-toggle--${l.size}`,{"neon-toggle--disabled":l.disabled}],"neon-toggle"]),role:"radiogroup"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.model,(n,d)=>(e.openBlock(),e.createElementBlock("label",{key:n.key,"aria-checked":n.key===l.modelValue,"aria-disabled":l.disabled||n.disabled,class:e.normalizeClass([{"neon-toggle__label--disabled":l.disabled||n.disabled,"neon-toggle__label--checked":n.key===l.modelValue,"neon-toggle__label--with-icon":n.icon,"neon-toggle__label--with-slot-override":l.slots.option,"neon-toggle__label--with-text":n.label},"neon-toggle__label no-style"]),tabindex:!l.disabled&&!n.disabled?0:void 0,role:"radio",onKeydown:[e.withKeys(o=>l.selectOption(n),["enter"]),e.withKeys(e.withModifiers(o=>l.selectOption(n),["prevent"]),["space"])]},[e.createElementVNode("input",e.mergeProps({checked:n.key===l.modelValue,disabled:l.disabled||n.disabled,name:l.name,tabindex:-1,value:n.key,class:"neon-toggle__input",type:"radio"},{ref_for:!0},l.sanitizedAttributes,{onClick:o=>l.onInput(n)}),null,16,i),l.toggleStyle!==l.NeonToggleStyle.Toggle?(e.openBlock(),e.createElementBlock("div",c,[n.key===l.modelValue?(e.openBlock(),e.createElementBlock("div",g)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"option",{index:d,option:n},()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,disabled:l.disabled||n.disabled,name:n.icon},null,8,["disabled","name"])):e.createCommentVNode("",!0),n.label?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(n.label),1)):e.createCommentVNode("",!0)])],42,r))),128))],2)}const k=s(t,[["render",u]]);module.exports=k;
 //# sourceMappingURL=NeonToggle.vue.cjs.js.map

package/dist/components/user-input/toggle/NeonToggle.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonToggle.vue.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle === 'radio-buttons'\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":"0PAyCkD,MAAM,sCACV,MAAM,sIAzClDA,EAAAA,mBAiDM,MAAA,CAhDH,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,WAAW,GAA0B,gBAAAA,EAAA,wBAA4BA,EAAA,KAAK,mBAA0BA,EAAA,WAAW,mBAA0BA,EAAA,IAAI,4BAAqCA,EAAA,QAAQ,GAOhN,aAAa,CAAA,EACnB,KAAK,gBAELC,EAAAA,UAAA,EAAA,EAAAH,EAAAA,mBAqCQI,WAAA,KAAAC,EAAAA,WApCoBH,EAAA,MAAK,CAAvBI,EAAQC,mBADlBP,EAAAA,mBAqCQ,QAAA,CAnCL,IAAKM,EAAO,IACZ,eAAcA,EAAO,MAAQJ,EAAA,WAC7B,gBAAeA,EAAA,UAAYI,EAAO,SAClC,MAAKL,EAAAA,eAAA,CAAA,gCAA4CC,EAAA,UAAYI,EAAO,uCAAiDA,EAAO,MAAQJ,EAAA,WAAqD,gCAAAI,EAAO,KAAwD,yCAAAJ,EAAA,MAAM,OAAiD,gCAAAI,EAAO,OAQjT,6BAA6B,CAAA,EADlC,UAAWJ,EAAA,UAAQ,CAAKI,EAAO,WAAe,OAE/C,KAAK,QACJ,UAAO,CAAQE,EAAAA,SAAAC,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,OAAA,CAAA,EACXE,EAAAA,SAAAE,EAAAA,cAAAD,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAE3CK,EAAAA,mBAUE,QAVFC,aAUE,CATC,QAASN,EAAO,MAAQJ,EAAA,WACxB,SAAUA,EAAA,UAAYI,EAAO,SAC7B,KAAMJ,EAAA,KACN,SAAU,GACV,MAAOI,EAAO,IACf,MAAM,qBACN,KAAK,sBACGJ,EAAA,oBAAmB,CAC1B,QAAKO,GAAEP,EAAA,QAAQI,CAAM,eAEbJ,EAAA,cAAW,iBAAtBC,EAAAA,YAAAH,EAAAA,mBAEM,MAFNa,EAEM,CADOP,EAAO,MAAQJ,EAAA,YAA1BC,EAAAA,YAAAH,EAAAA,mBAAwF,MAAxFc,CAAwF,8DAG1FC,aAGOb,EAAA,OAAA,SAAA,CAHA,MAAOK,EAAQ,OAAQD,GAA9B,IAGO,CAFYA,EAAO,oBAAxBU,EAAAA,YAA4FC,EAAA,OAA7D,SAAUf,EAAA,UAAYI,EAAO,SAAW,KAAMA,EAAO,+DACxEA,EAAO,qBAAnBN,EAAAA,mBAAmD,OAAAkB,EAAAC,EAAAA,gBAAtBb,EAAO,KAAK,EAAA,CAAA"}
+{"version":3,"file":"NeonToggle.vue.cjs.js","sources":["../../../../src/components/user-input/toggle/NeonToggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-toggle--${toggleStyle}`,\n      `neon-toggle--${disabled ? 'low-contrast' : color}`,\n      `neon-toggle--${orientation}`,\n      `neon-toggle--${size}`,\n      { 'neon-toggle--disabled': disabled },\n    ]\"\n    class=\"neon-toggle\"\n    role=\"radiogroup\"\n  >\n    <label\n      v-for=\"(option, index) in model\"\n      :key=\"option.key\"\n      :aria-checked=\"option.key === modelValue\"\n      :aria-disabled=\"disabled || option.disabled\"\n      :class=\"{\n        'neon-toggle__label--disabled': disabled || option.disabled,\n        'neon-toggle__label--checked': option.key === modelValue,\n        'neon-toggle__label--with-icon': option.icon,\n        'neon-toggle__label--with-slot-override': slots.option,\n        'neon-toggle__label--with-text': option.label,\n      }\"\n      :tabindex=\"!disabled && !option.disabled ? 0 : undefined\"\n      class=\"neon-toggle__label no-style\"\n      role=\"radio\"\n      @keydown.enter=\"selectOption(option)\"\n      @keydown.space.prevent=\"selectOption(option)\"\n    >\n      <input\n        :checked=\"option.key === modelValue\"\n        :disabled=\"disabled || option.disabled\"\n        :name=\"name\"\n        :tabindex=\"-1\"\n        :value=\"option.key\"\n        class=\"neon-toggle__input\"\n        type=\"radio\"\n        v-bind=\"sanitizedAttributes\"\n        @click=\"onInput(option)\"\n      />\n      <div v-if=\"toggleStyle !== NeonToggleStyle.Toggle\" class=\"neon-toggle__radio-button\">\n        <div v-if=\"option.key === modelValue\" class=\"neon-toggle__radio-button-indicator\"></div>\n      </div>\n      <!-- @slot This slot is for overriding the option rendering, it is passed two arguments, <em>option</em> - the option model & <em>index</em> -->\n      <slot :index=\"index\" :option=\"option\" name=\"option\">\n        <neon-icon v-if=\"option.icon\" :disabled=\"disabled || option.disabled\" :name=\"option.icon\" />\n        <span v-if=\"option.label\">{{ option.label }}</span>\n      </slot>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonToggle.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_openBlock","_Fragment","_renderList","option","index","_withKeys","$event","_withModifiers","_createElementVNode","_mergeProps","_hoisted_3","_hoisted_4","_renderSlot","_createBlock","_component_neon_icon","_hoisted_5","_toDisplayString"],"mappings":"0PAyCyD,MAAM,sCACjB,MAAM,sIAzClDA,EAAAA,mBAiDM,MAAA,CAhDH,MAAKC,EAAAA,eAAA,CAAA,iBAA0BC,EAAA,WAAW,GAA0B,gBAAAA,EAAA,wBAA4BA,EAAA,KAAK,mBAA0BA,EAAA,WAAW,mBAA0BA,EAAA,IAAI,4BAAqCA,EAAA,QAAQ,GAOhN,aAAa,CAAA,EACnB,KAAK,gBAELC,EAAAA,UAAA,EAAA,EAAAH,EAAAA,mBAqCQI,WAAA,KAAAC,EAAAA,WApCoBH,EAAA,MAAK,CAAvBI,EAAQC,mBADlBP,EAAAA,mBAqCQ,QAAA,CAnCL,IAAKM,EAAO,IACZ,eAAcA,EAAO,MAAQJ,EAAA,WAC7B,gBAAeA,EAAA,UAAYI,EAAO,SAClC,MAAKL,EAAAA,eAAA,CAAA,gCAA4CC,EAAA,UAAYI,EAAO,uCAAiDA,EAAO,MAAQJ,EAAA,WAAqD,gCAAAI,EAAO,KAAwD,yCAAAJ,EAAA,MAAM,OAAiD,gCAAAI,EAAO,OAQjT,6BAA6B,CAAA,EADlC,UAAWJ,EAAA,UAAQ,CAAKI,EAAO,WAAe,OAE/C,KAAK,QACJ,UAAO,CAAQE,EAAAA,SAAAC,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,OAAA,CAAA,EACXE,EAAAA,SAAAE,EAAAA,cAAAD,GAAAP,EAAA,aAAaI,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,KAE3CK,EAAAA,mBAUE,QAVFC,aAUE,CATC,QAASN,EAAO,MAAQJ,EAAA,WACxB,SAAUA,EAAA,UAAYI,EAAO,SAC7B,KAAMJ,EAAA,KACN,SAAU,GACV,MAAOI,EAAO,IACf,MAAM,qBACN,KAAK,sBACGJ,EAAA,oBAAmB,CAC1B,QAAKO,GAAEP,EAAA,QAAQI,CAAM,eAEbJ,EAAA,cAAgBA,EAAA,gBAAgB,QAA3CC,EAAAA,YAAAH,EAAAA,mBAEM,MAFNa,EAEM,CADOP,EAAO,MAAQJ,EAAA,YAA1BC,EAAAA,YAAAH,EAAAA,mBAAwF,MAAxFc,CAAwF,8DAG1FC,aAGOb,EAAA,OAAA,SAAA,CAHA,MAAOK,EAAQ,OAAQD,GAA9B,IAGO,CAFYA,EAAO,oBAAxBU,EAAAA,YAA4FC,EAAA,OAA7D,SAAUf,EAAA,UAAYI,EAAO,SAAW,KAAMA,EAAO,+DACxEA,EAAO,qBAAnBN,EAAAA,mBAAmD,OAAAkB,EAAAC,EAAAA,gBAAtBb,EAAO,KAAK,EAAA,CAAA"}