@aotearoan/neon 22.4.1 → 22.5.1

package/dist/common/enums/NeonInputIndicatorStyle.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var r=(e=>(e.Internal="internal",e.External="external",e))(r||{});exports.NeonInputIndicatorStyle=r;
+//# sourceMappingURL=NeonInputIndicatorStyle.cjs.js.map

package/dist/common/enums/NeonInputIndicatorStyle.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonInputIndicatorStyle.cjs.js","sources":["../../../src/common/enums/NeonInputIndicatorStyle.ts"],"sourcesContent":["export enum NeonInputIndicatorStyle {\n  /**\n   * Display input indicator INSIDE the adjacent input.\n   */\n  Internal = 'internal',\n  /**\n   * Display input indicator OUTSIDE the adjacent input.\n   */\n  External = 'external',\n}\n"],"names":["NeonInputIndicatorStyle"],"mappings":"gFAAO,IAAKA,GAAAA,IAIVA,EAAA,SAAW,WAIXA,EAAA,SAAW,WARDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/common/enums/NeonInputIndicatorStyle.es.js

@@ -0,0 +1,5 @@
+var e = /* @__PURE__ */ ((r) => (r.Internal = "internal", r.External = "external", r))(e || {});
+export {
+  e as NeonInputIndicatorStyle
+};
+//# sourceMappingURL=NeonInputIndicatorStyle.es.js.map

