@aotearoan/neon 22.1.2 → 22.3.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{ 'neon-image-carousel--initialised': initialised }\"\n    class=\"neon-image-carousel\"\n    tabindex=\"0\"\n    @keydown.stop.prevent.left=\"previous\"\n    @keydown.stop.prevent.right=\"next\"\n  >\n    <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === 0\"\n        :title=\"previousLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__previous\"\n        color=\"neutral\"\n        icon=\"chevron-left\"\n        size=\"l\"\n        @click=\"previous\"\n      />\n      <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n        <li\n          v-for=\"(image, index) in images\"\n          :key=\"image.src\"\n          ref=\"carouselItem\"\n          :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n          class=\"neon-image-carousel__item\"\n        >\n          <img :alt=\"image.alt\" :src=\"image.src\" class=\"neon-image-carousel__image\" />\n        </li>\n      </ul>\n      <neon-button\n        :circular=\"true\"\n        :disabled=\"currentImage === images.length - 1\"\n        :title=\"nextLabel\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-image-carousel__next\"\n        color=\"neutral\"\n        icon=\"chevron-right\"\n        size=\"l\"\n        @click=\"next\"\n      />\n    </div>\n    <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n      <neon-link\n        v-for=\"(_image, index) in images\"\n        :key=\"index\"\n        :aria-label=\"`Display image ${index + 1}`\"\n        class=\"neon-image-carousel__nav-item-link\"\n        outline-style=\"none\"\n        role=\"button\"\n        tabindex=\"0\"\n        @keydown.stop.prevent.enter=\"scrollTo(index)\"\n        @keydown.stop.prevent.space=\"scrollTo(index)\"\n      >\n        <div\n          :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n          class=\"neon-image-carousel__nav-item\"\n          tabindex=\"-1\"\n          @click=\"scrollTo(index)\"\n        >\n          <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n        </div>\n      </neon-link>\n    </div>\n    <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n      {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","args","_createElementVNode","_hoisted_1","_createVNode","_component_neon_button","_hoisted_2","_openBlock","_Fragment","_renderList","image","index","_hoisted_4","_image","_createBlock","_component_neon_link","_withKeys","_withModifiers","$event","_hoisted_6","_toDisplayString"],"mappings":";;;;EAQS,OAAM;AAAA,EAAiC,UAAS;;EAa/C,KAAI;AAAA,EAAgB,OAAM;;EAwB3B,OAAM;AAAA,EAA2B,UAAS;;;EAsBvB,OAAM;AAAA,EAA6B,UAAS;;;;cAlEtEA,EAqEM,OAAA;AAAA,IApEH,OAAKC,EAAA,CAAA,EAAA,oCAAwCC,EAAA,YAAW,GACnD,qBAAqB,CAAA;AAAA,IAC3B,UAAS;AAAA,IACR,WAAO;AAAA,oCAAoBA,EAAA,YAAAA,EAAA,SAAA,GAAAC,CAAA,GAAQ,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,oCACPD,EAAA,QAAAA,EAAA,KAAA,GAAAC,CAAA,GAAI,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;IAEjCC,EAoCM,OApCNC,GAoCM;AAAA,MAnCJC,EAWEC,GAAA;AAAA,QAVC,UAAU;AAAA,QACV,UAAUL,EAAA,iBAAY;AAAA,QACtB,OAAOA,EAAA;AAAA,QACP,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,SAAOA,EAAA;AAAA;MAEVE,EAUK,MAVLI,GAUK;AAAA,SATHC,EAAA,EAAA,GAAAT,EAQKU,GAAA,MAAAC,EAPsBT,EAAA,QAAM,CAAvBU,GAAOC,YADjBb,EAQK,MAAA;AAAA,UANF,KAAKY,EAAM;AAAA;UACZ,KAAI;AAAA,UACH,OAAKX,EAAA,CAAA,EAAA,qCAAyCY,MAAUX,EAAA,aAAY,GAC/D,2BAA2B,CAAA;AAAA;UAEjCE,EAA4E,OAAA;AAAA,YAAtE,KAAKQ,EAAM;AAAA,YAAM,KAAKA,EAAM;AAAA,YAAK,OAAM;AAAA;;;MAGjDN,EAWEC,GAAA;AAAA,QAVC,UAAU;AAAA,QACV,UAAUL,EAAA,iBAAiBA,EAAA,OAAO,SAAM;AAAA,QACxC,OAAOA,EAAA;AAAA,QACP,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,SAAOA,EAAA;AAAA;;IAGZE,EAqBM,OArBNU,GAqBM;AAAA,OApBJL,EAAA,EAAA,GAAAT,EAmBYU,GAAA,MAAAC,EAlBgBT,EAAA,QAAM,CAAxBa,GAAQF,YADlBG,EAmBYC,GAAA;AAAA,QAjBT,KAAKJ;AAAA,QACL,+BAA6BA,IAAK,CAAA;AAAA,QACnC,OAAM;AAAA,QACN,iBAAc;AAAA,QACd,MAAK;AAAA,QACL,UAAS;AAAA,QACR,WAAO;AAAA,UAAqBK,EAAAC,EAAA,CAAAC,MAAAlB,EAAA,SAASW,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,UACdK,EAAAC,EAAA,CAAAC,MAAAlB,EAAA,SAASW,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;mBAE3C,MAOM;AAAA,UAPNT,EAOM,OAAA;AAAA,YANH,OAAKH,EAAA,CAAA,EAAA,yCAA6CY,MAAUX,EAAA,gBACvD,+BAA+B,CAAA;AAAA,YACrC,UAAS;AAAA,YACR,SAAK,CAAAkB,MAAElB,EAAA,SAASW,CAAK;AAAA;YAEtBT,EAA2D,OAAA,EAAtD,OAAM,0CAAyC,GAAA,MAAA,EAAA;AAAA;;;;;IAI7CF,EAAA,8BAAbF,EAEO,QAFPqB,GAEOC,EADFpB,EAAA,mBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,WAAM,IAAA,UAAA,QAAA,EAAA,GAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"NeonImageCarousel.vue.es.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.vue"],"sourcesContent":["<template>\n  <div class=\"neon-image-carousel-wrapper\">\n    <div\n      :class=\"{\n        'neon-image-carousel--initialised': initialised,\n        'neon-image-carousel--expanded': expanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"expanded = false\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\" @click.stop=\"expanded = false\">\n        <neon-button\n          v-if=\"expanded\"\n          :title=\"closeLabel\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__close\"\n          color=\"low-contrast\"\n          icon=\"close\"\n          size=\"l\"\n          transparent\n          @click=\"expanded = false\"\n        />\n        <neon-button\n          :disabled=\"currentImage === 0\"\n          :title=\"previousLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__previous\"\n          color=\"neutral\"\n          icon=\"arrow-left-1\"\n          size=\"l\"\n          @click.capture.stop=\"previous\"\n        />\n        <ul ref=\"carouselItems\" class=\"no-style neon-image-carousel__items\">\n          <li\n            v-for=\"(image, index) in images\"\n            :key=\"image.src\"\n            ref=\"carouselItem\"\n            :class=\"{ 'neon-image-carousel__item--active': index === currentImage }\"\n            class=\"neon-image-carousel__item\"\n          >\n            <img\n              :alt=\"image.alt\"\n              :src=\"image.src\"\n              class=\"neon-image-carousel__image\"\n              @click.stop=\"expanded = !expanded\"\n            />\n            <p v-if=\"expanded\" class=\"neon-image-carousel__item-title\">{{ image.alt }}</p>\n          </li>\n        </ul>\n        <neon-button\n          :disabled=\"currentImage === images.length - 1\"\n          :title=\"nextLabel\"\n          :transparent=\"true\"\n          button-style=\"text\"\n          class=\"neon-image-carousel__next\"\n          color=\"neutral\"\n          icon=\"arrow-right-1\"\n          size=\"l\"\n          @click.capture.stop=\"next\"\n        />\n      </div>\n      <neon-stack class=\"neon-image-carousel__nav-container\" gap=\"s\" @click.stop=\"expanded = false\">\n        <div class=\"neon-image-carousel__nav\" tabindex=\"-1\">\n          <neon-link\n            v-for=\"(_image, index) in images\"\n            :key=\"index\"\n            :aria-label=\"`Display image ${index + 1}`\"\n            class=\"neon-image-carousel__nav-item-link\"\n            outline-style=\"none\"\n            role=\"button\"\n            tabindex=\"0\"\n            @keydown.stop.prevent.capture.enter=\"scrollTo(index)\"\n            @keydown.stop.prevent.capture.space=\"scrollTo(index)\"\n          >\n            <div\n              :class=\"{ 'neon-image-carousel__nav-item--active': index === currentImage }\"\n              class=\"neon-image-carousel__nav-item\"\n              tabindex=\"-1\"\n              @click.capture.stop=\"scrollTo(index)\"\n            >\n              <div class=\"neon-image-carousel__nav-item-indicator\"></div>\n            </div>\n          </neon-link>\n        </div>\n        <span v-if=\"!hideLabel\" class=\"neon-image-carousel__label\" tabindex=\"-1\">\n          {{ imageCountLabel || `${images.length} ${images.length === 1 ? 'image' : 'images'}` }}\n        </span>\n      </neon-stack>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonImageCarousel.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_ctx","args","_createBlock","_component_neon_button","_createVNode","_hoisted_2","_Fragment","_renderList","image","index","_cache","_withModifiers","$event","_hoisted_4","_toDisplayString","_component_neon_stack","_hoisted_5","_image","_component_neon_link","_withKeys","_hoisted_7"],"mappings":";;;AACO,MAAAA,IAAA,EAAA,OAAM,8BAA6B;EAmC9B,KAAI;AAAA,EAAgB,OAAM;;;EAcP,OAAM;;EAgBxB,OAAM;AAAA,EAA2B,UAAS;;;EAsBvB,OAAM;AAAA,EAA6B,UAAS;;;;AAvF1E,SAAAC,EAAA,GAAAC,EA4FM,OA5FNF,GA4FM;AAAA,IA3FJG,EA0FM,OAAA;AAAA,MAzFH,OAAKC,EAAA,CAAA;AAAA,4CAAgDC,EAAA;AAAA,yCAAsDA,EAAA;AAAA,SAItG,qBAAqB,CAAA;AAAA,MAC3B,UAAS;AAAA,MACR,WAAO;AAAA,sCAAoBA,EAAA,YAAAA,EAAA,SAAA,GAAAC,CAAA,GAAQ,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,MAAA,CAAA;AAAA,sCACPD,EAAA,QAAAA,EAAA,KAAA,GAAAC,CAAA,GAAI,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,iCACnBD,EAAA,WAAQ,IAAA,CAAA,KAAA,CAAA;AAAA;;MAEtBF,EAmDM,OAAA;AAAA,QAnDD,OAAM;AAAA,QAAiC,UAAS;AAAA,QAAM,kCAAYE,EAAA,WAAQ,IAAA,CAAA,MAAA,CAAA;AAAA;QAErEA,EAAA,iBADRE,EAUEC,GAAA;AAAA;UARC,OAAOH,EAAA;AAAA,UACR,gBAAa;AAAA,UACb,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAK;AAAA,UACL,aAAA;AAAA,UACC,gCAAOA,EAAA,WAAQ;AAAA;QAElBI,EAUED,GAAA;AAAA,UATC,UAAUH,EAAA,iBAAY;AAAA,UACtB,OAAOA,EAAA;AAAA,UACP,aAAa;AAAA,UACd,gBAAa;AAAA,UACb,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAK;AAAA,4BACgBA,EAAA,UAAQ,CAAA,MAAA,CAAA;AAAA;QAE/BF,EAgBK,MAhBLO,GAgBK;AAAA,WAfHT,EAAA,EAAA,GAAAC,EAcKS,GAAA,MAAAC,EAbsBP,EAAA,QAAM,CAAvBQ,GAAOC,YADjBZ,EAcK,MAAA;AAAA,YAZF,KAAKW,EAAM;AAAA;YACZ,KAAI;AAAA,YACH,OAAKT,EAAA,CAAA,EAAA,qCAAyCU,MAAUT,EAAA,aAAY,GAC/D,2BAA2B,CAAA;AAAA;YAEjCF,EAKE,OAAA;AAAA,cAJC,KAAKU,EAAM;AAAA,cACX,KAAKA,EAAM;AAAA,cACZ,OAAM;AAAA,cACL,SAAKE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA,CAAAC,MAAOZ,EAAA,WAAQ,CAAIA,EAAA,UAAQ,CAAA,MAAA,CAAA;AAAA;YAE1BA,EAAA,YAATJ,EAAA,GAAAC,EAA8E,KAA9EgB,GAA8EC,EAAhBN,EAAM,GAAG,GAAA,CAAA;;;QAG3EJ,EAUED,GAAA;AAAA,UATC,UAAUH,EAAA,iBAAiBA,EAAA,OAAO,SAAM;AAAA,UACxC,OAAOA,EAAA;AAAA,UACP,aAAa;AAAA,UACd,gBAAa;AAAA,UACb,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAK;AAAA,4BACgBA,EAAA,MAAI,CAAA,MAAA,CAAA;AAAA;;MAG7BI,EA0BaW,GAAA;AAAA,QA1BD,OAAM;AAAA,QAAqC,KAAI;AAAA,QAAK,kCAAYf,EAAA,WAAQ,IAAA,CAAA,MAAA,CAAA;AAAA;mBAClF,MAqBM;AAAA,UArBNF,EAqBM,OArBNkB,GAqBM;AAAA,aApBJpB,EAAA,EAAA,GAAAC,EAmBYS,GAAA,MAAAC,EAlBgBP,EAAA,QAAM,CAAxBiB,GAAQR,YADlBP,EAmBYgB,GAAA;AAAA,cAjBT,KAAKT;AAAA,cACL,+BAA6BA,IAAK,CAAA;AAAA,cACnC,OAAM;AAAA,cACN,iBAAc;AAAA,cACd,MAAK;AAAA,cACL,UAAS;AAAA;gBAC4BU,EAAAR,EAAA,CAAAC,MAAAZ,EAAA,SAASS,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,gBACdU,EAAAR,EAAA,CAAAC,MAAAZ,EAAA,SAASS,CAAK,GAAA,CAAA,QAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA;;yBAEnD,MAOM;AAAA,gBAPNX,EAOM,OAAA;AAAA,kBANH,OAAKC,EAAA,CAAA,EAAA,yCAA6CU,MAAUT,EAAA,gBACvD,+BAA+B,CAAA;AAAA,kBACrC,UAAS;AAAA,kBACY,gBAAAW,EAAA,CAAAC,MAAAZ,EAAA,SAASS,CAAK,GAAA,CAAA,MAAA,CAAA;AAAA;kBAEnCX,EAA2D,OAAA,EAAtD,OAAM,0CAAyC,GAAA,MAAA,EAAA;AAAA;;;;;UAI7CE,EAAA,8BAAbH,EAEO,QAFPuB,GAEON,EADFd,EAAA,mBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,WAAM,IAAA,UAAA,QAAA,EAAA,GAAA,CAAA;AAAA;;;;;;;"}

