@fullsession.io/fs-feedback-widget 1.6.0 → 1.7.0

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 (15) hide show
  1. package/README.md +109 -109
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +32 -32
  7. package/src/App.svelte +246 -233
  8. package/src/Icons/mainIcon.svelte +25 -25
  9. package/src/Icons/reactionIcons.svelte +134 -134
  10. package/src/main.js +56 -56
  11. package/src/widgetPages/App.css +157 -111
  12. package/src/widgetPages/reactionPage.svelte +382 -305
  13. package/src/widgetPages/reactionpage.css +267 -237
  14. package/dist/bundle.css +0 -329
  15. package/dist/publicextra.css +0 -298
package/dist/bundle.css DELETED
@@ -1,329 +0,0 @@
1
- fsContainer{
2
- width: 100%;
3
- display: flex;
4
- flex-direction: var(--wgPositionVertical);
5
- position: fixed;
6
- top: 0; right: 0; bottom: 0; left: 0;
7
- height: 100%;
8
- pointer-events: none;
9
- align-items: var(--wgPositionHorizintal);
10
- padding: 0;
11
- z-index: 100000;
12
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
- }
14
- .fsWidget {
15
- pointer-events: auto;
16
- background-color: var(--widgetColor);
17
- width: 34px;
18
- height: 112px;
19
- border-top-left-radius:var(--widgetLeftSideBorder) ;
20
- border-bottom-left-radius: var(--widgetLeftSideBorder);
21
- border-top-right-radius: var(--widgetRightSideBorder) ;
22
- border-bottom-right-radius: var(--widgetRightSideBorder);
23
- box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
24
- display: flex;
25
- flex-direction: column;
26
- align-items: center;
27
- justify-content: space-evenly;
28
- cursor: pointer;
29
- margin-top: 5px;
30
- }
31
- #fsMainIcon {
32
- width: 60%;
33
- margin-left: 4%;
34
- cursor: pointer;
35
- }
36
- #fsFeedbackTxt {
37
- color: var(--widgetTextColor);
38
- font-size: 15px;
39
- writing-mode: vertical-lr;
40
- transform: rotate(180deg);
41
- cursor: pointer;
42
- font-size-adjust: 0.40;
43
- }
44
- .fsWidget:hover {
45
- width: 35px;
46
- -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
47
- box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
48
- }
49
- .fsCont {
50
- pointer-events: auto;
51
- width: 320px;
52
- height: fit-content;
53
- background-color: rgb(255, 255, 255);
54
- margin-right: var(--widgetMarginRight);
55
- margin-left: var(--widgetMarginLeft);
56
- -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
57
- box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
58
- }
59
- .fsThanksMessageCont{
60
- pointer-events: auto;
61
- width: 320px;
62
- height: 104px;
63
- background-color: rgb(255, 255, 255);
64
- margin-right: var(--widgetMarginRight);
65
- margin-left: var(--widgetMarginLeft);
66
- -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
67
- box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
68
- }
69
- #fsCloseIcon{
70
- font-size: 15px;
71
- color: #ffff;
72
- font-weight: 600;
73
- cursor: pointer;
74
-
75
- }
76
- .fsCloseCont{
77
- pointer-events: auto;
78
- background-color: #4d5167;
79
- width: 27px;
80
- height: 27px;
81
- border-radius: 50%;
82
- display: flex;
83
- justify-content: center;
84
- align-items: center;
85
- margin-top: -15px;
86
- margin-left: 85%;
87
- cursor: pointer;
88
- }
89
-
90
-
91
-
92
-
93
-
94
- /* @media (min-width: 640px) {
95
- body {
96
- max-width: none;
97
- }
98
- } */.fsReactionsContainer {
99
- pointer-events: auto;
100
- display: flex;
101
- flex-direction: column;
102
- height: 190px;
103
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
104
- }
105
- .fsIcons {
106
- display: flex;
107
- flex-direction: row;
108
- justify-content: space-evenly;
109
- margin-top: 11%;
110
- }
111
- #fsTxt {
112
- font-size: 17px;
113
- display: flex;
114
- text-align: center;
115
- margin-top: 5%;
116
- width: 61%;
117
- margin-left: 19%;
118
- }
119
-
120
- .fsIconTextCont {
121
- pointer-events: auto;
122
- display: flex;
123
- flex-direction: column;
124
- align-items: center;
125
- height: 22px;
126
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
127
- }
128
-
129
- .fsReactionText {
130
- font-size: 12px;
131
- display: none;
132
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
133
- margin-top: 0px;
134
-
135
- }
136
- .fsIconTextCont:hover{
137
- pointer-events: auto;
138
- cursor: pointer;
139
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
140
- }
141
- .fsReactionIcon:hover + .fsReactionText {
142
- display: block;
143
- opacity: 0.8;
144
- }
145
-
146
- .fsCommentContainer{
147
- pointer-events: auto;
148
- display: flex;
149
- flex-direction: column;
150
- height: 291px;
151
- pointer-events: auto;
152
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
153
- }
154
- .fsTextAreaCont{
155
- pointer-events: auto;
156
- width: 100%;
157
- height: 140px;
158
- background-color: #eaeaeb;
159
- margin-top: 17%;
160
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
161
-
162
- }
163
- .fsTextArea{
164
- border: 0px;
165
- width: 85%;
166
- height: 120px;
167
- background-color: #eaeaeb;
168
- margin-left: 6%;
169
- outline: none;
170
- margin-top: 4%;
171
- resize: none;
172
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
173
-
174
- }
175
- .fsSendButtonCommentComponent{
176
- pointer-events: auto;
177
- color: #ffff;
178
- font-size: 12px;
179
- text-align: center;
180
- margin-top: 7px;
181
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
182
-
183
- }
184
- .fsSendButtonContCommentComp{
185
- pointer-events: auto;
186
- background-color: var(--buttonColor);
187
- width: 50px;
188
- height: 29px;
189
- box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
190
- border-radius: 3px;
191
- margin-top: 13px;
192
- margin-right: 11px;
193
- cursor: pointer;
194
- border: 0px;
195
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
196
-
197
- }
198
-
199
- .fsCommentButtonContDisable{
200
- pointer-events: auto;
201
- background-color: #cccccc;
202
- width: 50px;
203
- height: 29px;
204
- box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
205
- border-radius: 3px;
206
- margin-top: 13px;
207
- margin-right: 11px;
208
- cursor:not-allowed;
209
- border: 0px;
210
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
211
-
212
- }
213
- .fsCommentButtonTxtDisable{
214
- pointer-events: auto;
215
- color: black;
216
- font-size: 12px;
217
- text-align: center;
218
- margin-top: 7px;
219
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
220
-
221
- }
222
- .fsFooter{
223
- pointer-events: auto;
224
- display: flex;
225
- justify-content: flex-end;
226
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
227
-
228
- }
229
-
230
- .fsIcons-second{
231
-
232
- display: flex;
233
- flex-direction: row;
234
- justify-content: space-evenly;
235
- margin-top: 6%;
236
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
237
-
238
- }
239
- .fsPointerDiv{
240
- width: 0;
241
- height: 0;
242
- border-left: 3px solid transparent;
243
- margin-top: -8px;
244
- border-right: 5px solid transparent;
245
- border-bottom: 8px solid #eaeaeb;
246
- margin-left: var(--pointerMargin);
247
-
248
-
249
- }
250
- #fsHateDiv{
251
- display: var(--hateDisplay);
252
- }
253
- #fsDislikeDiv{
254
- display: var(--dislikeDisplay);
255
- }
256
- #fsNeutralDiv{
257
- display: var(--neutralDisplay);
258
- }
259
- #fsLikeDiv{
260
- display: var(--likeDisplay);
261
- }
262
- #fsLoveDiv{
263
- display: var(--loveDisplay);
264
- }
265
- .fsEmailContainer{
266
- pointer-events: auto;
267
- display: flex;
268
- flex-direction: column;
269
- height: 220px;
270
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
271
-
272
- }
273
- #fsEmailInputCont{
274
- pointer-events: auto;
275
- pointer-events: auto;
276
- width: 100%;
277
- height: 46px;
278
- background-color: #eaeaeb;
279
- display: flex;
280
- /* align-items: center; */
281
- justify-content: center;
282
- margin-top: 10%;
283
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
284
-
285
-
286
- }
287
- #fsEmailTextArea{
288
- pointer-events: auto;
289
- text-align: center;
290
- border: 0px;
291
- background-color: #eaeaeb;
292
- outline: none;
293
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
294
-
295
- }
296
- #fsEmailText{
297
- width: 80%;
298
- text-align: center;
299
- margin-left: 11%;
300
- margin-top: 8%;
301
- line-height: 1.29;
302
- font-size: 17px;
303
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
304
-
305
- }
306
- .fsEmailFooter{
307
- pointer-events: auto;
308
- display: flex;
309
- justify-content: flex-end;
310
- flex-direction: row;
311
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
312
-
313
- }
314
- #fsSkipText{
315
- color: #908f8f;
316
- cursor: pointer;
317
- font-size: 13px;
318
- margin-top: 6%;
319
- margin-right: 4%;
320
- letter-spacing: normal;
321
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
322
-
323
-
324
- }
325
- #fsSkipText:hover{
326
- color: #666666;
327
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
328
-
329
- }
package/dist/publicextra.css DELETED
@@ -1,298 +0,0 @@
1
- fsContainer{
2
- width: 100%;
3
- display: flex;
4
- flex-direction: var(--wgPositionVertical);
5
- position: fixed;
6
- top: 0; right: 0; bottom: 0; left: 0;
7
- height: 100%;
8
- pointer-events: none;
9
- align-items: var(--wgPositionHorizintal);
10
- padding: 0;
11
- z-index: 100000;
12
- }
13
- .fsWidget {
14
- pointer-events: auto;
15
- background-color: var(--widgetColor);
16
- width: 34px;
17
- height: 112px;
18
- border-top-left-radius:var(--widgetLeftSideBorder) ;
19
- border-bottom-left-radius: var(--widgetLeftSideBorder);
20
- border-top-right-radius: var(--widgetRightSideBorder) ;
21
- border-bottom-right-radius: var(--widgetRightSideBorder);
22
- box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
23
- display: flex;
24
- flex-direction: column;
25
- align-items: center;
26
- justify-content: space-evenly;
27
- cursor: pointer;
28
- margin-top: 5px;
29
- }
30
- #fsMainIcon {
31
- width: 60%;
32
- margin-left: 4%;
33
- cursor: pointer;
34
- }
35
- #fsFeedbackTxt {
36
- color: var(--widgetTextColor);
37
- font-size: 15px;
38
- writing-mode: vertical-lr;
39
- transform: rotate(180deg);
40
- cursor: pointer;
41
- font-size-adjust: 0.40;
42
- }
43
- .fsWidget:hover {
44
- width: 35px;
45
- -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
46
- box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
47
- }
48
- .fsCont {
49
- pointer-events: auto;
50
- width: 320px;
51
- height: fit-content;
52
- background-color: rgb(255, 255, 255);
53
- margin-right: var(--widgetMarginRight);
54
- margin-left: var(--widgetMarginLeft);
55
- -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
56
- box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
57
- }
58
- .fsThanksMessageCont{
59
- pointer-events: auto;
60
- width: 320px;
61
- height: 104px;
62
- background-color: rgb(255, 255, 255);
63
- margin-right: var(--widgetMarginRight);
64
- margin-left: var(--widgetMarginLeft);
65
- -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
66
- box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
67
- }
68
- #fsCloseIcon{
69
- font-size: 15px;
70
- color: #ffff;
71
- font-weight: 600;
72
- font-family: system-ui;
73
- cursor: pointer;
74
-
75
- }
76
- .fsCloseCont{
77
- pointer-events: auto;
78
- background-color: #4d5167;
79
- width: 27px;
80
- height: 27px;
81
- border-radius: 50%;
82
- display: flex;
83
- justify-content: center;
84
- align-items: center;
85
- margin-top: -15px;
86
- margin-left: 85%;
87
- cursor: pointer;
88
- }
89
-
90
-
91
-
92
-
93
-
94
- /* @media (min-width: 640px) {
95
- body {
96
- max-width: none;
97
- }
98
- } */.fsReactionsContainer {
99
- pointer-events: auto;
100
- display: flex;
101
- flex-direction: column;
102
- height: 190px;
103
- }
104
- .fsIcons {
105
- display: flex;
106
- flex-direction: row;
107
- justify-content: space-evenly;
108
- margin-top: 11%;
109
- }
110
- #fsTxt {
111
- font-size: 17px;
112
- display: flex;
113
- text-align: center;
114
- margin-top: 5%;
115
- width: 61%;
116
- margin-left: 19%;
117
- }
118
-
119
- .fsIconTextCont {
120
- pointer-events: auto;
121
- display: flex;
122
- flex-direction: column;
123
- align-items: center;
124
- height: 22px;
125
- }
126
-
127
- .fsReactionText {
128
- font-size: 12px;
129
- display: none;
130
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
131
- margin-top: 0px;
132
-
133
- }
134
- .fsIconTextCont:hover{
135
- pointer-events: auto;
136
- cursor: pointer;
137
- }
138
- .fsReactionIcon:hover + .fsReactionText {
139
- display: block;
140
- opacity: 0.8;
141
- }
142
-
143
- .fsCommentContainer{
144
- pointer-events: auto;
145
- display: flex;
146
- flex-direction: column;
147
- height: 291px;
148
- pointer-events: auto;
149
- }
150
- .fsTextAreaCont{
151
- pointer-events: auto;
152
- width: 100%;
153
- height: 140px;
154
- background-color: #eaeaeb;
155
- margin-top: 17%;
156
- }
157
- .fsTextArea{
158
- border: 0px;
159
- width: 85%;
160
- height: 120px;
161
- background-color: #eaeaeb;
162
- margin-left: 6%;
163
- outline: none;
164
- margin-top: 4%;
165
- resize: none;
166
-
167
- }
168
- .fsSendButtonCommentComponent{
169
- pointer-events: auto;
170
- color: #ffff;
171
- font-size: 12px;
172
- text-align: center;
173
- margin-top: 7px;
174
-
175
- }
176
- .fsSendButtonContCommentComp{
177
- pointer-events: auto;
178
- background-color: var(--buttonColor);
179
- width: 50px;
180
- height: 29px;
181
- box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
182
- border-radius: 3px;
183
- margin-top: 13px;
184
- margin-right: 11px;
185
- cursor: pointer;
186
- border: 0px;
187
-
188
- }
189
-
190
- .fsCommentButtonContDisable{
191
- pointer-events: auto;
192
- background-color: #cccccc;
193
- width: 50px;
194
- height: 29px;
195
- box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
196
- border-radius: 3px;
197
- margin-top: 13px;
198
- margin-right: 11px;
199
- cursor:not-allowed;
200
- border: 0px;
201
- }
202
- .fsCommentButtonTxtDisable{
203
- pointer-events: auto;
204
- color: black;
205
- font-size: 12px;
206
- text-align: center;
207
- margin-top: 7px;
208
- }
209
- .fsFooter{
210
- pointer-events: auto;
211
- display: flex;
212
- justify-content: flex-end;
213
- }
214
-
215
- .fsIcons-second{
216
-
217
- display: flex;
218
- flex-direction: row;
219
- justify-content: space-evenly;
220
- margin-top: 6%;
221
- }
222
- .fsPointerDiv{
223
- width: 0;
224
- height: 0;
225
- border-left: 3px solid transparent;
226
- margin-top: -8px;
227
- border-right: 5px solid transparent;
228
- border-bottom: 8px solid #eaeaeb;
229
- margin-left: var(--pointerMargin);
230
-
231
-
232
- }
233
- #fsHateDiv{
234
- display: var(--hateDisplay);
235
- }
236
- #fsDislikeDiv{
237
- display: var(--dislikeDisplay);
238
- }
239
- #fsNeutralDiv{
240
- display: var(--neutralDisplay);
241
- }
242
- #fsLikeDiv{
243
- display: var(--likeDisplay);
244
- }
245
- #fsLoveDiv{
246
- display: var(--loveDisplay);
247
- }
248
- .fsEmailContainer{
249
- pointer-events: auto;
250
- display: flex;
251
- flex-direction: column;
252
- height: 220px;
253
- }
254
- #fsEmailInputCont{
255
- pointer-events: auto;
256
- pointer-events: auto;
257
- width: 100%;
258
- height: 46px;
259
- background-color: #eaeaeb;
260
- display: flex;
261
- /* align-items: center; */
262
- justify-content: center;
263
- margin-top: 10%;
264
-
265
- }
266
- #fsEmailTextArea{
267
- pointer-events: auto;
268
- text-align: center;
269
- border: 0px;
270
- background-color: #eaeaeb;
271
- outline: none;
272
- }
273
- #fsEmailText{
274
- width: 80%;
275
- text-align: center;
276
- margin-left: 11%;
277
- margin-top: 8%;
278
- line-height: 1.29;
279
- font-size: 17px;
280
- }
281
- .fsEmailFooter{
282
- pointer-events: auto;
283
- display: flex;
284
- justify-content: flex-end;
285
- flex-direction: row;
286
- }
287
- #fsSkipText{
288
- color: #908f8f;
289
- cursor: pointer;
290
- font-size: 13px;
291
- margin-top: 6%;
292
- margin-right: 4%;
293
- letter-spacing: normal;
294
-
295
- }
296
- #fsSkipText:hover{
297
- color: #666666;
298
- }