@aotearoan/neon 22.1.2 → 22.3.0

package/dist/components/presentation/badge/NeonBadge.es.js

@@ -1,14 +1,25 @@
-import { defineComponent as d, computed as r } from "vue";
+import { defineComponent as f, computed as a } from "vue";
 import { NeonFunctionalColor as e } from "../../../common/enums/NeonFunctionalColor.es.js";
-import g from "../icon/NeonIcon.vue.es.js";
-import { NeonJazziconUtils as c } from "../../../common/utils/NeonJazziconUtils.es.js";
-import { NeonColorUtils as f } from "../../../common/utils/NeonColorUtils.es.js";
-import { NeonBadgeSize as l } from "../../../common/enums/NeonBadgeSize.es.js";
-const N = d({
+import c from "../../user-input/file/NeonFile.vue.es.js";
+import p from "../icon/NeonIcon.vue.es.js";
+import { NeonJazziconUtils as s } from "../../../common/utils/NeonJazziconUtils.es.js";
+import { NeonColorUtils as y } from "../../../common/utils/NeonColorUtils.es.js";
+import { NeonBadgeSize as n } from "../../../common/enums/NeonBadgeSize.es.js";
+const j = f({
   name: "NeonBadge",
   components: {
-    NeonIcon: g
+    NeonFile: c,
+    NeonIcon: p
   },
+  emits: [
+    /**
+     * emitted when the user selects or clears their image in edit mode.
+     * NOTE: This emit event DOES NOT set the badge image, it is the responsibility of the parent component to pass an
+     * image URL back into the component's image property to set it, e.g. a data URI.
+     * @type {File}
+     */
+    "change-image"
+  ],
   props: {
     /**
      * The two character <em>initials</em> to display on the badge.
@@ -29,15 +40,24 @@ const N = d({
     /**
      * The size of the badge - s, m, l, xl, xxl.
      */
-    size: { type: String, default: l.Medium },
+    size: { type: String, default: n.Medium },
     /**
      * The color of the badge. This is one of the provided NeonFunctionalColors.
      */
-    color: { type: String, default: e.LowContrast },
+    color: { type: String, default: e.Primary },
     /**
      * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
      */
     alternateColor: { type: String, default: null },
+    /**
+     * Allow editing of the image. This will place an image file lookup button on top of the image allowing the user to
+     * choose a new image to upload.
+     */
+    editable: { type: Boolean, default: !1 },
+    /**
+     * Accept string for the filetype to support selecting.
+     */
+    accept: { type: String, default: "image/*" },
     /**
      * Display the badge in the disable style
      */
@@ -49,15 +69,19 @@ const N = d({
     /**
      * Badge image alt text.
      */
-    imageAlt: { type: String, default: "Badge" }
+    imageAlt: { type: String, default: "Badge" },
+    /**
+     * Title for the file upload button in edit mode.
+     */
+    editButtonTitle: { type: String, default: "Edit" }
   },
-  setup(o) {
-    const t = (i) => {
-      let n = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${i}-l1`);
-      n.length === 0 && (n = "0, 0, 0");
-      const u = n.trim().split(", ").map((m) => +m);
-      return f.rgbToHex(u);
-    }, a = r(() => [
+  setup(o, { emit: r }) {
+    const t = (u) => {
+      let l = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${u}-l1`);
+      l.length === 0 && (l = "0, 0, 0");
+      const d = l.trim().split(", ").map((g) => +g);
+      return y.rgbToHex(d);
+    }, i = a(() => [
       "#000000",
       t(e.Brand),
       t(e.Primary),
@@ -65,19 +89,20 @@ const N = d({
       t(e.Success),
       t(e.Warn),
       t(e.Error)
-    ]);
+    ]), m = a(
+      () => o.jazziconId ? s.genSvg(
+        i.value,
+        o.jazziconId,
+        o.size === n.Small ? 32 : o.size === n.Medium ? 40 : 48
+      ) : null
+    );
     return {
-      svg: r(
-        () => o.jazziconId ? c.genSvg(
-          a.value,
-          o.jazziconId,
-          o.size === l.Small ? 32 : o.size === l.Medium ? 40 : 48
-        ) : null
-      )
+      emit: r,
+      svg: m
     };
   }
 });
 export {
-  N as default
+  j as default
 };
 //# sourceMappingURL=NeonBadge.es.js.map

package/dist/components/presentation/badge/NeonBadge.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonBadge.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonJazziconUtils } from '@/common/utils/NeonJazziconUtils';\nimport { NeonColorUtils } from '@/common/utils/NeonColorUtils';\nimport { NeonBadgeSize } from '@/common/enums/NeonBadgeSize';\n\n/**\n * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).\n */\nexport default defineComponent({\n  name: 'NeonBadge',\n  components: {\n    NeonIcon,\n  },\n  props: {\n    /**\n     * The two character <em>initials</em> to display on the badge.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of the image to display on the badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * An icon to display on the badge.\n     */\n    icon: { type: String, default: null },\n    /**\n     * If true, render the badge as a circle, instead of a square.\n     */\n    circular: { type: Boolean, default: false },\n    /**\n     * The size of the badge - s, m, l, xl, xxl.\n     */\n    size: { type: String as () => NeonBadgeSize, default: NeonBadgeSize.Medium },\n    /**\n     * The color of the badge. This is one of the provided NeonFunctionalColors.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Display the badge in the disable style\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)\n     */\n    jazziconId: { type: String, default: null },\n    /**\n     * Badge image alt text.\n     */\n    imageAlt: { type: String, default: 'Badge' },\n  },\n  setup(props) {\n    const getColor = (key: NeonFunctionalColor) => {\n      let colorString = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${key}-l1`);\n      if (colorString.length === 0) {\n        colorString = '0, 0, 0';\n      }\n      const colorRgb = colorString\n        .trim()\n        .split(', ')\n        .map((str) => +str);\n      return NeonColorUtils.rgbToHex(colorRgb);\n    };\n\n    const palette = computed(() => [\n      '#000000',\n      getColor(NeonFunctionalColor.Brand),\n      getColor(NeonFunctionalColor.Primary),\n      getColor(NeonFunctionalColor.Info),\n      getColor(NeonFunctionalColor.Success),\n      getColor(NeonFunctionalColor.Warn),\n      getColor(NeonFunctionalColor.Error),\n    ]);\n\n    const svg = computed(() =>\n      props.jazziconId\n        ? NeonJazziconUtils.genSvg(\n            palette.value,\n            props.jazziconId,\n            props.size === NeonBadgeSize.Small ? 32 : props.size === NeonBadgeSize.Medium ? 40 : 48,\n          )\n        : null,\n    );\n\n    return {\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonBadgeSize","NeonFunctionalColor","props","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","NeonJazziconUtils"],"mappings":";;;;;;AAUA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,MAAM,EAAE,MAAM,QAA+B,SAASC,EAAc,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpE,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,YAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,gBAAgB,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAItE,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,YAAY,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,QAAQ,SAAS,QAAA;AAAA,EAAQ;AAAA,EAE7C,MAAMC,GAAO;AACX,UAAMC,IAAW,CAACC,MAA6B;AAC7C,UAAIC,IAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAcD,CAAG,KAAK;AACpG,MAAIC,EAAY,WAAW,MACzBA,IAAc;AAEhB,YAAMC,IAAWD,EACd,KAAA,EACA,MAAM,IAAI,EACV,IAAI,CAACE,MAAQ,CAACA,CAAG;AACpB,aAAOC,EAAe,SAASF,CAAQ;AAAA,IACzC,GAEMG,IAAUC,EAAS,MAAM;AAAA,MAC7B;AAAA,MACAP,EAASF,EAAoB,KAAK;AAAA,MAClCE,EAASF,EAAoB,OAAO;AAAA,MACpCE,EAASF,EAAoB,IAAI;AAAA,MACjCE,EAASF,EAAoB,OAAO;AAAA,MACpCE,EAASF,EAAoB,IAAI;AAAA,MACjCE,EAASF,EAAoB,KAAK;AAAA,IAAA,CACnC;AAYD,WAAO;AAAA,MACL,KAXUS;AAAA,QAAS,MACnBR,EAAM,aACFS,EAAkB;AAAA,UAChBF,EAAQ;AAAA,UACRP,EAAM;AAAA,UACNA,EAAM,SAASF,EAAc,QAAQ,KAAKE,EAAM,SAASF,EAAc,SAAS,KAAK;AAAA,QAAA,IAEvF;AAAA,MAAA;AAAA,IAIJ;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonBadge.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport NeonFile from '@/components/user-input/file/NeonFile.vue';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport { NeonJazziconUtils } from '@/common/utils/NeonJazziconUtils';\nimport { NeonColorUtils } from '@/common/utils/NeonColorUtils';\nimport { NeonBadgeSize } from '@/common/enums/NeonBadgeSize';\n\n/**\n * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).\n */\nexport default defineComponent({\n  name: 'NeonBadge',\n  components: {\n    NeonFile,\n    NeonIcon,\n  },\n  emits: [\n    /**\n     * emitted when the user selects or clears their image in edit mode.\n     * NOTE: This emit event DOES NOT set the badge image, it is the responsibility of the parent component to pass an\n     * image URL back into the component's image property to set it, e.g. a data URI.\n     * @type {File}\n     */\n    'change-image',\n  ],\n  props: {\n    /**\n     * The two character <em>initials</em> to display on the badge.\n     */\n    label: { type: String, default: null },\n    /**\n     * URL of the image to display on the badge.\n     */\n    image: { type: String, default: null },\n    /**\n     * An icon to display on the badge.\n     */\n    icon: { type: String, default: null },\n    /**\n     * If true, render the badge as a circle, instead of a square.\n     */\n    circular: { type: Boolean, default: false },\n    /**\n     * The size of the badge - s, m, l, xl, xxl.\n     */\n    size: { type: String as () => NeonBadgeSize, default: NeonBadgeSize.Medium },\n    /**\n     * The color of the badge. This is one of the provided NeonFunctionalColors.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Primary },\n    /**\n     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Allow editing of the image. This will place an image file lookup button on top of the image allowing the user to\n     * choose a new image to upload.\n     */\n    editable: { type: Boolean, default: false },\n    /**\n     * Accept string for the filetype to support selecting.\n     */\n    accept: { type: String, default: 'image/*' },\n    /**\n     * Display the badge in the disable style\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)\n     */\n    jazziconId: { type: String, default: null },\n    /**\n     * Badge image alt text.\n     */\n    imageAlt: { type: String, default: 'Badge' },\n    /**\n     * Title for the file upload button in edit mode.\n     */\n    editButtonTitle: { type: String, default: 'Edit' },\n  },\n  setup(props, { emit }) {\n    const getColor = (key: NeonFunctionalColor) => {\n      let colorString = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${key}-l1`);\n      if (colorString.length === 0) {\n        colorString = '0, 0, 0';\n      }\n      const colorRgb = colorString\n        .trim()\n        .split(', ')\n        .map((str) => +str);\n      return NeonColorUtils.rgbToHex(colorRgb);\n    };\n\n    const palette = computed(() => [\n      '#000000',\n      getColor(NeonFunctionalColor.Brand),\n      getColor(NeonFunctionalColor.Primary),\n      getColor(NeonFunctionalColor.Info),\n      getColor(NeonFunctionalColor.Success),\n      getColor(NeonFunctionalColor.Warn),\n      getColor(NeonFunctionalColor.Error),\n    ]);\n\n    const svg = computed(() =>\n      props.jazziconId\n        ? NeonJazziconUtils.genSvg(\n            palette.value,\n            props.jazziconId,\n            props.size === NeonBadgeSize.Small ? 32 : props.size === NeonBadgeSize.Medium ? 40 : 48,\n          )\n        : null,\n    );\n\n    return {\n      emit,\n      svg,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonFile","NeonIcon","NeonBadgeSize","NeonFunctionalColor","props","emit","getColor","key","colorString","colorRgb","str","NeonColorUtils","palette","computed","svg","NeonJazziconUtils"],"mappings":";;;;;;;AAWA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,OAAO,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,MAAM,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI/B,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,MAAM,EAAE,MAAM,QAA+B,SAASC,EAAc,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpE,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,gBAAgB,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtE,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,QAAQ,EAAE,MAAM,QAAQ,SAAS,UAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,YAAY,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAIrC,UAAU,EAAE,MAAM,QAAQ,SAAS,QAAA;AAAA;AAAA;AAAA;AAAA,IAInC,iBAAiB,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA,EAAO;AAAA,EAEnD,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAW,CAACC,MAA6B;AAC7C,UAAIC,IAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAcD,CAAG,KAAK;AACpG,MAAIC,EAAY,WAAW,MACzBA,IAAc;AAEhB,YAAMC,IAAWD,EACd,KAAA,EACA,MAAM,IAAI,EACV,IAAI,CAACE,MAAQ,CAACA,CAAG;AACpB,aAAOC,EAAe,SAASF,CAAQ;AAAA,IACzC,GAEMG,IAAUC,EAAS,MAAM;AAAA,MAC7B;AAAA,MACAP,EAASH,EAAoB,KAAK;AAAA,MAClCG,EAASH,EAAoB,OAAO;AAAA,MACpCG,EAASH,EAAoB,IAAI;AAAA,MACjCG,EAASH,EAAoB,OAAO;AAAA,MACpCG,EAASH,EAAoB,IAAI;AAAA,MACjCG,EAASH,EAAoB,KAAK;AAAA,IAAA,CACnC,GAEKW,IAAMD;AAAA,MAAS,MACnBT,EAAM,aACFW,EAAkB;AAAA,QAChBH,EAAQ;AAAA,QACRR,EAAM;AAAA,QACNA,EAAM,SAASF,EAAc,QAAQ,KAAKE,EAAM,SAASF,EAAc,SAAS,KAAK;AAAA,MAAA,IAEvF;AAAA,IAAA;AAGN,WAAO;AAAA,MACL,MAAAG;AAAA,MACA,KAAAS;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/presentation/badge/NeonBadge.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("./NeonBadge.cjs.js"),n=require("vue"),l=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r=["innerHTML"],s={key:1,class:"neon-badge__label"},i=["alt","src"];function d(e,t,g,b,m,p){const o=n.resolveComponent("neon-icon");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[`neon-badge--${e.color}`,e.alternateColor?`neon-badge--alternate-color-${e.alternateColor}`:"",`neon-badge--${e.size}`,{"neon-badge--with-label":e.label,"neon-badge--disabled":e.disabled,"neon-badge--with-image":e.image,"neon-badge--with-icon":e.icon},e.circular?"neon-badge--circular":"neon-badge--square"],"neon-badge"])},[e.jazziconId?(n.openBlock(),n.createElementBlock("div",{key:0,class:"neon-badge__image",innerHTML:e.svg},null,8,r)):e.label?(n.openBlock(),n.createElementBlock("span",s,n.toDisplayString(e.label),1)):e.image?(n.openBlock(),n.createElementBlock("img",{key:2,alt:e.imageAlt,src:e.image,class:"neon-badge__image"},null,8,i)):e.icon?(n.openBlock(),n.createBlock(o,{key:3,disabled:e.disabled,inverse:!!e.color,name:e.icon,class:"neon-badge__icon"},null,8,["disabled","inverse","name"])):n.createCommentVNode("",!0)],2)}const c=l(a,[["render",d]]);module.exports=c;
+"use strict";const r=require("./NeonBadge.cjs.js"),n=require("vue"),s=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d=["innerHTML"],t={key:1,class:"neon-badge__label"},c=["alt","src"];function b(e,o,p,u,m,k){const l=n.resolveComponent("neon-icon"),a=n.resolveComponent("neon-file");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass([[`neon-badge--${e.color}`,e.alternateColor?`neon-badge--alternate-color-${e.alternateColor}`:"",`neon-badge--${e.size}`,{"neon-badge--with-label":e.label,"neon-badge--disabled":e.disabled,"neon-badge--with-image":e.image,"neon-badge--with-icon":e.icon,"neon-badge--editable":e.editable},e.circular?"neon-badge--circular":"neon-badge--square"],"neon-badge"])},[e.jazziconId?(n.openBlock(),n.createElementBlock("div",{key:0,class:"neon-badge__image",innerHTML:e.svg},null,8,d)):e.label?(n.openBlock(),n.createElementBlock("span",t,n.toDisplayString(e.label),1)):e.image?(n.openBlock(),n.createElementBlock("img",{key:2,alt:e.imageAlt,src:e.image,class:"neon-badge__image"},null,8,c)):e.icon?(n.openBlock(),n.createBlock(l,{key:3,disabled:e.disabled,inverse:!!e.color,name:e.icon,class:"neon-badge__icon"},null,8,["disabled","inverse","name"])):n.createCommentVNode("",!0),e.editable?(n.openBlock(),n.createBlock(a,{key:4,accept:e.accept,circular:e.circular,color:e.color,"direct-upload":!0,disabled:e.disabled,size:e.size,title:e.editButtonTitle,class:"neon-badge__upload",icon:"pencil","onUpdate:modelValue":o[0]||(o[0]=i=>e.emit("change-image",i))},null,8,["accept","circular","color","disabled","size","title"])):n.createCommentVNode("",!0)],2)}const g=s(r,[["render",b]]);module.exports=g;
 //# sourceMappingURL=NeonBadge.vue.cjs.js.map

