@openremote/or-survey 1.0.3 → 1.2.0-snapshot.20240512160221

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/dist/style.js DELETED
@@ -1,572 +0,0 @@
1
- import { html, unsafeCSS } from "lit-element";
2
- import { DefaultColor1, DefaultColor2, DefaultColor3, DefaultColor4, DefaultColor5, DefaultColor6, DefaultColor7 } from "@openremote/core";
3
- export const surveySectionStyle = html `
4
- <style>
5
- :host {
6
- display: flex;
7
- flex-direction: column;
8
-
9
- --internal-or-survey-color-button: var(--or-survey-color-button, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
10
- --internal-or-survey-color-button-color: var(--or-survey-color-button-icon, #FFFFFF);
11
- --internal-or-survey-color-lightgrey: var(--or-survey-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
12
- --internal-or-survey-color-grey: var(--or-survey-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
13
-
14
- --internal-or-survey-color: var(--or-survey-color1, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
15
- --internal-or-survey-color2: var(--or-survey-color2, var(--or-app-color2, ${unsafeCSS(DefaultColor2)}));
16
- --internal-or-survey-color3: var(--or-survey-color3, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
17
- --internal-or-survey-color4: var(--or-survey-color4, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
18
- --internal-or-survey-color5: var(--or-survey-color5, var(--or-app-color5, ${unsafeCSS(DefaultColor5)}));
19
- --internal-or-survey-color6: var(--or-survey-color6, var(--or-app-color6, ${unsafeCSS(DefaultColor6)}));
20
- --internal-or-survey-color7: var(--or-survey-color7, var(--or-app-color7, ${unsafeCSS(DefaultColor7)}));
21
-
22
-
23
- }
24
-
25
- .shadow {
26
- -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
27
- -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
28
- box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
29
- }
30
-
31
- .layout.horizontal {
32
- display: flex;
33
- flex-direction: row;
34
- }
35
-
36
- .layout.vertical {
37
- display: flex;
38
- flex-direction: column;
39
- }
40
-
41
- .center {
42
- justify-content: center;
43
- align-items: center;
44
- }
45
-
46
- .t-center {
47
- text-align: center;
48
- }
49
-
50
- .flex-grow {
51
- flex: 1 1 0;
52
- }
53
-
54
- :host input {
55
- margin-bottom: 20px;
56
- }
57
-
58
- label {
59
- font-size: 14px;
60
- background-color: var(--internal-or-survey-color-grey);
61
- }
62
-
63
-
64
- button {
65
- font-size: 14px;
66
- height: 40px;
67
- background-color: var(--internal-or-survey-color-button);
68
- margin-left: auto;
69
- color: #FFF;
70
- font-weight: bold;
71
- cursor: pointer;
72
- padding: 0 20px;
73
- border-width: initial;
74
- border-style: none;
75
- border-color: initial;
76
- border-image: initial;
77
- border-radius: 5px;
78
- }
79
-
80
- .square-button {
81
- padding: 10px;
82
- background-color: var(--internal-or-survey-color-lightgrey);
83
- }
84
-
85
- .square-button or-icon {
86
- --or-icon-height: 16px;
87
- --or-icon-width: 16px;
88
- --or-icon-fill: var(--internal-or-survey-color-grey);
89
- }
90
-
91
- .square-button:hover {
92
- background-color: var(--internal-or-survey-color2);
93
- }
94
-
95
- .square-button:hover or-icon {
96
- --or-icon-fill: #FFFFFF;
97
- }
98
-
99
- .button-text {
100
- font-weight: bold;
101
- color: var(--internal-or-survey-color2);
102
- margin-bottom: 20px;
103
- }
104
-
105
- .button-text or-icon {
106
- --or-icon-height: 20px;
107
- --or-icon-width: 20px;
108
- }
109
-
110
- a {
111
- cursor: pointer;
112
- }
113
-
114
- or-icon {
115
- --or-icon-width: 24px;
116
- --or-icon-height: 24px;
117
- --or-icon-fill: var(--internal-or-survey-color-grey);
118
- }
119
-
120
- button or-icon {
121
- --or-icon-fill: #FFF;
122
- }
123
-
124
- a:hover > or-icon {
125
- --or-icon-fill: var(--internal-or-survey-color2);
126
- }
127
-
128
- .option-item .draggable,
129
- .option-item .delete-button {
130
- opacity: 0;
131
- }
132
-
133
- .option-item {
134
- margin: 0 -30px;
135
- padding: 0 30px;
136
- }
137
-
138
- .indented {
139
- margin-left: 40px;
140
- }
141
-
142
- .add-answer-option {
143
- margin-left: 70px;
144
- }
145
-
146
- .option-item:hover {
147
- background-color: #f2f2f2;
148
- }
149
-
150
- .option-item:hover .draggable,
151
- .option-item:hover .delete-button {
152
- opacity: 1;
153
- }
154
-
155
- .draggable-container {
156
- position: relative;
157
- }
158
-
159
- .question-item {
160
- position: relative;
161
- width: 100%;
162
- display: grid;
163
- align-items: center;
164
- box-sizing: border-box;
165
- user-select: none;
166
-
167
- transition: none;
168
- z-index: 1;
169
-
170
- background: white;
171
- font-family: sans-serif;
172
- }
173
-
174
- .question-item.nudgeDown:not(.dragged) {
175
- transform: translate3d(0, 48px, 0);
176
- }
177
-
178
- .question-item.nudgeUp:not(.dragged) {
179
- transform: translate3d(0, -48px, 0);
180
- }
181
-
182
- .question-item.dragged {
183
- box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
184
- transition: none;
185
- }
186
-
187
- .dragging > .question-item:not(.dragged) {
188
- transition: transform 0.2s ease-out;
189
- }
190
-
191
- .draggable {
192
- cursor: pointer;
193
- position: absolute;
194
- left: -24px;
195
- z-index: 1;
196
- }
197
- .draggable or-icon {
198
- margin-top: 10px;
199
- --or-icon-fill: var(--app-grey-color);
200
- }
201
-
202
- input {
203
- padding: 5px 0 8px;
204
- margin-bottom: 30px;
205
- color: #333333;
206
- font-size: 16px;
207
- border-color: #f2f2f2;
208
- }
209
-
210
- input[disabled] {
211
- background-color: var(--app-lightgrey-color);
212
- color: var(--app-grey-color);
213
- }
214
- label {
215
- color: #808080;
216
- font-size: 12px;
217
- font-weight: bold;
218
- }
219
- </style>
220
- `;
221
- export const surveyLayoutStyle = html `
222
- <style>
223
- :host {
224
- width: 100%;
225
- background-color: #FFFFFF;
226
- }
227
-
228
-
229
-
230
- #surveyQuestions {
231
- width: 100%;
232
- overflow: hidden;
233
- }
234
-
235
- button-default > *:focus {
236
- background-color: transparent
237
- }
238
-
239
- p {
240
- text-align: center;
241
- }
242
-
243
- input {
244
- display: none;
245
- }
246
-
247
- input.text-input {
248
- display: block;
249
- }
250
-
251
- .anwser-card {
252
- flex: 1;
253
- flex-grow: 1;
254
- flex-basis: 0;
255
- }
256
-
257
- .anwser-card {
258
- background-color: var(--internal-or-survey-color1, #F3C11F);
259
- margin-left: 5px;
260
- border: 3px solid white;
261
-
262
- box-sizing: border-box;
263
- -moz-box-sizing: border-box;
264
- -webkit-box-sizing: border-box;
265
- }
266
-
267
- .anwser-card:first-child {
268
- margin-left: 0;
269
- }
270
-
271
- .anwser-card:nth-of-type(1),
272
- .anwser-card:nth-of-type(5),
273
- .anwser-card:nth-of-type(9){
274
- background-color: var(--internal-or-survey-color1, #F3C11F);
275
- }
276
-
277
- .anwser-card:nth-of-type(2),
278
- .anwser-card:nth-of-type(6),
279
- .anwser-card:nth-of-type(10){
280
- background-color: var(--internal-or-survey-color2, #4A99BA);
281
- }
282
-
283
- .anwser-card:nth-of-type(3),
284
- .anwser-card:nth-of-type(7),
285
- .anwser-card:nth-of-type(11){
286
- background-color: var(--internal-or-survey-color3, #23B099);
287
- }
288
-
289
- .anwser-card:nth-of-type(4),
290
- .anwser-card:nth-of-type(8),
291
- .anwser-card:nth-of-type(12){
292
- background-color: var(--internal-or-survey-color4, #EA8D31);
293
- }
294
-
295
-
296
- .anwser-card.rating {
297
- border: none;
298
- background-color: transparent;
299
- }
300
-
301
- .anwser-card.rating label {
302
- border-radius: 50%;
303
- background-color: var(--or-survey-color-button, #e32527);
304
-
305
- line-height: 30px;
306
- width: 30px;
307
- height: 30px;
308
- padding: 10px;
309
- }
310
-
311
- button {
312
- cursor: pointer;
313
- visibility: hidden;
314
- position: relative;
315
- -moz-appearance: none;
316
- -webkit-appearance: none;
317
- -moz-border-radius: 2px;
318
- -webkit-border-radius: 2px;
319
- border-radius: 2px;
320
- font-family: Arial, "Open Sans", sans-serif;
321
- text-align: center;
322
- border: 0;
323
- color: #fff;
324
- text-decoration: none;
325
- padding: .625rem calc(2.5rem + 10px) .625rem 1.25rem;
326
- background-color: var(--or-survey-color-button, #e32527);
327
- font-size: 18px;
328
- font-weight: 300;
329
-
330
- }
331
-
332
-
333
- button or-icon {
334
- margin-right: 20px;
335
- }
336
-
337
- button[visible] {
338
- visibility: visible;
339
- }
340
-
341
- button.previous {
342
- padding: .625rem 1.25rem .625rem calc(2.5rem + 10px);
343
- }
344
-
345
- button.previous .icon {
346
- width: 2.5rem;
347
- fill: var(--internal-or-survey-color-button-color);
348
- color: var(--internal-or-survey-color-button-color);
349
-
350
- position: absolute;
351
- left: 0;
352
- top: 0;
353
- height: 20px;
354
- padding: 10px 0;
355
- }
356
-
357
- button.next .icon {
358
- width: 2.5rem;
359
- fill: var(--internal-or-survey-color-button-color);
360
- color: var(--internal-or-survey-color-button-color);
361
-
362
- position: absolute;
363
- right: 0;
364
- top: 0;
365
- height: 20px;
366
- padding: 10px 0;
367
- }
368
-
369
- input {
370
- margin: 0 0 20px;
371
- padding: 8px;
372
- }
373
-
374
- input + label {
375
- font-size: 18px;
376
- color: #FFFFFF;
377
- display: block;
378
- text-align: center;
379
- opacity: 0.87;
380
- margin: 10px;
381
- padding: 40px;
382
-
383
- height: calc(100% - 60px);
384
- cursor: pointer;
385
- -ms-transform: scale(0.8);
386
- -webkit-transform: scale(0.8);
387
- transform: scale(0.8);
388
-
389
- -webkit-transition: transform 0.15s;
390
- -moz-transition: transform 0.15s;
391
- -o-transition: transform 0.15s;
392
- transition: transform 0.15s;
393
- background-color: transparent;
394
- }
395
-
396
- input + label:hover {
397
- opacity: 1;
398
- -ms-transform: scale(1);
399
- -webkit-transform: scale(1);
400
- transform: scale(1);
401
- }
402
-
403
-
404
-
405
- input[type="checkbox"]:checked + label,
406
- input[type="radio"]:checked + label {
407
- opacity: 1;
408
- -ms-transform: scale(1);
409
- -webkit-transform: scale(1);
410
- transform: scale(1);
411
- },
412
-
413
- input[type="radio"]:checked + label,
414
- input[type="checkbox"]:checked {
415
- border: 3px solid white;
416
- }
417
-
418
- textarea {
419
- flex-grow: 1;
420
- border: 1px solid var(--app-grey-color);
421
- height: 4em;
422
- line-height: 16px;
423
- }
424
-
425
- .answer-icon {
426
- width: 20px;
427
- height: 20px;
428
- display: block;
429
- margin: auto;
430
- font-size: 16px;
431
- line-height: 20px;
432
- font-weight: bold;
433
- border: 3px solid var(--app-white);
434
- border-radius: 5px;
435
- margin-bottom: 5px;
436
- }
437
-
438
- #survey-container {
439
- -ms-flex-pack: center;
440
- -webkit-justify-content: center;
441
- justify-content: center;
442
- }
443
- .anwser-card {
444
- width: 25%;
445
- min-width: 25%;
446
- max-width: 25%;
447
- flex-grow: 1;
448
- flex-basis: auto;
449
- margin-left: 0px;
450
- }
451
- @media (max-width: 1480px) {
452
- .anwser-card {
453
- width: 50%;
454
- min-width: 50%;
455
- max-width: 50%;
456
- flex-grow: 1;
457
- flex-basis: auto;
458
- margin-left: 0px;
459
- }
460
- }
461
- input + label {
462
- padding: 20px;
463
- }
464
-
465
- .anwser-card.rating {
466
- width: 20%;
467
- min-width: 20%;
468
- max-width: 20%;
469
- }
470
- textarea {
471
- height: 4em;
472
- line-height: 16px;
473
- }
474
-
475
- #survey-container.moveIn {
476
- -webkit-animation: moveIn .6s 1 forwards;
477
- animation: moveIn .6s 1 forwards;
478
- }
479
- #survey-container.moveOut {
480
- -webkit-animation: moveOut .6s 1 forwards;
481
- animation: moveOut .6s 1 forwards;
482
- }
483
- @-webkit-keyframes moveIn {
484
- 0% {
485
- -webkit-transform: translate(100%);
486
- -moz-transform: translate(100%);
487
- -ms-transform: translate(100%);
488
- -o-transform: translate(100%);
489
- transform: translate(100%);
490
- }
491
- 100% {
492
- -webkit-transform: translate(0%);
493
- -moz-transform: translate(0%);
494
- -ms-transform: translate(0%);
495
- -o-transform: translate(0%);
496
- transform: translate(0%);
497
- }
498
- }
499
- @keyframes moveIn {
500
- 0% {
501
- -webkit-transform: translate(100%);
502
- -moz-transform: translate(100%);
503
- -ms-transform: translate(100%);
504
- -o-transform: translate(100%);
505
- transform: translate(100%);
506
- }
507
- 100% {
508
- -webkit-transform: translate(0%);
509
- -moz-transform: translate(0%);
510
- -ms-transform: translate(0%);
511
- -o-transform: translate(0%);
512
- transform: translate(0%);
513
- }
514
- }
515
-
516
- @-webkit-keyframes moveOut {
517
- 0% {
518
- -webkit-transform: translate(-100%);
519
- -moz-transform: translate(-100%);
520
- -ms-transform: translate(-100%);
521
- -o-transform: translate(-100%);
522
- transform: translate(-100%);
523
- }
524
- 100% {
525
- -webkit-transform: translate(0%);
526
- -moz-transform: translate(0%);
527
- -ms-transform: translate(0%);
528
- -o-transform: translate(0%);
529
- transform: translate(0%);
530
- }
531
- }
532
- @keyframes moveOut {
533
- 0% {
534
- -webkit-transform: translate(-100%);
535
- -moz-transform: translate(-100%);
536
- -ms-transform: translate(-100%);
537
- -o-transform: translate(-100%);
538
- transform: translate(-100%);
539
- }
540
- 100% {
541
- -webkit-transform: translate(0%);
542
- -moz-transform: translate(0%);
543
- -ms-transform: translate(0%);
544
- -o-transform: translate(0%);
545
- transform: translate(0%);
546
- }
547
- }
548
-
549
-
550
- @media (max-width: 769px) {
551
- input[type="color"],
552
- input[type="date"],
553
- input[type="datetime"],
554
- input[type="datetime-local"],
555
- input[type="email"],
556
- input[type="month"],
557
- input[type="number"],
558
- input[type="password"],
559
- input[type="search"],
560
- input[type="tel"],
561
- input[type="text"],
562
- input[type="time"],
563
- input[type="url"],
564
- input[type="week"],
565
- select:focus,
566
- textarea {
567
- font-size: 16px;
568
- }
569
- }
570
- </style>
571
- `;
572
- //# sourceMappingURL=style.js.map