@enki-tek/fms-web-components 0.1.13 → 0.1.14

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. package/components/Layout/Page.svelte +2 -2
  2. package/components/StatusCard/GrayCard.svelte +57 -0
  3. package/components/StatusCard/GrayCard.svelte.d.ts +27 -0
  4. package/components/StatusCard/PlainCard.svelte +68 -0
  5. package/components/StatusCard/PlainCard.svelte.d.ts +29 -0
  6. package/components/StatusCard/StatusCard.scss +14 -0
  7. package/components/StatusCard/StatusCard.svelte +32 -2
  8. package/components/StatusCard/StatusCard.svelte.d.ts +4 -0
  9. package/components/StatusCard/StatusCardBody.svelte +14 -0
  10. package/components/StatusCard/StatusCardTitle.svelte +14 -0
  11. package/components/WidgetCard/AlertFooter.svelte +232 -0
  12. package/components/WidgetCard/AlertFooter.svelte.d.ts +31 -0
  13. package/components/WidgetCard/BadgeCard.svelte +206 -0
  14. package/components/WidgetCard/BadgeCard.svelte.d.ts +25 -0
  15. package/components/WidgetCard/Card.scss +189 -61
  16. package/components/WidgetCard/SensorStatusCard.svelte +113 -8
  17. package/components/WidgetCard/SensorWidgetBody.svelte +3 -0
  18. package/components/WidgetCard/SensorWidgetBody.svelte.d.ts +27 -0
  19. package/components/WidgetCard/SensorWidgetData.svelte +16 -0
  20. package/components/WidgetCard/SensorWidgetData.svelte.d.ts +25 -0
  21. package/components/WidgetCard/SensorWidgetFooter.svelte +3 -0
  22. package/components/WidgetCard/SensorWidgetFooter.svelte.d.ts +27 -0
  23. package/components/WidgetCard/SensorWidgetTitle.svelte +16 -0
  24. package/components/WidgetCard/SensorWidgetTitle.svelte.d.ts +29 -0
  25. package/components/WidgetCard/StateCard.svelte +113 -8
  26. package/components/WidgetCard/WidgetCard.svelte +113 -8
  27. package/index.d.ts +9 -1
  28. package/index.js +9 -1
  29. package/package.json +9 -1
