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

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>

package/components/StatusCard/StatusCard.svelte.d.ts

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

package/components/StatusCard/StatusCardBody.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { Col, Row } from 'sveltestrap';
+	export let index;
+	export let text;
+	export let value;
+</script>
+
+<div class="mt-5">
+	<Row>
+		<Col>
+			<div class={Number(index) > 0 ? 'box1 mb-1' : 'box2 mb-1'}>
+				<div class={Number(index) > 0 ? 'p-1 px-2 text-success' : 'p-1 px-2 text-danger'}>
+					<i class="material-icons index">{Number(index) > 0 ? 'call_made' : 'call_received'}</i>
+					{Number(index) > 0 ? '+' + index : index}
+				</div>
+			</div>
+			<div class="text fw-normal">{text}</div></Col
+		>
+		<Col><div class="float-end value fw-bold">{value}</div></Col>
+	</Row>
+</div>
+<slot />
+
+<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>

package/components/StatusCard/StatusCardBody.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  StatusCardBodyProps */
+/** @typedef {typeof __propDef.events}  StatusCardBodyEvents */
+/** @typedef {typeof __propDef.slots}  StatusCardBodySlots */
+export default class StatusCardBody extends SvelteComponentTyped<{
+    index: any;
+    text: any;
+    value: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type StatusCardBodyProps = typeof __propDef.props;
+export type StatusCardBodyEvents = typeof __propDef.events;
+export type StatusCardBodySlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        index: any;
+        text: any;
+        value: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/StatusCard/StatusCardTitle.svelte

@@ -0,0 +1,47 @@
+<script>
+	export let title = '';
+	export let subTitle = '';
+</script>
+
+<div class="title">
+	<h4>
+		<p class="text-secondary m-0 title fw-lighter">{title}</p>
+		<p class="text-primary m-0 sub_title fw-normal">{subTitle}</p>
+	</h4>
+</div>
+<slot />
+
+<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>

package/components/StatusCard/StatusCardTitle.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  StatusCardTitleProps */
+/** @typedef {typeof __propDef.events}  StatusCardTitleEvents */
+/** @typedef {typeof __propDef.slots}  StatusCardTitleSlots */
+export default class StatusCardTitle extends SvelteComponentTyped<{
+    title?: string | undefined;
+    subTitle?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type StatusCardTitleProps = typeof __propDef.props;
+export type StatusCardTitleEvents = typeof __propDef.events;
+export type StatusCardTitleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        subTitle?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Switches/Switch.svelte

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

package/components/Switches/Switch.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Switch extends SvelteComponentTyped<{
     disable: any;
     enable: any;
-    size?: string | undefined;
     label?: string | undefined;
+    size?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -18,8 +18,8 @@ declare const __propDef: {
     props: {
         disable: any;
         enable: any;
-        size?: string | undefined;
         label?: string | undefined;
+        size?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Tab/Tab.svelte

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

package/components/TextField/TextField.svelte

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

package/components/TextField/TextField.svelte.d.ts

@@ -3,16 +3,16 @@
 /** @typedef {typeof __propDef.slots}  TextFieldSlots */
 export default class TextField extends SvelteComponentTyped<{
     [x: string]: any;
-    size?: string | undefined;
+    className?: string | undefined;
     disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     type?: string | undefined;
-    className?: string | undefined;
-    placeholder?: string | undefined;
-    value?: string | undefined;
+    size?: string | undefined;
     name?: string | undefined;
+    value?: string | undefined;
     valid?: boolean | undefined;
     feedback?: null | undefined;
+    placeholder?: string | undefined;
 }, {
     change: Event;
     input: Event;
@@ -29,16 +29,16 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        size?: string | undefined;
+        className?: string | undefined;
         disabled?: boolean | undefined;
         invalid?: boolean | undefined;
         type?: string | undefined;
-        className?: string | undefined;
-        placeholder?: string | undefined;
-        value?: string | undefined;
+        size?: string | undefined;
         name?: string | undefined;
+        value?: string | undefined;
         valid?: boolean | undefined;
         feedback?: null | undefined;
+        placeholder?: string | undefined;
     };
     events: {
         change: Event;

package/components/Toast/Toast.svelte

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

package/components/Toast/Toast.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  ToastEvents */
 /** @typedef {typeof __propDef.slots}  ToastSlots */
 export default class Toast extends SvelteComponentTyped<{
+    className?: string | undefined;
     type?: string | undefined;
     label?: string | undefined;
-    className?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +17,9 @@ export type ToastSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        className?: string | undefined;
         type?: string | undefined;
         label?: string | undefined;
-        className?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Tooltip/Tooltip.svelte

@@ -600,6 +600,9 @@ const textAligns = {
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 .label {
   color: #ffffff;
   font-size: 16px;