package/dist/components/presentation/badge/NeonBadge.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonBadge.vue.cjs.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon"],"mappings":"6JAiB4B,MAAM,0HAhBhCA,EAAAA,mBAmBM,MAAA,CAlBH,MAAKC,EAAAA,eAAA,CAAA,gBAAyBC,EAAA,KAAK,GAAUA,EAAA,8CAAgDA,EAAA,cAAc,GAAA,kBAA8BA,EAAA,IAAI,6BAA8CA,EAAA,6BAAuCA,EAAA,kCAA4CA,EAAA,8BAAwCA,EAAA,MAAqBA,EAAA,SAAQ,uBAAA,sBAY9U,YAAY,CAAA,IAEPA,EAAA,0BAAXF,EAAAA,mBAAgE,MAAA,OAAzC,MAAM,oBAAoB,UAAQE,EAAA,gBACxCA,EAAA,qBAAjBF,EAAAA,mBAAoE,OAApEG,EAAoEC,EAAAA,gBAAfF,EAAA,KAAK,EAAA,CAAA,GAC1CA,EAAA,qBAAhBF,EAAAA,mBAAgF,MAAA,OAAxD,IAAKE,EAAA,SAAW,IAAKA,EAAA,MAAO,MAAM,gCACpCA,EAAA,oBAAtBG,EAAAA,YAA4GC,EAAA,OAA/E,SAAUJ,EAAA,SAAW,UAAWA,EAAA,MAAQ,KAAMA,EAAA,KAAM,MAAM"}
+{"version":3,"file":"NeonBadge.vue.cjs.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n        'neon-badge--editable': editable,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n    <neon-file\n      v-if=\"editable\"\n      :accept=\"accept\"\n      :circular=\"circular\"\n      :color=\"color\"\n      :direct-upload=\"true\"\n      :disabled=\"disabled\"\n      :size=\"size\"\n      :title=\"editButtonTitle\"\n      class=\"neon-badge__upload\"\n      icon=\"pencil\"\n      @update:modelValue=\"emit('change-image', $event)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon","_component_neon_file","_cache","$event"],"mappings":"6JAkB4B,MAAM,4JAjBhCA,EAAAA,mBAiCM,MAAA,CAhCH,MAAKC,EAAAA,eAAA,CAAA,gBAAyBC,EAAA,KAAK,GAAUA,EAAA,8CAAgDA,EAAA,cAAc,GAAA,kBAA8BA,EAAA,IAAI,6BAA8CA,EAAA,6BAAuCA,EAAA,kCAA4CA,EAAA,8BAAwCA,EAAA,4BAAsCA,EAAA,UAAyBA,EAAA,SAAQ,uBAAA,sBAaxX,YAAY,CAAA,IAEPA,EAAA,0BAAXF,EAAAA,mBAAgE,MAAA,OAAzC,MAAM,oBAAoB,UAAQE,EAAA,gBACxCA,EAAA,qBAAjBF,EAAAA,mBAAoE,OAApEG,EAAoEC,EAAAA,gBAAfF,EAAA,KAAK,EAAA,CAAA,GAC1CA,EAAA,qBAAhBF,EAAAA,mBAAgF,MAAA,OAAxD,IAAKE,EAAA,SAAW,IAAKA,EAAA,MAAO,MAAM,gCACpCA,EAAA,oBAAtBG,EAAAA,YAA4GC,EAAA,OAA/E,SAAUJ,EAAA,SAAW,UAAWA,EAAA,MAAQ,KAAMA,EAAA,KAAM,MAAM,uFAE/EA,EAAA,wBADRG,EAAAA,YAYEE,EAAA,OAVC,OAAQL,EAAA,OACR,SAAUA,EAAA,SACV,MAAOA,EAAA,MACP,gBAAe,GACf,SAAUA,EAAA,SACV,KAAMA,EAAA,KACN,MAAOA,EAAA,gBACR,MAAM,qBACN,KAAK,SACJ,sBAAiBM,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEP,EAAA,KAAI,eAAiBO,CAAM"}