package/components/WidgetCard/BadgeCard.svelte ADDED
@@ -0,0 +1,206 @@
1
+ <script>
2
+ export let title = 'Active';
3
+ export let status = 'success'
4
+ </script>
5
+
6
+ <span class="{status == 'active' ? "completed-tag" : (status == 'inactive' ? "inactive-tag" :
7
+ (status == 'warning' ? "progress-tag" : "overdue-tag")) } badge fw-normal"> {title}</span>
8
+
9
+ <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
10
+ @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");
11
+ @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");
12
+ .card {
13
+ font-family: Roboto;
14
+ background-color: #ffffff;
15
+ border-radius: 0.75rem;
16
+ padding: 1rem;
17
+ border-color: transparent;
18
+ min-height: 22rem;
19
+ }
20
+ .state-card {
21
+ font-family: Roboto;
22
+ background-color: #f8f8f8;
23
+ border-radius: 0.75rem;
24
+ padding: 1rem;
25
+ border-color: transparent;
26
+ background-color: #E9ECEF !important;
27
+ }
28
+ .plain-card {
29
+ font-family: Roboto;
30
+ font-size: 16px;
31
+ border-radius: 0.75rem;
32
+ padding: 0.2rem;
33
+ width: fit-content;
34
+ display: flex;
35
+ }
36
+ .plain-color-card {
37
+ font-family: Roboto;
38
+ font-size: 12px;
39
+ border-radius: 0.75rem;
40
+ padding: 0.2rem;
41
+ width: fit-content;
42
+ background-color: antiquewhite;
43
+ display: flex;
44
+ }
45
+ .title {
46
+ font-size: 20px;
47
+ font-weight: 400;
48
+ }
49
+ .full-screen {
50
+ width: 100%;
51
+ height: 100%;
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ z-index: 1000;
56
+ margin: 0;
57
+ }
58
+ .full-screen .card {
59
+ width: 100%;
60
+ height: 100%;
61
+ border-radius: 0;
62
+ }
63
+ .content {
64
+ font-size: 16px;
65
+ }
66
+ .status {
67
+ top: 10px;
68
+ right: 10px;
69
+ font-size: 12px;
70
+ float: left;
71
+ }
72
+ .completed-tag {
73
+ background-color: #E8F3EE;
74
+ color: #00750F;
75
+ border: 1px solid #C5E1D4;
76
+ padding: 5px 10px;
77
+ border-radius: 5px;
78
+ }
79
+ .overdue-tag {
80
+ background-color: #FFE9E8;
81
+ color: #FF4343;
82
+ border: 1px solid #FFC9C7;
83
+ padding: 5px 10px;
84
+ border-radius: 5px;
85
+ }
86
+ .progress-tag {
87
+ background-color: #FFF9E6;
88
+ color: #EA6D03;
89
+ padding: 5px 10px;
90
+ border: 1px solid #FFEFC1;
91
+ border-radius: 5px;
92
+ }
93
+ .inactive-tag {
94
+ background-color: #E9ECEF;
95
+ color: #6C757D;
96
+ padding: 5px 10px;
97
+ border: 1px solid #DEE2E6;
98
+ border-radius: 5px;
99
+ }
100
+ .statecardtitle {
101
+ font-weight: 400;
102
+ float: right;
103
+ width: 50%;
104
+ }
105
+ .subtitle {
106
+ float: left;
107
+ font-size: 16px;
108
+ font-weight: 400;
109
+ width: 100%;
110
+ }
111
+ .time {
112
+ float: right;
113
+ font-size: 12px;
114
+ color: #999;
115
+ width: max-content;
116
+ }
117
+ .activeStatus {
118
+ background-color: #c0e4c1;
119
+ /* Green */
120
+ color: #4CAF50;
121
+ padding: 5px 10px;
122
+ border-radius: 5px;
123
+ }
124
+ .errorStatus {
125
+ background-color: #eba797;
126
+ /* Green */
127
+ color: #c9443a;
128
+ padding: 5px 10px;
129
+ border-radius: 5px;
130
+ }
131
+ .badge {
132
+ font-family: Roboto;
133
+ background-color: #f8f8f8;
134
+ border-radius: 0.2rem;
135
+ }
136
+ .warning-icon {
137
+ color: orange;
138
+ }
139
+ .warning-icon-medium {
140
+ font-size: medium;
141
+ }
142
+ .time-slot {
143
+ font-size: 12px;
144
+ font-weight: 400;
145
+ color: #6C757D;
146
+ }
147
+ /* Toggle switch container */
148
+ .switch {
149
+ position: relative;
150
+ display: inline-block;
151
+ width: 70px;
152
+ height: 34px;
153
+ }
154
+ /* Hide default HTML checkbox */
155
+ .switch input {
156
+ opacity: 0;
157
+ width: 0;
158
+ height: 0;
159
+ }
160
+ /* Slider */
161
+ .slider {
162
+ position: absolute;
163
+ cursor: pointer;
164
+ top: 0;
165
+ left: 0;
166
+ right: 0;
167
+ bottom: 0;
168
+ background-color: #ccc;
169
+ transition: 0.4s;
170
+ border-radius: 34px;
171
+ }
172
+ .slider:before {
173
+ position: absolute;
174
+ content: "OFF";
175
+ color: white;
176
+ font-size: 14px;
177
+ font-weight: bold;
178
+ text-align: center;
179
+ width: 100%;
180
+ line-height: 34px;
181
+ transition: 0.4s;
182
+ margin-left: 15px;
183
+ }
184
+ /* Circle (round icon) */
185
+ .slider:after {
186
+ position: absolute;
187
+ content: "";
188
+ height: 26px;
189
+ width: 26px;
190
+ left: 4px;
191
+ bottom: 4px;
192
+ background-color: white;
193
+ transition: 0.4s;
194
+ border-radius: 50%;
195
+ }
196
+ /* Checked state */
197
+ input:checked + .slider {
198
+ background-color: #4CAF50;
199
+ }
200
+ input:checked + .slider:before {
201
+ padding-right: 50px;
202
+ content: "ON";
203
+ }
204
+ input:checked + .slider:after {
205
+ transform: translateX(36px);
206
+ }</style>
package/components/WidgetCard/BadgeCard.svelte.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ /** @typedef {typeof __propDef.props} BadgeCardProps */
2
+ /** @typedef {typeof __propDef.events} BadgeCardEvents */
3
+ /** @typedef {typeof __propDef.slots} BadgeCardSlots */
4
+ export default class BadgeCard extends SvelteComponentTyped<{
5
+ title?: string | undefined;
6
+ status?: string | undefined;
7
+ }, {
8
+ [evt: string]: CustomEvent<any>;
9
+ }, {}> {
10
+ }
11
+ export type BadgeCardProps = typeof __propDef.props;
12
+ export type BadgeCardEvents = typeof __propDef.events;
13
+ export type BadgeCardSlots = typeof __propDef.slots;
14
+ import { SvelteComponentTyped } from "svelte";
15
+ declare const __propDef: {
16
+ props: {
17
+ title?: string | undefined;
18
+ status?: string | undefined;
19
+ };
20
+ events: {
21
+ [evt: string]: CustomEvent<any>;
22
+ };
23
+ slots: {};
24
+ };
25
+ export {};
package/components/WidgetCard/Card.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @import './../variable.scss';
2
+
2
3
  .card {
3
4
  font-family: $bodyFonts;
4
5
  background-color: $white;
@@ -7,6 +8,7 @@
7
8
  border-color: transparent;
8
9
  min-height: 22rem;
9
10
  }
