@aotearoan/neon 19.0.0 → 19.0.2

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

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.cjs.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     * 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":"sJAaAA,EAAeC,kBAAgB,CAC7B,KAAM,oBACN,WAAY,CACV,WAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,OAAQ,CAAE,KAAM,MAAyC,SAAU,EAAA,EAKnE,gBAAiB,CAAE,KAAM,OAAQ,QAAS,MAAA,EAI1C,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAIxC,UAAW,CAAE,KAAM,OAAQ,QAAS,MAAA,CAAO,EAE7C,MAAO,CAML,eAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAcC,EAAAA,IAAa,EAAK,EAChCC,EAAeD,EAAAA,IAAY,CAAC,EAC5BE,EAAgBF,EAAAA,IAA6B,IAAI,EACjDG,EAAeH,EAAAA,IAA0B,EAAE,EAC3CI,EAAYJ,EAAAA,IAAiC,EAAE,EAE/CK,EAAeC,GAAkB,CACjCA,IAAUL,EAAa,QACzBA,EAAa,MAAQK,EACrBR,EAAK,gBAAiBQ,CAAK,EAE/B,EAEMC,EAAYD,GAAkB,CAC9BJ,EAAc,OAASL,EAAM,OAAO,OAAS,IAC/CQ,EAAYC,CAAK,EACjBJ,EAAc,MAAM,SAASA,EAAc,MAAM,YAAcI,EAAO,CAAC,EAE3E,EAEME,EAAO,IAAM,CACbP,EAAa,MAAQJ,EAAM,OAAO,OAAS,GAC7CU,EAASN,EAAa,MAAQ,CAAC,CAEnC,EAEMQ,EAAW,IAAM,CACjBR,EAAa,QAAU,GACzBM,EAASN,EAAa,MAAQ,CAAC,CAEnC,EAEAS,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAU,CACd,KAAMT,EAAc,MACpB,WAAY,MACZ,UAAW,EAAA,EAGbE,EAAU,MAAQD,EAAa,MAAM,IAAI,CAACS,EAAIN,IAAU,CACtD,MAAMO,EAAM,IAAI,qBAAsBC,GAAY,CAChDA,EAAQ,QAASC,GAAU,CAErBhB,EAAY,OAASgB,EAAM,gBAC7BV,EAAYC,CAAK,CAErB,CAAC,CACH,EAAGK,CAAO,EACV,OAAAE,EAAI,QAAQD,CAAE,EAEPC,CACT,CAAC,EAED,WAAW,IAAM,CAEXX,EAAc,OAASA,EAAc,MAAM,aAAe,IAC5DA,EAAc,MAAM,WAAa,GAEnCH,EAAY,MAAQ,EACtB,EAAG,EAAE,CACP,CAAC,EAEDiB,EAAAA,YAAY,IAAM,CAChBZ,EAAU,MAAM,QAASa,GAAaA,EAAS,YAAY,CAC7D,CAAC,EAEM,CACL,KAAAnB,EACA,aAAAG,EACA,aAAAE,EACA,cAAAD,EACA,YAAAH,EACA,KAAAS,EACA,SAAAC,EACA,SAAAF,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonImageCarousel.cjs.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":"sJAaAA,EAAeC,kBAAgB,CAC7B,KAAM,oBACN,WAAY,CACV,WAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,OAAQ,CAAE,KAAM,MAAyC,SAAU,EAAA,EAKnE,gBAAiB,CAAE,KAAM,OAAQ,QAAS,MAAA,EAI1C,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAIxC,UAAW,CAAE,KAAM,OAAQ,QAAS,MAAA,CAAO,EAE7C,MAAO,CAML,eAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAcC,EAAAA,IAAa,EAAK,EAChCC,EAAeD,EAAAA,IAAY,CAAC,EAC5BE,EAAgBF,EAAAA,IAA6B,IAAI,EACjDG,EAAeH,EAAAA,IAA0B,EAAE,EAC3CI,EAAYJ,EAAAA,IAAiC,EAAE,EAE/CK,EAAeC,GAAkB,CACjCA,IAAUL,EAAa,QACzBA,EAAa,MAAQK,EACrBR,EAAK,gBAAiBQ,CAAK,EAE/B,EAEMC,EAAYD,GAAkB,CAC9BJ,EAAc,OAASL,EAAM,OAAO,OAAS,IAC/CQ,EAAYC,CAAK,EACjBJ,EAAc,MAAM,SAASA,EAAc,MAAM,YAAcI,EAAO,CAAC,EAE3E,EAEME,EAAO,IAAM,CACbP,EAAa,MAAQJ,EAAM,OAAO,OAAS,GAC7CU,EAASN,EAAa,MAAQ,CAAC,CAEnC,EAEMQ,EAAW,IAAM,CACjBR,EAAa,QAAU,GACzBM,EAASN,EAAa,MAAQ,CAAC,CAEnC,EAEAS,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAU,CACd,KAAMT,EAAc,MACpB,WAAY,MACZ,UAAW,EAAA,EAGbE,EAAU,MAAQD,EAAa,MAAM,IAAI,CAACS,EAAIN,IAAU,CACtD,MAAMO,EAAM,IAAI,qBAAsBC,GAAY,CAChDA,EAAQ,QAASC,GAAU,CAErBhB,EAAY,OAASgB,EAAM,gBAC7BV,EAAYC,CAAK,CAErB,CAAC,CACH,EAAGK,CAAO,EACV,OAAAE,EAAI,QAAQD,CAAE,EAEPC,CACT,CAAC,EAED,WAAW,IAAM,CAEXX,EAAc,OAASA,EAAc,MAAM,aAAe,IAC5DA,EAAc,MAAM,WAAa,GAEnCH,EAAY,MAAQ,EACtB,EAAG,EAAE,CACP,CAAC,EAEDiB,EAAAA,YAAY,IAAM,CAChBZ,EAAU,MAAM,QAASa,GAAaA,EAAS,YAAY,CAC7D,CAAC,EAEM,CACL,KAAAnB,EACA,aAAAG,EACA,aAAAE,EACA,cAAAD,EACA,YAAAH,EACA,KAAAS,EACA,SAAAC,EACA,SAAAF,CAAA,CAEJ,CACF,CAAC"}

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

