@enki-tek/fms-web-components 0.1.8 → 0.1.11

package/components/Charts/Barchart.svelte

@@ -1,74 +1,44 @@
 <!-- src/BarChart.svelte -->
 <script>
-    import { onMount, onDestroy } from 'svelte';
-    import { Chart, registerables } from 'chart.js';
-  
-    // Register all necessary components
-    Chart.register(...registerables);
-  
-    let chart;
-    let canvas;
-  
-    // Chart configuration
-    const chartData = {
-      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-      datasets: [
-        {
-          label: '# of Votes',
-          backgroundColor: [
-            'rgba(255, 99, 132, 0.2)',
-            'rgba(54, 162, 235, 0.2)',
-            'rgba(255, 206, 86, 0.2)',
-            'rgba(75, 192, 192, 0.2)',
-            'rgba(153, 102, 255, 0.2)',
-            'rgba(255, 159, 64, 0.2)',
-          ],
-          borderColor: [
-            'rgba(255, 99, 132, 1)',
-            'rgba(54, 162, 235, 1)',
-            'rgba(255, 206, 86, 1)',
-            'rgba(75, 192, 192, 1)',
-            'rgba(153, 102, 255, 1)',
-            'rgba(255, 159, 64, 1)',
-          ],
-          borderWidth: 1,
-          data: [12, 19, 3, 5, 2, 3],
-        },
-      ],
-    };
-  
-    const chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false, // Allows the chart to resize freely
-      scales: {
-        y: {
-          beginAtZero: true,
-        },
-      },
-    };
-  
-    onMount(() => {
-      const ctx = canvas.getContext('2d');
-      chart = new Chart(ctx, {
-        type: 'bar', // Set chart type to 'bar'
-        data: chartData,
-        options: chartOptions,
-      });
-    });
-  
-    onDestroy(() => {
-      if (chart) {
-        chart.destroy();
-      }
-    });
-  </script>
-  
-  <canvas bind:this={canvas} width="400" height="200" />
-  
-  <style>
-    canvas {
-      max-width: 100%;
-      height: 100%; /* Ensures the canvas takes the full height of the container */
-    }
-  </style>
-  
+	import { Chart, registerables } from 'chart.js';
+	import { onDestroy, onMount } from 'svelte';
+	import {
+		chartOptions,
+		getChartData
+	} from './chartOptions';
+
+	export let data = {};
+	export let label = '';
+	export let width = 200;
+	export let height = 200;
+
+	// Register all necessary components
+	Chart.register(...registerables);
+
+	let chart;
+	let canvas;
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		chart = new Chart(ctx, {
+			type: 'bar', // Set chart type to 'bar'
+			data: getChartData({ data, label }),
+			options: chartOptions
+		});
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: 100%; /* Ensures the canvas takes the full height of the container */
+	}
+</style>

package/components/Charts/Barchart.svelte.d.ts