11
+
10
12
  .state-card {
11
13
  font-family: $bodyFonts;
12
14
  background-color: #f8f8f8;
@@ -15,10 +17,31 @@
15
17
  border-color: transparent;
16
18
  background-color: $gray-200 !important;
17
19
  }
18
- .title{
20
+
21
+ .plain-card {
22
+ font-family: $bodyFonts;
23
+ font-size: 16px;
24
+ border-radius: calc((3*$rem)/4);
25
+ padding: calc(.2 * $rem);
26
+ width: fit-content;
27
+ display: flex;
28
+ }
29
+
30
+ .plain-color-card {
31
+ font-family: $bodyFonts;
32
+ font-size: 12px;
33
+ border-radius: calc((3*$rem)/4);
34
+ padding: calc(.2 * $rem);
35
+ width: fit-content;
36
+ background-color: antiquewhite;
37
+ display: flex;
38
+ }
39
+
40
+ .title {
19
41
  font-size: $widget-card-title;
20
42
  font-weight: $title-weight;
21
43
  }
44
+
22
45
  .full-screen {
23
46
  width: 100%;
24
47
  height: 100%;
@@ -35,64 +58,169 @@
35
58
  border-radius: 0;
36
59
  }
37
60
 
38
- .content{
61
+ .content {
62
+ font-size: 16px;
63
+ }
64
+
65
+ .status {
66
+ top: 10px;
67
+ right: 10px;
68
+ font-size: 12px;
69
+ float: left;
70
+ }
71
+
72
+ .completed-tag {
73
+ background-color: #E8F3EE;
74
+ color: #00750F;
75
+ border: 1px solid #C5E1D4;
76
+ padding: 5px 10px;
77
+ border-radius: 5px;
78
+ }
79
+
80
+ .overdue-tag {
81
+ background-color: #FFE9E8;
82
+ color: #FF4343;
83
+ border: 1px solid #FFC9C7;
84
+ padding: 5px 10px;
85
+ border-radius: 5px;
86
+ }
87
+
88
+ .progress-tag {
89
+ background-color: #FFF9E6;
90
+ color: #EA6D03;
91
+ padding: 5px 10px;
92
+ border: 1px solid #FFEFC1;
93
+ border-radius: 5px;
94
+ }
95
+
96
+ .inactive-tag {
97
+ background-color: $gray-200;
98
+ color: $gray-600;
99
+ padding: 5px 10px;
100
+ border: 1px solid $gray-300;
101
+ border-radius: 5px;
102
+ }
103
+
104
+ .statecardtitle {
105
+ font-weight: 400;
106
+ float: right;
107
+ width: 50%;
108
+ }
109
+
110
+ .subtitle {
111
+ float: left;
39
112
  font-size: 16px;
40
- }
41
-
42
- .status {
43
- top: 10px;
44
- right: 10px;
45
- font-size: 12px;
46
- float:left;
47
- }
48
-
49
- .completed-tag {
50
- background-color: #c0e4c1; /* Green */
51
- color: #4CAF50;
52
- padding: 5px 10px;
53
- border-radius: 5px;
54
- }
55
- .overdue-tag {
56
- background-color: #eba797; /* Green */
57
- color: #c9443a;
58
- padding: 5px 10px;
59
- border-radius: 5px;
60
- }
61
- .progress-tag {
62
- background-color: #e6be75; /* Green */
63
- color: #db9833;
64
- padding: 5px 10px;
65
- border-radius: 5px;
66
- }
67
-
68
- .statecardtitle {
69
- font-weight: 400;
70
- float: right;
71
- width: 50%;
72
- }
73
-
74
- .subtitle {
75
- float: left;
76
- font-size: 16px;
77
- font-weight: 400;
78
- width: 100%;
79
- }
80
-
81
- .time {
82
- float: right;
83
- font-size: 12px;
84
- color: #999;
85
- width: max-content;
86
- }
87
- .activeStatus{
88
- background-color: #c0e4c1; /* Green */
89
- color: #4CAF50;
90
- padding: 5px 10px;
91
- border-radius: 5px;
92
- }
93
- .errorStatus{
94
- background-color: #eba797; /* Green */
95
- color: #c9443a;
96
- padding: 5px 10px;
97
- border-radius: 5px;
98
- }
113
+ font-weight: 400;
114
+ width: 100%;
115
+ }
116
+
117
+ .time {
118
+ float: right;
119
+ font-size: 12px;
120
+ color: #999;
121
+ width: max-content;
122
+ }
123
+
124
+ .activeStatus {
125
+ background-color: #c0e4c1;
126
+ /* Green */
127
+ color: #4CAF50;
128
+ padding: 5px 10px;
129
+ border-radius: 5px;
130
+ }
131
+
132
+ .errorStatus {
133
+ background-color: #eba797;
134
+ /* Green */
135
+ color: #c9443a;
136
+ padding: 5px 10px;
137
+ border-radius: 5px;
138
+ }
139
+
140
+ .badge {
141
+ font-family: $bodyFonts;
142
+ background-color: #f8f8f8;
143
+ border-radius: calc((.2*$rem));
144
+ }
145
+
146
+ .warning-icon {
147
+ color: orange
148
+ }
149
+
150
+ .warning-icon-medium {
151
+ font-size: medium;
152
+ }
153
+
154
+ .time-slot {
155
+ font-size: 12px;
156
+ font-weight: 400;
157
+ color: $gray-600;
158
+ }
159
+
160
+ /* Toggle switch container */
161
+ .switch {
162
+ position: relative;
163
+ display: inline-block;
164
+ width: 70px;
165
+ height: 34px;
166
+ }
167
+
168
+ /* Hide default HTML checkbox */
169
+ .switch input {
170
+ opacity: 0;
171
+ width: 0;
172
+ height: 0;
173
+ }
174
+
175
+ /* Slider */
176
+ .slider {
177
+ position: absolute;
178
+ cursor: pointer;
179
+ top: 0;
180
+ left: 0;
181
+ right: 0;
182
+ bottom: 0;
183
+ background-color: #ccc;
184
+ transition: 0.4s;
185
+ border-radius: 34px;
186
+ }
187
+
188
+ .slider:before {
189
+ position: absolute;
190
+ content: "OFF";
191
+ color: white;
192
+ font-size: 14px;
193
+ font-weight: bold;
194
+ text-align: center;
195
+ width: 100%;
196
+ line-height: 34px;
197
+ transition: 0.4s;
198
+ margin-left: 15px;
199
+ }
200
+
201
+ /* Circle (round icon) */
202
+ .slider:after {
203
+ position: absolute;
204
+ content: "";
205
+ height: 26px;
206
+ width: 26px;
207
+ left: 4px;
208
+ bottom: 4px;
209
+ background-color: white;
210
+ transition: 0.4s;
211
+ border-radius: 50%;
212
+ }
213
+
214
+ /* Checked state */
215
+ input:checked+.slider {
216
+ background-color: #4CAF50;
217
+ }
218
+
219
+ input:checked+.slider:before {
220
+ padding-right: 50px;
221
+ content: "ON";
222
+ }
223
+
224
+ input:checked+.slider:after {
225
+ transform: translateX(36px);
226
+ }
package/components/WidgetCard/SensorStatusCard.svelte CHANGED
@@ -44,6 +44,23 @@
44
44
  border-color: transparent;
45
45
  background-color: #E9ECEF !important;
46
46
  }
