@uibit/sentiment-selector 0.1.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.
- package/LICENSE +21 -0
- package/README.md +22 -0
- package/custom-elements.json +326 -0
- package/dist/frameworks/angular/index.ts +78 -0
- package/dist/frameworks/astro/index.d.ts +10 -0
- package/dist/frameworks/nuxt/index.ts +7 -0
- package/dist/frameworks/preact/index.d.ts +15 -0
- package/dist/frameworks/qwik/index.tsx +10 -0
- package/dist/frameworks/react/index.d.ts +21 -0
- package/dist/frameworks/solid/index.d.ts +17 -0
- package/dist/frameworks/stencil/index.d.ts +14 -0
- package/dist/frameworks/svelte/index.svelte +41 -0
- package/dist/frameworks/vue/index.ts +29 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -0
- package/dist/sentiment-selector.d.ts +54 -0
- package/dist/sentiment-selector.d.ts.map +1 -0
- package/dist/sentiment-selector.js +165 -0
- package/dist/sentiment-selector.js.map +1 -0
- package/dist/styles.d.ts +2 -0
- package/dist/styles.d.ts.map +1 -0
- package/dist/styles.js +95 -0
- package/dist/styles.js.map +1 -0
- package/dist/types.d.ts +7 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/package.json +94 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 UIBit Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# Sentiment Bar
|
|
2
|
+
|
|
3
|
+
[Interactive Demonstration](https://rawlings.github.io/uibit/sentiment-bar)
|
|
4
|
+
|
|
5
|
+
Sentiment Bar is an interactive feedback collector component that makes user ratings engaging. By utilizing smooth spring scale animations, visual focus shifts, and double-tap confirmations, it lowers user friction and increases response rates.
|
|
6
|
+
|
|
7
|
+
## Value Delivery
|
|
8
|
+
|
|
9
|
+
- **Frictionless Feedback Collection** – Expressive interaction paths encourage higher response rates than traditional flat rating selectors.
|
|
10
|
+
- **Immediate Event Capture** – Dispatches rating selections immediately for real-time reporting without requiring separate submit buttons.
|
|
11
|
+
- **Explicit User Confirmation** – Utilizes a secondary confirmation interaction to prevent accidental submissions.
|
|
12
|
+
- **Design Adaptability** – Supports customizable options allowing developers to substitute default sets with custom icon mappings.
|
|
13
|
+
|
|
14
|
+
## Ideal Applications
|
|
15
|
+
|
|
16
|
+
- **Post-Purchase Surveys** – Gathering immediate feedback on checkout or service experiences.
|
|
17
|
+
- **Content Ratings** – Measuring reader satisfaction at the end of articles, documentation pages, or tutorials.
|
|
18
|
+
- **Support Resolution Scores** – Collecting satisfaction metrics on customer ticket closures.
|
|
19
|
+
|
|
20
|
+
## Further Information
|
|
21
|
+
|
|
22
|
+
Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
|
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/index.ts",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "js",
|
|
12
|
+
"name": "default",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "default",
|
|
15
|
+
"module": "./sentiment-selector"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"kind": "js",
|
|
20
|
+
"name": "SentimentSelector",
|
|
21
|
+
"declaration": {
|
|
22
|
+
"name": "SentimentSelector",
|
|
23
|
+
"module": "./sentiment-selector"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"kind": "js",
|
|
28
|
+
"name": "SentimentOption",
|
|
29
|
+
"declaration": {
|
|
30
|
+
"name": "SentimentOption",
|
|
31
|
+
"module": "./sentiment-selector"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"kind": "js",
|
|
36
|
+
"name": "*",
|
|
37
|
+
"declaration": {
|
|
38
|
+
"name": "*",
|
|
39
|
+
"module": "src/types"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"kind": "javascript-module",
|
|
46
|
+
"path": "src/sentiment-selector.ts",
|
|
47
|
+
"declarations": [
|
|
48
|
+
{
|
|
49
|
+
"kind": "class",
|
|
50
|
+
"description": "Micro-feedback widget displaying a horizontal row of expressive face icons.\nTapping or clicking an option scales it up with a spring animation and fires\na scored event. Unselected options are dimmed to focus attention on the\ncurrent selection.\n\nCustomize the option set by setting the `options` property programmatically\nor by passing a JSON array string on the `options` attribute. Each option\nreferences an icon name from the UIBit icon registry.",
|
|
51
|
+
"name": "SentimentSelector",
|
|
52
|
+
"cssProperties": [
|
|
53
|
+
{
|
|
54
|
+
"description": "Track background color",
|
|
55
|
+
"name": "--uibit-sentiment-selector-bg",
|
|
56
|
+
"default": "#f3f4f6"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"description": "Track border",
|
|
60
|
+
"name": "--uibit-sentiment-selector-border",
|
|
61
|
+
"default": "0.0625rem solid #e5e7eb"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"description": "Track border radius",
|
|
65
|
+
"name": "--uibit-sentiment-selector-radius",
|
|
66
|
+
"default": "9999px"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"description": "Track padding",
|
|
70
|
+
"name": "--uibit-sentiment-selector-padding",
|
|
71
|
+
"default": "0.375rem"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"description": "Gap between items",
|
|
75
|
+
"name": "--uibit-sentiment-selector-item-gap",
|
|
76
|
+
"default": "0.25rem"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"description": "Width and height of each item button",
|
|
80
|
+
"name": "--uibit-sentiment-selector-item-size",
|
|
81
|
+
"default": "2.5rem"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"description": "Icon size (width and height)",
|
|
85
|
+
"name": "--uibit-sentiment-selector-icon-size",
|
|
86
|
+
"default": "1.25rem"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"description": "Item hover background",
|
|
90
|
+
"name": "--uibit-sentiment-selector-item-hover-bg",
|
|
91
|
+
"default": "rgba(0,0,0,0.06)"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"description": "Selected item background",
|
|
95
|
+
"name": "--uibit-sentiment-selector-item-selected-bg",
|
|
96
|
+
"default": "#ffffff"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"description": "Selected item shadow",
|
|
100
|
+
"name": "--uibit-sentiment-selector-item-selected-shadow",
|
|
101
|
+
"default": "0 0.125rem 0.5rem rgba(0,0,0,0.12)"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"description": "Opacity for unselected items",
|
|
105
|
+
"name": "--uibit-sentiment-selector-unselected-opacity",
|
|
106
|
+
"default": "0.35"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"description": "Label font size",
|
|
110
|
+
"name": "--uibit-sentiment-selector-label-font-size",
|
|
111
|
+
"default": "0.75rem"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"description": "Label font weight",
|
|
115
|
+
"name": "--uibit-sentiment-selector-label-font-weight",
|
|
116
|
+
"default": "500"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"description": "Label color",
|
|
120
|
+
"name": "--uibit-sentiment-selector-label-color",
|
|
121
|
+
"default": "#6b7280"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"description": "Gap between track and label",
|
|
125
|
+
"name": "--uibit-sentiment-selector-gap",
|
|
126
|
+
"default": "0.625rem"
|
|
127
|
+
}
|
|
128
|
+
],
|
|
129
|
+
"members": [
|
|
130
|
+
{
|
|
131
|
+
"kind": "field",
|
|
132
|
+
"name": "options",
|
|
133
|
+
"type": {
|
|
134
|
+
"text": "SentimentOption[]"
|
|
135
|
+
},
|
|
136
|
+
"privacy": "private",
|
|
137
|
+
"default": "[ { value: 1, icon: 'angry', label: 'Terrible' }, { value: 2, icon: 'frown', label: 'Bad' }, { value: 3, icon: 'meh', label: 'Okay' }, { value: 4, icon: 'smile', label: 'Good' }, { value: 5, icon: 'laugh', label: 'Excellent' }, ]"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"kind": "field",
|
|
141
|
+
"name": "value",
|
|
142
|
+
"type": {
|
|
143
|
+
"text": "string"
|
|
144
|
+
},
|
|
145
|
+
"attribute": "value",
|
|
146
|
+
"reflects": true
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"kind": "field",
|
|
150
|
+
"name": "showLabel",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "boolean"
|
|
153
|
+
},
|
|
154
|
+
"default": "true",
|
|
155
|
+
"description": "Show the label text for the selected option below the track.",
|
|
156
|
+
"attribute": "show-label"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"kind": "field",
|
|
160
|
+
"name": "_hoverValue",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "number | undefined"
|
|
163
|
+
},
|
|
164
|
+
"privacy": "private"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "valueAsNumber",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "number | undefined"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"kind": "method",
|
|
175
|
+
"name": "_select",
|
|
176
|
+
"privacy": "private",
|
|
177
|
+
"parameters": [
|
|
178
|
+
{
|
|
179
|
+
"name": "option",
|
|
180
|
+
"type": {
|
|
181
|
+
"text": "SentimentOption"
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"kind": "method",
|
|
188
|
+
"name": "_activeLabel",
|
|
189
|
+
"privacy": "private",
|
|
190
|
+
"return": {
|
|
191
|
+
"type": {
|
|
192
|
+
"text": "string"
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"kind": "method",
|
|
198
|
+
"name": "_onSlotChange",
|
|
199
|
+
"privacy": "private",
|
|
200
|
+
"parameters": [
|
|
201
|
+
{
|
|
202
|
+
"name": "e",
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "Event"
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "method",
|
|
211
|
+
"name": "_onKeyDown",
|
|
212
|
+
"privacy": "private",
|
|
213
|
+
"parameters": [
|
|
214
|
+
{
|
|
215
|
+
"name": "e",
|
|
216
|
+
"type": {
|
|
217
|
+
"text": "KeyboardEvent"
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
]
|
|
221
|
+
}
|
|
222
|
+
],
|
|
223
|
+
"events": [
|
|
224
|
+
{
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "{ value: number, label: string }"
|
|
227
|
+
},
|
|
228
|
+
"description": "Fired when the user selects an option",
|
|
229
|
+
"name": "sentiment-change"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"type": {
|
|
233
|
+
"text": "{ value: number, label: string }"
|
|
234
|
+
},
|
|
235
|
+
"description": "Fired when the user confirms (second tap)",
|
|
236
|
+
"name": "sentiment-submit"
|
|
237
|
+
}
|
|
238
|
+
],
|
|
239
|
+
"attributes": [
|
|
240
|
+
{
|
|
241
|
+
"name": "value",
|
|
242
|
+
"type": {
|
|
243
|
+
"text": "string"
|
|
244
|
+
},
|
|
245
|
+
"fieldName": "value"
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"name": "show-label",
|
|
249
|
+
"type": {
|
|
250
|
+
"text": "boolean"
|
|
251
|
+
},
|
|
252
|
+
"default": "true",
|
|
253
|
+
"description": "Show the label text for the selected option below the track.",
|
|
254
|
+
"fieldName": "showLabel"
|
|
255
|
+
}
|
|
256
|
+
],
|
|
257
|
+
"mixins": [
|
|
258
|
+
{
|
|
259
|
+
"name": "FormAssociatedMixin",
|
|
260
|
+
"package": "@uibit/form-internals"
|
|
261
|
+
}
|
|
262
|
+
],
|
|
263
|
+
"superclass": {
|
|
264
|
+
"name": "UIBitElement",
|
|
265
|
+
"package": "@uibit/core"
|
|
266
|
+
},
|
|
267
|
+
"tagName": "uibit-sentiment-selector",
|
|
268
|
+
"customElement": true
|
|
269
|
+
}
|
|
270
|
+
],
|
|
271
|
+
"exports": [
|
|
272
|
+
{
|
|
273
|
+
"kind": "js",
|
|
274
|
+
"name": "SentimentSelector",
|
|
275
|
+
"declaration": {
|
|
276
|
+
"name": "SentimentSelector",
|
|
277
|
+
"module": "src/sentiment-selector.ts"
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"kind": "custom-element-definition",
|
|
282
|
+
"name": "uibit-sentiment-selector",
|
|
283
|
+
"declaration": {
|
|
284
|
+
"name": "SentimentSelector",
|
|
285
|
+
"module": "src/sentiment-selector.ts"
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"kind": "js",
|
|
290
|
+
"name": "default",
|
|
291
|
+
"declaration": {
|
|
292
|
+
"name": "SentimentSelector",
|
|
293
|
+
"module": "src/sentiment-selector.ts"
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
]
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"kind": "javascript-module",
|
|
300
|
+
"path": "src/styles.ts",
|
|
301
|
+
"declarations": [
|
|
302
|
+
{
|
|
303
|
+
"kind": "variable",
|
|
304
|
+
"name": "styles",
|
|
305
|
+
"default": "css` :host { display: inline-flex; flex-direction: column; align-items: center; gap: var(--uibit-sentiment-selector-gap, calc(0.625rem * var(--uibit-spacing-factor, 1))); font-family: var(--uibit-sentiment-selector-font-family, inherit); -webkit-user-select: none; user-select: none; } .track { display: flex; align-items: center; gap: var(--uibit-sentiment-selector-item-gap, calc(0.25rem * var(--uibit-spacing-factor, 1))); padding: var(--uibit-sentiment-selector-padding, calc(0.375rem * var(--uibit-spacing-factor, 1))); background: var(--uibit-sentiment-selector-bg, var(--uibit-bg-subtle, #f3f4f6)); border-radius: var(--uibit-sentiment-selector-radius, 9999px); border: var(--uibit-sentiment-selector-border, 0.0625rem solid var(--uibit-border-color, #e5e7eb)); } .item { display: flex; align-items: center; justify-content: center; width: var(--uibit-sentiment-selector-item-size, calc(2.5rem * var(--uibit-spacing-factor, 1))); height: var(--uibit-sentiment-selector-item-size, calc(2.5rem * var(--uibit-spacing-factor, 1))); border-radius: 50%; cursor: pointer; border: none; background: transparent; outline: none; color: var(--uibit-text-secondary, #374151); transition: background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; } .item:hover, .item:focus-visible { background: var(--uibit-sentiment-selector-item-hover-bg, var(--uibit-bg-subtle, rgba(0, 0, 0, 0.06))); opacity: 1 !important; } .item:active { opacity: 0.7; } .item:focus-visible { outline: 0.125rem solid var(--uibit-sentiment-selector-focus-color, #000000); outline-offset: 0.125rem; } .item[data-selected] { background: var(--uibit-sentiment-selector-item-selected-bg, var(--uibit-bg-surface, #ffffff)); box-shadow: var(--uibit-sentiment-selector-item-selected-shadow, 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12)); color: var(--uibit-text-primary, #111827); opacity: 1 !important; } .item.dimmed { opacity: var(--uibit-sentiment-selector-unselected-opacity, 0.35); } .icon { display: flex; align-items: center; justify-content: center; width: var(--uibit-sentiment-selector-icon-size, calc(1.25rem * var(--uibit-spacing-factor, 1))); height: var(--uibit-sentiment-selector-icon-size, calc(1.25rem * var(--uibit-spacing-factor, 1))); pointer-events: none; } .icon svg { width: 100%; height: 100%; } .label { font-size: var(--uibit-sentiment-selector-label-font-size, var(--uibit-font-size-xs, calc(0.75rem * var(--uibit-font-scale-factor, 1)))); font-weight: var(--uibit-sentiment-selector-label-font-weight, var(--uibit-font-weight-medium, 500)); color: var(--uibit-sentiment-selector-label-color, var(--uibit-text-muted, #6b7280)); min-height: 1em; min-width: 5rem; text-align: center; transition: opacity 0.2s ease, visibility 0.2s ease; opacity: 0; visibility: hidden; } .label.visible { opacity: 1; visibility: visible; } `"
|
|
306
|
+
}
|
|
307
|
+
],
|
|
308
|
+
"exports": [
|
|
309
|
+
{
|
|
310
|
+
"kind": "js",
|
|
311
|
+
"name": "styles",
|
|
312
|
+
"declaration": {
|
|
313
|
+
"name": "styles",
|
|
314
|
+
"module": "src/styles.ts"
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
]
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"kind": "javascript-module",
|
|
321
|
+
"path": "src/types.ts",
|
|
322
|
+
"declarations": [],
|
|
323
|
+
"exports": []
|
|
324
|
+
}
|
|
325
|
+
]
|
|
326
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute, forwardRef } from '@angular/core';
|
|
2
|
+
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
|
|
3
|
+
import '@uibit/sentiment-selector';
|
|
4
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
5
|
+
|
|
6
|
+
@Component({
|
|
7
|
+
selector: 'uibit-sentiment-selector',
|
|
8
|
+
template: '<ng-content></ng-content>',
|
|
9
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
10
|
+
standalone: true,
|
|
11
|
+
providers: [
|
|
12
|
+
{
|
|
13
|
+
provide: NG_VALUE_ACCESSOR,
|
|
14
|
+
useExisting: forwardRef(() => NgxSentimentSelector),
|
|
15
|
+
multi: true
|
|
16
|
+
}
|
|
17
|
+
],
|
|
18
|
+
host: {
|
|
19
|
+
'(sentiment-change)': 'sentimentChange.emit($event); handleInput()',
|
|
20
|
+
'(sentiment-submit)': 'sentimentSubmit.emit($event); handleInput()',
|
|
21
|
+
'(blur)': 'handleBlur()',
|
|
22
|
+
'(change)': 'handleInput()',
|
|
23
|
+
'(input)': 'handleInput()'
|
|
24
|
+
}
|
|
25
|
+
})
|
|
26
|
+
export class NgxSentimentSelector implements ControlValueAccessor {
|
|
27
|
+
constructor(private el: ElementRef<HTMLElementClass>) {
|
|
28
|
+
effect(() => {
|
|
29
|
+
if (this.el.nativeElement) {
|
|
30
|
+
this.el.nativeElement.value = this.value();
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
effect(() => {
|
|
34
|
+
if (this.el.nativeElement) {
|
|
35
|
+
this.el.nativeElement.showLabel = this.showLabel();
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
effect(() => {
|
|
39
|
+
if (this.el.nativeElement) {
|
|
40
|
+
this.el.nativeElement.valueAsNumber = this.valueAsNumber();
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
readonly value = input<string, any>('');
|
|
46
|
+
readonly showLabel = input<boolean, any>(true, { transform: booleanAttribute });
|
|
47
|
+
readonly valueAsNumber = input<number | undefined, any>(0, { transform: numberAttribute });
|
|
48
|
+
|
|
49
|
+
readonly sentimentChange = output<CustomEvent<{ value: number, label: string }>>();
|
|
50
|
+
readonly sentimentSubmit = output<CustomEvent<{ value: number, label: string }>>();
|
|
51
|
+
|
|
52
|
+
private _onChange: (value: any) => void = () => {};
|
|
53
|
+
private _onTouched: () => void = () => {};
|
|
54
|
+
|
|
55
|
+
writeValue(value: any): void {
|
|
56
|
+
this.el.nativeElement.value = value;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
registerOnChange(fn: any): void {
|
|
60
|
+
this._onChange = fn;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
registerOnTouched(fn: any): void {
|
|
64
|
+
this._onTouched = fn;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
setDisabledState(isDisabled: boolean): void {
|
|
68
|
+
this.el.nativeElement.disabled = isDisabled;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
handleInput() {
|
|
72
|
+
this._onChange(this.el.nativeElement.value);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
handleBlur() {
|
|
76
|
+
this._onTouched();
|
|
77
|
+
}
|
|
78
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
2
|
+
import '@uibit/sentiment-selector';
|
|
3
|
+
|
|
4
|
+
declare global {
|
|
5
|
+
namespace astroHTML.JSX {
|
|
6
|
+
interface IntrinsicElements {
|
|
7
|
+
'uibit-sentiment-selector': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { JSX } from 'preact';
|
|
2
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
3
|
+
import '@uibit/sentiment-selector';
|
|
4
|
+
|
|
5
|
+
declare module 'preact' {
|
|
6
|
+
namespace JSX {
|
|
7
|
+
interface IntrinsicElements {
|
|
8
|
+
'uibit-sentiment-selector': JSX.HTMLAttributes<HTMLElementClass> & {
|
|
9
|
+
value?: string;
|
|
10
|
+
showLabel?: boolean;
|
|
11
|
+
valueAsNumber?: number | undefined;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { HTMLAttributes, ClassAttributes } from 'react';
|
|
2
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
3
|
+
import '@uibit/sentiment-selector';
|
|
4
|
+
|
|
5
|
+
declare global {
|
|
6
|
+
namespace React {
|
|
7
|
+
namespace JSX {
|
|
8
|
+
interface IntrinsicElements {
|
|
9
|
+
'uibit-sentiment-selector': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
class?: string;
|
|
12
|
+
value?: string;
|
|
13
|
+
showLabel?: boolean;
|
|
14
|
+
valueAsNumber?: number | undefined;
|
|
15
|
+
onSentimentChange?: (event: any) => void;
|
|
16
|
+
onSentimentSubmit?: (event: any) => void;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { JSX } from 'solid-js';
|
|
2
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
3
|
+
import '@uibit/sentiment-selector';
|
|
4
|
+
|
|
5
|
+
declare module 'solid-js' {
|
|
6
|
+
namespace JSX {
|
|
7
|
+
interface IntrinsicElements {
|
|
8
|
+
'uibit-sentiment-selector': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
|
|
9
|
+
value?: string;
|
|
10
|
+
showLabel?: boolean;
|
|
11
|
+
valueAsNumber?: number | undefined;
|
|
12
|
+
"on:sentiment-change"?: (event: CustomEvent) => void;
|
|
13
|
+
"on:sentiment-submit"?: (event: CustomEvent) => void;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
2
|
+
import '@uibit/sentiment-selector';
|
|
3
|
+
|
|
4
|
+
declare module '@stencil/core' {
|
|
5
|
+
export namespace JSX {
|
|
6
|
+
interface IntrinsicElements {
|
|
7
|
+
'uibit-sentiment-selector': HTMLElementClass & {
|
|
8
|
+
value?: string;
|
|
9
|
+
showLabel?: boolean;
|
|
10
|
+
valueAsNumber?: number | undefined;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import '@uibit/sentiment-selector';
|
|
3
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
value = undefined,
|
|
7
|
+
showLabel = undefined,
|
|
8
|
+
valueAsNumber = undefined,
|
|
9
|
+
children
|
|
10
|
+
} = $props<{
|
|
11
|
+
children?: any;
|
|
12
|
+
value?: string;
|
|
13
|
+
showLabel?: boolean;
|
|
14
|
+
valueAsNumber?: number | undefined;
|
|
15
|
+
|
|
16
|
+
}>();
|
|
17
|
+
|
|
18
|
+
let elementRef: HTMLElementClass | null = $state(null);
|
|
19
|
+
|
|
20
|
+
$effect(() => {
|
|
21
|
+
if (elementRef && value !== undefined) {
|
|
22
|
+
elementRef.value = value;
|
|
23
|
+
}
|
|
24
|
+
if (elementRef && showLabel !== undefined) {
|
|
25
|
+
elementRef.showLabel = showLabel;
|
|
26
|
+
}
|
|
27
|
+
if (elementRef && valueAsNumber !== undefined) {
|
|
28
|
+
elementRef.valueAsNumber = valueAsNumber;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<uibit-sentiment-selector bind:this={elementRef} {...$$restProps}>
|
|
35
|
+
|
|
36
|
+
{#if children}
|
|
37
|
+
{@render children()}
|
|
38
|
+
{:else}
|
|
39
|
+
<slot />
|
|
40
|
+
{/if}
|
|
41
|
+
</uibit-sentiment-selector>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { defineComponent, h } from 'vue';
|
|
2
|
+
import type { SentimentSelector as HTMLElementClass } from '@uibit/sentiment-selector';
|
|
3
|
+
import '@uibit/sentiment-selector';
|
|
4
|
+
|
|
5
|
+
export const SentimentSelector = defineComponent({
|
|
6
|
+
name: 'SentimentSelector',
|
|
7
|
+
props: {
|
|
8
|
+
value: { type: [String, Number, Boolean, Array, Object] as any },
|
|
9
|
+
showLabel: { type: [String, Number, Boolean, Array, Object] as any },
|
|
10
|
+
valueAsNumber: { type: [String, Number, Boolean, Array, Object] as any }
|
|
11
|
+
},
|
|
12
|
+
emits: ['sentiment-change', 'sentiment-submit'],
|
|
13
|
+
setup(props, { slots, emit }) {
|
|
14
|
+
return () => {
|
|
15
|
+
const eventListeners: Record<string, any> = {};
|
|
16
|
+
eventListeners['onSentiment-change'] = (event: Event) => {
|
|
17
|
+
emit('sentiment-change', event);
|
|
18
|
+
};
|
|
19
|
+
eventListeners['onSentiment-submit'] = (event: Event) => {
|
|
20
|
+
emit('sentiment-submit', event);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
return h('uibit-sentiment-selector', {
|
|
24
|
+
...props,
|
|
25
|
+
...eventListeners
|
|
26
|
+
}, slots.default?.());
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
});
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAClE,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,cAAc,SAAS,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAElE,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { UIBitElement } from '@uibit/core';
|
|
2
|
+
export interface SentimentOption {
|
|
3
|
+
value: number;
|
|
4
|
+
icon: string;
|
|
5
|
+
label: string;
|
|
6
|
+
}
|
|
7
|
+
declare const SentimentSelector_base: import("@uibit/form-internals").Constructor<import("@uibit/form-internals").FormAssociatedInterface> & typeof UIBitElement;
|
|
8
|
+
/**
|
|
9
|
+
* Micro-feedback widget displaying a horizontal row of expressive face icons.
|
|
10
|
+
* Tapping or clicking an option scales it up with a spring animation and fires
|
|
11
|
+
* a scored event. Unselected options are dimmed to focus attention on the
|
|
12
|
+
* current selection.
|
|
13
|
+
*
|
|
14
|
+
* Customize the option set by setting the `options` property programmatically
|
|
15
|
+
* or by passing a JSON array string on the `options` attribute. Each option
|
|
16
|
+
* references an icon name from the UIBit icon registry.
|
|
17
|
+
*
|
|
18
|
+
* @fires {{ value: number, label: string }} sentiment-change - Fired when the user selects an option
|
|
19
|
+
* @fires {{ value: number, label: string }} sentiment-submit - Fired when the user confirms (second tap)
|
|
20
|
+
*
|
|
21
|
+
* @cssprop [--uibit-sentiment-selector-bg=#f3f4f6] - Track background color
|
|
22
|
+
* @cssprop [--uibit-sentiment-selector-border=0.0625rem solid #e5e7eb] - Track border
|
|
23
|
+
* @cssprop [--uibit-sentiment-selector-radius=9999px] - Track border radius
|
|
24
|
+
* @cssprop [--uibit-sentiment-selector-padding=0.375rem] - Track padding
|
|
25
|
+
* @cssprop [--uibit-sentiment-selector-item-gap=0.25rem] - Gap between items
|
|
26
|
+
* @cssprop [--uibit-sentiment-selector-item-size=2.5rem] - Width and height of each item button
|
|
27
|
+
* @cssprop [--uibit-sentiment-selector-icon-size=1.25rem] - Icon size (width and height)
|
|
28
|
+
* @cssprop [--uibit-sentiment-selector-item-hover-bg=rgba(0,0,0,0.06)] - Item hover background
|
|
29
|
+
* @cssprop [--uibit-sentiment-selector-item-selected-bg=#ffffff] - Selected item background
|
|
30
|
+
* @cssprop [--uibit-sentiment-selector-item-selected-shadow=0 0.125rem 0.5rem rgba(0,0,0,0.12)] - Selected item shadow
|
|
31
|
+
* @cssprop [--uibit-sentiment-selector-unselected-opacity=0.35] - Opacity for unselected items
|
|
32
|
+
* @cssprop [--uibit-sentiment-selector-label-font-size=0.75rem] - Label font size
|
|
33
|
+
* @cssprop [--uibit-sentiment-selector-label-font-weight=500] - Label font weight
|
|
34
|
+
* @cssprop [--uibit-sentiment-selector-label-color=#6b7280] - Label color
|
|
35
|
+
* @cssprop [--uibit-sentiment-selector-gap=0.625rem] - Gap between track and label
|
|
36
|
+
*/
|
|
37
|
+
export declare class SentimentSelector extends SentimentSelector_base {
|
|
38
|
+
static styles: import("lit").CSSResult;
|
|
39
|
+
private options;
|
|
40
|
+
value: string;
|
|
41
|
+
/** Show the label text for the selected option below the track. */
|
|
42
|
+
showLabel: boolean;
|
|
43
|
+
private _hoverValue?;
|
|
44
|
+
get valueAsNumber(): number | undefined;
|
|
45
|
+
set valueAsNumber(newValue: number | undefined);
|
|
46
|
+
private _select;
|
|
47
|
+
private _activeLabel;
|
|
48
|
+
private _onSlotChange;
|
|
49
|
+
firstUpdated(): void;
|
|
50
|
+
private _onKeyDown;
|
|
51
|
+
render(): import("lit").TemplateResult<1>;
|
|
52
|
+
}
|
|
53
|
+
export default SentimentSelector;
|
|
54
|
+
//# sourceMappingURL=sentiment-selector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sentiment-selector.d.ts","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAuB,MAAM,aAAa,CAAC;AAczG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,iBAAkB,SAAQ,sBAAiC;IACtE,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,OAAO,CAAsC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEjE,mEAAmE;IACb,SAAS,UAAQ;IAE9D,OAAO,CAAC,WAAW,CAAC,CAAS;IAEtC,IAAI,aAAa,IAAI,MAAM,GAAG,SAAS,CAEtC;IAED,IAAI,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAE7C;IAED,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAYrB,YAAY,SAEX;IAED,OAAO,CAAC,UAAU;IAmBlB,MAAM,oCA0BL;CACF;eAEc,iBAAiB"}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from 'lit';
|
|
8
|
+
import { customElement, fromLucide, getIcon, msg, UIBitElement } from '@uibit/core';
|
|
9
|
+
import { Angry, Frown, Laugh, Meh, Smile } from 'lucide';
|
|
10
|
+
import { FormAssociatedMixin } from '@uibit/form-internals';
|
|
11
|
+
const ICON_FALLBACKS = {
|
|
12
|
+
angry: fromLucide(Angry),
|
|
13
|
+
frown: fromLucide(Frown),
|
|
14
|
+
meh: fromLucide(Meh),
|
|
15
|
+
smile: fromLucide(Smile),
|
|
16
|
+
laugh: fromLucide(Laugh),
|
|
17
|
+
};
|
|
18
|
+
import { property, state } from 'lit/decorators.js';
|
|
19
|
+
import { styles } from './styles';
|
|
20
|
+
const DEFAULT_OPTIONS = [
|
|
21
|
+
{ value: 1, icon: 'angry', label: 'Terrible' },
|
|
22
|
+
{ value: 2, icon: 'frown', label: 'Bad' },
|
|
23
|
+
{ value: 3, icon: 'meh', label: 'Okay' },
|
|
24
|
+
{ value: 4, icon: 'smile', label: 'Good' },
|
|
25
|
+
{ value: 5, icon: 'laugh', label: 'Excellent' },
|
|
26
|
+
];
|
|
27
|
+
/**
|
|
28
|
+
* Micro-feedback widget displaying a horizontal row of expressive face icons.
|
|
29
|
+
* Tapping or clicking an option scales it up with a spring animation and fires
|
|
30
|
+
* a scored event. Unselected options are dimmed to focus attention on the
|
|
31
|
+
* current selection.
|
|
32
|
+
*
|
|
33
|
+
* Customize the option set by setting the `options` property programmatically
|
|
34
|
+
* or by passing a JSON array string on the `options` attribute. Each option
|
|
35
|
+
* references an icon name from the UIBit icon registry.
|
|
36
|
+
*
|
|
37
|
+
* @fires {{ value: number, label: string }} sentiment-change - Fired when the user selects an option
|
|
38
|
+
* @fires {{ value: number, label: string }} sentiment-submit - Fired when the user confirms (second tap)
|
|
39
|
+
*
|
|
40
|
+
* @cssprop [--uibit-sentiment-selector-bg=#f3f4f6] - Track background color
|
|
41
|
+
* @cssprop [--uibit-sentiment-selector-border=0.0625rem solid #e5e7eb] - Track border
|
|
42
|
+
* @cssprop [--uibit-sentiment-selector-radius=9999px] - Track border radius
|
|
43
|
+
* @cssprop [--uibit-sentiment-selector-padding=0.375rem] - Track padding
|
|
44
|
+
* @cssprop [--uibit-sentiment-selector-item-gap=0.25rem] - Gap between items
|
|
45
|
+
* @cssprop [--uibit-sentiment-selector-item-size=2.5rem] - Width and height of each item button
|
|
46
|
+
* @cssprop [--uibit-sentiment-selector-icon-size=1.25rem] - Icon size (width and height)
|
|
47
|
+
* @cssprop [--uibit-sentiment-selector-item-hover-bg=rgba(0,0,0,0.06)] - Item hover background
|
|
48
|
+
* @cssprop [--uibit-sentiment-selector-item-selected-bg=#ffffff] - Selected item background
|
|
49
|
+
* @cssprop [--uibit-sentiment-selector-item-selected-shadow=0 0.125rem 0.5rem rgba(0,0,0,0.12)] - Selected item shadow
|
|
50
|
+
* @cssprop [--uibit-sentiment-selector-unselected-opacity=0.35] - Opacity for unselected items
|
|
51
|
+
* @cssprop [--uibit-sentiment-selector-label-font-size=0.75rem] - Label font size
|
|
52
|
+
* @cssprop [--uibit-sentiment-selector-label-font-weight=500] - Label font weight
|
|
53
|
+
* @cssprop [--uibit-sentiment-selector-label-color=#6b7280] - Label color
|
|
54
|
+
* @cssprop [--uibit-sentiment-selector-gap=0.625rem] - Gap between track and label
|
|
55
|
+
*/
|
|
56
|
+
let SentimentSelector = class SentimentSelector extends FormAssociatedMixin(UIBitElement) {
|
|
57
|
+
constructor() {
|
|
58
|
+
super(...arguments);
|
|
59
|
+
this.options = DEFAULT_OPTIONS;
|
|
60
|
+
/** Show the label text for the selected option below the track. */
|
|
61
|
+
this.showLabel = true;
|
|
62
|
+
}
|
|
63
|
+
static { this.styles = styles; }
|
|
64
|
+
get valueAsNumber() {
|
|
65
|
+
return this.value ? Number(this.value) : undefined;
|
|
66
|
+
}
|
|
67
|
+
set valueAsNumber(newValue) {
|
|
68
|
+
this.value = newValue !== undefined ? String(newValue) : '';
|
|
69
|
+
}
|
|
70
|
+
_select(option) {
|
|
71
|
+
const isReselect = this.valueAsNumber === option.value;
|
|
72
|
+
this.valueAsNumber = option.value;
|
|
73
|
+
this.dispatchCustomEvent('sentiment-change', { value: option.value, label: option.label });
|
|
74
|
+
if (isReselect) {
|
|
75
|
+
this.dispatchCustomEvent('sentiment-submit', { value: option.value, label: option.label });
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
_activeLabel() {
|
|
79
|
+
const hovered = this._hoverValue !== undefined
|
|
80
|
+
? this.options.find(o => o.value === this._hoverValue)
|
|
81
|
+
: undefined;
|
|
82
|
+
const selected = this.valueAsNumber !== undefined
|
|
83
|
+
? this.options.find(o => o.value === this.valueAsNumber)
|
|
84
|
+
: undefined;
|
|
85
|
+
return (hovered ?? selected)?.label ?? '';
|
|
86
|
+
}
|
|
87
|
+
_onSlotChange(e) {
|
|
88
|
+
const slot = e.target;
|
|
89
|
+
const elements = slot.assignedElements({ flatten: true });
|
|
90
|
+
if (elements.length > 0) {
|
|
91
|
+
this.options = elements.map(el => ({
|
|
92
|
+
value: Number(el.getAttribute('value') || el.getAttribute('data-value') || 0),
|
|
93
|
+
icon: el.getAttribute('icon') || el.getAttribute('data-icon') || '',
|
|
94
|
+
label: el.getAttribute('label') || el.getAttribute('data-label') || el.textContent?.trim() || '',
|
|
95
|
+
}));
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
firstUpdated() {
|
|
99
|
+
this.listen(this, 'keydown', this._onKeyDown);
|
|
100
|
+
}
|
|
101
|
+
_onKeyDown(e) {
|
|
102
|
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
103
|
+
e.preventDefault();
|
|
104
|
+
const currentIndex = this.options.findIndex(o => o.value === this.valueAsNumber);
|
|
105
|
+
let nextIndex = currentIndex;
|
|
106
|
+
if (e.key === 'ArrowLeft') {
|
|
107
|
+
nextIndex = currentIndex <= 0 ? this.options.length - 1 : currentIndex - 1;
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
nextIndex = currentIndex === -1 || currentIndex === this.options.length - 1 ? 0 : currentIndex + 1;
|
|
111
|
+
}
|
|
112
|
+
const nextOption = this.options[nextIndex];
|
|
113
|
+
if (nextOption) {
|
|
114
|
+
this._select(nextOption);
|
|
115
|
+
const buttons = this.shadowRoot?.querySelectorAll('.item');
|
|
116
|
+
buttons[nextIndex]?.focus();
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
render() {
|
|
121
|
+
const iconPx = 20;
|
|
122
|
+
const activeLabel = this._activeLabel();
|
|
123
|
+
return html `
|
|
124
|
+
<slot @slotchange=${this._onSlotChange} style="display: none;"></slot>
|
|
125
|
+
<div class="track" part="track" role="radiogroup" aria-label=${msg('Sentiment rating')}>
|
|
126
|
+
${this.options.map(option => html `
|
|
127
|
+
<button
|
|
128
|
+
class="item ${this.valueAsNumber !== undefined && this.valueAsNumber !== option.value ? 'dimmed' : ''}"
|
|
129
|
+
part="item"
|
|
130
|
+
role="radio"
|
|
131
|
+
aria-checked=${this.valueAsNumber === option.value ? 'true' : 'false'}
|
|
132
|
+
aria-label=${option.label}
|
|
133
|
+
?data-selected=${this.valueAsNumber === option.value}
|
|
134
|
+
@click=${() => this._select(option)}
|
|
135
|
+
@mouseenter=${() => { this._hoverValue = option.value; }}
|
|
136
|
+
@mouseleave=${() => { this._hoverValue = undefined; }}
|
|
137
|
+
>
|
|
138
|
+
<span class="icon" part="icon" aria-hidden="true">${getIcon(option.icon, iconPx, ICON_FALLBACKS[option.icon])}</span>
|
|
139
|
+
</button>
|
|
140
|
+
`)}
|
|
141
|
+
</div>
|
|
142
|
+
${this.showLabel
|
|
143
|
+
? html `<div class="label ${activeLabel ? 'visible' : ''}" part="label" aria-live="polite">${activeLabel || '\u00a0'}</div>`
|
|
144
|
+
: ''}
|
|
145
|
+
`;
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
__decorate([
|
|
149
|
+
state()
|
|
150
|
+
], SentimentSelector.prototype, "options", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
property({ type: String, reflect: true })
|
|
153
|
+
], SentimentSelector.prototype, "value", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
property({ type: Boolean, attribute: 'show-label' })
|
|
156
|
+
], SentimentSelector.prototype, "showLabel", void 0);
|
|
157
|
+
__decorate([
|
|
158
|
+
state()
|
|
159
|
+
], SentimentSelector.prototype, "_hoverValue", void 0);
|
|
160
|
+
SentimentSelector = __decorate([
|
|
161
|
+
customElement('uibit-sentiment-selector')
|
|
162
|
+
], SentimentSelector);
|
|
163
|
+
export { SentimentSelector };
|
|
164
|
+
export default SentimentSelector;
|
|
165
|
+
//# sourceMappingURL=sentiment-selector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sentiment-selector.js","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4FlB,CAAC"}
|
package/dist/styles.js
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const styles = css `
|
|
3
|
+
:host {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
align-items: center;
|
|
7
|
+
gap: var(--uibit-sentiment-selector-gap, calc(0.625rem * var(--uibit-spacing-factor, 1)));
|
|
8
|
+
font-family: var(--uibit-sentiment-selector-font-family, inherit);
|
|
9
|
+
-webkit-user-select: none;
|
|
10
|
+
user-select: none;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.track {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
gap: var(--uibit-sentiment-selector-item-gap, calc(0.25rem * var(--uibit-spacing-factor, 1)));
|
|
17
|
+
padding: var(--uibit-sentiment-selector-padding, calc(0.375rem * var(--uibit-spacing-factor, 1)));
|
|
18
|
+
background: var(--uibit-sentiment-selector-bg, var(--uibit-bg-subtle, #f3f4f6));
|
|
19
|
+
border-radius: var(--uibit-sentiment-selector-radius, 9999px);
|
|
20
|
+
border: var(--uibit-sentiment-selector-border, 0.0625rem solid var(--uibit-border-color, #e5e7eb));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.item {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
width: var(--uibit-sentiment-selector-item-size, calc(2.5rem * var(--uibit-spacing-factor, 1)));
|
|
28
|
+
height: var(--uibit-sentiment-selector-item-size, calc(2.5rem * var(--uibit-spacing-factor, 1)));
|
|
29
|
+
border-radius: 50%;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
border: none;
|
|
32
|
+
background: transparent;
|
|
33
|
+
outline: none;
|
|
34
|
+
color: var(--uibit-text-secondary, #374151);
|
|
35
|
+
transition: background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.item:hover,
|
|
39
|
+
.item:focus-visible {
|
|
40
|
+
background: var(--uibit-sentiment-selector-item-hover-bg, var(--uibit-bg-subtle, rgba(0, 0, 0, 0.06)));
|
|
41
|
+
opacity: 1 !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.item:active {
|
|
45
|
+
opacity: 0.7;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.item:focus-visible {
|
|
49
|
+
outline: 0.125rem solid var(--uibit-sentiment-selector-focus-color, #000000);
|
|
50
|
+
outline-offset: 0.125rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.item[data-selected] {
|
|
54
|
+
background: var(--uibit-sentiment-selector-item-selected-bg, var(--uibit-bg-surface, #ffffff));
|
|
55
|
+
box-shadow: var(--uibit-sentiment-selector-item-selected-shadow, 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12));
|
|
56
|
+
color: var(--uibit-text-primary, #111827);
|
|
57
|
+
opacity: 1 !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.item.dimmed {
|
|
61
|
+
opacity: var(--uibit-sentiment-selector-unselected-opacity, 0.35);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.icon {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
width: var(--uibit-sentiment-selector-icon-size, calc(1.25rem * var(--uibit-spacing-factor, 1)));
|
|
69
|
+
height: var(--uibit-sentiment-selector-icon-size, calc(1.25rem * var(--uibit-spacing-factor, 1)));
|
|
70
|
+
pointer-events: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.icon svg {
|
|
74
|
+
width: 100%;
|
|
75
|
+
height: 100%;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.label {
|
|
79
|
+
font-size: var(--uibit-sentiment-selector-label-font-size, var(--uibit-font-size-xs, calc(0.75rem * var(--uibit-font-scale-factor, 1))));
|
|
80
|
+
font-weight: var(--uibit-sentiment-selector-label-font-weight, var(--uibit-font-weight-medium, 500));
|
|
81
|
+
color: var(--uibit-sentiment-selector-label-color, var(--uibit-text-muted, #6b7280));
|
|
82
|
+
min-height: 1em;
|
|
83
|
+
min-width: 5rem;
|
|
84
|
+
text-align: center;
|
|
85
|
+
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
86
|
+
opacity: 0;
|
|
87
|
+
visibility: hidden;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.label.visible {
|
|
91
|
+
opacity: 1;
|
|
92
|
+
visibility: visible;
|
|
93
|
+
}
|
|
94
|
+
`;
|
|
95
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,iBAAiB,MAAM,sBAAsB,CAAC;AAE1D,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,iBAAiB,CAAC;KACjD;CACA"}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@uibit/sentiment-selector",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Micro-feedback widget with a sliding row of expressive emoji options. Selecting an option triggers a spring-curve scale animation, grays out alternatives, and fires scored events instantly on release.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./custom-elements.json": "./custom-elements.json",
|
|
14
|
+
"./react": "./dist/frameworks/react/index.d.ts",
|
|
15
|
+
"./vue": "./dist/frameworks/vue/index.ts",
|
|
16
|
+
"./svelte": "./dist/frameworks/svelte/index.svelte",
|
|
17
|
+
"./angular": "./dist/frameworks/angular/index.ts",
|
|
18
|
+
"./solid": "./dist/frameworks/solid/index.d.ts",
|
|
19
|
+
"./astro": "./dist/frameworks/astro/index.astro",
|
|
20
|
+
"./qwik": "./dist/frameworks/qwik/index.tsx",
|
|
21
|
+
"./nuxt": "./dist/frameworks/nuxt/index.ts",
|
|
22
|
+
"./preact": "./dist/frameworks/preact/index.d.ts",
|
|
23
|
+
"./stencil": "./dist/frameworks/stencil/index.d.ts"
|
|
24
|
+
},
|
|
25
|
+
"files": [
|
|
26
|
+
"dist",
|
|
27
|
+
"package.json",
|
|
28
|
+
"README.md",
|
|
29
|
+
"LICENSE",
|
|
30
|
+
"custom-elements.json"
|
|
31
|
+
],
|
|
32
|
+
"keywords": [
|
|
33
|
+
"sentiment",
|
|
34
|
+
"feedback",
|
|
35
|
+
"rating",
|
|
36
|
+
"emoji",
|
|
37
|
+
"micro-interaction",
|
|
38
|
+
"web-component",
|
|
39
|
+
"lit"
|
|
40
|
+
],
|
|
41
|
+
"author": "Jonathan Rawlings",
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"repository": {
|
|
44
|
+
"type": "git",
|
|
45
|
+
"url": "https://github.com/Rawlings/uibit",
|
|
46
|
+
"directory": "packages/components/sentiment-selector"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"lucide": "^1.24.0",
|
|
50
|
+
"@uibit/core": "0.1.0",
|
|
51
|
+
"@uibit/form-internals": "0.1.0"
|
|
52
|
+
},
|
|
53
|
+
"devDependencies": {
|
|
54
|
+
"@types/node": "^20.19.43",
|
|
55
|
+
"lit": "^3.3.3",
|
|
56
|
+
"typescript": "7.0.2",
|
|
57
|
+
"@uibit/codegen": "0.1.0"
|
|
58
|
+
},
|
|
59
|
+
"peerDependencies": {
|
|
60
|
+
"lit": "^3.0.0",
|
|
61
|
+
"react": ">=18",
|
|
62
|
+
"vue": ">=3",
|
|
63
|
+
"svelte": ">=4 || ^5",
|
|
64
|
+
"@angular/core": ">=14"
|
|
65
|
+
},
|
|
66
|
+
"customElements": "custom-elements.json",
|
|
67
|
+
"peerDependenciesMeta": {
|
|
68
|
+
"react": {
|
|
69
|
+
"optional": true
|
|
70
|
+
},
|
|
71
|
+
"vue": {
|
|
72
|
+
"optional": true
|
|
73
|
+
},
|
|
74
|
+
"svelte": {
|
|
75
|
+
"optional": true
|
|
76
|
+
},
|
|
77
|
+
"@angular/core": {
|
|
78
|
+
"optional": true
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"uibit": {
|
|
82
|
+
"id": "sentiment-selector",
|
|
83
|
+
"title": "Sentiment Selector",
|
|
84
|
+
"category": "Forms",
|
|
85
|
+
"tagName": "uibit-sentiment-selector"
|
|
86
|
+
},
|
|
87
|
+
"scripts": {
|
|
88
|
+
"build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
|
|
89
|
+
"dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
|
|
90
|
+
"analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
|
|
91
|
+
"typecheck": "tsc --noEmit",
|
|
92
|
+
"test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
|
|
93
|
+
}
|
|
94
|
+
}
|