@uibit/text-rotator 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/text-rotator.d.ts +4 -1
- package/dist/text-rotator.d.ts.map +1 -1
- package/dist/text-rotator.js +4 -1
- package/dist/text-rotator.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# Text Rotator
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/text-rotator)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/components/text-rotator)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/text-rotator
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
Text Rotator cycles through an array of phrases inside a static sentence. It transitions between list items using vertical slide or 3D perspective flip animations, designed to highlight shifting value propositions within a compact, responsive boundary.
|
|
6
16
|
|
|
7
17
|
## Value Delivery
|
package/custom-elements.json
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"declarations": [
|
|
61
61
|
{
|
|
62
62
|
"kind": "class",
|
|
63
|
-
"description": "Cycles through an array of phrases inside a static sentence by animating between
|
|
63
|
+
"description": "Cycles through an array of phrases inside a static sentence by animating between",
|
|
64
64
|
"name": "TextRotator",
|
|
65
65
|
"cssProperties": [
|
|
66
66
|
{
|
|
@@ -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": [
|
|
@@ -256,12 +461,32 @@
|
|
|
256
461
|
"default": "true",
|
|
257
462
|
"description": "Loop indefinitely. Set to false to stop after the last word.",
|
|
258
463
|
"fieldName": "loop"
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"name": "locale",
|
|
467
|
+
"type": {
|
|
468
|
+
"text": "string"
|
|
469
|
+
},
|
|
470
|
+
"default": "''",
|
|
471
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
472
|
+
"fieldName": "locale",
|
|
473
|
+
"inheritedFrom": {
|
|
474
|
+
"name": "UIBitElement",
|
|
475
|
+
"module": "../../platform/core/src/element.ts"
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
],
|
|
479
|
+
"cssStates": [
|
|
480
|
+
{
|
|
481
|
+
"name": "rotating",
|
|
482
|
+
"description": "Active when the text transition is in progress."
|
|
259
483
|
}
|
|
260
484
|
],
|
|
261
485
|
"superclass": {
|
|
262
486
|
"name": "UIBitElement",
|
|
263
487
|
"package": "@uibit/core"
|
|
264
488
|
},
|
|
489
|
+
"summary": "A rotating text carousel component with smooth CSS animation transitions.\nitems with a vertical slide or 3D flip transition. Designed to highlight changing\nvalue propositions without motion outside the component boundary.\n\nPass static prefix or wrapper text inside the default slot, and phrases to cycle through\ninside elements with `slot=\"text\"` (e.g. `<span slot=\"text\">phrase</span>`).",
|
|
265
490
|
"tagName": "uibit-text-rotator",
|
|
266
491
|
"customElement": true
|
|
267
492
|
}
|
|
@@ -298,6 +523,250 @@
|
|
|
298
523
|
"path": "src/types.ts",
|
|
299
524
|
"declarations": [],
|
|
300
525
|
"exports": []
|
|
526
|
+
},
|
|
527
|
+
{
|
|
528
|
+
"kind": "javascript-module",
|
|
529
|
+
"path": "../../platform/core/src/element.ts",
|
|
530
|
+
"declarations": [
|
|
531
|
+
{
|
|
532
|
+
"kind": "class",
|
|
533
|
+
"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.",
|
|
534
|
+
"name": "UIBitElement",
|
|
535
|
+
"members": [
|
|
536
|
+
{
|
|
537
|
+
"kind": "field",
|
|
538
|
+
"name": "locale",
|
|
539
|
+
"type": {
|
|
540
|
+
"text": "string"
|
|
541
|
+
},
|
|
542
|
+
"default": "''",
|
|
543
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
544
|
+
"attribute": "locale"
|
|
545
|
+
},
|
|
546
|
+
{
|
|
547
|
+
"kind": "field",
|
|
548
|
+
"name": "resolvedLocale",
|
|
549
|
+
"type": {
|
|
550
|
+
"text": "string | undefined"
|
|
551
|
+
},
|
|
552
|
+
"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).",
|
|
553
|
+
"readonly": true
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
"kind": "field",
|
|
557
|
+
"name": "_disposables",
|
|
558
|
+
"type": {
|
|
559
|
+
"text": "Set<() => void>"
|
|
560
|
+
},
|
|
561
|
+
"privacy": "private",
|
|
562
|
+
"default": "new Set()"
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
"kind": "method",
|
|
566
|
+
"name": "createProperty",
|
|
567
|
+
"static": true,
|
|
568
|
+
"parameters": [
|
|
569
|
+
{
|
|
570
|
+
"name": "name",
|
|
571
|
+
"type": {
|
|
572
|
+
"text": "PropertyKey"
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"name": "options",
|
|
577
|
+
"optional": true,
|
|
578
|
+
"type": {
|
|
579
|
+
"text": "PropertyDeclaration"
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
],
|
|
583
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
584
|
+
},
|
|
585
|
+
{
|
|
586
|
+
"kind": "method",
|
|
587
|
+
"name": "finalizeStyles",
|
|
588
|
+
"static": true,
|
|
589
|
+
"return": {
|
|
590
|
+
"type": {
|
|
591
|
+
"text": "Array<any>"
|
|
592
|
+
}
|
|
593
|
+
},
|
|
594
|
+
"parameters": [
|
|
595
|
+
{
|
|
596
|
+
"name": "styles",
|
|
597
|
+
"optional": true,
|
|
598
|
+
"type": {
|
|
599
|
+
"text": "CSSResultGroup"
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
],
|
|
603
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
"kind": "method",
|
|
607
|
+
"name": "dispatchCustomEvent",
|
|
608
|
+
"return": {
|
|
609
|
+
"type": {
|
|
610
|
+
"text": "boolean"
|
|
611
|
+
}
|
|
612
|
+
},
|
|
613
|
+
"parameters": [
|
|
614
|
+
{
|
|
615
|
+
"name": "name",
|
|
616
|
+
"type": {
|
|
617
|
+
"text": "string"
|
|
618
|
+
}
|
|
619
|
+
},
|
|
620
|
+
{
|
|
621
|
+
"name": "detail",
|
|
622
|
+
"optional": true,
|
|
623
|
+
"type": {
|
|
624
|
+
"text": "T"
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
{
|
|
628
|
+
"name": "options",
|
|
629
|
+
"optional": true,
|
|
630
|
+
"type": {
|
|
631
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
],
|
|
635
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
636
|
+
},
|
|
637
|
+
{
|
|
638
|
+
"kind": "method",
|
|
639
|
+
"name": "getCssPropertyValue",
|
|
640
|
+
"return": {
|
|
641
|
+
"type": {
|
|
642
|
+
"text": "string"
|
|
643
|
+
}
|
|
644
|
+
},
|
|
645
|
+
"parameters": [
|
|
646
|
+
{
|
|
647
|
+
"name": "propertyName",
|
|
648
|
+
"type": {
|
|
649
|
+
"text": "string"
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
],
|
|
653
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
"kind": "method",
|
|
657
|
+
"name": "registerDisposable",
|
|
658
|
+
"parameters": [
|
|
659
|
+
{
|
|
660
|
+
"name": "cleanup",
|
|
661
|
+
"type": {
|
|
662
|
+
"text": "() => void"
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
],
|
|
666
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
667
|
+
},
|
|
668
|
+
{
|
|
669
|
+
"kind": "method",
|
|
670
|
+
"name": "listen",
|
|
671
|
+
"return": {
|
|
672
|
+
"type": {
|
|
673
|
+
"text": "() => void"
|
|
674
|
+
}
|
|
675
|
+
},
|
|
676
|
+
"parameters": [
|
|
677
|
+
{
|
|
678
|
+
"name": "target",
|
|
679
|
+
"type": {
|
|
680
|
+
"text": "EventTarget"
|
|
681
|
+
}
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"name": "type",
|
|
685
|
+
"type": {
|
|
686
|
+
"text": "K"
|
|
687
|
+
}
|
|
688
|
+
},
|
|
689
|
+
{
|
|
690
|
+
"name": "listener",
|
|
691
|
+
"type": {
|
|
692
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
693
|
+
}
|
|
694
|
+
},
|
|
695
|
+
{
|
|
696
|
+
"name": "options",
|
|
697
|
+
"optional": true,
|
|
698
|
+
"type": {
|
|
699
|
+
"text": "boolean | AddEventListenerOptions"
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
],
|
|
703
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"kind": "method",
|
|
707
|
+
"name": "listen",
|
|
708
|
+
"return": {
|
|
709
|
+
"type": {
|
|
710
|
+
"text": "() => void"
|
|
711
|
+
}
|
|
712
|
+
},
|
|
713
|
+
"parameters": [
|
|
714
|
+
{
|
|
715
|
+
"name": "target",
|
|
716
|
+
"type": {
|
|
717
|
+
"text": "EventTarget"
|
|
718
|
+
}
|
|
719
|
+
},
|
|
720
|
+
{
|
|
721
|
+
"name": "type",
|
|
722
|
+
"type": {
|
|
723
|
+
"text": "string"
|
|
724
|
+
}
|
|
725
|
+
},
|
|
726
|
+
{
|
|
727
|
+
"name": "listener",
|
|
728
|
+
"type": {
|
|
729
|
+
"text": "EventListenerOrEventListenerObject"
|
|
730
|
+
}
|
|
731
|
+
},
|
|
732
|
+
{
|
|
733
|
+
"name": "options",
|
|
734
|
+
"optional": true,
|
|
735
|
+
"type": {
|
|
736
|
+
"text": "boolean | AddEventListenerOptions"
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
]
|
|
740
|
+
}
|
|
741
|
+
],
|
|
742
|
+
"attributes": [
|
|
743
|
+
{
|
|
744
|
+
"name": "locale",
|
|
745
|
+
"type": {
|
|
746
|
+
"text": "string"
|
|
747
|
+
},
|
|
748
|
+
"default": "''",
|
|
749
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
750
|
+
"fieldName": "locale"
|
|
751
|
+
}
|
|
752
|
+
],
|
|
753
|
+
"superclass": {
|
|
754
|
+
"name": "LitElement",
|
|
755
|
+
"package": "lit"
|
|
756
|
+
},
|
|
757
|
+
"customElement": true
|
|
758
|
+
}
|
|
759
|
+
],
|
|
760
|
+
"exports": [
|
|
761
|
+
{
|
|
762
|
+
"kind": "js",
|
|
763
|
+
"name": "UIBitElement",
|
|
764
|
+
"declaration": {
|
|
765
|
+
"name": "UIBitElement",
|
|
766
|
+
"module": "../../platform/core/src/element.ts"
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
]
|
|
301
770
|
}
|
|
302
771
|
]
|
|
303
772
|
}
|
|
@@ -28,11 +28,17 @@ export class NgxTextRotator {
|
|
|
28
28
|
this.el.nativeElement.loop = this.loop();
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
+
effect(() => {
|
|
32
|
+
if (this.el.nativeElement) {
|
|
33
|
+
this.el.nativeElement.locale = this.locale();
|
|
34
|
+
}
|
|
35
|
+
});
|
|
31
36
|
}
|
|
32
37
|
|
|
33
38
|
readonly interval = input<number, any>(2500, { transform: numberAttribute });
|
|
34
39
|
readonly transition = input<'slide' | 'flip', any>('slide');
|
|
35
40
|
readonly loop = input<boolean, any>(true, { transform: booleanAttribute });
|
|
41
|
+
readonly locale = input<string, any>('');
|
|
36
42
|
|
|
37
43
|
readonly wordChange = output<CustomEvent<{ word: string, index: number }>>();
|
|
38
44
|
}
|
|
@@ -6,12 +6,14 @@
|
|
|
6
6
|
interval = undefined,
|
|
7
7
|
transition = undefined,
|
|
8
8
|
loop = undefined,
|
|
9
|
+
locale = undefined,
|
|
9
10
|
children
|
|
10
11
|
} = $props<{
|
|
11
12
|
children?: any;
|
|
12
13
|
interval?: number;
|
|
13
14
|
transition?: 'slide' | 'flip';
|
|
14
15
|
loop?: boolean;
|
|
16
|
+
locale?: string;
|
|
15
17
|
|
|
16
18
|
}>();
|
|
17
19
|
|
|
@@ -27,6 +29,9 @@
|
|
|
27
29
|
if (elementRef && loop !== undefined) {
|
|
28
30
|
elementRef.loop = loop;
|
|
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 TextRotator = defineComponent({
|
|
|
7
7
|
props: {
|
|
8
8
|
interval: { type: [String, Number, Boolean, Array, Object] as any },
|
|
9
9
|
transition: { type: [String, Number, Boolean, Array, Object] as any },
|
|
10
|
-
loop: { type: [String, Number, Boolean, Array, Object] as any }
|
|
10
|
+
loop: { type: [String, Number, Boolean, Array, Object] as any },
|
|
11
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
11
12
|
},
|
|
12
13
|
emits: ['word-change'],
|
|
13
14
|
setup(props, { slots, emit }) {
|
package/dist/text-rotator.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { UIBitElement } from '@uibit/core';
|
|
2
2
|
/**
|
|
3
3
|
* Cycles through an array of phrases inside a static sentence by animating between
|
|
4
|
+
|
|
5
|
+
* @summary A rotating text carousel component with smooth CSS animation transitions.
|
|
4
6
|
* items with a vertical slide or 3D flip transition. Designed to highlight changing
|
|
5
7
|
* value propositions without motion outside the component boundary.
|
|
6
8
|
*
|
|
@@ -15,7 +17,8 @@ import { UIBitElement } from '@uibit/core';
|
|
|
15
17
|
* @cssprop [--uibit-text-rotator-font-family=inherit] - Font family
|
|
16
18
|
* @cssprop [--uibit-text-rotator-line-height=inherit] - Line height
|
|
17
19
|
* @cssprop [--uibit-text-rotator-duration=0.4s] - Transition animation duration
|
|
18
|
-
|
|
20
|
+
|
|
21
|
+
* @cssstate rotating - Active when the text transition is in progress.*/
|
|
19
22
|
export declare class TextRotator extends UIBitElement {
|
|
20
23
|
static styles: import("lit").CSSResult;
|
|
21
24
|
private words;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-rotator.d.ts","sourceRoot":"","sources":["../src/text-rotator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI1D
|
|
1
|
+
{"version":3,"file":"text-rotator.d.ts","sourceRoot":"","sources":["../src/text-rotator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;yEAmByE;AACzE,qBACa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,KAAK,CAAgB;IAEtC,wCAAwC;IACZ,QAAQ,SAAQ;IAE5C,oFAAoF;IACxD,UAAU,EAAE,OAAO,GAAG,MAAM,CAAW;IAEnE,mEAAmE;IACtC,IAAI,UAAQ;IAEhC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,MAAM,CAAC,CAAiC;IAEhD,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,YAAY,SAGX;IAED,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAUpC;IAED,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;IAWzB,MAAM,oCAaL;CACF;eAEc,WAAW"}
|
package/dist/text-rotator.js
CHANGED
|
@@ -11,6 +11,8 @@ import { property, state } from 'lit/decorators.js';
|
|
|
11
11
|
import { styles } from './styles';
|
|
12
12
|
/**
|
|
13
13
|
* Cycles through an array of phrases inside a static sentence by animating between
|
|
14
|
+
|
|
15
|
+
* @summary A rotating text carousel component with smooth CSS animation transitions.
|
|
14
16
|
* items with a vertical slide or 3D flip transition. Designed to highlight changing
|
|
15
17
|
* value propositions without motion outside the component boundary.
|
|
16
18
|
*
|
|
@@ -25,7 +27,8 @@ import { styles } from './styles';
|
|
|
25
27
|
* @cssprop [--uibit-text-rotator-font-family=inherit] - Font family
|
|
26
28
|
* @cssprop [--uibit-text-rotator-line-height=inherit] - Line height
|
|
27
29
|
* @cssprop [--uibit-text-rotator-duration=0.4s] - Transition animation duration
|
|
28
|
-
|
|
30
|
+
|
|
31
|
+
* @cssstate rotating - Active when the text transition is in progress.*/
|
|
29
32
|
let TextRotator = class TextRotator extends UIBitElement {
|
|
30
33
|
constructor() {
|
|
31
34
|
super(...arguments);
|
package/dist/text-rotator.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-rotator.js","sourceRoot":"","sources":["../src/text-rotator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC
|
|
1
|
+
{"version":3,"file":"text-rotator.js","sourceRoot":"","sources":["../src/text-rotator.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/text-rotator",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Rotates a single word inside a static sentence block with smooth vertical slide or 3D flip transitions. Designed to pull attention to changing value propositions.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"directory": "packages/components/text-rotator"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@uibit/core": "0.
|
|
47
|
+
"@uibit/core": "0.2.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/node": "^20.19.43",
|
|
@@ -81,9 +81,9 @@
|
|
|
81
81
|
"tagName": "uibit-text-rotator"
|
|
82
82
|
},
|
|
83
83
|
"scripts": {
|
|
84
|
-
"build": "cem analyze --
|
|
85
|
-
"dev": "concurrently \"cem analyze --
|
|
86
|
-
"analyze": "cem analyze --
|
|
84
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
85
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
86
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
87
87
|
"typecheck": "tsc --noEmit"
|
|
88
88
|
}
|
|
89
89
|
}
|