@enki-tek/fms-web-components 0.0.90 → 0.1.1

package/components/Accordion/Accordion.svelte

@@ -584,6 +584,9 @@ export let stayOpen = true;
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 :global(.accordion-body) {
   color: #6C757D;
   font-size: 16px;

package/components/Accordion/AccordionItem.svelte

@@ -585,6 +585,9 @@ export let header;
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 :global(.accordion-body) {
   color: #6C757D;
   font-size: 16px;

package/components/Alert/Alert.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        color?: "danger" | "info" | "success" | "warning" | undefined;
+        color?: "info" | "success" | "danger" | "warning" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Badge/Badge.svelte

@@ -589,4 +589,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Breadcrumb/Breadcrumb.svelte

@@ -599,4 +599,7 @@ let length = newBreadcrumbs.length;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Button/Button.svelte

@@ -1336,6 +1336,9 @@
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 .ebg-active-secondary {
   background-color: #3AC82E;
   color: #ffffff;

package/components/Button/Button.svelte.d.ts

@@ -3,12 +3,11 @@
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
     [x: string]: any;
-    size?: string | undefined;
-    id?: string | undefined;
+    config?: string | undefined;
+    className?: string | undefined;
     disabled?: boolean | undefined;
     type?: string | undefined;
     label?: string | undefined;
-    config?: string | undefined;
     icon?: {
         state: boolean;
         name: string;
@@ -16,7 +15,8 @@ export default class Button extends SvelteComponentTyped<{
     } | undefined;
     shade?: string | undefined;
     outlineShade?: string | undefined;
-    className?: string | undefined;
+    size?: string | undefined;
+    id?: string | undefined;
     actived?: {
         state: boolean;
         color: string;
@@ -38,12 +38,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        size?: string | undefined;
-        id?: string | undefined;
+        config?: string | undefined;
+        className?: string | undefined;
         disabled?: boolean | undefined;
         type?: string | undefined;
         label?: string | undefined;
-        config?: string | undefined;
         icon?: {
             state: boolean;
             name: string;
@@ -51,7 +50,8 @@ declare const __propDef: {
         } | undefined;
         shade?: string | undefined;
         outlineShade?: string | undefined;
-        className?: string | undefined;
+        size?: string | undefined;
+        id?: string | undefined;
         actived?: {
             state: boolean;
             color: string;

package/components/Card/Card.svelte.d.ts

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  CardEvents */
 /** @typedef {typeof __propDef.slots}  CardSlots */
 export default class Card extends SvelteComponentTyped<{
-    link?: string | undefined;
-    text?: string | undefined;
     title?: string | undefined;
     subTitle?: string | undefined;
+    text?: string | undefined;
+    link?: string | undefined;
     image?: string | undefined;
     width?: string | undefined;
     linkName1?: string | undefined;
@@ -27,10 +27,10 @@ export type CardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        link?: string | undefined;
-        text?: string | undefined;
         title?: string | undefined;
         subTitle?: string | undefined;
+        text?: string | undefined;
+        link?: string | undefined;
         image?: string | undefined;
         width?: string | undefined;
         linkName1?: string | undefined;

package/components/CardIcon/CardIcon.svelte

@@ -666,4 +666,7 @@ if (titleConfig.includes(titleLocation)) {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CardIcon/CardiconBody.svelte

@@ -661,4 +661,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CardIcon/CardiconSubtitle.svelte

@@ -670,4 +670,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CardIcon/CardiconTitle.svelte

@@ -670,4 +670,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CardIcon/CardiconTitle.svelte.d.ts

@@ -3,8 +3,8 @@
 /** @typedef {typeof __propDef.slots}  CardiconTitleSlots */
 export default class CardiconTitle extends SvelteComponentTyped<{
     className: any;
-    name?: string | undefined;
     title?: string | undefined;
+    name?: string | undefined;
     iconLocation?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         className: any;
-        name?: string | undefined;
         title?: string | undefined;
+        name?: string | undefined;
         iconLocation?: string | undefined;
     };
     events: {

package/components/Charts/Barchart.svelte

@@ -0,0 +1,74 @@
+<!-- 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>
+  

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  BarchartProps */
+/** @typedef {typeof __propDef.events}  BarchartEvents */
+/** @typedef {typeof __propDef.slots}  BarchartSlots */
+export default class Barchart extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BarchartProps = typeof __propDef.props;
+export type BarchartEvents = typeof __propDef.events;
+export type BarchartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Charts/DoughnutChart.svelte

@@ -0,0 +1,73 @@
+<!-- src/PieChart.svelte -->
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+
+	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;
+
+	// 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,
+			options: chartOptions
+		});
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: auto; /* Ensures the canvas takes the full height of the container */
+	}
+</style>

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  DoughnutChartProps */
+/** @typedef {typeof __propDef.events}  DoughnutChartEvents */
+/** @typedef {typeof __propDef.slots}  DoughnutChartSlots */
+export default class DoughnutChart extends SvelteComponentTyped<{
+    label?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    data?: {} | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DoughnutChartProps = typeof __propDef.props;
+export type DoughnutChartEvents = typeof __propDef.events;
+export type DoughnutChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        data?: {} | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Charts/LineChart.svelte

@@ -0,0 +1,62 @@
+<!-- src/MyChart.svelte -->
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+
+	export let data = {};
+
+	// Register all necessary components
+	Chart.register(...registerables);
+
+	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,
+			options: chartOptions
+		});
+	});
+
+	// Cleanup when component is destroyed
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: auto;
+	}
+</style>

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

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

package/components/Charts/PieChart.svelte

@@ -0,0 +1,75 @@
+<!-- src/PieChart.svelte -->
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+	import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+	export let data = {};
+	export let label = '';
+	export let width = 300;
+	export let height = 300;
+	// Register all necessary components
+	Chart.register(...registerables);
+	Chart.register(ChartDataLabels);
+	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,
+			options: chartOptions
+		});
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: auto; /* Ensures the canvas takes the full height of the container */
+	}
+</style>

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  PieChartProps */
+/** @typedef {typeof __propDef.events}  PieChartEvents */
+/** @typedef {typeof __propDef.slots}  PieChartSlots */
+export default class PieChart extends SvelteComponentTyped<{
+    label?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    data?: {} | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PieChartProps = typeof __propDef.props;
+export type PieChartEvents = typeof __propDef.events;
+export type PieChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        data?: {} | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/CheckBox/Checkbox.svelte

@@ -619,4 +619,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CheckBox/Checkbox.svelte.d.ts

@@ -3,14 +3,14 @@
 /** @typedef {typeof __propDef.slots}  CheckboxSlots */
 export default class Checkbox extends SvelteComponentTyped<{
     invalid: any;
-    valid: any;
-    feedback: any;
     disable: any;
     enable: any;
-    size?: string | undefined;
+    valid: any;
+    feedback: any;
     label?: string | undefined;
-    value?: string | undefined;
+    size?: string | undefined;
     name?: string | undefined;
+    value?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,14 +22,14 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         invalid: any;
-        valid: any;
-        feedback: any;
         disable: any;
         enable: any;
-        size?: string | undefined;
+        valid: any;
+        feedback: any;
         label?: string | undefined;
-        value?: string | undefined;
+        size?: string | undefined;
         name?: string | undefined;
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Dropdown/Dropdown.svelte

@@ -644,4 +644,7 @@ export let title = "Dropdowns";
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Dropdown/DropdownItem.svelte

@@ -637,4 +637,7 @@ export let disabled = false;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/EnkiCard/CardBody.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  CardBodyEvents */
 /** @typedef {typeof __propDef.slots}  CardBodySlots */
 export default class CardBody extends SvelteComponentTyped<{
-    type?: string | undefined;
     className?: string | undefined;
+    type?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,8 +16,8 @@ export type CardBodySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        type?: string | undefined;
         className?: string | undefined;
+        type?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/EnkiSidbar/EnkiSidebar.svelte

@@ -718,4 +718,7 @@ li.icons:hover {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>