@aotearoan/neon 28.4.0 → 28.4.1

package/dist/components/layout/card-list/NeonCardList.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const o=require("vue"),s=require("../../user-input/button/NeonButton.vue.cjs.js"),d=require("../inline/NeonInline.vue.cjs.js"),m=require("../../navigation/link/NeonLink.vue.cjs.js"),N=require("../../navigation/pagination/NeonPagination.vue.cjs.js"),f=require("../stack/NeonStack.vue.cjs.js"),b=require("../../../model/user-input/button/NeonButtonStyle.cjs.js"),q=require("../../../model/common/size/NeonSize.cjs.js"),S=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),g=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),y=require("./selectable-card/NeonSelectableCard.vue.cjs.js"),O=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),L=o.defineComponent({name:"NeonCardList",components:{NeonSelectableCard:y,NeonPagination:N,NeonButton:s,NeonInline:d,NeonLink:m,NeonSplashLoader:O,NeonStack:f},props:{items:{type:Array,required:!0},color:{type:String,default:null},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object},loading:{type:Boolean}},emits:["show-more","toggle-selected"],setup(e,{emit:r,slots:a}){const i=o.computed(()=>{if(!e.pagination&&e.loadOnDemand)return e.loadOnDemand.ofLabel??"of"}),l=o.computed(()=>{var n;if(!e.pagination)return((n=e.loadOnDemand)==null?void 0:n.showMoreLabel)??"Show more"}),u=o.computed(()=>{var n;if(!e.pagination)return((n=e.loadOnDemand)==null?void 0:n.endOfResultsLabel)??"End of results"}),c=o.computed(()=>{var n,t;return((n=e.loadOnDemand)==null?void 0:n.total)??((t=e.pagination)==null?void 0:t.total)??0});return{emit:r,n:g.NeonNumberUtils.formatNumber,NeonButtonStyle:b.NeonButtonStyle,NeonFunctionalColor:S.NeonFunctionalColor,NeonSize:q.NeonSize,ofLabel:i,showMoreLabel:l,endOfResultsLabel:u,total:c,slots:a}}});module.exports=L;
+"use strict";const o=require("vue"),s=require("../../user-input/button/NeonButton.vue.cjs.js"),d=require("../inline/NeonInline.vue.cjs.js"),m=require("../../navigation/link/NeonLink.vue.cjs.js"),N=require("../../navigation/pagination/NeonPagination.vue.cjs.js"),f=require("../stack/NeonStack.vue.cjs.js"),b=require("../../../model/user-input/button/NeonButtonStyle.cjs.js"),q=require("../../../model/common/size/NeonSize.cjs.js"),g=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),S=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),y=require("./selectable-card/NeonSelectableCard.vue.cjs.js"),O=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),L=o.defineComponent({name:"NeonCardList",components:{NeonSelectableCard:y,NeonPagination:N,NeonButton:s,NeonInline:d,NeonLink:m,NeonSplashLoader:O,NeonStack:f},props:{items:{type:Array,required:!0},color:{type:String,default:null},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object},loading:{type:Boolean}},emits:["page-change","show-more","toggle-selected"],setup(e,{emit:a,slots:r}){const i=o.computed(()=>{if(!e.pagination&&e.loadOnDemand)return e.loadOnDemand.ofLabel??"of"}),l=o.computed(()=>{var n;if(!e.pagination)return((n=e.loadOnDemand)==null?void 0:n.showMoreLabel)??"Show more"}),u=o.computed(()=>{var n;if(!e.pagination)return((n=e.loadOnDemand)==null?void 0:n.endOfResultsLabel)??"End of results"}),c=o.computed(()=>{var n,t;return((n=e.loadOnDemand)==null?void 0:n.total)??((t=e.pagination)==null?void 0:t.total)??0});return{emit:a,n:S.NeonNumberUtils.formatNumber,NeonButtonStyle:b.NeonButtonStyle,NeonFunctionalColor:g.NeonFunctionalColor,NeonSize:q.NeonSize,ofLabel:i,showMoreLabel:l,endOfResultsLabel:u,total:c,slots:r}}});module.exports=L;
 //# sourceMappingURL=NeonCardList.cjs.js.map

package/dist/components/layout/card-list/NeonCardList.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonCardList.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonSelectableCard from './selectable-card/NeonSelectableCard.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * TODO: consider refactoring since it's no longer just a layout component when selectable.\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n  name: 'NeonCardList',\n  components: {\n    NeonSelectableCard,\n    NeonPagination,\n    NeonButton,\n    NeonInline,\n    NeonLink,\n    NeonSplashLoader,\n    NeonStack,\n  },\n  props: {\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * * Specify a selection, hover & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on-demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n    /**\n     * Show splash loader when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const ofLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        return props.loadOnDemand.ofLabel ?? 'of';\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Show more';\n      }\n\n      return undefined;\n    });\n\n    const endOfResultsLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.endOfResultsLabel ?? 'End of results';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      ofLabel,\n      showMoreLabel,\n      endOfResultsLabel,\n      total,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonSplashLoader","NeonStack","props","emit","slots","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","NeonNumberUtils","NeonButtonStyle","NeonFunctionalColor","NeonSize"],"mappings":"srBAyBAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,EAIpB,QAAS,CAAE,KAAM,OAAA,CAAQ,EAE3B,MAAO,CAKL,YAKA,iBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAUC,EAAAA,SAAS,IAAM,CAC7B,GAAI,CAACJ,EAAM,YAAcA,EAAM,aAC7B,OAAOA,EAAM,aAAa,SAAW,IAIzC,CAAC,EAEKK,EAAgBD,EAAAA,SAAS,IAAM,OACnC,GAAI,CAACJ,EAAM,WACT,QAAOM,EAAAN,EAAM,eAAN,YAAAM,EAAoB,gBAAiB,WAIhD,CAAC,EAEKC,EAAoBH,EAAAA,SAAS,IAAM,OACvC,GAAI,CAACJ,EAAM,WACT,QAAOM,EAAAN,EAAM,eAAN,YAAAM,EAAoB,oBAAqB,gBAIpD,CAAC,EAEKE,EAAQJ,WAAS,IAAA,SAAM,QAAAE,EAAAN,EAAM,eAAN,YAAAM,EAAoB,UAASG,EAAAT,EAAM,aAAN,YAAAS,EAAkB,QAAS,EAAC,EAEtF,MAAO,CACL,KAAAR,EACA,EAAGS,EAAAA,gBAAgB,aAAA,gBACnBC,EAAAA,gBAAA,oBACAC,EAAAA,oBAAA,SACAC,EAAAA,SACA,QAAAV,EACA,cAAAE,EACA,kBAAAE,EACA,MAAAC,EACA,MAAAN,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonCardList.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonSelectableCard from './selectable-card/NeonSelectableCard.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * TODO: consider refactoring since it's no longer just a layout component when selectable.\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n  name: 'NeonCardList',\n  components: {\n    NeonSelectableCard,\n    NeonPagination,\n    NeonButton,\n    NeonInline,\n    NeonLink,\n    NeonSplashLoader,\n    NeonStack,\n  },\n  props: {\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * * Specify a selection, hover & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on-demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n    /**\n     * Show splash loader when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not\n     * the main focus of the page, i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const ofLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        return props.loadOnDemand.ofLabel ?? 'of';\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Show more';\n      }\n\n      return undefined;\n    });\n\n    const endOfResultsLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.endOfResultsLabel ?? 'End of results';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      ofLabel,\n      showMoreLabel,\n      endOfResultsLabel,\n      total,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonSplashLoader","NeonStack","props","emit","slots","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","NeonNumberUtils","NeonButtonStyle","NeonFunctionalColor","NeonSize"],"mappings":"srBAyBAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,UAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,EAIpB,QAAS,CAAE,KAAM,OAAA,CAAQ,EAE3B,MAAO,CAOL,cAKA,YAKA,iBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAUC,EAAAA,SAAS,IAAM,CAC7B,GAAI,CAACJ,EAAM,YAAcA,EAAM,aAC7B,OAAOA,EAAM,aAAa,SAAW,IAIzC,CAAC,EAEKK,EAAgBD,EAAAA,SAAS,IAAM,OACnC,GAAI,CAACJ,EAAM,WACT,QAAOM,EAAAN,EAAM,eAAN,YAAAM,EAAoB,gBAAiB,WAIhD,CAAC,EAEKC,EAAoBH,EAAAA,SAAS,IAAM,OACvC,GAAI,CAACJ,EAAM,WACT,QAAOM,EAAAN,EAAM,eAAN,YAAAM,EAAoB,oBAAqB,gBAIpD,CAAC,EAEKE,EAAQJ,WAAS,IAAA,SAAM,QAAAE,EAAAN,EAAM,eAAN,YAAAM,EAAoB,UAASG,EAAAT,EAAM,aAAN,YAAAS,EAAkB,QAAS,EAAC,EAEtF,MAAO,CACL,KAAAR,EACA,EAAGS,EAAAA,gBAAgB,aAAA,gBACnBC,EAAAA,gBAAA,oBACAC,EAAAA,oBAAA,SACAC,EAAAA,SACA,QAAAV,EACA,cAAAE,EACA,kBAAAE,EACA,MAAAC,EACA,MAAAN,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/card-list/NeonCardList.es.js

@@ -51,6 +51,13 @@ const x = f({
     loading: { type: Boolean }
   },
   emits: [
+    /**
+     * Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not
+     * the main focus of the page, i.e. should not be deep linked).
+     *
+     * @type {number} The new page number.
+     */
+    "page-change",
     /**
      * Emitted when the 'Show more' button is clicked in "on demand" mode.
      * @type {void}
@@ -62,21 +69,21 @@ const x = f({
      */
     "toggle-selected"
   ],