@@ -17,6 +17,10 @@ const x = b({
      * <em>2 images</em>.
      */
     imageCountLabel: { type: String, default: void 0 },
+    /**
+     * Hide the label under the dot navigation.
+     */
+    hideLabel: { type: Boolean, default: !1 },
     /**
      * Provide an alternative label for the Previous button.
      */
@@ -34,15 +38,15 @@ const x = b({
      */
     "current-image"
   ],
-  setup(s, { emit: l }) {
-    const r = n(!1), o = n(0), t = n(null), u = n([]), i = n([]), c = (e) => {
-      e !== o.value && (o.value = e, l("current-image", e));
-    }, a = (e) => {
-      t.value && s.images.length > 0 && (c(e), t.value.scrollTo(t.value.clientWidth * e, 0));
+  setup(l, { emit: s }) {
+    const a = n(!1), o = n(0), t = n(null), u = n([]), i = n([]), c = (e) => {
+      e !== o.value && (o.value = e, s("current-image", e));
+    }, r = (e) => {
+      t.value && l.images.length > 0 && (c(e), t.value.scrollTo(t.value.clientWidth * e, 0));
     }, m = () => {
-      o.value < s.images.length - 1 && a(o.value + 1);
+      o.value < l.images.length - 1 && r(o.value + 1);
     }, f = () => {
-      o.value !== 0 && a(o.value - 1);
+      o.value !== 0 && r(o.value - 1);
     };
     return I(() => {
       const e = {
@@ -53,24 +57,24 @@ const x = b({
       i.value = u.value.map((g, p) => {
         const v = new IntersectionObserver((d) => {
           d.forEach((h) => {
-            r.value && h.isIntersecting && c(p);
+            a.value && h.isIntersecting && c(p);
           });
         }, e);
         return v.observe(g), v;
       }), setTimeout(() => {
-        t.value && t.value.scrollLeft !== 0 && (t.value.scrollLeft = 0), r.value = !0;
+        t.value && t.value.scrollLeft !== 0 && (t.value.scrollLeft = 0), a.value = !0;
       }, 50);
     }), L(() => {
       i.value.forEach((e) => e.disconnect());
     }), {
-      emit: l,
+      emit: s,
       currentImage: o,
       carouselItem: u,
       carouselItems: t,
-      initialised: r,
+      initialised: a,
       next: m,
       previous: f,
-      scrollTo: a
+      scrollTo: r
     };
   }
 });

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     * 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,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 } 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;"}

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"],_={class:"neon-image-carousel__label",tabindex:"-1"};function v(n,l,k,h,y,C){const s=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(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(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(r=>n.scrollTo(t),["stop","prevent"]),["enter"]),e.withKeys(e.withModifiers(r=>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:r=>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))]),e.createElementVNode("span",_,e.toDisplayString(n.imageCountLabel||`${n.images.length} ${n.images.length===1?"image":"images"}`),1)],34)}const b=c(i,[["render",v]]);module.exports=b;
+"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;
 //# 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 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,uBAsBzC,MAAM,6BAA6B,SAAS,+HAlEpDA,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,6DAI1DA,qBAEO,OAFPiB,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\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"}

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

@@ -1,31 +1,32 @@
 import b from "./NeonImageCarousel.es.js";
-import { resolveComponent as g, openBlock as l, createElementBlock as s, withKeys as i, withModifiers as r, normalizeClass as u, createElementVNode as t, createVNode as d, Fragment as p, renderList as v, createBlock as f, withCtx as k, toDisplayString as y } from "vue";
-import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const C = {
+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 = {
   ref: "carouselItems",
   class: "no-style neon-image-carousel__items"
-}, I = ["alt", "src"], w = {
+}, w = ["alt", "src"], L = {
   class: "neon-image-carousel__nav",
   tabindex: "-1"
-}, K = ["onClick"], L = {
+}, K = ["onClick"], N = {
+  key: 0,
   class: "neon-image-carousel__label",
   tabindex: "-1"
 };
-function z(e, a, B, N, T, D) {
-  const m = g("neon-button"), _ = g("neon-link");
-  return l(), s("div", {
+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: [
-      a[0] || (a[0] = i(r((...n) => e.previous && e.previous(...n), ["stop", "prevent"]), ["left"])),
-      a[1] || (a[1] = i(r((...n) => e.next && e.next(...n), ["stop", "prevent"]), ["right"]))
+      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"]))
     ]
   }, [
-    t("div", C, [
-      d(m, {
+    l("div", $, [
+      g(m, {
         circular: !0,
         disabled: e.currentImage === 0,
         title: e.previousLabel,
@@ -37,21 +38,21 @@ function z(e, a, B, N, T, D) {
         size: "l",
         onClick: e.previous
       }, null, 8, ["disabled", "title", "onClick"]),
-      t("ul", $, [
-        (l(!0), s(p, null, v(e.images, (n, o) => (l(), s("li", {
+      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"])
         }, [
-          t("img", {
+          l("img", {
             alt: n.alt,
             src: n.src,
             class: "neon-image-carousel__image"
-          }, null, 8, I)
+          }, null, 8, w)
         ], 2))), 128))
       ], 512),
-      d(m, {
+      g(m, {
         circular: !0,
         disabled: e.currentImage === e.images.length - 1,
         title: e.nextLabel,
@@ -64,8 +65,8 @@ function z(e, a, B, N, T, D) {
         onClick: e.next
       }, null, 8, ["disabled", "title", "onClick"])
     ]),
-    t("div", w, [
-      (l(!0), s(p, null, v(e.images, (n, o) => (l(), f(_, {
+    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",
@@ -78,22 +79,22 @@ function z(e, a, B, N, T, D) {
         ]
       }, {
         default: k(() => [
-          t("div", {
+          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)
-          }, [...a[2] || (a[2] = [
-            t("div", { class: "neon-image-carousel__nav-item-indicator" }, null, -1)
+          }, [...t[2] || (t[2] = [
+            l("div", { class: "neon-image-carousel__nav-item-indicator" }, null, -1)
           ])], 10, K)
         ]),
         _: 2
       }, 1032, ["aria-label", "onKeydown"]))), 128))
     ]),
-    t("span", L, y(e.imageCountLabel || `${e.images.length} ${e.images.length === 1 ? "image" : "images"}`), 1)
+    e.hideLabel ? h("", !0) : (a(), s("span", N, y(e.imageCountLabel || `${e.images.length} ${e.images.length === 1 ? "image" : "images"}`), 1))
   ], 34);
 }
-const M = /* @__PURE__ */ h(b, [["render", z]]);
+const S = /* @__PURE__ */ C(b, [["render", z]]);
 export {
-  M as default
+  S 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 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;;EAsBzC,OAAM;AAAA,EAA6B,UAAS;;;;cAlEpDA,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;;;;;IAI1DA,EAEO,QAFPiB,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\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;;;"}

package/dist/components/user-input/input/NeonInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),a=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),w=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),q=require("../../../common/utils/NeonDebounceUtils.cjs.js"),F=require("../../../common/enums/NeonInputMode.cjs.js"),T=n.defineComponent({name:"NeonInput",components:{NeonIcon:B},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:a.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:w.NeonSize.Medium},color:{type:String,default:c.NeonFunctionalColor.Primary},inputmode:{type:String,default:F.NeonInputMode.Text},state:{type:String,default:o.NeonState.Ready},rows:{type:Number,default:null},icon:{type:String,default:null},iconReadonly:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},tabindex:{type:Number,default:0},disabled:{type:Boolean,default:!1},stateHighlight:{type:Boolean,default:!0},stateIcon:{type:Boolean,default:!0},maxlength:{type:Number,default:null},debounce:{type:Number,default:void 0}},emits:["focus","blur","icon-click","update:modelValue"],setup(e,{emit:l}){const m=n.useAttrs(),i=n.ref(null),r=n.ref(!1),y=n.computed(()=>{const{onBlur:t,onFocus:u,onIconClick:d,...C}=m;return C}),s=q.NeonDebounceUtils.debounce(t=>{l("update:modelValue",t)},e.debounce),f=n.computed(()=>{switch(e.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return e.stateIcon?"check":void 0;case o.NeonState.Error:return e.stateIcon?"times":void 0;default:return e.icon?e.icon:e.modelValue&&e.modelValue.length>0?"times":void 0}}),N=n.computed(()=>f.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&e.modelValue.length>0)),g=n.computed(()=>{switch(e.state){case o.NeonState.Success:return c.NeonFunctionalColor.Success;case o.NeonState.Error:return c.NeonFunctionalColor.Error;case o.NeonState.Loading:return e.color;default:return c.NeonFunctionalColor.LowContrast}}),h=()=>{var t;(t=i.value)==null||t.focus()},S=()=>{var t;(t=i.value)==null||t.click()},b=()=>{r.value=!0,l("focus")},I=()=>{r.value=!1,l("blur")},v=t=>{e.disabled||(e.icon?l("icon-click"):s(""),t.preventDefault(),t.stopPropagation())},V=t=>{const u=t.target.value,d=e.maxlength&&u.length>e.maxlength?u.substring(0,e.maxlength):u;e.modelValue!==d&&s(d)},k=t=>{t.key!=="Backspace"&&e.maxlength&&e.modelValue&&e.modelValue.length>=e.maxlength&&t.preventDefault()},x=n.computed(()=>{if(e.placeholder)return e.placeholder;switch(e.type){case a.NeonInputType.Email:return"gbelson@hooli.com";case a.NeonInputType.Tel:return"+41785551234";case a.NeonInputType.Url:return"http://www.getskeleton.com";default:return""}});return{neonInput:i,focused:r,sanitizedAttributes:y,iconVisible:N,iconName:f,iconColor:g,computedPlaceholder:x,focus:h,click:S,onFocus:b,onBlur:I,iconClicked:v,changeValue:V,onKeyDown:k}}});module.exports=T;
+"use strict";const n=require("vue"),c=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),w=require("../../../common/enums/NeonSize.cjs.js"),i=require("../../../common/enums/NeonFunctionalColor.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),q=require("../../../common/utils/NeonDebounceUtils.cjs.js"),F=require("../../../common/enums/NeonInputMode.cjs.js"),T=n.defineComponent({name:"NeonInput",components:{NeonIcon:B},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:c.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:w.NeonSize.Medium},color:{type:String,default:i.NeonFunctionalColor.Primary},inputmode:{type:String,default:F.NeonInputMode.Text},autocomplete:{type:String,default:"on"},state:{type:String,default:o.NeonState.Ready},rows:{type:Number,default:null},icon:{type:String,default:null},iconReadonly:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},tabindex:{type:Number,default:0},disabled:{type:Boolean,default:!1},stateHighlight:{type:Boolean,default:!0},stateIcon:{type:Boolean,default:!0},maxlength:{type:Number,default:null},debounce:{type:Number,default:void 0}},emits:["focus","blur","icon-click","update:modelValue"],setup(e,{emit:l}){const m=n.useAttrs(),u=n.ref(null),r=n.ref(!1),y=n.computed(()=>{const{onBlur:t,onFocus:a,onIconClick:d,...C}=m;return C}),s=q.NeonDebounceUtils.debounce(t=>{l("update:modelValue",t)},e.debounce),f=n.computed(()=>{switch(e.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return e.stateIcon?"check":void 0;case o.NeonState.Error:return e.stateIcon?"times":void 0;default:return e.icon?e.icon:e.modelValue&&e.modelValue.length>0?"times":void 0}}),g=n.computed(()=>f.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&e.modelValue.length>0)),N=n.computed(()=>{switch(e.state){case o.NeonState.Success:return i.NeonFunctionalColor.Success;case o.NeonState.Error:return i.NeonFunctionalColor.Error;case o.NeonState.Loading:return e.color;default:return i.NeonFunctionalColor.LowContrast}}),h=()=>{var t;(t=u.value)==null||t.focus()},S=()=>{var t;(t=u.value)==null||t.click()},b=()=>{r.value=!0,l("focus")},I=()=>{r.value=!1,l("blur")},v=t=>{e.disabled||(e.icon?l("icon-click"):s(""),t.preventDefault(),t.stopPropagation())},V=t=>{const a=t.target.value,d=e.maxlength&&a.length>e.maxlength?a.substring(0,e.maxlength):a;e.modelValue!==d&&s(d)},x=t=>{t.key!=="Backspace"&&e.maxlength&&e.modelValue&&e.modelValue.length>=e.maxlength&&t.preventDefault()},k=n.computed(()=>{if(e.placeholder)return e.placeholder;switch(e.type){case c.NeonInputType.Email:return"gbelson@hooli.com";case c.NeonInputType.Tel:return"+41785551234";case c.NeonInputType.Url:return"http://www.getskeleton.com";default:return""}});return n.defineExpose({neonInput:u}),{neonInput:u,focused:r,sanitizedAttributes:y,iconVisible:g,iconName:f,iconColor:N,computedPlaceholder:k,focus:h,click:S,onFocus:b,onBlur:I,iconClicked:v,changeValue:V,onKeyDown:x}}});module.exports=T;
 //# sourceMappingURL=NeonInput.cjs.js.map

package/dist/components/user-input/input/NeonInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n  name: 'NeonInput',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the input\n     */\n    modelValue: { type: String, default: null },\n    /**\n     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n     * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n     * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n     */\n    type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Size of the input\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * Color of the input\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * The state of the input\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The number of rows to display in the case of a textarea\n     */\n    rows: { type: Number, default: null },\n    /**\n     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n     */\n    icon: { type: String, default: null },\n    /**\n     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n     */\n    iconReadonly: { type: Boolean, default: false },\n    /**\n     * Hide the icon button, e.g. the X button to clear the input's contents.\n     */\n    hideIcon: { type: Boolean, default: false },\n    /**\n     * Tabindex to assign to the input.\n     */\n    tabindex: { type: Number, default: 0 },\n    /**\n     * The disabled state of the input\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * When the state is success or error, display the field with the state color indicator, e.g. border or background\n     * color.\n     */\n    stateHighlight: { type: Boolean, default: true },\n    /**\n     * When the state is success or error, display the state icon.\n     */\n    stateIcon: { type: Boolean, default: true },\n    /**\n     * The character limit for a textarea.\n     */\n    maxlength: { type: Number, default: null },\n    /**\n     * Debounce time in ms, if no value is provided the default value set in NeonDebounceUtils is used (=300ms).\n     * Set to 0 to disable debounce.\n     */\n    debounce: { type: Number, default: undefined },\n  },\n  emits: [\n    /**\n     * Emitted when the input has gained focus\n     * @type {void}\n     */\n    'focus',\n    /**\n     * Emitted when the input has lost focus\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the icon is clicked\n     * @type {void}\n     */\n    'icon-click',\n    /**\n     * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n     * @type {string} the contents of the input\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const neonInput = ref<HTMLElement | null>(null);\n    const focused = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      const {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onBlur,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onFocus,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onIconClick,\n        ...sanitized\n      } = attrs;\n\n      return sanitized;\n    });\n\n    const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n      emit('update:modelValue', value);\n    }, props.debounce);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return props.stateIcon ? 'check' : undefined;\n        case NeonState.Error:\n          return props.stateIcon ? 'times' : undefined;\n        default:\n          if (props.icon) {\n            return props.icon;\n          } else if (props.modelValue && props.modelValue.length > 0) {\n            return 'times';\n          }\n\n          return undefined;\n      }\n    });\n\n    const iconVisible = computed(() => {\n      return (\n        iconName.value &&\n        !props.hideIcon &&\n        (props.state !== 'ready' || props.icon || (props.modelValue && !props.disabled && props.modelValue.length > 0))\n      );\n    });\n\n    const iconColor = computed(() => {\n      switch (props.state) {\n        case NeonState.Success:\n          return NeonFunctionalColor.Success;\n        case NeonState.Error:\n          return NeonFunctionalColor.Error;\n        case NeonState.Loading:\n          return props.color;\n        default:\n          return NeonFunctionalColor.LowContrast;\n      }\n    });\n\n    const focus = () => {\n      neonInput.value?.focus();\n    };\n\n    const click = () => {\n      neonInput.value?.click();\n    };\n\n    const onFocus = () => {\n      focused.value = true;\n      emit('focus');\n    };\n\n    const onBlur = () => {\n      focused.value = false;\n      emit('blur');\n    };\n\n    const iconClicked = ($event: Event) => {\n      if (!props.disabled) {\n        if (props.icon) {\n          emit('icon-click');\n        } else {\n          emitModelValue('');\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: Event) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    return {\n      neonInput,\n      focused,\n      sanitizedAttributes,\n      iconVisible,\n      iconName,\n      iconColor,\n      computedPlaceholder,\n      focus,\n      click,\n      onFocus,\n      onBlur,\n      iconClicked,\n      changeValue,\n      onKeyDown,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","iconVisible","iconColor","focus","_a","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder"],"mappings":"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"}
+{"version":3,"file":"NeonInput.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, defineExpose, ref, useAttrs } from 'vue';\nimport { NeonInputType } from '@/common/enums/NeonInputType';\nimport { NeonState } from '@/common/enums/NeonState';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonDebounceUtils } from '@/common/utils/NeonDebounceUtils';\nimport { NeonInputMode } from '@/common/enums/NeonInputMode';\n\n/**\n * Equivalent of, and wrapper around, an HTML input. Also supports <strong>textarea</strong>.\n */\nexport default defineComponent({\n  name: 'NeonInput',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The id the input\n     */\n    id: { type: String, default: null },\n    /**\n     * The value of the input\n     */\n    modelValue: { type: String, default: null },\n    /**\n     * The type of input this is. NOTE: Neon provides custom components as alternatives in the following cases:\n     * * file (use <a href=\"/user-input/file\">NeonFile</a>)\n     * * password (use <a href=\"/user-input/password\">NeonPassword</a>)\n     */\n    type: { type: String as () => NeonInputType, default: NeonInputType.Text },\n    /**\n     * Placeholder text to display in the input\n     */\n    placeholder: { type: String, default: null },\n    /**\n     * Size of the input\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * Color of the input\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The HTML input mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode\">here</a>.\n     */\n    inputmode: { type: String as () => NeonInputMode, default: NeonInputMode.Text },\n    /**\n     * The HTML autocomplete mode as specified <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\">here</a>.\n     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.\n     */\n    autocomplete: { type: String, default: 'on' },\n    /**\n     * The state of the input\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The number of rows to display in the case of a textarea\n     */\n    rows: { type: Number, default: null },\n    /**\n     * The name of a clickable icon to display inside the input. This is used for clearing contents or e.g. in the case of\n     * NeonPassword toggle showing/hiding the password. Defaults to <em>times</em> (for clearing the input's contents).\n     */\n    icon: { type: String, default: null },\n    /**\n     * Make the input field icon read-only, i.e. it will not emit events or be treated as a focusable button.\n     */\n    iconReadonly: { type: Boolean, default: false },\n    /**\n     * Hide the icon button, e.g. the X button to clear the input's contents.\n     */\n    hideIcon: { type: Boolean, default: false },\n    /**\n     * Tabindex to assign to the input.\n     */\n    tabindex: { type: Number, default: 0 },\n    /**\n     * The disabled state of the input\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * When the state is success or error, display the field with the state color indicator, e.g. border or background\n     * color.\n     */\n    stateHighlight: { type: Boolean, default: true },\n    /**\n     * When the state is success or error, display the state icon.\n     */\n    stateIcon: { type: Boolean, default: true },\n    /**\n     * The character limit for a textarea.\n     */\n    maxlength: { type: Number, default: null },\n    /**\n     * Debounce time in ms, if no value is provided the default value set in NeonDebounceUtils is used (=300ms).\n     * Set to 0 to disable debounce.\n     */\n    debounce: { type: Number, default: undefined },\n  },\n  emits: [\n    /**\n     * Emitted when the input has gained focus\n     * @type {void}\n     */\n    'focus',\n    /**\n     * Emitted when the input has lost focus\n     * @type {void}\n     */\n    'blur',\n    /**\n     * Emitted when the icon is clicked\n     * @type {void}\n     */\n    'icon-click',\n    /**\n     * Emitted when the input value is changed, NOTE: is not triggered if input is over the textarea length limit\n     * @type {string} the contents of the input\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n    const neonInput = ref<HTMLElement | null>(null);\n    const focused = ref(false);\n\n    const sanitizedAttributes = computed(() => {\n      const {\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onBlur,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onFocus,\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        onIconClick,\n        ...sanitized\n      } = attrs;\n\n      return sanitized;\n    });\n\n    const emitModelValue = NeonDebounceUtils.debounce((value: string) => {\n      emit('update:modelValue', value);\n    }, props.debounce);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return props.stateIcon ? 'check' : undefined;\n        case NeonState.Error:\n          return props.stateIcon ? 'times' : undefined;\n        default:\n          if (props.icon) {\n            return props.icon;\n          } else if (props.modelValue && props.modelValue.length > 0) {\n            return 'times';\n          }\n\n          return undefined;\n      }\n    });\n\n    const iconVisible = computed(() => {\n      return (\n        iconName.value &&\n        !props.hideIcon &&\n        (props.state !== 'ready' || props.icon || (props.modelValue && !props.disabled && props.modelValue.length > 0))\n      );\n    });\n\n    const iconColor = computed(() => {\n      switch (props.state) {\n        case NeonState.Success:\n          return NeonFunctionalColor.Success;\n        case NeonState.Error:\n          return NeonFunctionalColor.Error;\n        case NeonState.Loading:\n          return props.color;\n        default:\n          return NeonFunctionalColor.LowContrast;\n      }\n    });\n\n    const focus = () => {\n      neonInput.value?.focus();\n    };\n\n    const click = () => {\n      neonInput.value?.click();\n    };\n\n    const onFocus = () => {\n      focused.value = true;\n      emit('focus');\n    };\n\n    const onBlur = () => {\n      focused.value = false;\n      emit('blur');\n    };\n\n    const iconClicked = ($event: Event) => {\n      if (!props.disabled) {\n        if (props.icon) {\n          emit('icon-click');\n        } else {\n          emitModelValue('');\n        }\n        $event.preventDefault();\n        $event.stopPropagation();\n      }\n    };\n\n    const changeValue = (event: Event) => {\n      const val = (event.target as HTMLInputElement).value;\n      const v = props.maxlength && val.length > props.maxlength ? val.substring(0, props.maxlength) : val;\n      if (props.modelValue !== v) {\n        emitModelValue(v);\n      }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key !== 'Backspace' &&\n        props.maxlength &&\n        props.modelValue &&\n        props.modelValue.length >= props.maxlength\n      ) {\n        event.preventDefault();\n      }\n    };\n\n    const computedPlaceholder = computed(() => {\n      if (props.placeholder) {\n        return props.placeholder;\n      } else {\n        switch (props.type) {\n          case NeonInputType.Email:\n            return 'gbelson@hooli.com';\n          case NeonInputType.Tel:\n            return '+41785551234';\n          case NeonInputType.Url:\n            return 'http://www.getskeleton.com';\n          default:\n            return '';\n        }\n      }\n    });\n\n    defineExpose({ neonInput });\n\n    return {\n      neonInput,\n      focused,\n      sanitizedAttributes,\n      iconVisible,\n      iconName,\n      iconColor,\n      computedPlaceholder,\n      focus,\n      click,\n      onFocus,\n      onBlur,\n      iconClicked,\n      changeValue,\n      onKeyDown,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonInputType","NeonSize","NeonFunctionalColor","NeonInputMode","NeonState","props","emit","attrs","useAttrs","neonInput","ref","focused","sanitizedAttributes","computed","onBlur","onFocus","onIconClick","sanitized","emitModelValue","NeonDebounceUtils","value","iconName","iconVisible","iconColor","focus","_a","click","iconClicked","$event","changeValue","event","val","v","onKeyDown","computedPlaceholder","defineExpose"],"mappings":"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"}

package/dist/components/user-input/input/NeonInput.es.js

@@ -1,15 +1,15 @@
-import { defineComponent as C, useAttrs as z, ref as m, computed as l } from "vue";
-import { NeonInputType as u } from "../../../common/enums/NeonInputType.es.js";
+import { defineComponent as C, useAttrs as E, ref as m, computed as l, defineExpose as z } from "vue";
+import { NeonInputType as c } from "../../../common/enums/NeonInputType.es.js";
 import { NeonState as n } from "../../../common/enums/NeonState.es.js";
 import { NeonSize as D } from "../../../common/enums/NeonSize.es.js";
-import { NeonFunctionalColor as c } from "../../../common/enums/NeonFunctionalColor.es.js";
-import E from "../../presentation/icon/NeonIcon.vue.es.js";
-import { NeonDebounceUtils as F } from "../../../common/utils/NeonDebounceUtils.es.js";
-import { NeonInputMode as T } from "../../../common/enums/NeonInputMode.es.js";
-const K = C({
+import { NeonFunctionalColor as i } from "../../../common/enums/NeonFunctionalColor.es.js";
+import F from "../../presentation/icon/NeonIcon.vue.es.js";
+import { NeonDebounceUtils as T } from "../../../common/utils/NeonDebounceUtils.es.js";
+import { NeonInputMode as L } from "../../../common/enums/NeonInputMode.es.js";
+const j = C({
   name: "NeonInput",
   components: {
-    NeonIcon: E
+    NeonIcon: F
   },
   props: {
     /**
@@ -25,7 +25,7 @@ const K = C({
      * * file (use <a href="/user-input/file">NeonFile</a>)
      * * password (use <a href="/user-input/password">NeonPassword</a>)
      */
-    type: { type: String, default: u.Text },
+    type: { type: String, default: c.Text },
     /**
      * Placeholder text to display in the input
      */
@@ -37,11 +37,16 @@ const K = C({
     /**
      * Color of the input
      */
-    color: { type: String, default: c.Primary },
+    color: { type: String, default: i.Primary },
     /**
      * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
      */
-    inputmode: { type: String, default: T.Text },
+    inputmode: { type: String, default: L.Text },
+    /**
+     * The HTML autocomplete mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values">here</a>.
+     * NOTE: No enum is provided in Neon as some values can be used in combination, please refer to the full list of values in the preceding link.
+     */
+    autocomplete: { type: String, default: "on" },
     /**
      * The state of the input
      */
@@ -113,18 +118,18 @@ const K = C({
     "update:modelValue"
   ],
   setup(e, { emit: o }) {
-    const g = z(), i = m(null), r = m(!1), y = l(() => {
+    const g = E(), a = m(null), r = m(!1), y = l(() => {
       const {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onBlur: t,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onFocus: a,
+        onFocus: u,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onIconClick: d,
         ...B
       } = g;
       return B;
-    }), s = F.debounce((t) => {
+    }), s = T.debounce((t) => {
       o("update:modelValue", t);
     }, e.debounce), f = l(() => {
       switch (e.state) {
@@ -140,47 +145,47 @@ const K = C({
     }), h = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), b = l(() => {
       switch (e.state) {
         case n.Success:
-          return c.Success;
+          return i.Success;
         case n.Error:
-          return c.Error;
+          return i.Error;
         case n.Loading:
           return e.color;
         default:
-          return c.LowContrast;
+          return i.LowContrast;
       }
     }), S = () => {
       var t;
-      (t = i.value) == null || t.focus();
+      (t = a.value) == null || t.focus();
     }, N = () => {
       var t;
-      (t = i.value) == null || t.click();
+      (t = a.value) == null || t.click();
     }, V = () => {
       r.value = !0, o("focus");
     }, v = () => {
       r.value = !1, o("blur");
-    }, I = (t) => {
+    }, x = (t) => {
       e.disabled || (e.icon ? o("icon-click") : s(""), t.preventDefault(), t.stopPropagation());
-    }, k = (t) => {
-      const a = t.target.value, d = e.maxlength && a.length > e.maxlength ? a.substring(0, e.maxlength) : a;
+    }, I = (t) => {
+      const u = t.target.value, d = e.maxlength && u.length > e.maxlength ? u.substring(0, e.maxlength) : u;
       e.modelValue !== d && s(d);
-    }, x = (t) => {
+    }, k = (t) => {
       t.key !== "Backspace" && e.maxlength && e.modelValue && e.modelValue.length >= e.maxlength && t.preventDefault();
     }, w = l(() => {
       if (e.placeholder)
         return e.placeholder;
       switch (e.type) {
-        case u.Email:
+        case c.Email:
           return "gbelson@hooli.com";
-        case u.Tel:
+        case c.Tel:
           return "+41785551234";
-        case u.Url:
+        case c.Url:
           return "http://www.getskeleton.com";
         default:
           return "";
       }
     });
-    return {
-      neonInput: i,
+    return z({ neonInput: a }), {
+      neonInput: a,
       focused: r,
       sanitizedAttributes: y,
       iconVisible: h,
@@ -191,13 +196,13 @@ const K = C({
       click: N,
       onFocus: V,
       onBlur: v,
-      iconClicked: I,
-      changeValue: k,
-      onKeyDown: x
+      iconClicked: x,
+      changeValue: I,
+      onKeyDown: k
     };
   }
 });
 export {
-  K as default
+  j as default
 };
 //# sourceMappingURL=NeonInput.es.js.map