47
+ .plain-card {
48
+ font-family: Roboto;
49
+ font-size: 16px;
50
+ border-radius: 0.75rem;
51
+ padding: 0.2rem;
52
+ width: fit-content;
53
+ display: flex;
54
+ }
55
+ .plain-color-card {
56
+ font-family: Roboto;
57
+ font-size: 12px;
58
+ border-radius: 0.75rem;
59
+ padding: 0.2rem;
60
+ width: fit-content;
61
+ background-color: antiquewhite;
62
+ display: flex;
63
+ }
47
64
  .title {
48
65
  font-size: 20px;
49
66
  font-weight: 400;
@@ -72,21 +89,31 @@
72
89
  float: left;
73
90
  }
74
91
  .completed-tag {
75
- background-color: #c0e4c1; /* Green */
76
- color: #4CAF50;
92
+ background-color: #E8F3EE;
93
+ color: #00750F;
94
+ border: 1px solid #C5E1D4;
77
95
  padding: 5px 10px;
78
96
  border-radius: 5px;
79
97
  }
80
98
  .overdue-tag {
81
- background-color: #eba797; /* Green */
82
- color: #c9443a;
99
+ background-color: #FFE9E8;
100
+ color: #FF4343;
101
+ border: 1px solid #FFC9C7;
83
102
  padding: 5px 10px;
84
103
  border-radius: 5px;
85
104
  }
