@enki-tek/fms-web-components 0.1.13 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Layout/Page.svelte +2 -2
- package/components/StatusCard/GrayCard.svelte +57 -0
- package/components/StatusCard/GrayCard.svelte.d.ts +27 -0
- package/components/StatusCard/PlainCard.svelte +68 -0
- package/components/StatusCard/PlainCard.svelte.d.ts +29 -0
- package/components/StatusCard/StatusCard.scss +14 -0
- package/components/StatusCard/StatusCard.svelte +32 -2
- package/components/StatusCard/StatusCard.svelte.d.ts +4 -0
- package/components/StatusCard/StatusCardBody.svelte +14 -0
- package/components/StatusCard/StatusCardTitle.svelte +14 -0
- package/components/WidgetCard/AlertFooter.svelte +232 -0
- package/components/WidgetCard/AlertFooter.svelte.d.ts +31 -0
- package/components/WidgetCard/BadgeCard.svelte +206 -0
- package/components/WidgetCard/BadgeCard.svelte.d.ts +25 -0
- package/components/WidgetCard/Card.scss +189 -61
- package/components/WidgetCard/SensorStatusCard.svelte +113 -8
- package/components/WidgetCard/SensorWidgetBody.svelte +3 -0
- package/components/WidgetCard/SensorWidgetBody.svelte.d.ts +27 -0
- package/components/WidgetCard/SensorWidgetData.svelte +16 -0
- package/components/WidgetCard/SensorWidgetData.svelte.d.ts +25 -0
- package/components/WidgetCard/SensorWidgetFooter.svelte +3 -0
- package/components/WidgetCard/SensorWidgetFooter.svelte.d.ts +27 -0
- package/components/WidgetCard/SensorWidgetTitle.svelte +16 -0
- package/components/WidgetCard/SensorWidgetTitle.svelte.d.ts +29 -0
- package/components/WidgetCard/StateCard.svelte +113 -8
- package/components/WidgetCard/WidgetCard.svelte +113 -8
- package/index.d.ts +9 -1
- package/index.js +9 -1
- package/package.json +9 -1
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3
|
|
8
8
|
"
|
|
9
9
|
>
|
|
10
|
-
<
|
|
10
|
+
<div class="d-flex flex-column px-0" style="width:100%">
|
|
11
11
|
<Col md="7">
|
|
12
12
|
<header>
|
|
13
13
|
<div class="d-flex flex-row justify-content-start title">
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<Col class="mt-1">
|
|
19
19
|
<slot name="actions" />
|
|
20
20
|
</Col>
|
|
21
|
-
</
|
|
21
|
+
</div>
|
|
22
22
|
<Row>
|
|
23
23
|
<slot name="widget" />
|
|
24
24
|
</Row>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
|
|
2
|
+
<div class=" m-2 gray-card">
|
|
3
|
+
<slot />
|
|
4
|
+
</div>
|
|
5
|
+
|
|
6
|
+
<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
7
|
+
@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");
|
|
8
|
+
@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");
|
|
9
|
+
.card {
|
|
10
|
+
border-color: transparent;
|
|
11
|
+
background-color: #ffffff;
|
|
12
|
+
padding: 1rem;
|
|
13
|
+
border-radius: 0.75rem;
|
|
14
|
+
font-family: Roboto;
|
|
15
|
+
min-height: 14rem;
|
|
16
|
+
}
|
|
17
|
+
.card-mini {
|
|
18
|
+
height: 6rem !important;
|
|
19
|
+
min-height: 6rem !important;
|
|
20
|
+
}
|
|
21
|
+
.title {
|
|
22
|
+
font-size: 24px;
|
|
23
|
+
font-weight: 400;
|
|
24
|
+
}
|
|
25
|
+
.text {
|
|
26
|
+
font-size: 12px;
|
|
27
|
+
}
|
|
28
|
+
.value {
|
|
29
|
+
font-size: 28px;
|
|
30
|
+
}
|
|
31
|
+
.index {
|
|
32
|
+
font-size: medium !important;
|
|
33
|
+
}
|
|
34
|
+
.box1 {
|
|
35
|
+
background-color: #D1E7DD;
|
|
36
|
+
width: fit-content;
|
|
37
|
+
border-radius: 0.3333333333rem;
|
|
38
|
+
}
|
|
39
|
+
.box2 {
|
|
40
|
+
background-color: #F8D7DA;
|
|
41
|
+
width: fit-content;
|
|
42
|
+
border-radius: 0.3333333333rem;
|
|
43
|
+
}
|
|
44
|
+
.sensor-box {
|
|
45
|
+
background-color: #6C757D;
|
|
46
|
+
}
|
|
47
|
+
.plain-card-title {
|
|
48
|
+
font-size: 20px;
|
|
49
|
+
font-weight: 400;
|
|
50
|
+
}
|
|
51
|
+
.gray-card {
|
|
52
|
+
border-color: transparent;
|
|
53
|
+
background-color: #F8F9FA;
|
|
54
|
+
padding: 1rem;
|
|
55
|
+
border-radius: 0.75rem;
|
|
56
|
+
font-family: Roboto;
|
|
57
|
+
}</style>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} GrayCardProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} GrayCardEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} GrayCardSlots */
|
|
4
|
+
export default class GrayCard extends SvelteComponentTyped<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {
|
|
9
|
+
default: {};
|
|
10
|
+
}> {
|
|
11
|
+
}
|
|
12
|
+
export type GrayCardProps = typeof __propDef.props;
|
|
13
|
+
export type GrayCardEvents = typeof __propDef.events;
|
|
14
|
+
export type GrayCardSlots = typeof __propDef.slots;
|
|
15
|
+
import { SvelteComponentTyped } from "svelte";
|
|
16
|
+
declare const __propDef: {
|
|
17
|
+
props: {
|
|
18
|
+
[x: string]: never;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {
|
|
24
|
+
default: {};
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let title = 'Sensor Alert and Notification';
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class=" m-2 card">
|
|
6
|
+
<div class="row">
|
|
7
|
+
<div class="col plain-card-title">{title}</div>
|
|
8
|
+
<div class="col">
|
|
9
|
+
<div class="float-end">
|
|
10
|
+
<slot name="activity" />
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
<slot />
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
18
|
+
@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");
|
|
19
|
+
@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");
|
|
20
|
+
.card {
|
|
21
|
+
border-color: transparent;
|
|
22
|
+
background-color: #ffffff;
|
|
23
|
+
padding: 1rem;
|
|
24
|
+
border-radius: 0.75rem;
|
|
25
|
+
font-family: Roboto;
|
|
26
|
+
min-height: 14rem;
|
|
27
|
+
}
|
|
28
|
+
.card-mini {
|
|
29
|
+
height: 6rem !important;
|
|
30
|
+
min-height: 6rem !important;
|
|
31
|
+
}
|
|
32
|
+
.title {
|
|
33
|
+
font-size: 24px;
|
|
34
|
+
font-weight: 400;
|
|
35
|
+
}
|
|
36
|
+
.text {
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
}
|
|
39
|
+
.value {
|
|
40
|
+
font-size: 28px;
|
|
41
|
+
}
|
|
42
|
+
.index {
|
|
43
|
+
font-size: medium !important;
|
|
44
|
+
}
|
|
45
|
+
.box1 {
|
|
46
|
+
background-color: #D1E7DD;
|
|
47
|
+
width: fit-content;
|
|
48
|
+
border-radius: 0.3333333333rem;
|
|
49
|
+
}
|
|
50
|
+
.box2 {
|
|
51
|
+
background-color: #F8D7DA;
|
|
52
|
+
width: fit-content;
|
|
53
|
+
border-radius: 0.3333333333rem;
|
|
54
|
+
}
|
|
55
|
+
.sensor-box {
|
|
56
|
+
background-color: #6C757D;
|
|
57
|
+
}
|
|
58
|
+
.plain-card-title {
|
|
59
|
+
font-size: 20px;
|
|
60
|
+
font-weight: 400;
|
|
61
|
+
}
|
|
62
|
+
.gray-card {
|
|
63
|
+
border-color: transparent;
|
|
64
|
+
background-color: #F8F9FA;
|
|
65
|
+
padding: 1rem;
|
|
66
|
+
border-radius: 0.75rem;
|
|
67
|
+
font-family: Roboto;
|
|
68
|
+
}</style>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} PlainCardProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} PlainCardEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} PlainCardSlots */
|
|
4
|
+
export default class PlainCard extends SvelteComponentTyped<{
|
|
5
|
+
title?: string | undefined;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {
|
|
9
|
+
activity: {};
|
|
10
|
+
default: {};
|
|
11
|
+
}> {
|
|
12
|
+
}
|
|
13
|
+
export type PlainCardProps = typeof __propDef.props;
|
|
14
|
+
export type PlainCardEvents = typeof __propDef.events;
|
|
15
|
+
export type PlainCardSlots = typeof __propDef.slots;
|
|
16
|
+
import { SvelteComponentTyped } from "svelte";
|
|
17
|
+
declare const __propDef: {
|
|
18
|
+
props: {
|
|
19
|
+
title?: string | undefined;
|
|
20
|
+
};
|
|
21
|
+
events: {
|
|
22
|
+
[evt: string]: CustomEvent<any>;
|
|
23
|
+
};
|
|
24
|
+
slots: {
|
|
25
|
+
activity: {};
|
|
26
|
+
default: {};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export {};
|
|
@@ -36,4 +36,18 @@
|
|
|
36
36
|
background-color: $red-100;
|
|
37
37
|
width: fit-content;
|
|
38
38
|
border-radius: calc($rem/3);
|
|
39
|
+
}
|
|
40
|
+
.sensor-box{
|
|
41
|
+
background-color: $gray-600;
|
|
42
|
+
}
|
|
43
|
+
.plain-card-title{
|
|
44
|
+
font-size: $widget-card-title;
|
|
45
|
+
font-weight: $title-weight;
|
|
46
|
+
}
|
|
47
|
+
.gray-card{
|
|
48
|
+
border-color: transparent;
|
|
49
|
+
background-color: $gray-100;
|
|
50
|
+
padding: $rem;
|
|
51
|
+
border-radius: calc((3*$rem)/4);
|
|
52
|
+
font-family: $bodyFonts;
|
|
39
53
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
export let className = '';
|
|
3
3
|
export let small = false;
|
|
4
|
+
export let notify = false;
|
|
5
|
+
export let sensor = false;
|
|
4
6
|
</script>
|
|
5
7
|
|
|
6
|
-
<div class="col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3">
|
|
7
|
-
<div class="m-2 card {className} {small? 'card-mini':''}">
|
|
8
|
+
<div class="{sensor ? "col-12 col-md-12 col-sm-12 col-lg-12 col-xl-6" : "col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3" } ">
|
|
9
|
+
<div class="{notify ? 'blip' : ''} m-2 card {className} {small ? 'card-mini' : ''}">
|
|
8
10
|
<slot />
|
|
9
11
|
</div>
|
|
10
12
|
</div>
|
|
@@ -46,4 +48,32 @@
|
|
|
46
48
|
background-color: #F8D7DA;
|
|
47
49
|
width: fit-content;
|
|
48
50
|
border-radius: 0.3333333333rem;
|
|
51
|
+
}
|
|
52
|
+
.sensor-box {
|
|
53
|
+
background-color: #6C757D;
|
|
54
|
+
}
|
|
55
|
+
.plain-card-title {
|
|
56
|
+
font-size: 20px;
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
}
|
|
59
|
+
.gray-card {
|
|
60
|
+
border-color: transparent;
|
|
61
|
+
background-color: #F8F9FA;
|
|
62
|
+
padding: 1rem;
|
|
63
|
+
border-radius: 0.75rem;
|
|
64
|
+
font-family: Roboto;
|
|
65
|
+
}
|
|
66
|
+
.blip {
|
|
67
|
+
animation: blip 1s infinite; /* Continuous animation */
|
|
68
|
+
}
|
|
69
|
+
@keyframes blip {
|
|
70
|
+
0% {
|
|
71
|
+
box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); /* Warning color */
|
|
72
|
+
}
|
|
73
|
+
50% {
|
|
74
|
+
box-shadow: 0 0 10px rgb(255, 193, 7); /* Stronger warning color */
|
|
75
|
+
}
|
|
76
|
+
100% {
|
|
77
|
+
box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); /* Return to normal */
|
|
78
|
+
}
|
|
49
79
|
}</style>
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
export default class StatusCard extends SvelteComponentTyped<{
|
|
5
5
|
className?: string | undefined;
|
|
6
6
|
small?: boolean | undefined;
|
|
7
|
+
notify?: boolean | undefined;
|
|
8
|
+
sensor?: boolean | undefined;
|
|
7
9
|
}, {
|
|
8
10
|
[evt: string]: CustomEvent<any>;
|
|
9
11
|
}, {
|
|
@@ -18,6 +20,8 @@ declare const __propDef: {
|
|
|
18
20
|
props: {
|
|
19
21
|
className?: string | undefined;
|
|
20
22
|
small?: boolean | undefined;
|
|
23
|
+
notify?: boolean | undefined;
|
|
24
|
+
sensor?: boolean | undefined;
|
|
21
25
|
};
|
|
22
26
|
events: {
|
|
23
27
|
[evt: string]: CustomEvent<any>;
|
|
@@ -58,4 +58,18 @@
|
|
|
58
58
|
background-color: #F8D7DA;
|
|
59
59
|
width: fit-content;
|
|
60
60
|
border-radius: 0.3333333333rem;
|
|
61
|
+
}
|
|
62
|
+
.sensor-box {
|
|
63
|
+
background-color: #6C757D;
|
|
64
|
+
}
|
|
65
|
+
.plain-card-title {
|
|
66
|
+
font-size: 20px;
|
|
67
|
+
font-weight: 400;
|
|
68
|
+
}
|
|
69
|
+
.gray-card {
|
|
70
|
+
border-color: transparent;
|
|
71
|
+
background-color: #F8F9FA;
|
|
72
|
+
padding: 1rem;
|
|
73
|
+
border-radius: 0.75rem;
|
|
74
|
+
font-family: Roboto;
|
|
61
75
|
}</style>
|
|
@@ -48,4 +48,18 @@
|
|
|
48
48
|
background-color: #F8D7DA;
|
|
49
49
|
width: fit-content;
|
|
50
50
|
border-radius: 0.3333333333rem;
|
|
51
|
+
}
|
|
52
|
+
.sensor-box {
|
|
53
|
+
background-color: #6C757D;
|
|
54
|
+
}
|
|
55
|
+
.plain-card-title {
|
|
56
|
+
font-size: 20px;
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
}
|
|
59
|
+
.gray-card {
|
|
60
|
+
border-color: transparent;
|
|
61
|
+
background-color: #F8F9FA;
|
|
62
|
+
padding: 1rem;
|
|
63
|
+
border-radius: 0.75rem;
|
|
64
|
+
font-family: Roboto;
|
|
51
65
|
}</style>
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { Col, Row } from 'sveltestrap';
|
|
3
|
+
export let text = 'need to swtch on the light';
|
|
4
|
+
export let color = false;
|
|
5
|
+
export let icon = 'warning_amber';
|
|
6
|
+
export let switchButton = false;
|
|
7
|
+
export let time = '10 mints ago';
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<Row class="mt-2">
|
|
11
|
+
<Col
|
|
12
|
+
><div class={color ? 'plain-color-card' : 'plain-card'}>
|
|
13
|
+
<div>
|
|
14
|
+
<i class="material-icons px-1 pe-2 pt-1 warning-icon {color ? 'warning-icon-medium' : ''}"
|
|
15
|
+
>{icon}</i
|
|
16
|
+
>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="pe-2 pt-1">{text}</div>
|
|
19
|
+
</div></Col
|
|
20
|
+
>
|
|
21
|
+
<Col md="3">
|
|
22
|
+
{#if switchButton}
|
|
23
|
+
<div class="float-end">
|
|
24
|
+
<label class="switch">
|
|
25
|
+
<input type="checkbox" />
|
|
26
|
+
<span class="slider" />
|
|
27
|
+
</label>
|
|
28
|
+
</div>
|
|
29
|
+
{:else}
|
|
30
|
+
<div class="float-end time-slot pt-2">{time}</div>
|
|
31
|
+
{/if}
|
|
32
|
+
</Col>
|
|
33
|
+
</Row>
|
|
34
|
+
|
|
35
|
+
<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
|
|
36
|
+
@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");
|
|
37
|
+
@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");
|
|
38
|
+
.card {
|
|
39
|
+
font-family: Roboto;
|
|
40
|
+
background-color: #ffffff;
|
|
41
|
+
border-radius: 0.75rem;
|
|
42
|
+
padding: 1rem;
|
|
43
|
+
border-color: transparent;
|
|
44
|
+
min-height: 22rem;
|
|
45
|
+
}
|
|
46
|
+
.state-card {
|
|
47
|
+
font-family: Roboto;
|
|
48
|
+
background-color: #f8f8f8;
|
|
49
|
+
border-radius: 0.75rem;
|
|
50
|
+
padding: 1rem;
|
|
51
|
+
border-color: transparent;
|
|
52
|
+
background-color: #E9ECEF !important;
|
|
53
|
+
}
|
|
54
|
+
.plain-card {
|
|
55
|
+
font-family: Roboto;
|
|
56
|
+
font-size: 16px;
|
|
57
|
+
border-radius: 0.75rem;
|
|
58
|
+
padding: 0.2rem;
|
|
59
|
+
width: fit-content;
|
|
60
|
+
display: flex;
|
|
61
|
+
}
|
|
62
|
+
.plain-color-card {
|
|
63
|
+
font-family: Roboto;
|
|
64
|
+
font-size: 12px;
|
|
65
|
+
border-radius: 0.75rem;
|
|
66
|
+
padding: 0.2rem;
|
|
67
|
+
width: fit-content;
|
|
68
|
+
background-color: antiquewhite;
|
|
69
|
+
display: flex;
|
|
70
|
+
}
|
|
71
|
+
.title {
|
|
72
|
+
font-size: 20px;
|
|
73
|
+
font-weight: 400;
|
|
74
|
+
}
|
|
75
|
+
.full-screen {
|
|
76
|
+
width: 100%;
|
|
77
|
+
height: 100%;
|
|
78
|
+
position: fixed;
|
|
79
|
+
top: 0;
|
|
80
|
+
left: 0;
|
|
81
|
+
z-index: 1000;
|
|
82
|
+
margin: 0;
|
|
83
|
+
}
|
|
84
|
+
.full-screen .card {
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
border-radius: 0;
|
|
88
|
+
}
|
|
89
|
+
.content {
|
|
90
|
+
font-size: 16px;
|
|
91
|
+
}
|
|
92
|
+
.status {
|
|
93
|
+
top: 10px;
|
|
94
|
+
right: 10px;
|
|
95
|
+
font-size: 12px;
|
|
96
|
+
float: left;
|
|
97
|
+
}
|
|
98
|
+
.completed-tag {
|
|
99
|
+
background-color: #E8F3EE;
|
|
100
|
+
color: #00750F;
|
|
101
|
+
border: 1px solid #C5E1D4;
|
|
102
|
+
padding: 5px 10px;
|
|
103
|
+
border-radius: 5px;
|
|
104
|
+
}
|
|
105
|
+
.overdue-tag {
|
|
106
|
+
background-color: #FFE9E8;
|
|
107
|
+
color: #FF4343;
|
|
108
|
+
border: 1px solid #FFC9C7;
|
|
109
|
+
padding: 5px 10px;
|
|
110
|
+
border-radius: 5px;
|
|
111
|
+
}
|
|
112
|
+
.progress-tag {
|
|
113
|
+
background-color: #FFF9E6;
|
|
114
|
+
color: #EA6D03;
|
|
115
|
+
padding: 5px 10px;
|
|
116
|
+
border: 1px solid #FFEFC1;
|
|
117
|
+
border-radius: 5px;
|
|
118
|
+
}
|
|
119
|
+
.inactive-tag {
|
|
120
|
+
background-color: #E9ECEF;
|
|
121
|
+
color: #6C757D;
|
|
122
|
+
padding: 5px 10px;
|
|
123
|
+
border: 1px solid #DEE2E6;
|
|
124
|
+
border-radius: 5px;
|
|
125
|
+
}
|
|
126
|
+
.statecardtitle {
|
|
127
|
+
font-weight: 400;
|
|
128
|
+
float: right;
|
|
129
|
+
width: 50%;
|
|
130
|
+
}
|
|
131
|
+
.subtitle {
|
|
132
|
+
float: left;
|
|
133
|
+
font-size: 16px;
|
|
134
|
+
font-weight: 400;
|
|
135
|
+
width: 100%;
|
|
136
|
+
}
|
|
137
|
+
.time {
|
|
138
|
+
float: right;
|
|
139
|
+
font-size: 12px;
|
|
140
|
+
color: #999;
|
|
141
|
+
width: max-content;
|
|
142
|
+
}
|
|
143
|
+
.activeStatus {
|
|
144
|
+
background-color: #c0e4c1;
|
|
145
|
+
/* Green */
|
|
146
|
+
color: #4CAF50;
|
|
147
|
+
padding: 5px 10px;
|
|
148
|
+
border-radius: 5px;
|
|
149
|
+
}
|
|
150
|
+
.errorStatus {
|
|
151
|
+
background-color: #eba797;
|
|
152
|
+
/* Green */
|
|
153
|
+
color: #c9443a;
|
|
154
|
+
padding: 5px 10px;
|
|
155
|
+
border-radius: 5px;
|
|
156
|
+
}
|
|
157
|
+
.badge {
|
|
158
|
+
font-family: Roboto;
|
|
159
|
+
background-color: #f8f8f8;
|
|
160
|
+
border-radius: 0.2rem;
|
|
161
|
+
}
|
|
162
|
+
.warning-icon {
|
|
163
|
+
color: orange;
|
|
164
|
+
}
|
|
165
|
+
.warning-icon-medium {
|
|
166
|
+
font-size: medium;
|
|
167
|
+
}
|
|
168
|
+
.time-slot {
|
|
169
|
+
font-size: 12px;
|
|
170
|
+
font-weight: 400;
|
|
171
|
+
color: #6C757D;
|
|
172
|
+
}
|
|
173
|
+
/* Toggle switch container */
|
|
174
|
+
.switch {
|
|
175
|
+
position: relative;
|
|
176
|
+
display: inline-block;
|
|
177
|
+
width: 70px;
|
|
178
|
+
height: 34px;
|
|
179
|
+
}
|
|
180
|
+
/* Hide default HTML checkbox */
|
|
181
|
+
.switch input {
|
|
182
|
+
opacity: 0;
|
|
183
|
+
width: 0;
|
|
184
|
+
height: 0;
|
|
185
|
+
}
|
|
186
|
+
/* Slider */
|
|
187
|
+
.slider {
|
|
188
|
+
position: absolute;
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
top: 0;
|
|
191
|
+
left: 0;
|
|
192
|
+
right: 0;
|
|
193
|
+
bottom: 0;
|
|
194
|
+
background-color: #ccc;
|
|
195
|
+
transition: 0.4s;
|
|
196
|
+
border-radius: 34px;
|
|
197
|
+
}
|
|
198
|
+
.slider:before {
|
|
199
|
+
position: absolute;
|
|
200
|
+
content: "OFF";
|
|
201
|
+
color: white;
|
|
202
|
+
font-size: 14px;
|
|
203
|
+
font-weight: bold;
|
|
204
|
+
text-align: center;
|
|
205
|
+
width: 100%;
|
|
206
|
+
line-height: 34px;
|
|
207
|
+
transition: 0.4s;
|
|
208
|
+
margin-left: 15px;
|
|
209
|
+
}
|
|
210
|
+
/* Circle (round icon) */
|
|
211
|
+
.slider:after {
|
|
212
|
+
position: absolute;
|
|
213
|
+
content: "";
|
|
214
|
+
height: 26px;
|
|
215
|
+
width: 26px;
|
|
216
|
+
left: 4px;
|
|
217
|
+
bottom: 4px;
|
|
218
|
+
background-color: white;
|
|
219
|
+
transition: 0.4s;
|
|
220
|
+
border-radius: 50%;
|
|
221
|
+
}
|
|
222
|
+
/* Checked state */
|
|
223
|
+
input:checked + .slider {
|
|
224
|
+
background-color: #4CAF50;
|
|
225
|
+
}
|
|
226
|
+
input:checked + .slider:before {
|
|
227
|
+
padding-right: 50px;
|
|
228
|
+
content: "ON";
|
|
229
|
+
}
|
|
230
|
+
input:checked + .slider:after {
|
|
231
|
+
transform: translateX(36px);
|
|
232
|
+
}</style>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} AlertFooterProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} AlertFooterEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} AlertFooterSlots */
|
|
4
|
+
export default class AlertFooter extends SvelteComponentTyped<{
|
|
5
|
+
color?: boolean | undefined;
|
|
6
|
+
icon?: string | undefined;
|
|
7
|
+
text?: string | undefined;
|
|
8
|
+
time?: string | undefined;
|
|
9
|
+
switchButton?: boolean | undefined;
|
|
10
|
+
}, {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
}, {}> {
|
|
13
|
+
}
|
|
14
|
+
export type AlertFooterProps = typeof __propDef.props;
|
|
15
|
+
export type AlertFooterEvents = typeof __propDef.events;
|
|
16
|
+
export type AlertFooterSlots = typeof __propDef.slots;
|
|
17
|
+
import { SvelteComponentTyped } from "svelte";
|
|
18
|
+
declare const __propDef: {
|
|
19
|
+
props: {
|
|
20
|
+
color?: boolean | undefined;
|
|
21
|
+
icon?: string | undefined;
|
|
22
|
+
text?: string | undefined;
|
|
23
|
+
time?: string | undefined;
|
|
24
|
+
switchButton?: boolean | undefined;
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {};
|
|
30
|
+
};
|
|
31
|
+
export {};
|