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

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;
+    link?: string | undefined;
+    icon?: 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;
+        link?: string | undefined;
+        icon?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Sidebar/SideBarMenu.svelte

@@ -0,0 +1,148 @@
+<script>
+	import MenuGroup from './MenuGroup.svelte';
+	import MenuItem from './MenuItem.svelte';
+
+	export let companyName = 'EnkiTek';
+</script>
+
+<div class="sidebar col-md-3 col-lg-2">
+	<div
+		class="offcanvas-md offcanvas-end bg-light rounded m-3"
+		tabindex="-1"
+		id="sidebarMenu"
+		aria-labelledby="sidebarMenuLabel"
+	>
+		<div class="offcanvas-header">
+			<h5 class="offcanvas-title" id="sidebarMenuLabel">
+				{companyName}
+			</h5>
+			<button
+				type="button"
+				class="btn-close"
+				data-bs-dismiss="offcanvas"
+				data-bs-target="#sidebarMenu"
+				aria-label="Close"
+			/>
+		</div>
+		<div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto m-3">
+			<slot />
+		</div>
+	</div>
+</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");
+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);
+}
+@media (min-width: 768px) {
+  .sidebar .offcanvas-lg {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 48px;
+  }
+}
+.sidebar .nav-link {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.sidebar .nav-link.active {
+  color: #2470dc;
+}
+.sidebar-heading {
+  font-size: 0.75rem;
+}</style>

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

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

package/components/Sidebar/Sidebar.scss

@@ -115,4 +115,33 @@ ul {
   width: 274px;
   height: 1px;
   @extend %commom-background-line;
+}
+
+.title {
+  font-size: $sidebar-title;
+}
+
+.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);
 }

package/components/Sidebar/Sidebar.svelte

@@ -156,6 +156,32 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   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);
+}
 :global(.ebg-none) {
   background-color: #ffffff !important;
 }
@@ -717,5 +743,8 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>
 

package/components/StatusCard/StatusCard.scss

@@ -0,0 +1,35 @@
+@import './../variable.scss';
+
+.card {
+    background-color: $gray-100;
+    padding: $rem;
+    border-radius: calc((3*$rem)/4);
+    font-family: $bodyFonts;
+    min-width: 22rem;
+    min-height:14rem;
+}
+.title{
+    font-size: $status-card-title;
+    font-weight: $title-weight;
+}
+.text{
+    font-size: $status-card-text;
+}
+.value{
+    font-size: $status-card-value;
+}
+.index {
+    font-size: medium !important;
+}
+
+.box1 {
+    background-color: $green-100;
+    width: fit-content;
+    border-radius: calc($rem/3);
+}
+
+.box2 {
+    background-color: $red-100;
+    width: fit-content;
+    border-radius: calc($rem/3);
+}

package/components/StatusCard/StatusCard.svelte

@@ -0,0 +1,42 @@
+<script>
+export let className = "";	
+</script>
+
+<div class="card m-2 {className}">
+	<slot />
+</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 {
+  background-color: #F8F9FA;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  font-family: Roboto;
+  min-width: 22rem;
+  min-height: 14rem;
+}
+.title {
+  font-size: 24px;
+  font-weight: 400;
+}
+.text {
+  font-size: 12px;
+}
+.value {
+  font-size: 28px;
+}
+.index {
+  font-size: medium !important;
+}
+.box1 {
+  background-color: #D1E7DD;
+  width: fit-content;
+  border-radius: 0.3333333333rem;
+}
+.box2 {
+  background-color: #F8D7DA;
+  width: fit-content;
+  border-radius: 0.3333333333rem;
+}</style>