package/dist/common/enums/NeonInputIndicatorStyle.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonInputIndicatorStyle.es.js","sources":["../../../src/common/enums/NeonInputIndicatorStyle.ts"],"sourcesContent":["export enum NeonInputIndicatorStyle {\n  /**\n   * Display input indicator INSIDE the adjacent input.\n   */\n  Internal = 'internal',\n  /**\n   * Display input indicator OUTSIDE the adjacent input.\n   */\n  External = 'external',\n}\n"],"names":["NeonInputIndicatorStyle"],"mappings":"AAAO,IAAKA,sBAAAA,OAIVA,EAAA,WAAW,YAIXA,EAAA,WAAW,YARDA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/common/utils/NeonIconRegistry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonIconRegistry.cjs.js","sources":["../../../src/common/utils/NeonIconRegistry.ts"],"sourcesContent":["/**\n * Manage a map of SVG icons for use with the <a href=\"/presentation/icon\">NeonIcon</a> component. See the\n * <a href=\"/presentation/icon#description\">description</a> page for details on how\n * to prepare an SVG for Neon.\n */\nexport class NeonIconRegistry {\n  private static icons: Record<string, string> = {};\n\n  /**\n   * Add an icon to the registry.\n   *\n   * @param name Icon name, this corresponds to the <em>name</em> property in NeonIcon.\n   * @param svg The string representation of the SVG.\n   * @param overwrite Overwrite an existing icon if the name is a duplicate.\n   *\n   * @returns Boolean indicating if the icon was successfully registered.\n   */\n  public static addIcon(name: string, svg: string, overwrite = true): boolean {\n    const canAdd = overwrite || !NeonIconRegistry.icons[name];\n\n    if (canAdd) {\n      NeonIconRegistry.icons[name] = svg;\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Remove an icon from the registry.\n   *\n   * @param name The name of the icon to remove.\n   */\n  public static removeIcon(name: string) {\n    delete NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * Get an icon SVG by name.\n   *\n   * @param name The name of the icon to remove.\n   *\n   * @returns The icon SVG as a string.\n   */\n  public static getIcon(name: string) {\n    return NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * List all registered icon names.\n   */\n  public static list() {\n    return Object.keys(NeonIconRegistry.icons);\n  }\n\n  /**\n   * Clear the icon registry.\n   */\n  public static clear() {\n    NeonIconRegistry.icons = {};\n  }\n}\n"],"names":["_NeonIconRegistry","name","svg","overwrite","__publicField","NeonIconRegistry"],"mappings":"oPAKO,MAAMA,EAAN,MAAMA,CAAiB,CAY5B,OAAc,QAAQC,EAAcC,EAAaC,EAAY,GAAe,CAG1E,OAFeA,GAAa,CAACH,EAAiB,MAAMC,CAAI,GAGtDD,EAAiB,MAAMC,CAAI,EAAIC,EACxB,IAGF,EACT,CAOA,OAAc,WAAWD,EAAc,CACrC,OAAOD,EAAiB,MAAMC,CAAI,CACpC,CASA,OAAc,QAAQA,EAAc,CAClC,OAAOD,EAAiB,MAAMC,CAAI,CACpC,CAKA,OAAc,MAAO,CACnB,OAAO,OAAO,KAAKD,EAAiB,KAAK,CAC3C,CAKA,OAAc,OAAQ,CACpBA,EAAiB,MAAQ,CAAA,CAC3B,CACF,EAvDEI,EADWJ,EACI,QAAgC,CAAA,GAD1C,IAAMK,EAANL"}
+{"version":3,"file":"NeonIconRegistry.cjs.js","sources":["../../../src/common/utils/NeonIconRegistry.ts"],"sourcesContent":["/**\n * Manage a map of SVG icons for use with the <a href=\"/presentation/icon\">NeonIcon</a> component. See the\n * <a href=\"/presentation/icon#description\">description</a> page for details on how\n * to prepare an SVG for Neon.\n */\nexport class NeonIconRegistry {\n  private static icons: Record<string, string> = {};\n\n  /**\n   * Add an icon to the registry.\n   *\n   * @param name Icon name, this corresponds to the <em>name</em> property in NeonIcon.\n   * @param svg The string representation of the SVG.\n   * @param overwrite Overwrite an existing icon if the name is a duplicate.\n   *\n   * @returns Boolean indicating if the icon was successfully registered.\n   */\n  public static addIcon(name: string, svg: string, overwrite = true): boolean {\n    const canAdd = overwrite || !NeonIconRegistry.icons[name];\n\n    if (canAdd) {\n      NeonIconRegistry.icons[name] = svg;\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Remove an icon from the registry.\n   *\n   * @param name The name of the icon to remove.\n   */\n  public static removeIcon(name: string) {\n    delete NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * Get an icon SVG by name.\n   *\n   * @param name The name of the icon.\n   *\n   * @returns The icon SVG as a string or undefined if the icon doesn't exist\n   */\n  public static getIcon(name: string): string | undefined {\n    return NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * List all registered icon names.\n   */\n  public static list() {\n    return Object.keys(NeonIconRegistry.icons);\n  }\n\n  /**\n   * Clear the icon registry.\n   */\n  public static clear() {\n    NeonIconRegistry.icons = {};\n  }\n}\n"],"names":["_NeonIconRegistry","name","svg","overwrite","__publicField","NeonIconRegistry"],"mappings":"oPAKO,MAAMA,EAAN,MAAMA,CAAiB,CAY5B,OAAc,QAAQC,EAAcC,EAAaC,EAAY,GAAe,CAG1E,OAFeA,GAAa,CAACH,EAAiB,MAAMC,CAAI,GAGtDD,EAAiB,MAAMC,CAAI,EAAIC,EACxB,IAGF,EACT,CAOA,OAAc,WAAWD,EAAc,CACrC,OAAOD,EAAiB,MAAMC,CAAI,CACpC,CASA,OAAc,QAAQA,EAAkC,CACtD,OAAOD,EAAiB,MAAMC,CAAI,CACpC,CAKA,OAAc,MAAO,CACnB,OAAO,OAAO,KAAKD,EAAiB,KAAK,CAC3C,CAKA,OAAc,OAAQ,CACpBA,EAAiB,MAAQ,CAAA,CAC3B,CACF,EAvDEI,EADWJ,EACI,QAAgC,CAAA,GAD1C,IAAMK,EAANL"}

package/dist/common/utils/NeonIconRegistry.es.js

@@ -25,9 +25,9 @@ const c = class c {
   /**
    * Get an icon SVG by name.
    *
-   * @param name The name of the icon to remove.
+   * @param name The name of the icon.
    *
-   * @returns The icon SVG as a string.
+   * @returns The icon SVG as a string or undefined if the icon doesn't exist
    */
   static getIcon(t) {
     return c.icons[t];

package/dist/common/utils/NeonIconRegistry.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonIconRegistry.es.js","sources":["../../../src/common/utils/NeonIconRegistry.ts"],"sourcesContent":["/**\n * Manage a map of SVG icons for use with the <a href=\"/presentation/icon\">NeonIcon</a> component. See the\n * <a href=\"/presentation/icon#description\">description</a> page for details on how\n * to prepare an SVG for Neon.\n */\nexport class NeonIconRegistry {\n  private static icons: Record<string, string> = {};\n\n  /**\n   * Add an icon to the registry.\n   *\n   * @param name Icon name, this corresponds to the <em>name</em> property in NeonIcon.\n   * @param svg The string representation of the SVG.\n   * @param overwrite Overwrite an existing icon if the name is a duplicate.\n   *\n   * @returns Boolean indicating if the icon was successfully registered.\n   */\n  public static addIcon(name: string, svg: string, overwrite = true): boolean {\n    const canAdd = overwrite || !NeonIconRegistry.icons[name];\n\n    if (canAdd) {\n      NeonIconRegistry.icons[name] = svg;\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Remove an icon from the registry.\n   *\n   * @param name The name of the icon to remove.\n   */\n  public static removeIcon(name: string) {\n    delete NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * Get an icon SVG by name.\n   *\n   * @param name The name of the icon to remove.\n   *\n   * @returns The icon SVG as a string.\n   */\n  public static getIcon(name: string) {\n    return NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * List all registered icon names.\n   */\n  public static list() {\n    return Object.keys(NeonIconRegistry.icons);\n  }\n\n  /**\n   * Clear the icon registry.\n   */\n  public static clear() {\n    NeonIconRegistry.icons = {};\n  }\n}\n"],"names":["_NeonIconRegistry","name","svg","overwrite","__publicField","NeonIconRegistry"],"mappings":";;;AAKO,MAAMA,IAAN,MAAMA,EAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY5B,OAAc,QAAQC,GAAcC,GAAaC,IAAY,IAAe;AAG1E,WAFeA,KAAa,CAACH,EAAiB,MAAMC,CAAI,KAGtDD,EAAiB,MAAMC,CAAI,IAAIC,GACxB,MAGF;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAc,WAAWD,GAAc;AACrC,WAAOD,EAAiB,MAAMC,CAAI;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,OAAc,QAAQA,GAAc;AAClC,WAAOD,EAAiB,MAAMC,CAAI;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAc,OAAO;AACnB,WAAO,OAAO,KAAKD,EAAiB,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKA,OAAc,QAAQ;AACpB,IAAAA,EAAiB,QAAQ,CAAA;AAAA,EAC3B;AACF;AAvDEI,EADWJ,GACI,SAAgC,CAAA;AAD1C,IAAMK,IAANL;"}
+{"version":3,"file":"NeonIconRegistry.es.js","sources":["../../../src/common/utils/NeonIconRegistry.ts"],"sourcesContent":["/**\n * Manage a map of SVG icons for use with the <a href=\"/presentation/icon\">NeonIcon</a> component. See the\n * <a href=\"/presentation/icon#description\">description</a> page for details on how\n * to prepare an SVG for Neon.\n */\nexport class NeonIconRegistry {\n  private static icons: Record<string, string> = {};\n\n  /**\n   * Add an icon to the registry.\n   *\n   * @param name Icon name, this corresponds to the <em>name</em> property in NeonIcon.\n   * @param svg The string representation of the SVG.\n   * @param overwrite Overwrite an existing icon if the name is a duplicate.\n   *\n   * @returns Boolean indicating if the icon was successfully registered.\n   */\n  public static addIcon(name: string, svg: string, overwrite = true): boolean {\n    const canAdd = overwrite || !NeonIconRegistry.icons[name];\n\n    if (canAdd) {\n      NeonIconRegistry.icons[name] = svg;\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Remove an icon from the registry.\n   *\n   * @param name The name of the icon to remove.\n   */\n  public static removeIcon(name: string) {\n    delete NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * Get an icon SVG by name.\n   *\n   * @param name The name of the icon.\n   *\n   * @returns The icon SVG as a string or undefined if the icon doesn't exist\n   */\n  public static getIcon(name: string): string | undefined {\n    return NeonIconRegistry.icons[name];\n  }\n\n  /**\n   * List all registered icon names.\n   */\n  public static list() {\n    return Object.keys(NeonIconRegistry.icons);\n  }\n\n  /**\n   * Clear the icon registry.\n   */\n  public static clear() {\n    NeonIconRegistry.icons = {};\n  }\n}\n"],"names":["_NeonIconRegistry","name","svg","overwrite","__publicField","NeonIconRegistry"],"mappings":";;;AAKO,MAAMA,IAAN,MAAMA,EAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY5B,OAAc,QAAQC,GAAcC,GAAaC,IAAY,IAAe;AAG1E,WAFeA,KAAa,CAACH,EAAiB,MAAMC,CAAI,KAGtDD,EAAiB,MAAMC,CAAI,IAAIC,GACxB,MAGF;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAc,WAAWD,GAAc;AACrC,WAAOD,EAAiB,MAAMC,CAAI;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,OAAc,QAAQA,GAAkC;AACtD,WAAOD,EAAiB,MAAMC,CAAI;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAc,OAAO;AACnB,WAAO,OAAO,KAAKD,EAAiB,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKA,OAAc,QAAQ;AACpB,IAAAA,EAAiB,QAAQ,CAAA;AAAA,EAC3B;AACF;AAvDEI,EADWJ,GACI,SAAgC,CAAA;AAD1C,IAAMK,IAANL;"}

package/dist/components/presentation/icon/NeonIcon.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),s=require("../../../common/utils/NeonIconRegistry.cjs.js"),c=e.defineComponent({name:"NeonIcon",props:{name:{type:String,required:!0},color:{type:String,default:null},inverse:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(n){const o=e.useAttrs(),r=e.computed(()=>{const t=s.NeonIconRegistry.getIcon(n.name);return t||console.error(`icon ${n.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`),t});return{attrs:o,icon:r}}});module.exports=c;
+"use strict";const n=require("vue"),s=require("../../../common/utils/NeonIconRegistry.cjs.js"),c=n.defineComponent({name:"NeonIcon",props:{name:{type:String,required:!0},id:{type:String,default:null},color:{type:String,default:null},inverse:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(t){const i=n.useAttrs(),o=n.computed(()=>{let e=s.NeonIconRegistry.getIcon(t.name);return e||console.error(`icon ${t.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`),t.id&&e&&(e=e.replace(/url\(#/g,`url(#${t.id}`),e=e.replace(/id="/g,`id="${t.id}`),e=e.replace("<svg ",`<svg id="${t.id}" `)),e});return{sanitizedAttributes:n.computed(()=>{const{id:e,...r}=i;return r}),icon:o}}});module.exports=c;
 //# sourceMappingURL=NeonIcon.cjs.js.map

package/dist/components/presentation/icon/NeonIcon.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonIcon.cjs.js","sources":["../../../../src/components/presentation/icon/NeonIcon.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonIconRegistry } from '@/common/utils/NeonIconRegistry';\nimport type { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * <p>A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This\n * component can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the\n * components using the icons. Generally, when talking about icons, this component is only used to build other\n * components. But you may also find it useful for rendering SVG images, e.g. illustrations.</p>\n *\n * <p>There is an icon registry where strings containing SVGs can be registered with a name and that name can be used\n * with the NeonIcon component to render the image. Use the classes <em>neon-svg--fill</em> and <em>neon-svg--stroke</em>\n * in the SVG elements to automatically apply the functional colors.</p>\n *\n * <p>This provides the advantage of only registering the icons you actually need, dynamically switching colors in\n * Typescript/CSS without using a large icon font and not having to duplicate icon images to support multiple\n * color variations (including light and dark modes).</p>\n *\n * For more detailed information please see <a href=\"/presentation/icon\">Icons</a>.\n */\nexport default defineComponent({\n  name: 'NeonIcon',\n  props: {\n    /**\n     * The name of an icon registered in the icon registry.\n     */\n    name: { type: String, required: true },\n    /**\n     * The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Set the icon color to the inverse text color\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Apply a disabled style to the icon\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const attrs = useAttrs();\n    const icon = computed(() => {\n      const _icon = NeonIconRegistry.getIcon(props.name);\n      if (!_icon) {\n        console.error(`icon ${props.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`);\n      }\n      return _icon;\n    });\n\n    return {\n      attrs,\n      icon,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","props","attrs","useAttrs","icon","computed","_icon","NeonIconRegistry"],"mappings":"+FAoBAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIhC,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAInC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAMC,EAAO,CACX,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAOC,EAAAA,SAAS,IAAM,CAC1B,MAAMC,EAAQC,EAAAA,iBAAiB,QAAQN,EAAM,IAAI,EACjD,OAAKK,GACH,QAAQ,MAAM,QAAQL,EAAM,IAAI,yEAAyE,EAEpGK,CACT,CAAC,EAED,MAAO,CACL,MAAAJ,EACA,KAAAE,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonIcon.cjs.js","sources":["../../../../src/components/presentation/icon/NeonIcon.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonIconRegistry } from '@/common/utils/NeonIconRegistry';\nimport type { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * <p>A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This\n * component can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the\n * components using the icons. Generally, when talking about icons, this component is only used to build other\n * components. But you may also find it useful for rendering SVG images, e.g. illustrations.</p>\n *\n * <p>There is an icon registry where strings containing SVGs can be registered with a name and that name can be used\n * with the NeonIcon component to render the image. Use the classes <em>neon-svg--fill</em> and <em>neon-svg--stroke</em>\n * in the SVG elements to automatically apply the functional colors.</p>\n *\n * <p>This provides the advantage of only registering the icons you actually need, dynamically switching colors in\n * Typescript/CSS without using a large icon font and not having to duplicate icon images to support multiple\n * color variations (including light and dark modes).</p>\n *\n * For more detailed information please see <a href=\"/presentation/icon\">Icons</a>.\n */\nexport default defineComponent({\n  name: 'NeonIcon',\n  props: {\n    /**\n     * The name of an icon registered in the icon registry.\n     */\n    name: { type: String, required: true },\n    /**\n     * An id to inject into the icon. This is necessary for rendering clipPaths correctly if the same icon is used\n     * multiple times on a page as the ids need to be unique.\n     */\n    id: { type: String, default: null },\n    /**\n     * The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Set the icon color to the inverse text color\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Apply a disabled style to the icon\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const attrs = useAttrs();\n\n    const icon = computed(() => {\n      let _icon = NeonIconRegistry.getIcon(props.name);\n\n      if (!_icon) {\n        console.error(`icon ${props.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`);\n      }\n\n      if (props.id && _icon) {\n        _icon = _icon.replace(/url\\(#/g, `url(#${props.id}`);\n        _icon = _icon.replace(/id=\"/g, `id=\"${props.id}`);\n        _icon = _icon.replace('<svg ', `<svg id=\"${props.id}\" `);\n      }\n\n      return _icon;\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { id, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    return {\n      sanitizedAttributes,\n      icon,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","props","attrs","useAttrs","icon","computed","_icon","NeonIconRegistry","id","sanitized"],"mappings":"+FAoBAA,EAAeC,kBAAgB,CAC7B,KAAM,WACN,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAA,EAKhC,GAAI,CAAE,KAAM,OAAQ,QAAS,IAAA,EAI7B,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,QAAS,CAAE,KAAM,QAAS,QAAS,EAAA,EAInC,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE5C,MAAMC,EAAO,CACX,MAAMC,EAAQC,EAAAA,SAAA,EAERC,EAAOC,EAAAA,SAAS,IAAM,CAC1B,IAAIC,EAAQC,EAAAA,iBAAiB,QAAQN,EAAM,IAAI,EAE/C,OAAKK,GACH,QAAQ,MAAM,QAAQL,EAAM,IAAI,yEAAyE,EAGvGA,EAAM,IAAMK,IACdA,EAAQA,EAAM,QAAQ,UAAW,QAAQL,EAAM,EAAE,EAAE,EACnDK,EAAQA,EAAM,QAAQ,QAAS,OAAOL,EAAM,EAAE,EAAE,EAChDK,EAAQA,EAAM,QAAQ,QAAS,YAAYL,EAAM,EAAE,IAAI,GAGlDK,CACT,CAAC,EAQD,MAAO,CACL,oBAP0BD,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,GAAAG,EAAI,GAAGC,CAAA,EAAcP,EAC7B,OAAOO,CACT,CAAC,EAIC,KAAAL,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/presentation/icon/NeonIcon.es.js

@@ -1,12 +1,17 @@
-import { defineComponent as r, useAttrs as s, computed as i } from "vue";
-import { NeonIconRegistry as a } from "../../../common/utils/NeonIconRegistry.es.js";
-const d = r({
+import { defineComponent as a, useAttrs as d, computed as n } from "vue";
+import { NeonIconRegistry as s } from "../../../common/utils/NeonIconRegistry.es.js";
+const f = a({
   name: "NeonIcon",
   props: {
     /**
      * The name of an icon registered in the icon registry.
      */
     name: { type: String, required: !0 },
+    /**
+     * An id to inject into the icon. This is necessary for rendering clipPaths correctly if the same icon is used
+     * multiple times on a page as the ids need to be unique.
+     */
+    id: { type: String, default: null },
     /**
      * The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).
      */
@@ -20,18 +25,21 @@ const d = r({
      */
     disabled: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const o = s(), t = i(() => {
-      const n = a.getIcon(e.name);
-      return n || console.error(`icon ${e.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`), n;
+  setup(t) {
+    const i = d(), o = n(() => {
+      let e = s.getIcon(t.name);
+      return e || console.error(`icon ${t.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`), t.id && e && (e = e.replace(/url\(#/g, `url(#${t.id}`), e = e.replace(/id="/g, `id="${t.id}`), e = e.replace("<svg ", `<svg id="${t.id}" `)), e;
     });
     return {
-      attrs: o,
-      icon: t
+      sanitizedAttributes: n(() => {
+        const { id: e, ...r } = i;
+        return r;
+      }),
+      icon: o
     };
   }
 });
 export {
-  d as default
+  f as default
 };
 //# sourceMappingURL=NeonIcon.es.js.map

package/dist/components/presentation/icon/NeonIcon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonIcon.es.js","sources":["../../../../src/components/presentation/icon/NeonIcon.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonIconRegistry } from '@/common/utils/NeonIconRegistry';\nimport type { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * <p>A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This\n * component can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the\n * components using the icons. Generally, when talking about icons, this component is only used to build other\n * components. But you may also find it useful for rendering SVG images, e.g. illustrations.</p>\n *\n * <p>There is an icon registry where strings containing SVGs can be registered with a name and that name can be used\n * with the NeonIcon component to render the image. Use the classes <em>neon-svg--fill</em> and <em>neon-svg--stroke</em>\n * in the SVG elements to automatically apply the functional colors.</p>\n *\n * <p>This provides the advantage of only registering the icons you actually need, dynamically switching colors in\n * Typescript/CSS without using a large icon font and not having to duplicate icon images to support multiple\n * color variations (including light and dark modes).</p>\n *\n * For more detailed information please see <a href=\"/presentation/icon\">Icons</a>.\n */\nexport default defineComponent({\n  name: 'NeonIcon',\n  props: {\n    /**\n     * The name of an icon registered in the icon registry.\n     */\n    name: { type: String, required: true },\n    /**\n     * The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Set the icon color to the inverse text color\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Apply a disabled style to the icon\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const attrs = useAttrs();\n    const icon = computed(() => {\n      const _icon = NeonIconRegistry.getIcon(props.name);\n      if (!_icon) {\n        console.error(`icon ${props.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`);\n      }\n      return _icon;\n    });\n\n    return {\n      attrs,\n      icon,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","props","attrs","useAttrs","icon","computed","_icon","NeonIconRegistry"],"mappings":";;AAoBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIhC,OAAO,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAInC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,MAAMC,GAAO;AACX,UAAMC,IAAQC,EAAA,GACRC,IAAOC,EAAS,MAAM;AAC1B,YAAMC,IAAQC,EAAiB,QAAQN,EAAM,IAAI;AACjD,aAAKK,KACH,QAAQ,MAAM,QAAQL,EAAM,IAAI,yEAAyE,GAEpGK;AAAA,IACT,CAAC;AAED,WAAO;AAAA,MACL,OAAAJ;AAAA,MACA,MAAAE;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonIcon.es.js","sources":["../../../../src/components/presentation/icon/NeonIcon.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useAttrs } from 'vue';\nimport { NeonIconRegistry } from '@/common/utils/NeonIconRegistry';\nimport type { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * <p>A component for rendering SVG images. These images are generally, but not limited to, <em>icons</em>. This\n * component can render any SVG of any size. Size is not restricted in the NeonIcon component but rather in the\n * components using the icons. Generally, when talking about icons, this component is only used to build other\n * components. But you may also find it useful for rendering SVG images, e.g. illustrations.</p>\n *\n * <p>There is an icon registry where strings containing SVGs can be registered with a name and that name can be used\n * with the NeonIcon component to render the image. Use the classes <em>neon-svg--fill</em> and <em>neon-svg--stroke</em>\n * in the SVG elements to automatically apply the functional colors.</p>\n *\n * <p>This provides the advantage of only registering the icons you actually need, dynamically switching colors in\n * Typescript/CSS without using a large icon font and not having to duplicate icon images to support multiple\n * color variations (including light and dark modes).</p>\n *\n * For more detailed information please see <a href=\"/presentation/icon\">Icons</a>.\n */\nexport default defineComponent({\n  name: 'NeonIcon',\n  props: {\n    /**\n     * The name of an icon registered in the icon registry.\n     */\n    name: { type: String, required: true },\n    /**\n     * An id to inject into the icon. This is necessary for rendering clipPaths correctly if the same icon is used\n     * multiple times on a page as the ids need to be unique.\n     */\n    id: { type: String, default: null },\n    /**\n     * The color to render the icon. By default, it will be the current text color (light text in dark mode or dark text in light mode).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Set the icon color to the inverse text color\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Apply a disabled style to the icon\n     */\n    disabled: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const attrs = useAttrs();\n\n    const icon = computed(() => {\n      let _icon = NeonIconRegistry.getIcon(props.name);\n\n      if (!_icon) {\n        console.error(`icon ${props.name} doesn't exist! Register icon with NeonIconRegistry.addIcon(name, svg);`);\n      }\n\n      if (props.id && _icon) {\n        _icon = _icon.replace(/url\\(#/g, `url(#${props.id}`);\n        _icon = _icon.replace(/id=\"/g, `id=\"${props.id}`);\n        _icon = _icon.replace('<svg ', `<svg id=\"${props.id}\" `);\n      }\n\n      return _icon;\n    });\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { id, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    return {\n      sanitizedAttributes,\n      icon,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","props","attrs","useAttrs","icon","computed","_icon","NeonIconRegistry","id","sanitized"],"mappings":";;AAoBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhC,IAAI,EAAE,MAAM,QAAQ,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7B,OAAO,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,SAAS,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAInC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE5C,MAAMC,GAAO;AACX,UAAMC,IAAQC,EAAA,GAERC,IAAOC,EAAS,MAAM;AAC1B,UAAIC,IAAQC,EAAiB,QAAQN,EAAM,IAAI;AAE/C,aAAKK,KACH,QAAQ,MAAM,QAAQL,EAAM,IAAI,yEAAyE,GAGvGA,EAAM,MAAMK,MACdA,IAAQA,EAAM,QAAQ,WAAW,QAAQL,EAAM,EAAE,EAAE,GACnDK,IAAQA,EAAM,QAAQ,SAAS,OAAOL,EAAM,EAAE,EAAE,GAChDK,IAAQA,EAAM,QAAQ,SAAS,YAAYL,EAAM,EAAE,IAAI,IAGlDK;AAAA,IACT,CAAC;AAQD,WAAO;AAAA,MACL,qBAP0BD,EAAS,MAAM;AAEzC,cAAM,EAAE,IAAAG,GAAI,GAAGC,EAAA,IAAcP;AAC7B,eAAOO;AAAA,MACT,CAAC;AAAA,MAIC,MAAAL;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/presentation/icon/NeonIcon.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const o=require("./NeonIcon.cjs.js"),n=require("vue"),r=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),s=["innerHTML"];function i(e,t,u,l,a,p){return e.icon?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,class:[[`neon-icon--name-${e.name}`,e.color?`neon-icon--${e.color}`:"",{"neon-icon--inverse":e.inverse,"neon-icon--disabled":e.disabled}],"neon-icon"]},e.attrs,{innerHTML:e.icon}),null,16,s)):n.createCommentVNode("",!0)}const c=r(o,[["render",i]]);module.exports=c;
+"use strict";const o=require("./NeonIcon.cjs.js"),n=require("vue"),r=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i=["innerHTML"];function s(e,t,u,l,a,p){return e.icon?(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,class:[[`neon-icon--name-${e.name}`,e.color?`neon-icon--${e.color}`:"",{"neon-icon--inverse":e.inverse,"neon-icon--disabled":e.disabled}],"neon-icon"]},e.sanitizedAttributes,{innerHTML:e.icon}),null,16,i)):n.createCommentVNode("",!0)}const c=r(o,[["render",s]]);module.exports=c;
 //# sourceMappingURL=NeonIcon.vue.cjs.js.map

package/dist/components/presentation/icon/NeonIcon.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonIcon.vue.cjs.js","sources":["../../../../src/components/presentation/icon/NeonIcon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"icon\"\n    :class=\"[\n      `neon-icon--name-${name}`,\n      color ? `neon-icon--${color}` : '',\n      { 'neon-icon--inverse': inverse, 'neon-icon--disabled': disabled },\n    ]\"\n    class=\"neon-icon\"\n    v-bind=\"attrs\"\n    v-html=\"icon\"\n  ></div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonIcon.ts\"></script>\n"],"names":["_ctx","_openBlock","_createElementBlock","_mergeProps","_hoisted_1"],"mappings":"kLAEUA,EAAA,MADRC,EAAAA,YAAAC,EAAAA,mBAUO,MAVPC,aAUO,OARJ,MAAK,CAAA,oBAA6BH,EAAA,IAAI,GAAUA,EAAA,oBAAsBA,EAAA,KAAK,GAAA,GAAuC,CAAA,qBAAAA,EAAA,8BAAgCA,EAAA,QAAQ,GAKrJ,WAAW,GACTA,EAAA,MAAK,CACb,UAAQA,EAAA,IAAI,CAAA,EAAA,KAAA,GAAAI,CAAA"}
+{"version":3,"file":"NeonIcon.vue.cjs.js","sources":["../../../../src/components/presentation/icon/NeonIcon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"icon\"\n    :class=\"[\n      `neon-icon--name-${name}`,\n      color ? `neon-icon--${color}` : '',\n      { 'neon-icon--inverse': inverse, 'neon-icon--disabled': disabled },\n    ]\"\n    class=\"neon-icon\"\n    v-bind=\"sanitizedAttributes\"\n    v-html=\"icon\"\n  ></div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonIcon.ts\"></script>\n"],"names":["_ctx","_openBlock","_createElementBlock","_mergeProps","_hoisted_1"],"mappings":"kLAEUA,EAAA,MADRC,EAAAA,YAAAC,EAAAA,mBAUO,MAVPC,aAUO,OARJ,MAAK,CAAA,oBAA6BH,EAAA,IAAI,GAAUA,EAAA,oBAAsBA,EAAA,KAAK,GAAA,GAAuC,CAAA,qBAAAA,EAAA,8BAAgCA,EAAA,QAAQ,GAKrJ,WAAW,GACTA,EAAA,oBAAmB,CAC3B,UAAQA,EAAA,IAAI,CAAA,EAAA,KAAA,GAAAI,CAAA"}

package/dist/components/presentation/icon/NeonIcon.vue.es.js

@@ -1,8 +1,8 @@
 import n from "./NeonIcon.es.js";
 import { openBlock as o, createElementBlock as r, mergeProps as i, createCommentVNode as s } from "vue";
 import c from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const a = ["innerHTML"];
-function t(e, m, d, l, p, f) {
+const t = ["innerHTML"];
+function a(e, m, d, l, p, f) {
   return e.icon ? (o(), r("div", i({
     key: 0,
     class: [[
@@ -10,10 +10,10 @@ function t(e, m, d, l, p, f) {
       e.color ? `neon-icon--${e.color}` : "",
       { "neon-icon--inverse": e.inverse, "neon-icon--disabled": e.disabled }
     ], "neon-icon"]
-  }, e.attrs, { innerHTML: e.icon }), null, 16, a)) : s("", !0);
+  }, e.sanitizedAttributes, { innerHTML: e.icon }), null, 16, t)) : s("", !0);
 }
-const v = /* @__PURE__ */ c(n, [["render", t]]);
+const k = /* @__PURE__ */ c(n, [["render", a]]);
 export {
-  v as default
+  k as default
 };
 //# sourceMappingURL=NeonIcon.vue.es.js.map

package/dist/components/presentation/icon/NeonIcon.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonIcon.vue.es.js","sources":["../../../../src/components/presentation/icon/NeonIcon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"icon\"\n    :class=\"[\n      `neon-icon--name-${name}`,\n      color ? `neon-icon--${color}` : '',\n      { 'neon-icon--inverse': inverse, 'neon-icon--disabled': disabled },\n    ]\"\n    class=\"neon-icon\"\n    v-bind=\"attrs\"\n    v-html=\"icon\"\n  ></div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonIcon.ts\"></script>\n"],"names":["_ctx","_openBlock","_createElementBlock","_mergeProps","_hoisted_1"],"mappings":";;;;;SAEUA,EAAA,QADRC,KAAAC,EAUO,OAVPC,EAUO;AAAA;IARJ,OAAK,CAAA;AAAA,yBAA6BH,EAAA,IAAI;AAAA,MAAUA,EAAA,sBAAsBA,EAAA,KAAK,KAAA;AAAA,MAAuC,EAAA,sBAAAA,EAAA,gCAAgCA,EAAA,SAAQ;AAAA,OAKrJ,WAAW;AAAA,KACTA,EAAA,OAAK,EACb,WAAQA,EAAA,KAAI,CAAA,GAAA,MAAA,IAAAI,CAAA;;;"}
+{"version":3,"file":"NeonIcon.vue.es.js","sources":["../../../../src/components/presentation/icon/NeonIcon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"icon\"\n    :class=\"[\n      `neon-icon--name-${name}`,\n      color ? `neon-icon--${color}` : '',\n      { 'neon-icon--inverse': inverse, 'neon-icon--disabled': disabled },\n    ]\"\n    class=\"neon-icon\"\n    v-bind=\"sanitizedAttributes\"\n    v-html=\"icon\"\n  ></div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonIcon.ts\"></script>\n"],"names":["_ctx","_openBlock","_createElementBlock","_mergeProps","_hoisted_1"],"mappings":";;;;;SAEUA,EAAA,QADRC,KAAAC,EAUO,OAVPC,EAUO;AAAA;IARJ,OAAK,CAAA;AAAA,yBAA6BH,EAAA,IAAI;AAAA,MAAUA,EAAA,sBAAsBA,EAAA,KAAK,KAAA;AAAA,MAAuC,EAAA,sBAAAA,EAAA,gCAAgCA,EAAA,SAAQ;AAAA,OAKrJ,WAAW;AAAA,KACTA,EAAA,qBAAmB,EAC3B,WAAQA,EAAA,KAAI,CAAA,GAAA,MAAA,IAAAI,CAAA;;;"}

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";const t=require("vue"),L=require("../../navigation/link/NeonLink.vue.cjs.js"),x=require("../../user-input/button/NeonButton.vue.cjs.js"),I=require("../../layout/stack/NeonStack.vue.cjs.js"),q=t.defineComponent({name:"NeonImageCarousel",components:{NeonButton:x,NeonLink:L,NeonStack:I},props:{expanded:{type:Boolean,default:!1},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","update:expanded"],setup(l,{emit:s}){const u=t.ref(!1),o=t.ref(0),a=t.ref(null),c=t.ref([]),i=t.ref([]),n=t.ref(!1),d=e=>{e!==o.value&&(o.value=e,s("current-image",e))},r=e=>{a.value&&l.images.length>0&&(d(e),a.value.scrollTo(a.value.clientWidth*e,0))},f=()=>{o.value<l.images.length-1&&r(o.value+1)},m=()=>{o.value!==0&&r(o.value-1)};t.onMounted(()=>{const e={root:a.value,rootMargin:"0px",threshold:.6};i.value=c.value.map((g,b)=>{const v=new IntersectionObserver(h=>{h.forEach(y=>{u.value&&y.isIntersecting&&d(b)})},e);return v.observe(g),v}),setTimeout(()=>{a.value&&a.value.scrollLeft!==0&&(a.value.scrollLeft=0),u.value=!0},50)}),t.onUnmounted(()=>{i.value.forEach(e=>e.disconnect())});const p=()=>{n.value=!n.value,s("update:expanded",n.value)};return t.watch(()=>n.value,e=>{e?document.body.classList.add("neon-closable--open"):document.body.classList.remove("neon-closable--open")},{immediate:!0}),t.watch(()=>l.expanded,e=>{n.value!==e&&(n.value=e)},{immediate:!0}),{emit:s,currentImage:o,carouselItem:c,carouselItems:a,initialised:u,isExpanded:n,next:f,previous:m,scrollTo:r,toggleExpanded:p}}});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, 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"}
+{"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 expanded state of the image carousel.\n     */\n    expanded: { type: Boolean, default: false },\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     * The current expanded state of the image carousel.\n     *\n     * @type {boolean}\n     */\n    'update:expanded',\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 isExpanded = 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    const toggleExpanded = () => {\n      isExpanded.value = !isExpanded.value;\n      emit('update:expanded', isExpanded.value);\n    };\n\n    watch(\n      () => isExpanded.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      { immediate: true },\n    );\n\n    watch(\n      () => props.expanded,\n      (value: boolean) => {\n        if (isExpanded.value !== value) {\n          isExpanded.value = value;\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      emit,\n      currentImage,\n      carouselItem,\n      carouselItems,\n      initialised,\n      isExpanded,\n      next,\n      previous,\n      scrollTo,\n      toggleExpanded,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonLink","NeonStack","props","emit","initialised","ref","currentImage","carouselItems","carouselItem","observers","isExpanded","changeImage","index","scrollTo","next","previous","onMounted","options","el","obs","entries","entry","onUnmounted","observer","toggleExpanded","watch","value"],"mappings":"2MAcAA,EAAeC,kBAAgB,CAC7B,KAAM,oBACN,WAAY,CACV,WAAAC,EACA,SAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAIL,SAAU,CAAE,KAAM,QAAS,QAAS,EAAA,EAIpC,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,gBAMA,iBAAA,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,EAAaL,EAAAA,IAAa,EAAK,EAE/BM,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,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,EAED,MAAMC,EAAiB,IAAM,CAC3Bd,EAAW,MAAQ,CAACA,EAAW,MAC/BP,EAAK,kBAAmBO,EAAW,KAAK,CAC1C,EAEAe,OAAAA,EAAAA,MACE,IAAMf,EAAW,MAChBgB,GAAmB,CACdA,EACF,SAAS,KAAK,UAAU,IAAI,qBAAqB,EAEjD,SAAS,KAAK,UAAU,OAAO,qBAAqB,CAExD,EACA,CAAE,UAAW,EAAA,CAAK,EAGpBD,EAAAA,MACE,IAAMvB,EAAM,SACXwB,GAAmB,CACdhB,EAAW,QAAUgB,IACvBhB,EAAW,MAAQgB,EAEvB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,KAAAvB,EACA,aAAAG,EACA,aAAAE,EACA,cAAAD,EACA,YAAAH,EACA,WAAAM,EACA,KAAAI,EACA,SAAAC,EACA,SAAAF,EACA,eAAAW,CAAA,CAEJ,CACF,CAAC"}

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

@@ -1,15 +1,19 @@
-import { defineComponent as L, ref as n, onMounted as y, onUnmounted as I, watch as N } from "vue";
+import { defineComponent as x, ref as n, onMounted as I, onUnmounted as N, watch as v } 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({
+import E from "../../layout/stack/NeonStack.vue.es.js";
+const M = x({
   name: "NeonImageCarousel",
   components: {
     NeonButton: C,
     NeonLink: S,
-    NeonStack: x
+    NeonStack: E
   },
   props: {
+    /**
+     * The expanded state of the image carousel.
+     */
+    expanded: { type: Boolean, default: !1 },
     /**
      * The images to be displayed in the carousel.
      */
@@ -42,55 +46,73 @@ const E = L({
      *
      * @type {number}
      */
-    "current-image"
+    "current-image",
+    /**
+     * The current expanded state of the image carousel.
+     *
+     * @type {boolean}
+     */
+    "update:expanded"
   ],
-  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);
+  setup(l, { emit: s }) {
+    const u = n(!1), o = n(0), t = n(null), i = n([]), c = n([]), a = n(!1), d = (e) => {
+      e !== o.value && (o.value = e, s("current-image", e));
+    }, r = (e) => {
+      t.value && l.images.length > 0 && (d(e), t.value.scrollTo(t.value.clientWidth * e, 0));
+    }, f = () => {
+      o.value < l.images.length - 1 && r(o.value + 1);
     }, p = () => {
-      t.value !== 0 && l(t.value - 1);
+      o.value !== 0 && r(o.value - 1);
     };
-    return y(() => {
+    I(() => {
       const e = {
-        root: o.value,
+        root: t.value,
         rootMargin: "0px",
         threshold: 0.6
       };
-      i.value = u.value.map((d, g) => {
-        const f = new IntersectionObserver((b) => {
-          b.forEach((h) => {
-            a.value && h.isIntersecting && m(g);
+      c.value = i.value.map((b, h) => {
+        const m = new IntersectionObserver((y) => {
+          y.forEach((L) => {
+            u.value && L.isIntersecting && d(h);
           });
         }, e);
-        return f.observe(d), f;
+        return m.observe(b), m;
       }), setTimeout(() => {
-        o.value && o.value.scrollLeft !== 0 && (o.value.scrollLeft = 0), a.value = !0;
+        t.value && t.value.scrollLeft !== 0 && (t.value.scrollLeft = 0), u.value = !0;
       }, 50);
-    }), I(() => {
-      i.value.forEach((e) => e.disconnect());
-    }), N(
-      () => c.value,
+    }), N(() => {
+      c.value.forEach((e) => e.disconnect());
+    });
+    const g = () => {
+      a.value = !a.value, s("update:expanded", a.value);
+    };
+    return v(
+      () => a.value,
       (e) => {
         e ? document.body.classList.add("neon-closable--open") : document.body.classList.remove("neon-closable--open");
-      }
+      },
+      { immediate: !0 }
+    ), v(
+      () => l.expanded,
+      (e) => {
+        a.value !== e && (a.value = e);
+      },
+      { immediate: !0 }
     ), {
-      emit: r,
-      currentImage: t,
-      carouselItem: u,
-      carouselItems: o,
-      initialised: a,
-      expanded: c,
-      next: v,
+      emit: s,
+      currentImage: o,
+      carouselItem: i,
+      carouselItems: t,
+      initialised: u,
+      isExpanded: a,
+      next: f,
       previous: p,
-      scrollTo: l
+      scrollTo: r,
+      toggleExpanded: g
     };
   }
 });
 export {
-  E as default
+  M 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, 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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"}
+{"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 expanded state of the image carousel.\n     */\n    expanded: { type: Boolean, default: false },\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     * The current expanded state of the image carousel.\n     *\n     * @type {boolean}\n     */\n    'update:expanded',\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 isExpanded = 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    const toggleExpanded = () => {\n      isExpanded.value = !isExpanded.value;\n      emit('update:expanded', isExpanded.value);\n    };\n\n    watch(\n      () => isExpanded.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      { immediate: true },\n    );\n\n    watch(\n      () => props.expanded,\n      (value: boolean) => {\n        if (isExpanded.value !== value) {\n          isExpanded.value = value;\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      emit,\n      currentImage,\n      carouselItem,\n      carouselItems,\n      initialised,\n      isExpanded,\n      next,\n      previous,\n      scrollTo,\n      toggleExpanded,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonLink","NeonStack","props","emit","initialised","ref","currentImage","carouselItems","carouselItem","observers","isExpanded","changeImage","index","scrollTo","next","previous","onMounted","options","el","obs","entries","entry","onUnmounted","observer","toggleExpanded","watch","value"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";const u=require("./NeonImageCarousel.cjs.js"),e=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d={class:"neon-image-carousel-wrapper"},m={class:"neon-image-carousel__container",tabindex:"-1"},p={ref:"carouselItems",class:"no-style neon-image-carousel__items"},g=["alt","src"],k={key:0,class:"neon-image-carousel__item-title"},v={class:"neon-image-carousel__nav",tabindex:"-1"},C=["onClickCapture"],_={key:0,class:"neon-image-carousel__label",tabindex:"-1"};function b(n,o,y,E,f,h){const a=e.resolveComponent("neon-button"),r=e.resolveComponent("neon-link"),i=e.resolveComponent("neon-stack");return e.openBlock(),e.createElementBlock("div",d,[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel--initialised":n.initialised,"neon-image-carousel--expanded":n.isExpanded},"neon-image-carousel"]),tabindex:"0",onKeydown:[o[2]||(o[2]=e.withKeys(e.withModifiers((...t)=>n.previous&&n.previous(...t),["stop","prevent"]),["left"])),o[3]||(o[3]=e.withKeys(e.withModifiers((...t)=>n.next&&n.next(...t),["stop","prevent"]),["right"])),o[4]||(o[4]=e.withKeys(t=>n.isExpanded&&n.toggleExpanded(),["esc"]))]},[e.createElementVNode("div",m,[n.isExpanded?(e.openBlock(),e.createBlock(a,{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.isExpanded&&n.toggleExpanded())},null,8,["title"])):e.createCommentVNode("",!0),e.createVNode(a,{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",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createElementBlock("li",{key:t.src,ref_for:!0,ref:"carouselItem",class:e.normalizeClass([{"neon-image-carousel__item--active":s===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(l=>!n.isExpanded&&n.toggleExpanded(),["stop"]))},null,8,g),n.isExpanded?(e.openBlock(),e.createElementBlock("p",k,e.toDisplayString(t.alt),1)):e.createCommentVNode("",!0)],2))),128))],512),e.createVNode(a,{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"},{default:e.withCtx(()=>[e.createElementVNode("div",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(t,s)=>(e.openBlock(),e.createBlock(r,{key:s,"aria-label":`Display image ${s+1}`,class:"neon-image-carousel__nav-item-link","outline-style":"none",role:"button",tabindex:"0",onKeydownCapture:[e.withKeys(e.withModifiers(l=>n.scrollTo(s),["stop","prevent"]),["enter"]),e.withKeys(e.withModifiers(l=>n.scrollTo(s),["stop","prevent"]),["space"])]},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([{"neon-image-carousel__nav-item--active":s===n.currentImage},"neon-image-carousel__nav-item"]),tabindex:"-1",onClickCapture:e.withModifiers(l=>n.scrollTo(s),["stop"])},[...o[5]||(o[5]=[e.createElementVNode("div",{class:"neon-image-carousel__nav-item-indicator"},null,-1)])],42,C)]),_:2},1032,["aria-label","onKeydownCapture"]))),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))]),_:1})],34)])}const w=c(u,[["render",b]]);module.exports=w;
 //# 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 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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"}
+{"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': isExpanded,\n      }\"\n      class=\"neon-image-carousel\"\n      tabindex=\"0\"\n      @keydown.stop.prevent.left=\"previous\"\n      @keydown.stop.prevent.right=\"next\"\n      @keydown.esc=\"isExpanded && toggleExpanded()\"\n    >\n      <div class=\"neon-image-carousel__container\" tabindex=\"-1\">\n        <neon-button\n          v-if=\"isExpanded\"\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=\"isExpanded && toggleExpanded()\"\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=\"!isExpanded && toggleExpanded()\"\n            />\n            <p v-if=\"isExpanded\" 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\">\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","_cache","_withKeys","$event","_hoisted_2","_createBlock","_component_neon_button","_createVNode","_hoisted_3","_Fragment","_renderList","image","index","_withModifiers","_hoisted_5","_toDisplayString","_component_neon_stack","_hoisted_6","_image","_component_neon_link","_hoisted_8"],"mappings":"4IACOA,EAAA,CAAA,MAAM,6BAA6B,KAY/B,MAAM,iCAAiC,SAAS,SAuB/C,IAAI,gBAAgB,MAAM,gEAcL,MAAM,sCAgB1B,MAAM,2BAA2B,SAAS,oCAsBvB,MAAM,6BAA6B,SAAS,6IAvF1E,OAAAC,YAAA,EAAAC,qBA4FM,MA5FNF,EA4FM,CA3FJG,EAAAA,mBA0FM,MAAA,CAzFH,MAAKC,EAAAA,eAAA,CAAA,oCAAgDC,EAAA,4CAAsDA,EAAA,YAItG,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,GACnBC,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,EAAAA,SAAAC,GAAAJ,EAAA,YAAcA,EAAA,eAAc,EAAA,CAAA,KAAA,CAAA,MAE1CF,EAAAA,mBAmDM,MAnDNO,EAmDM,CAjDIL,EAAA,0BADRM,EAAAA,YAUEC,EAAA,OARC,MAAOP,EAAA,WACR,eAAa,OACb,MAAM,6BACN,MAAM,eACN,KAAK,QACL,KAAK,IACL,YAAA,GACC,QAAKE,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAE,GAAEJ,EAAA,YAAcA,EAAA,eAAc,mDAEtCQ,EAAAA,YAUED,EAAA,CATC,SAAUP,EAAA,eAAY,EACtB,MAAOA,EAAA,cACP,YAAa,GACd,eAAa,OACb,MAAM,gCACN,MAAM,UACN,KAAK,eACL,KAAK,mCACgBA,EAAA,SAAQ,CAAA,MAAA,CAAA,iDAE/BF,EAAAA,mBAgBK,KAhBLW,EAgBK,EAfHb,EAAAA,UAAA,EAAA,EAAAC,EAAAA,mBAcKa,WAAA,KAAAC,EAAAA,WAbsBX,EAAA,OAAM,CAAvBY,EAAOC,mBADjBhB,EAAAA,mBAcK,KAAA,CAZF,IAAKe,EAAM,eACZ,IAAI,eACH,MAAKb,EAAAA,eAAA,CAAA,CAAA,oCAAyCc,IAAUb,EAAA,YAAY,EAC/D,2BAA2B,CAAA,IAEjCF,EAAAA,mBAKE,MAAA,CAJC,IAAKc,EAAM,IACX,IAAKA,EAAM,IACZ,MAAM,6BACL,QAAKV,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAY,gBAAAV,GAAA,CAAQJ,EAAA,YAAcA,EAAA,eAAc,EAAA,CAAA,MAAA,CAAA,cAEnCA,EAAA,YAATJ,YAAA,EAAAC,EAAAA,mBAAgF,IAAhFkB,EAAgFC,EAAAA,gBAAhBJ,EAAM,GAAG,EAAA,CAAA,iDAG7EJ,EAAAA,YAUED,EAAA,CATC,SAAUP,EAAA,eAAiBA,EAAA,OAAO,OAAM,EACxC,MAAOA,EAAA,UACP,YAAa,GACd,eAAa,OACb,MAAM,4BACN,MAAM,UACN,KAAK,gBACL,KAAK,mCACgBA,EAAA,KAAI,CAAA,MAAA,CAAA,mDAG7BQ,EAAAA,YA0BaS,EAAA,CA1BD,MAAM,qCAAqC,IAAI,wBACzD,IAqBM,CArBNnB,EAAAA,mBAqBM,MArBNoB,EAqBM,EApBJtB,EAAAA,UAAA,EAAA,EAAAC,EAAAA,mBAmBYa,WAAA,KAAAC,EAAAA,WAlBgBX,EAAA,OAAM,CAAxBmB,EAAQN,mBADlBP,EAAAA,YAmBYc,EAAA,CAjBT,IAAKP,EACL,8BAA6BA,EAAK,CAAA,GACnC,MAAM,qCACN,gBAAc,OACd,KAAK,SACL,SAAS,sBAC4BV,EAAAA,SAAAW,EAAAA,cAAAV,GAAAJ,EAAA,SAASa,CAAK,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EACdV,EAAAA,SAAAW,EAAAA,cAAAV,GAAAJ,EAAA,SAASa,CAAK,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,uBAEnD,IAOM,CAPNf,EAAAA,mBAOM,MAAA,CANH,MAAKC,EAAAA,eAAA,CAAA,CAAA,wCAA6Cc,IAAUb,EAAA,cACvD,+BAA+B,CAAA,EACrC,SAAS,KACY,eAAAc,EAAAA,cAAAV,GAAAJ,EAAA,SAASa,CAAK,EAAA,CAAA,MAAA,CAAA,oBAEnCf,EAAAA,mBAA2D,MAAA,CAAtD,MAAM,yCAAyC,EAAA,KAAA,EAAA,oEAI7CE,EAAA,qDAAbH,qBAEO,OAFPwB,EAEOL,EAAAA,gBADFhB,EAAA,iBAAe,GAAOA,EAAA,OAAO,MAAM,IAAIA,EAAA,OAAO,SAAM,EAAA,QAAA,QAAA,EAAA,EAAA,CAAA"}