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

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;

package/components/ModalWindow/Modal.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  ModalSlots */
 export default class Modal extends SvelteComponentTyped<{
     toggle: any;
+    className?: string | undefined;
     size?: string | undefined;
     isOpen?: boolean | undefined;
-    className?: string | undefined;
     backdrop?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -20,9 +20,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         toggle: any;
+        className?: string | undefined;
         size?: string | undefined;
         isOpen?: boolean | undefined;
-        className?: string | undefined;
         backdrop?: boolean | undefined;
     };
     events: {

package/components/ModalWindow/ModalBody.svelte

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

package/components/ModalWindow/ModalFooter.svelte

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

package/components/ModalWindow/ModalHeader.svelte

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

package/components/NotFound/NotFound.svelte

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

package/components/Pagination/Pagination.svelte

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

package/components/RadioButton/RadioButton.svelte

@@ -602,6 +602,9 @@
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 :global(.custom-radio .form-check-label) {
   color: #343A40;
 }

package/components/Sidebar/MenuGroup.svelte

@@ -0,0 +1,108 @@
+<script>
+    export let className="";
+    export let bottomFlag=false;
+</script>
+
+<ul class="nav flex-column {className} {bottomFlag ? "bottom" : '' }">
+	<slot />
+</ul>
+
+<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");
+ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
+  color: #ffffff;
+}
+.line-open, .line {
+  background: #ffffff;
+}
+:global(.offcanvas-body) {
+  background: #007FD8;
+}
+.nav .nav-item.active, .icon-sidebar-content ul .active {
+  border-left: 2px solid #ffffff;
+  background: #084298;
+}
+.nav-item, .icon-sidebar-content ul li {
+  display: flex;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
+.row {
+  --bs-gutter-x: 0rem;
+}
+.icon-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 88px;
+  background: #007FD8;
+}
+.line {
+  width: 88px;
+  height: 1px;
+}
+.icon-btn {
+  padding: 20px 27px;
+}
+.icon-sidebar-content ul li {
+  padding: 16px 32px;
+}
+:global(.offcanvas-body) {
+  padding: 0rem 0rem;
+}
+.offcanvas-title {
+  color: #ffffff;
+  font-size: 28px;
+}
+.nav-item .item-name {
+  line-height: 22px;
+}
+.toggle-button {
+  background-color: transparent;
+  border: #ffffff;
+  cursor: pointer;
+}
+.material-icons {
+  font-size: 16px;
+  color: #ffffff;
+}
+:global(.offcanvas.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+.offcanvas-header {
+  padding: 1.5rem 1.5rem;
+}
+.line-open {
+  width: 274px;
+  height: 1px;
+}
+.title {
+  font-size: 16px;
+}
+.bottom {
+  bottom: 0;
+  position: absolute;
+}
+.box {
+  width: 100% !important;
+  height: 48px;
+  border-radius: 5px;
+}
+.box a {
+  color: #05445e;
+}
+@media (max-width: 768px) {
+  .box a {
+    color: #ffffff;
+  }
+}
+.active {
+  background-color: #ddf9f6;
+}
+#sidebarMenu {
+  min-height: calc(100vh - 112px);
+}</style>

package/components/Sidebar/MenuGroup.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  MenuGroupProps */
+/** @typedef {typeof __propDef.events}  MenuGroupEvents */
+/** @typedef {typeof __propDef.slots}  MenuGroupSlots */
+export default class MenuGroup extends SvelteComponentTyped<{
+    className?: string | undefined;
+    bottomFlag?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuGroupProps = typeof __propDef.props;
+export type MenuGroupEvents = typeof __propDef.events;
+export type MenuGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string | undefined;
+        bottomFlag?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Sidebar/MenuItem.svelte

@@ -0,0 +1,122 @@
+<script>
+	import Icon from '../Icon/Icon.svelte';
+
+	export let link = '#';
+	export let icon = '';
+	export let active = false;
+</script>
+
+<li class="nav-item  p-2 box {active ? "active" : ""}">
+	<a
+		class="nav-link d-flex align-items-center gap-2"
+		aria-current="page"
+		href={link}
+		on:click
+	>
+		{#if icon}
+			<Icon iconName={icon} />
+		{/if}
+		<slot />
+	</a>
+</li>
+
+<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");
+ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
+  color: #ffffff;
+}
+.line-open, .line {
+  background: #ffffff;
+}
+:global(.offcanvas-body) {
+  background: #007FD8;
+}
+.nav .nav-item.active, .icon-sidebar-content ul .active {
+  border-left: 2px solid #ffffff;
+  background: #084298;
+}
+.nav-item, .icon-sidebar-content ul li {
+  display: flex;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
+.row {
+  --bs-gutter-x: 0rem;
+}
+.icon-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 88px;
+  background: #007FD8;
+}
+.line {
+  width: 88px;
+  height: 1px;
+}
+.icon-btn {
+  padding: 20px 27px;
+}
+.icon-sidebar-content ul li {
+  padding: 16px 32px;
+}
+:global(.offcanvas-body) {
+  padding: 0rem 0rem;
+}
+.offcanvas-title {
+  color: #ffffff;
+  font-size: 28px;
+}
+.nav-item .item-name {
+  line-height: 22px;
+}
+.toggle-button {
+  background-color: transparent;
+  border: #ffffff;
+  cursor: pointer;
+}
+.material-icons {
+  font-size: 16px;
+  color: #ffffff;
+}
+:global(.offcanvas.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+.offcanvas-header {
+  padding: 1.5rem 1.5rem;
+}
+.line-open {
+  width: 274px;
+  height: 1px;
+}
+.title {
+  font-size: 16px;
+}
+.bottom {
+  bottom: 0;
+  position: absolute;
+}
+.box {
+  width: 100% !important;
+  height: 48px;
+  border-radius: 5px;
+}
+.box a {
+  color: #05445e;
+}
+@media (max-width: 768px) {
+  .box a {
+    color: #ffffff;
+  }
+}
+.active {
+  background-color: #ddf9f6;
+}
+#sidebarMenu {
+  min-height: calc(100vh - 112px);
+}</style>
+

package/components/Sidebar/MenuItem.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  MenuItemProps */
+/** @typedef {typeof __propDef.events}  MenuItemEvents */
+/** @typedef {typeof __propDef.slots}  MenuItemSlots */
+export default class MenuItem extends SvelteComponentTyped<{
+    active?: boolean | undefined;
+    icon?: string | undefined;
+    link?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MenuItemProps = typeof __propDef.props;
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        active?: boolean | undefined;
+        icon?: string | undefined;
+        link?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};