@@ -2,7 +2,10 @@
 /** @typedef {typeof __propDef.events}  BarchartEvents */
 /** @typedef {typeof __propDef.slots}  BarchartSlots */
 export default class Barchart extends SvelteComponentTyped<{
-    [x: string]: never;
+    label?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    data?: {} | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +16,10 @@ export type BarchartSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        label?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        data?: {} | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Charts/DoughnutChart.svelte

@@ -1,7 +1,8 @@
 <!-- src/PieChart.svelte -->
 <script>
-	import { onMount, onDestroy } from 'svelte';
 	import { Chart, registerables } from 'chart.js';
+	import { onDestroy, onMount } from 'svelte';
+	import { chartOptions, getChartData } from './chartOptions';
 
 	export let data = {};
 	export let label = '';
@@ -13,45 +14,11 @@
 	let chart;
 	let canvas;
 
-	// Chart configuration
-	const chartData = {
-		labels: Object.keys(data),
-		datasets: [
-			{
-				label: label,
-				data: Object.values(data)
-			}
-		]
-	};
-
-	const chartOptions = {
-		plugins: {
-			legend: {
-				position: 'bottom' // Set legend position to bottom
-			},
-			datalabels: {
-				anchor: 'center',
-				align: 'end',
-				clamp: true,
-                font: {
-                    size: 16, // Set the font size here
-                    weight: 'bold', // Optional: set font weight
-                    family: 'Roboto', // Set the font family to Roboto
-                },
-				formatter: (value) => {
-					return value; // Show the value directly
-				}
-			}
-		},
-		responsive: true,
-		maintainAspectRatio: false // Allows the chart to resize freely
-	};
-
 	onMount(() => {
 		const ctx = canvas.getContext('2d');
 		chart = new Chart(ctx, {
 			type: 'doughnut',
-			data: chartData,
+			data: getChartData({ data, label }),
 			options: chartOptions
 		});
 	});

package/components/Charts/LineChart.svelte

@@ -1,9 +1,13 @@
 <!-- src/MyChart.svelte -->
 <script>
-	import { onMount, onDestroy } from 'svelte';
 	import { Chart, registerables } from 'chart.js';
+	import { onDestroy, onMount } from 'svelte';
+	import { chartOptions, getChartData } from './chartOptions';
 
 	export let data = {};
+	export let label = '';
+	export let width = 200;
+	export let height = 200;
 
 	// Register all necessary components
 	Chart.register(...registerables);
@@ -11,35 +15,12 @@
 	let chart;
 	let canvas;
 
-	// Chart configuration
-	const chartData = {
-		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-		datasets: [
-			{
-				label: 'My First dataset',
-				backgroundColor: 'rgba(75, 192, 192, 0.2)',
-				borderColor: 'rgba(75, 192, 192, 1)',
-				borderWidth: 1,
-				data: [40, 30, 20, 50, 60, 70, 80]
-			}
-		]
-	};
-
-	const chartOptions = {
-		responsive: true,
-		maintainAspectRatio: false, // Allows the chart to resize without maintaining aspect ratio
-		scales: {
-			y: {
-				beginAtZero: true
-			}
-		}
-	};
 
 	onMount(() => {
 		const ctx = canvas.getContext('2d');
 		chart = new Chart(ctx, {
 			type: 'line', // Change this to 'bar' for a bar chart
-			data: chartData,
+			data: getChartData({ data, label }),
 			options: chartOptions
 		});
 	});
@@ -52,7 +33,7 @@
 	});
 </script>
 