package/dist/components/user-input/file/NeonFile.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("vue"),p=require("../../../common/enums/NeonSize.cjs.js"),m=require("../../../common/enums/NeonFunctionalColor.cjs.js"),y=require("../../../common/enums/NeonState.cjs.js"),g=require("../button/NeonButton.vue.cjs.js"),S=require("../input/NeonInput.vue.cjs.js"),N=require("../list/NeonList.vue.cjs.js"),v=n.defineComponent({name:"NeonFile",components:{NeonButton:g,NeonInput:S,NeonList:N},props:{disabled:{type:Boolean,default:!1},directUpload:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},id:{type:String,default:null},size:{type:String,default:p.NeonSize.Medium},state:{type:String,default:y.NeonState.Ready},color:{type:String,default:m.NeonFunctionalColor.Primary},label:{type:String,default:null},icon:{type:String,default:null}},emits:["update:modelValue"],setup(l,{emit:r}){const i=n.ref(null),t=n.ref([]),s=n.ref(""),c=n.computed(()=>t.value.map(e=>({key:e.name,label:e.name}))),a=()=>{r("update:modelValue",l.multiple?t.value:t.value[0]),l.directUpload&&(t.value=[])};return{fileInput:i,files:t,fileList:c,fileInputModel:s,remove:e=>{l.disabled||(t.value=t.value.filter(o=>o.name!==e),a())},clearAll:()=>{l.disabled||(t.value=[],a())},openFileDialog:()=>{var e;(e=i.value)==null||e.click()},onInput:e=>{if(e!=null&&e.target){const o=e.target.files,u=o?Array.from(o).filter(d=>!t.value.find(f=>f.name===d.name)):[];t.value=l.multiple?[...t.value,...u]:u,a()}}}}});module.exports=v;
+"use strict";const a=require("vue"),p=require("../../../common/enums/NeonSize.cjs.js"),m=require("../../../common/enums/NeonFunctionalColor.cjs.js"),y=require("../../../common/enums/NeonState.cjs.js"),g=require("../button/NeonButton.vue.cjs.js"),S=require("../input/NeonInput.vue.cjs.js"),N=require("../list/NeonList.vue.cjs.js"),v=a.defineComponent({name:"NeonFile",components:{NeonButton:g,NeonInput:S,NeonList:N},props:{disabled:{type:Boolean,default:!1},directUpload:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},accept:{type:String,default:null},id:{type:String,default:null},size:{type:String,default:p.NeonSize.Medium},state:{type:String,default:y.NeonState.Ready},color:{type:String,default:m.NeonFunctionalColor.Primary},circular:{type:Boolean,default:null},label:{type:String,default:null},icon:{type:String,default:null},title:{type:String,default:"Upload"}},emits:["update:modelValue"],setup(n,{emit:r}){const i=a.ref(null),t=a.ref([]),s=a.ref(""),c=a.computed(()=>t.value.map(e=>({key:e.name,label:e.name}))),o=()=>{r("update:modelValue",n.multiple?t.value:t.value[0]),n.directUpload&&(t.value=[])};return{fileInput:i,files:t,fileList:c,fileInputModel:s,remove:e=>{n.disabled||(t.value=t.value.filter(l=>l.name!==e),o())},clearAll:()=>{n.disabled||(t.value=[],o())},openFileDialog:()=>{var e,l;(l=(e=i.value)==null?void 0:e.neonInput)==null||l.click()},onInput:e=>{if(e!=null&&e.target){const l=e.target.files,u=l?Array.from(l).filter(d=>!t.value.find(f=>f.name===d.name)):[];t.value=n.multiple?[...t.value,...u]:u,o()}}}}});module.exports=v;
 //# sourceMappingURL=NeonFile.cjs.js.map

