@aotearoan/neon 18.1.1 → 18.2.1

package/dist/components/layout/inline/NeonInline.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInline.cjs.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonResponsive } from '@/neon';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n    /**\n     * Breakpoint at which to layout wraps to vertical\n     */\n    breakpoint: { type: String as () => NeonSize, default: () => NeonResponsive.MobileLarge },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize","NeonResponsive"],"mappings":"gJAQAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,IAAK,CAAE,KAAM,OAA0B,QAAS,IAAMC,WAAS,KAAM,EAIrE,WAAY,CAAE,KAAM,OAA0B,QAAS,IAAMC,iBAAe,WAAY,CAC1F,CACF,CAAC"}
+{"version":3,"file":"NeonInline.cjs.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonResponsive } from '@/neon';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n    /**\n     * Breakpoint at which to layout switches to vertical. TIP: Pass <em>breakpoint=\"\"</em> to override the default\n     * breakpoint & prevent switching to a vertical layout.\n     */\n    breakpoint: { type: String as () => NeonSize, default: () => NeonResponsive.MobileLarge },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize","NeonResponsive"],"mappings":"gJAQAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,IAAK,CAAE,KAAM,OAA0B,QAAS,IAAMC,WAAS,KAAM,EAKrE,WAAY,CAAE,KAAM,OAA0B,QAAS,IAAMC,iBAAe,WAAY,CAC1F,CACF,CAAC"}

package/dist/components/layout/inline/NeonInline.es.js

@@ -9,7 +9,8 @@ const p = e({
      */
     gap: { type: String, default: () => o.Large },
     /**
-     * Breakpoint at which to layout wraps to vertical
+     * Breakpoint at which to layout switches to vertical. TIP: Pass <em>breakpoint=""</em> to override the default
+     * breakpoint & prevent switching to a vertical layout.
      */
     breakpoint: { type: String, default: () => n.MobileLarge }
   }

package/dist/components/layout/inline/NeonInline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonInline.es.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonResponsive } from '@/neon';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n    /**\n     * Breakpoint at which to layout wraps to vertical\n     */\n    breakpoint: { type: String as () => NeonSize, default: () => NeonResponsive.MobileLarge },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize","NeonResponsive"],"mappings":";;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,KAAK,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,MAAM;AAAA;AAAA;AAAA;AAAA,IAIrE,YAAY,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAe,YAAY;AAAA,EAC1F;AACF,CAAC;"}
+{"version":3,"file":"NeonInline.es.js","sources":["../../../../src/components/layout/inline/NeonInline.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonResponsive } from '@/neon';\n\n/**\n * A horizontal layout component. NeonInline provides a way of laying out it's contents with standard gaps. At the\n * specified breakpoint the layout will wrap to vertical.\n */\nexport default defineComponent({\n  name: 'NeonInline',\n  props: {\n    /**\n     * Size of the gap between items\n     */\n    gap: { type: String as () => NeonSize, default: () => NeonSize.Large },\n    /**\n     * Breakpoint at which to layout switches to vertical. TIP: Pass <em>breakpoint=\"\"</em> to override the default\n     * breakpoint & prevent switching to a vertical layout.\n     */\n    breakpoint: { type: String as () => NeonSize, default: () => NeonResponsive.MobileLarge },\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSize","NeonResponsive"],"mappings":";;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,KAAK,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrE,YAAY,EAAE,MAAM,QAA0B,SAAS,MAAMC,EAAe,YAAY;AAAA,EAC1F;AACF,CAAC;"}

package/dist/components/layout/swiper/NeonSwiper.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const l=require("vue"),i=l.defineComponent({name:"NeonSwiper",props:{fade:{type:Boolean,default:!0}},setup(){const e=l.ref(null),t=l.ref(!1),n=l.ref(!1),a=l.ref(!1),r=()=>{e.value?(n.value=e.value.scrollLeft<=0,a.value=e.value.scrollLeft+e.value.clientWidth>e.value.scrollWidth-1):(n.value=!1,a.value=!1)},o=()=>{e.value?t.value=e.value.scrollWidth>e.value.clientWidth:t.value=!1,r()};return l.onMounted(()=>{var s;window.addEventListener("resize",o,{passive:!0}),(s=e.value)==null||s.addEventListener("scroll",r,{passive:!0}),o()}),l.onUnmounted(()=>{var s;window.removeEventListener("resize",o),(s=e.value)==null||s.removeEventListener("scroll",r)}),{isOverflowing:t,isScrollStart:n,isScrollEnd:a,scrollable:e}}});module.exports=i;
+//# sourceMappingURL=NeonSwiper.cjs.js.map

