@aotearoan/neon 28.5.0 → 28.6.0

package/dist/components/layout/basic-layout/NeonBasicLayout.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("vue"),o=require("../../presentation/header/NeonHeader.vue.cjs.js"),r=require("../../../model/presentation/header/NeonHeaderLevel.cjs.js"),a=e.defineComponent({name:"NeonBasicLayout",components:{NeonHeader:o},props:{title:{type:String},subtitle:{type:String},breadcrumbs:{type:Array,default:()=>[]},backButton:{type:Boolean,default:!0},backLabel:{type:String,default:"Back"},stickyButtons:{type:Boolean,default:!1}},setup(n){const t=e.useSlots();return{hasHeader:e.computed(()=>n.title||t.header||t.actions),NeonHeaderLevel:r.NeonHeaderLevel}}});module.exports=a;
+//# sourceMappingURL=NeonBasicLayout.cjs.js.map

package/dist/components/layout/basic-layout/NeonBasicLayout.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonBasicLayout.cjs.js","sources":["../../../../src/components/layout/basic-layout/NeonBasicLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useSlots } from 'vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport { NeonHeaderLevel } from '@/model/presentation/header/NeonHeaderLevel';\n\n/**\n * NeonBasicLayout is a component for a basic page layout with a header (NeonHeader) followed by the page content.\n */\nexport default defineComponent({\n  name: 'NeonBasicLayout',\n  components: {\n    NeonHeader,\n  },\n  props: {\n    /** The page title */\n    title: { type: String },\n    /** The page subtitle */\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    /** Sticky button support on mobile */\n    stickyButtons: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasHeader = computed(() => {\n      return props.title || slots.header || slots.actions;\n    });\n\n    return {\n      hasHeader,\n      NeonHeaderLevel,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonHeader","props","slots","useSlots","computed","NeonHeaderLevel"],"mappings":"wKAQAA,EAAeC,kBAAgB,CAC7B,KAAM,kBACN,WAAY,CACV,WAAAC,CAAA,EAEF,MAAO,CAEL,MAAO,CAAE,KAAM,MAAA,EAEf,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,EAEpC,cAAe,CAAE,KAAM,QAAS,QAAS,EAAA,CAAM,EAEjD,MAAMC,EAAO,CACX,MAAMC,EAAQC,EAAAA,SAAA,EAMd,MAAO,CACL,UALgBC,EAAAA,SAAS,IAClBH,EAAM,OAASC,EAAM,QAAUA,EAAM,OAC7C,EAGC,gBACAG,EAAAA,eAAA,CAEJ,CACF,CAAC"}

package/dist/components/layout/basic-layout/NeonBasicLayout.es.js

@@ -0,0 +1,40 @@
+import { defineComponent as o, useSlots as a, computed as r } from "vue";
+import n from "../../presentation/header/NeonHeader.vue.es.js";
+import { NeonHeaderLevel as s } from "../../../model/presentation/header/NeonHeaderLevel.es.js";
+const c = o({
+  name: "NeonBasicLayout",
+  components: {
+    NeonHeader: n
+  },
+  props: {
+    /** The page title */
+    title: { type: String },
+    /** The page subtitle */
+    subtitle: { type: String },
+    /**
+     * Breadcrumbs to display above the header.
+     */
+    breadcrumbs: { type: Array, default: () => [] },
+    /**
+     * Whether to display a back button.
+     */
+    backButton: { type: Boolean, default: !0 },
+    /**
+     * Override the label for the back button.
+     */
+    backLabel: { type: String, default: "Back" },
+    /** Sticky button support on mobile */
+    stickyButtons: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const e = a();
+    return {
+      hasHeader: r(() => t.title || e.header || e.actions),
+      NeonHeaderLevel: s
+    };
+  }
+});
+export {
+  c as default
+};
+//# sourceMappingURL=NeonBasicLayout.es.js.map

