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

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/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/Toast/Toast.scss

@@ -14,8 +14,6 @@ $icon-size:20px;
     bottom: 14px;
     right: 6px;
     z-index: 2000;
-    min-width: 100px;
-    max-width: 500px;
     border: 1px solid $black;
     border-left-width: $border-custom-width;
     border-radius: 6px;

package/components/Toast/Toast.svelte

@@ -27,10 +27,10 @@
 
 <div class={toastStyle.join(' ')}>
 	<Row class="me-0 ms-0 ps-1">
-		<Col sm="2" class=" d-flex justify-content-center align-items-center ps-0 pe-1">
-			<Icon name={iconName} />
-		</Col>
-		<Col sm="10" class="ps-0 pt-0 pb-0 pe-2 d-flex align-items-center">
+		<Col sm="12" class="ps-2 pt-0 pb-0 pe-3 d-flex align-items-center">
+			{#if iconName}
+				<Icon name={iconName} class="me-2" />
+			{/if}
 			<slot>
 				{#if label}
 					{label}
@@ -57,8 +57,6 @@
   bottom: 14px;
   right: 6px;
   z-index: 2000;
-  min-width: 100px;
-  max-width: 500px;
   border: 1px solid #000000;
   border-left-width: 5px;
   border-radius: 6px;
@@ -658,4 +656,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

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;

package/components/WidgetCard/Card.scss

@@ -0,0 +1,108 @@
+@import './../variable.scss';
+.card {
+    font-family: $bodyFonts;
+    background-color: #f8f8f8;
+    border-radius: calc((3*$rem)/4);
+    padding: $rem;
+    border-color: transparent;
+    min-height: 354px;
+    min-width: 355px;
+}
+.doublecard{
+    font-family: $bodyFonts;
+    background-color: #f8f8f8;
+    border-radius: calc((3*$rem)/4);
+    padding: $rem;
+    border-color: transparent;
+    min-height: 354px;
+    min-width: 712px; 
+}
+.state-card {
+    font-family: $bodyFonts;
+    background-color: #f8f8f8;
+    border-radius: calc((3*$rem)/4);
+    padding: $rem;
+    border-color: transparent;
+    background-color: $gray-200 !important;
+}
+.title{
+    font-size: $widget-card-title;
+    font-weight: $title-weight;
+}
+.full-screen {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    margin: 0;
+}
+
+.full-screen .card {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+}
+
+.content{
+    font-size: 16px;
+  }
+
+    .status {
+        top: 10px;
+        right: 10px;
+        font-size: 12px;
+        float:left;
+    }
+
+    .completed-tag {
+        background-color: #c0e4c1; /* Green */
+        color: #4CAF50;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+    .overdue-tag {
+        background-color: #eba797; /* Green */
+        color: #c9443a;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+    .progress-tag {
+        background-color: #e6be75; /* Green */
+        color: #db9833;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+
+    .statecardtitle {
+        font-weight: 400;
+        float: right;
+        width: max-content;
+    }
+
+    .subtitle {
+        float: left;
+        font-size: 16px;
+        font-weight: 400;
+        width: max-content;
+    }
+
+    .time {
+        float: right;
+        font-size: 12px;
+        color: #999;
+        width: max-content;
+    }
+    .activeStatus{
+        background-color: #c0e4c1; /* Green */
+        color: #4CAF50;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+    .errorStatus{
+        background-color: #eba797; /* Green */
+        color: #c9443a;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }

package/components/WidgetCard/SensorStatusCard.svelte

@@ -0,0 +1,130 @@
+<script>
+	import { Col, Row } from 'sveltestrap';
+	export let status = 'active';
+	export let title = '#RTD101';
+	export let time = '7 am to 12 pm';
+</script>
+
+<div class="state-card mb-2">
+	<Row>
+		<Col>
+			<div class="content float-start">
+				<div class="statecardtitle">{title}</div>
+			</div>
+		</Col>
+		<Col>
+			<div class="status float-end">
+				<span class={status == 'active' ? 'activeStatus' : 'errorStatus'}>
+					{status == 'active' ? 'active' : 'error'}</span
+				>
+			</div>
+		</Col>
+	</Row>
+	<Row>
+		<Col><div class="time mt-1 float-start">{time}</div></Col>
+	</Row>
+</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 {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 355px;
+}
+.doublecard {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 712px;
+}
+.state-card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  background-color: #E9ECEF !important;
+}
+.title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.full-screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  margin: 0;
+}
+.full-screen .card {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+.content {
+  font-size: 16px;
+}
+.status {
+  top: 10px;
+  right: 10px;
+  font-size: 12px;
+  float: left;
+}
+.completed-tag {
+  background-color: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.overdue-tag {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.progress-tag {
+  background-color: #e6be75; /* Green */
+  color: #db9833;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.statecardtitle {
+  font-weight: 400;
+  float: right;
+  width: max-content;
+}
+.subtitle {
+  float: left;
+  font-size: 16px;
+  font-weight: 400;
+  width: max-content;
+}
+.time {
+  float: right;
+  font-size: 12px;
+  color: #999;
+  width: max-content;
+}
+.activeStatus {
+  background-color: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.errorStatus {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}</style>

package/components/WidgetCard/SensorStatusCard.svelte.d.ts

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

package/components/WidgetCard/StateCard.svelte

@@ -0,0 +1,133 @@
+<script>
+    import { Col, Row } from 'sveltestrap';
+    export let state = "overdue";
+    export let title = 'Fertilizing';
+    export let subtitle = 'Basil- G1B2';
+    export let time = '7 am to 12 pm';
+</script>
+<div class="state-card mb-2">
+<Row>
+
+    <Col>
+        <div class="status">
+                <span class={state == "completed" ? "completed-tag" : (state == "inprogress" ? "progress-tag" : "overdue-tag")}>
+                    {state == "completed" ? "completed" : (state == "inprogress" ? "inprogress" : "overdue")}</span>
+        </div>
+    </Col>
+            <Col>
+        <div class="content">
+            <div class="statecardtitle">{title}</div>
+        </div>
+    </Col>
+</Row>
+<Row>
+    <Col>
+        <div class="subtitle">{subtitle}</div>
+    </Col>
+            <Col> <div class="time mt-1">{time}</div>
+    </Col>
+</Row>
+</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 {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 355px;
+}
+.doublecard {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 712px;
+}
+.state-card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  background-color: #E9ECEF !important;
+}
+.title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.full-screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  margin: 0;
+}
+.full-screen .card {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+.content {
+  font-size: 16px;
+}
+.status {
+  top: 10px;
+  right: 10px;
+  font-size: 12px;
+  float: left;
+}
+.completed-tag {
+  background-color: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.overdue-tag {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.progress-tag {
+  background-color: #e6be75; /* Green */
+  color: #db9833;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.statecardtitle {
+  font-weight: 400;
+  float: right;
+  width: max-content;
+}
+.subtitle {
+  float: left;
+  font-size: 16px;
+  font-weight: 400;
+  width: max-content;
+}
+.time {
+  float: right;
+  font-size: 12px;
+  color: #999;
+  width: max-content;
+}
+.activeStatus {
+  background-color: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.errorStatus {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}</style>

package/components/WidgetCard/StateCard.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  StateCardProps */
+/** @typedef {typeof __propDef.events}  StateCardEvents */
+/** @typedef {typeof __propDef.slots}  StateCardSlots */
+export default class StateCard extends SvelteComponentTyped<{
+    time?: string | undefined;
+    title?: string | undefined;
+    subtitle?: string | undefined;
+    state?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StateCardProps = typeof __propDef.props;
+export type StateCardEvents = typeof __propDef.events;
+export type StateCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        time?: string | undefined;
+        title?: string | undefined;
+        subtitle?: string | undefined;
+        state?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};