@fullsession.io/fs-feedback-widget 1.5.8 → 1.5.10

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.
@@ -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,57 +1,56 @@
1
- import App from './App.svelte';
2
-
3
-
4
-
5
- export function feedbackCreator(response,htmlElement) {
6
- let view;
7
- let position;
8
- if(htmlElement == null || htmlElement == undefined){
9
- view = document.body
10
- position = 'fixed';
11
- }
12
- else{
13
- view = htmlElement;
14
- position = 'absolute';
15
- }
16
- console.log(view)
17
- new App({
18
- target: view,
19
- props: {
20
- feedback: response,
21
- widgetPosition:position
22
- }
23
- });
24
- }
25
-
26
- // let widget ={id: 1,
27
- // wgStatus: 1,
28
- // wgName: "ask",
29
- // wgDescription: "test",
30
- // wgCrtDt: "2021-12-05 10:49:14",
31
- // wgResponses: null,
32
- // wgUpdTime: null,
33
- // SiteId: 98,
34
- // UserId: 262,
35
- // wgLanguage: "en",
36
- // wgPosition: "0",
37
- // wgAccentColor: "#51797b",
38
- // wgAlternateColor: true,
39
- // wgQuestion: "How would you rate your experience?" ,
40
- // wgUserScreenshot: 1,
41
- // wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
42
- // wgEmailReqActivation: 1,
43
- // wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
44
- // wgAdditionalMsgActivation: 1,
45
- // wgThanksMsg: "Thank you for sharing your feedback with us",
46
- // wgThanksMsgActivation: 1,
47
- // wgDesktop: 1,
48
- // wgPhone: 1,
49
- // wgTablet:1,
50
- // wgPages: [{"id":0,"name":"*"}],
51
- // wgWidgetToUsers: 0,
52
- // wgPercentage:100,
53
- // wgEmail: "abd@gmail.com",
54
- // wgWidgetToAllPages: 1,
55
- // wgReactionStyle: 0,
56
- // wgResponseViaEmail: 1}
57
- // feedbackCreator(widget,null);
1
+ import App from './App.svelte';
2
+
3
+
4
+
5
+ export function feedbackCreator(response,htmlElement) {
6
+ let view;
7
+ let position;
8
+ if(htmlElement == null || htmlElement == undefined){
9
+ view = document.body
10
+ position = 'fixed';
11
+ }
12
+ else{
13
+ view = htmlElement;
14
+ position = 'absolute';
15
+ }
16
+ new App({
17
+ target: view,
18
+ props: {
19
+ feedback: response,
20
+ widgetPosition:position
21
+ }
22
+ });
23
+ }
24
+
25
+ // let widget ={id: 1,
26
+ // wgStatus: 1,
27
+ // wgName: "ask",
28
+ // wgDescription: "test",
29
+ // wgCrtDt: "2021-12-05 10:49:14",
30
+ // wgResponses: null,
31
+ // wgUpdTime: null,
32
+ // SiteId: 98,
33
+ // UserId: 262,
34
+ // wgLanguage: "en",
35
+ // wgPosition: "0",
36
+ // wgAccentColor: "#51797b",
37
+ // wgAlternateColor: true,
38
+ // wgQuestion: "How would you rate your experience?" ,
39
+ // wgUserScreenshot: 1,
40
+ // wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
41
+ // wgEmailReqActivation: 1,
42
+ // wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
43
+ // wgAdditionalMsgActivation: 1,
44
+ // wgThanksMsg: "Thank you for sharing your feedback with us",
45
+ // wgThanksMsgActivation: 1,
46
+ // wgDesktop: 1,
47
+ // wgPhone: 1,
48
+ // wgTablet:1,
49
+ // wgPages: [{"id":0,"name":"*"}],
50
+ // wgWidgetToUsers: 0,
51
+ // wgPercentage:100,
52
+ // wgEmail: "abd@gmail.com",
53
+ // wgWidgetToAllPages: 1,
54
+ // wgReactionStyle: 0,
55
+ // wgResponseViaEmail: 1}
56
+ // feedbackCreator(widget,null);
@@ -1,112 +1,112 @@
1
- fsContainer{
2
- width: 100%;
3
- display: flex;
4
- flex-direction: var(--wgPositionVertical);
5
- position: var(--positionState);
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
- fsContainerApp{
15
- width: 776px;
16
- height: 415px;
17
- display: flex;
18
- flex-direction: var(--wgPositionVertical);
19
- position: fixed;
20
- top: 0; right: 0; bottom: 0; left: 0;
21
- pointer-events: none;
22
- align-items: var(--wgPositionHorizintal);
23
- padding: 0;
24
- z-index: 100000;
25
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
- }
27
- .fsWidget {
28
- pointer-events: auto;
29
- background-color: var(--widgetColor);
30
- width: 34px;
31
- height: 112px;
32
- border-top-left-radius:var(--widgetLeftSideBorder) ;
33
- border-bottom-left-radius: var(--widgetLeftSideBorder);
34
- border-top-right-radius: var(--widgetRightSideBorder) ;
35
- border-bottom-right-radius: var(--widgetRightSideBorder);
36
- box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
37
- display: flex;
38
- flex-direction: column;
39
- align-items: center;
40
- justify-content: space-evenly;
41
- cursor: pointer;
42
- margin-top: 5px;
43
- }
44
- #fsMainIcon {
45
- width: 60%;
46
- margin-left: 4%;
47
- cursor: pointer;
48
- }
49
- #fsFeedbackTxt {
50
- color: var(--widgetTextColor);
51
- font-size: 15px;
52
- writing-mode: vertical-lr;
53
- transform: rotate(180deg);
54
- cursor: pointer;
55
- font-size-adjust: 0.40;
56
- }
57
- .fsWidget:hover {
58
- width: 35px;
59
- -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
60
- box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
61
- }
62
- .fsCont {
63
- pointer-events: auto;
64
- width: 320px;
65
- height: fit-content;
66
- background-color: rgb(255, 255, 255);
67
- margin-right: var(--widgetMarginRight);
68
- margin-left: var(--widgetMarginLeft);
69
- -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
70
- box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
71
- }
72
- .fsThanksMessageCont{
73
- pointer-events: auto;
74
- width: 320px;
75
- height: auto;
76
- background-color: rgb(255, 255, 255);
77
- margin-right: var(--widgetMarginRight);
78
- margin-left: var(--widgetMarginLeft);
79
- -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
80
- box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
81
- }
82
- #fsCloseIcon{
83
- font-size: 15px;
84
- color: #ffff;
85
- font-weight: 600;
86
- cursor: pointer;
87
- margin-top: 2px;
88
-
89
- }
90
- .fsCloseCont{
91
- pointer-events: auto;
92
- background-color: #4d5167;
93
- width: 27px;
94
- height: 27px;
95
- border-radius: 50%;
96
- display: flex;
97
- justify-content: center;
98
- /* align-items: center; */
99
- margin-top: -15px;
100
- margin-left: 85%;
101
- cursor: pointer;
102
- }
103
-
104
-
105
-
106
-
107
-
108
- /* @media (min-width: 640px) {
109
- body {
110
- max-width: none;
111
- }
1
+ fsContainer{
2
+ width: 100%;
3
+ display: flex;
4
+ flex-direction: var(--wgPositionVertical);
5
+ position: var(--positionState);
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
+ fsContainerApp{
15
+ width: 776px;
16
+ height: 415px;
17
+ display: flex;
18
+ flex-direction: var(--wgPositionVertical);
19
+ position: fixed;
20
+ top: 0; right: 0; bottom: 0; left: 0;
21
+ pointer-events: none;
22
+ align-items: var(--wgPositionHorizintal);
23
+ padding: 0;
24
+ z-index: 100000;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
27
+ .fsWidget {
28
+ pointer-events: auto;
29
+ background-color: var(--widgetColor);
30
+ width: 34px;
31
+ height: 112px;
32
+ border-top-left-radius:var(--widgetLeftSideBorder) ;
33
+ border-bottom-left-radius: var(--widgetLeftSideBorder);
34
+ border-top-right-radius: var(--widgetRightSideBorder) ;
35
+ border-bottom-right-radius: var(--widgetRightSideBorder);
36
+ box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
37
+ display: flex;
38
+ flex-direction: column;
39
+ align-items: center;
40
+ justify-content: space-evenly;
41
+ cursor: pointer;
42
+ margin-top: 5px;
43
+ }
44
+ #fsMainIcon {
45
+ width: 60%;
46
+ margin-left: 4%;
47
+ cursor: pointer;
48
+ }
49
+ #fsFeedbackTxt {
50
+ color: var(--widgetTextColor);
51
+ font-size: 15px;
52
+ writing-mode: vertical-lr;
53
+ transform: rotate(180deg);
54
+ cursor: pointer;
55
+ font-size-adjust: 0.40;
56
+ }
57
+ .fsWidget:hover {
58
+ width: 35px;
59
+ -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
60
+ box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
61
+ }
62
+ .fsCont {
63
+ pointer-events: auto;
64
+ width: 320px;
65
+ height: fit-content;
66
+ background-color: rgb(255, 255, 255);
67
+ margin-right: var(--widgetMarginRight);
68
+ margin-left: var(--widgetMarginLeft);
69
+ -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
70
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
71
+ }
72
+ .fsThanksMessageCont{
73
+ pointer-events: auto;
74
+ width: 320px;
75
+ height: auto;
76
+ background-color: rgb(255, 255, 255);
77
+ margin-right: var(--widgetMarginRight);
78
+ margin-left: var(--widgetMarginLeft);
79
+ -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
80
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
81
+ }
82
+ #fsCloseIcon{
83
+ font-size: 15px;
84
+ color: #ffff;
85
+ font-weight: 600;
86
+ cursor: pointer;
87
+ margin-top: 2px;
88
+
89
+ }
90
+ .fsCloseCont{
91
+ pointer-events: auto;
92
+ background-color: #4d5167;
93
+ width: 27px;
94
+ height: 27px;
95
+ border-radius: 50%;
96
+ display: flex;
97
+ justify-content: center;
98
+ /* align-items: center; */
99
+ margin-top: -15px;
100
+ margin-left: 85%;
101
+ cursor: pointer;
102
+ }
103
+
104
+
105
+
106
+
107
+
108
+ /* @media (min-width: 640px) {
109
+ body {
110
+ max-width: none;
111
+ }
112
112
  } */