@fullsession.io/fs-feedback-widget 1.7.0 → 1.7.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fullsession.io/fs-feedback-widget",
3
- "version": "1.7.0",
3
+ "version": "1.7.2",
4
4
  "scripts": {
5
5
  "build": "rollup -c",
6
6
  "dev": "rollup -c -w",
@@ -1,135 +1,96 @@
1
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);
2
+ import { icons_1, icons_2, icons_3, icons_4 } from "./reactionSvgs/icons.js";
3
+ export let name;
4
+ export let focusable = false;
5
+ export let emotIconType;
6
+ export let width = "40px";
7
+ export let height = "40px";
8
+ let emotIcons =
9
+ emotIconType == "0"
10
+ ? icons_1
11
+ : emotIconType == "1"
12
+ ? icons_2
13
+ : emotIconType == "2"
14
+ ? icons_3
15
+ : emotIconType == "3"
16
+ ? icons_4
17
+ : null;
18
+ let icons = [
19
+ {
20
+ box: 50,
21
+ name: "love",
22
+ svg: emotIcons[0],
23
+ },
24
+ {
25
+ box: 50,
26
+ name: "unSelectedLove",
27
+ svg: emotIcons[1],
28
+ },
29
+ {
30
+ box: 50,
31
+ name: "like",
32
+ svg: emotIcons[2],
33
+ },
34
+ {
35
+ box: 50,
36
+ name: "unSelectedLike",
37
+ svg: emotIcons[3],
38
+ },
39
+ {
40
+ box: 50,
41
+ name: "neutral",
42
+ svg: emotIcons[4],
43
+ },
44
+ {
45
+ box: 50,
46
+ name: "unSelectedNeutral",
47
+ svg: emotIcons[5],
48
+ },
49
+ {
50
+ box: 50,
51
+ name: "dislike",
52
+ svg: emotIcons[6],
53
+ },
54
+ {
55
+ box: 50,
56
+ name: "unSelectedDislike",
57
+ svg: emotIcons[7],
58
+ },
59
+
60
+ {
61
+ box: 50,
62
+ name: "hate",
63
+ svg: emotIcons[8],
64
+ },
65
+ {
66
+ box: 50,
67
+ name: "unSelectedHate",
68
+ svg: emotIcons[9],
69
+ },
70
+ ];
71
+ let displayIcon = icons.find((e) => e.name === name);
129
72
  </script>
73
+
74
+ {#if emotIconType === "2"}
130
75
  <svg
131
76
  class={$$props.class}
132
77
  {focusable}
133
78
  {width}
134
79
  {height}
135
- viewBox="0 0 {displayIcon.box} {displayIcon.box-1}">{@html displayIcon.svg}</svg>
80
+ viewBox="0 0 {displayIcon.box} {displayIcon.box - 1}"
81
+ >
82
+ <g transform={"translate(-3, -3)"}>
83
+ {@html displayIcon.svg}
84
+ </g>
85
+ </svg>
86
+ {:else}
87
+ <svg
88
+ class={$$props.class}
89
+ {focusable}
90
+ {width}
91
+ {height}
92
+ viewBox="0 0 {displayIcon.box} {displayIcon.box - 1}"
93
+ >
94
+ {@html displayIcon.svg}
95
+ </svg>
96
+ {/if}