package/dist/components/user-input/file/NeonFile.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<HTMLInputElement | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_a","event","theFiles","newFiles"],"mappings":"0UAYAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,WAAAC,EACA,UAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,aAAc,CAAE,KAAM,QAAS,QAAS,EAAA,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAKpC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAKjC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAA,EAI7D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,CAAK,EAEtC,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAYC,EAAAA,IAA6B,IAAI,EAC7CC,EAAQD,EAAAA,IAAiB,EAAE,EAC3BE,EAAiBF,EAAAA,IAAI,EAAE,EAEvBG,EAAWC,EAAAA,SAAS,IACjBH,EAAM,MAAM,IAAKI,IAAU,CAAE,IAAKA,EAAK,KAAM,MAAOA,EAAK,IAAA,EAAO,CACxE,EAEKC,EAAY,IAAM,CACtBR,EAAK,oBAAqBD,EAAM,SAAWI,EAAM,MAAQA,EAAM,MAAM,CAAC,CAAC,EACnEJ,EAAM,eACRI,EAAM,MAAQ,CAAA,EAElB,EA+BA,MAAO,CACL,UAAAF,EACA,MAAAE,EACA,SAAAE,EACA,eAAAD,EACA,OAlCcK,GAAqB,CAC9BV,EAAM,WACTI,EAAM,MAAQA,EAAM,MAAM,OAAQO,GAAMA,EAAE,OAASD,CAAQ,EAC3DD,EAAA,EAEJ,EA8BE,SA5Be,IAAM,CAChBT,EAAM,WACTI,EAAM,MAAQ,CAAA,EACdK,EAAA,EAEJ,EAwBE,eAtBqB,IAAM,QAC3BG,EAAAV,EAAU,QAAV,MAAAU,EAAiB,OACnB,EAqBE,QAnBeC,GAAiB,CAChC,GAAIA,GAAA,MAAAA,EAAO,OAAQ,CACjB,MAAMC,EAAYD,EAAM,OAA4B,MAC9CE,EAAWD,EACb,MAAM,KAAKA,CAAQ,EAAE,OAAQN,GAAS,CAACJ,EAAM,MAAM,KAAM,GAAM,EAAE,OAASI,EAAK,IAAI,CAAC,EACpF,CAAA,EACJJ,EAAM,MAAQJ,EAAM,SAAW,CAAC,GAAGI,EAAM,MAAO,GAAGW,CAAQ,EAAIA,EAC/DN,EAAA,CACF,CACF,CAUE,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonFile.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":"0UAYAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,WAAY,CACV,WAAAC,EACA,UAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,aAAc,CAAE,KAAM,QAAS,QAAS,EAAA,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAKpC,OAAQ,CAAE,KAAM,OAAQ,QAAS,IAAA,EAKjC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,KAAM,CAAE,KAAM,OAA0B,QAASC,EAAAA,SAAS,MAAA,EAI1D,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAA,EAI7D,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,OAAA,EAIjF,SAAU,CAAE,KAAM,QAAS,QAAS,IAAA,EAIpC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAA,EAIhC,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI/B,MAAO,CAAE,KAAM,OAAQ,QAAS,QAAA,CAAS,EAE3C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAYC,EAAAA,IAA2C,IAAI,EAC3DC,EAAQD,EAAAA,IAAiB,EAAE,EAC3BE,EAAiBF,EAAAA,IAAI,EAAE,EAEvBG,EAAWC,EAAAA,SAAS,IACjBH,EAAM,MAAM,IAAKI,IAAU,CAAE,IAAKA,EAAK,KAAM,MAAOA,EAAK,IAAA,EAAO,CACxE,EAEKC,EAAY,IAAM,CACtBR,EAAK,oBAAqBD,EAAM,SAAWI,EAAM,MAAQA,EAAM,MAAM,CAAC,CAAC,EACnEJ,EAAM,eACRI,EAAM,MAAQ,CAAA,EAElB,EA+BA,MAAO,CACL,UAAAF,EACA,MAAAE,EACA,SAAAE,EACA,eAAAD,EACA,OAlCcK,GAAqB,CAC9BV,EAAM,WACTI,EAAM,MAAQA,EAAM,MAAM,OAAQO,GAAMA,EAAE,OAASD,CAAQ,EAC3DD,EAAA,EAEJ,EA8BE,SA5Be,IAAM,CAChBT,EAAM,WACTI,EAAM,MAAQ,CAAA,EACdK,EAAA,EAEJ,EAwBE,eAtBqB,IAAM,UAC3BG,GAAAC,EAAAX,EAAU,QAAV,YAAAW,EAAiB,YAAjB,MAAAD,EAA4B,OAC9B,EAqBE,QAnBeE,GAAiB,CAChC,GAAIA,GAAA,MAAAA,EAAO,OAAQ,CACjB,MAAMC,EAAYD,EAAM,OAA4B,MAC9CE,EAAWD,EACb,MAAM,KAAKA,CAAQ,EAAE,OAAQP,GAAS,CAACJ,EAAM,MAAM,KAAM,GAAM,EAAE,OAASI,EAAK,IAAI,CAAC,EACpF,CAAA,EACJJ,EAAM,MAAQJ,EAAM,SAAW,CAAC,GAAGI,EAAM,MAAO,GAAGY,CAAQ,EAAIA,EAC/DP,EAAA,CACF,CACF,CAUE,CAEJ,CACF,CAAC"}

