@enki-tek/fms-web-components 0.0.89 → 0.1.0

package/components/Header/Header.scss

@@ -1,64 +1,70 @@
 @import './../variable.scss';
 
 :global(.headerLogo) {
-    display: flex;
-    flex-direction: column;
-    color: $black;
+	display: flex;
+	flex-direction: column;
+	color: $black;
+	filter: grayscale(100%) brightness(0) invert(1);
 }
 
 :global(.headerLogo img) {
-    width: 144px;
-    height: 34px;
+	width: 144px;
+	height: 34px;
+}
+
+.bi {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
 }
 
 :global(.headerIcons) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid $secondary;
-    border-radius: 50%;
-    color: $secondary;
-    padding: 8px 9px;
-    height:45px;
-    width:45px;
-    font-weight:bold;
-    
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid $secondary;
+	border-radius: 50%;
+	color: $secondary;
+	padding: 8px 9px;
+	height: 45px;
+	width: 45px;
+	font-weight: bold;
 }
 
-.avatar-text{
-    color: black ;
-    margin-top: 2px;
-    text-transform: capitalize;
+.avatar-text {
+	color: black;
+	margin-top: 2px;
+	text-transform: capitalize;
 }
 
 :global(.headerIcons i) {
-    padding: 0 4px;
-    font-size: 18px;
+	padding: 0 4px;
+	font-size: 18px;
 }
 
 :global(.userProfile) {
-    display: flex;
-    align-items: center;
-    gap: 15px;
+	display: flex;
+	align-items: center;
+	gap: 15px;
 }
 
 :global(.userProfileBox) {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    color: $gray-600;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	color: $gray-600;
 }
 
 :global(.userProfile img) {
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
+	width: 45px;
+	height: 45px;
+	border-radius: 50%;
 }
 
 :global(.nav-link:focus, .nav-link:hover) {
-    color: $secondary;
+	color: $secondary;
 }
 
 :global(a:hover) {
-    color: $black;
+	color: $black;
 }

package/components/Header/Header.svelte

@@ -1,27 +1,24 @@
 <script>
-	import {
-		Collapse,
-		NavbarToggler,
-		Nav,
-		Navbar,
-	} from 'sveltestrap';
+	
 
-	let isOpen = false;
-  
-	function handleUpdate(event) {
-		isOpen = event.detail.isOpen;
-	}
 </script>
 
-<Navbar expand="md" class="bg-white sticky-top shadow-sm">
-	<slot name="brand" />
-	<NavbarToggler class="border border-success text-success" on:click={() => (isOpen = !isOpen)} />
-	<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
-		<Nav class="ms-auto d-flex align-items-center justify-content-end flex-row" navbar>
-			<slot />
-		</Nav>
-	</Collapse>
-</Navbar>
+<header class="navbar sticky-top bg-dark p-0 flex-md-nowrap" data-bs-theme="dark">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+        <div class="container-fluid">
+          <slot name="brand"></slot>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-md-end" id="navbarCollapse">
+            <slot name="menu"></slot>
+            <hr class="my-3 d-md-none">
+            <slot name="footer-menu"></slot>
+            <slot name="nav-menu"></slot>
+          </div>
+        </div>
+    </nav>
+</header>
 
 <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");
@@ -33,11 +30,17 @@
   display: flex;
   flex-direction: column;
   color: #000000;
+  filter: grayscale(100%) brightness(0) invert(1);
 }
 :global(.headerLogo img) {
   width: 144px;
   height: 34px;
 }