-<canvas bind:this={canvas} />
+<canvas bind:this={canvas} {width} {height} />
 
 <style>
 	canvas {

package/components/Charts/LineChart.svelte.d.ts

@@ -2,6 +2,9 @@
 /** @typedef {typeof __propDef.events}  LineChartEvents */
 /** @typedef {typeof __propDef.slots}  LineChartSlots */
 export default class LineChart extends SvelteComponentTyped<{
+    label?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
     data?: {} | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -13,6 +16,9 @@ export type LineChartSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        label?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
         data?: {} | undefined;
     };
     events: {

package/components/Charts/PieChart.svelte

@@ -1,8 +1,12 @@
 <!-- src/PieChart.svelte -->
 <script>
-	import { onMount, onDestroy } from 'svelte';
 	import { Chart, registerables } from 'chart.js';
 	import ChartDataLabels from 'chartjs-plugin-datalabels';
+	import { onDestroy, onMount } from 'svelte';
+	import {
+		chartOptions,
+		getChartData
+	} from './chartOptions';
 
 	export let data = {};
 	export let label = '';
@@ -14,46 +18,13 @@
 	let chart;
 	let canvas;
 
-	// Chart configuration
-	const chartData = {
-		labels: Object.keys(data),
-		datasets: [
-			{
-				label: label,
-				data: Object.values(data)
-			}
-		]
-	};
-
-	const chartOptions = {
-		plugins: {
-			legend: {
-				position: 'bottom' // Set legend position to bottom
-			},
-			datalabels: {
-				anchor: 'center',
-				align: 'end',
-                clamp: true,
-                font: {
-                    size: 16, // Set the font size here
-                    weight: 'bold', // Optional: set font weight
-                    family: 'Roboto', // Set the font family to Roboto
-                },
-				formatter: (value) => {
-					return value; // Show the value directly
-				}
-			}
-		},
-		responsive: true,
-		maintainAspectRatio: false // Allows the chart to resize freely
-	};
 
 	onMount(() => {
 		// console.log(chartData);
 		const ctx = canvas.getContext('2d');
 		chart = new Chart(ctx, {
 			type: 'pie', // Set chart type to 'pie'
-			data: chartData,
+			data: getChartData({ data, label }),
 			options: chartOptions
 		});
 	});

package/components/Charts/chartOptions.d.ts

@@ -0,0 +1,32 @@
+export namespace chartOptions {
+    namespace plugins {
+        namespace legend {
+            const position: string;
+        }
+        namespace datalabels {
+            const anchor: string;
+            const align: string;
+            const clamp: boolean;
+            namespace font {
+                const size: number;
+                const weight: string;
+                const family: string;
+            }
+            function formatter(value: any): any;
+        }
+    }
+    const responsive: boolean;
+    const maintainAspectRatio: boolean;
+}
+export function getChartLabelsFromData(data: any): string[];
+export function getChartValuesFromData(data: any): any[];
+export function getChartData({ data, label }: {
+    data: any;
+    label: any;
+}): {
+    labels: string[];
+    datasets: {
+        label: any;
+        data: any[];
+    }[];
+};

package/components/Charts/chartOptions.js

@@ -0,0 +1,43 @@
+export const chartOptions = {
+    plugins: {
+        legend: {
+            position: 'bottom' // Set legend position to bottom
+        },
+        datalabels: {
+            anchor: 'center',
+            align: 'end',
+            clamp: true,
+            font: {
+                size: 16, // Set the font size here
+                weight: 'bold', // Optional: set font weight
+                family: 'Roboto', // Set the font family to Roboto
+            },
+            formatter: (value) => {
+                return value; // Show the value directly
+            }
+        }
+    },
+    responsive: true,
+    maintainAspectRatio: false // Allows the chart to resize freely
+};
+
+export const getChartLabelsFromData = (data) => {
+    return Object.keys(data)
+}
+
+export const getChartValuesFromData = (data) => {
+    return Object.values(data);
+}
+
+
+export const getChartData = ({ data, label }) => {
+    return {
+        labels: getChartLabelsFromData(data),
+        datasets: [
+            {
+                label: label,
+                data: getChartValuesFromData(data)
+            }
+        ]
+    };
+}

package/components/Layout/Footer.svelte

@@ -1,12 +1,10 @@
 <script>
-	// import { i18nInit } from '../i18n/i18n';
 	import ShiftLanguage from '../i18n/ShiftLanguage.svelte';
 
 	import { _ } from 'svelte-i18n';	
-	// i18nInit();
 </script>
 
-<footer class="main-footer p-10 d-flex flex-row align-items-center justify-content-between ">
+<footer class="main-footer p-10 d-flex flex-row align-items-center justify-content-between position-fixed bottom-0">
 	<div class="copy-right">
 		{$_({id: 'Common.rightReserved', default: 'All rights reserved.'})}
 		<i class="ml-2 text-secondary ">{$_({id: 'Common.Version', default:'Version'})} 0.0.2</i>		

package/components/Layout/Page.svelte

@@ -8,7 +8,7 @@
 "
 	>
 		<Row class="d-flex flex-lg-row flex-column px-3" style="width:100%">
-			<Col md="4">
+			<Col md="7">
 				<header>
 					<div class="d-flex flex-row justify-content-start mt-2 title">
 						<slot name="title" />

package/components/Sidebar/MenuGroup.svelte

@@ -107,5 +107,5 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }</style>

package/components/Sidebar/MenuItem.svelte

@@ -120,6 +120,6 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }</style>
 