86
105
  .progress-tag {
87
- background-color: #e6be75; /* Green */
88
- color: #db9833;
106
+ background-color: #FFF9E6;
107
+ color: #EA6D03;
108
+ padding: 5px 10px;
109
+ border: 1px solid #FFEFC1;
110
+ border-radius: 5px;
111
+ }
112
+ .inactive-tag {
113
+ background-color: #E9ECEF;
114
+ color: #6C757D;
89
115
  padding: 5px 10px;
116
+ border: 1px solid #DEE2E6;
90
117
  border-radius: 5px;
91
118
  }
92
119
  .statecardtitle {
@@ -107,14 +134,92 @@
107
134
  width: max-content;
108
135
  }
109
136
  .activeStatus {
110
- background-color: #c0e4c1; /* Green */
137
+ background-color: #c0e4c1;
138
+ /* Green */
111
139
  color: #4CAF50;
112
140
  padding: 5px 10px;
113
141
  border-radius: 5px;
114
142
  }
115
143
  .errorStatus {
116
- background-color: #eba797; /* Green */
144
+ background-color: #eba797;
145
+ /* Green */
117
146
  color: #c9443a;
118
147
  padding: 5px 10px;
119
148
  border-radius: 5px;
149
+ }
150
+ .badge {
151
+ font-family: Roboto;
152
+ background-color: #f8f8f8;
153
+ border-radius: 0.2rem;
154
+ }
155
+ .warning-icon {
156
+ color: orange;
157
+ }
158
+ .warning-icon-medium {
159
+ font-size: medium;
160
+ }
161
+ .time-slot {
162
+ font-size: 12px;
163
+ font-weight: 400;
164
+ color: #6C757D;
165
+ }
166
+ /* Toggle switch container */
167
+ .switch {
168
+ position: relative;
169
+ display: inline-block;
170
+ width: 70px;
171
+ height: 34px;
172
+ }
173
+ /* Hide default HTML checkbox */
174
+ .switch input {
175
+ opacity: 0;
176
+ width: 0;
177
+ height: 0;
178
+ }
179
+ /* Slider */
180
+ .slider {
181
+ position: absolute;
182
+ cursor: pointer;
183
+ top: 0;
184
+ left: 0;
185
+ right: 0;
186
+ bottom: 0;
187
+ background-color: #ccc;
188
+ transition: 0.4s;
189
+ border-radius: 34px;
190
+ }
191
+ .slider:before {
192
+ position: absolute;
193
+ content: "OFF";
194
+ color: white;
195
+ font-size: 14px;
196
+ font-weight: bold;
197
+ text-align: center;
198
+ width: 100%;
199
+ line-height: 34px;
200
+ transition: 0.4s;
201
+ margin-left: 15px;
202
+ }
203
+ /* Circle (round icon) */
204
+ .slider:after {
205
+ position: absolute;
206
+ content: "";
207
+ height: 26px;
208
+ width: 26px;
209
+ left: 4px;
210
+ bottom: 4px;
211
+ background-color: white;
212
+ transition: 0.4s;
213
+ border-radius: 50%;
214
+ }
215
+ /* Checked state */
216
+ input:checked + .slider {
217
+ background-color: #4CAF50;
218
+ }
219
+ input:checked + .slider:before {
220
+ padding-right: 50px;
221
+ content: "ON";
222
+ }
223
+ input:checked + .slider:after {
224
+ transform: translateX(36px);
120
225
  }</style>
