@uibit/sentiment-selector 0.1.0 → 0.1.1
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 +10 -0
- package/custom-elements.json +470 -1
- package/dist/frameworks/angular/index.ts +6 -0
- package/dist/frameworks/preact/index.d.ts +1 -0
- package/dist/frameworks/react/index.d.ts +1 -0
- package/dist/frameworks/solid/index.d.ts +1 -0
- package/dist/frameworks/stencil/index.d.ts +1 -0
- package/dist/frameworks/svelte/index.svelte +5 -0
- package/dist/frameworks/vue/index.ts +2 -1
- package/dist/sentiment-selector.d.ts +4 -1
- package/dist/sentiment-selector.d.ts.map +1 -1
- package/dist/sentiment-selector.js +4 -1
- package/dist/sentiment-selector.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# Sentiment Bar
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/sentiment-selector)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/sentiment-bar)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/sentiment-selector
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
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
16
|
|
|
7
17
|
## Value Delivery
|
package/custom-elements.json
CHANGED
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"declarations": [
|
|
48
48
|
{
|
|
49
49
|
"kind": "class",
|
|
50
|
-
"description": "Micro-feedback widget displaying a horizontal row of expressive face icons
|
|
50
|
+
"description": "Micro-feedback widget displaying a horizontal row of expressive face icons.",
|
|
51
51
|
"name": "SentimentSelector",
|
|
52
52
|
"cssProperties": [
|
|
53
53
|
{
|
|
@@ -218,6 +218,211 @@
|
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
220
|
]
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"kind": "field",
|
|
224
|
+
"name": "locale",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "string"
|
|
227
|
+
},
|
|
228
|
+
"default": "''",
|
|
229
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
230
|
+
"attribute": "locale",
|
|
231
|
+
"inheritedFrom": {
|
|
232
|
+
"name": "UIBitElement",
|
|
233
|
+
"module": "../../platform/core/src/element.ts"
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"kind": "field",
|
|
238
|
+
"name": "resolvedLocale",
|
|
239
|
+
"type": {
|
|
240
|
+
"text": "string | undefined"
|
|
241
|
+
},
|
|
242
|
+
"description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
|
|
243
|
+
"readonly": true,
|
|
244
|
+
"inheritedFrom": {
|
|
245
|
+
"name": "UIBitElement",
|
|
246
|
+
"module": "../../platform/core/src/element.ts"
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"kind": "field",
|
|
251
|
+
"name": "_disposables",
|
|
252
|
+
"type": {
|
|
253
|
+
"text": "Set<() => void>"
|
|
254
|
+
},
|
|
255
|
+
"privacy": "private",
|
|
256
|
+
"default": "new Set()",
|
|
257
|
+
"inheritedFrom": {
|
|
258
|
+
"name": "UIBitElement",
|
|
259
|
+
"module": "../../platform/core/src/element.ts"
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"kind": "method",
|
|
264
|
+
"name": "createProperty",
|
|
265
|
+
"static": true,
|
|
266
|
+
"parameters": [
|
|
267
|
+
{
|
|
268
|
+
"name": "name",
|
|
269
|
+
"type": {
|
|
270
|
+
"text": "PropertyKey"
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
"name": "options",
|
|
275
|
+
"optional": true,
|
|
276
|
+
"type": {
|
|
277
|
+
"text": "PropertyDeclaration"
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
],
|
|
281
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
|
|
282
|
+
"inheritedFrom": {
|
|
283
|
+
"name": "UIBitElement",
|
|
284
|
+
"module": "../../platform/core/src/element.ts"
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"kind": "method",
|
|
289
|
+
"name": "finalizeStyles",
|
|
290
|
+
"static": true,
|
|
291
|
+
"return": {
|
|
292
|
+
"type": {
|
|
293
|
+
"text": "Array<any>"
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
"parameters": [
|
|
297
|
+
{
|
|
298
|
+
"name": "styles",
|
|
299
|
+
"optional": true,
|
|
300
|
+
"type": {
|
|
301
|
+
"text": "CSSResultGroup"
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
],
|
|
305
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
|
|
306
|
+
"inheritedFrom": {
|
|
307
|
+
"name": "UIBitElement",
|
|
308
|
+
"module": "../../platform/core/src/element.ts"
|
|
309
|
+
}
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
"kind": "method",
|
|
313
|
+
"name": "dispatchCustomEvent",
|
|
314
|
+
"return": {
|
|
315
|
+
"type": {
|
|
316
|
+
"text": "boolean"
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
"parameters": [
|
|
320
|
+
{
|
|
321
|
+
"name": "name",
|
|
322
|
+
"type": {
|
|
323
|
+
"text": "string"
|
|
324
|
+
}
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"name": "detail",
|
|
328
|
+
"optional": true,
|
|
329
|
+
"type": {
|
|
330
|
+
"text": "T"
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"name": "options",
|
|
335
|
+
"optional": true,
|
|
336
|
+
"type": {
|
|
337
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
],
|
|
341
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options.",
|
|
342
|
+
"inheritedFrom": {
|
|
343
|
+
"name": "UIBitElement",
|
|
344
|
+
"module": "../../platform/core/src/element.ts"
|
|
345
|
+
}
|
|
346
|
+
},
|
|
347
|
+
{
|
|
348
|
+
"kind": "method",
|
|
349
|
+
"name": "getCssPropertyValue",
|
|
350
|
+
"return": {
|
|
351
|
+
"type": {
|
|
352
|
+
"text": "string"
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
"parameters": [
|
|
356
|
+
{
|
|
357
|
+
"name": "propertyName",
|
|
358
|
+
"type": {
|
|
359
|
+
"text": "string"
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
],
|
|
363
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element.",
|
|
364
|
+
"inheritedFrom": {
|
|
365
|
+
"name": "UIBitElement",
|
|
366
|
+
"module": "../../platform/core/src/element.ts"
|
|
367
|
+
}
|
|
368
|
+
},
|
|
369
|
+
{
|
|
370
|
+
"kind": "method",
|
|
371
|
+
"name": "registerDisposable",
|
|
372
|
+
"parameters": [
|
|
373
|
+
{
|
|
374
|
+
"name": "cleanup",
|
|
375
|
+
"type": {
|
|
376
|
+
"text": "() => void"
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
],
|
|
380
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
|
|
381
|
+
"inheritedFrom": {
|
|
382
|
+
"name": "UIBitElement",
|
|
383
|
+
"module": "../../platform/core/src/element.ts"
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"kind": "method",
|
|
388
|
+
"name": "listen",
|
|
389
|
+
"return": {
|
|
390
|
+
"type": {
|
|
391
|
+
"text": "() => void"
|
|
392
|
+
}
|
|
393
|
+
},
|
|
394
|
+
"parameters": [
|
|
395
|
+
{
|
|
396
|
+
"name": "target",
|
|
397
|
+
"type": {
|
|
398
|
+
"text": "EventTarget"
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"name": "type",
|
|
403
|
+
"type": {
|
|
404
|
+
"text": "K"
|
|
405
|
+
}
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"name": "listener",
|
|
409
|
+
"type": {
|
|
410
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
411
|
+
}
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
"name": "options",
|
|
415
|
+
"optional": true,
|
|
416
|
+
"type": {
|
|
417
|
+
"text": "boolean | AddEventListenerOptions"
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
],
|
|
421
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
|
|
422
|
+
"inheritedFrom": {
|
|
423
|
+
"name": "UIBitElement",
|
|
424
|
+
"module": "../../platform/core/src/element.ts"
|
|
425
|
+
}
|
|
221
426
|
}
|
|
222
427
|
],
|
|
223
428
|
"events": [
|
|
@@ -252,6 +457,25 @@
|
|
|
252
457
|
"default": "true",
|
|
253
458
|
"description": "Show the label text for the selected option below the track.",
|
|
254
459
|
"fieldName": "showLabel"
|
|
460
|
+
},
|
|
461
|
+
{
|
|
462
|
+
"name": "locale",
|
|
463
|
+
"type": {
|
|
464
|
+
"text": "string"
|
|
465
|
+
},
|
|
466
|
+
"default": "''",
|
|
467
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
468
|
+
"fieldName": "locale",
|
|
469
|
+
"inheritedFrom": {
|
|
470
|
+
"name": "UIBitElement",
|
|
471
|
+
"module": "../../platform/core/src/element.ts"
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
],
|
|
475
|
+
"cssStates": [
|
|
476
|
+
{
|
|
477
|
+
"name": "selected",
|
|
478
|
+
"description": "Active when a rating value has been selected."
|
|
255
479
|
}
|
|
256
480
|
],
|
|
257
481
|
"mixins": [
|
|
@@ -264,6 +488,7 @@
|
|
|
264
488
|
"name": "UIBitElement",
|
|
265
489
|
"package": "@uibit/core"
|
|
266
490
|
},
|
|
491
|
+
"summary": "A modern, accessible user rating and sentiment scale selector component.\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.",
|
|
267
492
|
"tagName": "uibit-sentiment-selector",
|
|
268
493
|
"customElement": true
|
|
269
494
|
}
|
|
@@ -321,6 +546,250 @@
|
|
|
321
546
|
"path": "src/types.ts",
|
|
322
547
|
"declarations": [],
|
|
323
548
|
"exports": []
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"kind": "javascript-module",
|
|
552
|
+
"path": "../../platform/core/src/element.ts",
|
|
553
|
+
"declarations": [
|
|
554
|
+
{
|
|
555
|
+
"kind": "class",
|
|
556
|
+
"description": "A foundational base class for all UIBit web components.\nProvides custom event helpers, default kebab-case attribute mapping,\nautomatic cleanup/disposable tracking, and auto-injected reset styles.",
|
|
557
|
+
"name": "UIBitElement",
|
|
558
|
+
"members": [
|
|
559
|
+
{
|
|
560
|
+
"kind": "field",
|
|
561
|
+
"name": "locale",
|
|
562
|
+
"type": {
|
|
563
|
+
"text": "string"
|
|
564
|
+
},
|
|
565
|
+
"default": "''",
|
|
566
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
567
|
+
"attribute": "locale"
|
|
568
|
+
},
|
|
569
|
+
{
|
|
570
|
+
"kind": "field",
|
|
571
|
+
"name": "resolvedLocale",
|
|
572
|
+
"type": {
|
|
573
|
+
"text": "string | undefined"
|
|
574
|
+
},
|
|
575
|
+
"description": "Resolves the active locale for formatting and localization.\nChecks the `locale` property first, then traverses up the DOM to find\nthe nearest ancestor with a `lang` attribute, and finally falls back\nto undefined (which defaults to browser locale).",
|
|
576
|
+
"readonly": true
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
"kind": "field",
|
|
580
|
+
"name": "_disposables",
|
|
581
|
+
"type": {
|
|
582
|
+
"text": "Set<() => void>"
|
|
583
|
+
},
|
|
584
|
+
"privacy": "private",
|
|
585
|
+
"default": "new Set()"
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
"kind": "method",
|
|
589
|
+
"name": "createProperty",
|
|
590
|
+
"static": true,
|
|
591
|
+
"parameters": [
|
|
592
|
+
{
|
|
593
|
+
"name": "name",
|
|
594
|
+
"type": {
|
|
595
|
+
"text": "PropertyKey"
|
|
596
|
+
}
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"name": "options",
|
|
600
|
+
"optional": true,
|
|
601
|
+
"type": {
|
|
602
|
+
"text": "PropertyDeclaration"
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
],
|
|
606
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
607
|
+
},
|
|
608
|
+
{
|
|
609
|
+
"kind": "method",
|
|
610
|
+
"name": "finalizeStyles",
|
|
611
|
+
"static": true,
|
|
612
|
+
"return": {
|
|
613
|
+
"type": {
|
|
614
|
+
"text": "Array<any>"
|
|
615
|
+
}
|
|
616
|
+
},
|
|
617
|
+
"parameters": [
|
|
618
|
+
{
|
|
619
|
+
"name": "styles",
|
|
620
|
+
"optional": true,
|
|
621
|
+
"type": {
|
|
622
|
+
"text": "CSSResultGroup"
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
],
|
|
626
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
627
|
+
},
|
|
628
|
+
{
|
|
629
|
+
"kind": "method",
|
|
630
|
+
"name": "dispatchCustomEvent",
|
|
631
|
+
"return": {
|
|
632
|
+
"type": {
|
|
633
|
+
"text": "boolean"
|
|
634
|
+
}
|
|
635
|
+
},
|
|
636
|
+
"parameters": [
|
|
637
|
+
{
|
|
638
|
+
"name": "name",
|
|
639
|
+
"type": {
|
|
640
|
+
"text": "string"
|
|
641
|
+
}
|
|
642
|
+
},
|
|
643
|
+
{
|
|
644
|
+
"name": "detail",
|
|
645
|
+
"optional": true,
|
|
646
|
+
"type": {
|
|
647
|
+
"text": "T"
|
|
648
|
+
}
|
|
649
|
+
},
|
|
650
|
+
{
|
|
651
|
+
"name": "options",
|
|
652
|
+
"optional": true,
|
|
653
|
+
"type": {
|
|
654
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
],
|
|
658
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"kind": "method",
|
|
662
|
+
"name": "getCssPropertyValue",
|
|
663
|
+
"return": {
|
|
664
|
+
"type": {
|
|
665
|
+
"text": "string"
|
|
666
|
+
}
|
|
667
|
+
},
|
|
668
|
+
"parameters": [
|
|
669
|
+
{
|
|
670
|
+
"name": "propertyName",
|
|
671
|
+
"type": {
|
|
672
|
+
"text": "string"
|
|
673
|
+
}
|
|
674
|
+
}
|
|
675
|
+
],
|
|
676
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
"kind": "method",
|
|
680
|
+
"name": "registerDisposable",
|
|
681
|
+
"parameters": [
|
|
682
|
+
{
|
|
683
|
+
"name": "cleanup",
|
|
684
|
+
"type": {
|
|
685
|
+
"text": "() => void"
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
],
|
|
689
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
"kind": "method",
|
|
693
|
+
"name": "listen",
|
|
694
|
+
"return": {
|
|
695
|
+
"type": {
|
|
696
|
+
"text": "() => void"
|
|
697
|
+
}
|
|
698
|
+
},
|
|
699
|
+
"parameters": [
|
|
700
|
+
{
|
|
701
|
+
"name": "target",
|
|
702
|
+
"type": {
|
|
703
|
+
"text": "EventTarget"
|
|
704
|
+
}
|
|
705
|
+
},
|
|
706
|
+
{
|
|
707
|
+
"name": "type",
|
|
708
|
+
"type": {
|
|
709
|
+
"text": "K"
|
|
710
|
+
}
|
|
711
|
+
},
|
|
712
|
+
{
|
|
713
|
+
"name": "listener",
|
|
714
|
+
"type": {
|
|
715
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
716
|
+
}
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"name": "options",
|
|
720
|
+
"optional": true,
|
|
721
|
+
"type": {
|
|
722
|
+
"text": "boolean | AddEventListenerOptions"
|
|
723
|
+
}
|
|
724
|
+
}
|
|
725
|
+
],
|
|
726
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
727
|
+
},
|
|
728
|
+
{
|
|
729
|
+
"kind": "method",
|
|
730
|
+
"name": "listen",
|
|
731
|
+
"return": {
|
|
732
|
+
"type": {
|
|
733
|
+
"text": "() => void"
|
|
734
|
+
}
|
|
735
|
+
},
|
|
736
|
+
"parameters": [
|
|
737
|
+
{
|
|
738
|
+
"name": "target",
|
|
739
|
+
"type": {
|
|
740
|
+
"text": "EventTarget"
|
|
741
|
+
}
|
|
742
|
+
},
|
|
743
|
+
{
|
|
744
|
+
"name": "type",
|
|
745
|
+
"type": {
|
|
746
|
+
"text": "string"
|
|
747
|
+
}
|
|
748
|
+
},
|
|
749
|
+
{
|
|
750
|
+
"name": "listener",
|
|
751
|
+
"type": {
|
|
752
|
+
"text": "EventListenerOrEventListenerObject"
|
|
753
|
+
}
|
|
754
|
+
},
|
|
755
|
+
{
|
|
756
|
+
"name": "options",
|
|
757
|
+
"optional": true,
|
|
758
|
+
"type": {
|
|
759
|
+
"text": "boolean | AddEventListenerOptions"
|
|
760
|
+
}
|
|
761
|
+
}
|
|
762
|
+
]
|
|
763
|
+
}
|
|
764
|
+
],
|
|
765
|
+
"attributes": [
|
|
766
|
+
{
|
|
767
|
+
"name": "locale",
|
|
768
|
+
"type": {
|
|
769
|
+
"text": "string"
|
|
770
|
+
},
|
|
771
|
+
"default": "''",
|
|
772
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
773
|
+
"fieldName": "locale"
|
|
774
|
+
}
|
|
775
|
+
],
|
|
776
|
+
"superclass": {
|
|
777
|
+
"name": "LitElement",
|
|
778
|
+
"package": "lit"
|
|
779
|
+
},
|
|
780
|
+
"customElement": true
|
|
781
|
+
}
|
|
782
|
+
],
|
|
783
|
+
"exports": [
|
|
784
|
+
{
|
|
785
|
+
"kind": "js",
|
|
786
|
+
"name": "UIBitElement",
|
|
787
|
+
"declaration": {
|
|
788
|
+
"name": "UIBitElement",
|
|
789
|
+
"module": "../../platform/core/src/element.ts"
|
|
790
|
+
}
|
|
791
|
+
}
|
|
792
|
+
]
|
|
324
793
|
}
|
|
325
794
|
]
|
|
326
795
|
}
|
|
@@ -40,11 +40,17 @@ export class NgxSentimentSelector implements ControlValueAccessor {
|
|
|
40
40
|
this.el.nativeElement.valueAsNumber = this.valueAsNumber();
|
|
41
41
|
}
|
|
42
42
|
});
|
|
43
|
+
effect(() => {
|
|
44
|
+
if (this.el.nativeElement) {
|
|
45
|
+
this.el.nativeElement.locale = this.locale();
|
|
46
|
+
}
|
|
47
|
+
});
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
readonly value = input<string, any>('');
|
|
46
51
|
readonly showLabel = input<boolean, any>(true, { transform: booleanAttribute });
|
|
47
52
|
readonly valueAsNumber = input<number | undefined, any>(0, { transform: numberAttribute });
|
|
53
|
+
readonly locale = input<string, any>('');
|
|
48
54
|
|
|
49
55
|
readonly sentimentChange = output<CustomEvent<{ value: number, label: string }>>();
|
|
50
56
|
readonly sentimentSubmit = output<CustomEvent<{ value: number, label: string }>>();
|
|
@@ -6,12 +6,14 @@
|
|
|
6
6
|
value = undefined,
|
|
7
7
|
showLabel = undefined,
|
|
8
8
|
valueAsNumber = undefined,
|
|
9
|
+
locale = undefined,
|
|
9
10
|
children
|
|
10
11
|
} = $props<{
|
|
11
12
|
children?: any;
|
|
12
13
|
value?: string;
|
|
13
14
|
showLabel?: boolean;
|
|
14
15
|
valueAsNumber?: number | undefined;
|
|
16
|
+
locale?: string;
|
|
15
17
|
|
|
16
18
|
}>();
|
|
17
19
|
|
|
@@ -27,6 +29,9 @@
|
|
|
27
29
|
if (elementRef && valueAsNumber !== undefined) {
|
|
28
30
|
elementRef.valueAsNumber = valueAsNumber;
|
|
29
31
|
}
|
|
32
|
+
if (elementRef && locale !== undefined) {
|
|
33
|
+
elementRef.locale = locale;
|
|
34
|
+
}
|
|
30
35
|
});
|
|
31
36
|
|
|
32
37
|
</script>
|
|
@@ -7,7 +7,8 @@ export const SentimentSelector = defineComponent({
|
|
|
7
7
|
props: {
|
|
8
8
|
value: { type: [String, Number, Boolean, Array, Object] as any },
|
|
9
9
|
showLabel: { type: [String, Number, Boolean, Array, Object] as any },
|
|
10
|
-
valueAsNumber: { type: [String, Number, Boolean, Array, Object] as any }
|
|
10
|
+
valueAsNumber: { type: [String, Number, Boolean, Array, Object] as any },
|
|
11
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
11
12
|
},
|
|
12
13
|
emits: ['sentiment-change', 'sentiment-submit'],
|
|
13
14
|
setup(props, { slots, emit }) {
|
|
@@ -7,6 +7,8 @@ export interface SentimentOption {
|
|
|
7
7
|
declare const SentimentSelector_base: import("@uibit/form-internals").Constructor<import("@uibit/form-internals").FormAssociatedInterface> & typeof UIBitElement;
|
|
8
8
|
/**
|
|
9
9
|
* Micro-feedback widget displaying a horizontal row of expressive face icons.
|
|
10
|
+
|
|
11
|
+
* @summary A modern, accessible user rating and sentiment scale selector component.
|
|
10
12
|
* Tapping or clicking an option scales it up with a spring animation and fires
|
|
11
13
|
* a scored event. Unselected options are dimmed to focus attention on the
|
|
12
14
|
* current selection.
|
|
@@ -33,7 +35,8 @@ declare const SentimentSelector_base: import("@uibit/form-internals").Constructo
|
|
|
33
35
|
* @cssprop [--uibit-sentiment-selector-label-font-weight=500] - Label font weight
|
|
34
36
|
* @cssprop [--uibit-sentiment-selector-label-color=#6b7280] - Label color
|
|
35
37
|
* @cssprop [--uibit-sentiment-selector-gap=0.625rem] - Gap between track and label
|
|
36
|
-
|
|
38
|
+
|
|
39
|
+
* @cssstate selected - Active when a rating value has been selected.*/
|
|
37
40
|
export declare class SentimentSelector extends SentimentSelector_base {
|
|
38
41
|
static styles: import("lit").CSSResult;
|
|
39
42
|
private options;
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEA+BuE;AACvE,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"}
|
|
@@ -26,6 +26,8 @@ const DEFAULT_OPTIONS = [
|
|
|
26
26
|
];
|
|
27
27
|
/**
|
|
28
28
|
* Micro-feedback widget displaying a horizontal row of expressive face icons.
|
|
29
|
+
|
|
30
|
+
* @summary A modern, accessible user rating and sentiment scale selector component.
|
|
29
31
|
* Tapping or clicking an option scales it up with a spring animation and fires
|
|
30
32
|
* a scored event. Unselected options are dimmed to focus attention on the
|
|
31
33
|
* current selection.
|
|
@@ -52,7 +54,8 @@ const DEFAULT_OPTIONS = [
|
|
|
52
54
|
* @cssprop [--uibit-sentiment-selector-label-font-weight=500] - Label font weight
|
|
53
55
|
* @cssprop [--uibit-sentiment-selector-label-color=#6b7280] - Label color
|
|
54
56
|
* @cssprop [--uibit-sentiment-selector-gap=0.625rem] - Gap between track and label
|
|
55
|
-
|
|
57
|
+
|
|
58
|
+
* @cssstate selected - Active when a rating value has been selected.*/
|
|
56
59
|
let SentimentSelector = class SentimentSelector extends FormAssociatedMixin(UIBitElement) {
|
|
57
60
|
constructor() {
|
|
58
61
|
super(...arguments);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sentiment-selector.js","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,EAAuB,MAAM,aAAa,CAAC;AACzG,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,cAAc,GAAmC;IACrD,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC;IACxB,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC;CACzB,CAAC;AACF,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC,MAAM,eAAe,GAAsB;IACzC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAG,KAAK,EAAE,UAAU,EAAE;IAC/C,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAG,KAAK,EAAE,KAAK,EAAE;IAC1C,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAK,KAAK,EAAE,MAAM,EAAE;IAC3C,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAG,KAAK,EAAE,MAAM,EAAE;IAC3C,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAG,KAAK,EAAE,WAAW,EAAE;CACjD,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"sentiment-selector.js","sourceRoot":"","sources":["../src/sentiment-selector.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/sentiment-selector",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
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
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"lucide": "^1.24.0",
|
|
50
|
-
"@uibit/core": "0.
|
|
50
|
+
"@uibit/core": "0.2.0",
|
|
51
51
|
"@uibit/form-internals": "0.1.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
@@ -85,9 +85,9 @@
|
|
|
85
85
|
"tagName": "uibit-sentiment-selector"
|
|
86
86
|
},
|
|
87
87
|
"scripts": {
|
|
88
|
-
"build": "cem analyze --
|
|
89
|
-
"dev": "concurrently \"cem analyze --
|
|
90
|
-
"analyze": "cem analyze --
|
|
88
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
89
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
90
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
91
91
|
"typecheck": "tsc --noEmit",
|
|
92
92
|
"test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
|
|
93
93
|
}
|