package/dist/components/layout/basic-layout/NeonBasicLayout.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonBasicLayout.es.js","sources":["../../../../src/components/layout/basic-layout/NeonBasicLayout.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, useSlots } from 'vue';\nimport NeonHeader from '@/components/presentation/header/NeonHeader.vue';\nimport type { NeonBreadcrumbLink } from '@/model/navigation/breadcrumbs/NeonBreadcrumbLink';\nimport { NeonHeaderLevel } from '@/model/presentation/header/NeonHeaderLevel';\n\n/**\n * NeonBasicLayout is a component for a basic page layout with a header (NeonHeader) followed by the page content.\n */\nexport default defineComponent({\n  name: 'NeonBasicLayout',\n  components: {\n    NeonHeader,\n  },\n  props: {\n    /** The page title */\n    title: { type: String },\n    /** The page subtitle */\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    /** Sticky button support on mobile */\n    stickyButtons: { type: Boolean, default: false },\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasHeader = computed(() => {\n      return props.title || slots.header || slots.actions;\n    });\n\n    return {\n      hasHeader,\n      NeonHeaderLevel,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonHeader","props","slots","useSlots","computed","NeonHeaderLevel"],"mappings":";;;AAQA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV,YAAAC;AAAA,EAAA;AAAA,EAEF,OAAO;AAAA;AAAA,IAEL,OAAO,EAAE,MAAM,OAAA;AAAA;AAAA,IAEf,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,IAEpC,eAAe,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAEjD,MAAMC,GAAO;AACX,UAAMC,IAAQC,EAAA;AAMd,WAAO;AAAA,MACL,WALgBC,EAAS,MAClBH,EAAM,SAASC,EAAM,UAAUA,EAAM,OAC7C;AAAA,MAIC,iBAAAG;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

package/dist/components/layout/basic-layout/NeonBasicLayout.vue.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const s=require("./NeonBasicLayout.cjs.js"),e=require("vue"),n=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),r={class:"neon-basic-layout__container"};function l(t,i,u,b,c,d){const o=e.resolveComponent("neon-header");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([{"neon-basic-layout--with-sticky-buttons":t.stickyButtons},"neon-basic-layout"])},[e.renderSlot(t.$slots,"banner"),e.createElementVNode("div",r,[t.hasHeader?e.renderSlot(t.$slots,"header",{key:0},()=>[e.createVNode(o,{"back-button":t.backButton,"back-label":t.backLabel,breadcrumbs:t.breadcrumbs,level:t.NeonHeaderLevel.Page,subtitle:t.subtitle,title:t.title},{actions:e.withCtx(()=>[e.renderSlot(t.$slots,"actions")]),subtitle:e.withCtx(()=>[e.renderSlot(t.$slots,"subtitle")]),labels:e.withCtx(()=>[e.renderSlot(t.$slots,"labels")]),_:3},8,["back-button","back-label","breadcrumbs","level","subtitle","title"])]):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default")])],2)}const a=n(s,[["render",l]]);module.exports=a;
+//# sourceMappingURL=NeonBasicLayout.vue.cjs.js.map

package/dist/components/layout/basic-layout/NeonBasicLayout.vue.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonBasicLayout.vue.cjs.js","sources":["../../../../src/components/layout/basic-layout/NeonBasicLayout.vue"],"sourcesContent":["<template>\n  <div :class=\"{ 'neon-basic-layout--with-sticky-buttons': stickyButtons }\" class=\"neon-basic-layout\">\n    <!-- @slot display a fixed banner above the page content (NOTE: this is not a parallax scrolling 'Hero' banner, for\n    this use the neon-hero-layout component) -->\n    <slot name=\"banner\" />\n    <div class=\"neon-basic-layout__container\">\n      <!-- @slot override default header for richer content -->\n      <slot v-if=\"hasHeader\" name=\"header\">\n        <neon-header\n          :back-button=\"backButton\"\n          :back-label=\"backLabel\"\n          :breadcrumbs=\"breadcrumbs\"\n          :level=\"NeonHeaderLevel.Page\"\n          :subtitle=\"subtitle\"\n          :title=\"title\"\n        >\n          <template #actions>\n            <!-- @slot provide a list of action buttons to be placed in the header -->\n            <slot name=\"actions\"></slot>\n          </template>\n          <template #subtitle>\n            <!-- @slot override the subtitle for richer content - for simple usage just provide the subtitle property -->\n            <slot name=\"subtitle\"></slot>\n          </template>\n          <template #labels>\n            <!-- @slot provide one or more labels to be places beside the title -->\n            <slot name=\"labels\"></slot>\n          </template>\n        </neon-header>\n      </slot>\n      <!-- @slot the page contents -->\n      <slot name=\"default\"></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBasicLayout.ts\" />\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_renderSlot","_createElementVNode","_createVNode","_component_neon_header"],"mappings":"0IAKSA,EAAA,CAAA,MAAM,8BAA8B,yFAJ3CC,EAAAA,mBAgCM,MAAA,CAhCA,MAAKC,EAAAA,eAAA,CAAA,CAAA,yCAA8CC,EAAA,aAAa,EAAU,mBAAmB,CAAA,IAGjGC,aAAsBD,EAAA,OAAA,QAAA,EACtBE,EAAAA,mBA2BM,MA3BNL,EA2BM,CAzBQG,EAAA,UAAZC,EAAAA,WAsBOD,0BAtBP,IAsBO,CArBLG,EAAAA,YAoBcC,EAAA,CAnBX,cAAaJ,EAAA,WACb,aAAYA,EAAA,UACZ,YAAaA,EAAA,YACb,MAAOA,EAAA,gBAAgB,KACvB,SAAUA,EAAA,SACV,MAAOA,EAAA,QAEG,kBAET,IAA4B,CAA5BC,aAA4BD,EAAA,OAAA,SAAA,IAEnB,mBAET,IAA6B,CAA7BC,aAA6BD,EAAA,OAAA,UAAA,IAEpB,iBAET,IAA2B,CAA3BC,aAA2BD,EAAA,OAAA,QAAA,gHAKjCC,aAA4BD,EAAA,OAAA,SAAA"}

package/dist/components/layout/basic-layout/NeonBasicLayout.vue.es.js

@@ -0,0 +1,41 @@
+import a from "./NeonBasicLayout.es.js";
+import { resolveComponent as l, openBlock as n, createElementBlock as r, normalizeClass as b, renderSlot as t, createElementVNode as i, createVNode as c, withCtx as o, createCommentVNode as u } from "vue";
+import d from "../../../_virtual/_plugin-vue_export-helper.es.js";
+const m = { class: "neon-basic-layout__container" };
+function p(e, k, $, f, h, y) {
+  const s = l("neon-header");
+  return n(), r("div", {
+    class: b([{ "neon-basic-layout--with-sticky-buttons": e.stickyButtons }, "neon-basic-layout"])
+  }, [
+    t(e.$slots, "banner"),
+    i("div", m, [
+      e.hasHeader ? t(e.$slots, "header", { key: 0 }, () => [
+        c(s, {
+          "back-button": e.backButton,
+          "back-label": e.backLabel,
+          breadcrumbs: e.breadcrumbs,
+          level: e.NeonHeaderLevel.Page,
+          subtitle: e.subtitle,
+          title: e.title
+        }, {
+          actions: o(() => [
+            t(e.$slots, "actions")
+          ]),
+          subtitle: o(() => [
+            t(e.$slots, "subtitle")
+          ]),
+          labels: o(() => [
+            t(e.$slots, "labels")
+          ]),
+          _: 3
+        }, 8, ["back-button", "back-label", "breadcrumbs", "level", "subtitle", "title"])
+      ]) : u("", !0),
+      t(e.$slots, "default")
+    ])
+  ], 2);
+}
+const C = /* @__PURE__ */ d(a, [["render", p]]);
+export {
+  C as default
+};
+//# sourceMappingURL=NeonBasicLayout.vue.es.js.map

package/dist/components/layout/basic-layout/NeonBasicLayout.vue.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeonBasicLayout.vue.es.js","sources":["../../../../src/components/layout/basic-layout/NeonBasicLayout.vue"],"sourcesContent":["<template>\n  <div :class=\"{ 'neon-basic-layout--with-sticky-buttons': stickyButtons }\" class=\"neon-basic-layout\">\n    <!-- @slot display a fixed banner above the page content (NOTE: this is not a parallax scrolling 'Hero' banner, for\n    this use the neon-hero-layout component) -->\n    <slot name=\"banner\" />\n    <div class=\"neon-basic-layout__container\">\n      <!-- @slot override default header for richer content -->\n      <slot v-if=\"hasHeader\" name=\"header\">\n        <neon-header\n          :back-button=\"backButton\"\n          :back-label=\"backLabel\"\n          :breadcrumbs=\"breadcrumbs\"\n          :level=\"NeonHeaderLevel.Page\"\n          :subtitle=\"subtitle\"\n          :title=\"title\"\n        >\n          <template #actions>\n            <!-- @slot provide a list of action buttons to be placed in the header -->\n            <slot name=\"actions\"></slot>\n          </template>\n          <template #subtitle>\n            <!-- @slot override the subtitle for richer content - for simple usage just provide the subtitle property -->\n            <slot name=\"subtitle\"></slot>\n          </template>\n          <template #labels>\n            <!-- @slot provide one or more labels to be places beside the title -->\n            <slot name=\"labels\"></slot>\n          </template>\n        </neon-header>\n      </slot>\n      <!-- @slot the page contents -->\n      <slot name=\"default\"></slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonBasicLayout.ts\" />\n"],"names":["_hoisted_1","_createElementBlock","_normalizeClass","_ctx","_renderSlot","_createElementVNode","_createVNode","_component_neon_header"],"mappings":";;;AAKS,MAAAA,IAAA,EAAA,OAAM,+BAA8B;;;cAJ3CC,EAgCM,OAAA;AAAA,IAhCA,OAAKC,EAAA,CAAA,EAAA,0CAA8CC,EAAA,cAAa,GAAU,mBAAmB,CAAA;AAAA;IAGjGC,EAAsBD,EAAA,QAAA,QAAA;AAAA,IACtBE,EA2BM,OA3BNL,GA2BM;AAAA,MAzBQG,EAAA,YAAZC,EAsBOD,gCAtBP,MAsBO;AAAA,QArBLG,EAoBcC,GAAA;AAAA,UAnBX,eAAaJ,EAAA;AAAA,UACb,cAAYA,EAAA;AAAA,UACZ,aAAaA,EAAA;AAAA,UACb,OAAOA,EAAA,gBAAgB;AAAA,UACvB,UAAUA,EAAA;AAAA,UACV,OAAOA,EAAA;AAAA;UAEG,WAET,MAA4B;AAAA,YAA5BC,EAA4BD,EAAA,QAAA,SAAA;AAAA;UAEnB,YAET,MAA6B;AAAA,YAA7BC,EAA6BD,EAAA,QAAA,UAAA;AAAA;UAEpB,UAET,MAA2B;AAAA,YAA3BC,EAA2BD,EAAA,QAAA,QAAA;AAAA;;;;MAKjCC,EAA4BD,EAAA,QAAA,SAAA;AAAA;;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";const o=require("vue"),N=require("../../user-input/button/NeonButton.vue.cjs.js"),m=require("../inline/NeonInline.vue.cjs.js"),f=require("../../navigation/link/NeonLink.vue.cjs.js"),g=require("../../navigation/pagination/NeonPagination.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"),y=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),L=require("./selectable-card/NeonSelectableCard.vue.cjs.js"),O=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),h=require("../../feedback/loading-state-card/NeonLoadingStateCard.vue.cjs.js"),p=o.defineComponent({name:"NeonCardList",components:{NeonSelectableCard:L,NeonPagination:g,NeonButton:N,NeonInline:m,NeonLink:f,NeonLoadingStateCard:h,NeonSplashLoader:O},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(n,{emit:r,slots:i}){const a=o.ref(void 0),l=o.computed(()=>{if(!n.pagination&&n.loadOnDemand)return n.loadOnDemand.ofLabel??"of"}),u=o.computed(()=>{var e;if(!n.pagination)return((e=n.loadOnDemand)==null?void 0:e.showMoreLabel)??"Show more"}),c=o.computed(()=>{var e;if(!n.pagination)return((e=n.loadOnDemand)==null?void 0:e.endOfResultsLabel)??"End of results"}),s=o.computed(()=>{var e,t;return((e=n.loadOnDemand)==null?void 0:e.total)??((t=n.pagination)==null?void 0:t.total)??0}),d=e=>{var t;(t=a.value)!=null&&t.scrollTo&&a.value.scrollTo({top:0,left:0,behavior:"instant"}),r("page-change",e)};return{emit:r,n:y.NeonNumberUtils.formatNumber,NeonButtonStyle:b.NeonButtonStyle,NeonFunctionalColor:S.NeonFunctionalColor,NeonSize:q.NeonSize,ofLabel:l,showMoreLabel:u,endOfResultsLabel:c,total:s,slots:i,cards:a,onPageChange:d}}});module.exports=p;
+"use strict";const n=require("vue"),N=require("../../user-input/button/NeonButton.vue.cjs.js"),m=require("../inline/NeonInline.vue.cjs.js"),g=require("../../navigation/link/NeonLink.vue.cjs.js"),S=require("../../navigation/pagination/NeonPagination.vue.cjs.js"),b=require("../../../model/user-input/button/NeonButtonStyle.cjs.js"),f=require("../../../model/common/size/NeonSize.cjs.js"),q=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),r=require("../../../utils/common/number/NeonNumberUtils.cjs.js"),y=require("./selectable-card/NeonSelectableCard.vue.cjs.js"),p=require("../../feedback/splash-loader/NeonSplashLoader.vue.cjs.js"),C=require("../../feedback/loading-state-card/NeonLoadingStateCard.vue.cjs.js"),L=require("../../../model/common/state/NeonState.cjs.js"),h=require("../../../model/layout/card-list/NeonCardListStyle.cjs.js"),O=n.defineComponent({name:"NeonCardList",components:{NeonSelectableCard:y,NeonPagination:S,NeonButton:N,NeonInline:m,NeonLink:g,NeonLoadingStateCard:C,NeonSplashLoader:p},props:{items:{type:Array,required:!0},color:{type:String,default:null},listStyle:{type:String,default:()=>h.NeonCardListStyle.List},selectable:{type:Boolean,default:!1},loadOnDemand:{type:Object},pagination:{type:Object},loading:{type:Boolean}},emits:["page-change","show-more","toggle-selected"],setup(e,{emit:l,slots:i}){const a=n.ref(void 0),u=n.computed(()=>{if(!e.pagination&&e.loadOnDemand)return(e.loadOnDemand.resultCountLabel??"Showing {count} of {total}").replace("{count}",r.NeonNumberUtils.formatNumber(e.items.length)).replace("{total}",r.NeonNumberUtils.formatNumber(e.loadOnDemand.total))}),c=n.computed(()=>{var t;if(!e.pagination)return((t=e.loadOnDemand)==null?void 0:t.showMoreLabel)??"Load more"}),s=n.computed(()=>{var t,o;return((t=e.loadOnDemand)==null?void 0:t.total)??((o=e.pagination)==null?void 0:o.total)??0}),d=t=>{var o;(o=a.value)!=null&&o.scrollTo&&a.value.scrollTo({top:0,left:0,behavior:"instant"}),l("page-change",t)};return{emit:l,n:r.NeonNumberUtils.formatNumber,NeonButtonStyle:b.NeonButtonStyle,NeonFunctionalColor:q.NeonFunctionalColor,NeonSize:f.NeonSize,showMoreLabel:c,resultCountLabel:u,total:s,slots:i,cards:a,onPageChange:d,NeonState:L.NeonState}}});module.exports=O;
 //# 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, ref } 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 { 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';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.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    NeonLoadingStateCard,\n    NeonSplashLoader,\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 cards = ref<HTMLDivElement | undefined>(undefined);\n\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    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\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      cards,\n      onPageChange,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonLoadingStateCard","NeonSplashLoader","props","emit","slots","cards","ref","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","onPageChange","newPage","NeonNumberUtils","NeonButtonStyle","NeonFunctionalColor","NeonSize"],"mappings":"0tBAyBAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,qBAAAC,EACA,iBAAAC,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,EAAQC,EAAAA,IAAgC,MAAS,EAEjDC,EAAUC,EAAAA,SAAS,IAAM,CAC7B,GAAI,CAACN,EAAM,YAAcA,EAAM,aAC7B,OAAOA,EAAM,aAAa,SAAW,IAIzC,CAAC,EAEKO,EAAgBD,EAAAA,SAAS,IAAM,OACnC,GAAI,CAACN,EAAM,WACT,QAAOQ,EAAAR,EAAM,eAAN,YAAAQ,EAAoB,gBAAiB,WAIhD,CAAC,EAEKC,EAAoBH,EAAAA,SAAS,IAAM,OACvC,GAAI,CAACN,EAAM,WACT,QAAOQ,EAAAR,EAAM,eAAN,YAAAQ,EAAoB,oBAAqB,gBAIpD,CAAC,EAEKE,EAAQJ,WAAS,IAAA,SAAM,QAAAE,EAAAR,EAAM,eAAN,YAAAQ,EAAoB,UAASG,EAAAX,EAAM,aAAN,YAAAW,EAAkB,QAAS,EAAC,EAEhFC,EAAgBC,GAAoB,QACpCL,EAAAL,EAAM,QAAN,MAAAK,EAAa,UACfL,EAAM,MAAM,SAAS,CACnB,IAAK,EACL,KAAM,EACN,SAAU,SAAA,CACX,EAGHF,EAAK,cAAeY,CAAO,CAC7B,EAEA,MAAO,CACL,KAAAZ,EACA,EAAGa,EAAAA,gBAAgB,aAAA,gBACnBC,EAAAA,gBAAA,oBACAC,EAAAA,oBAAA,SACAC,EAAAA,SACA,QAAAZ,EACA,cAAAE,EACA,kBAAAE,EACA,MAAAC,EACA,MAAAR,EACA,MAAAC,EACA,aAAAS,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, ref } 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 { 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';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.vue';\nimport { NeonState } from '@/model/common/state/NeonState';\nimport { NeonCardListStyle } from '@/model/layout/card-list/NeonCardListStyle';\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 (Showing x of y) and a <em>Load 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    NeonLoadingStateCard,\n    NeonSplashLoader,\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     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.\n     */\n    listStyle: { type: String as () => NeonCardListStyle, default: () => NeonCardListStyle.List },\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 loading state 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 'Load 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 cards = ref<HTMLDivElement | undefined>(undefined);\n\n    const resultCountLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        const template = props.loadOnDemand.resultCountLabel ?? 'Showing {count} of {total}';\n        return template\n          .replace('{count}', NeonNumberUtils.formatNumber(props.items.length))\n          .replace('{total}', NeonNumberUtils.formatNumber(props.loadOnDemand.total));\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Load more';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      showMoreLabel,\n      resultCountLabel,\n      total,\n      slots,\n      cards,\n      onPageChange,\n      NeonState,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonLoadingStateCard","NeonSplashLoader","NeonCardListStyle","props","emit","slots","cards","ref","resultCountLabel","computed","NeonNumberUtils","showMoreLabel","_a","total","_b","onPageChange","newPage","NeonButtonStyle","NeonFunctionalColor","NeonSize","NeonState"],"mappings":"01BA2BAA,EAAeC,kBAAgB,CAC7B,KAAM,eACN,WAAY,CACV,mBAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,EACA,qBAAAC,EACA,iBAAAC,CAAA,EAEF,MAAO,CAIL,MAAO,CACL,KAAM,MACN,SAAU,EAAA,EAKZ,MAAO,CAAE,KAAM,OAAqC,QAAS,IAAA,EAI7D,UAAW,CAAE,KAAM,OAAmC,QAAS,IAAMC,EAAAA,kBAAkB,IAAA,EAIvF,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,EAAQC,EAAAA,IAAgC,MAAS,EAEjDC,EAAmBC,EAAAA,SAAS,IAAM,CACtC,GAAI,CAACN,EAAM,YAAcA,EAAM,aAE7B,OADiBA,EAAM,aAAa,kBAAoB,8BAErD,QAAQ,UAAWO,EAAAA,gBAAgB,aAAaP,EAAM,MAAM,MAAM,CAAC,EACnE,QAAQ,UAAWO,EAAAA,gBAAgB,aAAaP,EAAM,aAAa,KAAK,CAAC,CAIhF,CAAC,EAEKQ,EAAgBF,EAAAA,SAAS,IAAM,OACnC,GAAI,CAACN,EAAM,WACT,QAAOS,EAAAT,EAAM,eAAN,YAAAS,EAAoB,gBAAiB,WAIhD,CAAC,EAEKC,EAAQJ,WAAS,IAAA,SAAM,QAAAG,EAAAT,EAAM,eAAN,YAAAS,EAAoB,UAASE,EAAAX,EAAM,aAAN,YAAAW,EAAkB,QAAS,EAAC,EAEhFC,EAAgBC,GAAoB,QACpCJ,EAAAN,EAAM,QAAN,MAAAM,EAAa,UACfN,EAAM,MAAM,SAAS,CACnB,IAAK,EACL,KAAM,EACN,SAAU,SAAA,CACX,EAGHF,EAAK,cAAeY,CAAO,CAC7B,EAEA,MAAO,CACL,KAAAZ,EACA,EAAGM,EAAAA,gBAAgB,aAAA,gBACnBO,EAAAA,gBAAA,oBACAC,EAAAA,oBAAA,SACAC,EAAAA,SACA,cAAAR,EACA,iBAAAH,EACA,MAAAK,EACA,MAAAR,EACA,MAAAC,EACA,aAAAS,EAAA,UACAK,EAAAA,SAAA,CAEJ,CACF,CAAC"}

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