package/components/WidgetCard/SensorWidgetBody.svelte ADDED
@@ -0,0 +1,3 @@
1
+ <div class="container d-flex flex-wrap p-0">
2
+ <slot />
3
+ </div>
package/components/WidgetCard/SensorWidgetBody.svelte.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ /** @typedef {typeof __propDef.props} SensorWidgetBodyProps */
2
+ /** @typedef {typeof __propDef.events} SensorWidgetBodyEvents */
3
+ /** @typedef {typeof __propDef.slots} SensorWidgetBodySlots */
4
+ export default class SensorWidgetBody extends SvelteComponentTyped<{
5
+ [x: string]: never;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {
9
+ default: {};
10
+ }> {
11
+ }
12
+ export type SensorWidgetBodyProps = typeof __propDef.props;
13
+ export type SensorWidgetBodyEvents = typeof __propDef.events;
14
+ export type SensorWidgetBodySlots = 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 {};
package/components/WidgetCard/SensorWidgetData.svelte ADDED
@@ -0,0 +1,16 @@
1
+ <script>
2
+ export let title;
3
+ export let subtitle;
4
+ </script>
5
+
6
+ <div class="column py-2 ">
7
+ <div class="text-black-50">{title}</div>
8
+ <div class="text-dark fs-6">{subtitle}</div>
9
+ </div>
10
+
11
+ <style>
12
+ .column {
13
+ flex: 1 0 50%; /* Take up 50% of the width */
14
+ box-sizing: border-box; /* Include padding and border in width */
15
+ }
16
+ </style>