-  setup(o, { emit: a, slots: r }) {
+  setup(e, { emit: a, slots: r }) {
     const i = t(() => {
-      if (!o.pagination && o.loadOnDemand)
-        return o.loadOnDemand.ofLabel ?? "of";
+      if (!e.pagination && e.loadOnDemand)
+        return e.loadOnDemand.ofLabel ?? "of";
     }), m = t(() => {
-      var e;
-      if (!o.pagination)
-        return ((e = o.loadOnDemand) == null ? void 0 : e.showMoreLabel) ?? "Show more";
+      var o;
+      if (!e.pagination)
+        return ((o = e.loadOnDemand) == null ? void 0 : o.showMoreLabel) ?? "Show more";
     }), l = t(() => {
-      var e;
-      if (!o.pagination)
-        return ((e = o.loadOnDemand) == null ? void 0 : e.endOfResultsLabel) ?? "End of results";
+      var o;
+      if (!e.pagination)
+        return ((o = e.loadOnDemand) == null ? void 0 : o.endOfResultsLabel) ?? "End of results";
     }), d = t(() => {
-      var e, n;
-      return ((e = o.loadOnDemand) == null ? void 0 : e.total) ?? ((n = o.pagination) == null ? void 0 : n.total) ?? 0;
+      var o, n;
+      return ((o = e.loadOnDemand) == null ? void 0 : o.total) ?? ((n = e.pagination) == null ? void 0 : n.total) ?? 0;
     });
     return {
       emit: a,

package/dist/components/layout/card-list/NeonCardList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonCardList.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonSelectableCard from './selectable-card/NeonSelectableCard.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * TODO: consider refactoring since it's no longer just a layout component when selectable.\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n  name: 'NeonCardList',\n  components: {\n    NeonSelectableCard,\n    NeonPagination,\n    NeonButton,\n    NeonInline,\n    NeonLink,\n    NeonSplashLoader,\n    NeonStack,\n  },\n  props: {\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * * Specify a selection, hover & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on-demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n    /**\n     * Show splash loader when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const ofLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        return props.loadOnDemand.ofLabel ?? 'of';\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Show more';\n      }\n\n      return undefined;\n    });\n\n    const endOfResultsLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.endOfResultsLabel ?? 'End of results';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      ofLabel,\n      showMoreLabel,\n      endOfResultsLabel,\n      total,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonSplashLoader","NeonStack","props","emit","slots","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","NeonNumberUtils","NeonButtonStyle","NeonFunctionalColor","NeonSize"],"mappings":";;;;;;;;;;;;AAyBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,OAAO,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,cAAc,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAItB,YAAY,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpB,SAAS,EAAE,MAAM,QAAA;AAAA,EAAQ;AAAA,EAE3B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAUC,EAAS,MAAM;AAC7B,UAAI,CAACJ,EAAM,cAAcA,EAAM;AAC7B,eAAOA,EAAM,aAAa,WAAW;AAAA,IAIzC,CAAC,GAEKK,IAAgBD,EAAS,MAAM;;AACnC,UAAI,CAACJ,EAAM;AACT,iBAAOM,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,kBAAiB;AAAA,IAIhD,CAAC,GAEKC,IAAoBH,EAAS,MAAM;;AACvC,UAAI,CAACJ,EAAM;AACT,iBAAOM,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,sBAAqB;AAAA,IAIpD,CAAC,GAEKE,IAAQJ,EAAS,MAAA;;AAAM,eAAAE,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,YAASG,IAAAT,EAAM,eAAN,gBAAAS,EAAkB,UAAS;AAAA,KAAC;AAEtF,WAAO;AAAA,MACL,MAAAR;AAAA,MACA,GAAGS,EAAgB;AAAA,MACnB,iBAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAAV;AAAA,MACA,eAAAE;AAAA,MACA,mBAAAE;AAAA,MACA,OAAAC;AAAA,MACA,OAAAN;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonCardList.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent } from 'vue';\nimport NeonButton from '@/components/user-input/button/NeonButton.vue';\nimport NeonInline from '@/components/layout/inline/NeonInline.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonPagination from '@/components/navigation/pagination/NeonPagination.vue';\nimport NeonStack from '@/components/layout/stack/NeonStack.vue';\nimport { NeonButtonStyle } from '@/model/user-input/button/NeonButtonStyle';\nimport { NeonSize } from '@/model/common/size/NeonSize';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport { NeonNumberUtils } from '@/utils/common/number/NeonNumberUtils';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonSelectableCard from './selectable-card/NeonSelectableCard.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * TODO: consider refactoring since it's no longer just a layout component when selectable.\n * Represent lists of objects as cards. This is intended to be a more responsive replacement for tables. This component\n * will display a list of items as cards with a count (x of y) and a <em>Show more</em> button to load more results.\n * There is also a slot for adding filtering or other content above the list. A slot is provided with card model & index\n * parameters for customising how to display the model for each card.\n */\nexport default defineComponent({\n  name: 'NeonCardList',\n  components: {\n    NeonSelectableCard,\n    NeonPagination,\n    NeonButton,\n    NeonInline,\n    NeonLink,\n    NeonSplashLoader,\n    NeonStack,\n  },\n  props: {\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * * Specify a selection, hover & pagination accent color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on-demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n    /**\n     * Show splash loader when loading new items.\n     */\n    loading: { type: Boolean },\n  },\n  emits: [\n    /**\n     * Emitted when pagination is enabled and the user clicks on a page link (useful for paginated lists which are not\n     * the main focus of the page, i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const ofLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        return props.loadOnDemand.ofLabel ?? 'of';\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Show more';\n      }\n\n      return undefined;\n    });\n\n    const endOfResultsLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.endOfResultsLabel ?? 'End of results';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      ofLabel,\n      showMoreLabel,\n      endOfResultsLabel,\n      total,\n      slots,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonSplashLoader","NeonStack","props","emit","slots","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","NeonNumberUtils","NeonButtonStyle","NeonFunctionalColor","NeonSize"],"mappings":";;;;;;;;;;;;AAyBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,OAAO,EAAE,MAAM,QAAqC,SAAS,KAAA;AAAA;AAAA;AAAA;AAAA,IAI7D,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,cAAc,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAItB,YAAY,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpB,SAAS,EAAE,MAAM,QAAA;AAAA,EAAQ;AAAA,EAE3B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAUC,EAAS,MAAM;AAC7B,UAAI,CAACJ,EAAM,cAAcA,EAAM;AAC7B,eAAOA,EAAM,aAAa,WAAW;AAAA,IAIzC,CAAC,GAEKK,IAAgBD,EAAS,MAAM;;AACnC,UAAI,CAACJ,EAAM;AACT,iBAAOM,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,kBAAiB;AAAA,IAIhD,CAAC,GAEKC,IAAoBH,EAAS,MAAM;;AACvC,UAAI,CAACJ,EAAM;AACT,iBAAOM,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,sBAAqB;AAAA,IAIpD,CAAC,GAEKE,IAAQJ,EAAS,MAAA;;AAAM,eAAAE,IAAAN,EAAM,iBAAN,gBAAAM,EAAoB,YAASG,IAAAT,EAAM,eAAN,gBAAAS,EAAkB,UAAS;AAAA,KAAC;AAEtF,WAAO;AAAA,MACL,MAAAR;AAAA,MACA,GAAGS,EAAgB;AAAA,MACnB,iBAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAAV;AAAA,MACA,eAAAE;AAAA,MACA,mBAAAE;AAAA,MACA,OAAAC;AAAA,MACA,OAAAN;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/layout/card-list/NeonCardList.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("./NeonCardList.cjs.js"),e=require("vue"),k=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),_={class:"neon-card-list"},g={key:0,class:"neon-card-list__total"},B={class:"neon-card-list__card"},b={key:0,class:"neon-card-list__results-end"};function y(o,a,f,h,v,S){const t=e.resolveComponent("neon-inline"),s=e.resolveComponent("neon-link"),r=e.resolveComponent("neon-selectable-card"),d=e.resolveComponent("neon-splash-loader"),c=e.resolveComponent("neon-stack"),i=e.resolveComponent("neon-button"),p=e.resolveComponent("neon-pagination");return e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(o.$slots,"filters"),o.slots.header||o.loadOnDemand?(e.openBlock(),e.createBlock(t,{key:0,class:"neon-card-list__header"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"header"),o.loadOnDemand?(e.openBlock(),e.createElementBlock("span",g,e.toDisplayString(o.n(o.items.length))+" "+e.toDisplayString(o.ofLabel)+" "+e.toDisplayString(o.n(o.total)),1)):e.createCommentVNode("",!0)]),_:3})):e.createCommentVNode("",!0),e.createVNode(c,{class:"neon-card-list__cards",gap:"z"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(n,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.href&&!n.disabled?(e.openBlock(),e.createBlock(s,{key:`${n.model.id??l}-link`,class:e.normalizeClass([o.color&&`neon-card-list__link--${o.color}`,"neon-card-list__link"]),href:n.href,"no-style":"","outline-style":"background"},{default:e.withCtx(()=>[e.createElementVNode("div",B,[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))])]),_:2},1032,["class","href"])):o.selectable?(e.openBlock(),e.createBlock(r,{key:`${n.model.id??l}-selectable`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled,"neon-card-list__card--selected":n.selected},"neon-card-list__card neon-card-list__card--selectable"]),disabled:n.disabled,"model-value":!!n.selected,"onUpdate:modelValue":m=>o.emit("toggle-selected",n.model.id,m)},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1032,["class","disabled","model-value","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("div",{key:`${n.model.id??l}-link`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled},"neon-card-list__card"])},[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))],2))],64))),256)),o.loading?(e.openBlock(),e.createBlock(d,{key:0,color:o.color},null,8,["color"])):e.createCommentVNode("",!0)]),_:3}),o.loadOnDemand?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.items.length===o.total?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(o.endOfResultsLabel),1)):(e.openBlock(),e.createBlock(i,{key:1,"button-style":o.NeonButtonStyle.Text,color:o.NeonFunctionalColor.Neutral,label:o.showMoreLabel,size:o.NeonSize.Small,class:"neon-card-list__show-more",onClick:a[0]||(a[0]=n=>o.emit("show-more",n))},null,8,["button-style","color","label","size"]))],64)):o.pagination?(e.openBlock(),e.createBlock(p,{key:2,color:o.color,"display-first-and-last":o.pagination.displayFirstAndLast,page:o.pagination.page,"page-size":o.pagination.pageSize,total:o.pagination.total,"url-template":o.pagination.urlTemplate},null,8,["color","display-first-and-last","page","page-size","total","url-template"])):e.createCommentVNode("",!0)])}const C=k(u,[["render",y]]);module.exports=C;
+"use strict";const u=require("./NeonCardList.cjs.js"),e=require("vue"),k=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),_={class:"neon-card-list"},g={key:0,class:"neon-card-list__total"},B={class:"neon-card-list__card"},b={key:0,class:"neon-card-list__results-end"};function y(o,a,f,h,v,S){const t=e.resolveComponent("neon-inline"),s=e.resolveComponent("neon-link"),r=e.resolveComponent("neon-selectable-card"),d=e.resolveComponent("neon-splash-loader"),c=e.resolveComponent("neon-stack"),i=e.resolveComponent("neon-button"),p=e.resolveComponent("neon-pagination");return e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(o.$slots,"filters"),o.slots.header||o.loadOnDemand?(e.openBlock(),e.createBlock(t,{key:0,class:"neon-card-list__header"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"header"),o.loadOnDemand?(e.openBlock(),e.createElementBlock("span",g,e.toDisplayString(o.n(o.items.length))+" "+e.toDisplayString(o.ofLabel)+" "+e.toDisplayString(o.n(o.total)),1)):e.createCommentVNode("",!0)]),_:3})):e.createCommentVNode("",!0),e.createVNode(c,{class:"neon-card-list__cards",gap:"z"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(n,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.href&&!n.disabled?(e.openBlock(),e.createBlock(s,{key:`${n.model.id??l}-link`,class:e.normalizeClass([o.color&&`neon-card-list__link--${o.color}`,"neon-card-list__link"]),href:n.href,"no-style":"","outline-style":"background"},{default:e.withCtx(()=>[e.createElementVNode("div",B,[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))])]),_:2},1032,["class","href"])):o.selectable?(e.openBlock(),e.createBlock(r,{key:`${n.model.id??l}-selectable`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled,"neon-card-list__card--selected":n.selected},"neon-card-list__card neon-card-list__card--selectable"]),disabled:n.disabled,"model-value":!!n.selected,"onUpdate:modelValue":m=>o.emit("toggle-selected",n.model.id,m)},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1032,["class","disabled","model-value","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("div",{key:`${n.model.id??l}-link`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled},"neon-card-list__card"])},[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))],2))],64))),256)),o.loading?(e.openBlock(),e.createBlock(d,{key:0,color:o.color},null,8,["color"])):e.createCommentVNode("",!0)]),_:3}),o.loadOnDemand?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.items.length===o.total?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(o.endOfResultsLabel),1)):(e.openBlock(),e.createBlock(i,{key:1,"button-style":o.NeonButtonStyle.Text,color:o.NeonFunctionalColor.Neutral,label:o.showMoreLabel,size:o.NeonSize.Small,class:"neon-card-list__show-more",onClick:a[0]||(a[0]=n=>o.emit("show-more",n))},null,8,["button-style","color","label","size"]))],64)):o.pagination?(e.openBlock(),e.createBlock(p,{key:2,color:o.color,"display-first-and-last":o.pagination.displayFirstAndLast,page:o.pagination.page,"page-size":o.pagination.pageSize,total:o.pagination.total,"url-template":o.pagination.urlTemplate,onPageChange:a[1]||(a[1]=n=>o.emit("page-change",n))},null,8,["color","display-first-and-last","page","page-size","total","url-template"])):e.createCommentVNode("",!0)])}const C=k(u,[["render",y]]);module.exports=C;
 //# sourceMappingURL=NeonCardList.vue.cjs.js.map

package/dist/components/layout/card-list/NeonCardList.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonCardList.vue.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n  <div class=\"neon-card-list\">\n    <!-- @slot slot for providing a filter bar component -->\n    <slot name=\"filters\"></slot>\n    <neon-inline v-if=\"slots.header || loadOnDemand\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list aligned next to the result count -->\n      <slot name=\"header\"></slot>\n      <span v-if=\"loadOnDemand\" class=\"neon-card-list__total\">{{ n(items.length) }} {{ ofLabel }} {{ n(total) }}</span>\n    </neon-inline>\n    <neon-stack class=\"neon-card-list__cards\" gap=\"z\">\n      <template v-for=\"(item, index) in items\">\n        <neon-link\n          v-if=\"item.href && !item.disabled\"\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"color && `neon-card-list__link--${color}`\"\n          :href=\"item.href\"\n          class=\"neon-card-list__link\"\n          no-style\n          outline-style=\"background\"\n        >\n          <div class=\"neon-card-list__card\">\n            <!-- @slot slot for rendering card contents, two parameters are available:\n    @binding {T} model - the model item to be rendered\n    @binding {number} index - the index of the item in the list -->\n            <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n          </div>\n        </neon-link>\n        <neon-selectable-card\n          v-else-if=\"selectable\"\n          :key=\"`${item.model.id ?? index}-selectable`\"\n          :class=\"{\n            'neon-card-list__card--disabled': item.disabled,\n            'neon-card-list__card--selected': item.selected,\n          }\"\n          :disabled=\"item.disabled\"\n          :model-value=\"!!item.selected\"\n          class=\"neon-card-list__card neon-card-list__card--selectable\"\n          @update:model-value=\"emit('toggle-selected', item.model.id, $event)\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </div>\n      </template>\n      <neon-splash-loader v-if=\"loading\" :color=\"color\" />\n    </neon-stack>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"items.length === total\" class=\"neon-card-list__results-end\">{{ endOfResultsLabel }}</span>\n      <neon-button\n        v-else\n        :button-style=\"NeonButtonStyle.Text\"\n        :color=\"NeonFunctionalColor.Neutral\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Small\"\n        class=\"neon-card-list__show-more\"\n        @click=\"emit('show-more', $event)\"\n      />\n    </template>\n    <neon-pagination\n      v-else-if=\"pagination\"\n      :color=\"color\"\n      :display-first-and-last=\"pagination.displayFirstAndLast\"\n      :page=\"pagination.page\"\n      :page-size=\"pagination.pageSize\"\n      :total=\"pagination.total\"\n      :url-template=\"pagination.urlTemplate\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_3","_openBlock","_createElementBlock","_renderSlot","_ctx","_createBlock","_component_neon_inline","_hoisted_2","_toDisplayString","_createVNode","_component_neon_stack","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createElementVNode","_mergeProps","_component_neon_selectable_card","$event","_component_neon_splash_loader","_hoisted_4","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}
+{"version":3,"file":"NeonCardList.vue.cjs.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n  <div class=\"neon-card-list\">\n    <!-- @slot slot for providing a filter bar component -->\n    <slot name=\"filters\"></slot>\n    <neon-inline v-if=\"slots.header || loadOnDemand\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list aligned next to the result count -->\n      <slot name=\"header\"></slot>\n      <span v-if=\"loadOnDemand\" class=\"neon-card-list__total\">{{ n(items.length) }} {{ ofLabel }} {{ n(total) }}</span>\n    </neon-inline>\n    <neon-stack class=\"neon-card-list__cards\" gap=\"z\">\n      <template v-for=\"(item, index) in items\">\n        <neon-link\n          v-if=\"item.href && !item.disabled\"\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"color && `neon-card-list__link--${color}`\"\n          :href=\"item.href\"\n          class=\"neon-card-list__link\"\n          no-style\n          outline-style=\"background\"\n        >\n          <div class=\"neon-card-list__card\">\n            <!-- @slot slot for rendering card contents, two parameters are available:\n    @binding {T} model - the model item to be rendered\n    @binding {number} index - the index of the item in the list -->\n            <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n          </div>\n        </neon-link>\n        <neon-selectable-card\n          v-else-if=\"selectable\"\n          :key=\"`${item.model.id ?? index}-selectable`\"\n          :class=\"{\n            'neon-card-list__card--disabled': item.disabled,\n            'neon-card-list__card--selected': item.selected,\n          }\"\n          :disabled=\"item.disabled\"\n          :model-value=\"!!item.selected\"\n          class=\"neon-card-list__card neon-card-list__card--selectable\"\n          @update:model-value=\"emit('toggle-selected', item.model.id, $event)\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </div>\n      </template>\n      <neon-splash-loader v-if=\"loading\" :color=\"color\" />\n    </neon-stack>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"items.length === total\" class=\"neon-card-list__results-end\">{{ endOfResultsLabel }}</span>\n      <neon-button\n        v-else\n        :button-style=\"NeonButtonStyle.Text\"\n        :color=\"NeonFunctionalColor.Neutral\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Small\"\n        class=\"neon-card-list__show-more\"\n        @click=\"emit('show-more', $event)\"\n      />\n    </template>\n    <neon-pagination\n      v-else-if=\"pagination\"\n      :color=\"color\"\n      :display-first-and-last=\"pagination.displayFirstAndLast\"\n      :page=\"pagination.page\"\n      :page-size=\"pagination.pageSize\"\n      :total=\"pagination.total\"\n      :url-template=\"pagination.urlTemplate\"\n      @page-change=\"(page: number) => emit('page-change', page)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_3","_openBlock","_createElementBlock","_renderSlot","_ctx","_createBlock","_component_neon_inline","_hoisted_2","_toDisplayString","_createVNode","_component_neon_stack","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createElementVNode","_mergeProps","_component_neon_selectable_card","$event","_component_neon_splash_loader","_hoisted_4","_component_neon_button","_cache","_component_neon_pagination","page"],"mappings":"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"}

package/dist/components/layout/card-list/NeonCardList.vue.es.js

@@ -1,5 +1,5 @@
-import N from "./NeonCardList.es.js";
-import { resolveComponent as l, openBlock as n, createElementBlock as a, renderSlot as d, createBlock as t, withCtx as r, toDisplayString as i, createCommentVNode as c, createVNode as C, Fragment as p, renderList as v, normalizeClass as u, createElementVNode as L, mergeProps as m } from "vue";
+import C from "./NeonCardList.es.js";
+import { resolveComponent as l, openBlock as n, createElementBlock as a, renderSlot as d, createBlock as t, withCtx as i, toDisplayString as c, createCommentVNode as p, createVNode as N, Fragment as u, renderList as v, normalizeClass as m, createElementVNode as L, mergeProps as _ } from "vue";
 import S from "../../../_virtual/_plugin-vue_export-helper.es.js";
 const V = { class: "neon-card-list" }, w = {
   key: 0,
@@ -8,42 +8,42 @@ const V = { class: "neon-card-list" }, w = {
   key: 0,
   class: "neon-card-list__results-end"
 };
-function O(e, _, F, E, T, U) {
-  const f = l("neon-inline"), g = l("neon-link"), b = l("neon-selectable-card"), k = l("neon-splash-loader"), y = l("neon-stack"), h = l("neon-button"), $ = l("neon-pagination");
+function O(e, r, F, E, P, T) {
+  const g = l("neon-inline"), f = l("neon-link"), b = l("neon-selectable-card"), k = l("neon-splash-loader"), y = l("neon-stack"), h = l("neon-button"), $ = l("neon-pagination");
   return n(), a("div", V, [
     d(e.$slots, "filters"),
-    e.slots.header || e.loadOnDemand ? (n(), t(f, {
+    e.slots.header || e.loadOnDemand ? (n(), t(g, {
       key: 0,
       class: "neon-card-list__header"
     }, {
-      default: r(() => [
+      default: i(() => [
         d(e.$slots, "header"),
-        e.loadOnDemand ? (n(), a("span", w, i(e.n(e.items.length)) + " " + i(e.ofLabel) + " " + i(e.n(e.total)), 1)) : c("", !0)
+        e.loadOnDemand ? (n(), a("span", w, c(e.n(e.items.length)) + " " + c(e.ofLabel) + " " + c(e.n(e.total)), 1)) : p("", !0)
       ]),
       _: 3
-    })) : c("", !0),
-    C(y, {
+    })) : p("", !0),
+    N(y, {
       class: "neon-card-list__cards",
       gap: "z"
     }, {
-      default: r(() => [
-        (n(!0), a(p, null, v(e.items, (o, s) => (n(), a(p, null, [
-          o.href && !o.disabled ? (n(), t(g, {
+      default: i(() => [
+        (n(!0), a(u, null, v(e.items, (o, s) => (n(), a(u, null, [
+          o.href && !o.disabled ? (n(), t(f, {
             key: `${o.model.id ?? s}-link`,
-            class: u([e.color && `neon-card-list__link--${e.color}`, "neon-card-list__link"]),
+            class: m([e.color && `neon-card-list__link--${e.color}`, "neon-card-list__link"]),
             href: o.href,
             "no-style": "",
             "outline-style": "background"
           }, {
-            default: r(() => [
+            default: i(() => [
               L("div", B, [
-                d(e.$slots, "card", m({ ref_for: !0 }, { model: o.model, index: s }))
+                d(e.$slots, "card", _({ ref_for: !0 }, { model: o.model, index: s }))
               ])
             ]),
             _: 2
           }, 1032, ["class", "href"])) : e.selectable ? (n(), t(b, {
             key: `${o.model.id ?? s}-selectable`,
-            class: u([{
+            class: m([{
               "neon-card-list__card--disabled": o.disabled,
               "neon-card-list__card--selected": o.selected
             }, "neon-card-list__card neon-card-list__card--selectable"]),
@@ -51,33 +51,33 @@ function O(e, _, F, E, T, U) {
             "model-value": !!o.selected,
             "onUpdate:modelValue": (z) => e.emit("toggle-selected", o.model.id, z)
           }, {
-            default: r(() => [
-              d(e.$slots, "card", m({ ref_for: !0 }, { model: o.model, index: s }))
+            default: i(() => [
+              d(e.$slots, "card", _({ ref_for: !0 }, { model: o.model, index: s }))
             ]),
             _: 2
           }, 1032, ["class", "disabled", "model-value", "onUpdate:modelValue"])) : (n(), a("div", {
             key: `${o.model.id ?? s}-link`,
-            class: u([{ "neon-card-list__card--disabled": o.disabled }, "neon-card-list__card"])
+            class: m([{ "neon-card-list__card--disabled": o.disabled }, "neon-card-list__card"])
           }, [
-            d(e.$slots, "card", m({ ref_for: !0 }, { model: o.model, index: s }))
+            d(e.$slots, "card", _({ ref_for: !0 }, { model: o.model, index: s }))
           ], 2))
         ], 64))), 256)),
         e.loading ? (n(), t(k, {
           key: 0,
           color: e.color
-        }, null, 8, ["color"])) : c("", !0)
+        }, null, 8, ["color"])) : p("", !0)
       ]),
       _: 3
     }),
-    e.loadOnDemand ? (n(), a(p, { key: 1 }, [
-      e.items.length === e.total ? (n(), a("span", D, i(e.endOfResultsLabel), 1)) : (n(), t(h, {
+    e.loadOnDemand ? (n(), a(u, { key: 1 }, [
+      e.items.length === e.total ? (n(), a("span", D, c(e.endOfResultsLabel), 1)) : (n(), t(h, {
         key: 1,
         "button-style": e.NeonButtonStyle.Text,
         color: e.NeonFunctionalColor.Neutral,
         label: e.showMoreLabel,
         size: e.NeonSize.Small,
         class: "neon-card-list__show-more",
-        onClick: _[0] || (_[0] = (o) => e.emit("show-more", o))
+        onClick: r[0] || (r[0] = (o) => e.emit("show-more", o))
       }, null, 8, ["button-style", "color", "label", "size"]))
     ], 64)) : e.pagination ? (n(), t($, {
       key: 2,
@@ -86,11 +86,12 @@ function O(e, _, F, E, T, U) {
       page: e.pagination.page,
       "page-size": e.pagination.pageSize,
       total: e.pagination.total,
-      "url-template": e.pagination.urlTemplate
-    }, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template"])) : c("", !0)
+      "url-template": e.pagination.urlTemplate,
+      onPageChange: r[1] || (r[1] = (o) => e.emit("page-change", o))
+    }, null, 8, ["color", "display-first-and-last", "page", "page-size", "total", "url-template"])) : p("", !0)
   ]);
 }
-const R = /* @__PURE__ */ S(N, [["render", O]]);
+const R = /* @__PURE__ */ S(C, [["render", O]]);
 export {
   R as default
 };

package/dist/components/layout/card-list/NeonCardList.vue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonCardList.vue.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n  <div class=\"neon-card-list\">\n    <!-- @slot slot for providing a filter bar component -->\n    <slot name=\"filters\"></slot>\n    <neon-inline v-if=\"slots.header || loadOnDemand\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list aligned next to the result count -->\n      <slot name=\"header\"></slot>\n      <span v-if=\"loadOnDemand\" class=\"neon-card-list__total\">{{ n(items.length) }} {{ ofLabel }} {{ n(total) }}</span>\n    </neon-inline>\n    <neon-stack class=\"neon-card-list__cards\" gap=\"z\">\n      <template v-for=\"(item, index) in items\">\n        <neon-link\n          v-if=\"item.href && !item.disabled\"\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"color && `neon-card-list__link--${color}`\"\n          :href=\"item.href\"\n          class=\"neon-card-list__link\"\n          no-style\n          outline-style=\"background\"\n        >\n          <div class=\"neon-card-list__card\">\n            <!-- @slot slot for rendering card contents, two parameters are available:\n    @binding {T} model - the model item to be rendered\n    @binding {number} index - the index of the item in the list -->\n            <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n          </div>\n        </neon-link>\n        <neon-selectable-card\n          v-else-if=\"selectable\"\n          :key=\"`${item.model.id ?? index}-selectable`\"\n          :class=\"{\n            'neon-card-list__card--disabled': item.disabled,\n            'neon-card-list__card--selected': item.selected,\n          }\"\n          :disabled=\"item.disabled\"\n          :model-value=\"!!item.selected\"\n          class=\"neon-card-list__card neon-card-list__card--selectable\"\n          @update:model-value=\"emit('toggle-selected', item.model.id, $event)\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </div>\n      </template>\n      <neon-splash-loader v-if=\"loading\" :color=\"color\" />\n    </neon-stack>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"items.length === total\" class=\"neon-card-list__results-end\">{{ endOfResultsLabel }}</span>\n      <neon-button\n        v-else\n        :button-style=\"NeonButtonStyle.Text\"\n        :color=\"NeonFunctionalColor.Neutral\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Small\"\n        class=\"neon-card-list__show-more\"\n        @click=\"emit('show-more', $event)\"\n      />\n    </template>\n    <neon-pagination\n      v-else-if=\"pagination\"\n      :color=\"color\"\n      :display-first-and-last=\"pagination.displayFirstAndLast\"\n      :page=\"pagination.page\"\n      :page-size=\"pagination.pageSize\"\n      :total=\"pagination.total\"\n      :url-template=\"pagination.urlTemplate\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_3","_openBlock","_createElementBlock","_renderSlot","_ctx","_createBlock","_component_neon_inline","_hoisted_2","_toDisplayString","_createVNode","_component_neon_stack","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createElementVNode","_mergeProps","_component_neon_selectable_card","$event","_component_neon_splash_loader","_hoisted_4","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}
+{"version":3,"file":"NeonCardList.vue.es.js","sources":["../../../../src/components/layout/card-list/NeonCardList.vue"],"sourcesContent":["<template>\n  <div class=\"neon-card-list\">\n    <!-- @slot slot for providing a filter bar component -->\n    <slot name=\"filters\"></slot>\n    <neon-inline v-if=\"slots.header || loadOnDemand\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list aligned next to the result count -->\n      <slot name=\"header\"></slot>\n      <span v-if=\"loadOnDemand\" class=\"neon-card-list__total\">{{ n(items.length) }} {{ ofLabel }} {{ n(total) }}</span>\n    </neon-inline>\n    <neon-stack class=\"neon-card-list__cards\" gap=\"z\">\n      <template v-for=\"(item, index) in items\">\n        <neon-link\n          v-if=\"item.href && !item.disabled\"\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"color && `neon-card-list__link--${color}`\"\n          :href=\"item.href\"\n          class=\"neon-card-list__link\"\n          no-style\n          outline-style=\"background\"\n        >\n          <div class=\"neon-card-list__card\">\n            <!-- @slot slot for rendering card contents, two parameters are available:\n    @binding {T} model - the model item to be rendered\n    @binding {number} index - the index of the item in the list -->\n            <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n          </div>\n        </neon-link>\n        <neon-selectable-card\n          v-else-if=\"selectable\"\n          :key=\"`${item.model.id ?? index}-selectable`\"\n          :class=\"{\n            'neon-card-list__card--disabled': item.disabled,\n            'neon-card-list__card--selected': item.selected,\n          }\"\n          :disabled=\"item.disabled\"\n          :model-value=\"!!item.selected\"\n          class=\"neon-card-list__card neon-card-list__card--selectable\"\n          @update:model-value=\"emit('toggle-selected', item.model.id, $event)\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-link`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n          <slot name=\"card\" v-bind=\"{ model: item.model, index: index }\"></slot>\n        </div>\n      </template>\n      <neon-splash-loader v-if=\"loading\" :color=\"color\" />\n    </neon-stack>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"items.length === total\" class=\"neon-card-list__results-end\">{{ endOfResultsLabel }}</span>\n      <neon-button\n        v-else\n        :button-style=\"NeonButtonStyle.Text\"\n        :color=\"NeonFunctionalColor.Neutral\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Small\"\n        class=\"neon-card-list__show-more\"\n        @click=\"emit('show-more', $event)\"\n      />\n    </template>\n    <neon-pagination\n      v-else-if=\"pagination\"\n      :color=\"color\"\n      :display-first-and-last=\"pagination.displayFirstAndLast\"\n      :page=\"pagination.page\"\n      :page-size=\"pagination.pageSize\"\n      :total=\"pagination.total\"\n      :url-template=\"pagination.urlTemplate\"\n      @page-change=\"(page: number) => emit('page-change', page)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_3","_openBlock","_createElementBlock","_renderSlot","_ctx","_createBlock","_component_neon_inline","_hoisted_2","_toDisplayString","_createVNode","_component_neon_stack","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createElementVNode","_mergeProps","_component_neon_selectable_card","$event","_component_neon_splash_loader","_hoisted_4","_component_neon_button","_cache","_component_neon_pagination","page"],"mappings":"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"}

package/dist/components/layout/list-layout/NeonListLayout.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("vue"),u=require("../card-list/NeonCardList.vue.cjs.js"),c=require("../../presentation/header/NeonHeader.vue.cjs.js"),d=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),p=require("../../presentation/empty-state/NeonEmptyState.vue.cjs.js"),y=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),g=t.defineComponent({name:"NeonListLayout",components:{NeonSplashLoader:y,NeonEmptyState:p,NeonCardList:u,NeonHeader:c},props:{title:{type:String,required:!0},subtitle:{type:String},breadcrumbs:{type:Array,default:()=>[]},backButton:{type:Boolean,default:!0},backLabel:{type:String,default:"Back"},items:{type:Array,required:!0},loading:{type:Boolean},color:{type:String,default:()=>d.NeonFunctionalColor.Brand},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object}},emits:["show-more","toggle-selected"],setup(r,{emit:o,slots:n}){const e=t.ref(!0),a=()=>{o("show-more")},i=(s,l)=>{o("toggle-selected",s,l)};return t.watch(()=>r.items,()=>{e.value&&(e.value=!1)},{immediate:!0}),{initializing:e,slots:n,showMore:a,toggleSelected:i}}});module.exports=g;
+"use strict";const o=require("vue"),u=require("../card-list/NeonCardList.vue.cjs.js"),c=require("../../presentation/header/NeonHeader.vue.cjs.js"),p=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),d=require("../../presentation/empty-state/NeonEmptyState.vue.cjs.js"),g=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),y=o.defineComponent({name:"NeonListLayout",components:{NeonSplashLoader:g,NeonEmptyState:d,NeonCardList:u,NeonHeader:c},props:{title:{type:String,required:!0},subtitle:{type:String},breadcrumbs:{type:Array,default:()=>[]},backButton:{type:Boolean,default:!0},backLabel:{type:String,default:"Back"},items:{type:Array,required:!0},loading:{type:Boolean},color:{type:String,default:()=>p.NeonFunctionalColor.Brand},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object}},emits:["page-change","show-more","toggle-selected"],setup(r,{emit:e,slots:n}){const t=o.ref(!0),a=()=>{e("show-more")},i=(s,l)=>{e("toggle-selected",s,l)};return o.watch(()=>r.items,()=>{t.value&&(t.value=!1)},{immediate:!0}),{emit:e,initializing:t,slots:n,showMore:a,toggleSelected:i}}});module.exports=y;
 //# sourceMappingURL=NeonListLayout.cjs.js.map

package/dist/components/layout/list-layout/NeonListLayout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonListLayout.cjs.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport NeonCardList from '@/components/layout/card-list/NeonCardList.vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonEmptyState from '@/components/presentation/empty-state/NeonEmptyState.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty\n * state. Use this component directly inside the NeonPage <em>contents</em> slot.\n */\nexport default defineComponent({\n  name: 'NeonListLayout',\n  components: {\n    NeonSplashLoader,\n    NeonEmptyState,\n    NeonCardList,\n    NeonHeader,\n  },\n  props: {\n    /**\n     * The title of the header.\n     */\n    title: { type: String, required: true },\n    /**\n     * The subtitle of the header.\n     */\n    subtitle: { type: String },\n    /**\n     * Breadcrumbs to display above the header.\n     */\n    breadcrumbs: { type: Array as () => NeonBreadcrumbLink[], default: () => [] },\n    /**\n     * Whether to display a back button\n     */\n    backButton: { type: Boolean, default: true },\n    /**\n     * Override the label for the back button\n     */\n    backLabel: { type: String, default: 'Back' },\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * Loading state for pagination, set when loading a new page.\n     */\n    loading: { type: Boolean },\n    /**\n     * Specify a selection/loading/hover color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n  },\n  emits: [\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const initializing = ref<boolean>(true);\n    const showMore = () => {\n      emit('show-more');\n    };\n\n    const toggleSelected = (id: string, selected: boolean) => {\n      emit('toggle-selected', id, selected);\n    };\n\n    watch(\n      () => props.items,\n      () => {\n        if (initializing.value) {\n          initializing.value = false;\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      initializing,\n      slots,\n      showMore,\n      toggleSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSplashLoader","NeonEmptyState","NeonCardList","NeonHeader","NeonFunctionalColor","props","emit","slots","initializing","ref","showMore","toggleSelected","id","selected","watch"],"mappings":"mWAiBAA,EAAeC,kBAAgB,CAC7B,KAAM,iBACN,WAAY,CACV,iBAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,MAAA,EAIlB,YAAa,CAAE,KAAM,MAAqC,QAAS,IAAM,CAAA,CAAC,EAI1E,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,UAAW,CAAE,KAAM,OAAQ,QAAS,MAAA,EAIpC,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,QAAS,CAAE,KAAM,OAAA,EAIjB,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,KAAA,EAIvF,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,CAAoC,EAE1D,MAAO,CAKL,YAKA,iBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAeC,EAAAA,IAAa,EAAI,EAChCC,EAAW,IAAM,CACrBJ,EAAK,WAAW,CAClB,EAEMK,EAAiB,CAACC,EAAYC,IAAsB,CACxDP,EAAK,kBAAmBM,EAAIC,CAAQ,CACtC,EAEAC,OAAAA,EAAAA,MACE,IAAMT,EAAM,MACZ,IAAM,CACAG,EAAa,QACfA,EAAa,MAAQ,GAEzB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,aAAAA,EACA,MAAAD,EACA,SAAAG,EACA,eAAAC,CAAA,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonListLayout.cjs.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport NeonCardList from '@/components/layout/card-list/NeonCardList.vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonEmptyState from '@/components/presentation/empty-state/NeonEmptyState.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty\n * state. Use this component directly inside the NeonPage <em>contents</em> slot.\n */\nexport default defineComponent({\n  name: 'NeonListLayout',\n  components: {\n    NeonSplashLoader,\n    NeonEmptyState,\n    NeonCardList,\n    NeonHeader,\n  },\n  props: {\n    /**\n     * The title of the header.\n     */\n    title: { type: String, required: true },\n    /**\n     * The subtitle of the header.\n     */\n    subtitle: { type: String },\n    /**\n     * Breadcrumbs to display above the header.\n     */\n    breadcrumbs: { type: Array as () => NeonBreadcrumbLink[], default: () => [] },\n    /**\n     * Whether to display a back button\n     */\n    backButton: { type: Boolean, default: true },\n    /**\n     * Override the label for the back button\n     */\n    backLabel: { type: String, default: 'Back' },\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * Loading state for pagination, set when loading a new page.\n     */\n    loading: { type: Boolean },\n    /**\n     * Specify a selection/loading/hover color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on a pagination link (useful for paginated lists which are not the main focus of the page,\n     * i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const initializing = ref<boolean>(true);\n    const showMore = () => {\n      emit('show-more');\n    };\n\n    const toggleSelected = (id: string, selected: boolean) => {\n      emit('toggle-selected', id, selected);\n    };\n\n    watch(\n      () => props.items,\n      () => {\n        if (initializing.value) {\n          initializing.value = false;\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      emit,\n      initializing,\n      slots,\n      showMore,\n      toggleSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSplashLoader","NeonEmptyState","NeonCardList","NeonHeader","NeonFunctionalColor","props","emit","slots","initializing","ref","showMore","toggleSelected","id","selected","watch"],"mappings":"mWAiBAA,EAAeC,kBAAgB,CAC7B,KAAM,iBACN,WAAY,CACV,iBAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CAAE,KAAM,OAAQ,SAAU,EAAA,EAIjC,SAAU,CAAE,KAAM,MAAA,EAIlB,YAAa,CAAE,KAAM,MAAqC,QAAS,IAAM,CAAA,CAAC,EAI1E,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,UAAW,CAAE,KAAM,OAAQ,QAAS,MAAA,EAIpC,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,QAAS,CAAE,KAAM,OAAA,EAIjB,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAMC,EAAAA,oBAAoB,KAAA,EAIvF,WAAY,CAAE,KAAM,QAAS,QAAS,EAAA,EAItC,aAAc,CAAE,KAAM,MAAA,EAItB,WAAY,CAAE,KAAM,MAAA,CAAoC,EAE1D,MAAO,CAOL,cAKA,YAKA,iBAAA,EAEF,MAAMC,EAAO,CAAE,KAAAC,EAAM,MAAAC,GAAS,CAC5B,MAAMC,EAAeC,EAAAA,IAAa,EAAI,EAChCC,EAAW,IAAM,CACrBJ,EAAK,WAAW,CAClB,EAEMK,EAAiB,CAACC,EAAYC,IAAsB,CACxDP,EAAK,kBAAmBM,EAAIC,CAAQ,CACtC,EAEAC,OAAAA,EAAAA,MACE,IAAMT,EAAM,MACZ,IAAM,CACAG,EAAa,QACfA,EAAa,MAAQ,GAEzB,EACA,CAAE,UAAW,EAAA,CAAK,EAGb,CACL,KAAAF,EACA,aAAAE,EACA,MAAAD,EACA,SAAAG,EACA,eAAAC,CAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/list-layout/NeonListLayout.es.js

@@ -1,13 +1,13 @@
-import { defineComponent as p, ref as m, watch as s } from "vue";
+import { defineComponent as p, ref as s, watch as m } from "vue";
 import u from "../card-list/NeonCardList.vue.es.js";
 import d from "../../presentation/header/NeonHeader.vue.es.js";
 import { NeonFunctionalColor as c } from "../../../model/common/color/NeonFunctionalColor.es.js";
 import f from "../../presentation/empty-state/NeonEmptyState.vue.es.js";
-import y from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
+import g from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
 const L = p({
   name: "NeonListLayout",
   components: {
-    NeonSplashLoader: y,
+    NeonSplashLoader: g,
     NeonEmptyState: f,
     NeonCardList: u,
     NeonHeader: d
@@ -62,6 +62,13 @@ const L = p({
     pagination: { type: Object }
   },
   emits: [
+    /**
+     * Emitted when the user clicks on a pagination link (useful for paginated lists which are not the main focus of the page,
+     * i.e. should not be deep linked).
+     *
+     * @type {number} The new page number.
+     */
+    "page-change",
     /**
      * Emitted when the 'Show more' button is clicked in "on demand" mode.
      * @type {void}
@@ -73,20 +80,21 @@ const L = p({
      */
     "toggle-selected"
   ],
-  setup(o, { emit: t, slots: r }) {
-    const e = m(!0), a = () => {
-      t("show-more");
+  setup(o, { emit: e, slots: r }) {
+    const t = s(!0), a = () => {
+      e("show-more");
     }, n = (i, l) => {
-      t("toggle-selected", i, l);
+      e("toggle-selected", i, l);
     };
-    return s(
+    return m(
       () => o.items,
       () => {
-        e.value && (e.value = !1);
+        t.value && (t.value = !1);
       },
       { immediate: !0 }
     ), {
-      initializing: e,
+      emit: e,
+      initializing: t,
       slots: r,
       showMore: a,
       toggleSelected: n

package/dist/components/layout/list-layout/NeonListLayout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonListLayout.es.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport NeonCardList from '@/components/layout/card-list/NeonCardList.vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonEmptyState from '@/components/presentation/empty-state/NeonEmptyState.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty\n * state. Use this component directly inside the NeonPage <em>contents</em> slot.\n */\nexport default defineComponent({\n  name: 'NeonListLayout',\n  components: {\n    NeonSplashLoader,\n    NeonEmptyState,\n    NeonCardList,\n    NeonHeader,\n  },\n  props: {\n    /**\n     * The title of the header.\n     */\n    title: { type: String, required: true },\n    /**\n     * The subtitle of the header.\n     */\n    subtitle: { type: String },\n    /**\n     * Breadcrumbs to display above the header.\n     */\n    breadcrumbs: { type: Array as () => NeonBreadcrumbLink[], default: () => [] },\n    /**\n     * Whether to display a back button\n     */\n    backButton: { type: Boolean, default: true },\n    /**\n     * Override the label for the back button\n     */\n    backLabel: { type: String, default: 'Back' },\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * Loading state for pagination, set when loading a new page.\n     */\n    loading: { type: Boolean },\n    /**\n     * Specify a selection/loading/hover color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n  },\n  emits: [\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const initializing = ref<boolean>(true);\n    const showMore = () => {\n      emit('show-more');\n    };\n\n    const toggleSelected = (id: string, selected: boolean) => {\n      emit('toggle-selected', id, selected);\n    };\n\n    watch(\n      () => props.items,\n      () => {\n        if (initializing.value) {\n          initializing.value = false;\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      initializing,\n      slots,\n      showMore,\n      toggleSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSplashLoader","NeonEmptyState","NeonCardList","NeonHeader","NeonFunctionalColor","props","emit","slots","initializing","ref","showMore","toggleSelected","id","selected","watch"],"mappings":";;;;;;AAiBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIlB,aAAa,EAAE,MAAM,OAAqC,SAAS,MAAM,CAAA,EAAC;AAAA;AAAA;AAAA;AAAA,IAI1E,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,WAAW,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,SAAS,EAAE,MAAM,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjB,OAAO,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIvF,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,cAAc,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAItB,YAAY,EAAE,MAAM,OAAA;AAAA,EAAoC;AAAA,EAE1D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAeC,EAAa,EAAI,GAChCC,IAAW,MAAM;AACrB,MAAAJ,EAAK,WAAW;AAAA,IAClB,GAEMK,IAAiB,CAACC,GAAYC,MAAsB;AACxD,MAAAP,EAAK,mBAAmBM,GAAIC,CAAQ;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,MAAM;AACJ,QAAIG,EAAa,UACfA,EAAa,QAAQ;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,cAAAA;AAAA,MACA,OAAAD;AAAA,MACA,UAAAG;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}
+{"version":3,"file":"NeonListLayout.es.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { defineComponent, ref, watch } from 'vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport NeonCardList from '@/components/layout/card-list/NeonCardList.vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport { NeonFunctionalColor } from '@/model/common/color/NeonFunctionalColor';\nimport type { NeonLoadOnDemandModel } from '@/model/layout/card-list/NeonLoadOnDemandModel';\nimport type { NeonPaginationModel } from '@/model/navigation/pagination/NeonPaginationModel';\nimport type { NeonCardListModel } from '@/model/layout/card-list/NeonCardListModel';\nimport type { NeonIdentifiable } from '@/model/common/entity/NeonIdentifiable';\nimport type { NeonSelectable } from '@/model/common/entity/NeonSelectable';\nimport NeonEmptyState from '@/components/presentation/empty-state/NeonEmptyState.vue';\nimport NeonSplashLoader from '@/components/feedback/splash-loader/NeonSplashLoader.vue';\n\n/**\n * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty\n * state. Use this component directly inside the NeonPage <em>contents</em> slot.\n */\nexport default defineComponent({\n  name: 'NeonListLayout',\n  components: {\n    NeonSplashLoader,\n    NeonEmptyState,\n    NeonCardList,\n    NeonHeader,\n  },\n  props: {\n    /**\n     * The title of the header.\n     */\n    title: { type: String, required: true },\n    /**\n     * The subtitle of the header.\n     */\n    subtitle: { type: String },\n    /**\n     * Breadcrumbs to display above the header.\n     */\n    breadcrumbs: { type: Array as () => NeonBreadcrumbLink[], default: () => [] },\n    /**\n     * Whether to display a back button\n     */\n    backButton: { type: Boolean, default: true },\n    /**\n     * Override the label for the back button\n     */\n    backLabel: { type: String, default: 'Back' },\n    /**\n     * Items to display as cards. Each item should be a NeonCardListModel.\n     */\n    items: {\n      type: Array as () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>,\n      required: true,\n    },\n    /**\n     * Loading state for pagination, set when loading a new page.\n     */\n    loading: { type: Boolean },\n    /**\n     * Specify a selection/loading/hover color for the cards.\n     */\n    color: { type: String as () => NeonFunctionalColor, default: () => NeonFunctionalColor.Brand },\n    /**\n     * Make cards selectable.\n     */\n    selectable: { type: Boolean, default: false },\n    /**\n     * Model for configuring the on demand loading layout.\n     */\n    loadOnDemand: { type: Object as () => NeonLoadOnDemandModel },\n    /**\n     * Model for configuring pagination, either pagination or loadOnDemand should be provided.\n     */\n    pagination: { type: Object as () => NeonPaginationModel },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on a pagination link (useful for paginated lists which are not the main focus of the page,\n     * i.e. should not be deep linked).\n     *\n     * @type {number} The new page number.\n     */\n    'page-change',\n    /**\n     * Emitted when the 'Show more' button is clicked in \"on demand\" mode.\n     * @type {void}\n     */\n    'show-more',\n    /**\n     * Emitted when in selectable mode and the selected state of a card is toggled.\n     * @type {string, boolean} - the id of the card which is toggled & the new selected state.\n     */\n    'toggle-selected',\n  ],\n  setup(props, { emit, slots }) {\n    const initializing = ref<boolean>(true);\n    const showMore = () => {\n      emit('show-more');\n    };\n\n    const toggleSelected = (id: string, selected: boolean) => {\n      emit('toggle-selected', id, selected);\n    };\n\n    watch(\n      () => props.items,\n      () => {\n        if (initializing.value) {\n          initializing.value = false;\n        }\n      },\n      { immediate: true },\n    );\n\n    return {\n      emit,\n      initializing,\n      slots,\n      showMore,\n      toggleSelected,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSplashLoader","NeonEmptyState","NeonCardList","NeonHeader","NeonFunctionalColor","props","emit","slots","initializing","ref","showMore","toggleSelected","id","selected","watch"],"mappings":";;;;;;AAiBA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA;AAAA;AAAA;AAAA,IAIjC,UAAU,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAIlB,aAAa,EAAE,MAAM,OAAqC,SAAS,MAAM,CAAA,EAAC;AAAA;AAAA;AAAA;AAAA,IAI1E,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,WAAW,EAAE,MAAM,QAAQ,SAAS,OAAA;AAAA;AAAA;AAAA;AAAA,IAIpC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKZ,SAAS,EAAE,MAAM,QAAA;AAAA;AAAA;AAAA;AAAA,IAIjB,OAAO,EAAE,MAAM,QAAqC,SAAS,MAAMC,EAAoB,MAAA;AAAA;AAAA;AAAA;AAAA,IAIvF,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA,IAItC,cAAc,EAAE,MAAM,OAAA;AAAA;AAAA;AAAA;AAAA,IAItB,YAAY,EAAE,MAAM,OAAA;AAAA,EAAoC;AAAA,EAE1D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EAAA;AAAA,EAEF,MAAMC,GAAO,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC5B,UAAMC,IAAeC,EAAa,EAAI,GAChCC,IAAW,MAAM;AACrB,MAAAJ,EAAK,WAAW;AAAA,IAClB,GAEMK,IAAiB,CAACC,GAAYC,MAAsB;AACxD,MAAAP,EAAK,mBAAmBM,GAAIC,CAAQ;AAAA,IACtC;AAEA,WAAAC;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,MAAM;AACJ,QAAIG,EAAa,UACfA,EAAa,QAAQ;AAAA,MAEzB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK,GAGb;AAAA,MACL,MAAAF;AAAA,MACA,cAAAE;AAAA,MACA,OAAAD;AAAA,MACA,UAAAG;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/layout/list-layout/NeonListLayout.vue.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("./NeonListLayout.cjs.js"),o=require("vue"),a=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),i={class:"neon-list-layout"};function d(e,u,b,m,p,g){const t=o.resolveComponent("neon-header"),n=o.resolveComponent("neon-card-list");return o.openBlock(),o.createElementBlock("div",i,[!e.initializing&&e.items.length>0?(o.openBlock(),o.createBlock(t,{key:0,"back-button":e.backButton,"back-label":e.backLabel,breadcrumbs:e.breadcrumbs,subtitle:e.subtitle,title:e.title},o.createSlots({labels:o.withCtx(()=>[o.renderSlot(e.$slots,"labels")]),_:2},[e.items.length>0?{name:"actions",fn:o.withCtx(()=>[o.renderSlot(e.$slots,"actions")]),key:"0"}:void 0]),1032,["back-button","back-label","breadcrumbs","subtitle","title"])):o.createCommentVNode("",!0),o.renderSlot(e.$slots,"note"),e.items.length>0?(o.openBlock(),o.createBlock(n,{key:1,color:e.color,items:e.items,"load-on-demand":e.loadOnDemand,loading:e.loading,pagination:e.pagination,selectable:e.selectable,onShowMore:e.showMore,onToggleSelected:e.toggleSelected},{filters:o.withCtx(()=>[o.renderSlot(e.$slots,"filters")]),header:o.withCtx(()=>[o.renderSlot(e.$slots,"header")]),card:o.withCtx(({model:l,index:r})=>[o.renderSlot(e.$slots,"card",o.normalizeProps(o.guardReactiveProps({model:l,index:r})))]),_:3},8,["color","items","load-on-demand","loading","pagination","selectable","onShowMore","onToggleSelected"])):!e.initializing&&!e.loading&&e.slots.emptyState?o.renderSlot(e.$slots,"emptyState",{key:2}):o.createCommentVNode("",!0)])}const c=a(s,[["render",d]]);module.exports=c;
+"use strict";const a=require("./NeonListLayout.cjs.js"),o=require("vue"),i=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),d={class:"neon-list-layout"};function u(e,n,b,g,p,c){const l=o.resolveComponent("neon-header"),r=o.resolveComponent("neon-card-list");return o.openBlock(),o.createElementBlock("div",d,[!e.initializing&&e.items.length>0?(o.openBlock(),o.createBlock(l,{key:0,"back-button":e.backButton,"back-label":e.backLabel,breadcrumbs:e.breadcrumbs,subtitle:e.subtitle,title:e.title},o.createSlots({labels:o.withCtx(()=>[o.renderSlot(e.$slots,"labels")]),_:2},[e.items.length>0?{name:"actions",fn:o.withCtx(()=>[o.renderSlot(e.$slots,"actions")]),key:"0"}:void 0]),1032,["back-button","back-label","breadcrumbs","subtitle","title"])):o.createCommentVNode("",!0),o.renderSlot(e.$slots,"note"),e.items.length>0?(o.openBlock(),o.createBlock(r,{key:1,color:e.color,items:e.items,"load-on-demand":e.loadOnDemand,loading:e.loading,pagination:e.pagination,selectable:e.selectable,onPageChange:n[0]||(n[0]=t=>e.emit("page-change",t)),onShowMore:e.showMore,onToggleSelected:e.toggleSelected},{filters:o.withCtx(()=>[o.renderSlot(e.$slots,"filters")]),header:o.withCtx(()=>[o.renderSlot(e.$slots,"header")]),card:o.withCtx(({model:t,index:s})=>[o.renderSlot(e.$slots,"card",o.normalizeProps(o.guardReactiveProps({model:t,index:s})))]),_:3},8,["color","items","load-on-demand","loading","pagination","selectable","onShowMore","onToggleSelected"])):!e.initializing&&!e.loading&&e.slots.emptyState?o.renderSlot(e.$slots,"emptyState",{key:2}):o.createCommentVNode("",!0)])}const m=i(a,[["render",u]]);module.exports=m;
 //# sourceMappingURL=NeonListLayout.vue.cjs.js.map

package/dist/components/layout/list-layout/NeonListLayout.vue.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonListLayout.vue.cjs.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.vue"],"sourcesContent":["<template>\n  <div class=\"neon-list-layout\">\n    <neon-header\n      v-if=\"!initializing && items.length > 0\"\n      :back-button=\"backButton\"\n      :back-label=\"backLabel\"\n      :breadcrumbs=\"breadcrumbs\"\n      :subtitle=\"subtitle\"\n      :title=\"title\"\n    >\n      <template #labels>\n        <!-- @slot a slot for adding labels/info popovers next to the title -->\n        <slot name=\"labels\"></slot>\n      </template>\n      <template v-if=\"items.length > 0\" #actions>\n        <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the\n        buttons here in order to apply the correct spacings -->\n        <slot name=\"actions\"></slot>\n      </template>\n    </neon-header>\n    <!-- @slot the insert a note into the page -->\n    <slot name=\"note\"></slot>\n    <neon-card-list\n      v-if=\"items.length > 0\"\n      :color=\"color\"\n      :items=\"items\"\n      :load-on-demand=\"loadOnDemand\"\n      :loading=\"loading\"\n      :pagination=\"pagination\"\n      :selectable=\"selectable\"\n      @show-more=\"showMore\"\n      @toggle-selected=\"toggleSelected\"\n    >\n      <template #filters>\n        <!-- @slot the insert a filter bar above the list -->\n        <slot name=\"filters\"></slot>\n      </template>\n      <template #header>\n        <!-- @slot the list header -->\n        <slot name=\"header\"></slot>\n      </template>\n      <template #card=\"{ model, index }\">\n        <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n        <slot name=\"card\" v-bind=\"{ model, index }\"></slot>\n      </template>\n    </neon-card-list>\n    <template v-else-if=\"!initializing && !loading && slots.emptyState\">\n      <!-- @slot page empty state rendered when there are no list items -->\n      <slot name=\"emptyState\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonListLayout.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_ctx","_createBlock","_component_neon_header","_renderSlot","_component_neon_card_list","_withCtx","model","index","_normalizeProps","_guardReactiveProps"],"mappings":"yIACOA,EAAA,CAAA,MAAM,kBAAkB,2GAA7B,OAAAC,YAAA,EAAAC,qBAmDM,MAnDNF,EAmDM,EAjDKG,EAAA,cAAgBA,EAAA,MAAM,OAAM,iBADrCC,EAAAA,YAiBcC,EAAA,OAfX,cAAaF,EAAA,WACb,aAAYA,EAAA,UACZ,YAAaA,EAAA,YACb,SAAUA,EAAA,SACV,MAAOA,EAAA,sBAEG,iBAET,IAA2B,CAA3BG,aAA2BH,EAAA,OAAA,QAAA,UAEbA,EAAA,MAAM,OAAM,QAAO,uBAGjC,IAA4B,CAA5BG,aAA4BH,EAAA,OAAA,SAAA,uHAIhCG,aAAyBH,EAAA,OAAA,MAAA,EAEjBA,EAAA,MAAM,OAAM,iBADpBC,EAAAA,YAyBiBG,EAAA,OAvBd,MAAOJ,EAAA,MACP,MAAOA,EAAA,MACP,iBAAgBA,EAAA,aAChB,QAASA,EAAA,QACT,WAAYA,EAAA,WACZ,WAAYA,EAAA,WACZ,WAAWA,EAAA,SACX,iBAAiBA,EAAA,iBAEP,kBAET,IAA4B,CAA5BG,aAA4BH,EAAA,OAAA,SAAA,IAEnB,iBAET,IAA2B,CAA3BG,aAA2BH,EAAA,OAAA,QAAA,IAElB,KAAIK,EAAAA,QAIb,CAAmD,CAJlC,MAAAC,EAAO,MAAAC,CAAK,IAAA,CAI7BJ,aAAmDH,EAAA,OAAA,OAAAQ,EAAAA,eAAAC,EAAAA,mBAAA,CAAvB,MAAAH,EAAO,MAAAC,CAAK,CAAA,CAAA,CAAA,oHAGtB,CAAAP,EAAA,cAAY,CAAKA,EAAA,SAAWA,EAAA,MAAM,WAEtDG,EAAAA,WAA+BH,EAAA,OAAA,aAAA,CAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"NeonListLayout.vue.cjs.js","sources":["../../../../src/components/layout/list-layout/NeonListLayout.vue"],"sourcesContent":["<template>\n  <div class=\"neon-list-layout\">\n    <neon-header\n      v-if=\"!initializing && items.length > 0\"\n      :back-button=\"backButton\"\n      :back-label=\"backLabel\"\n      :breadcrumbs=\"breadcrumbs\"\n      :subtitle=\"subtitle\"\n      :title=\"title\"\n    >\n      <template #labels>\n        <!-- @slot a slot for adding labels/info popovers next to the title -->\n        <slot name=\"labels\"></slot>\n      </template>\n      <template v-if=\"items.length > 0\" #actions>\n        <!-- @slot a slot for adding contextual action buttons to the header. The wrapper is provided, just add the\n        buttons here in order to apply the correct spacings -->\n        <slot name=\"actions\"></slot>\n      </template>\n    </neon-header>\n    <!-- @slot the insert a note into the page -->\n    <slot name=\"note\"></slot>\n    <neon-card-list\n      v-if=\"items.length > 0\"\n      :color=\"color\"\n      :items=\"items\"\n      :load-on-demand=\"loadOnDemand\"\n      :loading=\"loading\"\n      :pagination=\"pagination\"\n      :selectable=\"selectable\"\n      @page-change=\"(page: number) => emit('page-change', page)\"\n      @show-more=\"showMore\"\n      @toggle-selected=\"toggleSelected\"\n    >\n      <template #filters>\n        <!-- @slot the insert a filter bar above the list -->\n        <slot name=\"filters\"></slot>\n      </template>\n      <template #header>\n        <!-- @slot the list header -->\n        <slot name=\"header\"></slot>\n      </template>\n      <template #card=\"{ model, index }\">\n        <!-- @slot slot for rendering card contents, two parameters are available:\n  @binding {T} model - the model item to be rendered\n  @binding {number} index - the index of the item in the list -->\n        <slot name=\"card\" v-bind=\"{ model, index }\"></slot>\n      </template>\n    </neon-card-list>\n    <template v-else-if=\"!initializing && !loading && slots.emptyState\">\n      <!-- @slot page empty state rendered when there are no list items -->\n      <slot name=\"emptyState\"></slot>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonListLayout.ts\" />\n"],"names":["_hoisted_1","_openBlock","_createElementBlock","_ctx","_createBlock","_component_neon_header","_renderSlot","_component_neon_card_list","_cache","page","_withCtx","model","index","_normalizeProps","_guardReactiveProps"],"mappings":"yIACOA,EAAA,CAAA,MAAM,kBAAkB,2GAA7B,OAAAC,YAAA,EAAAC,qBAoDM,MApDNF,EAoDM,EAlDKG,EAAA,cAAgBA,EAAA,MAAM,OAAM,iBADrCC,EAAAA,YAiBcC,EAAA,OAfX,cAAaF,EAAA,WACb,aAAYA,EAAA,UACZ,YAAaA,EAAA,YACb,SAAUA,EAAA,SACV,MAAOA,EAAA,sBAEG,iBAET,IAA2B,CAA3BG,aAA2BH,EAAA,OAAA,QAAA,UAEbA,EAAA,MAAM,OAAM,QAAO,uBAGjC,IAA4B,CAA5BG,aAA4BH,EAAA,OAAA,SAAA,uHAIhCG,aAAyBH,EAAA,OAAA,MAAA,EAEjBA,EAAA,MAAM,OAAM,iBADpBC,EAAAA,YA0BiBG,EAAA,OAxBd,MAAOJ,EAAA,MACP,MAAOA,EAAA,MACP,iBAAgBA,EAAA,aAChB,QAASA,EAAA,QACT,WAAYA,EAAA,WACZ,WAAYA,EAAA,WACZ,aAAWK,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAGC,GAAiBN,EAAA,mBAAoBM,CAAI,GACvD,WAAWN,EAAA,SACX,iBAAiBA,EAAA,iBAEP,kBAET,IAA4B,CAA5BG,aAA4BH,EAAA,OAAA,SAAA,IAEnB,iBAET,IAA2B,CAA3BG,aAA2BH,EAAA,OAAA,QAAA,IAElB,KAAIO,EAAAA,QAIb,CAAmD,CAJlC,MAAAC,EAAO,MAAAC,CAAK,IAAA,CAI7BN,aAAmDH,EAAA,OAAA,OAAAU,EAAAA,eAAAC,EAAAA,mBAAA,CAAvB,MAAAH,EAAO,MAAAC,CAAK,CAAA,CAAA,CAAA,oHAGtB,CAAAT,EAAA,cAAY,CAAKA,EAAA,SAAWA,EAAA,MAAM,WAEtDG,EAAAA,WAA+BH,EAAA,OAAA,aAAA,CAAA,IAAA,CAAA,CAAA"}

package/dist/components/layout/list-layout/NeonListLayout.vue.es.js

@@ -1,18 +1,18 @@
-import b from "./NeonListLayout.es.js";
-import { resolveComponent as l, openBlock as t, createElementBlock as p, createBlock as a, createSlots as c, withCtx as n, renderSlot as o, createCommentVNode as s, normalizeProps as g, guardReactiveProps as u } from "vue";
-import h from "../../../_virtual/_plugin-vue_export-helper.es.js";
-const k = { class: "neon-list-layout" };
-function f(e, $, S, y, w, B) {
-  const i = l("neon-header"), r = l("neon-card-list");
-  return t(), p("div", k, [
-    !e.initializing && e.items.length > 0 ? (t(), a(i, {
+import g from "./NeonListLayout.es.js";
+import { resolveComponent as s, openBlock as a, createElementBlock as p, createBlock as i, createSlots as u, withCtx as n, renderSlot as o, createCommentVNode as r, normalizeProps as c, guardReactiveProps as h } from "vue";
+import k from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const f = { class: "neon-list-layout" };
+function $(e, l, S, y, w, B) {
+  const d = s("neon-header"), m = s("neon-card-list");
+  return a(), p("div", f, [
+    !e.initializing && e.items.length > 0 ? (a(), i(d, {
       key: 0,
       "back-button": e.backButton,
       "back-label": e.backLabel,
       breadcrumbs: e.breadcrumbs,
       subtitle: e.subtitle,
       title: e.title
-    }, c({
+    }, u({
       labels: n(() => [
         o(e.$slots, "labels")
       ]),
@@ -25,9 +25,9 @@ function f(e, $, S, y, w, B) {
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["back-button", "back-label", "breadcrumbs", "subtitle", "title"])) : s("", !0),
+    ]), 1032, ["back-button", "back-label", "breadcrumbs", "subtitle", "title"])) : r("", !0),
     o(e.$slots, "note"),
-    e.items.length > 0 ? (t(), a(r, {
+    e.items.length > 0 ? (a(), i(m, {
       key: 1,
       color: e.color,
       items: e.items,
@@ -35,6 +35,7 @@ function f(e, $, S, y, w, B) {
       loading: e.loading,
       pagination: e.pagination,
       selectable: e.selectable,
+      onPageChange: l[0] || (l[0] = (t) => e.emit("page-change", t)),
       onShowMore: e.showMore,
       onToggleSelected: e.toggleSelected
     }, {
@@ -44,14 +45,14 @@ function f(e, $, S, y, w, B) {
       header: n(() => [
         o(e.$slots, "header")
       ]),
-      card: n(({ model: d, index: m }) => [
-        o(e.$slots, "card", g(u({ model: d, index: m })))
+      card: n(({ model: t, index: b }) => [
+        o(e.$slots, "card", c(h({ model: t, index: b })))
       ]),
       _: 3
-    }, 8, ["color", "items", "load-on-demand", "loading", "pagination", "selectable", "onShowMore", "onToggleSelected"])) : !e.initializing && !e.loading && e.slots.emptyState ? o(e.$slots, "emptyState", { key: 2 }) : s("", !0)
+    }, 8, ["color", "items", "load-on-demand", "loading", "pagination", "selectable", "onShowMore", "onToggleSelected"])) : !e.initializing && !e.loading && e.slots.emptyState ? o(e.$slots, "emptyState", { key: 2 }) : r("", !0)
   ]);
 }
-const L = /* @__PURE__ */ h(b, [["render", f]]);
+const L = /* @__PURE__ */ k(g, [["render", $]]);
 export {
   L as default
 };