@@ -1,25 +1,27 @@
-import { defineComponent as u, ref as c, computed as t } from "vue";
+import { defineComponent as c, ref as s, computed as a } from "vue";
 import p from "../../user-input/button/NeonButton.vue.es.js";
 import g from "../inline/NeonInline.vue.es.js";
 import N from "../../navigation/link/NeonLink.vue.es.js";
 import b from "../../navigation/pagination/NeonPagination.vue.es.js";
-import { NeonButtonStyle as L } from "../../../model/user-input/button/NeonButtonStyle.es.js";
-import { NeonSize as O } from "../../../model/common/size/NeonSize.es.js";
-import { NeonFunctionalColor as h } from "../../../model/common/color/NeonFunctionalColor.es.js";
-import { NeonNumberUtils as y } from "../../../utils/common/number/NeonNumberUtils.es.js";
-import v from "./selectable-card/NeonSelectableCard.vue.es.js";
-import S from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
-import C from "../../feedback/loading-state-card/NeonLoadingStateCard.vue.es.js";
-const z = u({
+import { NeonButtonStyle as y } from "../../../model/user-input/button/NeonButtonStyle.es.js";
+import { NeonSize as L } from "../../../model/common/size/NeonSize.es.js";
+import { NeonFunctionalColor as S } from "../../../model/common/color/NeonFunctionalColor.es.js";
+import { NeonNumberUtils as r } from "../../../utils/common/number/NeonNumberUtils.es.js";
+import h from "./selectable-card/NeonSelectableCard.vue.es.js";
+import C from "../../feedback/splash-loader/NeonSplashLoader.vue.es.js";
+import O from "../../feedback/loading-state-card/NeonLoadingStateCard.vue.es.js";
+import { NeonState as v } from "../../../model/common/state/NeonState.es.js";
+import { NeonCardListStyle as D } from "../../../model/layout/card-list/NeonCardListStyle.es.js";
+const U = c({
   name: "NeonCardList",
   components: {
-    NeonSelectableCard: v,
+    NeonSelectableCard: h,
     NeonPagination: b,
     NeonButton: p,
     NeonInline: g,
     NeonLink: N,
-    NeonLoadingStateCard: C,
-    NeonSplashLoader: S
+    NeonLoadingStateCard: O,
+    NeonSplashLoader: C
   },
   props: {
     /**
@@ -33,6 +35,10 @@ const z = u({
      * * Specify a selection, hover & pagination accent color for the cards.
      */
     color: { type: String, default: null },
+    /**
+     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.
+     */
+    listStyle: { type: String, default: () => D.List },
     /**
      * Make cards selectable.
      */
@@ -46,7 +52,7 @@ const z = u({
      */
     pagination: { type: Object },
     /**
-     * Show splash loader when loading new items.
+     * Show loading state when loading new items.
      */
     loading: { type: Boolean }
   },
@@ -59,7 +65,7 @@ const z = u({
      */
     "page-change",
     /**
-     * Emitted when the 'Show more' button is clicked in "on demand" mode.
+     * Emitted when the 'Load more' button is clicked in "on demand" mode.
      * @type {void}
      */
     "show-more",
@@ -69,46 +75,42 @@ const z = u({
      */
     "toggle-selected"
   ],
-  setup(e, { emit: r, slots: i }) {
-    const a = c(void 0), l = t(() => {
-      if (!e.pagination && e.loadOnDemand)
-        return e.loadOnDemand.ofLabel ?? "of";
-    }), m = t(() => {
-      var o;
-      if (!e.pagination)
-        return ((o = e.loadOnDemand) == null ? void 0 : o.showMoreLabel) ?? "Show more";
-    }), d = t(() => {
-      var o;
-      if (!e.pagination)
-        return ((o = e.loadOnDemand) == null ? void 0 : o.endOfResultsLabel) ?? "End of results";
-    }), f = t(() => {
-      var o, n;
-      return ((o = e.loadOnDemand) == null ? void 0 : o.total) ?? ((n = e.pagination) == null ? void 0 : n.total) ?? 0;
-    }), s = (o) => {
-      var n;
-      (n = a.value) != null && n.scrollTo && a.value.scrollTo({
+  setup(o, { emit: l, slots: m }) {
+    const n = s(void 0), i = a(() => {
+      if (!o.pagination && o.loadOnDemand)
+        return (o.loadOnDemand.resultCountLabel ?? "Showing {count} of {total}").replace("{count}", r.formatNumber(o.items.length)).replace("{total}", r.formatNumber(o.loadOnDemand.total));
+    }), d = a(() => {
+      var e;
+      if (!o.pagination)
+        return ((e = o.loadOnDemand) == null ? void 0 : e.showMoreLabel) ?? "Load more";
+    }), f = a(() => {
+      var e, t;
+      return ((e = o.loadOnDemand) == null ? void 0 : e.total) ?? ((t = o.pagination) == null ? void 0 : t.total) ?? 0;
+    }), u = (e) => {
+      var t;
+      (t = n.value) != null && t.scrollTo && n.value.scrollTo({
         top: 0,
         left: 0,
         behavior: "instant"
-      }), r("page-change", o);
+      }), l("page-change", e);
     };
     return {
-      emit: r,
-      n: y.formatNumber,
-      NeonButtonStyle: L,
-      NeonFunctionalColor: h,
-      NeonSize: O,
-      ofLabel: l,
-      showMoreLabel: m,
-      endOfResultsLabel: d,
+      emit: l,
+      n: r.formatNumber,
+      NeonButtonStyle: y,
+      NeonFunctionalColor: S,
+      NeonSize: L,
+      showMoreLabel: d,
+      resultCountLabel: i,
       total: f,
-      slots: i,
-      cards: a,
-      onPageChange: s
+      slots: m,
+      cards: n,
+      onPageChange: u,
+      NeonState: v
     };
   }
 });
 export {
-  z as default
+  U as default
 };
 //# sourceMappingURL=NeonCardList.es.js.map

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, ref } 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 { 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';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.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    NeonLoadingStateCard,\n    NeonSplashLoader,\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 cards = ref<HTMLDivElement | undefined>(undefined);\n\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    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\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      cards,\n      onPageChange,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonLoadingStateCard","NeonSplashLoader","props","emit","slots","cards","ref","ofLabel","computed","showMoreLabel","_a","endOfResultsLabel","total","_b","onPageChange","newPage","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,sBAAAC;AAAA,IACA,kBAAAC;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,IAAQC,EAAgC,MAAS,GAEjDC,IAAUC,EAAS,MAAM;AAC7B,UAAI,CAACN,EAAM,cAAcA,EAAM;AAC7B,eAAOA,EAAM,aAAa,WAAW;AAAA,IAIzC,CAAC,GAEKO,IAAgBD,EAAS,MAAM;;AACnC,UAAI,CAACN,EAAM;AACT,iBAAOQ,IAAAR,EAAM,iBAAN,gBAAAQ,EAAoB,kBAAiB;AAAA,IAIhD,CAAC,GAEKC,IAAoBH,EAAS,MAAM;;AACvC,UAAI,CAACN,EAAM;AACT,iBAAOQ,IAAAR,EAAM,iBAAN,gBAAAQ,EAAoB,sBAAqB;AAAA,IAIpD,CAAC,GAEKE,IAAQJ,EAAS,MAAA;;AAAM,eAAAE,IAAAR,EAAM,iBAAN,gBAAAQ,EAAoB,YAASG,IAAAX,EAAM,eAAN,gBAAAW,EAAkB,UAAS;AAAA,KAAC,GAEhFC,IAAe,CAACC,MAAoB;;AACxC,OAAIL,IAAAL,EAAM,UAAN,QAAAK,EAAa,YACfL,EAAM,MAAM,SAAS;AAAA,QACnB,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,MAAA,CACX,GAGHF,EAAK,eAAeY,CAAO;AAAA,IAC7B;AAEA,WAAO;AAAA,MACL,MAAAZ;AAAA,MACA,GAAGa,EAAgB;AAAA,MACnB,iBAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,SAAAZ;AAAA,MACA,eAAAE;AAAA,MACA,mBAAAE;AAAA,MACA,OAAAC;AAAA,MACA,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,cAAAS;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, ref } 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 { 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';\nimport NeonLoadingStateCard from '@/components/feedback/loading-state-card/NeonLoadingStateCard.vue';\nimport { NeonState } from '@/model/common/state/NeonState';\nimport { NeonCardListStyle } from '@/model/layout/card-list/NeonCardListStyle';\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 (Showing x of y) and a <em>Load 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    NeonLoadingStateCard,\n    NeonSplashLoader,\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     * Specify the card list layout, either a 'List' of cards with 100% width or a responsive 'Grid' of cards.\n     */\n    listStyle: { type: String as () => NeonCardListStyle, default: () => NeonCardListStyle.List },\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 loading state 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 'Load 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 cards = ref<HTMLDivElement | undefined>(undefined);\n\n    const resultCountLabel = computed(() => {\n      if (!props.pagination && props.loadOnDemand) {\n        const template = props.loadOnDemand.resultCountLabel ?? 'Showing {count} of {total}';\n        return template\n          .replace('{count}', NeonNumberUtils.formatNumber(props.items.length))\n          .replace('{total}', NeonNumberUtils.formatNumber(props.loadOnDemand.total));\n      }\n\n      return undefined;\n    });\n\n    const showMoreLabel = computed(() => {\n      if (!props.pagination) {\n        return props.loadOnDemand?.showMoreLabel ?? 'Load more';\n      }\n\n      return undefined;\n    });\n\n    const total = computed(() => props.loadOnDemand?.total ?? props.pagination?.total ?? 0);\n\n    const onPageChange = (newPage: number) => {\n      if (cards.value?.scrollTo) {\n        cards.value.scrollTo({\n          top: 0,\n          left: 0,\n          behavior: 'instant' as ScrollBehavior,\n        });\n      }\n\n      emit('page-change', newPage);\n    };\n\n    return {\n      emit,\n      n: NeonNumberUtils.formatNumber,\n      NeonButtonStyle,\n      NeonFunctionalColor,\n      NeonSize,\n      showMoreLabel,\n      resultCountLabel,\n      total,\n      slots,\n      cards,\n      onPageChange,\n      NeonState,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonSelectableCard","NeonPagination","NeonButton","NeonInline","NeonLink","NeonLoadingStateCard","NeonSplashLoader","NeonCardListStyle","props","emit","slots","cards","ref","resultCountLabel","computed","NeonNumberUtils","showMoreLabel","_a","total","_b","onPageChange","newPage","NeonButtonStyle","NeonFunctionalColor","NeonSize","NeonState"],"mappings":";;;;;;;;;;;;;;AA2BA,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,sBAAAC;AAAA,IACA,kBAAAC;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,WAAW,EAAE,MAAM,QAAmC,SAAS,MAAMC,EAAkB,KAAA;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;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,IAAQC,EAAgC,MAAS,GAEjDC,IAAmBC,EAAS,MAAM;AACtC,UAAI,CAACN,EAAM,cAAcA,EAAM;AAE7B,gBADiBA,EAAM,aAAa,oBAAoB,8BAErD,QAAQ,WAAWO,EAAgB,aAAaP,EAAM,MAAM,MAAM,CAAC,EACnE,QAAQ,WAAWO,EAAgB,aAAaP,EAAM,aAAa,KAAK,CAAC;AAAA,IAIhF,CAAC,GAEKQ,IAAgBF,EAAS,MAAM;;AACnC,UAAI,CAACN,EAAM;AACT,iBAAOS,IAAAT,EAAM,iBAAN,gBAAAS,EAAoB,kBAAiB;AAAA,IAIhD,CAAC,GAEKC,IAAQJ,EAAS,MAAA;;AAAM,eAAAG,IAAAT,EAAM,iBAAN,gBAAAS,EAAoB,YAASE,IAAAX,EAAM,eAAN,gBAAAW,EAAkB,UAAS;AAAA,KAAC,GAEhFC,IAAe,CAACC,MAAoB;;AACxC,OAAIJ,IAAAN,EAAM,UAAN,QAAAM,EAAa,YACfN,EAAM,MAAM,SAAS;AAAA,QACnB,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,MAAA,CACX,GAGHF,EAAK,eAAeY,CAAO;AAAA,IAC7B;AAEA,WAAO;AAAA,MACL,MAAAZ;AAAA,MACA,GAAGM,EAAgB;AAAA,MACnB,iBAAAO;AAAA,MACA,qBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,eAAAR;AAAA,MACA,kBAAAH;AAAA,MACA,OAAAK;AAAA,MACA,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,cAAAS;AAAA,MACA,WAAAK;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

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

@@ -1,2 +1,2 @@
-"use strict";const m=require("./NeonCardList.cjs.js"),e=require("vue"),k=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),u={class:"neon-card-list"},g={key:0,class:"neon-card-list__total"},_={ref:"cards",class:"neon-card-list__cards"},B={class:"neon-card-list__card"},y={key:0,class:"neon-card-list__results-end"};function C(o,t,h,b,S,$){const r=e.resolveComponent("neon-inline"),a=e.resolveComponent("neon-loading-state-card"),s=e.resolveComponent("neon-link"),d=e.resolveComponent("neon-selectable-card"),i=e.resolveComponent("neon-button"),c=e.resolveComponent("neon-pagination");return e.openBlock(),e.createElementBlock("div",u,[e.renderSlot(o.$slots,"filters"),o.slots.header||o.loadOnDemand?(e.openBlock(),e.createBlock(r,{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.createElementVNode("div",_,[(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,[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))])]),_:2},1032,["class","href"])):o.selectable?(e.openBlock(),e.createBlock(d,{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":p=>o.emit("toggle-selected",n.model.id,p)},{default:e.withCtx(()=>[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))]),_:2},1032,["class","disabled","model-value","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("div",{key:`${n.model.id??l}-card`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled},"neon-card-list__card"])},[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))],2))],64))),256))],512),o.loadOnDemand?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.items.length===o.total?(e.openBlock(),e.createElementBlock("span",y,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:t[0]||(t[0]=n=>o.emit("show-more",n))},null,8,["button-style","color","label","size"]))],64)):o.pagination?(e.openBlock(),e.createBlock(c,{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:o.onPageChange},null,8,["color","display-first-and-last","page","page-size","total","url-template","onPageChange"])):e.createCommentVNode("",!0)])}const f=k(m,[["render",C]]);module.exports=f;
+"use strict";const m=require("./NeonCardList.cjs.js"),e=require("vue"),u=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),k={ref:"cards",class:"neon-card-list__cards"},g={class:"neon-card-list__card"},_={key:0,class:"neon-card-list__result-count-label"};function C(o,t,f,y,b,h){const r=e.resolveComponent("neon-inline"),a=e.resolveComponent("neon-loading-state-card"),s=e.resolveComponent("neon-link"),d=e.resolveComponent("neon-selectable-card"),i=e.resolveComponent("neon-button"),c=e.resolveComponent("neon-pagination");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([`neon-card-list--${o.listStyle}`,"neon-card-list"])},[e.renderSlot(o.$slots,"filters"),o.slots.header?(e.openBlock(),e.createBlock(r,{key:0,class:"neon-card-list__header"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"header")]),_:3})):e.createCommentVNode("",!0),e.createElementVNode("div",k,[(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",g,[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))])]),_:2},1032,["class","href"])):o.selectable?(e.openBlock(),e.createBlock(d,{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":p=>o.emit("toggle-selected",n.model.id,p)},{default:e.withCtx(()=>[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))]),_:2},1032,["class","disabled","model-value","onUpdate:modelValue"])):(e.openBlock(),e.createElementBlock("div",{key:`${n.model.id??l}-card`,class:e.normalizeClass([{"neon-card-list__card--disabled":n.disabled},"neon-card-list__card"])},[o.pagination&&o.loading?e.renderSlot(o.$slots,"loadingStateCard",{key:0},()=>[e.createVNode(a)]):(e.openBlock(),e.createBlock(e.Transition,{key:1,mode:"out-in",name:"neon-fade-transition"},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"card",e.mergeProps({ref_for:!0},{model:n.model,index:l}))]),_:2},1024))],2))],64))),256))],512),o.loadOnDemand?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.resultCountLabel?(e.openBlock(),e.createElementBlock("span",_,e.toDisplayString(o.resultCountLabel),1)):e.createCommentVNode("",!0),o.items.length<o.total?(e.openBlock(),e.createBlock(i,{key:1,label:o.showMoreLabel,size:o.NeonSize.Large,state:o.loading?o.NeonState.Loading:o.NeonState.Ready,class:"neon-card-list__show-more",onClick:t[0]||(t[0]=n=>o.emit("show-more",n))},null,8,["label","size","state"])):e.createCommentVNode("",!0)],64)):o.pagination?(e.openBlock(),e.createBlock(c,{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:o.onPageChange},null,8,["color","display-first-and-last","page","page-size","total","url-template","onPageChange"])):e.createCommentVNode("",!0)],2)}const B=u(m,[["render",C]]);module.exports=B;
 //# 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    <div ref=\"cards\" class=\"neon-card-list__cards\">\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 override the default loading state card -->\n            <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n              <neon-loading-state-card />\n            </slot>\n            <template v-else>\n              <transition mode=\"out-in\" name=\"neon-fade-transition\">\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              </transition>\n            </template>\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 override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-card`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </div>\n      </template>\n    </div>\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=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_1","_hoisted_4","_openBlock","_createElementBlock","_renderSlot","_ctx","_createBlock","_component_neon_inline","_hoisted_2","_toDisplayString","_createElementVNode","_hoisted_3","_Fragment","_renderList","item","index","_component_neon_link","_normalizeClass","_createVNode","_component_neon_loading_state_card","_Transition","_mergeProps","_component_neon_selectable_card","$event","_hoisted_5","_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--${listStyle}`\" 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\" class=\"neon-card-list__header\">\n      <!-- @slot slot for providing titles for the card list -->\n      <slot name=\"header\"></slot>\n    </neon-inline>\n    <div ref=\"cards\" class=\"neon-card-list__cards\">\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 override the default loading state card -->\n            <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n              <neon-loading-state-card />\n            </slot>\n            <template v-else>\n              <transition mode=\"out-in\" name=\"neon-fade-transition\">\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              </transition>\n            </template>\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 override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </neon-selectable-card>\n        <div\n          v-else\n          :key=\"`${item.model.id ?? index}-card`\"\n          :class=\"{ 'neon-card-list__card--disabled': item.disabled }\"\n          class=\"neon-card-list__card\"\n        >\n          <!-- @slot override the default loading state card -->\n          <slot v-if=\"pagination && loading\" name=\"loadingStateCard\">\n            <neon-loading-state-card />\n          </slot>\n          <template v-else>\n            <transition mode=\"out-in\" name=\"neon-fade-transition\">\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            </transition>\n          </template>\n        </div>\n      </template>\n    </div>\n    <template v-if=\"loadOnDemand\">\n      <span v-if=\"resultCountLabel\" class=\"neon-card-list__result-count-label\">{{ resultCountLabel }}</span>\n      <neon-button\n        v-if=\"items.length < total\"\n        :label=\"showMoreLabel\"\n        :size=\"NeonSize.Large\"\n        :state=\"loading ? NeonState.Loading : NeonState.Ready\"\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=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" src=\"./NeonCardList.ts\"></script>\n"],"names":["_hoisted_2","_createElementBlock","_normalizeClass","_ctx","_renderSlot","_createBlock","_component_neon_inline","_createElementVNode","_hoisted_1","_openBlock","_Fragment","_renderList","item","index","_component_neon_link","_createVNode","_component_neon_loading_state_card","_Transition","_mergeProps","_component_neon_selectable_card","$event","_hoisted_3","_toDisplayString","_component_neon_button","_cache","_component_neon_pagination"],"mappings":"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"}