package/dist/components/layout/swiper/NeonSwiper.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonSwiper.cjs.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n\n/**\n * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth\n * horizontal scrolling with all input devices.\n */\nexport default defineComponent({\n  name: 'NeonSwiper',\n  props: {\n    /**\n     * Display fade in / fade out styling when there is an overflow.\n     */\n    fade: { type: Boolean, default: true },\n  },\n  setup() {\n    const scrollable = ref<HTMLElement | null>(null);\n    const isOverflowing = ref<boolean>(false);\n    const isScrollStart = ref<boolean>(false);\n    const isScrollEnd = ref<boolean>(false);\n\n    const handleScroll = () => {\n      if (scrollable.value) {\n        isScrollStart.value = scrollable.value.scrollLeft <= 0;\n        isScrollEnd.value =\n          scrollable.value.scrollLeft + scrollable.value.clientWidth > scrollable.value.scrollWidth - 1;\n      } else {\n        isScrollStart.value = false;\n        isScrollEnd.value = false;\n      }\n    };\n\n    const handleResize = () => {\n      if (scrollable.value) {\n        isOverflowing.value = scrollable.value.scrollWidth > scrollable.value.clientWidth;\n      } else {\n        isOverflowing.value = false;\n      }\n\n      handleScroll();\n    };\n\n    onMounted(() => {\n      window.addEventListener('resize', handleResize, { passive: true });\n      scrollable.value?.addEventListener('scroll', handleScroll, { passive: true });\n      handleResize();\n    });\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', handleResize);\n      scrollable.value?.removeEventListener('scroll', handleScroll);\n    });\n\n    return {\n      isOverflowing,\n      isScrollStart,\n      isScrollEnd,\n      scrollable,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","scrollable","ref","isOverflowing","isScrollStart","isScrollEnd","handleScroll","handleResize","onMounted","_a","onUnmounted"],"mappings":"oCAMAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CAIL,KAAM,CAAE,KAAM,QAAS,QAAS,EAAK,CACvC,EACA,OAAQ,CACA,MAAAC,EAAaC,MAAwB,IAAI,EACzCC,EAAgBD,MAAa,EAAK,EAClCE,EAAgBF,MAAa,EAAK,EAClCG,EAAcH,MAAa,EAAK,EAEhCI,EAAe,IAAM,CACrBL,EAAW,OACCG,EAAA,MAAQH,EAAW,MAAM,YAAc,EACzCI,EAAA,MACVJ,EAAW,MAAM,WAAaA,EAAW,MAAM,YAAcA,EAAW,MAAM,YAAc,IAE9FG,EAAc,MAAQ,GACtBC,EAAY,MAAQ,GACtB,EAGIE,EAAe,IAAM,CACrBN,EAAW,MACbE,EAAc,MAAQF,EAAW,MAAM,YAAcA,EAAW,MAAM,YAEtEE,EAAc,MAAQ,GAGXG,GAAA,EAGfE,OAAAA,EAAAA,UAAU,IAAM,OACd,OAAO,iBAAiB,SAAUD,EAAc,CAAE,QAAS,GAAM,GACjEE,EAAAR,EAAW,QAAX,MAAAQ,EAAkB,iBAAiB,SAAUH,EAAc,CAAE,QAAS,KACzDC,GAAA,CACd,EAEDG,EAAAA,YAAY,IAAM,OACT,OAAA,oBAAoB,SAAUH,CAAY,GACtCE,EAAAR,EAAA,QAAA,MAAAQ,EAAO,oBAAoB,SAAUH,EAAY,CAC7D,EAEM,CACL,cAAAH,EACA,cAAAC,EACA,YAAAC,EACA,WAAAJ,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/swiper/NeonSwiper.es.js

@@ -0,0 +1,33 @@
+import { defineComponent as i, ref as s, onMounted as u, onUnmounted as v } from "vue";
+const d = i({
+  name: "NeonSwiper",
+  props: {
+    /**
+     * Display fade in / fade out styling when there is an overflow.
+     */
+    fade: { type: Boolean, default: !0 }
+  },
+  setup() {
+    const e = s(null), t = s(!1), a = s(!1), n = s(!1), o = () => {
+      e.value ? (a.value = e.value.scrollLeft <= 0, n.value = e.value.scrollLeft + e.value.clientWidth > e.value.scrollWidth - 1) : (a.value = !1, n.value = !1);
+    }, r = () => {
+      e.value ? t.value = e.value.scrollWidth > e.value.clientWidth : t.value = !1, o();
+    };
+    return u(() => {
+      var l;
+      window.addEventListener("resize", r, { passive: !0 }), (l = e.value) == null || l.addEventListener("scroll", o, { passive: !0 }), r();
+    }), v(() => {
+      var l;
+      window.removeEventListener("resize", r), (l = e.value) == null || l.removeEventListener("scroll", o);
+    }), {
+      isOverflowing: t,
+      isScrollStart: a,
+      isScrollEnd: n,
+      scrollable: e
+    };
+  }
+});
+export {
+  d as default
+};
+//# sourceMappingURL=NeonSwiper.es.js.map

package/dist/components/layout/swiper/NeonSwiper.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonSwiper.es.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\n\n/**\n * Automatically handle horizontally overflowing content by placing it in a NeonSwiper component allowing for smooth\n * horizontal scrolling with all input devices.\n */\nexport default defineComponent({\n  name: 'NeonSwiper',\n  props: {\n    /**\n     * Display fade in / fade out styling when there is an overflow.\n     */\n    fade: { type: Boolean, default: true },\n  },\n  setup() {\n    const scrollable = ref<HTMLElement | null>(null);\n    const isOverflowing = ref<boolean>(false);\n    const isScrollStart = ref<boolean>(false);\n    const isScrollEnd = ref<boolean>(false);\n\n    const handleScroll = () => {\n      if (scrollable.value) {\n        isScrollStart.value = scrollable.value.scrollLeft <= 0;\n        isScrollEnd.value =\n          scrollable.value.scrollLeft + scrollable.value.clientWidth > scrollable.value.scrollWidth - 1;\n      } else {\n        isScrollStart.value = false;\n        isScrollEnd.value = false;\n      }\n    };\n\n    const handleResize = () => {\n      if (scrollable.value) {\n        isOverflowing.value = scrollable.value.scrollWidth > scrollable.value.clientWidth;\n      } else {\n        isOverflowing.value = false;\n      }\n\n      handleScroll();\n    };\n\n    onMounted(() => {\n      window.addEventListener('resize', handleResize, { passive: true });\n      scrollable.value?.addEventListener('scroll', handleScroll, { passive: true });\n      handleResize();\n    });\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', handleResize);\n      scrollable.value?.removeEventListener('scroll', handleScroll);\n    });\n\n    return {\n      isOverflowing,\n      isScrollStart,\n      isScrollEnd,\n      scrollable,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","scrollable","ref","isOverflowing","isScrollStart","isScrollEnd","handleScroll","handleResize","onMounted","_a","onUnmounted"],"mappings":";AAMA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,SAAS,SAAS,GAAK;AAAA,EACvC;AAAA,EACA,QAAQ;AACA,UAAAC,IAAaC,EAAwB,IAAI,GACzCC,IAAgBD,EAAa,EAAK,GAClCE,IAAgBF,EAAa,EAAK,GAClCG,IAAcH,EAAa,EAAK,GAEhCI,IAAe,MAAM;AACzB,MAAIL,EAAW,SACCG,EAAA,QAAQH,EAAW,MAAM,cAAc,GACzCI,EAAA,QACVJ,EAAW,MAAM,aAAaA,EAAW,MAAM,cAAcA,EAAW,MAAM,cAAc,MAE9FG,EAAc,QAAQ,IACtBC,EAAY,QAAQ;AAAA,IACtB,GAGIE,IAAe,MAAM;AACzB,MAAIN,EAAW,QACbE,EAAc,QAAQF,EAAW,MAAM,cAAcA,EAAW,MAAM,cAEtEE,EAAc,QAAQ,IAGXG;IAAA;AAGf,WAAAE,EAAU,MAAM;;AACd,aAAO,iBAAiB,UAAUD,GAAc,EAAE,SAAS,IAAM,IACjEE,IAAAR,EAAW,UAAX,QAAAQ,EAAkB,iBAAiB,UAAUH,GAAc,EAAE,SAAS,OACzDC;IAAA,CACd,GAEDG,EAAY,MAAM;;AACT,aAAA,oBAAoB,UAAUH,CAAY,IACtCE,IAAAR,EAAA,UAAA,QAAAQ,EAAO,oBAAoB,UAAUH;AAAA,IAAY,CAC7D,GAEM;AAAA,MACL,eAAAH;AAAA,MACA,eAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAJ;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/layout/swiper/NeonSwiper.vue.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const n=require("./NeonSwiper.cjs.js"),e=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),o={ref:"scrollable",class:"neon-swiper__container"},t=e.createElementVNode("div",{class:"neon-swiper__fade-out"},null,-1);function i(r,c,a,p,d,_){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-swiper--fade":r.fade,"neon-swiper--overflowing":r.isOverflowing,"neon-swiper--start":r.isScrollStart,"neon-swiper--end":r.isScrollEnd},"neon-swiper"])},[e.createElementVNode("div",o,[e.renderSlot(r.$slots,"default")],512),t],2)}const l=s(n,[["render",i]]);module.exports=l;
+//# sourceMappingURL=NeonSwiper.vue.cjs.js.map

package/dist/components/layout/swiper/NeonSwiper.vue.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonSwiper.vue.cjs.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-swiper--fade': fade,\n      'neon-swiper--overflowing': isOverflowing,\n      'neon-swiper--start': isScrollStart,\n      'neon-swiper--end': isScrollEnd,\n    }\"\n    class=\"neon-swiper\"\n  >\n    <div ref=\"scrollable\" class=\"neon-swiper__container\">\n      <!-- @slot contents of swiper with which to apply overflow scrolling. -->\n      <slot></slot>\n    </div>\n    <div class=\"neon-swiper__fade-out\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSwiper.ts\"></script>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_renderSlot"],"mappings":"qIAU0BA,EAA8B,iIAR9CC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,wBAAmC,mBAAA,MAAA,gDAA4F,gCAAuCL,EAAA,mCAMzJA,EAAA,8CAEnB,EAAA,aAAA,CAAA,kCAIyCM,aAAAN,EAAA,OAAA,SAAA"}

package/dist/components/layout/swiper/NeonSwiper.vue.es.js

@@ -0,0 +1,27 @@
+import n from "./NeonSwiper.es.js";
+import { openBlock as r, createElementBlock as s, normalizeClass as i, createElementVNode as o, renderSlot as t } from "vue";
+import l from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const a = {
+  ref: "scrollable",
+  class: "neon-swiper__container"
+}, p = /* @__PURE__ */ o("div", { class: "neon-swiper__fade-out" }, null, -1);
+function d(e, c, f, _, m, w) {
+  return r(), s("div", {
+    class: i([{
+      "neon-swiper--fade": e.fade,
+      "neon-swiper--overflowing": e.isOverflowing,
+      "neon-swiper--start": e.isScrollStart,
+      "neon-swiper--end": e.isScrollEnd
+    }, "neon-swiper"])
+  }, [
+    o("div", a, [
+      t(e.$slots, "default")
+    ], 512),
+    p
+  ], 2);
+}
+const $ = /* @__PURE__ */ l(n, [["render", d]]);
+export {
+  $ as default
+};
+//# sourceMappingURL=NeonSwiper.vue.es.js.map

package/dist/components/layout/swiper/NeonSwiper.vue.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonSwiper.vue.es.js","sources":["../../../../src/components/layout/swiper/NeonSwiper.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      'neon-swiper--fade': fade,\n      'neon-swiper--overflowing': isOverflowing,\n      'neon-swiper--start': isScrollStart,\n      'neon-swiper--end': isScrollEnd,\n    }\"\n    class=\"neon-swiper\"\n  >\n    <div ref=\"scrollable\" class=\"neon-swiper__container\">\n      <!-- @slot contents of swiper with which to apply overflow scrolling. -->\n      <slot></slot>\n    </div>\n    <div class=\"neon-swiper__fade-out\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonSwiper.ts\"></script>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_renderSlot"],"mappings":";;;AAU0B,MAAAA,IAA8B;AAAA;;;SAR9CC,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAA;gBAAmC,OAAA;AAAA;6BAA4F;AAAA,kCAAuCL,EAAA;AAAA,4BAMzJA,EAAA;AAAA;IAEnB,GAAA,aAAA,CAAA;AAAA;;MAIyCM,EAAAN,EAAA,QAAA,SAAA;AAAA;;;;;"}

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":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_createElementVNode","_hoisted_8","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createVNode","_component_neon_button","_Fragment","_renderList","image","index","_image","_component_neon_link","_withCtx"],"mappings":"4IAQgDA,EAAa,qDAanD,EAAoBC,EAA2C,kEAwBhEC,EAAgC,CAAA,MAAA,KAAA,EAACC,EAAa,+DAkBcC,EAAAC,EAAAA,mBAAA,MAAA,CAAA,MAAA,2CAAA,KAAA,EAAA,MAI3D,EAAmCC,EAAa,uHAGlDC,EAAA,iBAAA,WAAA,EAlEJ,OAAAC,EAAY,UAAA,EAAAC,EAAA,mBAAA,MAAA,CACX,MAAOC,EAAA,eAAA,CAAA,CAAA,mCAAAC,EAAA,WAAA,EAAA,qBAAA,CAAA,wOAGR,IAEKN,EAAc,mBAAA,MAAAL,EAAA,CACdY,EAAAA,YAAsBC,EAAA,CACtB,SAAoB,GACpB,SAAAF,EAAiB,eAAA,EAClB,MAAAA,EAAA,cACA,YAAqC,GACrC,eAAe,OACf,MAAmB,gCACnB,MAAQ,UACP,KAAA,wBAEH,QAAAA,EAAA,QACE,EAAA,KAAA,EAAA,CAAA,WAAA,QAAA,SAC2B,CAAA,4BAD3BV,EAQK,cANQ,EAAI,EAAAQ,EAAA,mBAAAK,WAAA,KAAAC,EAAA,WAAAJ,EAAA,OAAA,CAAAK,EAAAC,8CACf,IAAID,EAAc,IACjB,QAA8C,sBAG/C,MAA4EN,EAAAA,eAAA,CAAA,CAAA,oCAAAO,IAAAN,EAAA,cAAA,2BAAA,CAAA,yBAAvC,MAAA,CAAE,IAAKK,EAA6B,gEAc3E,EAAA,GAAA,EAVC,EAAA,GAAA,EACAJ,EAAAA,YAAUC,EAAiB,CAC3B,SAAgB,GAChB,SAAAF,EAAiB,eAAAA,EAAA,OAAA,OAAA,EAClB,MAAAA,EAAA,UACA,YAAiC,GACjC,eAAe,OACf,MAAoB,4BACpB,MAAQ,UACP,KAAA,uCAGL,EAAA,KAAA,EAAA,CAAA,WAAA,QAqBM,SAAA,CAAA,CApBJ,CAAA,6BAmBYR,EAAA,EAjBTK,EAAAA,UAAU,EAAA,EAAAC,EAAA,mBAAAK,WAAA,KAAAC,EAAA,WAAAJ,EAAA,OAAA,CAAAO,EAAAD,KACVT,gBAAkC,YAAAW,EAAA,CACnC,IAAKF,EACL,aAAA,iBAAoBA,EAAA,CAAA,GACpB,MAAa,qCACb,gBAAY,OACX,KAAO,SAAqB,SAAA,IACA,UAAA,0JAG1B,QAAKG,EAA6C,QAAA,IAAA,CAEnDf,EAAAA,mBAAa,MAAA,CACZ,MAAKK,EAAAA,eAAU,CAAA,CAAA,wCAAMO,IAAAN,EAAA,cAAA,+BAAA,CAAA,0FAQrB,EAAA,GAAA"}
+{"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":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_createElementVNode","_hoisted_8","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createVNode","_component_neon_button","_Fragment","_renderList","image","index","_image","_component_neon_link","_withCtx"],"mappings":"4IAQgDA,EAAa,qDAanD,EAAoBC,EAA2C,kEAwBhEC,EAAgC,CAAA,MAAA,KAAA,EAACC,EAAa,+DAkBcC,EAAAC,EAAAA,mBAAA,MAAA,CAAA,MAAA,2CAAA,KAAA,EAAA,MAI3D,EAAmCC,EAAa,uHAGlDC,EAAA,iBAAA,WAAA,EAlEJ,OAAAC,EAAY,UAAA,EAAAC,EAAA,mBAAA,MAAA,CACX,MAAOC,EAAA,eAAA,CAAA,CAAA,mCAAAC,EAAA,WAAA,EAAA,qBAAA,CAAA,wOAGR,IAEKN,EAAc,mBAAA,MAAAL,EAAA,CACdY,EAAAA,YAAsBC,EAAA,CACtB,SAAoB,GACpB,SAAAF,EAAiB,eAAA,EAClB,MAAAA,EAAA,cACA,YAAqC,GACrC,eAAe,OACf,MAAmB,gCACnB,MAAQ,UACP,KAAA,wBAEH,QAAAA,EAAA,QACE,EAAA,KAAA,EAAA,CAAA,WAAA,QAAA,SAC2B,CAAA,4BAD3BV,EAQK,cANQ,EAAI,EAAAQ,EAAA,mBAAAK,WAAA,KAAAC,EAAA,WAAAJ,EAAA,OAAA,CAAAK,EAAAC,8CACf,IAAID,EAAc,IACjB,QAA8C,sBAG/C,MAA4EN,EAAAA,eAAA,CAAA,CAAA,oCAAAO,IAAAN,EAAA,cAAA,2BAAA,CAAA,yBAAvC,MAAA,CAAE,IAAKK,EAA6B,gEAc3E,EAAA,GAAA,EAVC,EAAA,GAAA,EACAJ,EAAAA,YAAUC,EAAiB,CAC3B,SAAgB,GAChB,SAAAF,EAAiB,eAAAA,EAAA,OAAA,OAAA,EAClB,MAAAA,EAAA,UACA,YAAiC,GACjC,eAAe,OACf,MAAoB,4BACpB,MAAQ,UACP,KAAA,uCAGL,EAAA,KAAA,EAAA,CAAA,WAAA,QAqBM,SAAA,CAAA,CApBJ,CAAA,6BAmBYR,EAAA,EAjBTK,EAAAA,UAAU,EAAA,EAAAC,EAAA,mBAAAK,WAAA,KAAAC,EAAA,WAAAJ,EAAA,OAAA,CAAAO,EAAAD,KACVT,gBAAkC,YAAAW,EAAA,CACnC,IAAKF,EACL,aAAA,iBAAoBA,EAAA,CAAA,GACpB,MAAa,qCACb,gBAAY,OACX,KAAO,SAAqB,SAAA,IACA,UAAA,0JAG1B,QAAKG,EAA6C,QAAA,IAAA,CAEnDf,EAAAA,mBAAa,MAAA,CACZ,MAAKK,EAAAA,eAAU,CAAA,CAAA,wCAAMO,IAAAN,EAAA,cAAA,+BAAA,CAAA,0FAQrB,EAAA,GAAA"}

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":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_createElementVNode","_hoisted_8","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createVNode","_component_neon_button","_Fragment","_renderList","image","index","_image","_component_neon_link","_withCtx"],"mappings":";;;AAQgD,MAAAA,IAAa;AAAA;;AAanD,GAAoBC,IAA2C;AAAA;;GAwBhEC,IAAgC,CAAA,OAAA,KAAA,GAACC,IAAa;AAAA;;oBAkBcC,IAAAC,gBAAAA,EAAA,OAAA,EAAA,OAAA,6CAAA,MAAA,EAAA;;AAI3D,GAAmCC,IAAa;AAAA;;;;kCAGlDC,EAAA,WAAA;AAlEJ,SAAAC,EAAY,GAAAC,EAAA,OAAA;AAAA,IACX,OAAOC,EAAA,CAAA,EAAA,oCAAAC,EAAA,YAAA,GAAA,qBAAA,CAAA;AAAA;;;;IAGR;AAAA;IAEKN,EAAc,OAAAL,GAAA;AAAA,MACdY,EAAsBC,GAAA;AAAA,QACtB,UAAoB;AAAA,QACpB,UAAAF,EAAiB,iBAAA;AAAA,QAClB,OAAAA,EAAA;AAAA,QACA,aAAqC;AAAA,QACrC,gBAAe;AAAA,QACf,OAAmB;AAAA,QACnB,OAAQ;AAAA,QACP,MAAA;AAAA;QAEH,SAAAA,EAAA;AAAA,MACE,GAAA,MAAA,GAAA,CAAA,YAAA,SAAA,SAC2B,CAAA;AAAA,cAD3BV,GAQK;AAAA,WANQ,EAAI,GAAAQ,EAAAK,GAAA,MAAAC,EAAAJ,EAAA,QAAA,CAAAK,GAAAC;UACf,KAAID,EAAc;AAAA,UACjB,SAA8C;AAAA;UAG/C,OAA4EN,EAAA,CAAA,EAAA,qCAAAO,MAAAN,EAAA,gBAAA,2BAAA,CAAA;AAAA;YAAvC,OAAA;AAAA,YAAE,KAAKK,EAA6B;AAAA;;;cAc3E,GAAA,GAAA;AAAA,MAVC,GAAA,GAAA;AAAA,MACAJ,EAAUC,GAAiB;AAAA,QAC3B,UAAgB;AAAA,QAChB,UAAAF,EAAiB,iBAAAA,EAAA,OAAA,SAAA;AAAA,QAClB,OAAAA,EAAA;AAAA,QACA,aAAiC;AAAA,QACjC,gBAAe;AAAA,QACf,OAAoB;AAAA,QACpB,OAAQ;AAAA,QACP,MAAA;AAAA;;MAGL,GAAA,MAAA,GAAA,CAAA,YAAA,SAqBM,SAAA,CAAA;AAAA,IApBJ,CAAA;AAAA,aAmBYR,GAAA;AAAA,OAjBTK,EAAU,EAAA,GAAAC,EAAAK,GAAA,MAAAC,EAAAJ,EAAA,QAAA,CAAAO,GAAAD,OACVT,OAAkCW,GAAA;AAAA,QACnC,KAAKF;AAAA,QACL,cAAA,iBAAoBA,IAAA,CAAA;AAAA,QACpB,OAAa;AAAA,QACb,iBAAY;AAAA,QACX,MAAO;AAAA,QAAqB,UAAA;AAAA,QACA,WAAA;AAAA;;;;QAG1B,SAAKG,EAA6C,MAAA;AAAA,UAEnDf,EAAa,OAAA;AAAA,YACZ,OAAKK,EAAU,CAAA,EAAA,yCAAMO,MAAAN,EAAA,gBAAA,+BAAA,CAAA;AAAA;;;;;4CAQrB,GAAA,GAAA;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 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":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","_createElementVNode","_hoisted_8","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_ctx","_createVNode","_component_neon_button","_Fragment","_renderList","image","index","_image","_component_neon_link","_withCtx"],"mappings":";;;AAQgD,MAAAA,IAAa;AAAA;;AAanD,GAAoBC,IAA2C;AAAA;;GAwBhEC,IAAgC,CAAA,OAAA,KAAA,GAACC,IAAa;AAAA;;oBAkBcC,IAAAC,gBAAAA,EAAA,OAAA,EAAA,OAAA,6CAAA,MAAA,EAAA;;AAI3D,GAAmCC,IAAa;AAAA;;;;kCAGlDC,EAAA,WAAA;AAlEJ,SAAAC,EAAY,GAAAC,EAAA,OAAA;AAAA,IACX,OAAOC,EAAA,CAAA,EAAA,oCAAAC,EAAA,YAAA,GAAA,qBAAA,CAAA;AAAA;;;;IAGR;AAAA;IAEKN,EAAc,OAAAL,GAAA;AAAA,MACdY,EAAsBC,GAAA;AAAA,QACtB,UAAoB;AAAA,QACpB,UAAAF,EAAiB,iBAAA;AAAA,QAClB,OAAAA,EAAA;AAAA,QACA,aAAqC;AAAA,QACrC,gBAAe;AAAA,QACf,OAAmB;AAAA,QACnB,OAAQ;AAAA,QACP,MAAA;AAAA;QAEH,SAAAA,EAAA;AAAA,MACE,GAAA,MAAA,GAAA,CAAA,YAAA,SAAA,SAC2B,CAAA;AAAA,cAD3BV,GAQK;AAAA,WANQ,EAAI,GAAAQ,EAAAK,GAAA,MAAAC,EAAAJ,EAAA,QAAA,CAAAK,GAAAC;UACf,KAAID,EAAc;AAAA,UACjB,SAA8C;AAAA;UAG/C,OAA4EN,EAAA,CAAA,EAAA,qCAAAO,MAAAN,EAAA,gBAAA,2BAAA,CAAA;AAAA;YAAvC,OAAA;AAAA,YAAE,KAAKK,EAA6B;AAAA;;;cAc3E,GAAA,GAAA;AAAA,MAVC,GAAA,GAAA;AAAA,MACAJ,EAAUC,GAAiB;AAAA,QAC3B,UAAgB;AAAA,QAChB,UAAAF,EAAiB,iBAAAA,EAAA,OAAA,SAAA;AAAA,QAClB,OAAAA,EAAA;AAAA,QACA,aAAiC;AAAA,QACjC,gBAAe;AAAA,QACf,OAAoB;AAAA,QACpB,OAAQ;AAAA,QACP,MAAA;AAAA;;MAGL,GAAA,MAAA,GAAA,CAAA,YAAA,SAqBM,SAAA,CAAA;AAAA,IApBJ,CAAA;AAAA,aAmBYR,GAAA;AAAA,OAjBTK,EAAU,EAAA,GAAAC,EAAAK,GAAA,MAAAC,EAAAJ,EAAA,QAAA,CAAAO,GAAAD,OACVT,OAAkCW,GAAA;AAAA,QACnC,KAAKF;AAAA,QACL,cAAA,iBAAoBA,IAAA,CAAA;AAAA,QACpB,OAAa;AAAA,QACb,iBAAY;AAAA,QACX,MAAO;AAAA,QAAqB,UAAA;AAAA,QACA,WAAA;AAAA;;;;QAG1B,SAAKG,EAA6C,MAAA;AAAA,UAEnDf,EAAa,OAAA;AAAA,YACZ,OAAKK,EAAU,CAAA,EAAA,yCAAMO,MAAAN,EAAA,gBAAA,+BAAA,CAAA;AAAA;;;;;4CAQrB,GAAA,GAAA;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"),x=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),F=require("../../../common/utils/NeonDebounceUtils.cjs.js"),q=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:x.NeonSize.Medium},color:{type:String,default:c.NeonFunctionalColor.LowContrast},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),g=n.computed(()=>{const{onBlur:t,onFocus:u,onIconClick:s,...w}=m;return w}),d=F.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}}),y=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 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"):d(""),t.preventDefault(),t.stopPropagation())},V=t=>{const u=t.target.value,s=e.maxlength&&u.length>e.maxlength?u.substring(0,e.maxlength):u;e.modelValue!==s&&d(s)},C=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 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:g,iconVisible:y,iconName:f,iconColor:N,computedPlaceholder:k,focus:h,click:S,onFocus:b,onBlur:I,iconClicked:v,changeValue:V,onKeyDown:C}}});module.exports=q;
+"use strict";const n=require("vue"),a=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),x=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:x.NeonSize.Medium},color:{type:String,default:c.NeonFunctionalColor.LowContrast},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),N=n.computed(()=>{const{onBlur:t,onFocus:u,onIconClick:d,...w}=m;return w}),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)),y=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)},C=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 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:N,iconVisible:g,iconName:f,iconColor:y,computedPlaceholder:k,focus:h,click:S,onFocus:b,onBlur:I,iconClicked:v,changeValue:V,onKeyDown:C}}});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';\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.LowContrast },\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","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, 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.LowContrast },\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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"}

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