package/components/Sidebar/SideBarMenu.svelte

@@ -130,7 +130,7 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }
 @media (min-width: 768px) {
   .sidebar .offcanvas-lg {

package/components/Sidebar/Sidebar.scss

@@ -148,5 +148,5 @@ ul {
  background-color: #ddf9f6;
 }
 #sidebarMenu{
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }

package/components/Sidebar/Sidebar.svelte

@@ -183,7 +183,7 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }
 :global(.ebg-none) {
   background-color: #ffffff !important;

package/components/StatusCard/StatusCard.scss

@@ -8,6 +8,10 @@
     font-family: $bodyFonts;
     min-height:14rem;
 }
+.card-mini{
+    height: 6rem !important;
+    min-height: 6rem !important;
+}
 .title{
     font-size: $status-card-title;
     font-weight: $title-weight;

package/components/StatusCard/StatusCard.svelte

@@ -1,12 +1,15 @@
 <script>
-	export let className = "";	
-	</script>
-	<div class="col-12 col-md-6 col-sm-6 col-lg-3">
-	<div class="m-2 card {className}">
+	export let className = '';
+	export let small = false;
+</script>
+
+<div class="col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3">
+	<div class="m-2 card {className} {small? 'card-mini':''}">
 		<slot />
 	</div>
-	</div>
-	<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+</div>
+
+<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
 .card {
@@ -17,6 +20,10 @@
   font-family: Roboto;
   min-height: 14rem;
 }
+.card-mini {
+  height: 6rem !important;
+  min-height: 6rem !important;
+}
 .title {
   font-size: 24px;
   font-weight: 400;
@@ -40,4 +47,3 @@
   width: fit-content;
   border-radius: 0.3333333333rem;
 }</style>
-	

package/components/StatusCard/StatusCard.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  StatusCardSlots */
 export default class StatusCard extends SvelteComponentTyped<{
     className?: string | undefined;
+    small?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,6 +17,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         className?: string | undefined;
+        small?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/StatusCard/StatusCardBody.svelte

@@ -32,6 +32,10 @@
   font-family: Roboto;
   min-height: 14rem;
 }
+.card-mini {
+  height: 6rem !important;
+  min-height: 6rem !important;
+}
 .title {
   font-size: 24px;
   font-weight: 400;

package/components/StatusCard/StatusCardSubtitle.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let value = '';
+</script>
+
+<div class="align-middle text-center float-end value fw-bold fs-2">
+	{value}
+</div>

package/components/StatusCard/StatusCardSubtitle.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  StatusCardSubtitleProps */
+/** @typedef {typeof __propDef.events}  StatusCardSubtitleEvents */
+/** @typedef {typeof __propDef.slots}  StatusCardSubtitleSlots */
+export default class StatusCardSubtitle extends SvelteComponentTyped<{
+    value?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StatusCardSubtitleProps = typeof __propDef.props;
+export type StatusCardSubtitleEvents = typeof __propDef.events;
+export type StatusCardSubtitleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/StatusCard/StatusCardTitle.svelte

@@ -22,6 +22,10 @@
   font-family: Roboto;
   min-height: 14rem;
 }
+.card-mini {
+  height: 6rem !important;
+  min-height: 6rem !important;
+}
 .title {
   font-size: 24px;
   font-weight: 400;

package/components/WidgetCard/WidgetCard.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { onMount } from 'svelte';
 	import { Col, Row } from 'sveltestrap';
 	export let title;
 	export let resizable = false;
@@ -17,31 +16,23 @@
 			cardLength /= 2;
 			console.log(cardLength);
 		}
-		// if (!maximized) {
-		// 	element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
-		// 	if (!widthOnly) {
-		// 		element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
-		// 	}
-
-		// 	return;
-		// }
-		// element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
-		// if (!widthOnly) {
-		// 	element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
-		// }
 	};
 </script>
 
 {#key cardLength}
-	<div class="col-12 col-md-{cardLength * 2} col-sm-{cardLength * 2} col-lg-{cardLength}">
+	<div
+		class="col-12 col-md-{cardLength * 2} col-sm-{cardLength * 2} col-lg-{cardLength < 6
+			? cardLength * 2
+			: cardLength} col-xl-{cardLength}"
+	>
 		<div bind:this={element}>
 			<div class="m-2 card">
 				<Row>
-					<Col>
+					<Col md="10">
 						<div class="title fw-normal">{title}</div>
 					</Col>
 					{#if resizable}
-						<Col>
+						<Col md="2">
 							<div class="float-end">
 								<i on:click={toggleMaximize} class="material-icons"
 									>{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
@@ -150,4 +141,4 @@
   color: #c9443a;
   padding: 5px 10px;
   border-radius: 5px;
-}</style>
+}</style>

package/components/WidgetCard/WidgetCardBody.svelte

@@ -1,7 +1,8 @@
 <script>
+	export let className = "";
 </script>
 
-<div class="widget-card-body">
+<div class="widget-card-body card-height {className}">
 	<slot />
 </div>
 
@@ -10,4 +11,8 @@
 		width: 100%;
 		position: relative;
 	}
