@uibit/hotspot 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/hotspot.d.ts +4 -1
- package/dist/hotspot.d.ts.map +1 -1
- package/dist/hotspot.js +4 -1
- package/dist/hotspot.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# Hotspot
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/hotspot)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/components/hotspot)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/hotspot
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
Hotspot enables interactive image exploration by overlaying contextual annotations on top of specific regions of an image. It transforms static diagrams, product mockups, and photographs into interactive guides that reveal rich details on demand, reducing clutter.
|
|
6
16
|
|
|
7
17
|
## Value Delivery
|
package/custom-elements.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "Interactive hotspot annotations for images. Display contextual tooltip
|
|
11
|
+
"description": "Interactive hotspot annotations for images. Display contextual tooltip",
|
|
12
12
|
"name": "Hotspot",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
@@ -245,6 +245,211 @@
|
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
247
|
]
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"kind": "field",
|
|
251
|
+
"name": "locale",
|
|
252
|
+
"type": {
|
|
253
|
+
"text": "string"
|
|
254
|
+
},
|
|
255
|
+
"default": "''",
|
|
256
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
257
|
+
"attribute": "locale",
|
|
258
|
+
"inheritedFrom": {
|
|
259
|
+
"name": "UIBitElement",
|
|
260
|
+
"module": "../../platform/core/src/element.ts"
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"kind": "field",
|
|
265
|
+
"name": "resolvedLocale",
|
|
266
|
+
"type": {
|
|
267
|
+
"text": "string | undefined"
|
|
268
|
+
},
|
|
269
|
+
"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).",
|
|
270
|
+
"readonly": true,
|
|
271
|
+
"inheritedFrom": {
|
|
272
|
+
"name": "UIBitElement",
|
|
273
|
+
"module": "../../platform/core/src/element.ts"
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"kind": "field",
|
|
278
|
+
"name": "_disposables",
|
|
279
|
+
"type": {
|
|
280
|
+
"text": "Set<() => void>"
|
|
281
|
+
},
|
|
282
|
+
"privacy": "private",
|
|
283
|
+
"default": "new Set()",
|
|
284
|
+
"inheritedFrom": {
|
|
285
|
+
"name": "UIBitElement",
|
|
286
|
+
"module": "../../platform/core/src/element.ts"
|
|
287
|
+
}
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"kind": "method",
|
|
291
|
+
"name": "createProperty",
|
|
292
|
+
"static": true,
|
|
293
|
+
"parameters": [
|
|
294
|
+
{
|
|
295
|
+
"name": "name",
|
|
296
|
+
"type": {
|
|
297
|
+
"text": "PropertyKey"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"name": "options",
|
|
302
|
+
"optional": true,
|
|
303
|
+
"type": {
|
|
304
|
+
"text": "PropertyDeclaration"
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
],
|
|
308
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
|
|
309
|
+
"inheritedFrom": {
|
|
310
|
+
"name": "UIBitElement",
|
|
311
|
+
"module": "../../platform/core/src/element.ts"
|
|
312
|
+
}
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"kind": "method",
|
|
316
|
+
"name": "finalizeStyles",
|
|
317
|
+
"static": true,
|
|
318
|
+
"return": {
|
|
319
|
+
"type": {
|
|
320
|
+
"text": "Array<any>"
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
"parameters": [
|
|
324
|
+
{
|
|
325
|
+
"name": "styles",
|
|
326
|
+
"optional": true,
|
|
327
|
+
"type": {
|
|
328
|
+
"text": "CSSResultGroup"
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
],
|
|
332
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
|
|
333
|
+
"inheritedFrom": {
|
|
334
|
+
"name": "UIBitElement",
|
|
335
|
+
"module": "../../platform/core/src/element.ts"
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"kind": "method",
|
|
340
|
+
"name": "dispatchCustomEvent",
|
|
341
|
+
"return": {
|
|
342
|
+
"type": {
|
|
343
|
+
"text": "boolean"
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
"parameters": [
|
|
347
|
+
{
|
|
348
|
+
"name": "name",
|
|
349
|
+
"type": {
|
|
350
|
+
"text": "string"
|
|
351
|
+
}
|
|
352
|
+
},
|
|
353
|
+
{
|
|
354
|
+
"name": "detail",
|
|
355
|
+
"optional": true,
|
|
356
|
+
"type": {
|
|
357
|
+
"text": "T"
|
|
358
|
+
}
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"name": "options",
|
|
362
|
+
"optional": true,
|
|
363
|
+
"type": {
|
|
364
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
],
|
|
368
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options.",
|
|
369
|
+
"inheritedFrom": {
|
|
370
|
+
"name": "UIBitElement",
|
|
371
|
+
"module": "../../platform/core/src/element.ts"
|
|
372
|
+
}
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"kind": "method",
|
|
376
|
+
"name": "getCssPropertyValue",
|
|
377
|
+
"return": {
|
|
378
|
+
"type": {
|
|
379
|
+
"text": "string"
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
"parameters": [
|
|
383
|
+
{
|
|
384
|
+
"name": "propertyName",
|
|
385
|
+
"type": {
|
|
386
|
+
"text": "string"
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
],
|
|
390
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element.",
|
|
391
|
+
"inheritedFrom": {
|
|
392
|
+
"name": "UIBitElement",
|
|
393
|
+
"module": "../../platform/core/src/element.ts"
|
|
394
|
+
}
|
|
395
|
+
},
|
|
396
|
+
{
|
|
397
|
+
"kind": "method",
|
|
398
|
+
"name": "registerDisposable",
|
|
399
|
+
"parameters": [
|
|
400
|
+
{
|
|
401
|
+
"name": "cleanup",
|
|
402
|
+
"type": {
|
|
403
|
+
"text": "() => void"
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
],
|
|
407
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
|
|
408
|
+
"inheritedFrom": {
|
|
409
|
+
"name": "UIBitElement",
|
|
410
|
+
"module": "../../platform/core/src/element.ts"
|
|
411
|
+
}
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
"kind": "method",
|
|
415
|
+
"name": "listen",
|
|
416
|
+
"return": {
|
|
417
|
+
"type": {
|
|
418
|
+
"text": "() => void"
|
|
419
|
+
}
|
|
420
|
+
},
|
|
421
|
+
"parameters": [
|
|
422
|
+
{
|
|
423
|
+
"name": "target",
|
|
424
|
+
"type": {
|
|
425
|
+
"text": "EventTarget"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
"name": "type",
|
|
430
|
+
"type": {
|
|
431
|
+
"text": "K"
|
|
432
|
+
}
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"name": "listener",
|
|
436
|
+
"type": {
|
|
437
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
438
|
+
}
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
"name": "options",
|
|
442
|
+
"optional": true,
|
|
443
|
+
"type": {
|
|
444
|
+
"text": "boolean | AddEventListenerOptions"
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
],
|
|
448
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
|
|
449
|
+
"inheritedFrom": {
|
|
450
|
+
"name": "UIBitElement",
|
|
451
|
+
"module": "../../platform/core/src/element.ts"
|
|
452
|
+
}
|
|
248
453
|
}
|
|
249
454
|
],
|
|
250
455
|
"events": [
|
|
@@ -283,12 +488,32 @@
|
|
|
283
488
|
"default": "'click'",
|
|
284
489
|
"description": "Interaction mode for showing the popover.",
|
|
285
490
|
"fieldName": "trigger"
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"name": "locale",
|
|
494
|
+
"type": {
|
|
495
|
+
"text": "string"
|
|
496
|
+
},
|
|
497
|
+
"default": "''",
|
|
498
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
499
|
+
"fieldName": "locale",
|
|
500
|
+
"inheritedFrom": {
|
|
501
|
+
"name": "UIBitElement",
|
|
502
|
+
"module": "../../platform/core/src/element.ts"
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
],
|
|
506
|
+
"cssStates": [
|
|
507
|
+
{
|
|
508
|
+
"name": "active",
|
|
509
|
+
"description": "Active when the hotspot popover is expanded."
|
|
286
510
|
}
|
|
287
511
|
],
|
|
288
512
|
"superclass": {
|
|
289
513
|
"name": "UIBitElement",
|
|
290
514
|
"package": "@uibit/core"
|
|
291
515
|
},
|
|
516
|
+
"summary": "An interactive image hotspot component with animated markers and popovers.\ncards on click or hover with custom content overlays and animations.",
|
|
292
517
|
"tagName": "uibit-hotspot",
|
|
293
518
|
"customElement": true
|
|
294
519
|
}
|
|
@@ -385,6 +610,250 @@
|
|
|
385
610
|
"path": "src/types.ts",
|
|
386
611
|
"declarations": [],
|
|
387
612
|
"exports": []
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"kind": "javascript-module",
|
|
616
|
+
"path": "../../platform/core/src/element.ts",
|
|
617
|
+
"declarations": [
|
|
618
|
+
{
|
|
619
|
+
"kind": "class",
|
|
620
|
+
"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.",
|
|
621
|
+
"name": "UIBitElement",
|
|
622
|
+
"members": [
|
|
623
|
+
{
|
|
624
|
+
"kind": "field",
|
|
625
|
+
"name": "locale",
|
|
626
|
+
"type": {
|
|
627
|
+
"text": "string"
|
|
628
|
+
},
|
|
629
|
+
"default": "''",
|
|
630
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
631
|
+
"attribute": "locale"
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"kind": "field",
|
|
635
|
+
"name": "resolvedLocale",
|
|
636
|
+
"type": {
|
|
637
|
+
"text": "string | undefined"
|
|
638
|
+
},
|
|
639
|
+
"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).",
|
|
640
|
+
"readonly": true
|
|
641
|
+
},
|
|
642
|
+
{
|
|
643
|
+
"kind": "field",
|
|
644
|
+
"name": "_disposables",
|
|
645
|
+
"type": {
|
|
646
|
+
"text": "Set<() => void>"
|
|
647
|
+
},
|
|
648
|
+
"privacy": "private",
|
|
649
|
+
"default": "new Set()"
|
|
650
|
+
},
|
|
651
|
+
{
|
|
652
|
+
"kind": "method",
|
|
653
|
+
"name": "createProperty",
|
|
654
|
+
"static": true,
|
|
655
|
+
"parameters": [
|
|
656
|
+
{
|
|
657
|
+
"name": "name",
|
|
658
|
+
"type": {
|
|
659
|
+
"text": "PropertyKey"
|
|
660
|
+
}
|
|
661
|
+
},
|
|
662
|
+
{
|
|
663
|
+
"name": "options",
|
|
664
|
+
"optional": true,
|
|
665
|
+
"type": {
|
|
666
|
+
"text": "PropertyDeclaration"
|
|
667
|
+
}
|
|
668
|
+
}
|
|
669
|
+
],
|
|
670
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
671
|
+
},
|
|
672
|
+
{
|
|
673
|
+
"kind": "method",
|
|
674
|
+
"name": "finalizeStyles",
|
|
675
|
+
"static": true,
|
|
676
|
+
"return": {
|
|
677
|
+
"type": {
|
|
678
|
+
"text": "Array<any>"
|
|
679
|
+
}
|
|
680
|
+
},
|
|
681
|
+
"parameters": [
|
|
682
|
+
{
|
|
683
|
+
"name": "styles",
|
|
684
|
+
"optional": true,
|
|
685
|
+
"type": {
|
|
686
|
+
"text": "CSSResultGroup"
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
],
|
|
690
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
691
|
+
},
|
|
692
|
+
{
|
|
693
|
+
"kind": "method",
|
|
694
|
+
"name": "dispatchCustomEvent",
|
|
695
|
+
"return": {
|
|
696
|
+
"type": {
|
|
697
|
+
"text": "boolean"
|
|
698
|
+
}
|
|
699
|
+
},
|
|
700
|
+
"parameters": [
|
|
701
|
+
{
|
|
702
|
+
"name": "name",
|
|
703
|
+
"type": {
|
|
704
|
+
"text": "string"
|
|
705
|
+
}
|
|
706
|
+
},
|
|
707
|
+
{
|
|
708
|
+
"name": "detail",
|
|
709
|
+
"optional": true,
|
|
710
|
+
"type": {
|
|
711
|
+
"text": "T"
|
|
712
|
+
}
|
|
713
|
+
},
|
|
714
|
+
{
|
|
715
|
+
"name": "options",
|
|
716
|
+
"optional": true,
|
|
717
|
+
"type": {
|
|
718
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
],
|
|
722
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
723
|
+
},
|
|
724
|
+
{
|
|
725
|
+
"kind": "method",
|
|
726
|
+
"name": "getCssPropertyValue",
|
|
727
|
+
"return": {
|
|
728
|
+
"type": {
|
|
729
|
+
"text": "string"
|
|
730
|
+
}
|
|
731
|
+
},
|
|
732
|
+
"parameters": [
|
|
733
|
+
{
|
|
734
|
+
"name": "propertyName",
|
|
735
|
+
"type": {
|
|
736
|
+
"text": "string"
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
],
|
|
740
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
741
|
+
},
|
|
742
|
+
{
|
|
743
|
+
"kind": "method",
|
|
744
|
+
"name": "registerDisposable",
|
|
745
|
+
"parameters": [
|
|
746
|
+
{
|
|
747
|
+
"name": "cleanup",
|
|
748
|
+
"type": {
|
|
749
|
+
"text": "() => void"
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
],
|
|
753
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
754
|
+
},
|
|
755
|
+
{
|
|
756
|
+
"kind": "method",
|
|
757
|
+
"name": "listen",
|
|
758
|
+
"return": {
|
|
759
|
+
"type": {
|
|
760
|
+
"text": "() => void"
|
|
761
|
+
}
|
|
762
|
+
},
|
|
763
|
+
"parameters": [
|
|
764
|
+
{
|
|
765
|
+
"name": "target",
|
|
766
|
+
"type": {
|
|
767
|
+
"text": "EventTarget"
|
|
768
|
+
}
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"name": "type",
|
|
772
|
+
"type": {
|
|
773
|
+
"text": "K"
|
|
774
|
+
}
|
|
775
|
+
},
|
|
776
|
+
{
|
|
777
|
+
"name": "listener",
|
|
778
|
+
"type": {
|
|
779
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
780
|
+
}
|
|
781
|
+
},
|
|
782
|
+
{
|
|
783
|
+
"name": "options",
|
|
784
|
+
"optional": true,
|
|
785
|
+
"type": {
|
|
786
|
+
"text": "boolean | AddEventListenerOptions"
|
|
787
|
+
}
|
|
788
|
+
}
|
|
789
|
+
],
|
|
790
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
791
|
+
},
|
|
792
|
+
{
|
|
793
|
+
"kind": "method",
|
|
794
|
+
"name": "listen",
|
|
795
|
+
"return": {
|
|
796
|
+
"type": {
|
|
797
|
+
"text": "() => void"
|
|
798
|
+
}
|
|
799
|
+
},
|
|
800
|
+
"parameters": [
|
|
801
|
+
{
|
|
802
|
+
"name": "target",
|
|
803
|
+
"type": {
|
|
804
|
+
"text": "EventTarget"
|
|
805
|
+
}
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
"name": "type",
|
|
809
|
+
"type": {
|
|
810
|
+
"text": "string"
|
|
811
|
+
}
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"name": "listener",
|
|
815
|
+
"type": {
|
|
816
|
+
"text": "EventListenerOrEventListenerObject"
|
|
817
|
+
}
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
"name": "options",
|
|
821
|
+
"optional": true,
|
|
822
|
+
"type": {
|
|
823
|
+
"text": "boolean | AddEventListenerOptions"
|
|
824
|
+
}
|
|
825
|
+
}
|
|
826
|
+
]
|
|
827
|
+
}
|
|
828
|
+
],
|
|
829
|
+
"attributes": [
|
|
830
|
+
{
|
|
831
|
+
"name": "locale",
|
|
832
|
+
"type": {
|
|
833
|
+
"text": "string"
|
|
834
|
+
},
|
|
835
|
+
"default": "''",
|
|
836
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
837
|
+
"fieldName": "locale"
|
|
838
|
+
}
|
|
839
|
+
],
|
|
840
|
+
"superclass": {
|
|
841
|
+
"name": "LitElement",
|
|
842
|
+
"package": "lit"
|
|
843
|
+
},
|
|
844
|
+
"customElement": true
|
|
845
|
+
}
|
|
846
|
+
],
|
|
847
|
+
"exports": [
|
|
848
|
+
{
|
|
849
|
+
"kind": "js",
|
|
850
|
+
"name": "UIBitElement",
|
|
851
|
+
"declaration": {
|
|
852
|
+
"name": "UIBitElement",
|
|
853
|
+
"module": "../../platform/core/src/element.ts"
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
]
|
|
388
857
|
}
|
|
389
858
|
]
|
|
390
859
|
}
|
|
@@ -29,11 +29,17 @@ export class NgxHotspot {
|
|
|
29
29
|
this.el.nativeElement.trigger = this.trigger();
|
|
30
30
|
}
|
|
31
31
|
});
|
|
32
|
+
effect(() => {
|
|
33
|
+
if (this.el.nativeElement) {
|
|
34
|
+
this.el.nativeElement.locale = this.locale();
|
|
35
|
+
}
|
|
36
|
+
});
|
|
32
37
|
}
|
|
33
38
|
|
|
34
39
|
readonly hotspots = input<HotspotItem[], any>([]);
|
|
35
40
|
readonly interactive = input<boolean, any>(true, { transform: booleanAttribute });
|
|
36
41
|
readonly trigger = input<'click' | 'hover', any>('click');
|
|
42
|
+
readonly locale = input<string, any>('');
|
|
37
43
|
|
|
38
44
|
readonly hotspotClick = output<CustomEvent<HotspotItem>>();
|
|
39
45
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
hotspots = undefined,
|
|
8
8
|
interactive = undefined,
|
|
9
9
|
trigger = undefined,
|
|
10
|
+
locale = undefined,
|
|
10
11
|
popover-{id} = undefined,
|
|
11
12
|
children
|
|
12
13
|
} = $props<{
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
hotspots?: HotspotItem[];
|
|
15
16
|
interactive?: boolean;
|
|
16
17
|
trigger?: 'click' | 'hover';
|
|
18
|
+
locale?: string;
|
|
17
19
|
popover-{id}?: import('svelte').Snippet;
|
|
18
20
|
}>();
|
|
19
21
|
|
|
@@ -29,6 +31,9 @@
|
|
|
29
31
|
if (elementRef && trigger !== undefined) {
|
|
30
32
|
elementRef.trigger = trigger;
|
|
31
33
|
}
|
|
34
|
+
if (elementRef && locale !== undefined) {
|
|
35
|
+
elementRef.locale = locale;
|
|
36
|
+
}
|
|
32
37
|
});
|
|
33
38
|
|
|
34
39
|
</script>
|
|
@@ -8,7 +8,8 @@ export const Hotspot = defineComponent({
|
|
|
8
8
|
props: {
|
|
9
9
|
hotspots: { type: [String, Number, Boolean, Array, Object] as any },
|
|
10
10
|
interactive: { type: [String, Number, Boolean, Array, Object] as any },
|
|
11
|
-
trigger: { type: [String, Number, Boolean, Array, Object] as any }
|
|
11
|
+
trigger: { type: [String, Number, Boolean, Array, Object] as any },
|
|
12
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
12
13
|
},
|
|
13
14
|
emits: ['hotspot-click'],
|
|
14
15
|
setup(props, { slots, emit }) {
|
package/dist/hotspot.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ import { UIBitElement } from '@uibit/core';
|
|
|
2
2
|
import type { HotspotItem } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* Interactive hotspot annotations for images. Display contextual tooltip
|
|
5
|
+
|
|
6
|
+
* @summary An interactive image hotspot component with animated markers and popovers.
|
|
5
7
|
* cards on click or hover with custom content overlays and animations.
|
|
6
8
|
*
|
|
7
9
|
* @fires {HotspotItem} hotspot-click - Fired when a hotspot trigger is activated
|
|
@@ -28,7 +30,8 @@ import type { HotspotItem } from './types';
|
|
|
28
30
|
* @csspart popover - The popover card
|
|
29
31
|
* @csspart popover-content - The content area inside the popover
|
|
30
32
|
* @csspart popover-close - The close button inside the popover
|
|
31
|
-
|
|
33
|
+
|
|
34
|
+
* @cssstate active - Active when the hotspot popover is expanded.*/
|
|
32
35
|
export declare class Hotspot extends UIBitElement {
|
|
33
36
|
static styles: import("lit").CSSResult;
|
|
34
37
|
/** Array of hotspot items. Each item requires `id`, `x` (%), `y` (%), `label`, and optionally `title` and `content`. */
|
package/dist/hotspot.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hotspot.d.ts","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAGpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C
|
|
1
|
+
{"version":3,"file":"hotspot.d.ts","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAGpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEA+BoE;AACpE,qBACa,OAAQ,SAAQ,YAAY;IACvC,MAAM,CAAC,MAAM,0BAAU;IAEvB,wHAAwH;IAC7F,QAAQ,EAAE,WAAW,EAAE,CAAM;IACxD,0EAA0E;IAC7C,WAAW,UAAQ;IAChD,gDAAgD;IACpB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAW;IAExD,OAAO,CAAC,eAAe,CAAuB;IAEvD,OAAO,CAAC,YAAY,CAAC,CAAS;IAE9B,iBAAiB,SAIhB;IAED,oBAAoB,SAKnB;IAED,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAItB,MAAM,oCA+DL;CACF;eAEc,OAAO"}
|
package/dist/hotspot.js
CHANGED
|
@@ -11,6 +11,8 @@ import { property, state } from 'lit/decorators.js';
|
|
|
11
11
|
import { styles } from './styles';
|
|
12
12
|
/**
|
|
13
13
|
* Interactive hotspot annotations for images. Display contextual tooltip
|
|
14
|
+
|
|
15
|
+
* @summary An interactive image hotspot component with animated markers and popovers.
|
|
14
16
|
* cards on click or hover with custom content overlays and animations.
|
|
15
17
|
*
|
|
16
18
|
* @fires {HotspotItem} hotspot-click - Fired when a hotspot trigger is activated
|
|
@@ -37,7 +39,8 @@ import { styles } from './styles';
|
|
|
37
39
|
* @csspart popover - The popover card
|
|
38
40
|
* @csspart popover-content - The content area inside the popover
|
|
39
41
|
* @csspart popover-close - The close button inside the popover
|
|
40
|
-
|
|
42
|
+
|
|
43
|
+
* @cssstate active - Active when the hotspot popover is expanded.*/
|
|
41
44
|
let Hotspot = class Hotspot extends UIBitElement {
|
|
42
45
|
constructor() {
|
|
43
46
|
super(...arguments);
|
package/dist/hotspot.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hotspot.js","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACpF,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC
|
|
1
|
+
{"version":3,"file":"hotspot.js","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/hotspot",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Interactive hotspot annotations for images. Display contextual tooltip cards on click or hover with custom content overlays and animations.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"lucide": "^1.24.0",
|
|
48
|
-
"@uibit/core": "0.
|
|
48
|
+
"@uibit/core": "0.2.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@types/node": "^20.19.43",
|
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
"tagName": "uibit-hotspot"
|
|
83
83
|
},
|
|
84
84
|
"scripts": {
|
|
85
|
-
"build": "cem analyze --
|
|
86
|
-
"dev": "concurrently \"cem analyze --
|
|
87
|
-
"analyze": "cem analyze --
|
|
85
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
86
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
87
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
88
88
|
"typecheck": "tsc --noEmit"
|
|
89
89
|
}
|
|
90
90
|
}
|