@fullsession.io/fs-feedback-widget 1.0.1 → 1.0.2
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/README.md +109 -109
- package/dist/bundle.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/lib/index.js +1 -1
- package/package.json +31 -31
- package/src/App.svelte +234 -223
- package/src/Icons/mainIcon.svelte +25 -25
- package/src/Icons/reactionIcons.svelte +134 -134
- package/src/main.js +45 -45
- package/src/widgetPages/reactionPage.svelte +466 -466
|
@@ -1,135 +1,135 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let name;
|
|
3
|
-
export let focusable = false;
|
|
4
|
-
export let width = "40px";
|
|
5
|
-
export let height = "40px";
|
|
6
|
-
let icons = [
|
|
7
|
-
{
|
|
8
|
-
box: 50,
|
|
9
|
-
name: "love",
|
|
10
|
-
svg: `
|
|
11
|
-
<g transform="translate(.48)" fill-rule="nonzero" fill="none">
|
|
12
|
-
<rect fill="#EF7C54" width="50" height="50" rx="13.28"/>
|
|
13
|
-
<circle fill="#3B3735" cx="7.241" cy="27.929" r="3.107"/>
|
|
14
|
-
<circle fill="#3B3735" cx="42.759" cy="27.929" r="3.107"/>
|
|
15
|
-
<path d="M31.236 28.764a2.245 2.245 0 0 1 2.002 3.246 9.086 9.086 0 0 1-8.234 4.779 9.104 9.104 0 0 1-8.242-4.779 2.245 2.245 0 0 1 2.002-3.246h12.472zM12.185 22.089a11.515 11.515 0 0 1-.766-.696c-1.036-1.062-2.29-2.803-1.741-4.352.392-1.21 1.81-1.567 2.95-1.488a4.743 4.743 0 0 1 1.793.487c.233.107.46.226.68.357a.33.33 0 0 0 .504-.261 3.046 3.046 0 0 1 1.358-2.611 2.385 2.385 0 0 1 2.906.635c1.21 1.314 1.088 3.133.584 4.726a20.017 20.017 0 0 1-1.34 3.255 8.12 8.12 0 0 1-.975 1.688c-.749.87-1.846.636-2.777.218a13.838 13.838 0 0 1-3.176-1.958zM37.807 22.089c.267-.218.523-.45.766-.696 1.035-1.062 2.289-2.803 1.74-4.352-.391-1.21-1.819-1.567-2.959-1.488a4.787 4.787 0 0 0-1.793.487 7.424 7.424 0 0 0-.678.357.33.33 0 0 1-.505-.261 3.046 3.046 0 0 0-1.358-2.611 2.385 2.385 0 0 0-2.907.635c-1.21 1.314-1.088 3.133-.583 4.726.35 1.122.799 2.211 1.34 3.255.256.6.584 1.167.975 1.688.749.87 1.854.636 2.776.218a13.838 13.838 0 0 0 3.186-1.958z" fill="#3B3735"/>
|
|
16
|
-
</g>
|
|
17
|
-
`
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
box: 50,
|
|
21
|
-
name: "unSelectedLove",
|
|
22
|
-
svg: `
|
|
23
|
-
<g transform="translate(.48)" fill-rule="nonzero" fill="none">
|
|
24
|
-
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.28"/>
|
|
25
|
-
<circle fill="#3B3735" cx="7.241" cy="27.929" r="3.107"/>
|
|
26
|
-
<circle fill="#3B3735" cx="42.759" cy="27.929" r="3.107"/>
|
|
27
|
-
<path d="M31.236 28.764a2.245 2.245 0 0 1 2.002 3.246 9.086 9.086 0 0 1-8.234 4.779 9.104 9.104 0 0 1-8.242-4.779 2.245 2.245 0 0 1 2.002-3.246h12.472zM12.185 22.089a11.515 11.515 0 0 1-.766-.696c-1.036-1.062-2.29-2.803-1.741-4.352.392-1.21 1.81-1.567 2.95-1.488a4.743 4.743 0 0 1 1.793.487c.233.107.46.226.68.357a.33.33 0 0 0 .504-.261 3.046 3.046 0 0 1 1.358-2.611 2.385 2.385 0 0 1 2.906.635c1.21 1.314 1.088 3.133.584 4.726a20.017 20.017 0 0 1-1.34 3.255 8.12 8.12 0 0 1-.975 1.688c-.749.87-1.846.636-2.777.218a13.838 13.838 0 0 1-3.176-1.958zM37.807 22.089c.267-.218.523-.45.766-.696 1.035-1.062 2.289-2.803 1.74-4.352-.391-1.21-1.819-1.567-2.959-1.488a4.787 4.787 0 0 0-1.793.487 7.424 7.424 0 0 0-.678.357.33.33 0 0 1-.505-.261 3.046 3.046 0 0 0-1.358-2.611 2.385 2.385 0 0 0-2.907.635c-1.21 1.314-1.088 3.133-.583 4.726.35 1.122.799 2.211 1.34 3.255.256.6.584 1.167.975 1.688.749.87 1.854.636 2.776.218a13.838 13.838 0 0 0 3.186-1.958z" fill="#3B3735"/>
|
|
28
|
-
</g>
|
|
29
|
-
`
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
box: 50,
|
|
33
|
-
name: "like",
|
|
34
|
-
svg: `
|
|
35
|
-
<g transform="translate(.86)" fill-rule="nonzero" fill="none">
|
|
36
|
-
<rect fill="#FDC537" width="50" height="50" rx="13.12"/>
|
|
37
|
-
<ellipse fill="#3B3735" cx="14.156" cy="19.803" rx="2.167" ry="3.656"/>
|
|
38
|
-
<ellipse fill="#3B3735" cx="35.844" cy="19.803" rx="2.167" ry="3.656"/>
|
|
39
|
-
<path d="M32.444 28.1a2.643 2.643 0 0 1 2.37 3.824 10.738 10.738 0 0 1-9.69 5.629 10.738 10.738 0 0 1-9.69-5.63 2.643 2.643 0 0 1 2.36-3.822h14.65z" fill="#3B3735"/>
|
|
40
|
-
</g>
|
|
41
|
-
`
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
box: 50,
|
|
45
|
-
name: "unSelectedLike",
|
|
46
|
-
svg: `
|
|
47
|
-
<g transform="translate(.86)" fill-rule="nonzero" fill="none">
|
|
48
|
-
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.12"/>
|
|
49
|
-
<ellipse fill="#3B3735" cx="14.156" cy="19.803" rx="2.167" ry="3.656"/>
|
|
50
|
-
<ellipse fill="#3B3735" cx="35.844" cy="19.803" rx="2.167" ry="3.656"/>
|
|
51
|
-
<path d="M32.444 28.1a2.643 2.643 0 0 1 2.37 3.824 10.738 10.738 0 0 1-9.69 5.629 10.738 10.738 0 0 1-9.69-5.63 2.643 2.643 0 0 1 2.36-3.822h14.65z" fill="#3B3735"/>
|
|
52
|
-
</g>
|
|
53
|
-
`
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
box: 50,
|
|
57
|
-
name: "neutral",
|
|
58
|
-
svg: `
|
|
59
|
-
<g transform="translate(.24)" fill-rule="nonzero" fill="gray">
|
|
60
|
-
<rect fill="#F59F45" width="50" height="50" rx="12.63"/>
|
|
61
|
-
<circle fill="#3B3735" cx="15.169" cy="21.459" r="2.81"/>
|
|
62
|
-
<circle fill="#3B3735" cx="34.831" cy="21.459" r="2.81"/>
|
|
63
|
-
<path d="M40.847 31.351H9.135a.67.67 0 1 1 0-1.33h31.712a.67.67 0 1 1 0 1.33z" fill="#3B3735"/>
|
|
64
|
-
</g>
|
|
65
|
-
`
|
|
66
|
-
}
|
|
67
|
-
,
|
|
68
|
-
{
|
|
69
|
-
box: 50,
|
|
70
|
-
name: "unSelectedNeutral",
|
|
71
|
-
svg: `
|
|
72
|
-
<g transform="translate(.24)" fill-rule="nonzero" fill="gray">
|
|
73
|
-
<rect fill="rgb(223 223 223)" width="50" height="50" rx="12.63"/>
|
|
74
|
-
<circle fill="#3B3735" cx="15.169" cy="21.459" r="2.81"/>
|
|
75
|
-
<circle fill="#3B3735" cx="34.831" cy="21.459" r="2.81"/>
|
|
76
|
-
<path d="M40.847 31.351H9.135a.67.67 0 1 1 0-1.33h31.712a.67.67 0 1 1 0 1.33z" fill="#3B3735"/>
|
|
77
|
-
</g>
|
|
78
|
-
`
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
box: 50,
|
|
82
|
-
name: "dislike",
|
|
83
|
-
svg: `
|
|
84
|
-
<g transform="translate(.62)" fill-rule="nonzero" fill="none">
|
|
85
|
-
<rect fill="#FEDCAB" width="50" height="50" rx="13.12"/>
|
|
86
|
-
<path d="M33.333 34.743a1.762 1.762 0 0 0 1.718-2.211c-1.119-4.158-5.285-7.241-10.324-7.241s-9.206 3.083-10.324 7.24a1.762 1.762 0 0 0 1.718 2.212l6.536-.881a15.178 15.178 0 0 1 3.946 0l6.73.88z" fill="#3B3735"/>
|
|
87
|
-
<circle fill="#3B3735" cx="15.169" cy="18.076" r="2.81"/>
|
|
88
|
-
<circle fill="#3B3735" cx="34.831" cy="18.076" r="2.81"/>
|
|
89
|
-
</g>`
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
box: 50,
|
|
93
|
-
name: "unSelectedDislike",
|
|
94
|
-
svg: `
|
|
95
|
-
<g transform="translate(.62)" fill-rule="nonzero" fill="none">
|
|
96
|
-
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.12"/>
|
|
97
|
-
<path d="M33.333 34.743a1.762 1.762 0 0 0 1.718-2.211c-1.119-4.158-5.285-7.241-10.324-7.241s-9.206 3.083-10.324 7.24a1.762 1.762 0 0 0 1.718 2.212l6.536-.881a15.178 15.178 0 0 1 3.946 0l6.73.88z" fill="#3B3735"/>
|
|
98
|
-
<circle fill="#3B3735" cx="15.169" cy="18.076" r="2.81"/>
|
|
99
|
-
<circle fill="#3B3735" cx="34.831" cy="18.076" r="2.81"/>
|
|
100
|
-
</g>`
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
{
|
|
104
|
-
box: 50,
|
|
105
|
-
name: "hate",
|
|
106
|
-
svg: `
|
|
107
|
-
<g fill-rule="nonzero" fill="none">
|
|
108
|
-
<rect fill="#FEDCAB" width="50" height="50" rx="13.44"/>
|
|
109
|
-
<path d="M20.218 23.865a1.144 1.144 0 0 1-.86-.336l-6.114-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.809 1.96h.043z" fill="#3B3735"/>
|
|
110
|
-
<path d="M14.104 23.865a1.152 1.152 0 0 1-.817-1.961l6.114-6.115a1.152 1.152 0 0 1 1.626 1.634L14.92 23.53a1.161 1.161 0 0 1-.817.336zM36.352 23.865c-.303 0-.594-.121-.808-.336l-6.115-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.817 1.96z" fill="#3B3735"/>
|
|
111
|
-
<path d="M30.246 23.865a1.152 1.152 0 0 1-.86-1.961l6.115-6.115a1.152 1.152 0 0 1 1.625 1.634L31.02 23.53a1.161 1.161 0 0 1-.774.336zM35.604 34.546a6.02 6.02 0 0 1-3.389-1.376c-1.083-.783-1.96-1.075-2.339-.783-.157.15-.296.317-.413.5-.221.34-.484.652-.782.928-1.29 1.092-3.07.791-4.3.146a11.937 11.937 0 0 1-1.299-.86 8.11 8.11 0 0 0-1.35-.808 3.44 3.44 0 0 0-3.363.447l-.387.335c-.417.416-.906.75-1.444.99-1.815.722-3.337-.38-4.558-1.256a6.416 6.416 0 0 0-1.952-1.127 2.116 2.116 0 0 0-2.383 1.307 1.152 1.152 0 0 1-2.193-.696 4.386 4.386 0 0 1 5.16-2.838 8.505 8.505 0 0 1 2.71 1.505c1.169.86 1.78 1.212 2.356.989.281-.146.537-.338.756-.568l.508-.43a5.745 5.745 0 0 1 5.676-.757c.607.285 1.183.631 1.72 1.032.345.245.704.469 1.075.671.585.31 1.367.456 1.72.138a2.58 2.58 0 0 0 .395-.49 4.3 4.3 0 0 1 .86-1.015c.86-.68 2.512-1.11 5.092.757 1.109.808 1.978 1.109 2.373.86.153-.135.289-.288.404-.456.112-.138.215-.267.336-.396a4.807 4.807 0 0 1 7.869 1.72 1.152 1.152 0 1 1-2.202.68 2.52 2.52 0 0 0-3.956-.86l-.232.283c-.242.343-.532.65-.86.912a2.83 2.83 0 0 1-1.608.516z" fill="#3B3735"/>
|
|
112
|
-
</g>`
|
|
113
|
-
}
|
|
114
|
-
,
|
|
115
|
-
|
|
116
|
-
{
|
|
117
|
-
box: 50,
|
|
118
|
-
name: "unSelectedHate",
|
|
119
|
-
svg: `
|
|
120
|
-
<g fill-rule="nonzero" fill="none">
|
|
121
|
-
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.44"/>
|
|
122
|
-
<path d="M20.218 23.865a1.144 1.144 0 0 1-.86-.336l-6.114-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.809 1.96h.043z" fill="#3B3735"/>
|
|
123
|
-
<path d="M14.104 23.865a1.152 1.152 0 0 1-.817-1.961l6.114-6.115a1.152 1.152 0 0 1 1.626 1.634L14.92 23.53a1.161 1.161 0 0 1-.817.336zM36.352 23.865c-.303 0-.594-.121-.808-.336l-6.115-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.817 1.96z" fill="#3B3735"/>
|
|
124
|
-
<path d="M30.246 23.865a1.152 1.152 0 0 1-.86-1.961l6.115-6.115a1.152 1.152 0 0 1 1.625 1.634L31.02 23.53a1.161 1.161 0 0 1-.774.336zM35.604 34.546a6.02 6.02 0 0 1-3.389-1.376c-1.083-.783-1.96-1.075-2.339-.783-.157.15-.296.317-.413.5-.221.34-.484.652-.782.928-1.29 1.092-3.07.791-4.3.146a11.937 11.937 0 0 1-1.299-.86 8.11 8.11 0 0 0-1.35-.808 3.44 3.44 0 0 0-3.363.447l-.387.335c-.417.416-.906.75-1.444.99-1.815.722-3.337-.38-4.558-1.256a6.416 6.416 0 0 0-1.952-1.127 2.116 2.116 0 0 0-2.383 1.307 1.152 1.152 0 0 1-2.193-.696 4.386 4.386 0 0 1 5.16-2.838 8.505 8.505 0 0 1 2.71 1.505c1.169.86 1.78 1.212 2.356.989.281-.146.537-.338.756-.568l.508-.43a5.745 5.745 0 0 1 5.676-.757c.607.285 1.183.631 1.72 1.032.345.245.704.469 1.075.671.585.31 1.367.456 1.72.138a2.58 2.58 0 0 0 .395-.49 4.3 4.3 0 0 1 .86-1.015c.86-.68 2.512-1.11 5.092.757 1.109.808 1.978 1.109 2.373.86.153-.135.289-.288.404-.456.112-.138.215-.267.336-.396a4.807 4.807 0 0 1 7.869 1.72 1.152 1.152 0 1 1-2.202.68 2.52 2.52 0 0 0-3.956-.86l-.232.283c-.242.343-.532.65-.86.912a2.83 2.83 0 0 1-1.608.516z" fill="#3B3735"/>
|
|
125
|
-
</g>`
|
|
126
|
-
}
|
|
127
|
-
];
|
|
128
|
-
let displayIcon = icons.find((e) => e.name === name);
|
|
129
|
-
</script>
|
|
130
|
-
<svg
|
|
131
|
-
class={$$props.class}
|
|
132
|
-
{focusable}
|
|
133
|
-
{width}
|
|
134
|
-
{height}
|
|
1
|
+
<script>
|
|
2
|
+
export let name;
|
|
3
|
+
export let focusable = false;
|
|
4
|
+
export let width = "40px";
|
|
5
|
+
export let height = "40px";
|
|
6
|
+
let icons = [
|
|
7
|
+
{
|
|
8
|
+
box: 50,
|
|
9
|
+
name: "love",
|
|
10
|
+
svg: `
|
|
11
|
+
<g transform="translate(.48)" fill-rule="nonzero" fill="none">
|
|
12
|
+
<rect fill="#EF7C54" width="50" height="50" rx="13.28"/>
|
|
13
|
+
<circle fill="#3B3735" cx="7.241" cy="27.929" r="3.107"/>
|
|
14
|
+
<circle fill="#3B3735" cx="42.759" cy="27.929" r="3.107"/>
|
|
15
|
+
<path d="M31.236 28.764a2.245 2.245 0 0 1 2.002 3.246 9.086 9.086 0 0 1-8.234 4.779 9.104 9.104 0 0 1-8.242-4.779 2.245 2.245 0 0 1 2.002-3.246h12.472zM12.185 22.089a11.515 11.515 0 0 1-.766-.696c-1.036-1.062-2.29-2.803-1.741-4.352.392-1.21 1.81-1.567 2.95-1.488a4.743 4.743 0 0 1 1.793.487c.233.107.46.226.68.357a.33.33 0 0 0 .504-.261 3.046 3.046 0 0 1 1.358-2.611 2.385 2.385 0 0 1 2.906.635c1.21 1.314 1.088 3.133.584 4.726a20.017 20.017 0 0 1-1.34 3.255 8.12 8.12 0 0 1-.975 1.688c-.749.87-1.846.636-2.777.218a13.838 13.838 0 0 1-3.176-1.958zM37.807 22.089c.267-.218.523-.45.766-.696 1.035-1.062 2.289-2.803 1.74-4.352-.391-1.21-1.819-1.567-2.959-1.488a4.787 4.787 0 0 0-1.793.487 7.424 7.424 0 0 0-.678.357.33.33 0 0 1-.505-.261 3.046 3.046 0 0 0-1.358-2.611 2.385 2.385 0 0 0-2.907.635c-1.21 1.314-1.088 3.133-.583 4.726.35 1.122.799 2.211 1.34 3.255.256.6.584 1.167.975 1.688.749.87 1.854.636 2.776.218a13.838 13.838 0 0 0 3.186-1.958z" fill="#3B3735"/>
|
|
16
|
+
</g>
|
|
17
|
+
`
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
box: 50,
|
|
21
|
+
name: "unSelectedLove",
|
|
22
|
+
svg: `
|
|
23
|
+
<g transform="translate(.48)" fill-rule="nonzero" fill="none">
|
|
24
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.28"/>
|
|
25
|
+
<circle fill="#3B3735" cx="7.241" cy="27.929" r="3.107"/>
|
|
26
|
+
<circle fill="#3B3735" cx="42.759" cy="27.929" r="3.107"/>
|
|
27
|
+
<path d="M31.236 28.764a2.245 2.245 0 0 1 2.002 3.246 9.086 9.086 0 0 1-8.234 4.779 9.104 9.104 0 0 1-8.242-4.779 2.245 2.245 0 0 1 2.002-3.246h12.472zM12.185 22.089a11.515 11.515 0 0 1-.766-.696c-1.036-1.062-2.29-2.803-1.741-4.352.392-1.21 1.81-1.567 2.95-1.488a4.743 4.743 0 0 1 1.793.487c.233.107.46.226.68.357a.33.33 0 0 0 .504-.261 3.046 3.046 0 0 1 1.358-2.611 2.385 2.385 0 0 1 2.906.635c1.21 1.314 1.088 3.133.584 4.726a20.017 20.017 0 0 1-1.34 3.255 8.12 8.12 0 0 1-.975 1.688c-.749.87-1.846.636-2.777.218a13.838 13.838 0 0 1-3.176-1.958zM37.807 22.089c.267-.218.523-.45.766-.696 1.035-1.062 2.289-2.803 1.74-4.352-.391-1.21-1.819-1.567-2.959-1.488a4.787 4.787 0 0 0-1.793.487 7.424 7.424 0 0 0-.678.357.33.33 0 0 1-.505-.261 3.046 3.046 0 0 0-1.358-2.611 2.385 2.385 0 0 0-2.907.635c-1.21 1.314-1.088 3.133-.583 4.726.35 1.122.799 2.211 1.34 3.255.256.6.584 1.167.975 1.688.749.87 1.854.636 2.776.218a13.838 13.838 0 0 0 3.186-1.958z" fill="#3B3735"/>
|
|
28
|
+
</g>
|
|
29
|
+
`
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
box: 50,
|
|
33
|
+
name: "like",
|
|
34
|
+
svg: `
|
|
35
|
+
<g transform="translate(.86)" fill-rule="nonzero" fill="none">
|
|
36
|
+
<rect fill="#FDC537" width="50" height="50" rx="13.12"/>
|
|
37
|
+
<ellipse fill="#3B3735" cx="14.156" cy="19.803" rx="2.167" ry="3.656"/>
|
|
38
|
+
<ellipse fill="#3B3735" cx="35.844" cy="19.803" rx="2.167" ry="3.656"/>
|
|
39
|
+
<path d="M32.444 28.1a2.643 2.643 0 0 1 2.37 3.824 10.738 10.738 0 0 1-9.69 5.629 10.738 10.738 0 0 1-9.69-5.63 2.643 2.643 0 0 1 2.36-3.822h14.65z" fill="#3B3735"/>
|
|
40
|
+
</g>
|
|
41
|
+
`
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
box: 50,
|
|
45
|
+
name: "unSelectedLike",
|
|
46
|
+
svg: `
|
|
47
|
+
<g transform="translate(.86)" fill-rule="nonzero" fill="none">
|
|
48
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.12"/>
|
|
49
|
+
<ellipse fill="#3B3735" cx="14.156" cy="19.803" rx="2.167" ry="3.656"/>
|
|
50
|
+
<ellipse fill="#3B3735" cx="35.844" cy="19.803" rx="2.167" ry="3.656"/>
|
|
51
|
+
<path d="M32.444 28.1a2.643 2.643 0 0 1 2.37 3.824 10.738 10.738 0 0 1-9.69 5.629 10.738 10.738 0 0 1-9.69-5.63 2.643 2.643 0 0 1 2.36-3.822h14.65z" fill="#3B3735"/>
|
|
52
|
+
</g>
|
|
53
|
+
`
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
box: 50,
|
|
57
|
+
name: "neutral",
|
|
58
|
+
svg: `
|
|
59
|
+
<g transform="translate(.24)" fill-rule="nonzero" fill="gray">
|
|
60
|
+
<rect fill="#F59F45" width="50" height="50" rx="12.63"/>
|
|
61
|
+
<circle fill="#3B3735" cx="15.169" cy="21.459" r="2.81"/>
|
|
62
|
+
<circle fill="#3B3735" cx="34.831" cy="21.459" r="2.81"/>
|
|
63
|
+
<path d="M40.847 31.351H9.135a.67.67 0 1 1 0-1.33h31.712a.67.67 0 1 1 0 1.33z" fill="#3B3735"/>
|
|
64
|
+
</g>
|
|
65
|
+
`
|
|
66
|
+
}
|
|
67
|
+
,
|
|
68
|
+
{
|
|
69
|
+
box: 50,
|
|
70
|
+
name: "unSelectedNeutral",
|
|
71
|
+
svg: `
|
|
72
|
+
<g transform="translate(.24)" fill-rule="nonzero" fill="gray">
|
|
73
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="12.63"/>
|
|
74
|
+
<circle fill="#3B3735" cx="15.169" cy="21.459" r="2.81"/>
|
|
75
|
+
<circle fill="#3B3735" cx="34.831" cy="21.459" r="2.81"/>
|
|
76
|
+
<path d="M40.847 31.351H9.135a.67.67 0 1 1 0-1.33h31.712a.67.67 0 1 1 0 1.33z" fill="#3B3735"/>
|
|
77
|
+
</g>
|
|
78
|
+
`
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
box: 50,
|
|
82
|
+
name: "dislike",
|
|
83
|
+
svg: `
|
|
84
|
+
<g transform="translate(.62)" fill-rule="nonzero" fill="none">
|
|
85
|
+
<rect fill="#FEDCAB" width="50" height="50" rx="13.12"/>
|
|
86
|
+
<path d="M33.333 34.743a1.762 1.762 0 0 0 1.718-2.211c-1.119-4.158-5.285-7.241-10.324-7.241s-9.206 3.083-10.324 7.24a1.762 1.762 0 0 0 1.718 2.212l6.536-.881a15.178 15.178 0 0 1 3.946 0l6.73.88z" fill="#3B3735"/>
|
|
87
|
+
<circle fill="#3B3735" cx="15.169" cy="18.076" r="2.81"/>
|
|
88
|
+
<circle fill="#3B3735" cx="34.831" cy="18.076" r="2.81"/>
|
|
89
|
+
</g>`
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
box: 50,
|
|
93
|
+
name: "unSelectedDislike",
|
|
94
|
+
svg: `
|
|
95
|
+
<g transform="translate(.62)" fill-rule="nonzero" fill="none">
|
|
96
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.12"/>
|
|
97
|
+
<path d="M33.333 34.743a1.762 1.762 0 0 0 1.718-2.211c-1.119-4.158-5.285-7.241-10.324-7.241s-9.206 3.083-10.324 7.24a1.762 1.762 0 0 0 1.718 2.212l6.536-.881a15.178 15.178 0 0 1 3.946 0l6.73.88z" fill="#3B3735"/>
|
|
98
|
+
<circle fill="#3B3735" cx="15.169" cy="18.076" r="2.81"/>
|
|
99
|
+
<circle fill="#3B3735" cx="34.831" cy="18.076" r="2.81"/>
|
|
100
|
+
</g>`
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
{
|
|
104
|
+
box: 50,
|
|
105
|
+
name: "hate",
|
|
106
|
+
svg: `
|
|
107
|
+
<g fill-rule="nonzero" fill="none">
|
|
108
|
+
<rect fill="#FEDCAB" width="50" height="50" rx="13.44"/>
|
|
109
|
+
<path d="M20.218 23.865a1.144 1.144 0 0 1-.86-.336l-6.114-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.809 1.96h.043z" fill="#3B3735"/>
|
|
110
|
+
<path d="M14.104 23.865a1.152 1.152 0 0 1-.817-1.961l6.114-6.115a1.152 1.152 0 0 1 1.626 1.634L14.92 23.53a1.161 1.161 0 0 1-.817.336zM36.352 23.865c-.303 0-.594-.121-.808-.336l-6.115-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.817 1.96z" fill="#3B3735"/>
|
|
111
|
+
<path d="M30.246 23.865a1.152 1.152 0 0 1-.86-1.961l6.115-6.115a1.152 1.152 0 0 1 1.625 1.634L31.02 23.53a1.161 1.161 0 0 1-.774.336zM35.604 34.546a6.02 6.02 0 0 1-3.389-1.376c-1.083-.783-1.96-1.075-2.339-.783-.157.15-.296.317-.413.5-.221.34-.484.652-.782.928-1.29 1.092-3.07.791-4.3.146a11.937 11.937 0 0 1-1.299-.86 8.11 8.11 0 0 0-1.35-.808 3.44 3.44 0 0 0-3.363.447l-.387.335c-.417.416-.906.75-1.444.99-1.815.722-3.337-.38-4.558-1.256a6.416 6.416 0 0 0-1.952-1.127 2.116 2.116 0 0 0-2.383 1.307 1.152 1.152 0 0 1-2.193-.696 4.386 4.386 0 0 1 5.16-2.838 8.505 8.505 0 0 1 2.71 1.505c1.169.86 1.78 1.212 2.356.989.281-.146.537-.338.756-.568l.508-.43a5.745 5.745 0 0 1 5.676-.757c.607.285 1.183.631 1.72 1.032.345.245.704.469 1.075.671.585.31 1.367.456 1.72.138a2.58 2.58 0 0 0 .395-.49 4.3 4.3 0 0 1 .86-1.015c.86-.68 2.512-1.11 5.092.757 1.109.808 1.978 1.109 2.373.86.153-.135.289-.288.404-.456.112-.138.215-.267.336-.396a4.807 4.807 0 0 1 7.869 1.72 1.152 1.152 0 1 1-2.202.68 2.52 2.52 0 0 0-3.956-.86l-.232.283c-.242.343-.532.65-.86.912a2.83 2.83 0 0 1-1.608.516z" fill="#3B3735"/>
|
|
112
|
+
</g>`
|
|
113
|
+
}
|
|
114
|
+
,
|
|
115
|
+
|
|
116
|
+
{
|
|
117
|
+
box: 50,
|
|
118
|
+
name: "unSelectedHate",
|
|
119
|
+
svg: `
|
|
120
|
+
<g fill-rule="nonzero" fill="none">
|
|
121
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.44"/>
|
|
122
|
+
<path d="M20.218 23.865a1.144 1.144 0 0 1-.86-.336l-6.114-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.809 1.96h.043z" fill="#3B3735"/>
|
|
123
|
+
<path d="M14.104 23.865a1.152 1.152 0 0 1-.817-1.961l6.114-6.115a1.152 1.152 0 0 1 1.626 1.634L14.92 23.53a1.161 1.161 0 0 1-.817.336zM36.352 23.865c-.303 0-.594-.121-.808-.336l-6.115-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.817 1.96z" fill="#3B3735"/>
|
|
124
|
+
<path d="M30.246 23.865a1.152 1.152 0 0 1-.86-1.961l6.115-6.115a1.152 1.152 0 0 1 1.625 1.634L31.02 23.53a1.161 1.161 0 0 1-.774.336zM35.604 34.546a6.02 6.02 0 0 1-3.389-1.376c-1.083-.783-1.96-1.075-2.339-.783-.157.15-.296.317-.413.5-.221.34-.484.652-.782.928-1.29 1.092-3.07.791-4.3.146a11.937 11.937 0 0 1-1.299-.86 8.11 8.11 0 0 0-1.35-.808 3.44 3.44 0 0 0-3.363.447l-.387.335c-.417.416-.906.75-1.444.99-1.815.722-3.337-.38-4.558-1.256a6.416 6.416 0 0 0-1.952-1.127 2.116 2.116 0 0 0-2.383 1.307 1.152 1.152 0 0 1-2.193-.696 4.386 4.386 0 0 1 5.16-2.838 8.505 8.505 0 0 1 2.71 1.505c1.169.86 1.78 1.212 2.356.989.281-.146.537-.338.756-.568l.508-.43a5.745 5.745 0 0 1 5.676-.757c.607.285 1.183.631 1.72 1.032.345.245.704.469 1.075.671.585.31 1.367.456 1.72.138a2.58 2.58 0 0 0 .395-.49 4.3 4.3 0 0 1 .86-1.015c.86-.68 2.512-1.11 5.092.757 1.109.808 1.978 1.109 2.373.86.153-.135.289-.288.404-.456.112-.138.215-.267.336-.396a4.807 4.807 0 0 1 7.869 1.72 1.152 1.152 0 1 1-2.202.68 2.52 2.52 0 0 0-3.956-.86l-.232.283c-.242.343-.532.65-.86.912a2.83 2.83 0 0 1-1.608.516z" fill="#3B3735"/>
|
|
125
|
+
</g>`
|
|
126
|
+
}
|
|
127
|
+
];
|
|
128
|
+
let displayIcon = icons.find((e) => e.name === name);
|
|
129
|
+
</script>
|
|
130
|
+
<svg
|
|
131
|
+
class={$$props.class}
|
|
132
|
+
{focusable}
|
|
133
|
+
{width}
|
|
134
|
+
{height}
|
|
135
135
|
viewBox="0 0 {displayIcon.box} {displayIcon.box-1}">{@html displayIcon.svg}</svg>
|
package/src/main.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import App from './App.svelte';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export function feedbackCreator(response) {
|
|
6
|
-
new App({
|
|
7
|
-
target: document.body,
|
|
8
|
-
props: {
|
|
9
|
-
feedback: response
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
// let widget ={id: 1,
|
|
15
|
-
// wgStatus: 1,
|
|
16
|
-
// wgName: "ask",
|
|
17
|
-
// wgDescription: "test",
|
|
18
|
-
// wgCrtDt: "2021-12-05 10:49:14",
|
|
19
|
-
// wgResponses: null,
|
|
20
|
-
// wgUpdTime: null,
|
|
21
|
-
// SiteId: 98,
|
|
22
|
-
// UserId: 262,
|
|
23
|
-
// wgLanguage: "en",
|
|
24
|
-
// wgPosition: 0,
|
|
25
|
-
// wgAccentColor: "#51797b",
|
|
26
|
-
// wgAlternateColor: 1,
|
|
27
|
-
// wgQuestion: "How would you rate your experience?" ,
|
|
28
|
-
// wgUserScreenshot: 1,
|
|
29
|
-
// wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
|
|
30
|
-
// wgEmailReqActivation: 1,
|
|
31
|
-
// wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
|
|
32
|
-
// wgAdditionalMsgActivation: 1,
|
|
33
|
-
// wgThanksMsg: "Thank you for sharing your feedback with us",
|
|
34
|
-
// wgThanksMsgActivation: 1,
|
|
35
|
-
// wgDesktop: 1,
|
|
36
|
-
// wgPhone: 1,
|
|
37
|
-
// wgTablet:1,
|
|
38
|
-
// wgPages: [{"id":0,"name":"*"}],
|
|
39
|
-
// wgWidgetToUsers: 0,
|
|
40
|
-
// wgPercentage:100,
|
|
41
|
-
// wgEmail: "abd@gmail.com",
|
|
42
|
-
// wgWidgetToAllPages: 1,
|
|
43
|
-
// wgReactionStyle: 0,
|
|
44
|
-
// wgResponseViaEmail: 1}
|
|
45
|
-
// feedbackCreator(widget);
|
|
1
|
+
import App from './App.svelte';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export function feedbackCreator(response) {
|
|
6
|
+
new App({
|
|
7
|
+
target: document.body,
|
|
8
|
+
props: {
|
|
9
|
+
feedback: response
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// let widget ={id: 1,
|
|
15
|
+
// wgStatus: 1,
|
|
16
|
+
// wgName: "ask",
|
|
17
|
+
// wgDescription: "test",
|
|
18
|
+
// wgCrtDt: "2021-12-05 10:49:14",
|
|
19
|
+
// wgResponses: null,
|
|
20
|
+
// wgUpdTime: null,
|
|
21
|
+
// SiteId: 98,
|
|
22
|
+
// UserId: 262,
|
|
23
|
+
// wgLanguage: "en",
|
|
24
|
+
// wgPosition: 0,
|
|
25
|
+
// wgAccentColor: "#51797b",
|
|
26
|
+
// wgAlternateColor: 1,
|
|
27
|
+
// wgQuestion: "How would you rate your experience?" ,
|
|
28
|
+
// wgUserScreenshot: 1,
|
|
29
|
+
// wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
|
|
30
|
+
// wgEmailReqActivation: 1,
|
|
31
|
+
// wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
|
|
32
|
+
// wgAdditionalMsgActivation: 1,
|
|
33
|
+
// wgThanksMsg: "Thank you for sharing your feedback with us",
|
|
34
|
+
// wgThanksMsgActivation: 1,
|
|
35
|
+
// wgDesktop: 1,
|
|
36
|
+
// wgPhone: 1,
|
|
37
|
+
// wgTablet:1,
|
|
38
|
+
// wgPages: [{"id":0,"name":"*"}],
|
|
39
|
+
// wgWidgetToUsers: 0,
|
|
40
|
+
// wgPercentage:100,
|
|
41
|
+
// wgEmail: "abd@gmail.com",
|
|
42
|
+
// wgWidgetToAllPages: 1,
|
|
43
|
+
// wgReactionStyle: 0,
|
|
44
|
+
// wgResponseViaEmail: 1}
|
|
45
|
+
// feedbackCreator(widget);
|