@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.
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>