@aotearoan/neon 23.3.0 → 24.0.0

package/README.md

@@ -62,3 +62,8 @@ default:
 For more information on dynamically changing the mode
 see [Dark mode](https://aotearoan.github.io/neon/design/theming#dark-mode).
 
+### Building and using the library locally
+
+1. build the project (`npm build`),
+2. run `npm pack` to create a tarball of the project
+3. install from the tarball with  `npm i -S /$PATH-TO-THIS-PROJECT/arcual-lib-app-neon-21.2.8.tgz`

package/dist/common/utils/NeonClosableUtils.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var o=(s,e,t)=>e in s?n(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class a{constructor(e,t){i(this,"target");i(this,"closeCallback");i(this,"_open",!1);this.target=e,this.closeCallback=t,document.addEventListener("keydown",this.escapeKeyListener.bind(this),{passive:!0}),document.addEventListener("mousedown",this.handleOutsideClick.bind(this),{passive:!0}),document.addEventListener("touchstart",this.handleOutsideClick.bind(this),{passive:!0})}open(){this._open=!0,document.body.classList.add("neon-closable--open")}destroy(){document.removeEventListener("keydown",this.escapeKeyListener.bind(this)),document.removeEventListener("mousedown",this.handleOutsideClick.bind(this)),document.removeEventListener("touchstart",this.handleOutsideClick.bind(this))}escapeKeyListener(e){e.key==="Escape"&&this.close()}close(){this.closeCallback(),this._open&&(document.body.classList.remove("neon-closable--open"),this._open=!1)}handleOutsideClick(e){const t=e.target&&e.target;return t&&!this.target.contains(t)&&this.close(),!0}}exports.NeonClosableUtils=a;
+"use strict";var n=Object.defineProperty;var o=(s,e,t)=>e in s?n(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class a{constructor(e,t){i(this,"target");i(this,"closeCallback");i(this,"_open",!1);this.target=e,this.closeCallback=t,document.addEventListener("keydown",this.escapeKeyListener.bind(this),{passive:!0}),document.addEventListener("mousedown",this.handleOutsideClick.bind(this),{passive:!0}),document.addEventListener("touchstart",this.handleOutsideClick.bind(this),{passive:!0})}open(){this._open=!0,document.body.classList.add("neon-closable--open")}destroy(){this.close(),document.removeEventListener("keydown",this.escapeKeyListener.bind(this)),document.removeEventListener("mousedown",this.handleOutsideClick.bind(this)),document.removeEventListener("touchstart",this.handleOutsideClick.bind(this))}escapeKeyListener(e){e.key==="Escape"&&this.close()}close(){this.closeCallback(),this._open&&(document.body.classList.remove("neon-closable--open"),this._open=!1)}handleOutsideClick(e){const t=e.target&&e.target;return t&&!this.target.contains(t)&&this.close(),!0}}exports.NeonClosableUtils=a;
 //# sourceMappingURL=NeonClosableUtils.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeonClosableUtils.cjs.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":"oPAIO,MAAMA,CAAkB,CAYtB,YAAYC,EAAqBC,EAA2B,CAXlDC,EAAA,eACAA,EAAA,sBACTA,EAAA,aAAQ,IAUd,KAAK,OAASF,EACd,KAAK,cAAgBC,EACrB,SAAS,iBAAiB,UAAW,KAAK,kBAAkB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EACzF,SAAS,iBAAiB,YAAa,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EAC5F,SAAS,iBAAiB,aAAc,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,CAC/F,CAMO,MAAO,CACZ,KAAK,MAAQ,GACb,SAAS,KAAK,UAAU,IAAI,qBAAqB,CACnD,CAKO,SAAU,CACf,SAAS,oBAAoB,UAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,EACzE,SAAS,oBAAoB,YAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,EAC5E,SAAS,oBAAoB,aAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC,CAC/E,CAEA,kBAAkBE,EAAsB,CAClCA,EAAM,MAAQ,UAChB,KAAK,MAAA,CAET,CAMO,OAAQ,CACb,KAAK,cAAA,EAED,KAAK,QACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,EACpD,KAAK,MAAQ,GAEjB,CAEQ,mBAAmBA,EAAgC,CACzD,MAAMH,EAASG,EAAM,QAAWA,EAAM,OACtC,OAAIH,GAAU,CAAC,KAAK,OAAO,SAASA,CAAM,GACxC,KAAK,MAAA,EAEA,EACT,CACF"}
+{"version":3,"file":"NeonClosableUtils.cjs.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    this.close();\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":"oPAIO,MAAMA,CAAkB,CAYtB,YAAYC,EAAqBC,EAA2B,CAXlDC,EAAA,eACAA,EAAA,sBACTA,EAAA,aAAQ,IAUd,KAAK,OAASF,EACd,KAAK,cAAgBC,EACrB,SAAS,iBAAiB,UAAW,KAAK,kBAAkB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EACzF,SAAS,iBAAiB,YAAa,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,EAC5F,SAAS,iBAAiB,aAAc,KAAK,mBAAmB,KAAK,IAAI,EAAG,CAAE,QAAS,GAAM,CAC/F,CAMO,MAAO,CACZ,KAAK,MAAQ,GACb,SAAS,KAAK,UAAU,IAAI,qBAAqB,CACnD,CAKO,SAAU,CACf,KAAK,MAAA,EACL,SAAS,oBAAoB,UAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,EACzE,SAAS,oBAAoB,YAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,EAC5E,SAAS,oBAAoB,aAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC,CAC/E,CAEA,kBAAkBE,EAAsB,CAClCA,EAAM,MAAQ,UAChB,KAAK,MAAA,CAET,CAMO,OAAQ,CACb,KAAK,cAAA,EAED,KAAK,QACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,EACpD,KAAK,MAAQ,GAEjB,CAEQ,mBAAmBA,EAAgC,CACzD,MAAMH,EAASG,EAAM,QAAWA,EAAM,OACtC,OAAIH,GAAU,CAAC,KAAK,OAAO,SAASA,CAAM,GACxC,KAAK,MAAA,EAEA,EACT,CACF"}

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

@@ -26,7 +26,7 @@ class d {
    * Destroy the listeners. Call this in the parent component's onUnmounted method.
    */
   destroy() {
-    document.removeEventListener("keydown", this.escapeKeyListener.bind(this)), document.removeEventListener("mousedown", this.handleOutsideClick.bind(this)), document.removeEventListener("touchstart", this.handleOutsideClick.bind(this));
+    this.close(), document.removeEventListener("keydown", this.escapeKeyListener.bind(this)), document.removeEventListener("mousedown", this.handleOutsideClick.bind(this)), document.removeEventListener("touchstart", this.handleOutsideClick.bind(this));
   }
   escapeKeyListener(e) {
     e.key === "Escape" && this.close();

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

@@ -1 +1 @@
-{"version":3,"file":"NeonClosableUtils.es.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":";;;AAIO,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYtB,YAAYC,GAAqBC,GAA2B;AAXlD,IAAAC,EAAA;AACA,IAAAA,EAAA;AACT,IAAAA,EAAA,eAAQ;AAUd,SAAK,SAASF,GACd,KAAK,gBAAgBC,GACrB,SAAS,iBAAiB,WAAW,KAAK,kBAAkB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GACzF,SAAS,iBAAiB,aAAa,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GAC5F,SAAS,iBAAiB,cAAc,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM;AAAA,EAC/F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,OAAO;AACZ,SAAK,QAAQ,IACb,SAAS,KAAK,UAAU,IAAI,qBAAqB;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKO,UAAU;AACf,aAAS,oBAAoB,WAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,GACzE,SAAS,oBAAoB,aAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,GAC5E,SAAS,oBAAoB,cAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC;AAAA,EAC/E;AAAA,EAEA,kBAAkBE,GAAsB;AACtC,IAAIA,EAAM,QAAQ,YAChB,KAAK,MAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,QAAQ;AACb,SAAK,cAAA,GAED,KAAK,UACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,GACpD,KAAK,QAAQ;AAAA,EAEjB;AAAA,EAEQ,mBAAmBA,GAAgC;AACzD,UAAMH,IAASG,EAAM,UAAWA,EAAM;AACtC,WAAIH,KAAU,CAAC,KAAK,OAAO,SAASA,CAAM,KACxC,KAAK,MAAA,GAEA;AAAA,EACT;AACF;"}
+{"version":3,"file":"NeonClosableUtils.es.js","sources":["../../../src/common/utils/NeonClosableUtils.ts"],"sourcesContent":["/**\n * Utility class for assisting with closing events for popup containers like modals, dropdowns, selects & drawers.\n * Detects click & touch events outside the popup element as well as escape key triggers.\n */\nexport class NeonClosableUtils {\n  private readonly target: HTMLElement;\n  private readonly closeCallback: () => void;\n  private _open = false;\n\n  /**\n   * Initialise utility to listen to keyboard, mouse & touch events.\n   *\n   * @param target The popup <em>closable</em> element.\n   * @param closeCallback Callback function triggered when an event fires that should close the target\n   * element.\n   */\n  public constructor(target: HTMLElement, closeCallback: () => void) {\n    this.target = target;\n    this.closeCallback = closeCallback;\n    document.addEventListener('keydown', this.escapeKeyListener.bind(this), { passive: true });\n    document.addEventListener('mousedown', this.handleOutsideClick.bind(this), { passive: true });\n    document.addEventListener('touchstart', this.handleOutsideClick.bind(this), { passive: true });\n  }\n\n  /**\n   * Inform the class that the target is now open. This adds the global <em>neon-closable--open</em> class to the\n   * document body to prevent page scrolling while a popup is open.\n   */\n  public open() {\n    this._open = true;\n    document.body.classList.add('neon-closable--open');\n  }\n\n  /**\n   * Destroy the listeners. Call this in the parent component's onUnmounted method.\n   */\n  public destroy() {\n    this.close();\n    document.removeEventListener('keydown', this.escapeKeyListener.bind(this));\n    document.removeEventListener('mousedown', this.handleOutsideClick.bind(this));\n    document.removeEventListener('touchstart', this.handleOutsideClick.bind(this));\n  }\n\n  escapeKeyListener(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  /**\n   * Handle closing of the target element. This triggers the closeCallback & removes the global\n   * <em>neon-closable--open</em> class from the document body.\n   */\n  public close() {\n    this.closeCallback();\n\n    if (this._open) {\n      document.body.classList.remove('neon-closable--open');\n      this._open = false;\n    }\n  }\n\n  private handleOutsideClick(event: MouseEvent | TouchEvent) {\n    const target = event.target && (event.target as Element);\n    if (target && !this.target.contains(target)) {\n      this.close();\n    }\n    return true;\n  }\n}\n"],"names":["NeonClosableUtils","target","closeCallback","__publicField","event"],"mappings":";;;AAIO,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYtB,YAAYC,GAAqBC,GAA2B;AAXlD,IAAAC,EAAA;AACA,IAAAA,EAAA;AACT,IAAAA,EAAA,eAAQ;AAUd,SAAK,SAASF,GACd,KAAK,gBAAgBC,GACrB,SAAS,iBAAiB,WAAW,KAAK,kBAAkB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GACzF,SAAS,iBAAiB,aAAa,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM,GAC5F,SAAS,iBAAiB,cAAc,KAAK,mBAAmB,KAAK,IAAI,GAAG,EAAE,SAAS,IAAM;AAAA,EAC/F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,OAAO;AACZ,SAAK,QAAQ,IACb,SAAS,KAAK,UAAU,IAAI,qBAAqB;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKO,UAAU;AACf,SAAK,MAAA,GACL,SAAS,oBAAoB,WAAW,KAAK,kBAAkB,KAAK,IAAI,CAAC,GACzE,SAAS,oBAAoB,aAAa,KAAK,mBAAmB,KAAK,IAAI,CAAC,GAC5E,SAAS,oBAAoB,cAAc,KAAK,mBAAmB,KAAK,IAAI,CAAC;AAAA,EAC/E;AAAA,EAEA,kBAAkBE,GAAsB;AACtC,IAAIA,EAAM,QAAQ,YAChB,KAAK,MAAA;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,QAAQ;AACb,SAAK,cAAA,GAED,KAAK,UACP,SAAS,KAAK,UAAU,OAAO,qBAAqB,GACpD,KAAK,QAAQ;AAAA,EAEjB;AAAA,EAEQ,mBAAmBA,GAAgC;AACzD,UAAMH,IAASG,EAAM,UAAWA,EAAM;AACtC,WAAIH,KAAU,CAAC,KAAK,OAAO,SAASA,CAAM,KACxC,KAAK,MAAA,GAEA;AAAA,EACT;AACF;"}

package/dist/components/layout/modal/NeonModal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),r=require("../../../common/utils/NeonClosableUtils.cjs.js"),c=require("../../user-input/button/NeonButton.vue.cjs.js"),d=e.defineComponent({name:"NeonDrawer",components:{NeonButton:c},props:{open:{type:Boolean,required:!0},dismissible:{type:Boolean,default:!0},opaque:{type:Boolean,default:!1},showTopNav:{type:Boolean,default:!1}},emits:["close"],setup(o,{emit:a}){const l=e.ref(null),s=e.ref(null),i=()=>{a("close")},t=()=>{o.open&&o.dismissible&&i()};return e.onMounted(()=>{o.dismissible&&(s.value=l.value&&new r.NeonClosableUtils(l.value,t)||null)}),e.onUnmounted(()=>{var n;(n=s.value)==null||n.destroy()}),e.watch(()=>o.open,n=>{var u;n&&((u=s.value)==null||u.open())},{immediate:!0}),{modal:l,close:t}}});module.exports=d;
+"use strict";const e=require("vue"),c=require("../../../common/utils/NeonClosableUtils.cjs.js"),d=require("../../user-input/button/NeonButton.vue.cjs.js"),p=require("../../../common/enums/NeonResponsive.cjs.js"),f=e.defineComponent({name:"NeonDrawer",components:{NeonButton:d},props:{open:{type:Boolean,required:!0},dismissible:{type:Boolean,default:!0},opaque:{type:Boolean,default:!1},showTopNav:{type:Boolean,default:!1},breakpoint:{type:String,default:p.NeonResponsive.Mobile}},emits:["close"],setup(o,{emit:a}){const l=e.ref(null),n=e.ref(null),r=()=>{a("close")},t=()=>{o.open&&o.dismissible&&r()};return e.onMounted(()=>{o.dismissible&&(n.value=l.value&&new c.NeonClosableUtils(l.value,t)||null)}),e.onUnmounted(()=>{var s;(s=n.value)==null||s.destroy()}),e.watch(()=>o.open,s=>{var i,u;s?(i=n.value)==null||i.open():(u=n.value)==null||u.close()},{immediate:!0}),{modal:l,close:t}}});module.exports=f;
 //# sourceMappingURL=NeonModal.cjs.js.map

package/dist/components/layout/modal/NeonModal.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value"],"mappings":"2JAOAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,QAAS,SAAU,EAAA,EAIjC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,EAIvC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE9C,MAAO,CAKL,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,IAAI,IAAI,EAChBC,EAAgBD,EAAAA,IAA8B,IAAI,EAElDE,EAAU,IAAM,CACpBJ,EAAK,OAAO,CACd,EAEMK,EAAQ,IAAM,CACdN,EAAM,MAAQA,EAAM,aACtBK,EAAA,CAEJ,EAEAE,OAAAA,EAAAA,UAAU,IAAM,CACVP,EAAM,cACRI,EAAc,MAASF,EAAM,OAAS,IAAIM,EAAAA,kBAAkBN,EAAM,MAAOI,CAAK,GAAM,KAExF,CAAC,EAEDG,EAAAA,YAAY,IAAM,QAChBC,EAAAN,EAAc,QAAd,MAAAM,EAAqB,SACvB,CAAC,EAEDC,EAAAA,MACE,IAAMX,EAAM,KACXY,GAAU,OACLA,KACFF,EAAAN,EAAc,QAAd,MAAAM,EAAqB,OAEzB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,MAAAR,EACA,MAAAI,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonModal.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport { NeonResponsive } from '@/common/enums/NeonResponsive';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n    /**\n     * Responsive breakpoint below which point the modal becomes fullscreen.\n     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.\n     */\n    breakpoint: { type: String as () => NeonResponsive, default: NeonResponsive.Mobile },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        } else {\n          closableUtils.value?.close();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonResponsive","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value","_b"],"mappings":"oNAQAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CAIL,KAAM,CAAE,KAAM,QAAS,SAAU,EAAA,EAIjC,YAAa,CAAE,KAAM,QAAS,QAAS,EAAA,EAIvC,OAAQ,CAAE,KAAM,QAAS,QAAS,EAAA,EAIlC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAKtC,WAAY,CAAE,KAAM,OAAgC,QAASC,EAAAA,eAAe,MAAA,CAAO,EAErF,MAAO,CAKL,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,IAAI,IAAI,EAChBC,EAAgBD,EAAAA,IAA8B,IAAI,EAElDE,EAAU,IAAM,CACpBJ,EAAK,OAAO,CACd,EAEMK,EAAQ,IAAM,CACdN,EAAM,MAAQA,EAAM,aACtBK,EAAA,CAEJ,EAEAE,OAAAA,EAAAA,UAAU,IAAM,CACVP,EAAM,cACRI,EAAc,MAASF,EAAM,OAAS,IAAIM,EAAAA,kBAAkBN,EAAM,MAAOI,CAAK,GAAM,KAExF,CAAC,EAEDG,EAAAA,YAAY,IAAM,QAChBC,EAAAN,EAAc,QAAd,MAAAM,EAAqB,SACvB,CAAC,EAEDC,EAAAA,MACE,IAAMX,EAAM,KACXY,GAAU,SACLA,GACFF,EAAAN,EAAc,QAAd,MAAAM,EAAqB,QAErBG,EAAAT,EAAc,QAAd,MAAAS,EAAqB,OAEzB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,MAAAX,EACA,MAAAI,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/modal/NeonModal.es.js

@@ -1,10 +1,11 @@
-import { defineComponent as m, ref as a, onMounted as r, onUnmounted as f, watch as d } from "vue";
-import { NeonClosableUtils as p } from "../../../common/utils/NeonClosableUtils.es.js";
-import c from "../../user-input/button/NeonButton.vue.es.js";
-const B = m({
+import { defineComponent as r, ref as i, onMounted as f, onUnmounted as p, watch as d } from "vue";
+import { NeonClosableUtils as c } from "../../../common/utils/NeonClosableUtils.es.js";
+import v from "../../user-input/button/NeonButton.vue.es.js";
+import { NeonResponsive as b } from "../../../common/enums/NeonResponsive.es.js";
+const C = r({
   name: "NeonDrawer",
   components: {
-    NeonButton: c
+    NeonButton: v
   },
   props: {
     /**
@@ -22,7 +23,12 @@ const B = m({
     /**
      * Keep the top nav visible when the modal is open
      */
-    showTopNav: { type: Boolean, default: !1 }
+    showTopNav: { type: Boolean, default: !1 },
+    /**
+     * Responsive breakpoint below which point the modal becomes fullscreen.
+     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
+     */
+    breakpoint: { type: String, default: b.Mobile }
   },
   emits: [
     /**
@@ -31,31 +37,31 @@ const B = m({
      */
     "close"
   ],
-  setup(e, { emit: i }) {
-    const l = a(null), n = a(null), u = () => {
-      i("close");
+  setup(e, { emit: u }) {
+    const n = i(null), o = i(null), m = () => {
+      u("close");
     }, t = () => {
-      e.open && e.dismissible && u();
+      e.open && e.dismissible && m();
     };
-    return r(() => {
-      e.dismissible && (n.value = l.value && new p(l.value, t) || null);
-    }), f(() => {
-      var o;
-      (o = n.value) == null || o.destroy();
+    return f(() => {
+      e.dismissible && (o.value = n.value && new c(n.value, t) || null);
+    }), p(() => {
+      var l;
+      (l = o.value) == null || l.destroy();
     }), d(
       () => e.open,
-      (o) => {
-        var s;
-        o && ((s = n.value) == null || s.open());
+      (l) => {
+        var s, a;
+        l ? (s = o.value) == null || s.open() : (a = o.value) == null || a.close();
       },
       { immediate: !0 }
     ), {
-      modal: l,
+      modal: n,
       close: t
     };
   }
 });
 export {
-  B as default
+  C as default
 };
 //# sourceMappingURL=NeonModal.es.js.map

package/dist/components/layout/modal/NeonModal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.es.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value"],"mappings":";;;AAOA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE9C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAI,IAAI,GAChBC,IAAgBD,EAA8B,IAAI,GAElDE,IAAU,MAAM;AACpB,MAAAJ,EAAK,OAAO;AAAA,IACd,GAEMK,IAAQ,MAAM;AAClB,MAAIN,EAAM,QAAQA,EAAM,eACtBK,EAAA;AAAA,IAEJ;AAEA,WAAAE,EAAU,MAAM;AACd,MAAIP,EAAM,gBACRI,EAAc,QAASF,EAAM,SAAS,IAAIM,EAAkBN,EAAM,OAAOI,CAAK,KAAM;AAAA,IAExF,CAAC,GAEDG,EAAY,MAAM;;AAChB,OAAAC,IAAAN,EAAc,UAAd,QAAAM,EAAqB;AAAA,IACvB,CAAC,GAEDC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACY,MAAU;;AACT,QAAIA,OACFF,IAAAN,EAAc,UAAd,QAAAM,EAAqB;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,OAAAR;AAAA,MACA,OAAAI;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonModal.es.js","sources":["../../../../src/components/layout/modal/NeonModal.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { NeonClosableUtils } from '@/common/utils/NeonClosableUtils';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport { NeonResponsive } from '@/common/enums/NeonResponsive';\n\n/**\n * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.\n */\nexport default defineComponent({\n  name: 'NeonDrawer',\n  components: {\n    NeonButton,\n  },\n  props: {\n    /**\n     * Whether the modal is currently open.\n     */\n    open: { type: Boolean, required: true },\n    /**\n     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.\n     */\n    dismissible: { type: Boolean, default: true },\n    /**\n     * Increase the opacity so that the page behind the modal is no longer visible\n     */\n    opaque: { type: Boolean, default: false },\n    /**\n     * Keep the top nav visible when the modal is open\n     */\n    showTopNav: { type: Boolean, default: false },\n    /**\n     * Responsive breakpoint below which point the modal becomes fullscreen.\n     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.\n     */\n    breakpoint: { type: String as () => NeonResponsive, default: NeonResponsive.Mobile },\n  },\n  emits: [\n    /**\n     * Emitted when the modal is closed.\n     * @type {void}\n     */\n    'close',\n  ],\n  setup(props, { emit }) {\n    const modal = ref(null);\n    const closableUtils = ref<NeonClosableUtils | null>(null);\n\n    const onClose = () => {\n      emit('close');\n    };\n\n    const close = () => {\n      if (props.open && props.dismissible) {\n        onClose();\n      }\n    };\n\n    onMounted(() => {\n      if (props.dismissible) {\n        closableUtils.value = (modal.value && new NeonClosableUtils(modal.value, close)) || null;\n      }\n    });\n\n    onUnmounted(() => {\n      closableUtils.value?.destroy();\n    });\n\n    watch(\n      () => props.open,\n      (value) => {\n        if (value) {\n          closableUtils.value?.open();\n        } else {\n          closableUtils.value?.close();\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      modal,\n      close,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonButton","NeonResponsive","props","emit","modal","ref","closableUtils","onClose","close","onMounted","NeonClosableUtils","onUnmounted","_a","watch","value","_b"],"mappings":";;;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM,EAAE,MAAM,SAAS,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIvC,QAAQ,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAIlC,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,YAAY,EAAE,MAAM,QAAgC,SAASC,EAAe,OAAA;AAAA,EAAO;AAAA,EAErF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAI,IAAI,GAChBC,IAAgBD,EAA8B,IAAI,GAElDE,IAAU,MAAM;AACpB,MAAAJ,EAAK,OAAO;AAAA,IACd,GAEMK,IAAQ,MAAM;AAClB,MAAIN,EAAM,QAAQA,EAAM,eACtBK,EAAA;AAAA,IAEJ;AAEA,WAAAE,EAAU,MAAM;AACd,MAAIP,EAAM,gBACRI,EAAc,QAASF,EAAM,SAAS,IAAIM,EAAkBN,EAAM,OAAOI,CAAK,KAAM;AAAA,IAExF,CAAC,GAEDG,EAAY,MAAM;;AAChB,OAAAC,IAAAN,EAAc,UAAd,QAAAM,EAAqB;AAAA,IACvB,CAAC,GAEDC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACY,MAAU;;AACT,QAAIA,KACFF,IAAAN,EAAc,UAAd,QAAAM,EAAqB,UAErBG,IAAAT,EAAc,UAAd,QAAAS,EAAqB;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,OAAAX;AAAA,MACA,OAAAI;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/layout/modal/NeonModal.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("./NeonModal.cjs.js"),e=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={ref:"modal",class:"neon-modal__container"};function s(o,c,i,d,u,_){const n=e.resolveComponent("neon-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-modal--open":o.open},"neon-modal"]),role:"dialog"},[e.createElementVNode("div",r,[e.renderSlot(o.$slots,"default"),o.dismissible?(e.openBlock(),e.createBlock(n,{key:0,circular:!0,transparent:!0,"button-style":"text",class:"neon-modal__close",color:"low-contrast",icon:"times",size:"s",tabindex:"0",onClick:o.close},null,8,["onClick"])):e.createCommentVNode("",!0)],512),e.createElementVNode("div",{class:e.normalizeClass([{"neon-modal__overlay--opaque":o.opaque,"neon-modal__overlay--show-top-nav":o.showTopNav},"neon-modal__overlay"])},null,2)],2)}const a=t(l,[["render",s]]);module.exports=a;
+"use strict";const l=require("./NeonModal.cjs.js"),e=require("vue"),t=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={ref:"modal",class:"neon-modal__container"};function a(o,c,i,d,u,p){const n=e.resolveComponent("neon-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([[{"neon-modal--open":o.open},`neon-modal--breakpoint-${o.breakpoint}`],"neon-modal"]),role:"dialog"},[e.createElementVNode("div",r,[e.renderSlot(o.$slots,"default"),o.dismissible?(e.openBlock(),e.createBlock(n,{key:0,circular:!0,transparent:!0,"button-style":"text",class:"neon-modal__close",color:"low-contrast",icon:"times",size:"s",tabindex:"0",onClick:o.close},null,8,["onClick"])):e.createCommentVNode("",!0)],512),e.createElementVNode("div",{class:e.normalizeClass([{"neon-modal__overlay--opaque":o.opaque,"neon-modal__overlay--show-top-nav":o.showTopNav},"neon-modal__overlay"])},null,2)],2)}const s=t(l,[["render",a]]);module.exports=s;
 //# sourceMappingURL=NeonModal.vue.cjs.js.map

package/dist/components/layout/modal/NeonModal.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.vue.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"{ 'neon-modal--open': open }\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":"uIAES,IAAI,QAAQ,MAAM,gHADzBA,EAAAA,mBAqBM,MAAA,CArBA,MAAKC,EAAAA,eAAA,CAAA,CAAA,mBAAwBC,EAAA,IAAI,EAAU,YAAY,CAAA,EAAC,KAAK,WACjEC,EAAAA,mBAeM,MAfNC,EAeM,CAbJC,aAAaH,EAAA,OAAA,SAAA,EAELA,EAAA,2BADRI,EAAAA,YAWEC,EAAA,OATC,SAAU,GACV,YAAa,GACd,eAAa,OACb,MAAM,oBACN,MAAM,eACN,KAAK,QACL,KAAK,IACL,SAAS,IACR,QAAOL,EAAA,8DAGZC,EAAAA,mBAGO,MAAA,CAFJ,MAAKF,EAAAA,eAAA,CAAA,CAAA,8BAAmCC,EAAA,OAAM,oCAAuCA,EAAA,UAAU,EAC1F,qBAAqB,CAAA"}
+{"version":3,"file":"NeonModal.vue.cjs.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"[{ 'neon-modal--open': open }, `neon-modal--breakpoint-${breakpoint}`]\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":"uIAES,IAAI,QAAQ,MAAM,gHADzBA,EAAAA,mBAqBM,MAAA,CArBA,MAAKC,EAAAA,eAAA,CAAA,CAAA,CAAA,mBAAyBC,EAAA,IAAI,EAAA,0BAA8BA,EAAA,UAAU,IAAW,YAAY,CAAA,EAAC,KAAK,WAC3GC,EAAAA,mBAeM,MAfNC,EAeM,CAbJC,aAAaH,EAAA,OAAA,SAAA,EAELA,EAAA,2BADRI,EAAAA,YAWEC,EAAA,OATC,SAAU,GACV,YAAa,GACd,eAAa,OACb,MAAM,oBACN,MAAM,eACN,KAAK,QACL,KAAK,IACL,SAAS,IACR,QAAOL,EAAA,8DAGZC,EAAAA,mBAGO,MAAA,CAFJ,MAAKF,EAAAA,eAAA,CAAA,CAAA,8BAAmCC,EAAA,OAAM,oCAAuCA,EAAA,UAAU,EAC1F,qBAAqB,CAAA"}

package/dist/components/layout/modal/NeonModal.vue.es.js

@@ -1,19 +1,19 @@
-import a from "./NeonModal.es.js";
-import { resolveComponent as r, openBlock as e, createElementBlock as s, normalizeClass as n, createElementVNode as l, renderSlot as c, createBlock as d, createCommentVNode as m } from "vue";
-import i from "../../../_virtual/_plugin-vue_export-helper.es.js";
+import t from "./NeonModal.es.js";
+import { resolveComponent as r, openBlock as e, createElementBlock as s, normalizeClass as n, createElementVNode as l, renderSlot as c, createBlock as d, createCommentVNode as i } from "vue";
+import m from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const p = {
   ref: "modal",
   class: "neon-modal__container"
 };
-function _(o, u, f, v, k, b) {
-  const t = r("neon-button");
+function u(o, _, f, v, k, b) {
+  const a = r("neon-button");
   return e(), s("div", {
-    class: n([{ "neon-modal--open": o.open }, "neon-modal"]),
+    class: n([[{ "neon-modal--open": o.open }, `neon-modal--breakpoint-${o.breakpoint}`], "neon-modal"]),
     role: "dialog"
   }, [
     l("div", p, [
       c(o.$slots, "default"),
-      o.dismissible ? (e(), d(t, {
+      o.dismissible ? (e(), d(a, {
         key: 0,
         circular: !0,
         transparent: !0,
@@ -24,14 +24,14 @@ function _(o, u, f, v, k, b) {
         size: "s",
         tabindex: "0",
         onClick: o.close
-      }, null, 8, ["onClick"])) : m("", !0)
+      }, null, 8, ["onClick"])) : i("", !0)
     ], 512),
     l("div", {
       class: n([{ "neon-modal__overlay--opaque": o.opaque, "neon-modal__overlay--show-top-nav": o.showTopNav }, "neon-modal__overlay"])
     }, null, 2)
   ], 2);
 }
-const h = /* @__PURE__ */ i(a, [["render", _]]);
+const h = /* @__PURE__ */ m(t, [["render", u]]);
 export {
   h as default
 };

package/dist/components/layout/modal/NeonModal.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonModal.vue.es.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"{ 'neon-modal--open': open }\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":";;;;EAES,KAAI;AAAA,EAAQ,OAAM;;;;cADzBA,EAqBM,OAAA;AAAA,IArBA,OAAKC,EAAA,CAAA,EAAA,oBAAwBC,EAAA,KAAI,GAAU,YAAY,CAAA;AAAA,IAAC,MAAK;AAAA;IACjEC,EAeM,OAfNC,GAeM;AAAA,MAbJC,EAAaH,EAAA,QAAA,SAAA;AAAA,MAELA,EAAA,oBADRI,EAWEC,GAAA;AAAA;QATC,UAAU;AAAA,QACV,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAS;AAAA,QACR,SAAOL,EAAA;AAAA;;IAGZC,EAGO,OAAA;AAAA,MAFJ,OAAKF,EAAA,CAAA,EAAA,+BAAmCC,EAAA,QAAM,qCAAuCA,EAAA,WAAU,GAC1F,qBAAqB,CAAA;AAAA;;;;"}
+{"version":3,"file":"NeonModal.vue.es.js","sources":["../../../../src/components/layout/modal/NeonModal.vue"],"sourcesContent":["<template>\n  <div :class=\"[{ 'neon-modal--open': open }, `neon-modal--breakpoint-${breakpoint}`]\" class=\"neon-modal\" role=\"dialog\">\n    <div ref=\"modal\" class=\"neon-modal__container\">\n      <!-- @slot modal contents -->\n      <slot></slot>\n      <neon-button\n        v-if=\"dismissible\"\n        :circular=\"true\"\n        :transparent=\"true\"\n        button-style=\"text\"\n        class=\"neon-modal__close\"\n        color=\"low-contrast\"\n        icon=\"times\"\n        size=\"s\"\n        tabindex=\"0\"\n        @click=\"close\"\n      />\n    </div>\n    <div\n      :class=\"{ 'neon-modal__overlay--opaque': opaque, 'neon-modal__overlay--show-top-nav': showTopNav }\"\n      class=\"neon-modal__overlay\"\n    ></div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonModal.ts\"></script>\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_hoisted_1","_renderSlot","_createBlock","_component_neon_button"],"mappings":";;;;EAES,KAAI;AAAA,EAAQ,OAAM;;;;cADzBA,EAqBM,OAAA;AAAA,IArBA,OAAKC,EAAA,CAAA,CAAA,EAAA,oBAAyBC,EAAA,KAAI,GAAA,0BAA8BA,EAAA,UAAU,KAAW,YAAY,CAAA;AAAA,IAAC,MAAK;AAAA;IAC3GC,EAeM,OAfNC,GAeM;AAAA,MAbJC,EAAaH,EAAA,QAAA,SAAA;AAAA,MAELA,EAAA,oBADRI,EAWEC,GAAA;AAAA;QATC,UAAU;AAAA,QACV,aAAa;AAAA,QACd,gBAAa;AAAA,QACb,OAAM;AAAA,QACN,OAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAS;AAAA,QACR,SAAOL,EAAA;AAAA;;IAGZC,EAGO,OAAA;AAAA,MAFJ,OAAKF,EAAA,CAAA,EAAA,+BAAmCC,EAAA,QAAM,qCAAuCA,EAAA,WAAU,GAC1F,qBAAqB,CAAA;AAAA;;;;"}

package/dist/components/navigation/tree-menu/NeonTreeMenu.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("vue"),l=require("../link/NeonLink.vue.cjs.js"),i=require("vue-router"),p=t.defineComponent({name:"NeonTreeMenu",components:{NeonLink:l},props:{model:{type:Array,required:!0},expandAll:{type:Boolean,default:!1}},emits:["click"],setup(m,{emit:o}){const c=i.useRoute(),n=t.ref(null),s=e=>{const r=e.target;r.parentElement&&r.parentElement.click()},u=e=>{o("click",e)},a=e=>e.toLowerCase().replace(/\s/g,"-");return t.watch(()=>c.path,e=>n.value=e,{immediate:!0}),{url:n,click:s,onClick:u,fragment:a}}});module.exports=p;
+"use strict";const u=require("vue"),s=require("../../presentation/icon/NeonIcon.vue.cjs.js"),x=require("../link/NeonLink.vue.cjs.js"),f=require("vue-router"),k=require("../../../common/enums/NeonFunctionalColor.cjs.js"),q=u.defineComponent({name:"NeonTreeMenu",components:{NeonIcon:s,NeonLink:x},props:{id:{type:String,required:!0},modelValue:{type:Array,required:!0},color:{type:String,default:k.NeonFunctionalColor.Brand},expandAll:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(a,{emit:l}){const c=f.useRoute(),d=u.ref(null),p=n=>{const t=n.target;t.parentElement&&t.parentElement.click()},i=n=>{const t=a.modelValue.map(e=>{var o;return{...e,children:(o=e.children)==null?void 0:o.map(r=>({...r})),expanded:e.key===n?!e.expanded:e.expanded}});l("update:modelValue",t)},m=n=>{const t=a.modelValue.map(e=>{var o;return{...e,children:(o=e.children)==null?void 0:o.map(r=>({...r,expanded:r.key===n?!r.expanded:r.expanded}))}});l("update:modelValue",t)};return u.watch(()=>c.path,n=>d.value=n,{immediate:!0}),{url:d,click:p,onSectionClick:i,onItemClick:m}}});module.exports=q;
 //# sourceMappingURL=NeonTreeMenu.cjs.js.map

package/dist/components/navigation/tree-menu/NeonTreeMenu.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonTreeMenu.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/common/models/NeonTreeMenuSectionModel';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n  name: 'NeonTreeMenu',\n  components: {\n    NeonLink,\n  },\n  props: {\n    /**\n     * The tree model defining the menu.\n     */\n    model: { type: Array as () => Array<NeonTreeMenuSectionModel>, required: true },\n    /**\n     * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n     */\n    expandAll: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on a menu item\n     * @type {string} the key of the clicked on menu item.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const route = useRoute();\n    const url = ref<string | null>(null);\n\n    const click = ($event: KeyboardEvent) => {\n      const target = $event.target as HTMLSpanElement;\n      if (target.parentElement) {\n        target.parentElement.click();\n      }\n    };\n\n    const onClick = (key: string) => {\n      emit('click', key);\n    };\n\n    const fragment = (anchor: string) => {\n      return anchor.toLowerCase().replace(/\\s/g, '-');\n    };\n\n    watch(\n      () => route.path,\n      (value) => (url.value = value),\n      { immediate: true },\n    );\n\n    return {\n      url,\n      click,\n      onClick,\n      fragment,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLink","props","emit","route","useRoute","url","ref","click","$event","target","onClick","key","fragment","anchor","watch","value"],"mappings":"qGAUAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,SAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,MAAgD,SAAU,EAAA,EAIzE,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE7C,MAAO,CAKL,OAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAMC,EAAAA,IAAmB,IAAI,EAE7BC,EAASC,GAA0B,CACvC,MAAMC,EAASD,EAAO,OAClBC,EAAO,eACTA,EAAO,cAAc,MAAA,CAEzB,EAEMC,EAAWC,GAAgB,CAC/BT,EAAK,QAASS,CAAG,CACnB,EAEMC,EAAYC,GACTA,EAAO,YAAA,EAAc,QAAQ,MAAO,GAAG,EAGhDC,OAAAA,EAAAA,MACE,IAAMX,EAAM,KACXY,GAAWV,EAAI,MAAQU,EACxB,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,IAAAV,EACA,MAAAE,EACA,QAAAG,EACA,SAAAE,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonTreeMenu.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/common/models/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n  name: 'NeonTreeMenu',\n  components: {\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A\n     * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated\n     * unless they're namespaced.\n     */\n    id: { type: String, required: true },\n    /**\n     * The tree model defining the menu.\n     */\n    modelValue: { type: Array as () => Array<NeonTreeMenuSectionModel>, required: true },\n    /**\n     * The menu highlight color (excludes low-contrast and neutral).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n    /**\n     * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n     */\n    expandAll: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the user toggles expansion of a section or item\n     * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const route = useRoute();\n    const url = ref<string | null>(null);\n\n    const click = ($event: KeyboardEvent) => {\n      const target = $event.target as HTMLSpanElement;\n      if (target.parentElement) {\n        target.parentElement.click();\n      }\n    };\n\n    const onSectionClick = (key: string) => {\n      const newModel = props.modelValue.map((section) => {\n        return {\n          ...section,\n          children: section.children?.map((child) => ({ ...child })),\n          expanded: section.key === key ? !section.expanded : section.expanded,\n        };\n      });\n\n      emit('update:modelValue', newModel);\n    };\n\n    const onItemClick = (key: string) => {\n      const newModel = props.modelValue.map((section) => {\n        return {\n          ...section,\n          children: section.children?.map((child) => {\n            return {\n              ...child,\n              expanded: child.key === key ? !child.expanded : child.expanded,\n            };\n          }),\n        };\n      });\n\n      emit('update:modelValue', newModel);\n    };\n\n    watch(\n      () => route.path,\n      (value) => (url.value = value),\n      { immediate: true },\n    );\n\n    return {\n      url,\n      click,\n      onSectionClick,\n      onItemClick,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonLink","NeonFunctionalColor","props","emit","route","useRoute","url","ref","click","$event","target","onSectionClick","key","newModel","section","_a","child","onItemClick","watch","value"],"mappings":"4NAYAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,SAAAC,EACA,SAAAC,CAAA,EAEF,MAAO,CAML,GAAI,CAAE,KAAM,OAAQ,SAAU,EAAA,EAI9B,WAAY,CAAE,KAAM,MAAgD,SAAU,EAAA,EAI9E,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,KAAA,EAIjF,UAAW,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAE7C,MAAO,CAKL,mBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,SAAA,EACRC,EAAMC,EAAAA,IAAmB,IAAI,EAE7BC,EAASC,GAA0B,CACvC,MAAMC,EAASD,EAAO,OAClBC,EAAO,eACTA,EAAO,cAAc,MAAA,CAEzB,EAEMC,EAAkBC,GAAgB,CACtC,MAAMC,EAAWX,EAAM,WAAW,IAAKY,GAAY,OACjD,MAAO,CACL,GAAGA,EACH,UAAUC,EAAAD,EAAQ,WAAR,YAAAC,EAAkB,IAAKC,IAAW,CAAE,GAAGA,CAAA,IACjD,SAAUF,EAAQ,MAAQF,EAAM,CAACE,EAAQ,SAAWA,EAAQ,QAAA,CAEhE,CAAC,EAEDX,EAAK,oBAAqBU,CAAQ,CACpC,EAEMI,EAAeL,GAAgB,CACnC,MAAMC,EAAWX,EAAM,WAAW,IAAKY,GAAY,OACjD,MAAO,CACL,GAAGA,EACH,UAAUC,EAAAD,EAAQ,WAAR,YAAAC,EAAkB,IAAKC,IACxB,CACL,GAAGA,EACH,SAAUA,EAAM,MAAQJ,EAAM,CAACI,EAAM,SAAWA,EAAM,QAAA,GAEzD,CAEL,CAAC,EAEDb,EAAK,oBAAqBU,CAAQ,CACpC,EAEAK,OAAAA,EAAAA,MACE,IAAMd,EAAM,KACXe,GAAWb,EAAI,MAAQa,EACxB,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,IAAAb,EACA,MAAAE,EACA,eAAAG,EACA,YAAAM,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js

@@ -1,16 +1,29 @@
-import { defineComponent as p, ref as s, watch as m } from "vue";
-import i from "../link/NeonLink.vue.es.js";
-import { useRoute as u } from "vue-router";
-const y = p({
+import { defineComponent as i, ref as f, watch as s } from "vue";
+import x from "../../presentation/icon/NeonIcon.vue.es.js";
+import k from "../link/NeonLink.vue.es.js";
+import { useRoute as y } from "vue-router";
+import { NeonFunctionalColor as V } from "../../../common/enums/NeonFunctionalColor.es.js";
+const M = i({
   name: "NeonTreeMenu",
   components: {
-    NeonLink: i
+    NeonIcon: x,
+    NeonLink: k
   },
   props: {
+    /**
+     * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A
+     * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated
+     * unless they're namespaced.
+     */
+    id: { type: String, required: !0 },
     /**
      * The tree model defining the menu.
      */
-    model: { type: Array, required: !0 },
+    modelValue: { type: Array, required: !0 },
+    /**
+     * The menu highlight color (excludes low-contrast and neutral).
+     */
+    color: { type: String, default: V.Brand },
     /**
      * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).
      */
@@ -18,31 +31,51 @@ const y = p({
   },
   emits: [
     /**
-     * Emitted when the user clicks on a menu item
-     * @type {string} the key of the clicked on menu item.
+     * Emitted when the user toggles expansion of a section or item
+     * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.
      */
-    "click"
+    "update:modelValue"
   ],
-  setup(f, { emit: r }) {
-    const n = u(), t = s(null), a = (e) => {
-      const o = e.target;
-      o.parentElement && o.parentElement.click();
-    }, c = (e) => {
-      r("click", e);
-    }, l = (e) => e.toLowerCase().replace(/\s/g, "-");
-    return m(
-      () => n.path,
-      (e) => t.value = e,
+  setup(a, { emit: l }) {
+    const p = y(), d = f(null), u = (n) => {
+      const t = n.target;
+      t.parentElement && t.parentElement.click();
+    }, m = (n) => {
+      const t = a.modelValue.map((e) => {
+        var o;
+        return {
+          ...e,
+          children: (o = e.children) == null ? void 0 : o.map((r) => ({ ...r })),
+          expanded: e.key === n ? !e.expanded : e.expanded
+        };
+      });
+      l("update:modelValue", t);
+    }, c = (n) => {
+      const t = a.modelValue.map((e) => {
+        var o;
+        return {
+          ...e,
+          children: (o = e.children) == null ? void 0 : o.map((r) => ({
+            ...r,
+            expanded: r.key === n ? !r.expanded : r.expanded
+          }))
+        };
+      });
+      l("update:modelValue", t);
+    };
+    return s(
+      () => p.path,
+      (n) => d.value = n,
       { immediate: !0 }
     ), {
-      url: t,
-      click: a,
-      onClick: c,
-      fragment: l
+      url: d,
+      click: u,
+      onSectionClick: m,
+      onItemClick: c
     };
   }
 });
 export {
-  y as default
+  M as default
 };
 //# sourceMappingURL=NeonTreeMenu.es.js.map

package/dist/components/navigation/tree-menu/NeonTreeMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonTreeMenu.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/common/models/NeonTreeMenuSectionModel';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n  name: 'NeonTreeMenu',\n  components: {\n    NeonLink,\n  },\n  props: {\n    /**\n     * The tree model defining the menu.\n     */\n    model: { type: Array as () => Array<NeonTreeMenuSectionModel>, required: true },\n    /**\n     * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n     */\n    expandAll: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on a menu item\n     * @type {string} the key of the clicked on menu item.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const route = useRoute();\n    const url = ref<string | null>(null);\n\n    const click = ($event: KeyboardEvent) => {\n      const target = $event.target as HTMLSpanElement;\n      if (target.parentElement) {\n        target.parentElement.click();\n      }\n    };\n\n    const onClick = (key: string) => {\n      emit('click', key);\n    };\n\n    const fragment = (anchor: string) => {\n      return anchor.toLowerCase().replace(/\\s/g, '-');\n    };\n\n    watch(\n      () => route.path,\n      (value) => (url.value = value),\n      { immediate: true },\n    );\n\n    return {\n      url,\n      click,\n      onClick,\n      fragment,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonLink","props","emit","route","useRoute","url","ref","click","$event","target","onClick","key","fragment","anchor","watch","value"],"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,OAAgD,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIzE,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE7C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAA,GACRC,IAAMC,EAAmB,IAAI,GAE7BC,IAAQ,CAACC,MAA0B;AACvC,YAAMC,IAASD,EAAO;AACtB,MAAIC,EAAO,iBACTA,EAAO,cAAc,MAAA;AAAA,IAEzB,GAEMC,IAAU,CAACC,MAAgB;AAC/B,MAAAT,EAAK,SAASS,CAAG;AAAA,IACnB,GAEMC,IAAW,CAACC,MACTA,EAAO,YAAA,EAAc,QAAQ,OAAO,GAAG;AAGhD,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACY,MAAWV,EAAI,QAAQU;AAAA,MACxB,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,KAAAV;AAAA,MACA,OAAAE;AAAA,MACA,SAAAG;AAAA,MACA,UAAAE;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonTreeMenu.es.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonTreeMenuSectionModel } from '@/common/models/NeonTreeMenuSectionModel';\nimport NeonIcon from '../../presentation/icon/NeonIcon.vue';\nimport NeonLink from '../link/NeonLink.vue';\nimport { useRoute } from 'vue-router';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\n\n/**\n * Three level tree menu. This is useful for displaying a hierarchical navigation in NeonSideNav.The top level of the\n * menu is expandable on click but will not navigate to a page. The second level is links to pages and the third level\n * is the fragments on that page.\n */\nexport default defineComponent({\n  name: 'NeonTreeMenu',\n  components: {\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Id for the tree menu. This is used specifically to namespace the menu icons so that icon paths are unique. A\n     * typical scenario is the tree menu is used in a side nav and also a drawer which means icon ids will be duplicated\n     * unless they're namespaced.\n     */\n    id: { type: String, required: true },\n    /**\n     * The tree model defining the menu.\n     */\n    modelValue: { type: Array as () => Array<NeonTreeMenuSectionModel>, required: true },\n    /**\n     * The menu highlight color (excludes low-contrast and neutral).\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.Brand },\n    /**\n     * Expand all nodes in the tree, this is useful for providing filtering (e.g. the Neon showcase side navigation menu).\n     */\n    expandAll: { type: Boolean, default: false },\n  },\n  emits: [\n    /**\n     * Emitted when the user toggles expansion of a section or item\n     * @type {Array<NeonTreeMenuSectionModel>} the updated model with the section or item expanded/collapsed.\n     */\n    'update:modelValue',\n  ],\n  setup(props, { emit }) {\n    const route = useRoute();\n    const url = ref<string | null>(null);\n\n    const click = ($event: KeyboardEvent) => {\n      const target = $event.target as HTMLSpanElement;\n      if (target.parentElement) {\n        target.parentElement.click();\n      }\n    };\n\n    const onSectionClick = (key: string) => {\n      const newModel = props.modelValue.map((section) => {\n        return {\n          ...section,\n          children: section.children?.map((child) => ({ ...child })),\n          expanded: section.key === key ? !section.expanded : section.expanded,\n        };\n      });\n\n      emit('update:modelValue', newModel);\n    };\n\n    const onItemClick = (key: string) => {\n      const newModel = props.modelValue.map((section) => {\n        return {\n          ...section,\n          children: section.children?.map((child) => {\n            return {\n              ...child,\n              expanded: child.key === key ? !child.expanded : child.expanded,\n            };\n          }),\n        };\n      });\n\n      emit('update:modelValue', newModel);\n    };\n\n    watch(\n      () => route.path,\n      (value) => (url.value = value),\n      { immediate: true },\n    );\n\n    return {\n      url,\n      click,\n      onSectionClick,\n      onItemClick,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonIcon","NeonLink","NeonFunctionalColor","props","emit","route","useRoute","url","ref","click","$event","target","onSectionClick","key","newModel","section","_a","child","onItemClick","watch","value"],"mappings":";;;;;AAYA,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,IAML,IAAI,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI9B,YAAY,EAAE,MAAM,OAAgD,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAI9E,OAAO,EAAE,MAAM,QAAqC,SAASC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIjF,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE7C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,KAAQ;AACrB,UAAMC,IAAQC,EAAA,GACRC,IAAMC,EAAmB,IAAI,GAE7BC,IAAQ,CAACC,MAA0B;AACvC,YAAMC,IAASD,EAAO;AACtB,MAAIC,EAAO,iBACTA,EAAO,cAAc,MAAA;AAAA,IAEzB,GAEMC,IAAiB,CAACC,MAAgB;AACtC,YAAMC,IAAWX,EAAM,WAAW,IAAI,CAACY,MAAY;;AACjD,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,WAAUC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,IAAI,CAACC,OAAW,EAAE,GAAGA,EAAA;AAAA,UACjD,UAAUF,EAAQ,QAAQF,IAAM,CAACE,EAAQ,WAAWA,EAAQ;AAAA,QAAA;AAAA,MAEhE,CAAC;AAED,MAAAX,EAAK,qBAAqBU,CAAQ;AAAA,IACpC,GAEMI,IAAc,CAACL,MAAgB;AACnC,YAAMC,IAAWX,EAAM,WAAW,IAAI,CAACY,MAAY;;AACjD,eAAO;AAAA,UACL,GAAGA;AAAA,UACH,WAAUC,IAAAD,EAAQ,aAAR,gBAAAC,EAAkB,IAAI,CAACC,OACxB;AAAA,YACL,GAAGA;AAAA,YACH,UAAUA,EAAM,QAAQJ,IAAM,CAACI,EAAM,WAAWA,EAAM;AAAA,UAAA;AAAA,QAEzD;AAAA,MAEL,CAAC;AAED,MAAAb,EAAK,qBAAqBU,CAAQ;AAAA,IACpC;AAEA,WAAAK;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,MAAWb,EAAI,QAAQa;AAAA,MACxB,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,KAAAb;AAAA,MACA,OAAAE;AAAA,MACA,gBAAAG;AAAA,MACA,aAAAM;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const i=require("./NeonTreeMenu.cjs.js"),e=require("vue"),d=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),u={class:"no-style"},c=["onKeydown"],m={class:"no-style neon-tree-menu__links"};function k(n,o,y,_,h,f){const s=e.resolveComponent("neon-link");return n.model?(e.openBlock(),e.createElementBlock("nav",{key:0,class:e.normalizeClass([{"neon-tree-menu--expand-all":n.expandAll},"neon-tree-menu"])},[e.createElementVNode("ul",u,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.model,t=>(e.openBlock(),e.createElementBlock("li",{key:t.key,class:e.normalizeClass([{"neon-tree-menu__section--expanded":t.expanded||n.expandAll,"neon-tree-menu__section--disabled":t.disabled},"neon-tree-menu__section"])},[e.createVNode(s,{href:t.href,"no-style":!t.href,class:"neon-tree-menu__section-link","outline-style":"none",tabindex:"-1",onClick:l=>!t.disabled&&n.onClick(t.key)},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",role:"link",tabindex:"0",onKeydown:[e.withKeys(e.withModifiers(l=>!t.disabled&&n.onClick(t.key),["stop","prevent"]),["space"]),e.withKeys(l=>t.href&&n.click(l),["enter"]),e.withKeys(l=>t.href&&n.click(l),["space"])]},e.toDisplayString(t.label),41,c)]),_:2},1032,["href","no-style","onClick"]),e.createElementVNode("ul",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.children,l=>(e.openBlock(),e.createElementBlock("li",{key:l.key,class:"neon-tree-menu__link-item"},[e.createVNode(s,{href:l.href,"no-style":!0,class:"neon-tree-menu__link","outline-style":"none",tabindex:"-1",onClick:r=>n.onClick(l.key)},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__link-label neon-tree-menu__link-label--outline-text",role:"link",tabindex:"0",onKeydown:[o[0]||(o[0]=e.withKeys(r=>n.click(r),["enter"])),o[1]||(o[1]=e.withKeys(e.withModifiers(r=>n.click(r),["prevent"]),["space"]))]},e.toDisplayString(l.label),33)]),_:2},1032,["href","onClick"]),l.anchors&&l.anchors.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass([{"neon-tree-menu__anchors--expanded":n.expandAll||n.url===l.href},"no-style neon-tree-menu__anchors"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.anchors,r=>(e.openBlock(),e.createElementBlock("li",{key:r},[e.createVNode(s,{href:`${l.href}#${n.fragment(r)}`,class:"neon-link--no-style neon-tree-menu__anchor","no-style":"","outline-style":"none",tabindex:"-1"},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text",role:"link",tabindex:"0",onKeydown:[o[2]||(o[2]=e.withKeys(e.withModifiers(a=>n.click(a),["prevent"]),["space"])),o[3]||(o[3]=e.withKeys(e.withModifiers(a=>n.click(a),["prevent"]),["enter"]))]},e.toDisplayString(r),33)]),_:2},1032,["href"])]))),128))],2)):e.createCommentVNode("",!0)]))),128))])],2))),128))])],2)):e.createCommentVNode("",!0)}const p=d(i,[["render",k]]);module.exports=p;
+"use strict";const u=require("./NeonTreeMenu.cjs.js"),e=require("vue"),d=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),m=["id"],c={class:"no-style"},k=["tabindex","onKeydown"],p={class:"no-style neon-tree-menu__items"},_=["onKeydown"];function y(t,r,b,f,B,C){const a=e.resolveComponent("neon-icon"),i=e.resolveComponent("neon-link");return t.modelValue?(e.openBlock(),e.createElementBlock("nav",{key:0,id:t.id,class:e.normalizeClass([[`neon-tree-menu--${t.color}`,{"neon-tree-menu--expand-all":t.expandAll}],"neon-tree-menu"])},[e.createElementVNode("ul",c,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.modelValue,n=>(e.openBlock(),e.createElementBlock("li",{key:n.key,class:e.normalizeClass([{"neon-tree-menu__section--expanded":n.expanded||t.expandAll,"neon-tree-menu__section--disabled":n.disabled},"neon-tree-menu__section"])},[e.createVNode(i,{href:n.href,"no-style":!n.href,class:"neon-tree-menu__section-link","outline-style":"none",tabindex:"-1",onClick:l=>!n.disabled&&t.onSectionClick(n.key)},{default:e.withCtx(()=>[n.icon?(e.openBlock(),e.createBlock(a,{key:0,id:t.id+"_"+n.key,name:n.icon,class:"neon-tree-menu__section-link-icon"},null,8,["id","name"])):e.createCommentVNode("",!0),e.createElementVNode("span",{tabindex:n.disabled?-1:0,class:"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text",role:"link",onKeydown:[e.withKeys(e.withModifiers(l=>!n.disabled&&t.onSectionClick(n.key),["stop","prevent"]),["space"]),e.withKeys(l=>n.href&&t.click(l),["enter"]),e.withKeys(l=>n.href&&t.click(l),["space"])]},e.toDisplayString(n.label),41,k),n.children&&n.children.length!==0?(e.openBlock(),e.createBlock(a,{key:1,class:"neon-tree-menu__section-link-expansion-icon",name:"chevron-right"})):e.createCommentVNode("",!0)]),_:2},1032,["href","no-style","onClick"]),e.createElementVNode("ul",p,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.children,l=>(e.openBlock(),e.createElementBlock("li",{key:l.key,class:"neon-tree-menu__item"},[e.createVNode(i,{href:l.href,"no-style":!0,class:"neon-tree-menu__item-link","outline-style":"none",tabindex:"-1",onClick:o=>t.onItemClick(l.key)},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text",role:"link",tabindex:"0",onKeydown:[r[0]||(r[0]=e.withKeys(o=>t.click(o),["enter"])),e.withKeys(e.withModifiers(o=>t.onItemClick(l.key),["prevent"]),["space"])]},e.toDisplayString(l.label),41,_)]),_:2},1032,["href","onClick"]),l.subMenu&&l.subMenu.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass([{"neon-tree-menu__sub-menu--expanded":t.expandAll||l.expanded},"no-style neon-tree-menu__sub-menu"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.subMenu,o=>(e.openBlock(),e.createElementBlock("li",{key:o.href,class:"neon-tree-menu__sub-menu-item"},[e.createVNode(i,{href:o.href,class:"neon-link--no-style neon-tree-menu__sub-menu-item-link","no-style":"","outline-style":"none",tabindex:"-1"},{default:e.withCtx(()=>[e.createElementVNode("span",{class:"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text",role:"link",tabindex:"0",onKeydown:[r[1]||(r[1]=e.withKeys(e.withModifiers(s=>t.click(s),["prevent"]),["space"])),r[2]||(r[2]=e.withKeys(e.withModifiers(s=>t.click(s),["prevent"]),["enter"]))]},e.toDisplayString(o.label),33)]),_:2},1032,["href"])]))),128))],2)):e.createCommentVNode("",!0)]))),128))])],2))),128))])],10,m)):e.createCommentVNode("",!0)}const h=d(u,[["render",y]]);module.exports=h;
 //# sourceMappingURL=NeonTreeMenu.vue.cjs.js.map

package/dist/components/navigation/tree-menu/NeonTreeMenu.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonTreeMenu.vue.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.vue"],"sourcesContent":["<template>\n  <nav v-if=\"model\" :class=\"{ 'neon-tree-menu--expand-all': expandAll }\" class=\"neon-tree-menu\">\n    <ul class=\"no-style\">\n      <li\n        v-for=\"section in model\"\n        :key=\"section.key\"\n        :class=\"{\n          'neon-tree-menu__section--expanded': section.expanded || expandAll,\n          'neon-tree-menu__section--disabled': section.disabled,\n        }\"\n        class=\"neon-tree-menu__section\"\n      >\n        <neon-link\n          :href=\"section.href\"\n          :no-style=\"!section.href\"\n          class=\"neon-tree-menu__section-link\"\n          outline-style=\"none\"\n          tabindex=\"-1\"\n          @click=\"!section.disabled && onClick(section.key)\"\n        >\n          <span\n            class=\"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text\"\n            role=\"link\"\n            tabindex=\"0\"\n            @keydown.space.stop.prevent=\"!section.disabled && onClick(section.key)\"\n            @keydown.enter=\"section.href && click($event)\"\n            @keydown.space=\"section.href && click($event)\"\n          >\n            {{ section.label }}\n          </span>\n        </neon-link>\n        <ul class=\"no-style neon-tree-menu__links\">\n          <li v-for=\"link in section.children\" :key=\"link.key\" class=\"neon-tree-menu__link-item\">\n            <neon-link\n              :href=\"link.href\"\n              :no-style=\"true\"\n              class=\"neon-tree-menu__link\"\n              outline-style=\"none\"\n              tabindex=\"-1\"\n              @click=\"onClick(link.key)\"\n            >\n              <span\n                class=\"neon-tree-menu__link-label neon-tree-menu__link-label--outline-text\"\n                role=\"link\"\n                tabindex=\"0\"\n                @keydown.enter=\"click($event)\"\n                @keydown.space.prevent=\"click($event)\"\n              >\n                {{ link.label }}\n              </span>\n            </neon-link>\n            <ul\n              v-if=\"link.anchors && link.anchors.length > 0\"\n              :class=\"{ 'neon-tree-menu__anchors--expanded': expandAll || url === link.href }\"\n              class=\"no-style neon-tree-menu__anchors\"\n            >\n              <li v-for=\"anchor in link.anchors\" :key=\"anchor\">\n                <neon-link\n                  :href=\"`${link.href}#${fragment(anchor)}`\"\n                  class=\"neon-link--no-style neon-tree-menu__anchor\"\n                  no-style\n                  outline-style=\"none\"\n                  tabindex=\"-1\"\n                >\n                  <span\n                    class=\"neon-tree-menu__anchor-label neon-tree-menu__anchor-label--outline-text\"\n                    role=\"link\"\n                    tabindex=\"0\"\n                    @keydown.space.prevent=\"click($event)\"\n                    @keydown.enter.prevent=\"click($event)\"\n                  >\n                    {{ anchor }}\n                  </span>\n                </neon-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTreeMenu.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_3","_ctx","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","section","_createVNode","_component_neon_link","$event","_withKeys","_withModifiers","_toDisplayString","_hoisted_2","_openBlock","link","_cache","anchor"],"mappings":"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"}
+{"version":3,"file":"NeonTreeMenu.vue.cjs.js","sources":["../../../../src/components/navigation/tree-menu/NeonTreeMenu.vue"],"sourcesContent":["<template>\n  <nav\n    v-if=\"modelValue\"\n    :id=\"id\"\n    :class=\"[`neon-tree-menu--${color}`, { 'neon-tree-menu--expand-all': expandAll }]\"\n    class=\"neon-tree-menu\"\n  >\n    <ul class=\"no-style\">\n      <li\n        v-for=\"section in modelValue\"\n        :key=\"section.key\"\n        :class=\"{\n          'neon-tree-menu__section--expanded': section.expanded || expandAll,\n          'neon-tree-menu__section--disabled': section.disabled,\n        }\"\n        class=\"neon-tree-menu__section\"\n      >\n        <neon-link\n          :href=\"section.href\"\n          :no-style=\"!section.href\"\n          class=\"neon-tree-menu__section-link\"\n          outline-style=\"none\"\n          tabindex=\"-1\"\n          @click=\"!section.disabled && onSectionClick(section.key)\"\n        >\n          <neon-icon\n            v-if=\"section.icon\"\n            :id=\"id + '_' + section.key\"\n            :name=\"section.icon\"\n            class=\"neon-tree-menu__section-link-icon\"\n          />\n          <span\n            :tabindex=\"section.disabled ? -1 : 0\"\n            class=\"neon-tree-menu__section-link-label neon-tree-menu__section-link-label--outline-text\"\n            role=\"link\"\n            @keydown.space.stop.prevent=\"!section.disabled && onSectionClick(section.key)\"\n            @keydown.enter=\"section.href && click($event)\"\n            @keydown.space=\"section.href && click($event)\"\n          >\n            {{ section.label }}\n          </span>\n          <neon-icon\n            v-if=\"section.children && section.children.length !== 0\"\n            class=\"neon-tree-menu__section-link-expansion-icon\"\n            name=\"chevron-right\"\n          />\n        </neon-link>\n        <ul class=\"no-style neon-tree-menu__items\">\n          <li v-for=\"link in section.children\" :key=\"link.key\" class=\"neon-tree-menu__item\">\n            <neon-link\n              :href=\"link.href\"\n              :no-style=\"true\"\n              class=\"neon-tree-menu__item-link\"\n              outline-style=\"none\"\n              tabindex=\"-1\"\n              @click=\"onItemClick(link.key)\"\n            >\n              <span\n                class=\"neon-tree-menu__item-link-label neon-tree-menu__item-link-label--outline-text\"\n                role=\"link\"\n                tabindex=\"0\"\n                @keydown.enter=\"click($event)\"\n                @keydown.space.prevent=\"onItemClick(link.key)\"\n              >\n                {{ link.label }}\n              </span>\n            </neon-link>\n            <ul\n              v-if=\"link.subMenu && link.subMenu.length > 0\"\n              :class=\"{ 'neon-tree-menu__sub-menu--expanded': expandAll || link.expanded }\"\n              class=\"no-style neon-tree-menu__sub-menu\"\n            >\n              <li v-for=\"subMenu in link.subMenu\" :key=\"subMenu.href\" class=\"neon-tree-menu__sub-menu-item\">\n                <neon-link\n                  :href=\"subMenu.href\"\n                  class=\"neon-link--no-style neon-tree-menu__sub-menu-item-link\"\n                  no-style\n                  outline-style=\"none\"\n                  tabindex=\"-1\"\n                >\n                  <span\n                    class=\"neon-tree-menu__sub-menu-item-link-label neon-tree-menu__sub-menu-item-link-label--outline-text\"\n                    role=\"link\"\n                    tabindex=\"0\"\n                    @keydown.space.prevent=\"click($event)\"\n                    @keydown.enter.prevent=\"click($event)\"\n                  >\n                    {{ subMenu.label }}\n                  </span>\n                </neon-link>\n              </li>\n            </ul>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </nav>\n</template>\n\n<script lang=\"ts\" src=\"./NeonTreeMenu.ts\"></script>\n"],"names":["_hoisted_2","_hoisted_4","_ctx","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","section","_createVNode","_component_neon_link","$event","_createBlock","_component_neon_icon","_withKeys","_withModifiers","_toDisplayString","_hoisted_3","_openBlock","link","_cache","_hoisted_5","subMenu"],"mappings":"gJAOQA,EAAA,CAAA,MAAM,UAAU,6BAwCZC,EAAA,CAAA,MAAM,gCAAgC,2HA7CxCC,EAAA,0BADRC,EAAAA,mBA+FM,MAAA,OA7FH,GAAID,EAAA,GACJ,MAAKE,EAAAA,eAAA,CAAA,CAAA,mBAAsBF,EAAA,KAAK,GAAA,CAAA,6BAAoCA,EAAA,SAAS,GACxE,gBAAgB,CAAA,IAEtBG,EAAAA,mBAwFK,KAxFLL,EAwFK,kBAvFHG,EAAAA,mBAsFKG,EAAAA,SAAA,KAAAC,EAAAA,WArFeL,EAAA,WAAXM,kBADTL,EAAAA,mBAsFK,KAAA,CApFF,IAAKK,EAAQ,IACb,MAAKJ,EAAAA,eAAA,CAAA,qCAAmDI,EAAQ,UAAYN,EAAA,UAA0D,oCAAAM,EAAQ,UAIzI,yBAAyB,CAAA,IAE/BC,EAAAA,YA6BYC,EAAA,CA5BT,KAAMF,EAAQ,KACd,WAAQ,CAAGA,EAAQ,KACpB,MAAM,+BACN,gBAAc,OACd,SAAS,KACR,QAAKG,GAAA,CAAGH,EAAQ,UAAYN,EAAA,eAAeM,EAAQ,GAAG,sBAEvD,IAKE,CAJMA,EAAQ,oBADhBI,EAAAA,YAKEC,EAAA,OAHC,GAAIX,EAAA,GAAE,IAASM,EAAQ,IACvB,KAAMA,EAAQ,KACf,MAAM,wFAERH,EAAAA,mBASO,OAAA,CARJ,SAAUG,EAAQ,SAAQ,GAAA,EAC3B,MAAM,sFACN,KAAK,OACJ,UAAO,CAAsBM,EAAAA,SAAAC,EAAAA,cAAAJ,GAAA,CAAAH,EAAQ,UAAYN,iBAAeM,EAAQ,GAAG,EAAA,CAAA,OAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAC5DM,WAAAH,GAAAH,EAAQ,MAAQN,EAAA,MAAMS,CAAM,EAAA,CAAA,OAAA,CAAA,EAC5BG,WAAAH,GAAAH,EAAQ,MAAQN,EAAA,MAAMS,CAAM,EAAA,CAAA,OAAA,CAAA,EAEzC,EAAAK,EAAAA,gBAAAR,EAAQ,KAAK,EAAA,GAAAS,CAAA,EAGVT,EAAQ,UAAYA,EAAQ,SAAS,SAAM,iBADnDI,EAAAA,YAIEC,EAAA,OAFA,MAAM,8CACN,KAAK,0FAGTR,EAAAA,mBA8CK,KA9CLJ,EA8CK,EA7CHiB,YAAA,EAAA,EAAAf,EAAAA,mBA4CKG,EAAAA,SAAA,KAAAC,EAAAA,WA5CcC,EAAQ,SAAhBW,kBAAXhB,EAAAA,mBA4CK,KAAA,CA5CiC,IAAKgB,EAAK,IAAK,MAAM,yBACzDV,EAAAA,YAiBYC,EAAA,CAhBT,KAAMS,EAAK,KACX,WAAU,GACX,MAAM,4BACN,gBAAc,OACd,SAAS,KACR,QAAKR,GAAET,EAAA,YAAYiB,EAAK,GAAG,sBAE5B,IAQO,CARPd,EAAAA,mBAQO,OAAA,CAPL,MAAM,gFACN,KAAK,OACL,SAAS,IACR,UAAO,CAAQe,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAH,GAAAT,EAAA,MAAMS,CAAM,EAAA,CAAA,OAAA,CAAA,iCACJT,EAAA,YAAYiB,EAAK,GAAG,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,EAEzC,EAAAH,EAAAA,gBAAAG,EAAK,KAAK,EAAA,GAAAE,CAAA,kCAITF,EAAK,SAAWA,EAAK,QAAQ,OAAM,iBAD3ChB,EAAAA,mBAwBK,KAAA,OAtBF,8DAA+CD,EAAA,WAAaiB,EAAK,QAAQ,EACpE,mCAAmC,CAAA,KAEzCD,YAAA,EAAA,EAAAf,EAAAA,mBAkBKG,EAAAA,SAAA,KAAAC,EAAAA,WAlBiBY,EAAK,QAAhBG,kBAAXnB,EAAAA,mBAkBK,KAAA,CAlBgC,IAAKmB,EAAQ,KAAM,MAAM,kCAC5Db,EAAAA,YAgBYC,EAAA,CAfT,KAAMY,EAAQ,KACf,MAAM,yDACN,WAAA,GACA,gBAAc,OACd,SAAS,yBAET,IAQO,CARPjB,EAAAA,mBAQO,OAAA,CAPL,MAAM,kGACN,KAAK,OACL,SAAS,IACR,UAAO,CAAgBe,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAC,EAAAA,cAAAJ,GAAAT,EAAA,MAAMS,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GACZS,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAN,EAAAA,SAAAC,EAAAA,cAAAJ,GAAAT,EAAA,MAAMS,CAAM,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,OAAA,CAAA,GAEjC,EAAAK,kBAAAM,EAAQ,KAAK,EAAA,EAAA"}