package/dist/components/user-input/file/NeonFile.es.js

@@ -47,6 +47,10 @@ const V = s({
      * The file component color
      */
     color: { type: String, default: g.Primary },
+    /**
+     * Make the button circular. NOTE: This is only for icon only buttons.
+     */
+    circular: { type: Boolean, default: null },
     /**
      * The label of the file component button
      */
@@ -54,7 +58,11 @@ const V = s({
     /**
      * The icon of the file component button
      */
-    icon: { type: String, default: null }
+    icon: { type: String, default: null },
+    /**
+     * Title for the file upload button.
+     */
+    title: { type: String, default: "Upload" }
   },
   emits: [
     /**
@@ -63,29 +71,29 @@ const V = s({
      */
     "update:modelValue"
   ],
-  setup(t, { emit: r }) {
-    const i = n(null), l = n([]), m = n(""), f = c(() => l.value.map((e) => ({ key: e.name, label: e.name }))), a = () => {
-      r("update:modelValue", t.multiple ? l.value : l.value[0]), t.directUpload && (l.value = []);
+  setup(o, { emit: r }) {
+    const i = n(null), l = n([]), f = n(""), m = c(() => l.value.map((e) => ({ key: e.name, label: e.name }))), a = () => {
+      r("update:modelValue", o.multiple ? l.value : l.value[0]), o.directUpload && (l.value = []);
     };
     return {
       fileInput: i,
       files: l,
-      fileList: f,
-      fileInputModel: m,
+      fileList: m,
+      fileInputModel: f,
       remove: (e) => {
-        t.disabled || (l.value = l.value.filter((o) => o.name !== e), a());
+        o.disabled || (l.value = l.value.filter((t) => t.name !== e), a());
       },
       clearAll: () => {
-        t.disabled || (l.value = [], a());
+        o.disabled || (l.value = [], a());
       },
       openFileDialog: () => {
-        var e;
-        (e = i.value) == null || e.click();
+        var e, t;
+        (t = (e = i.value) == null ? void 0 : e.neonInput) == null || t.click();
       },
       onInput: (e) => {
         if (e != null && e.target) {
-          const o = e.target.files, u = o ? Array.from(o).filter((d) => !l.value.find((p) => p.name === d.name)) : [];
-          l.value = t.multiple ? [...l.value, ...u] : u, a();
+          const t = e.target.files, u = t ? Array.from(t).filter((p) => !l.value.find((d) => d.name === p.name)) : [];
+          l.value = o.multiple ? [...l.value, ...u] : u, a();
         }
       }
     };

package/dist/components/user-input/file/NeonFile.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.es.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<HTMLInputElement | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_a","event","theFiles","newFiles"],"mappings":";;;;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,cAAc,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAA2B,SAASC,EAAU,MAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA,EAAK;AAAA,EAEtC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAYC,EAA6B,IAAI,GAC7CC,IAAQD,EAAiB,EAAE,GAC3BE,IAAiBF,EAAI,EAAE,GAEvBG,IAAWC,EAAS,MACjBH,EAAM,MAAM,IAAI,CAACI,OAAU,EAAE,KAAKA,EAAK,MAAM,OAAOA,EAAK,KAAA,EAAO,CACxE,GAEKC,IAAY,MAAM;AACtB,MAAAR,EAAK,qBAAqBD,EAAM,WAAWI,EAAM,QAAQA,EAAM,MAAM,CAAC,CAAC,GACnEJ,EAAM,iBACRI,EAAM,QAAQ,CAAA;AAAA,IAElB;AA+BA,WAAO;AAAA,MACL,WAAAF;AAAA,MACA,OAAAE;AAAA,MACA,UAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,QAlCa,CAACK,MAAqB;AACnC,QAAKV,EAAM,aACTI,EAAM,QAAQA,EAAM,MAAM,OAAO,CAACO,MAAMA,EAAE,SAASD,CAAQ,GAC3DD,EAAA;AAAA,MAEJ;AAAA,MA8BE,UA5Be,MAAM;AACrB,QAAKT,EAAM,aACTI,EAAM,QAAQ,CAAA,GACdK,EAAA;AAAA,MAEJ;AAAA,MAwBE,gBAtBqB,MAAM;;AAC3B,SAAAG,IAAAV,EAAU,UAAV,QAAAU,EAAiB;AAAA,MACnB;AAAA,MAqBE,SAnBc,CAACC,MAAiB;AAChC,YAAIA,KAAA,QAAAA,EAAO,QAAQ;AACjB,gBAAMC,IAAYD,EAAM,OAA4B,OAC9CE,IAAWD,IACb,MAAM,KAAKA,CAAQ,EAAE,OAAO,CAACN,MAAS,CAACJ,EAAM,MAAM,KAAK,CAACO,MAAMA,EAAE,SAASH,EAAK,IAAI,CAAC,IACpF,CAAA;AACJ,UAAAJ,EAAM,QAAQJ,EAAM,WAAW,CAAC,GAAGI,EAAM,OAAO,GAAGW,CAAQ,IAAIA,GAC/DN,EAAA;AAAA,QACF;AAAA,MACF;AAAA,IAUE;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonFile.es.js","sources":["../../../../src/components/user-input/file/NeonFile.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref } from 'vue';\nimport { NeonSize } from '@/common/enums/NeonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonState } from '@/common/enums/NeonState';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInput from '@/components/user-input/input/NeonInput.vue';\nimport NeonList from '@/components/user-input/list/NeonList.vue';\n\n/**\n * A file upload component. This is a wrapper around an HTML file input. It can display multiple files as well as\n * providing a convenient UI for removing/clearing files from the list.\n */\nexport default defineComponent({\n  name: 'NeonFile',\n  components: {\n    NeonButton,\n    NeonInput,\n    NeonList,\n  },\n  props: {\n    /**\n     * The disabled state of the component\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Files are uploaded directly once added, there is no waiting to click a confirmation button\n     */\n    directUpload: { type: Boolean, default: false },\n    /**\n     * Support multiple files.\n     */\n    multiple: { type: Boolean, default: false },\n    /**\n     * HTML file input accept property for filtering the files the user is allowed to select. This is a mime type,\n     * e.g. 'application/pdf'.\n     */\n    accept: { type: String, default: null },\n    /**\n     * Provide an id to attach to the internal HTML input[file] (also adds an aria-controls link between the button and\n     * the hidden input).\n     */\n    id: { type: String, default: null },\n    /**\n     * The file component size\n     */\n    size: { type: String as () => NeonSize, default: NeonSize.Medium },\n    /**\n     * The state of the input, used to indicate loading, success and error states\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * The file component color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * The label of the file component button\n     */\n    label: { type: String, default: null },\n    /**\n     * The icon of the file component button\n     */\n    icon: { type: String, default: null },\n    /**\n     * Title for the file upload button.\n     */\n    title: { type: String, default: 'Upload' },\n  },\n  emits: [\n    /**\n     * Emitted when files are selected and uploaded\n     * @type {File | File[]} either a single File (multiple = false) or a list of File objects (multiple = true)\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const fileInput = ref<InstanceType<typeof NeonInput> | null>(null);\n    const files = ref<Array<File>>([]);\n    const fileInputModel = ref('');\n\n    const fileList = computed(() => {\n      return files.value.map((file) => ({ key: file.name, label: file.name }));\n    });\n\n    const emitFiles = () => {\n      emit('update:modelValue', props.multiple ? files.value : files.value[0]);\n      if (props.directUpload) {\n        files.value = [];\n      }\n    };\n\n    const remove = (filename: string) => {\n      if (!props.disabled) {\n        files.value = files.value.filter((f) => f.name !== filename);\n        emitFiles();\n      }\n    };\n\n    const clearAll = () => {\n      if (!props.disabled) {\n        files.value = [];\n        emitFiles();\n      }\n    };\n\n    const openFileDialog = () => {\n      fileInput.value?.neonInput?.click();\n    };\n\n    const onInput = (event: Event) => {\n      if (event?.target) {\n        const theFiles = (event.target as HTMLInputElement).files;\n        const newFiles = theFiles\n          ? Array.from(theFiles).filter((file) => !files.value.find((f) => f.name === file.name))\n          : [];\n        files.value = props.multiple ? [...files.value, ...newFiles] : newFiles;\n        emitFiles();\n      }\n    };\n\n    return {\n      fileInput,\n      files,\n      fileList,\n      fileInputModel,\n      remove,\n      clearAll,\n      openFileDialog,\n      onInput,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonInput","NeonList","NeonSize","NeonState","NeonFunctionalColor","props","emit","fileInput","ref","files","fileInputModel","fileList","computed","file","emitFiles","filename","f","_b","_a","event","theFiles","newFiles"],"mappings":";;;;;;;AAYA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,cAAc,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIxC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,MAAM,EAAE,MAAM,QAA0B,SAASC,EAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAI1D,OAAO,EAAE,MAAM,QAA2B,SAASC,EAAU,MAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,UAAU,EAAE,MAAM,SAAS,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,OAAO,EAAE,MAAM,QAAQ,SAAS,SAAA;AAAA,EAAS;AAAA,EAE3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAYC,EAA2C,IAAI,GAC3DC,IAAQD,EAAiB,EAAE,GAC3BE,IAAiBF,EAAI,EAAE,GAEvBG,IAAWC,EAAS,MACjBH,EAAM,MAAM,IAAI,CAACI,OAAU,EAAE,KAAKA,EAAK,MAAM,OAAOA,EAAK,KAAA,EAAO,CACxE,GAEKC,IAAY,MAAM;AACtB,MAAAR,EAAK,qBAAqBD,EAAM,WAAWI,EAAM,QAAQA,EAAM,MAAM,CAAC,CAAC,GACnEJ,EAAM,iBACRI,EAAM,QAAQ,CAAA;AAAA,IAElB;AA+BA,WAAO;AAAA,MACL,WAAAF;AAAA,MACA,OAAAE;AAAA,MACA,UAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,QAlCa,CAACK,MAAqB;AACnC,QAAKV,EAAM,aACTI,EAAM,QAAQA,EAAM,MAAM,OAAO,CAACO,MAAMA,EAAE,SAASD,CAAQ,GAC3DD,EAAA;AAAA,MAEJ;AAAA,MA8BE,UA5Be,MAAM;AACrB,QAAKT,EAAM,aACTI,EAAM,QAAQ,CAAA,GACdK,EAAA;AAAA,MAEJ;AAAA,MAwBE,gBAtBqB,MAAM;;AAC3B,SAAAG,KAAAC,IAAAX,EAAU,UAAV,gBAAAW,EAAiB,cAAjB,QAAAD,EAA4B;AAAA,MAC9B;AAAA,MAqBE,SAnBc,CAACE,MAAiB;AAChC,YAAIA,KAAA,QAAAA,EAAO,QAAQ;AACjB,gBAAMC,IAAYD,EAAM,OAA4B,OAC9CE,IAAWD,IACb,MAAM,KAAKA,CAAQ,EAAE,OAAO,CAACP,MAAS,CAACJ,EAAM,MAAM,KAAK,CAACO,MAAMA,EAAE,SAASH,EAAK,IAAI,CAAC,IACpF,CAAA;AACJ,UAAAJ,EAAM,QAAQJ,EAAM,WAAW,CAAC,GAAGI,EAAM,OAAO,GAAGY,CAAQ,IAAIA,GAC/DP,EAAA;AAAA,QACF;AAAA,MACF;AAAA,IAUE;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/user-input/file/NeonFile.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonFile.cjs.js"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],p={class:"neon-button-group neon-file__actions"};function u(e,o,c,m,f,C){const s=l.resolveComponent("neon-list"),d=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(d,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",p,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",color:"low-contrast",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,onClick:e.openFileDialog},null,8,["aria-controls","color","disabled","icon","label","size","state","onClick"])])],10,r)}const b=t(a,[["render",u]]);module.exports=b;
+"use strict";const a=require("./NeonFile.cjs.js"),l=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["aria-disabled"],u={class:"neon-button-group neon-file__actions"};function p(e,o,b,m,f,C){const s=l.resolveComponent("neon-list"),d=l.resolveComponent("neon-input"),n=l.resolveComponent("neon-button");return l.openBlock(),l.createElementBlock("div",{"aria-disabled":e.disabled,class:l.normalizeClass([[`neon-file--${e.color}`,`neon-file--${e.size}`,{"neon-file--disabled":e.disabled,"neon-file--single":!e.multiple,"neon-file--direct-upload":e.directUpload}],"neon-file"])},[e.directUpload?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(s,{key:0,color:e.color,disabled:e.disabled,modelValue:e.fileList,size:e.size,onClose:e.remove},null,8,["color","disabled","modelValue","size","onClose"])),l.createVNode(d,{id:e.id,ref:"fileInput",modelValue:e.fileInputModel,"onUpdate:modelValue":o[0]||(o[0]=i=>e.fileInputModel=i),accept:e.accept,disabled:e.disabled,multiple:e.multiple,tabindex:-1,class:"neon-file__input",type:"file",onInput:e.onInput},null,8,["id","modelValue","accept","disabled","multiple","onInput"]),l.createElementVNode("div",u,[e.multiple&&!e.directUpload?(l.openBlock(),l.createBlock(n,{key:0,disabled:e.disabled||e.files.length===0,size:e.size,"button-style":"text",color:"low-contrast",label:"Clear all",onClick:o[1]||(o[1]=i=>e.clearAll())},null,8,["disabled","size"])):l.createCommentVNode("",!0),l.createVNode(n,{"aria-controls":e.id?e.id:void 0,circular:e.circular,color:e.color,disabled:e.disabled,icon:e.icon,label:e.label,size:e.size,state:e.state,title:e.title,onClick:e.openFileDialog},null,8,["aria-controls","circular","color","disabled","icon","label","size","state","title","onClick"])])],10,r)}const c=t(a,[["render",p]]);module.exports=c;
 //# sourceMappingURL=NeonFile.vue.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAkDM,MAAA,CAjDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAoBM,MApBNT,EAoBM,CAlBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAQEM,EAAA,OANC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,eACN,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YASEI,EAAA,CARC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,QAAOA,EAAA"}
+{"version":3,"file":"NeonFile.vue.cjs.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :circular=\"circular\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        :title=\"title\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":"uJA8BSA,EAAA,CAAA,MAAM,sCAAsC,8JA7BnDC,EAAAA,mBAoDM,MAAA,CAnDH,gBAAeC,EAAA,SACf,MAAKC,EAAAA,eAAA,CAAA,eAAwBD,EAAA,KAAK,iBAAwBA,EAAA,IAAI,0BAAmCA,EAAA,SAAQ,oBAAA,CAAwBA,EAAA,SAAQ,2BAA8BA,EAAA,YAAY,GAK9K,WAAW,CAAA,IAGRA,EAAA,wDADTE,EAAAA,YAOEC,EAAA,OALC,MAAOH,EAAA,MACP,SAAUA,EAAA,SACV,WAAYA,EAAA,SACZ,KAAMA,EAAA,KACN,QAAOA,EAAA,oEAEVI,EAAAA,YAWEC,EAAA,CAVC,GAAIL,EAAA,GACL,IAAI,uBACKA,EAAA,oDAAAA,EAAA,eAAcM,GACtB,OAAQN,EAAA,OACR,SAAUA,EAAA,SACV,SAAUA,EAAA,SACV,SAAU,GACX,MAAM,mBACN,KAAK,OACJ,QAAOA,EAAA,8EAEVO,EAAAA,mBAsBM,MAtBNT,EAsBM,CApBIE,EAAA,WAAaA,EAAA,4BADrBE,EAAAA,YAQEM,EAAA,OANC,SAAUR,EAAA,UAAYA,EAAA,MAAM,SAAM,EAClC,KAAMA,EAAA,KACP,eAAa,OACb,MAAM,eACN,MAAM,YACL,uBAAOA,EAAA,sEAEVI,EAAAA,YAWEI,EAAA,CAVC,gBAAeR,EAAA,GAAKA,EAAA,GAAK,OACzB,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,KAAMA,EAAA,KACN,MAAOA,EAAA,MACP,MAAOA,EAAA,MACP,QAAOA,EAAA"}

package/dist/components/user-input/file/NeonFile.vue.es.js

@@ -1,5 +1,5 @@
 import u from "./NeonFile.es.js";
-import { resolveComponent as o, openBlock as n, createElementBlock as m, normalizeClass as b, createBlock as s, createCommentVNode as a, createVNode as t, createElementVNode as f } from "vue";
+import { resolveComponent as o, openBlock as n, createElementBlock as m, normalizeClass as b, createBlock as a, createCommentVNode as s, createVNode as t, createElementVNode as f } from "vue";
 import c from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const z = ["aria-disabled"], C = { class: "neon-button-group neon-file__actions" };
 function k(e, l, V, $, I, v) {
@@ -12,7 +12,7 @@ function k(e, l, V, $, I, v) {
       { "neon-file--disabled": e.disabled, "neon-file--single": !e.multiple, "neon-file--direct-upload": e.directUpload }
     ], "neon-file"])
   }, [
-    e.directUpload ? a("", !0) : (n(), s(r, {
+    e.directUpload ? s("", !0) : (n(), a(r, {
       key: 0,
       color: e.color,
       disabled: e.disabled,
@@ -34,7 +34,7 @@ function k(e, l, V, $, I, v) {
       onInput: e.onInput
     }, null, 8, ["id", "modelValue", "accept", "disabled", "multiple", "onInput"]),
     f("div", C, [
-      e.multiple && !e.directUpload ? (n(), s(i, {
+      e.multiple && !e.directUpload ? (n(), a(i, {
         key: 0,
         disabled: e.disabled || e.files.length === 0,
         size: e.size,
@@ -42,17 +42,19 @@ function k(e, l, V, $, I, v) {
         color: "low-contrast",
         label: "Clear all",
         onClick: l[1] || (l[1] = (d) => e.clearAll())
-      }, null, 8, ["disabled", "size"])) : a("", !0),
+      }, null, 8, ["disabled", "size"])) : s("", !0),
       t(i, {
         "aria-controls": e.id ? e.id : void 0,
+        circular: e.circular,
         color: e.color,
         disabled: e.disabled,
         icon: e.icon,
         label: e.label,
         size: e.size,
         state: e.state,
+        title: e.title,
         onClick: e.openFileDialog
-      }, null, 8, ["aria-controls", "color", "disabled", "icon", "label", "size", "state", "onClick"])
+      }, null, 8, ["aria-controls", "circular", "color", "disabled", "icon", "label", "size", "state", "title", "onClick"])
     ])
   ], 10, z);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"NeonFile.vue.es.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":";;;6BA8BSA,IAAA,EAAA,OAAM,uCAAsC;;;cA7BnDC,EAkDM,OAAA;AAAA,IAjDH,iBAAeC,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA,oBAAwBD,EAAA,KAAK;AAAA,oBAAwBA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,UAAQ,qBAAA,CAAwBA,EAAA,UAAQ,4BAA8BA,EAAA,aAAY;AAAA,OAK9K,WAAW,CAAA;AAAA;IAGRA,EAAA,iCADTE,EAOEC,GAAA;AAAA;MALC,OAAOH,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,YAAYA,EAAA;AAAA,MACZ,MAAMA,EAAA;AAAA,MACN,SAAOA,EAAA;AAAA;IAEVI,EAWEC,GAAA;AAAA,MAVC,IAAIL,EAAA;AAAA,MACL,KAAI;AAAA,kBACKA,EAAA;AAAA,oDAAAA,EAAA,iBAAcM;AAAA,MACtB,QAAQN,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,UAAU;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,SAAOA,EAAA;AAAA;IAEVO,EAoBM,OApBNT,GAoBM;AAAA,MAlBIE,EAAA,aAAaA,EAAA,qBADrBE,EAQEM,GAAA;AAAA;QANC,UAAUR,EAAA,YAAYA,EAAA,MAAM,WAAM;AAAA,QAClC,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACL,gCAAOA,EAAA;;MAEVI,EASEI,GAAA;AAAA,QARC,iBAAeR,EAAA,KAAKA,EAAA,KAAK;AAAA,QACzB,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,SAAOA,EAAA;AAAA;;;;;"}
+{"version":3,"file":"NeonFile.vue.es.js","sources":["../../../../src/components/user-input/file/NeonFile.vue"],"sourcesContent":["<template>\n  <div\n    :aria-disabled=\"disabled\"\n    :class=\"[\n      `neon-file--${color}`,\n      `neon-file--${size}`,\n      { 'neon-file--disabled': disabled, 'neon-file--single': !multiple, 'neon-file--direct-upload': directUpload },\n    ]\"\n    class=\"neon-file\"\n  >\n    <neon-list\n      v-if=\"!directUpload\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n      :modelValue=\"fileList\"\n      :size=\"size\"\n      @close=\"remove\"\n    />\n    <neon-input\n      :id=\"id\"\n      ref=\"fileInput\"\n      v-model=\"fileInputModel\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      :multiple=\"multiple\"\n      :tabindex=\"-1\"\n      class=\"neon-file__input\"\n      type=\"file\"\n      @input=\"onInput\"\n    />\n    <div class=\"neon-button-group neon-file__actions\">\n      <neon-button\n        v-if=\"multiple && !directUpload\"\n        :disabled=\"disabled || files.length === 0\"\n        :size=\"size\"\n        button-style=\"text\"\n        color=\"low-contrast\"\n        label=\"Clear all\"\n        @click=\"clearAll()\"\n      />\n      <neon-button\n        :aria-controls=\"id ? id : undefined\"\n        :circular=\"circular\"\n        :color=\"color\"\n        :disabled=\"disabled\"\n        :icon=\"icon\"\n        :label=\"label\"\n        :size=\"size\"\n        :state=\"state\"\n        :title=\"title\"\n        @click=\"openFileDialog\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonFile.ts\" />\n"],"names":["_hoisted_2","_createElementBlock","_ctx","_normalizeClass","_createBlock","_component_neon_list","_createVNode","_component_neon_input","$event","_createElementVNode","_component_neon_button"],"mappings":";;;6BA8BSA,IAAA,EAAA,OAAM,uCAAsC;;;cA7BnDC,EAoDM,OAAA;AAAA,IAnDH,iBAAeC,EAAA;AAAA,IACf,OAAKC,EAAA,CAAA;AAAA,oBAAwBD,EAAA,KAAK;AAAA,oBAAwBA,EAAA,IAAI;AAAA,+BAAmCA,EAAA,UAAQ,qBAAA,CAAwBA,EAAA,UAAQ,4BAA8BA,EAAA,aAAY;AAAA,OAK9K,WAAW,CAAA;AAAA;IAGRA,EAAA,iCADTE,EAOEC,GAAA;AAAA;MALC,OAAOH,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,YAAYA,EAAA;AAAA,MACZ,MAAMA,EAAA;AAAA,MACN,SAAOA,EAAA;AAAA;IAEVI,EAWEC,GAAA;AAAA,MAVC,IAAIL,EAAA;AAAA,MACL,KAAI;AAAA,kBACKA,EAAA;AAAA,oDAAAA,EAAA,iBAAcM;AAAA,MACtB,QAAQN,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,UAAUA,EAAA;AAAA,MACV,UAAU;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,SAAOA,EAAA;AAAA;IAEVO,EAsBM,OAtBNT,GAsBM;AAAA,MApBIE,EAAA,aAAaA,EAAA,qBADrBE,EAQEM,GAAA;AAAA;QANC,UAAUR,EAAA,YAAYA,EAAA,MAAM,WAAM;AAAA,QAClC,MAAMA,EAAA;AAAA,QACP,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACL,gCAAOA,EAAA;;MAEVI,EAWEI,GAAA;AAAA,QAVC,iBAAeR,EAAA,KAAKA,EAAA,KAAK;AAAA,QACzB,UAAUA,EAAA;AAAA,QACV,OAAOA,EAAA;AAAA,QACP,UAAUA,EAAA;AAAA,QACV,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,MAAMA,EAAA;AAAA,QACN,OAAOA,EAAA;AAAA,QACP,OAAOA,EAAA;AAAA,QACP,SAAOA,EAAA;AAAA;;;;;"}

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

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

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

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