@enki-tek/fms-web-components 0.0.17 → 0.0.19

package/components/Card/Card.svelte

@@ -3,8 +3,8 @@
 	import { Card, CardBody, CardSubtitle, CardText, CardTitle } from 'sveltestrap';
 	export let image = '';
 	export let width = '35rem';
-	export let text = 'This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. '
-	export let title = 'Card Title';
+	export let text = ' '
+	export let title = ' ';
 	export let subTitle = '';
 	export let linkName1 = "";
 	export let linkName2 = "";

package/components/EnkiCard/Card.scss

@@ -0,0 +1,48 @@
+@import './../variable.scss';
+
+@mixin common-font-properties($size, $weight: 400, $line-height: 28px, $style: normal, $family: 'Roboto') {
+    font-size: $size;
+    font-style: $style;
+    font-weight: $weight;
+    line-height: $line-height;
+    font-family: $family;
+}
+
+:global(.Card) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.title {
+    color: $gray-900;
+    @include common-font-properties(24px, 600, normal);
+}
+
+.sub-title {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    @include common-font-properties(16px, 600, normal);
+    color: $secondary;
+}
+
+.text {
+    @include common-font-properties(16px);
+    color: $gray-600;
+}
+
+.card-link {
+    @include common-font-properties(16px);
+    color: $primary;
+    text-decoration: none;
+    font-family: $bodyFonts;
+}
+
+:global(.card-footer){
+    background-color: $white;
+}
+
+.footer {
+    @include common-font-properties(16px);
+    font-family: $bodyFonts;  
+}

package/components/EnkiCard/CardBody.svelte

@@ -0,0 +1,71 @@
+<script>
+	import { CardBody } from 'sveltestrap';
+	export let type = '';
+	const cardType = {
+		loginCard: 'login-card-body'
+	};
+	let tableClasses = [];
+	if (cardType.hasOwnProperty(type)) {
+		tableClasses = [cardType[type]];
+	}
+</script>
+
+<CardBody class={tableClasses.join(' ')}>
+	<slot />
+</CardBody>
+
+<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");
+:global(.Card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}
+:global(.card-footer) {
+  background-color: #ffffff;
+}
+.footer {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  font-family: Roboto;
+}</style>

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

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

package/components/EnkiCard/CardFooter.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { CardFooter } from 'sveltestrap';
+</script>
+
+<CardFooter>
+	<div class="footer">
+		<slot />
+	</div>
+</CardFooter>
+
+<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");
+:global(.Card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}
+:global(.card-footer) {
+  background-color: #ffffff;
+}
+.footer {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  font-family: Roboto;
+}</style>

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

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

package/components/EnkiCard/CardLink.svelte