+.bi {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
 :global(.headerIcons) {
   display: flex;
   align-items: center;
@@ -642,4 +645,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Header/Header.svelte.d.ts

@@ -7,7 +7,9 @@ export default class Header extends SvelteComponentTyped<{
     [evt: string]: CustomEvent<any>;
 }, {
     brand: {};
-    default: {};
+    menu: {};
+    'footer-menu': {};
+    'nav-menu': {};
 }> {
 }
 export type HeaderProps = typeof __propDef.props;
@@ -23,7 +25,9 @@ declare const __propDef: {
     };
     slots: {
         brand: {};
-        default: {};
+        menu: {};
+        'footer-menu': {};
+        'nav-menu': {};
     };
 };
 export {};

package/components/Header/HeaderDropDownLink.svelte

@@ -0,0 +1,11 @@
+<script>
+</script>
+
+<li class="nav-item dropdown">
+	<a class="nav-link " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+		<slot name="label" />
+	</a>
+	<ul class="dropdown-menu dropdown-menu-end flex-md-column">
+		<slot />
+	</ul>
+</li>

package/components/Header/HeaderDropDownLink.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  HeaderDropDownLinkProps */
+/** @typedef {typeof __propDef.events}  HeaderDropDownLinkEvents */
+/** @typedef {typeof __propDef.slots}  HeaderDropDownLinkSlots */
+export default class HeaderDropDownLink extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    label: {};
+    default: {};
+}> {
+}
+export type HeaderDropDownLinkProps = typeof __propDef.props;
+export type HeaderDropDownLinkEvents = typeof __propDef.events;
+export type HeaderDropDownLinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+        default: {};
+    };
+};
+export {};

package/components/Header/HeaderDropDownLinkItem.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let link = '#';
+</script>
+
+<li>
+	<a class="dropdown-item" href={link} on:click>
+		<slot />
+	</a>
+</li>

package/components/Header/HeaderDropDownLinkItem.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  HeaderDropDownLinkItemProps */
+/** @typedef {typeof __propDef.events}  HeaderDropDownLinkItemEvents */
+/** @typedef {typeof __propDef.slots}  HeaderDropDownLinkItemSlots */
+export default class HeaderDropDownLinkItem extends SvelteComponentTyped<{
+    link?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type HeaderDropDownLinkItemProps = typeof __propDef.props;
+export type HeaderDropDownLinkItemEvents = typeof __propDef.events;
+export type HeaderDropDownLinkItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Header/HeaderItem.svelte

@@ -32,11 +32,17 @@
   display: flex;
   flex-direction: column;
   color: #000000;
+  filter: grayscale(100%) brightness(0) invert(1);
 }
 :global(.headerLogo img) {
   width: 144px;
   height: 34px;
 }