package/dist/components/presentation/badge/NeonBadge.vue.es.js

@@ -1,14 +1,14 @@
-import l from "./NeonBadge.es.js";
-import { resolveComponent as i, openBlock as n, createElementBlock as o, normalizeClass as s, toDisplayString as r, createBlock as d, createCommentVNode as g } from "vue";
-import b from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const m = ["innerHTML"], t = {
+import b from "./NeonBadge.es.js";
+import { resolveComponent as l, openBlock as n, createElementBlock as o, normalizeClass as c, toDisplayString as g, createBlock as i, createCommentVNode as d } from "vue";
+import m from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const p = ["innerHTML"], u = {
   key: 1,
   class: "neon-badge__label"
-}, c = ["alt", "src"];
-function p(e, u, f, h, k, $) {
-  const a = i("neon-icon");
+}, f = ["alt", "src"];
+function k(e, a, z, $, h, v) {
+  const r = l("neon-icon"), s = l("neon-file");
   return n(), o("div", {
-    class: s([[
+    class: c([[
       `neon-badge--${e.color}`,
       e.alternateColor ? `neon-badge--alternate-color-${e.alternateColor}` : "",
       `neon-badge--${e.size}`,
@@ -16,7 +16,8 @@ function p(e, u, f, h, k, $) {
         "neon-badge--with-label": e.label,
         "neon-badge--disabled": e.disabled,
         "neon-badge--with-image": e.image,
-        "neon-badge--with-icon": e.icon
+        "neon-badge--with-icon": e.icon,
+        "neon-badge--editable": e.editable
       },
       e.circular ? "neon-badge--circular" : "neon-badge--square"
     ], "neon-badge"])
@@ -25,22 +26,35 @@ function p(e, u, f, h, k, $) {
       key: 0,
       class: "neon-badge__image",
       innerHTML: e.svg
-    }, null, 8, m)) : e.label ? (n(), o("span", t, r(e.label), 1)) : e.image ? (n(), o("img", {
+    }, null, 8, p)) : e.label ? (n(), o("span", u, g(e.label), 1)) : e.image ? (n(), o("img", {
       key: 2,
       alt: e.imageAlt,
       src: e.image,
       class: "neon-badge__image"
-    }, null, 8, c)) : e.icon ? (n(), d(a, {
+    }, null, 8, f)) : e.icon ? (n(), i(r, {
       key: 3,
       disabled: e.disabled,
       inverse: !!e.color,
       name: e.icon,
       class: "neon-badge__icon"
-    }, null, 8, ["disabled", "inverse", "name"])) : g("", !0)
+    }, null, 8, ["disabled", "inverse", "name"])) : d("", !0),
+    e.editable ? (n(), i(s, {
+      key: 4,
+      accept: e.accept,
+      circular: e.circular,
+      color: e.color,
+      "direct-upload": !0,
+      disabled: e.disabled,
+      size: e.size,
+      title: e.editButtonTitle,
+      class: "neon-badge__upload",
+      icon: "pencil",
+      "onUpdate:modelValue": a[0] || (a[0] = (t) => e.emit("change-image", t))
+    }, null, 8, ["accept", "circular", "color", "disabled", "size", "title"])) : d("", !0)
   ], 2);
 }