@@ -5,7 +5,8 @@ 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";
-const _ = C({
+import { NeonInputMode as L } from "../../../common/enums/NeonInputMode.es.js";
+const K = C({
   name: "NeonInput",
   components: {
     NeonIcon: E
@@ -37,6 +38,10 @@ const _ = C({
      * Color of the input
      */
     color: { type: String, default: c.LowContrast },
+    /**
+     * 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: L.Text },
     /**
      * The state of the input
      */
@@ -108,7 +113,7 @@ const _ = C({
     "update:modelValue"
   ],
   setup(e, { emit: o }) {
-    const g = z(), i = m(null), r = m(!1), h = l(() => {
+    const g = z(), i = m(null), r = m(!1), y = l(() => {
       const {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onBlur: t,
@@ -132,7 +137,7 @@ const _ = C({
         default:
           return e.icon ? e.icon : e.modelValue && e.modelValue.length > 0 ? "times" : void 0;
       }
-    }), y = l(() => f.value && !e.hideIcon && (e.state !== "ready" || e.icon || e.modelValue && !e.disabled && e.modelValue.length > 0)), b = l(() => {
+    }), 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;
@@ -146,19 +151,19 @@ const _ = C({
     }), S = () => {
       var t;
       (t = i.value) == null || t.focus();
-    }, V = () => {
+    }, N = () => {
       var t;
       (t = i.value) == null || t.click();
-    }, v = () => {
+    }, V = () => {
       r.value = !0, o("focus");
-    }, N = () => {
+    }, v = () => {
       r.value = !1, o("blur");
-    }, k = (t) => {
+    }, I = (t) => {
       e.disabled || (e.icon ? o("icon-click") : s(""), t.preventDefault(), t.stopPropagation());
-    }, w = (t) => {
+    }, k = (t) => {
       const a = t.target.value, d = e.maxlength && a.length > e.maxlength ? a.substring(0, e.maxlength) : a;
       e.modelValue !== d && s(d);
-    }, I = (t) => {
+    }, w = (t) => {
       t.key !== "Backspace" && e.maxlength && e.modelValue && e.modelValue.length >= e.maxlength && t.preventDefault();
     }, x = l(() => {
       if (e.placeholder)
@@ -177,22 +182,22 @@ const _ = C({
     return {
       neonInput: i,
       focused: r,
-      sanitizedAttributes: h,
-      iconVisible: y,
+      sanitizedAttributes: y,
+      iconVisible: h,
       iconName: f,
       iconColor: b,
       computedPlaceholder: x,
       focus: S,
-      click: V,
-      onFocus: v,
-      onBlur: N,
-      iconClicked: k,
-      changeValue: w,
-      onKeyDown: I
+      click: N,
+      onFocus: V,
+      onBlur: v,
+      iconClicked: I,
+      changeValue: k,
+      onKeyDown: w
     };
   }
 });
 export {
-  _ as default
+  K as default
 };
 //# sourceMappingURL=NeonInput.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.es.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';\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.LowContrast },\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","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.es.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.LowContrast },\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":";;;;;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EACF;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA,IAIlC,YAAY,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM1C,MAAM,EAAE,MAAM,QAA+B,SAASC,EAAc,KAAK;AAAA;AAAA;AAAA;AAAA,IAIzE,aAAa,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA,IAI3C,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAO;AAAA;AAAA;AAAA;AAAA,IAIjE,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAY;AAAA;AAAA;AAAA;AAAA,IAI7F,WAAW,EAAE,MAAM,QAA+B,SAASC,EAAc,KAAK;AAAA;AAAA;AAAA;AAAA,IAI9E,OAAO,EAAE,MAAM,QAA2B,SAASC,EAAU,MAAM;AAAA;AAAA;AAAA;AAAA,IAInE,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA,IAIpC,cAAc,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA;AAAA;AAAA;AAAA,IAI9C,UAAU,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA;AAAA;AAAA;AAAA,IAI1C,UAAU,EAAE,MAAM,QAAQ,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1C,gBAAgB,EAAE,MAAM,SAAS,SAAS,GAAK;AAAA;AAAA;AAAA;AAAA,IAI/C,WAAW,EAAE,MAAM,SAAS,SAAS,GAAK;AAAA;AAAA;AAAA;AAAA,IAI1C,WAAW,EAAE,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzC,UAAU,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA,EAC/C;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACF;AAAA,EACA,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,KACRC,IAAYC,EAAwB,IAAI,GACxCC,IAAUD,EAAI,EAAK,GAEnBE,IAAsBC,EAAS,MAAM;AACnC,YAAA;AAAA;AAAA,QAEJ,QAAAC;AAAAA;AAAAA,QAEA,SAAAC;AAAAA;AAAAA,QAEA,aAAAC;AAAA,QACA,GAAGC;AAAA,MACD,IAAAV;AAEG,aAAAU;AAAA,IAAA,CACR,GAEKC,IAAiBC,EAAkB,SAAS,CAACC,MAAkB;AACnE,MAAAd,EAAK,qBAAqBc,CAAK;AAAA,IAAA,GAC9Bf,EAAM,QAAQ,GAEXgB,IAAWR,EAAS,MAAM;AAC9B,cAAQR,EAAM,OAAO;AAAA,QACnB,KAAKD,EAAU;AACN,iBAAA;AAAA,QACT,KAAKA,EAAU;AACN,iBAAAC,EAAM,YAAY,UAAU;AAAA,QACrC,KAAKD,EAAU;AACN,iBAAAC,EAAM,YAAY,UAAU;AAAA,QACrC;AACE,iBAAIA,EAAM,OACDA,EAAM,OACJA,EAAM,cAAcA,EAAM,WAAW,SAAS,IAChD,UAGF;AAAA,MACX;AAAA,IAAA,CACD,GAEKiB,IAAcT,EAAS,MAEzBQ,EAAS,SACT,CAAChB,EAAM,aACNA,EAAM,UAAU,WAAWA,EAAM,QAASA,EAAM,cAAc,CAACA,EAAM,YAAYA,EAAM,WAAW,SAAS,EAE/G,GAEKkB,IAAYV,EAAS,MAAM;AAC/B,cAAQR,EAAM,OAAO;AAAA,QACnB,KAAKD,EAAU;AACb,iBAAOF,EAAoB;AAAA,QAC7B,KAAKE,EAAU;AACb,iBAAOF,EAAoB;AAAA,QAC7B,KAAKE,EAAU;AACb,iBAAOC,EAAM;AAAA,QACf;AACE,iBAAOH,EAAoB;AAAA,MAC/B;AAAA,IAAA,CACD,GAEKsB,IAAQ,MAAM;;AAClB,OAAAC,IAAAhB,EAAU,UAAV,QAAAgB,EAAiB;AAAA,IAAM,GAGnBC,IAAQ,MAAM;;AAClB,OAAAD,IAAAhB,EAAU,UAAV,QAAAgB,EAAiB;AAAA,IAAM,GAGnBV,IAAU,MAAM;AACpB,MAAAJ,EAAQ,QAAQ,IAChBL,EAAK,OAAO;AAAA,IAAA,GAGRQ,IAAS,MAAM;AACnB,MAAAH,EAAQ,QAAQ,IAChBL,EAAK,MAAM;AAAA,IAAA,GAGPqB,IAAc,CAACC,MAAkB;AACjC,MAACvB,EAAM,aACLA,EAAM,OACRC,EAAK,YAAY,IAEjBY,EAAe,EAAE,GAEnBU,EAAO,eAAe,GACtBA,EAAO,gBAAgB;AAAA,IACzB,GAGIC,IAAc,CAACC,MAAiB;AAC9B,YAAAC,IAAOD,EAAM,OAA4B,OACzCE,IAAI3B,EAAM,aAAa0B,EAAI,SAAS1B,EAAM,YAAY0B,EAAI,UAAU,GAAG1B,EAAM,SAAS,IAAI0B;AAC5F,MAAA1B,EAAM,eAAe2B,KACvBd,EAAec,CAAC;AAAA,IAClB,GAGIC,IAAY,CAACH,MAAyB;AAExC,MAAAA,EAAM,QAAQ,eACdzB,EAAM,aACNA,EAAM,cACNA,EAAM,WAAW,UAAUA,EAAM,aAEjCyB,EAAM,eAAe;AAAA,IACvB,GAGII,IAAsBrB,EAAS,MAAM;AACzC,UAAIR,EAAM;AACR,eAAOA,EAAM;AAEb,cAAQA,EAAM,MAAM;AAAA,QAClB,KAAKL,EAAc;AACV,iBAAA;AAAA,QACT,KAAKA,EAAc;AACV,iBAAA;AAAA,QACT,KAAKA,EAAc;AACV,iBAAA;AAAA,QACT;AACS,iBAAA;AAAA,MACX;AAAA,IACF,CACD;AAEM,WAAA;AAAA,MACL,WAAAS;AAAA,MACA,SAAAE;AAAA,MACA,qBAAAC;AAAA,MACA,aAAAU;AAAA,MACA,UAAAD;AAAA,MACA,WAAAE;AAAA,MACA,qBAAAW;AAAA,MACA,OAAAV;AAAA,MACA,OAAAE;AAAA,MACA,SAAAX;AAAA,MACA,QAAAD;AAAA,MACA,aAAAa;AAAA,MACA,aAAAE;AAAA,MACA,WAAAI;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

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

@@ -1,2 +1,2 @@
-"use strict";const d=require("./NeonInput.cjs.js"),n=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s=["id","aria-placeholder","disabled","placeholder","tabindex","type","value"],r=["id","aria-placeholder","disabled","placeholder","rows","tabindex","value"],t={key:3,class:"neon-input__textarea-counter"};function u(e,o,m,b,y,h){const i=n.resolveComponent("neon-icon");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[{"neon-input--with-icon":!e.hideIcon&&(e.icon||e.modelValue&&e.modelValue.length>0),"neon-input--disabled":e.disabled,"neon-input--focused":e.focused,"neon-input--placeholder-visible":e.placeholder&&(!e.modelValue||e.modelValue.length===0),"neon-input--with-state-highlight":e.stateHighlight,"neon-input--with-state-icon":e.stateIcon},`neon-input--${e.size}`,`neon-input--${e.color}`,`neon-input--state-${e.state}`],"neon-input"])},[e.rows?(n.openBlock(),n.createElementBlock("textarea",n.mergeProps({key:1,id:e.id,"aria-placeholder":e.computedPlaceholder,disabled:e.disabled,placeholder:e.computedPlaceholder,rows:e.rows,tabindex:e.tabindex,value:e.modelValue,class:"neon-input__textfield neon-input__textarea"},e.sanitizedAttributes,{onBlur:o[3]||(o[3]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:o[4]||(o[4]=(...l)=>e.onFocus&&e.onFocus(...l)),onKeydown:o[5]||(o[5]=(...l)=>e.onKeyDown&&e.onKeyDown(...l)),onInput:o[6]||(o[6]=n.withModifiers((...l)=>e.changeValue&&e.changeValue(...l),["stop","prevent"]))}),null,16,r)):(n.openBlock(),n.createElementBlock("input",n.mergeProps({key:0,id:e.id,ref:"neonInput","aria-placeholder":e.computedPlaceholder,disabled:e.disabled,placeholder:e.computedPlaceholder,tabindex:e.tabindex,type:e.type,value:e.modelValue,class:"neon-input__textfield neon-input__text"},e.sanitizedAttributes,{onBlur:o[0]||(o[0]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:o[1]||(o[1]=l=>!e.disabled&&e.onFocus()),onInput:o[2]||(o[2]=n.withModifiers(l=>!e.disabled&&e.changeValue(l),["stop","prevent"]))}),null,16,s)),e.iconVisible?(n.openBlock(),n.createBlock(i,{key:2,class:n.normalizeClass([{"neon-input__icon--read-only":e.iconReadonly},"neon-input__icon"]),color:e.iconColor,disabled:e.disabled,name:e.iconName,role:!e.iconReadonly&&"button",tabindex:e.disabled||e.iconReadonly?!1:0,transparent:!0,onClick:o[7]||(o[7]=l=>!e.iconReadonly&&e.iconClicked(l)),onKeydown:[o[8]||(o[8]=n.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["enter"])),o[9]||(o[9]=n.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["space"]))]},null,8,["class","color","disabled","name","role","tabindex"])):n.createCommentVNode("",!0),e.maxlength&&e.maxlength>0?(n.openBlock(),n.createElementBlock("span",t,n.toDisplayString(`${e.modelValue.length}/${e.maxlength}`),1)):n.createCommentVNode("",!0)],2)}const p=a(d,[["render",u]]);module.exports=p;
+"use strict";const d=require("./NeonInput.cjs.js"),n=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s=["id","aria-placeholder","disabled","inputmode","placeholder","tabindex","type","value"],r=["id","aria-placeholder","disabled","inputmode","placeholder","rows","tabindex","value"],t={key:3,class:"neon-input__textarea-counter"};function u(e,o,m,b,y,h){const i=n.resolveComponent("neon-icon");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[{"neon-input--with-icon":!e.hideIcon&&(e.icon||e.modelValue&&e.modelValue.length>0),"neon-input--disabled":e.disabled,"neon-input--focused":e.focused,"neon-input--placeholder-visible":e.placeholder&&(!e.modelValue||e.modelValue.length===0),"neon-input--with-state-highlight":e.stateHighlight,"neon-input--with-state-icon":e.stateIcon},`neon-input--${e.size}`,`neon-input--${e.color}`,`neon-input--state-${e.state}`],"neon-input"])},[e.rows?(n.openBlock(),n.createElementBlock("textarea",n.mergeProps({key:1,id:e.id,"aria-placeholder":e.computedPlaceholder,disabled:e.disabled,inputmode:e.inputmode,placeholder:e.computedPlaceholder,rows:e.rows,tabindex:e.tabindex,value:e.modelValue,class:"neon-input__textfield neon-input__textarea"},e.sanitizedAttributes,{onBlur:o[3]||(o[3]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:o[4]||(o[4]=(...l)=>e.onFocus&&e.onFocus(...l)),onKeydown:o[5]||(o[5]=(...l)=>e.onKeyDown&&e.onKeyDown(...l)),onInput:o[6]||(o[6]=n.withModifiers((...l)=>e.changeValue&&e.changeValue(...l),["stop","prevent"]))}),null,16,r)):(n.openBlock(),n.createElementBlock("input",n.mergeProps({key:0,id:e.id,ref:"neonInput","aria-placeholder":e.computedPlaceholder,disabled:e.disabled,inputmode:e.inputmode,placeholder:e.computedPlaceholder,tabindex:e.tabindex,type:e.type,value:e.modelValue,class:"neon-input__textfield neon-input__text"},e.sanitizedAttributes,{onBlur:o[0]||(o[0]=(...l)=>e.onBlur&&e.onBlur(...l)),onFocus:o[1]||(o[1]=l=>!e.disabled&&e.onFocus()),onInput:o[2]||(o[2]=n.withModifiers(l=>!e.disabled&&e.changeValue(l),["stop","prevent"]))}),null,16,s)),e.iconVisible?(n.openBlock(),n.createBlock(i,{key:2,class:n.normalizeClass([{"neon-input__icon--read-only":e.iconReadonly},"neon-input__icon"]),color:e.iconColor,disabled:e.disabled,name:e.iconName,role:!e.iconReadonly&&"button",tabindex:e.disabled||e.iconReadonly?!1:0,transparent:!0,onClick:o[7]||(o[7]=l=>!e.iconReadonly&&e.iconClicked(l)),onKeydown:[o[8]||(o[8]=n.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["enter"])),o[9]||(o[9]=n.withKeys(l=>!e.iconReadonly&&e.iconClicked(l),["space"]))]},null,8,["class","color","disabled","name","role","tabindex"])):n.createCommentVNode("",!0),e.maxlength&&e.maxlength>0?(n.openBlock(),n.createElementBlock("span",t,n.toDisplayString(`${e.modelValue.length}/${e.maxlength}`),1)):n.createCommentVNode("",!0)],2)}const p=a(d,[["render",u]]);module.exports=p;
 //# sourceMappingURL=NeonInput.vue.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.vue.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"!rows\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <textarea\n      v-else\n      :id=\"id\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :placeholder=\"computedPlaceholder\"\n      :rows=\"rows\"\n      :tabindex=\"tabindex\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__textarea\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n      @keydown=\"onKeyDown\"\n      @input.stop.prevent=\"changeValue\"\n    ></textarea>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n    <span v-if=\"maxlength && maxlength > 0\" class=\"neon-input__textarea-counter\">\n      {{ `${modelValue.length}/${maxlength}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":"kSA+D4CA,EAAoC,6EAGxEC,EAAA,iBAAA,WAAA,mDAhEgD,MAAAC,EAAA,eAAA,CAAA,0BAA6I,CAAAC,EAAA,WAAAA,EAAA,MAAAA,EAAA,YAAAA,EAAA,WAAA,OAAA,GAA6C,uBAAAA,EAAA,2EAAqKA,EAAA,cAAA,CAAAA,EAAA,YAAAA,EAAA,WAAA,SAAA,qFAAoCA,EAAA,gCAAkE,kBAaveA,EAAA,KAAA,mCAGL,YAAA,CAAA,CADb,EAAA,SAkBGC,EAAAA,YAAMC,EAAAA,mBAAA,WAAAC,aAAA,CACN,IAAA,EACA,GAAAH,KACA,mBAAgCA,EAAA,oBAChC,SAAUA,EAAA,SACV,YAAkBA,EAAA,oBAClB,OAAiB,KAClB,SAAkDA,EAAA,eACvBA,EAAA,WAC1B,kDACA,EAAAA,EAAA,qBACA,OAAAI,sBAAkB,QAAAJ,EAAA,OAAA,GAAAK,CAAA,GAClB,uCAA+BL,EAAA,QAAA,GAAAK,CAAA,iEAGf,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,EAAAA,cAAA,IAAAD,IAAAL,EAAA,aAAAA,EAAA,YAAA,GAAAK,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,cAYjB,IA3CCJ,EAAAA,YAAMC,EAAAA,mBAAA,QAAAC,aAAA,CACP,IAAI,EACH,GAAAH,EAAA,GACA,IAAA,YACA,mBAAgCA,EAAA,oBAChC,SAAUA,EAAQ,SAClB,YAAUA,EAAA,oBACV,SAAiBA,EAAA,SAClB,OAA8C,WACnBA,EAAA,WAC1B,gDACKA,EAAA,oBAAA,CACL,OAAqBI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,IAAAC,IAAAL,EAAA,QAAAA,EAAA,OAAQ,GAAIK,CAAA,oDAEpC,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,IAeY,cAAAG,GAAA,CAAAP,EAAA,UAAAA,EAAA,YAAAO,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,4CAGJ,EAAAC,EAAA,YAAAC,EAAA,CACL,IAAK,EACL,MAAAV,EAAkB,eAAA,CAAA,CAAA,8BAAAC,EAAA,YAAA,EAAA,kBAAA,CAAA,EAClB,MAAcA,EAAA,UACd,SAAmBA,EAAA,SACnB,KAAQA,EAAU,SAClB,KAAA,CAAAA,gBAAiB,SAEjB,SAAQA,EAAA,UAAAA,EAAA,aAAA,GAAA,EACR,YAAO,6BAAqB,cAAAA,EAAe,YAAAO,CAAO,8JAGzC,EAAA,KAAA,WAAsB,QAAA,WAAA,OAAA,OAAA,UAAA,CAAA,GAAlCG,EAAA,mBAAA,GAAA,EAAA"}
+{"version":3,"file":"NeonInput.vue.cjs.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"!rows\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <textarea\n      v-else\n      :id=\"id\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :rows=\"rows\"\n      :tabindex=\"tabindex\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__textarea\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n      @keydown=\"onKeyDown\"\n      @input.stop.prevent=\"changeValue\"\n    ></textarea>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n    <span v-if=\"maxlength && maxlength > 0\" class=\"neon-input__textarea-counter\">\n      {{ `${modelValue.length}/${maxlength}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":"0TAiE4CA,EAAoC,6EAGxEC,EAAA,iBAAA,WAAA,mDAlEgD,MAAAC,EAAA,eAAA,CAAA,0BAA6I,CAAAC,EAAA,WAAAA,EAAA,MAAAA,EAAA,YAAAA,EAAA,WAAA,OAAA,GAA6C,uBAAAA,EAAA,2EAAqKA,EAAA,cAAA,CAAAA,EAAA,YAAAA,EAAA,WAAA,SAAA,qFAAoCA,EAAA,gCAAkE,kBAaveA,EAAA,KAAA,mCAGL,YAAA,CAAA,CADb,EAAA,SAmBGC,EAAAA,YAAMC,EAAAA,mBAAA,WAAAC,aAAA,CACN,IAAA,EACA,GAAAH,KACA,mBAAoBA,EAAA,oBACpB,SAAAA,EAAgC,SAChC,UAAUA,EAAA,UACV,YAAkBA,EAAA,oBAClB,OAAiB,KAClB,SAAkDA,EAAA,eACvBA,EAAA,WAC1B,kDACA,EAAAA,EAAA,qBACA,OAAAI,sBAAkB,QAAAJ,EAAA,OAAA,GAAAK,CAAA,GAClB,uCAA+BL,EAAA,QAAA,GAAAK,CAAA,iEAGf,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,EAAAA,cAAA,IAAAD,IAAAL,EAAA,aAAAA,EAAA,YAAA,GAAAK,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,cAYjB,IA7CCJ,EAAAA,YAAMC,EAAAA,mBAAA,QAAAC,aAAA,CACP,IAAI,EACH,GAAAH,EAAA,GACA,IAAA,YACA,mBAAoBA,EAAA,oBACpB,SAAAA,EAAgC,SAChC,UAAkBA,EAAA,UAClB,YAAUA,EAAA,oBACV,SAAiBA,EAAA,SAClB,OAA8C,WACnBA,EAAA,WAC1B,gDACKA,EAAA,oBAAA,CACL,OAAqBI,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,IAAAC,IAAAL,EAAA,QAAAA,EAAA,OAAQ,GAAIK,CAAA,oDAEpC,QAAAD,EAAA,CAAA,IAAAA,EAAA,CAAA,IAgBY,cAAAG,GAAA,CAAAP,EAAA,UAAAA,EAAA,YAAAO,CAAA,EAAA,CAAA,OAAA,SAAA,CAAA,4CAGJ,EAAAC,EAAA,YAAAC,EAAA,CACL,IAAK,EACL,MAAAV,EAAkB,eAAA,CAAA,CAAA,8BAAAC,EAAA,YAAA,EAAA,kBAAA,CAAA,EAClB,MAAcA,EAAA,UACd,SAAmBA,EAAA,SACnB,KAAQA,EAAU,SAClB,KAAA,CAAAA,gBAAiB,SAEjB,SAAQA,EAAA,UAAAA,EAAA,aAAA,GAAA,EACR,YAAO,6BAAqB,cAAAA,EAAe,YAAAO,CAAO,8JAGzC,EAAA,KAAA,WAAsB,QAAA,WAAA,OAAA,OAAA,UAAA,CAAA,GAAlCG,EAAA,mBAAA,GAAA,EAAA"}

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

@@ -1,12 +1,12 @@
-import p from "./NeonInput.es.js";
+import t from "./NeonInput.es.js";
 import { resolveComponent as m, openBlock as l, createElementBlock as i, normalizeClass as d, mergeProps as a, withModifiers as s, createBlock as b, withKeys as r, createCommentVNode as u, toDisplayString as y } from "vue";
 import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const f = ["id", "aria-placeholder", "disabled", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "disabled", "placeholder", "rows", "tabindex", "value"], w = {
+const f = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "tabindex", "type", "value"], g = ["id", "aria-placeholder", "disabled", "inputmode", "placeholder", "rows", "tabindex", "value"], w = {
   key: 3,
   class: "neon-input__textarea-counter"
 };
 function V(e, n, k, v, $, B) {
-  const t = m("neon-icon");
+  const p = m("neon-icon");
   return l(), i("div", {
     class: d([[
       {
@@ -27,6 +27,7 @@ function V(e, n, k, v, $, B) {
       id: e.id,
       "aria-placeholder": e.computedPlaceholder,
       disabled: e.disabled,
+      inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
       rows: e.rows,
       tabindex: e.tabindex,
@@ -43,6 +44,7 @@ function V(e, n, k, v, $, B) {
       ref: "neonInput",
       "aria-placeholder": e.computedPlaceholder,
       disabled: e.disabled,
+      inputmode: e.inputmode,
       placeholder: e.computedPlaceholder,
       tabindex: e.tabindex,
       type: e.type,
@@ -53,7 +55,7 @@ function V(e, n, k, v, $, B) {
       onFocus: n[1] || (n[1] = (o) => !e.disabled && e.onFocus()),
       onInput: n[2] || (n[2] = s((o) => !e.disabled && e.changeValue(o), ["stop", "prevent"]))
     }), null, 16, f)),
-    e.iconVisible ? (l(), b(t, {
+    e.iconVisible ? (l(), b(p, {
       key: 2,
       class: d([{ "neon-input__icon--read-only": e.iconReadonly }, "neon-input__icon"]),
       color: e.iconColor,
@@ -71,7 +73,7 @@ function V(e, n, k, v, $, B) {
     e.maxlength && e.maxlength > 0 ? (l(), i("span", w, y(`${e.modelValue.length}/${e.maxlength}`), 1)) : u("", !0)
   ], 2);
 }
-const F = /* @__PURE__ */ h(p, [["render", V]]);
+const F = /* @__PURE__ */ h(t, [["render", V]]);
 export {
   F as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NeonInput.vue.es.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"!rows\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <textarea\n      v-else\n      :id=\"id\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :placeholder=\"computedPlaceholder\"\n      :rows=\"rows\"\n      :tabindex=\"tabindex\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__textarea\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n      @keydown=\"onKeyDown\"\n      @input.stop.prevent=\"changeValue\"\n    ></textarea>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n    <span v-if=\"maxlength && maxlength > 0\" class=\"neon-input__textarea-counter\">\n      {{ `${modelValue.length}/${maxlength}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":";;;sLA+D4CA,IAAoC;AAAA;;;;YAGxEC,EAAA,WAAA;;IAhEgD,OAAAC,EAAA,CAAA;AAAA;iCAA6I,CAAAC,EAAA,aAAAA,EAAA,QAAAA,EAAA,cAAAA,EAAA,WAAA,SAAA;AAAA,QAA6C,wBAAAA,EAAA;AAAA;2CAAqKA,EAAA,gBAAA,CAAAA,EAAA,cAAAA,EAAA,WAAA,WAAA;AAAA;uCAAoCA,EAAA;AAAA;2BAAkE;AAAA,qBAaveA,EAAA,KAAA;AAAA;OAGL,YAAA,CAAA;AAAA,EADb,GAAA;AAAA,cAkBGC,KAAMC,EAAA,YAAAC,EAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAAH;MACA,oBAAgCA,EAAA;AAAA,MAChC,UAAUA,EAAA;AAAA,MACV,aAAkBA,EAAA;AAAA,MAClB,QAAiB;AAAA,MAClB,UAAkDA,EAAA;AAAA,aACvBA,EAAA;AAAA,MAC1B;IACA,GAAAA,EAAA;MACA,QAAAI,4BAAkB,UAAAJ,EAAA,OAAA,GAAAK,CAAA;AAAA,MAClB,gDAA+BL,EAAA,QAAA,GAAAK,CAAA;AAAA;MAGf,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,IAAAD,MAAAL,EAAA,eAAAA,EAAA,YAAA,GAAAK,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA,mBAYjB,MA3CCJ,KAAMC,EAAA,SAAAC,EAAA;AAAA,MACP,KAAI;AAAA,MACH,IAAAH,EAAA;AAAA,MACA,KAAA;AAAA,MACA,oBAAgCA,EAAA;AAAA,MAChC,UAAUA,EAAQ;AAAA,MAClB,aAAUA,EAAA;AAAA,MACV,UAAiBA,EAAA;AAAA,MAClB,QAA8C;AAAA,aACnBA,EAAA;AAAA,MAC1B;OACKA,EAAA,qBAAA;AAAA,MACL,QAAqBI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAL,EAAA,UAAAA,EAAA,OAAQ,GAAIK,CAAA;AAAA;MAEpC,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,MAeY,CAAAG,MAAA,CAAAP,EAAA,YAAAA,EAAA,YAAAO,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA;uBAGJ,GAAAC,EAAAC,GAAA;AAAA,MACL,KAAK;AAAA,MACL,OAAAV,EAAkB,CAAA,EAAA,+BAAAC,EAAA,aAAA,GAAA,kBAAA,CAAA;AAAA,MAClB,OAAcA,EAAA;AAAA,MACd,UAAmBA,EAAA;AAAA,MACnB,MAAQA,EAAU;AAAA,MAClB,MAAA,CAAAA,kBAAiB;AAAA,MAEjB,UAAQA,EAAA,YAAAA,EAAA,eAAA,KAAA;AAAA,MACR,aAAO;AAAA,yCAAqB,gBAAAA,EAAe,YAAAO,CAAO;AAAA;;;;IAGzC,GAAA,MAAA,aAAsB,SAAA,YAAA,QAAA,QAAA,UAAA,CAAA,KAAlCG,EAAA,IAAA,EAAA;AAAA;;;;"}
+{"version":3,"file":"NeonInput.vue.es.js","sources":["../../../../src/components/user-input/input/NeonInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      {\n        'neon-input--with-icon': !hideIcon && (icon || (modelValue && modelValue.length > 0)),\n        'neon-input--disabled': disabled,\n        'neon-input--focused': focused,\n        'neon-input--placeholder-visible': placeholder && (!modelValue || modelValue.length === 0),\n        'neon-input--with-state-highlight': stateHighlight,\n        'neon-input--with-state-icon': stateIcon,\n      },\n      `neon-input--${size}`,\n      `neon-input--${color}`,\n      `neon-input--state-${state}`,\n    ]\"\n    class=\"neon-input\"\n  >\n    <input\n      v-if=\"!rows\"\n      :id=\"id\"\n      ref=\"neonInput\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :tabindex=\"tabindex\"\n      :type=\"type\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__text\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"!disabled && onFocus()\"\n      @input.stop.prevent=\"!disabled && changeValue($event)\"\n    />\n    <textarea\n      v-else\n      :id=\"id\"\n      :aria-placeholder=\"computedPlaceholder\"\n      :disabled=\"disabled\"\n      :inputmode=\"inputmode\"\n      :placeholder=\"computedPlaceholder\"\n      :rows=\"rows\"\n      :tabindex=\"tabindex\"\n      :value=\"modelValue\"\n      class=\"neon-input__textfield neon-input__textarea\"\n      v-bind=\"sanitizedAttributes\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n      @keydown=\"onKeyDown\"\n      @input.stop.prevent=\"changeValue\"\n    ></textarea>\n    <neon-icon\n      v-if=\"iconVisible\"\n      :class=\"{ 'neon-input__icon--read-only': iconReadonly }\"\n      :color=\"iconColor\"\n      :disabled=\"disabled\"\n      :name=\"iconName\"\n      :role=\"!iconReadonly && 'button'\"\n      :tabindex=\"disabled || iconReadonly ? false : 0\"\n      :transparent=\"true\"\n      class=\"neon-input__icon\"\n      @click=\"!iconReadonly && iconClicked($event)\"\n      @keydown.enter=\"!iconReadonly && iconClicked($event)\"\n      @keydown.space=\"!iconReadonly && iconClicked($event)\"\n    />\n    <span v-if=\"maxlength && maxlength > 0\" class=\"neon-input__textarea-counter\">\n      {{ `${modelValue.length}/${maxlength}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonInput.ts\" />\n"],"names":["_hoisted_3","_resolveComponent","_normalizeClass","_ctx","_openBlock","_createElementBlock","_mergeProps","_cache","args","_withModifiers","$event","_createBlock","_component_neon_icon","_createCommentVNode"],"mappings":";;;gNAiE4CA,IAAoC;AAAA;;;;YAGxEC,EAAA,WAAA;;IAlEgD,OAAAC,EAAA,CAAA;AAAA;iCAA6I,CAAAC,EAAA,aAAAA,EAAA,QAAAA,EAAA,cAAAA,EAAA,WAAA,SAAA;AAAA,QAA6C,wBAAAA,EAAA;AAAA;2CAAqKA,EAAA,gBAAA,CAAAA,EAAA,cAAAA,EAAA,WAAA,WAAA;AAAA;uCAAoCA,EAAA;AAAA;2BAAkE;AAAA,qBAaveA,EAAA,KAAA;AAAA;OAGL,YAAA,CAAA;AAAA,EADb,GAAA;AAAA,cAmBGC,KAAMC,EAAA,YAAAC,EAAA;AAAA,MACN,KAAA;AAAA,MACA,IAAAH;MACA,oBAAoBA,EAAA;AAAA,MACpB,UAAAA,EAAgC;AAAA,MAChC,WAAUA,EAAA;AAAA,MACV,aAAkBA,EAAA;AAAA,MAClB,QAAiB;AAAA,MAClB,UAAkDA,EAAA;AAAA,aACvBA,EAAA;AAAA,MAC1B;IACA,GAAAA,EAAA;MACA,QAAAI,4BAAkB,UAAAJ,EAAA,OAAA,GAAAK,CAAA;AAAA,MAClB,gDAA+BL,EAAA,QAAA,GAAAK,CAAA;AAAA;MAGf,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,IAAAD,MAAAL,EAAA,eAAAA,EAAA,YAAA,GAAAK,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA,mBAYjB,MA7CCJ,KAAMC,EAAA,SAAAC,EAAA;AAAA,MACP,KAAI;AAAA,MACH,IAAAH,EAAA;AAAA,MACA,KAAA;AAAA,MACA,oBAAoBA,EAAA;AAAA,MACpB,UAAAA,EAAgC;AAAA,MAChC,WAAkBA,EAAA;AAAA,MAClB,aAAUA,EAAA;AAAA,MACV,UAAiBA,EAAA;AAAA,MAClB,QAA8C;AAAA,aACnBA,EAAA;AAAA,MAC1B;OACKA,EAAA,qBAAA;AAAA,MACL,QAAqBI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAL,EAAA,UAAAA,EAAA,OAAQ,GAAIK,CAAA;AAAA;MAEpC,SAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,MAgBY,CAAAG,MAAA,CAAAP,EAAA,YAAAA,EAAA,YAAAO,CAAA,GAAA,CAAA,QAAA,SAAA,CAAA;AAAA;uBAGJ,GAAAC,EAAAC,GAAA;AAAA,MACL,KAAK;AAAA,MACL,OAAAV,EAAkB,CAAA,EAAA,+BAAAC,EAAA,aAAA,GAAA,kBAAA,CAAA;AAAA,MAClB,OAAcA,EAAA;AAAA,MACd,UAAmBA,EAAA;AAAA,MACnB,MAAQA,EAAU;AAAA,MAClB,MAAA,CAAAA,kBAAiB;AAAA,MAEjB,UAAQA,EAAA,YAAAA,EAAA,eAAA,KAAA;AAAA,MACR,aAAO;AAAA,yCAAqB,gBAAAA,EAAe,YAAAO,CAAO;AAAA;;;;IAGzC,GAAA,MAAA,aAAsB,SAAA,YAAA,QAAA,QAAA,UAAA,CAAA,KAAlCG,EAAA,IAAA,EAAA;AAAA;;;;"}