+.bi {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
 :global(.headerIcons) {
   display: flex;
   align-items: center;
@@ -641,4 +647,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Header/HeaderLink.svelte

@@ -0,0 +1,9 @@
+<script>
+    export let link="#";
+</script>
+
+<li class="nav-item">
+    <a class="nav-link" href="{link}" on:click>
+        <slot></slot>
+    </a>
+</li>

package/components/Header/HeaderLink.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  HeaderLinkProps */
+/** @typedef {typeof __propDef.events}  HeaderLinkEvents */
+/** @typedef {typeof __propDef.slots}  HeaderLinkSlots */
+export default class HeaderLink extends SvelteComponentTyped<{
+    link?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type HeaderLinkProps = typeof __propDef.props;
+export type HeaderLinkEvents = typeof __propDef.events;
+export type HeaderLinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Header/HeaderLinks.svelte

@@ -0,0 +1,9 @@
+<script>
+
+</script>
+
+<!--ALERTS/NOTIFICATIONS/USER PROFILE STARTS-->
+<ul class="navbar-nav ml-auto"> 
+    <slot></slot>
+</ul>
+<!--ALERTS/NOTIFICATIONS/USER PROFILE ENDS-->

package/components/Header/HeaderLinks.svelte.d.ts

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

package/components/Header/UserAvatar.svelte

@@ -12,13 +12,13 @@
 	if (result == null) userImage = defaultImage;
 </script>
 
-<NavbarBrand href="/" class="userProfile">
+<div class="userProfile">
+	<img src={userImage} alt="PROFILE" />
 	<div class="userProfileBox">
 		<p class="m-0 efs-small etext-black text-capitalize">{userName}</p>
 		<p class="m-0 efs-small text-capitalize">{userRole}</p>
 	</div>
-	<!-- <img src={userImage} alt="PROFILE" /> -->
-</NavbarBrand>
+</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");
@@ -30,11 +30,17 @@
   display: flex;
   flex-direction: column;
   color: #000000;
+  filter: grayscale(100%) brightness(0) invert(1);
 }
 :global(.headerLogo img) {
   width: 144px;
   height: 34px;
 }
+.bi {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
 :global(.headerIcons) {
   display: flex;
   align-items: center;
@@ -639,4 +645,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Layout/Content.svelte

@@ -0,0 +1,9 @@
+<script>
+</script>
+
+<div class="container-fluid" style="margin-top:80px;background-color: #EBECEF;">
+	<div class="row">
+		<slot name="sidebar-menu" />
+		<slot name="page" />
+	</div>
+</div>

package/components/Layout/Content.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ContentProps */
+/** @typedef {typeof __propDef.events}  ContentEvents */
+/** @typedef {typeof __propDef.slots}  ContentSlots */
+export default class Content extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'sidebar-menu': {};
+    page: {};
+}> {
+}
+export type ContentProps = typeof __propDef.props;
+export type ContentEvents = typeof __propDef.events;
+export type ContentSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'sidebar-menu': {};
+        page: {};
+    };
+};
+export {};

package/components/Layout/Footer.svelte

@@ -1,7 +1,9 @@
 <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 ">

package/components/Layout/Layout.svelte

@@ -0,0 +1,6 @@
+<script>
+
+</script>
+<div>
+    <slot></slot>
+</div>

package/components/Layout/Layout.svelte.d.ts

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

package/components/Layout/Page.svelte

@@ -2,12 +2,14 @@
 	import { Col, Row } from 'sveltestrap';
 </script>
 
-<section class="screen-size-fix">
-	<div class="container-fluid mb-2">
-		<Row class="pt-3 pb-2">
-			<Col>
+<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+	<div
+		class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
+	>
+		<Row class="pt-3 pb-2 m-2" style="width:100%">
+			<Col md="4">
 				<header>
-					<div class="d-flex flex-row justify-content-start mt-2">
+					<div class="d-flex flex-row justify-content-start mt-2 title">
 						<slot name="title" />
 					</div>
 				</header>
@@ -16,13 +18,37 @@
 				<slot name="actions" />
 			</Col>
 		</Row>
+		<Row>
+			<slot name="widget" />
+		</Row>
+	</div>
+	<div>
+		<slot name="statuscard"/>
+	</div>
+	<div>
+		<slot />
 	</div>
-	<slot name="content" />
-</section>
+</main>
 
 <style>
-	.screen-size-fix{
+	.screen-size-fix {
 		height: calc(100vh - 128px);
 		overflow: auto;
 	}
-</style>
+	.enki-content-body {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16px; /* Space between cards */
+	}
+	.blue-background-class {
+		background-color: #e0f7fa;
+	}
+	.title {
+		color: #000;
+		font-family: Roboto;
+		font-size: 20px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px;
+	}
+</style>

package/components/Layout/Page.svelte.d.ts

@@ -8,7 +8,9 @@ export default class Page extends SvelteComponentTyped<{
 }, {
     title: {};
     actions: {};
-    content: {};
+    widget: {};
+    statuscard: {};
+    default: {};
 }> {
 }
 export type PageProps = typeof __propDef.props;
@@ -25,7 +27,9 @@ declare const __propDef: {
     slots: {
         title: {};
         actions: {};
-        content: {};
+        widget: {};
+        statuscard: {};
+        default: {};
     };
 };
 export {};

package/components/Layout/SortableGrid.svelte

@@ -0,0 +1,28 @@
+<script>
+	import { onMount } from 'svelte';
+	import { Col, Row } from 'sveltestrap';
+	import Sortable from 'sortablejs';
+	export let id;
+	onMount(() => {
+		const el = document.getElementById(id);
+		console.log(el);
+		Sortable.create(el, {
+			animation: 150,
+			ghostClass: 'blue-background-class'
+		});
+	});
+</script>
+
+<div class="enki-sortable-grid" {id}>
+	<slot />
+</div>
+
+<style>
+	.enki-sortable-grid {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.blue-background-class {
+		background-color: #e0f7fa;
+	}
+</style>

package/components/Layout/SortableGrid.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  SortableGridProps */
+/** @typedef {typeof __propDef.events}  SortableGridEvents */
+/** @typedef {typeof __propDef.slots}  SortableGridSlots */
+export default class SortableGrid extends SvelteComponentTyped<{
+    id: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SortableGridProps = typeof __propDef.props;
+export type SortableGridEvents = typeof __propDef.events;
+export type SortableGridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/ModalWindow/Modal.svelte

@@ -586,6 +586,9 @@
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 .content {
   color: #495057;
   line-height: normal;