+	.card-height { 
+		height: 350px;
+		overflow: auto;
+	}
 </style>

package/components/WidgetCard/WidgetCardBody.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  WidgetCardBodyEvents */
 /** @typedef {typeof __propDef.slots}  WidgetCardBodySlots */
 export default class WidgetCardBody extends SvelteComponentTyped<{
-    [x: string]: never;
+    className?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type WidgetCardBodySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        className?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -74,5 +74,6 @@ import DoughnutChart from './components/Charts/DoughnutChart.svelte';
 import PieChart from './components/Charts/PieChart.svelte';
 import BarChart from './components/Charts/Barchart.svelte';
 import LineChart from './components/Charts/LineChart.svelte';
-export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
+import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
+export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
 export default i18nInit;

package/index.js

@@ -75,5 +75,6 @@ import DoughnutChart from './components/Charts/DoughnutChart.svelte';
 import PieChart from './components/Charts/PieChart.svelte';
 import BarChart from './components/Charts/Barchart.svelte';
 import LineChart from './components/Charts/LineChart.svelte';
-export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
+import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
+export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
 export default i18nInit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -81,6 +81,7 @@
     "./components/Charts/DoughnutChart.svelte": "./components/Charts/DoughnutChart.svelte",
     "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
     "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",
+    "./components/Charts/chartOptions": "./components/Charts/chartOptions.js",
     "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
     "./components/CheckBox/Checkbox.stories": "./components/CheckBox/Checkbox.stories.js",
     "./components/CheckBox/Checkbox.svelte": "./components/CheckBox/Checkbox.svelte",
@@ -157,6 +158,7 @@
     "./components/StatusCard/StatusCard.scss": "./components/StatusCard/StatusCard.scss",
     "./components/StatusCard/StatusCard.svelte": "./components/StatusCard/StatusCard.svelte",
     "./components/StatusCard/StatusCardBody.svelte": "./components/StatusCard/StatusCardBody.svelte",
+    "./components/StatusCard/StatusCardSubtitle.svelte": "./components/StatusCard/StatusCardSubtitle.svelte",
     "./components/StatusCard/StatusCardTitle.svelte": "./components/StatusCard/StatusCardTitle.svelte",
     "./components/Switches/Switch.scss": "./components/Switches/Switch.scss",
     "./components/Switches/Switch.stories": "./components/Switches/Switch.stories.js",