-const _ = /* @__PURE__ */ b(l, [["render", p]]);
+const w = /* @__PURE__ */ m(b, [["render", k]]);
 export {
-  _ as default
+  w as default
 };
 //# sourceMappingURL=NeonBadge.vue.es.js.map

package/dist/components/presentation/badge/NeonBadge.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonBadge.vue.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon"],"mappings":";;;;;EAiB4B,OAAM;;;;cAhBhCA,EAmBM,OAAA;AAAA,IAlBH,OAAKC,EAAA,CAAA;AAAA,qBAAyBC,EAAA,KAAK;AAAA,MAAUA,EAAA,gDAAgDA,EAAA,cAAc,KAAA;AAAA,qBAA8BA,EAAA,IAAI;AAAA;kCAA8CA,EAAA;AAAA,gCAAuCA,EAAA;AAAA,kCAA4CA,EAAA;AAAA,iCAAwCA,EAAA;AAAA;MAAqBA,EAAA,WAAQ,yBAAA;AAAA,OAY9U,YAAY,CAAA;AAAA;IAEPA,EAAA,mBAAXF,EAAgE,OAAA;AAAA;MAAzC,OAAM;AAAA,MAAoB,WAAQE,EAAA;AAAA,sBACxCA,EAAA,cAAjBF,EAAoE,QAApEG,GAAoEC,EAAfF,EAAA,KAAK,GAAA,CAAA,KAC1CA,EAAA,cAAhBF,EAAgF,OAAA;AAAA;MAAxD,KAAKE,EAAA;AAAA,MAAW,KAAKA,EAAA;AAAA,MAAO,OAAM;AAAA,sBACpCA,EAAA,aAAtBG,EAA4GC,GAAA;AAAA;MAA/E,UAAUJ,EAAA;AAAA,MAAW,WAAWA,EAAA;AAAA,MAAQ,MAAMA,EAAA;AAAA,MAAM,OAAM;AAAA;;;;"}
+{"version":3,"file":"NeonBadge.vue.es.js","sources":["../../../../src/components/presentation/badge/NeonBadge.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      `neon-badge--${color}`,\n      alternateColor ? `neon-badge--alternate-color-${alternateColor}` : '',\n      `neon-badge--${size}`,\n      {\n        'neon-badge--with-label': label,\n        'neon-badge--disabled': disabled,\n        'neon-badge--with-image': image,\n        'neon-badge--with-icon': icon,\n        'neon-badge--editable': editable,\n      },\n      circular ? 'neon-badge--circular' : 'neon-badge--square',\n    ]\"\n    class=\"neon-badge\"\n  >\n    <div v-if=\"jazziconId\" class=\"neon-badge__image\" v-html=\"svg\" />\n    <span v-else-if=\"label\" class=\"neon-badge__label\">{{ label }}</span>\n    <img v-else-if=\"image\" :alt=\"imageAlt\" :src=\"image\" class=\"neon-badge__image\" />\n    <neon-icon v-else-if=\"icon\" :disabled=\"disabled\" :inverse=\"!!color\" :name=\"icon\" class=\"neon-badge__icon\" />\n    <neon-file\n      v-if=\"editable\"\n      :accept=\"accept\"\n      :circular=\"circular\"\n      :color=\"color\"\n      :direct-upload=\"true\"\n      :disabled=\"disabled\"\n      :size=\"size\"\n      :title=\"editButtonTitle\"\n      class=\"neon-badge__upload\"\n      icon=\"pencil\"\n      @update:modelValue=\"emit('change-image', $event)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBadge.ts\" />\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_hoisted_2","_toDisplayString","_createBlock","_component_neon_icon","_component_neon_file","_cache","$event"],"mappings":";;;;;EAkB4B,OAAM;;;;cAjBhCA,EAiCM,OAAA;AAAA,IAhCH,OAAKC,EAAA,CAAA;AAAA,qBAAyBC,EAAA,KAAK;AAAA,MAAUA,EAAA,gDAAgDA,EAAA,cAAc,KAAA;AAAA,qBAA8BA,EAAA,IAAI;AAAA;kCAA8CA,EAAA;AAAA,gCAAuCA,EAAA;AAAA,kCAA4CA,EAAA;AAAA,iCAAwCA,EAAA;AAAA,gCAAsCA,EAAA;AAAA;MAAyBA,EAAA,WAAQ,yBAAA;AAAA,OAaxX,YAAY,CAAA;AAAA;IAEPA,EAAA,mBAAXF,EAAgE,OAAA;AAAA;MAAzC,OAAM;AAAA,MAAoB,WAAQE,EAAA;AAAA,sBACxCA,EAAA,cAAjBF,EAAoE,QAApEG,GAAoEC,EAAfF,EAAA,KAAK,GAAA,CAAA,KAC1CA,EAAA,cAAhBF,EAAgF,OAAA;AAAA;MAAxD,KAAKE,EAAA;AAAA,MAAW,KAAKA,EAAA;AAAA,MAAO,OAAM;AAAA,sBACpCA,EAAA,aAAtBG,EAA4GC,GAAA;AAAA;MAA/E,UAAUJ,EAAA;AAAA,MAAW,WAAWA,EAAA;AAAA,MAAQ,MAAMA,EAAA;AAAA,MAAM,OAAM;AAAA;IAE/EA,EAAA,iBADRG,EAYEE,GAAA;AAAA;MAVC,QAAQL,EAAA;AAAA,MACR,UAAUA,EAAA;AAAA,MACV,OAAOA,EAAA;AAAA,MACP,iBAAe;AAAA,MACf,UAAUA,EAAA;AAAA,MACV,MAAMA,EAAA;AAAA,MACN,OAAOA,EAAA;AAAA,MACR,OAAM;AAAA,MACN,MAAK;AAAA,MACJ,uBAAiBM,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEP,EAAA,KAAI,gBAAiBO,CAAM;AAAA;;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";const o=require("vue"),b=require("../../navigation/link/NeonLink.vue.cjs.js"),I=require("../../user-input/button/NeonButton.vue.cjs.js"),L=o.defineComponent({name:"NeonImageCarousel",components:{NeonButton:I,NeonLink:b},props:{images:{type:Array,required:!0},imageCountLabel:{type:String,default:void 0},hideLabel:{type:Boolean,default:!1},previousLabel:{type:String,default:"Previous"},nextLabel:{type:String,default:"Next"}},emits:["current-image"],setup(a,{emit:u}){const r=o.ref(!1),n=o.ref(0),t=o.ref(null),l=o.ref([]),i=o.ref([]),c=e=>{e!==n.value&&(n.value=e,u("current-image",e))},s=e=>{t.value&&a.images.length>0&&(c(e),t.value.scrollTo(t.value.clientWidth*e,0))},f=()=>{n.value<a.images.length-1&&s(n.value+1)},m=()=>{n.value!==0&&s(n.value-1)};return o.onMounted(()=>{const e={root:t.value,rootMargin:"0px",threshold:.6};i.value=l.value.map((g,p)=>{const v=new IntersectionObserver(d=>{d.forEach(h=>{r.value&&h.isIntersecting&&c(p)})},e);return v.observe(g),v}),setTimeout(()=>{t.value&&t.value.scrollLeft!==0&&(t.value.scrollLeft=0),r.value=!0},50)}),o.onUnmounted(()=>{i.value.forEach(e=>e.disconnect())}),{emit:u,currentImage:n,carouselItem:l,carouselItems:t,initialised:r,next:f,previous:m,scrollTo:s}}});module.exports=L;
+"use strict";const t=require("vue"),L=require("../../navigation/link/NeonLink.vue.cjs.js"),y=require("../../user-input/button/NeonButton.vue.cjs.js"),I=require("../../layout/stack/NeonStack.vue.cjs.js"),q=t.defineComponent({name:"NeonImageCarousel",components:{NeonButton:y,NeonLink:L,NeonStack:I},props:{images:{type:Array,required:!0},imageCountLabel:{type:String,default:void 0},hideLabel:{type:Boolean,default:!1},closeLabel:{type:String,default:"Close"},previousLabel:{type:String,default:"Previous"},nextLabel:{type:String,default:"Next"}},emits:["current-image"],setup(l,{emit:r}){const s=t.ref(!1),n=t.ref(0),o=t.ref(null),u=t.ref([]),c=t.ref([]),i=t.ref(!1),v=e=>{e!==n.value&&(n.value=e,r("current-image",e))},a=e=>{o.value&&l.images.length>0&&(v(e),o.value.scrollTo(o.value.clientWidth*e,0))},m=()=>{n.value<l.images.length-1&&a(n.value+1)},d=()=>{n.value!==0&&a(n.value-1)};return t.onMounted(()=>{const e={root:o.value,rootMargin:"0px",threshold:.6};c.value=u.value.map((g,p)=>{const f=new IntersectionObserver(b=>{b.forEach(h=>{s.value&&h.isIntersecting&&v(p)})},e);return f.observe(g),f}),setTimeout(()=>{o.value&&o.value.scrollLeft!==0&&(o.value.scrollLeft=0),s.value=!0},50)}),t.onUnmounted(()=>{c.value.forEach(e=>e.disconnect())}),t.watch(()=>i.value,e=>{e?document.body.classList.add("neon-closable--open"):document.body.classList.remove("neon-closable--open")}),{emit:r,currentImage:n,carouselItem:u,carouselItems:o,initialised:s,expanded:i,next:m,previous:d,scrollTo:a}}});module.exports=q;
 //# sourceMappingURL=NeonImageCarousel.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonImageCarousel.cjs.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref } from 'vue';\nimport type { NeonCarouselImage } from '@/common/models/NeonCarouselImage';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * <p>\n *   The <strong>NeonImageCarousel</strong> is used to display a carousel of images for the user to swipe\n *   through. NOTE: It is recommended to explicitly set the width & height of the carousel via CSS, this will\n *   ensure it will not be impacted by images with different aspect ratios. Images are automatically resized to fit the\n *   carousel dimensions.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonImageCarousel',\n  components: {\n    NeonButton,\n    NeonLink,\n  },\n  props: {\n    /**\n     * The images to be displayed in the carousel.\n     */\n    images: { type: Array as () => Array<NeonCarouselImage>, required: true },\n    /**\n     * Provide an alternative image count label. This can be useful for translations. The default is e.g.\n     * <em>2 images</em>.\n     */\n    imageCountLabel: { type: String, default: undefined },\n    /**\n     * Hide the label under the dot navigation.\n     */\n    hideLabel: { type: Boolean, default: false },\n    /**\n     * Provide an alternative label for the Previous button.\n     */\n    previousLabel: { type: String, default: 'Previous' },\n    /**\n     * Provide an alternative label for the Next button.\n     */\n    nextLabel: { type: String, default: 'Next' },\n  },\n  emits: [\n    /**\n     * The index of the currently visible image.\n     *\n     * @type {number}\n     */\n    'current-image',\n  ],\n  setup(props, { emit }) {\n    const initialised = ref<boolean>(false);\n    const currentImage = ref<number>(0);\n    const carouselItems = ref<HTMLUListElement | null>(null);\n    const carouselItem = ref<Array<HTMLLIElement>>([]);\n    const observers = ref<Array<IntersectionObserver>>([]);\n\n    const changeImage = (index: number) => {\n      if (index !== currentImage.value) {\n        currentImage.value = index;\n        emit('current-image', index);\n      }\n    };\n\n    const scrollTo = (index: number) => {\n      if (carouselItems.value && props.images.length > 0) {\n        changeImage(index);\n        carouselItems.value.scrollTo(carouselItems.value.clientWidth * index, 0);\n      }\n    };\n\n    const next = () => {\n      if (currentImage.value < props.images.length - 1) {\n        scrollTo(currentImage.value + 1);\n      }\n    };\n\n    const previous = () => {\n      if (currentImage.value !== 0) {\n        scrollTo(currentImage.value - 1);\n      }\n    };\n\n    onMounted(() => {\n      const options = {\n        root: carouselItems.value,\n        rootMargin: '0px',\n        threshold: 0.6,\n      };\n\n      observers.value = carouselItem.value.map((el, index) => {\n        const obs = new IntersectionObserver((entries) => {\n          entries.forEach((entry) => {\n            // filter out the observations on initialization\n            if (initialised.value && entry.isIntersecting) {\n              changeImage(index);\n            }\n          });\n        }, options);\n        obs.observe(el);\n\n        return obs;\n      });\n\n      setTimeout(() => {\n        // initialise scroll position to first element\n        if (carouselItems.value && carouselItems.value.scrollLeft !== 0) {\n          carouselItems.value.scrollLeft = 0;\n        }\n        initialised.value = true;\n      }, 50);\n    });\n\n    onUnmounted(() => {\n      observers.value.forEach((observer) => observer.disconnect());\n    });\n\n    return {\n      emit,\n      currentImage,\n      carouselItem,\n      carouselItems,\n      initialised,\n      next,\n      previous,\n      scrollTo,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonLink","props","emit","initialised","ref","currentImage","carouselItems","carouselItem","observers","changeImage","index","scrollTo","next","previous","onMounted","options","el","obs","entries","entry","onUnmounted","observer"],"mappings":"sJAaAA,EAAeC,kBAAgB,CAC7B,KAAM,oBACN,WAAY,CACV,WAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAIL,OAAQ,CAAE,KAAM,MAAyC,SAAU,EAAA,EAKnE,gBAAiB,CAAE,KAAM,OAAQ,QAAS,MAAA,EAI1C,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAIxC,UAAW,CAAE,KAAM,OAAQ,QAAS,MAAA,CAAO,EAE7C,MAAO,CAML,eAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAcC,EAAAA,IAAa,EAAK,EAChCC,EAAeD,EAAAA,IAAY,CAAC,EAC5BE,EAAgBF,EAAAA,IAA6B,IAAI,EACjDG,EAAeH,EAAAA,IAA0B,EAAE,EAC3CI,EAAYJ,EAAAA,IAAiC,EAAE,EAE/CK,EAAeC,GAAkB,CACjCA,IAAUL,EAAa,QACzBA,EAAa,MAAQK,EACrBR,EAAK,gBAAiBQ,CAAK,EAE/B,EAEMC,EAAYD,GAAkB,CAC9BJ,EAAc,OAASL,EAAM,OAAO,OAAS,IAC/CQ,EAAYC,CAAK,EACjBJ,EAAc,MAAM,SAASA,EAAc,MAAM,YAAcI,EAAO,CAAC,EAE3E,EAEME,EAAO,IAAM,CACbP,EAAa,MAAQJ,EAAM,OAAO,OAAS,GAC7CU,EAASN,EAAa,MAAQ,CAAC,CAEnC,EAEMQ,EAAW,IAAM,CACjBR,EAAa,QAAU,GACzBM,EAASN,EAAa,MAAQ,CAAC,CAEnC,EAEAS,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAU,CACd,KAAMT,EAAc,MACpB,WAAY,MACZ,UAAW,EAAA,EAGbE,EAAU,MAAQD,EAAa,MAAM,IAAI,CAACS,EAAIN,IAAU,CACtD,MAAMO,EAAM,IAAI,qBAAsBC,GAAY,CAChDA,EAAQ,QAASC,GAAU,CAErBhB,EAAY,OAASgB,EAAM,gBAC7BV,EAAYC,CAAK,CAErB,CAAC,CACH,EAAGK,CAAO,EACV,OAAAE,EAAI,QAAQD,CAAE,EAEPC,CACT,CAAC,EAED,WAAW,IAAM,CAEXX,EAAc,OAASA,EAAc,MAAM,aAAe,IAC5DA,EAAc,MAAM,WAAa,GAEnCH,EAAY,MAAQ,EACtB,EAAG,EAAE,CACP,CAAC,EAEDiB,EAAAA,YAAY,IAAM,CAChBZ,EAAU,MAAM,QAASa,GAAaA,EAAS,YAAY,CAC7D,CAAC,EAEM,CACL,KAAAnB,EACA,aAAAG,EACA,aAAAE,EACA,cAAAD,EACA,YAAAH,EACA,KAAAS,EACA,SAAAC,EACA,SAAAF,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonImageCarousel.cjs.js","sources":["../../../../src/components/presentation/image-carousel/NeonImageCarousel.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport type { NeonCarouselImage } from '@/common/models/NeonCarouselImage';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\n\n/**\n * <p>\n *   The <strong>NeonImageCarousel</strong> is used to display a carousel of images for the user to swipe\n *   through. NOTE: It is recommended to explicitly set the width & height of the carousel via CSS, this will\n *   ensure it will not be impacted by images with different aspect ratios. Images are automatically resized to fit the\n *   carousel dimensions.\n * </p>\n */\nexport default defineComponent({\n  name: 'NeonImageCarousel',\n  components: {\n    NeonButton,\n    NeonLink,\n    NeonStack,\n  },\n  props: {\n    /**\n     * The images to be displayed in the carousel.\n     */\n    images: { type: Array as () => Array<NeonCarouselImage>, required: true },\n    /**\n     * Provide an alternative image count label. This can be useful for translations. The default is e.g.\n     * <em>2 images</em>.\n     */\n    imageCountLabel: { type: String, default: undefined },\n    /**\n     * Hide the label under the dot navigation.\n     */\n    hideLabel: { type: Boolean, default: false },\n    /**\n     * Provide an alternative label for the Previous button.\n     */\n    closeLabel: { type: String, default: 'Close' },\n    /**\n     * Provide an alternative label for the Previous button.\n     */\n    previousLabel: { type: String, default: 'Previous' },\n    /**\n     * Provide an alternative label for the Next button.\n     */\n    nextLabel: { type: String, default: 'Next' },\n  },\n  emits: [\n    /**\n     * The index of the currently visible image.\n     *\n     * @type {number}\n     */\n    'current-image',\n  ],\n  setup(props, { emit }) {\n    const initialised = ref<boolean>(false);\n    const currentImage = ref<number>(0);\n    const carouselItems = ref<HTMLUListElement | null>(null);\n    const carouselItem = ref<Array<HTMLLIElement>>([]);\n    const observers = ref<Array<IntersectionObserver>>([]);\n    const expanded = ref<boolean>(false);\n\n    const changeImage = (index: number) => {\n      if (index !== currentImage.value) {\n        currentImage.value = index;\n        emit('current-image', index);\n      }\n    };\n\n    const scrollTo = (index: number) => {\n      if (carouselItems.value && props.images.length > 0) {\n        changeImage(index);\n        carouselItems.value.scrollTo(carouselItems.value.clientWidth * index, 0);\n      }\n    };\n\n    const next = () => {\n      if (currentImage.value < props.images.length - 1) {\n        scrollTo(currentImage.value + 1);\n      }\n    };\n\n    const previous = () => {\n      if (currentImage.value !== 0) {\n        scrollTo(currentImage.value - 1);\n      }\n    };\n\n    onMounted(() => {\n      const options = {\n        root: carouselItems.value,\n        rootMargin: '0px',\n        threshold: 0.6,\n      };\n\n      observers.value = carouselItem.value.map((el, index) => {\n        const obs = new IntersectionObserver((entries) => {\n          entries.forEach((entry) => {\n            // filter out the observations on initialization\n            if (initialised.value && entry.isIntersecting) {\n              changeImage(index);\n            }\n          });\n        }, options);\n        obs.observe(el);\n\n        return obs;\n      });\n\n      setTimeout(() => {\n        // initialise scroll position to first element\n        if (carouselItems.value && carouselItems.value.scrollLeft !== 0) {\n          carouselItems.value.scrollLeft = 0;\n        }\n        initialised.value = true;\n      }, 50);\n    });\n\n    onUnmounted(() => {\n      observers.value.forEach((observer) => observer.disconnect());\n    });\n\n    watch(\n      () => expanded.value,\n      (value: boolean) => {\n        if (value) {\n          document.body.classList.add('neon-closable--open');\n        } else {\n          document.body.classList.remove('neon-closable--open');\n        }\n      },\n    );\n\n    return {\n      emit,\n      currentImage,\n      carouselItem,\n      carouselItems,\n      initialised,\n      expanded,\n      next,\n      previous,\n      scrollTo,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonLink","NeonStack","props","emit","initialised","ref","currentImage","carouselItems","carouselItem","observers","expanded","changeImage","index","scrollTo","next","previous","onMounted","options","el","obs","entries","entry","onUnmounted","observer","watch","value"],"mappings":"2MAcAA,EAAeC,kBAAgB,CAC7B,KAAM,oBACN,WAAY,CACV,WAAAC,EACA,SAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAIL,OAAQ,CAAE,KAAM,MAAyC,SAAU,EAAA,EAKnE,gBAAiB,CAAE,KAAM,OAAQ,QAAS,MAAA,EAI1C,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,EAIrC,WAAY,CAAE,KAAM,OAAQ,QAAS,OAAA,EAIrC,cAAe,CAAE,KAAM,OAAQ,QAAS,UAAA,EAIxC,UAAW,CAAE,KAAM,OAAQ,QAAS,MAAA,CAAO,EAE7C,MAAO,CAML,eAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAcC,EAAAA,IAAa,EAAK,EAChCC,EAAeD,EAAAA,IAAY,CAAC,EAC5BE,EAAgBF,EAAAA,IAA6B,IAAI,EACjDG,EAAeH,EAAAA,IAA0B,EAAE,EAC3CI,EAAYJ,EAAAA,IAAiC,EAAE,EAC/CK,EAAWL,EAAAA,IAAa,EAAK,EAE7BM,EAAeC,GAAkB,CACjCA,IAAUN,EAAa,QACzBA,EAAa,MAAQM,EACrBT,EAAK,gBAAiBS,CAAK,EAE/B,EAEMC,EAAYD,GAAkB,CAC9BL,EAAc,OAASL,EAAM,OAAO,OAAS,IAC/CS,EAAYC,CAAK,EACjBL,EAAc,MAAM,SAASA,EAAc,MAAM,YAAcK,EAAO,CAAC,EAE3E,EAEME,EAAO,IAAM,CACbR,EAAa,MAAQJ,EAAM,OAAO,OAAS,GAC7CW,EAASP,EAAa,MAAQ,CAAC,CAEnC,EAEMS,EAAW,IAAM,CACjBT,EAAa,QAAU,GACzBO,EAASP,EAAa,MAAQ,CAAC,CAEnC,EAEAU,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAU,CACd,KAAMV,EAAc,MACpB,WAAY,MACZ,UAAW,EAAA,EAGbE,EAAU,MAAQD,EAAa,MAAM,IAAI,CAACU,EAAIN,IAAU,CACtD,MAAMO,EAAM,IAAI,qBAAsBC,GAAY,CAChDA,EAAQ,QAASC,GAAU,CAErBjB,EAAY,OAASiB,EAAM,gBAC7BV,EAAYC,CAAK,CAErB,CAAC,CACH,EAAGK,CAAO,EACV,OAAAE,EAAI,QAAQD,CAAE,EAEPC,CACT,CAAC,EAED,WAAW,IAAM,CAEXZ,EAAc,OAASA,EAAc,MAAM,aAAe,IAC5DA,EAAc,MAAM,WAAa,GAEnCH,EAAY,MAAQ,EACtB,EAAG,EAAE,CACP,CAAC,EAEDkB,EAAAA,YAAY,IAAM,CAChBb,EAAU,MAAM,QAASc,GAAaA,EAAS,YAAY,CAC7D,CAAC,EAEDC,EAAAA,MACE,IAAMd,EAAS,MACde,GAAmB,CACdA,EACF,SAAS,KAAK,UAAU,IAAI,qBAAqB,EAEjD,SAAS,KAAK,UAAU,OAAO,qBAAqB,CAExD,CAAA,EAGK,CACL,KAAAtB,EACA,aAAAG,EACA,aAAAE,EACA,cAAAD,EACA,YAAAH,EACA,SAAAM,EACA,KAAAI,EACA,SAAAC,EACA,SAAAF,CAAA,CAEJ,CACF,CAAC"}

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

@@ -1,11 +1,13 @@
-import { defineComponent as b, ref as n, onMounted as I, onUnmounted as L } from "vue";
-import y from "../../navigation/link/NeonLink.vue.es.js";
-import N from "../../user-input/button/NeonButton.vue.es.js";
-const x = b({
+import { defineComponent as L, ref as n, onMounted as y, onUnmounted as I, watch as N } from "vue";
+import S from "../../navigation/link/NeonLink.vue.es.js";
+import C from "../../user-input/button/NeonButton.vue.es.js";
+import x from "../../layout/stack/NeonStack.vue.es.js";
+const E = L({
   name: "NeonImageCarousel",
   components: {
-    NeonButton: N,
-    NeonLink: y
+    NeonButton: C,
+    NeonLink: S,
+    NeonStack: x
   },
   props: {
     /**
@@ -21,6 +23,10 @@ const x = b({
      * Hide the label under the dot navigation.
      */
     hideLabel: { type: Boolean, default: !1 },
+    /**
+     * Provide an alternative label for the Previous button.
+     */
+    closeLabel: { type: String, default: "Close" },
     /**
      * Provide an alternative label for the Previous button.
      */
@@ -38,47 +44,53 @@ const x = b({
      */
     "current-image"
   ],
-  setup(l, { emit: s }) {
-    const a = n(!1), o = n(0), t = n(null), u = n([]), i = n([]), c = (e) => {
-      e !== o.value && (o.value = e, s("current-image", e));
-    }, r = (e) => {
-      t.value && l.images.length > 0 && (c(e), t.value.scrollTo(t.value.clientWidth * e, 0));
-    }, m = () => {
-      o.value < l.images.length - 1 && r(o.value + 1);
-    }, f = () => {
-      o.value !== 0 && r(o.value - 1);
+  setup(s, { emit: r }) {
+    const a = n(!1), t = n(0), o = n(null), u = n([]), i = n([]), c = n(!1), m = (e) => {
+      e !== t.value && (t.value = e, r("current-image", e));
+    }, l = (e) => {
+      o.value && s.images.length > 0 && (m(e), o.value.scrollTo(o.value.clientWidth * e, 0));
+    }, v = () => {
+      t.value < s.images.length - 1 && l(t.value + 1);
+    }, p = () => {
+      t.value !== 0 && l(t.value - 1);
     };
-    return I(() => {
+    return y(() => {
       const e = {
-        root: t.value,
+        root: o.value,
         rootMargin: "0px",
         threshold: 0.6
       };
-      i.value = u.value.map((g, p) => {
-        const v = new IntersectionObserver((d) => {
-          d.forEach((h) => {
-            a.value && h.isIntersecting && c(p);
+      i.value = u.value.map((d, g) => {
+        const f = new IntersectionObserver((b) => {
+          b.forEach((h) => {
+            a.value && h.isIntersecting && m(g);
           });
         }, e);
-        return v.observe(g), v;
+        return f.observe(d), f;
       }), setTimeout(() => {
-        t.value && t.value.scrollLeft !== 0 && (t.value.scrollLeft = 0), a.value = !0;
+        o.value && o.value.scrollLeft !== 0 && (o.value.scrollLeft = 0), a.value = !0;
       }, 50);
-    }), L(() => {
+    }), I(() => {
       i.value.forEach((e) => e.disconnect());
-    }), {
-      emit: s,
-      currentImage: o,
+    }), N(
+      () => c.value,
+      (e) => {
+        e ? document.body.classList.add("neon-closable--open") : document.body.classList.remove("neon-closable--open");
+      }
+    ), {
+      emit: r,
+      currentImage: t,
       carouselItem: u,
-      carouselItems: t,
+      carouselItems: o,
       initialised: a,
-      next: m,
-      previous: f,
-      scrollTo: r
+      expanded: c,
+      next: v,
+      previous: p,
+      scrollTo: l
     };
   }
 });
 export {
-  x as default
+  E as default
 };
 //# sourceMappingURL=NeonImageCarousel.es.js.map

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

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

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

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

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

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