@@ -0,0 +1,63 @@
+<script>
+	export let link = '';
+</script>
+
+<a href={link} class="card-link">
+	<slot />
+</a>
+
+<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");
+:global(.Card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}
+:global(.card-footer) {
+  background-color: #ffffff;
+}
+.footer {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  font-family: Roboto;
+}</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  CardLinkProps */
+/** @typedef {typeof __propDef.events}  CardLinkEvents */
+/** @typedef {typeof __propDef.slots}  CardLinkSlots */
+export default class CardLink extends SvelteComponentTyped<{
+    link?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CardLinkProps = typeof __propDef.props;
+export type CardLinkEvents = typeof __propDef.events;
+export type CardLinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/EnkiCard/CardSubTitle.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { CardSubtitle } from 'sveltestrap';
+</script>
+
+<CardSubtitle>
+	<div class="sub-title">
+		<slot />
+	</div>
+</CardSubtitle>
+
+<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");
+:global(.Card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}
+:global(.card-footer) {
+  background-color: #ffffff;
+}
+.footer {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  font-family: Roboto;
+}</style>

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

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

package/components/EnkiCard/CardText.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { CardText } from 'sveltestrap';
+</script>
+
+<CardText>
+	<div class="text">
+		<slot />
+	</div>
+</CardText>
+
+<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");
+:global(.Card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}
+:global(.card-footer) {
+  background-color: #ffffff;
+}
+.footer {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  font-family: Roboto;
+}</style>

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

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

package/components/EnkiCard/CardTitle.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { CardTitle } from 'sveltestrap';
+</script>
+
+<CardTitle>
+	<div class="title">
+		<slot />
+	</div>
+</CardTitle>
+
+<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");
+:global(.Card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}
+:global(.card-footer) {
+  background-color: #ffffff;
+}
+.footer {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  font-family: Roboto;
+}</style>

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

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

package/components/EnkiCard/EnkiCard.svelte

@@ -0,0 +1,64 @@
+<script>
+	import { Card } from 'sveltestrap';
+	export let width = '35rem';
+</script>
+
+<Card style={`width:${width};`}>
+	<slot />
+</Card>
+
+<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");
+:global(.Card) {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.title {
+  color: #212529;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+}
+.sub-title {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  font-family: "Roboto";
+  color: #3AC82E;
+}
+.text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #6C757D;
+}
+.card-link {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  color: #00AEE5;
+  text-decoration: none;
+  font-family: Roboto;
+}
+:global(.card-footer) {
+  background-color: #ffffff;
+}
+.footer {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  font-family: "Roboto";
+  font-family: Roboto;
+}</style>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  EnkiCardProps */
+/** @typedef {typeof __propDef.events}  EnkiCardEvents */
+/** @typedef {typeof __propDef.slots}  EnkiCardSlots */
+export default class EnkiCard extends SvelteComponentTyped<{
+    width?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type EnkiCardProps = typeof __propDef.props;
+export type EnkiCardEvents = typeof __propDef.events;
+export type EnkiCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/EnkiTable/EnkiTable.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Table } from 'sveltestrap';
+	export let size = "lg"
+	export let hover = ' ';
+	export let striped =' ';
+	let tableStyles = ["table" , `table-${hover}` , `table-${striped}`]
+</script>
+
+<Table size = {size} class={tableStyles.join(' ')}>
+	<slot />
+</Table>
+
+<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");
+.td-div, .th-div {
+  color: #152536;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Roboto;
+}
+.th-div {
+  font-size: 17px;
+}
+.td-div {
+  width: 12.5rem;
+  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+  font-weight: 400;
+}</style>

package/components/EnkiTable/EnkiTable.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  EnkiTableProps */
+/** @typedef {typeof __propDef.events}  EnkiTableEvents */
+/** @typedef {typeof __propDef.slots}  EnkiTableSlots */
+export default class EnkiTable extends SvelteComponentTyped<{
+    size?: string | undefined;
+    hover?: string | undefined;
+    striped?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type EnkiTableProps = typeof __propDef.props;
+export type EnkiTableEvents = typeof __propDef.events;
+export type EnkiTableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+        hover?: string | undefined;
+        striped?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/EnkiTable/Table.scss

@@ -0,0 +1,23 @@
+@import './../variable.scss';
+
+%common-fonts {
+    color: $Title-Color;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    font-family: $bodyFonts;
+}
+
+.th-div {
+    @extend %common-fonts;
+    font-size: 17px;
+}
+
+
+
+.td-div {
+    width: 12.5rem;
+    padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+    @extend %common-fonts;
+    font-weight: 400;
+}

package/components/EnkiTable/TableBody.svelte

@@ -0,0 +1,22 @@
+<tbody>
+	<slot />
+</tbody>
+
+<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");
+.td-div, .th-div {
+  color: #152536;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Roboto;
+}
+.th-div {
+  font-size: 17px;
+}
+.td-div {
+  width: 12.5rem;
+  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+  font-weight: 400;
+}</style>

package/components/EnkiTable/TableBody.svelte.d.ts

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

package/components/EnkiTable/TableCell.svelte

@@ -0,0 +1,28 @@
+<script>
+export let	dataLabel = " ";
+export let colspan = 1; 
+export let rowspan = 1 ;
+export let textAlign =' ';
+let tdStyles = ['td-div', `text-${textAlign}`]
+</script>
+
+<td data-label ={dataLabel} colspan={colspan} rowspan={rowspan}  class={tdStyles.join(' ')} ><slot /></td>
+
+<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");
+.td-div, .th-div {
+  color: #152536;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Roboto;
+}
+.th-div {
+  font-size: 17px;
+}
+.td-div {
+  width: 12.5rem;
+  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+  font-weight: 400;
+}</style>

package/components/EnkiTable/TableCell.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  TableCellProps */
+/** @typedef {typeof __propDef.events}  TableCellEvents */
+/** @typedef {typeof __propDef.slots}  TableCellSlots */
+export default class TableCell extends SvelteComponentTyped<{
+    colspan?: number | undefined;
+    rowspan?: number | undefined;
+    textAlign?: string | undefined;
+    dataLabel?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableCellProps = typeof __propDef.props;
+export type TableCellEvents = typeof __propDef.events;
+export type TableCellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        colspan?: number | undefined;
+        rowspan?: number | undefined;
+        textAlign?: string | undefined;
+        dataLabel?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/EnkiTable/TableHead.svelte

@@ -0,0 +1,22 @@
+<thead>
+	<slot />
+</thead>
+
+<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");
+.td-div, .th-div {
+  color: #152536;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Roboto;
+}
+.th-div {
+  font-size: 17px;
+}
+.td-div {
+  width: 12.5rem;
+  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+  font-weight: 400;
+}</style>

package/components/EnkiTable/TableHead.svelte.d.ts

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

package/components/EnkiTable/TableHeadCell.svelte

@@ -0,0 +1,27 @@
+<script>
+	export let colspan = 1;
+	export let rowspan = 1;
+	export let textAlign = ' ';
+	let tdStyles = ['th-div', `text-${textAlign}`];
+</script>
+
+<th  colspan={colspan} rowspan={rowspan} class={tdStyles.join(' ')}><slot /></th>
+
+<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");
+.td-div, .th-div {
+  color: #152536;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Roboto;
+}
+.th-div {
+  font-size: 17px;
+}
+.td-div {
+  width: 12.5rem;
+  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+  font-weight: 400;
+}</style>

package/components/EnkiTable/TableHeadCell.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  TableHeadCellProps */
+/** @typedef {typeof __propDef.events}  TableHeadCellEvents */
+/** @typedef {typeof __propDef.slots}  TableHeadCellSlots */
+export default class TableHeadCell extends SvelteComponentTyped<{
+    colspan?: number | undefined;
+    rowspan?: number | undefined;
+    textAlign?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableHeadCellProps = typeof __propDef.props;
+export type TableHeadCellEvents = typeof __propDef.events;
+export type TableHeadCellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        colspan?: number | undefined;
+        rowspan?: number | undefined;
+        textAlign?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/EnkiTable/TableRow.svelte

@@ -0,0 +1,22 @@
+<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");
+.td-div, .th-div {
+  color: #152536;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Roboto;
+}
+.th-div {
+  font-size: 17px;
+}
+.td-div {
+  width: 12.5rem;
+  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+  font-weight: 400;
+}</style>
+
+<tr>
+    <slot></slot>
+</tr>

package/components/EnkiTable/TableRow.svelte.d.ts

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

package/index.d.ts

@@ -22,5 +22,18 @@ import Checkbox from './components/CheckBox/Checkbox.svelte';
 import Breadcrumb from './components/Breadcrumb/Breadcrumb.svelte';
 import Accordion from './components/Accordion/Accordion.svelte';
 import CardIcon from './components/CardIcon/CardIcon.svelte';
-export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon };
+import EnkiTable from './components/EnkiTable/EnkiTable.svelte';
+import TableBody from './components/EnkiTable/TableBody.svelte';
+import TableHead from './components/EnkiTable/TableHead.svelte';
+import TableHeadCell from './components/EnkiTable/TableHeadCell.svelte';
+import TableRow from './components/EnkiTable/TableRow.svelte';
+import TableCell from './components/EnkiTable/TableCell.svelte';
+import EnkiCard from './components/EnkiCard/EnkiCard.svelte';
+import CardTitle from './components/EnkiCard/CardTitle.svelte';
+import CardSubtitle from './components/EnkiCard/CardSubTitle.svelte';
+import CardText from './components/EnkiCard/CardText.svelte';
+import CardBody from './components/EnkiCard/CardBody.svelte';
+import CardFooter from './components/EnkiCard/CardFooter.svelte';
+import CardLink from './components/EnkiCard/CardLink.svelte';
+export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter };
 export default Layout;

package/index.js

@@ -23,5 +23,18 @@ import Checkbox from './components/CheckBox/Checkbox.svelte';
 import Breadcrumb from './components/Breadcrumb/Breadcrumb.svelte';
 import Accordion from './components/Accordion/Accordion.svelte';
 import CardIcon from './components/CardIcon/CardIcon.svelte';
-export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon };
+import EnkiTable from './components/EnkiTable/EnkiTable.svelte';
+import TableBody from './components/EnkiTable/TableBody.svelte';
+import TableHead from './components/EnkiTable/TableHead.svelte';
+import TableHeadCell from './components/EnkiTable/TableHeadCell.svelte';
+import TableRow from './components/EnkiTable/TableRow.svelte';
+import TableCell from './components/EnkiTable/TableCell.svelte';
+import EnkiCard from './components/EnkiCard/EnkiCard.svelte';
+import CardTitle from './components/EnkiCard/CardTitle.svelte';
+import CardSubtitle from './components/EnkiCard/CardSubTitle.svelte';
+import CardText from './components/EnkiCard/CardText.svelte';
+import CardBody from './components/EnkiCard/CardBody.svelte';
+import CardFooter from './components/EnkiCard/CardFooter.svelte';
+import CardLink from './components/EnkiCard/CardLink.svelte';
+export { Button, TextField, Card, Tooltip, Tab, Icon, Modal, ModalBody, ModalFooter, ModalHeader, Header, Dropdown, DropdownItem, Badge, Alert, Pagination, RadioButton, Accordion, Switch, Checkbox, Breadcrumb, CardIcon, EnkiTable, TableBody, TableCell, TableRow, TableHead, TableHeadCell, EnkiCard, CardBody, CardTitle, CardSubtitle, CardText, CardLink, CardFooter };
 export default Layout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -74,6 +74,21 @@
     "./components/Dropdown/Dropdown.stories": "./components/Dropdown/Dropdown.stories.js",
     "./components/Dropdown/Dropdown.svelte": "./components/Dropdown/Dropdown.svelte",
     "./components/Dropdown/DropdownItem.svelte": "./components/Dropdown/DropdownItem.svelte",
+    "./components/EnkiCard/Card.scss": "./components/EnkiCard/Card.scss",
+    "./components/EnkiCard/CardBody.svelte": "./components/EnkiCard/CardBody.svelte",
+    "./components/EnkiCard/CardFooter.svelte": "./components/EnkiCard/CardFooter.svelte",
+    "./components/EnkiCard/CardLink.svelte": "./components/EnkiCard/CardLink.svelte",
+    "./components/EnkiCard/CardSubTitle.svelte": "./components/EnkiCard/CardSubTitle.svelte",
+    "./components/EnkiCard/CardText.svelte": "./components/EnkiCard/CardText.svelte",
+    "./components/EnkiCard/CardTitle.svelte": "./components/EnkiCard/CardTitle.svelte",
+    "./components/EnkiCard/EnkiCard.svelte": "./components/EnkiCard/EnkiCard.svelte",
+    "./components/EnkiTable/EnkiTable.svelte": "./components/EnkiTable/EnkiTable.svelte",
+    "./components/EnkiTable/Table.scss": "./components/EnkiTable/Table.scss",
+    "./components/EnkiTable/TableBody.svelte": "./components/EnkiTable/TableBody.svelte",
+    "./components/EnkiTable/TableCell.svelte": "./components/EnkiTable/TableCell.svelte",
+    "./components/EnkiTable/TableHead.svelte": "./components/EnkiTable/TableHead.svelte",
+    "./components/EnkiTable/TableHeadCell.svelte": "./components/EnkiTable/TableHeadCell.svelte",
+    "./components/EnkiTable/TableRow.svelte": "./components/EnkiTable/TableRow.svelte",
     "./components/Header/Header.scss": "./components/Header/Header.scss",
     "./components/Header/Header.stories": "./components/Header/Header.stories.js",
     "./components/Header/Header.svelte": "./components/Header/Header.svelte",