@uibit/text-typing 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 +474 -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-typing.d.ts +5 -1
- package/dist/text-typing.d.ts.map +1 -1
- package/dist/text-typing.js +5 -1
- package/dist/text-typing.js.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# Text Typing
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@uibit/text-typing)
|
|
4
|
+
|
|
5
|
+
|
|
3
6
|
[Interactive Demonstration](https://rawlings.github.io/uibit/components/text-typing)
|
|
4
7
|
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @uibit/text-typing
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
|
|
5
15
|
Text Typing is an animated display component that cycles through multiple phrases with a typing motion. By simulating speed variations, pauses, and corrections, it creates dynamic visual interest, making it ideal for landing page headlines and key value propositions.
|
|
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 by simulating realistic keystroke
|
|
63
|
+
"description": "Cycles through an array of phrases by simulating realistic keystroke",
|
|
64
64
|
"name": "TextTyping",
|
|
65
65
|
"cssProperties": [
|
|
66
66
|
{
|
|
@@ -281,6 +281,211 @@
|
|
|
281
281
|
}
|
|
282
282
|
}
|
|
283
283
|
]
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"kind": "field",
|
|
287
|
+
"name": "locale",
|
|
288
|
+
"type": {
|
|
289
|
+
"text": "string"
|
|
290
|
+
},
|
|
291
|
+
"default": "''",
|
|
292
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
293
|
+
"attribute": "locale",
|
|
294
|
+
"inheritedFrom": {
|
|
295
|
+
"name": "UIBitElement",
|
|
296
|
+
"module": "../../platform/core/src/element.ts"
|
|
297
|
+
}
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"kind": "field",
|
|
301
|
+
"name": "resolvedLocale",
|
|
302
|
+
"type": {
|
|
303
|
+
"text": "string | undefined"
|
|
304
|
+
},
|
|
305
|
+
"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).",
|
|
306
|
+
"readonly": true,
|
|
307
|
+
"inheritedFrom": {
|
|
308
|
+
"name": "UIBitElement",
|
|
309
|
+
"module": "../../platform/core/src/element.ts"
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
"kind": "field",
|
|
314
|
+
"name": "_disposables",
|
|
315
|
+
"type": {
|
|
316
|
+
"text": "Set<() => void>"
|
|
317
|
+
},
|
|
318
|
+
"privacy": "private",
|
|
319
|
+
"default": "new Set()",
|
|
320
|
+
"inheritedFrom": {
|
|
321
|
+
"name": "UIBitElement",
|
|
322
|
+
"module": "../../platform/core/src/element.ts"
|
|
323
|
+
}
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
"kind": "method",
|
|
327
|
+
"name": "createProperty",
|
|
328
|
+
"static": true,
|
|
329
|
+
"parameters": [
|
|
330
|
+
{
|
|
331
|
+
"name": "name",
|
|
332
|
+
"type": {
|
|
333
|
+
"text": "PropertyKey"
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"name": "options",
|
|
338
|
+
"optional": true,
|
|
339
|
+
"type": {
|
|
340
|
+
"text": "PropertyDeclaration"
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
],
|
|
344
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default.",
|
|
345
|
+
"inheritedFrom": {
|
|
346
|
+
"name": "UIBitElement",
|
|
347
|
+
"module": "../../platform/core/src/element.ts"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"kind": "method",
|
|
352
|
+
"name": "finalizeStyles",
|
|
353
|
+
"static": true,
|
|
354
|
+
"return": {
|
|
355
|
+
"type": {
|
|
356
|
+
"text": "Array<any>"
|
|
357
|
+
}
|
|
358
|
+
},
|
|
359
|
+
"parameters": [
|
|
360
|
+
{
|
|
361
|
+
"name": "styles",
|
|
362
|
+
"optional": true,
|
|
363
|
+
"type": {
|
|
364
|
+
"text": "CSSResultGroup"
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
],
|
|
368
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles.",
|
|
369
|
+
"inheritedFrom": {
|
|
370
|
+
"name": "UIBitElement",
|
|
371
|
+
"module": "../../platform/core/src/element.ts"
|
|
372
|
+
}
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"kind": "method",
|
|
376
|
+
"name": "dispatchCustomEvent",
|
|
377
|
+
"return": {
|
|
378
|
+
"type": {
|
|
379
|
+
"text": "boolean"
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
"parameters": [
|
|
383
|
+
{
|
|
384
|
+
"name": "name",
|
|
385
|
+
"type": {
|
|
386
|
+
"text": "string"
|
|
387
|
+
}
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"name": "detail",
|
|
391
|
+
"optional": true,
|
|
392
|
+
"type": {
|
|
393
|
+
"text": "T"
|
|
394
|
+
}
|
|
395
|
+
},
|
|
396
|
+
{
|
|
397
|
+
"name": "options",
|
|
398
|
+
"optional": true,
|
|
399
|
+
"type": {
|
|
400
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
],
|
|
404
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options.",
|
|
405
|
+
"inheritedFrom": {
|
|
406
|
+
"name": "UIBitElement",
|
|
407
|
+
"module": "../../platform/core/src/element.ts"
|
|
408
|
+
}
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"kind": "method",
|
|
412
|
+
"name": "getCssPropertyValue",
|
|
413
|
+
"return": {
|
|
414
|
+
"type": {
|
|
415
|
+
"text": "string"
|
|
416
|
+
}
|
|
417
|
+
},
|
|
418
|
+
"parameters": [
|
|
419
|
+
{
|
|
420
|
+
"name": "propertyName",
|
|
421
|
+
"type": {
|
|
422
|
+
"text": "string"
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
],
|
|
426
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element.",
|
|
427
|
+
"inheritedFrom": {
|
|
428
|
+
"name": "UIBitElement",
|
|
429
|
+
"module": "../../platform/core/src/element.ts"
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
"kind": "method",
|
|
434
|
+
"name": "registerDisposable",
|
|
435
|
+
"parameters": [
|
|
436
|
+
{
|
|
437
|
+
"name": "cleanup",
|
|
438
|
+
"type": {
|
|
439
|
+
"text": "() => void"
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
],
|
|
443
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM.",
|
|
444
|
+
"inheritedFrom": {
|
|
445
|
+
"name": "UIBitElement",
|
|
446
|
+
"module": "../../platform/core/src/element.ts"
|
|
447
|
+
}
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
"kind": "method",
|
|
451
|
+
"name": "listen",
|
|
452
|
+
"return": {
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "() => void"
|
|
455
|
+
}
|
|
456
|
+
},
|
|
457
|
+
"parameters": [
|
|
458
|
+
{
|
|
459
|
+
"name": "target",
|
|
460
|
+
"type": {
|
|
461
|
+
"text": "EventTarget"
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
"name": "type",
|
|
466
|
+
"type": {
|
|
467
|
+
"text": "K"
|
|
468
|
+
}
|
|
469
|
+
},
|
|
470
|
+
{
|
|
471
|
+
"name": "listener",
|
|
472
|
+
"type": {
|
|
473
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
474
|
+
}
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
"name": "options",
|
|
478
|
+
"optional": true,
|
|
479
|
+
"type": {
|
|
480
|
+
"text": "boolean | AddEventListenerOptions"
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
],
|
|
484
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected.",
|
|
485
|
+
"inheritedFrom": {
|
|
486
|
+
"name": "UIBitElement",
|
|
487
|
+
"module": "../../platform/core/src/element.ts"
|
|
488
|
+
}
|
|
284
489
|
}
|
|
285
490
|
],
|
|
286
491
|
"events": [
|
|
@@ -355,12 +560,36 @@
|
|
|
355
560
|
"default": "true",
|
|
356
561
|
"description": "Loop indefinitely. Set to false to stop after the last phrase.",
|
|
357
562
|
"fieldName": "loop"
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
"name": "locale",
|
|
566
|
+
"type": {
|
|
567
|
+
"text": "string"
|
|
568
|
+
},
|
|
569
|
+
"default": "''",
|
|
570
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
571
|
+
"fieldName": "locale",
|
|
572
|
+
"inheritedFrom": {
|
|
573
|
+
"name": "UIBitElement",
|
|
574
|
+
"module": "../../platform/core/src/element.ts"
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
],
|
|
578
|
+
"cssStates": [
|
|
579
|
+
{
|
|
580
|
+
"name": "typing",
|
|
581
|
+
"description": "Active when text is actively typing out."
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
"name": "deleting",
|
|
585
|
+
"description": "Active when text is actively backspacing."
|
|
358
586
|
}
|
|
359
587
|
],
|
|
360
588
|
"superclass": {
|
|
361
589
|
"name": "UIBitElement",
|
|
362
590
|
"package": "@uibit/core"
|
|
363
591
|
},
|
|
592
|
+
"summary": "A typewriter effect animation component with looping backspacing features.\ntyping and backspace deletion. Includes subtle speed variance, randomized\nsimulated typos that auto-correct, and a blinking cursor node.\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>`).",
|
|
364
593
|
"tagName": "uibit-text-typing",
|
|
365
594
|
"customElement": true
|
|
366
595
|
}
|
|
@@ -397,6 +626,250 @@
|
|
|
397
626
|
"path": "src/types.ts",
|
|
398
627
|
"declarations": [],
|
|
399
628
|
"exports": []
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
"kind": "javascript-module",
|
|
632
|
+
"path": "../../platform/core/src/element.ts",
|
|
633
|
+
"declarations": [
|
|
634
|
+
{
|
|
635
|
+
"kind": "class",
|
|
636
|
+
"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.",
|
|
637
|
+
"name": "UIBitElement",
|
|
638
|
+
"members": [
|
|
639
|
+
{
|
|
640
|
+
"kind": "field",
|
|
641
|
+
"name": "locale",
|
|
642
|
+
"type": {
|
|
643
|
+
"text": "string"
|
|
644
|
+
},
|
|
645
|
+
"default": "''",
|
|
646
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
647
|
+
"attribute": "locale"
|
|
648
|
+
},
|
|
649
|
+
{
|
|
650
|
+
"kind": "field",
|
|
651
|
+
"name": "resolvedLocale",
|
|
652
|
+
"type": {
|
|
653
|
+
"text": "string | undefined"
|
|
654
|
+
},
|
|
655
|
+
"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).",
|
|
656
|
+
"readonly": true
|
|
657
|
+
},
|
|
658
|
+
{
|
|
659
|
+
"kind": "field",
|
|
660
|
+
"name": "_disposables",
|
|
661
|
+
"type": {
|
|
662
|
+
"text": "Set<() => void>"
|
|
663
|
+
},
|
|
664
|
+
"privacy": "private",
|
|
665
|
+
"default": "new Set()"
|
|
666
|
+
},
|
|
667
|
+
{
|
|
668
|
+
"kind": "method",
|
|
669
|
+
"name": "createProperty",
|
|
670
|
+
"static": true,
|
|
671
|
+
"parameters": [
|
|
672
|
+
{
|
|
673
|
+
"name": "name",
|
|
674
|
+
"type": {
|
|
675
|
+
"text": "PropertyKey"
|
|
676
|
+
}
|
|
677
|
+
},
|
|
678
|
+
{
|
|
679
|
+
"name": "options",
|
|
680
|
+
"optional": true,
|
|
681
|
+
"type": {
|
|
682
|
+
"text": "PropertyDeclaration"
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
],
|
|
686
|
+
"description": "Overrides createProperty to automatically map camelCase property names\nto kebab-case attribute names by default."
|
|
687
|
+
},
|
|
688
|
+
{
|
|
689
|
+
"kind": "method",
|
|
690
|
+
"name": "finalizeStyles",
|
|
691
|
+
"static": true,
|
|
692
|
+
"return": {
|
|
693
|
+
"type": {
|
|
694
|
+
"text": "Array<any>"
|
|
695
|
+
}
|
|
696
|
+
},
|
|
697
|
+
"parameters": [
|
|
698
|
+
{
|
|
699
|
+
"name": "styles",
|
|
700
|
+
"optional": true,
|
|
701
|
+
"type": {
|
|
702
|
+
"text": "CSSResultGroup"
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
],
|
|
706
|
+
"description": "Automatically prepends basic layout resets (border-box) to the\ncomponent's final styles."
|
|
707
|
+
},
|
|
708
|
+
{
|
|
709
|
+
"kind": "method",
|
|
710
|
+
"name": "dispatchCustomEvent",
|
|
711
|
+
"return": {
|
|
712
|
+
"type": {
|
|
713
|
+
"text": "boolean"
|
|
714
|
+
}
|
|
715
|
+
},
|
|
716
|
+
"parameters": [
|
|
717
|
+
{
|
|
718
|
+
"name": "name",
|
|
719
|
+
"type": {
|
|
720
|
+
"text": "string"
|
|
721
|
+
}
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"name": "detail",
|
|
725
|
+
"optional": true,
|
|
726
|
+
"type": {
|
|
727
|
+
"text": "T"
|
|
728
|
+
}
|
|
729
|
+
},
|
|
730
|
+
{
|
|
731
|
+
"name": "options",
|
|
732
|
+
"optional": true,
|
|
733
|
+
"type": {
|
|
734
|
+
"text": "Omit<CustomEventInit<T>, 'detail'>"
|
|
735
|
+
}
|
|
736
|
+
}
|
|
737
|
+
],
|
|
738
|
+
"description": "Helper to dispatch a custom event with standard bubbles and composed options."
|
|
739
|
+
},
|
|
740
|
+
{
|
|
741
|
+
"kind": "method",
|
|
742
|
+
"name": "getCssPropertyValue",
|
|
743
|
+
"return": {
|
|
744
|
+
"type": {
|
|
745
|
+
"text": "string"
|
|
746
|
+
}
|
|
747
|
+
},
|
|
748
|
+
"parameters": [
|
|
749
|
+
{
|
|
750
|
+
"name": "propertyName",
|
|
751
|
+
"type": {
|
|
752
|
+
"text": "string"
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
],
|
|
756
|
+
"description": "Helper to retrieve a computed CSS custom property value from the element."
|
|
757
|
+
},
|
|
758
|
+
{
|
|
759
|
+
"kind": "method",
|
|
760
|
+
"name": "registerDisposable",
|
|
761
|
+
"parameters": [
|
|
762
|
+
{
|
|
763
|
+
"name": "cleanup",
|
|
764
|
+
"type": {
|
|
765
|
+
"text": "() => void"
|
|
766
|
+
}
|
|
767
|
+
}
|
|
768
|
+
],
|
|
769
|
+
"description": "Register a cleanup function to be executed when the element is disconnected from the DOM."
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"kind": "method",
|
|
773
|
+
"name": "listen",
|
|
774
|
+
"return": {
|
|
775
|
+
"type": {
|
|
776
|
+
"text": "() => void"
|
|
777
|
+
}
|
|
778
|
+
},
|
|
779
|
+
"parameters": [
|
|
780
|
+
{
|
|
781
|
+
"name": "target",
|
|
782
|
+
"type": {
|
|
783
|
+
"text": "EventTarget"
|
|
784
|
+
}
|
|
785
|
+
},
|
|
786
|
+
{
|
|
787
|
+
"name": "type",
|
|
788
|
+
"type": {
|
|
789
|
+
"text": "K"
|
|
790
|
+
}
|
|
791
|
+
},
|
|
792
|
+
{
|
|
793
|
+
"name": "listener",
|
|
794
|
+
"type": {
|
|
795
|
+
"text": "(this: EventTarget, ev: HTMLElementEventMap[K]) => any"
|
|
796
|
+
}
|
|
797
|
+
},
|
|
798
|
+
{
|
|
799
|
+
"name": "options",
|
|
800
|
+
"optional": true,
|
|
801
|
+
"type": {
|
|
802
|
+
"text": "boolean | AddEventListenerOptions"
|
|
803
|
+
}
|
|
804
|
+
}
|
|
805
|
+
],
|
|
806
|
+
"description": "Utility to add an event listener that is automatically cleaned up when the element is disconnected."
|
|
807
|
+
},
|
|
808
|
+
{
|
|
809
|
+
"kind": "method",
|
|
810
|
+
"name": "listen",
|
|
811
|
+
"return": {
|
|
812
|
+
"type": {
|
|
813
|
+
"text": "() => void"
|
|
814
|
+
}
|
|
815
|
+
},
|
|
816
|
+
"parameters": [
|
|
817
|
+
{
|
|
818
|
+
"name": "target",
|
|
819
|
+
"type": {
|
|
820
|
+
"text": "EventTarget"
|
|
821
|
+
}
|
|
822
|
+
},
|
|
823
|
+
{
|
|
824
|
+
"name": "type",
|
|
825
|
+
"type": {
|
|
826
|
+
"text": "string"
|
|
827
|
+
}
|
|
828
|
+
},
|
|
829
|
+
{
|
|
830
|
+
"name": "listener",
|
|
831
|
+
"type": {
|
|
832
|
+
"text": "EventListenerOrEventListenerObject"
|
|
833
|
+
}
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
"name": "options",
|
|
837
|
+
"optional": true,
|
|
838
|
+
"type": {
|
|
839
|
+
"text": "boolean | AddEventListenerOptions"
|
|
840
|
+
}
|
|
841
|
+
}
|
|
842
|
+
]
|
|
843
|
+
}
|
|
844
|
+
],
|
|
845
|
+
"attributes": [
|
|
846
|
+
{
|
|
847
|
+
"name": "locale",
|
|
848
|
+
"type": {
|
|
849
|
+
"text": "string"
|
|
850
|
+
},
|
|
851
|
+
"default": "''",
|
|
852
|
+
"description": "BCP 47 locale string for formatting and localization. Defaults to inherited document language.",
|
|
853
|
+
"fieldName": "locale"
|
|
854
|
+
}
|
|
855
|
+
],
|
|
856
|
+
"superclass": {
|
|
857
|
+
"name": "LitElement",
|
|
858
|
+
"package": "lit"
|
|
859
|
+
},
|
|
860
|
+
"customElement": true
|
|
861
|
+
}
|
|
862
|
+
],
|
|
863
|
+
"exports": [
|
|
864
|
+
{
|
|
865
|
+
"kind": "js",
|
|
866
|
+
"name": "UIBitElement",
|
|
867
|
+
"declaration": {
|
|
868
|
+
"name": "UIBitElement",
|
|
869
|
+
"module": "../../platform/core/src/element.ts"
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
]
|
|
400
873
|
}
|
|
401
874
|
]
|
|
402
875
|
}
|
|
@@ -48,6 +48,11 @@ export class NgxTextTyping {
|
|
|
48
48
|
this.el.nativeElement.loop = this.loop();
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
|
+
effect(() => {
|
|
52
|
+
if (this.el.nativeElement) {
|
|
53
|
+
this.el.nativeElement.locale = this.locale();
|
|
54
|
+
}
|
|
55
|
+
});
|
|
51
56
|
}
|
|
52
57
|
|
|
53
58
|
readonly typeSpeed = input<number, any>(80, { transform: numberAttribute });
|
|
@@ -57,6 +62,7 @@ export class NgxTextTyping {
|
|
|
57
62
|
readonly typoRate = input<number, any>(0.04, { transform: numberAttribute });
|
|
58
63
|
readonly showCursor = input<boolean, any>(true, { transform: booleanAttribute });
|
|
59
64
|
readonly loop = input<boolean, any>(true, { transform: booleanAttribute });
|
|
65
|
+
readonly locale = input<string, any>('');
|
|
60
66
|
|
|
61
67
|
readonly phraseChange = output<CustomEvent<{ phrase: string, index: number }>>();
|
|
62
68
|
}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
typoRate = undefined,
|
|
11
11
|
showCursor = undefined,
|
|
12
12
|
loop = undefined,
|
|
13
|
+
locale = undefined,
|
|
13
14
|
children
|
|
14
15
|
} = $props<{
|
|
15
16
|
children?: any;
|
|
@@ -20,6 +21,7 @@
|
|
|
20
21
|
typoRate?: number;
|
|
21
22
|
showCursor?: boolean;
|
|
22
23
|
loop?: boolean;
|
|
24
|
+
locale?: string;
|
|
23
25
|
|
|
24
26
|
}>();
|
|
25
27
|
|
|
@@ -47,6 +49,9 @@
|
|
|
47
49
|
if (elementRef && loop !== undefined) {
|
|
48
50
|
elementRef.loop = loop;
|
|
49
51
|
}
|
|
52
|
+
if (elementRef && locale !== undefined) {
|
|
53
|
+
elementRef.locale = locale;
|
|
54
|
+
}
|
|
50
55
|
});
|
|
51
56
|
|
|
52
57
|
</script>
|
|
@@ -11,7 +11,8 @@ export const TextTyping = defineComponent({
|
|
|
11
11
|
pauseBefore: { type: [String, Number, Boolean, Array, Object] as any },
|
|
12
12
|
typoRate: { type: [String, Number, Boolean, Array, Object] as any },
|
|
13
13
|
showCursor: { type: [String, Number, Boolean, Array, Object] as any },
|
|
14
|
-
loop: { type: [String, Number, Boolean, Array, Object] as any }
|
|
14
|
+
loop: { type: [String, Number, Boolean, Array, Object] as any },
|
|
15
|
+
locale: { type: [String, Number, Boolean, Array, Object] as any }
|
|
15
16
|
},
|
|
16
17
|
emits: ['phrase-change'],
|
|
17
18
|
setup(props, { slots, emit }) {
|
package/dist/text-typing.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { UIBitElement } from '@uibit/core';
|
|
2
2
|
/**
|
|
3
3
|
* Cycles through an array of phrases by simulating realistic keystroke
|
|
4
|
+
|
|
5
|
+
* @summary A typewriter effect animation component with looping backspacing features.
|
|
4
6
|
* typing and backspace deletion. Includes subtle speed variance, randomized
|
|
5
7
|
* simulated typos that auto-correct, and a blinking cursor node.
|
|
6
8
|
*
|
|
@@ -18,7 +20,9 @@ import { UIBitElement } from '@uibit/core';
|
|
|
18
20
|
* @cssprop [--uibit-text-typing-cursor-width=0.125rem] - Cursor bar width
|
|
19
21
|
* @cssprop [--uibit-text-typing-cursor-radius=0.0625rem] - Cursor bar border radius
|
|
20
22
|
* @cssprop [--uibit-text-typing-cursor-blink=0.75s] - Cursor blink interval
|
|
21
|
-
|
|
23
|
+
|
|
24
|
+
* @cssstate typing - Active when text is actively typing out.
|
|
25
|
+
* @cssstate deleting - Active when text is actively backspacing.*/
|
|
22
26
|
export declare class TextTyping extends UIBitElement {
|
|
23
27
|
static styles: import("lit").CSSResult;
|
|
24
28
|
private phrases;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-typing.d.ts","sourceRoot":"","sources":["../src/text-typing.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI1D
|
|
1
|
+
{"version":3,"file":"text-typing.d.ts","sourceRoot":"","sources":["../src/text-typing.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;mEAuBmE;AACnE,qBACa,UAAW,SAAQ,YAAY;IAC1C,MAAM,CAAC,MAAM,0BAAU;IAEd,OAAO,CAAC,OAAO,CAAgB;IAExC,iFAAiF;IAC5B,SAAS,SAAM;IACpE,6CAA6C;IACU,WAAW,SAAM;IACxE,sEAAsE;IAChB,UAAU,SAAQ;IACxE,sEAAsE;IACf,WAAW,SAAO;IACzE,sFAAsF;IAClC,QAAQ,SAAQ;IACpE,gCAAgC;IACuB,UAAU,UAAQ;IACzE,qEAAqE;IACxC,IAAI,UAAQ;IAEhC,OAAO,CAAC,QAAQ,CAAM;IAE/B,OAAO,CAAC,MAAM,CAAC,CAAgC;IAC/C,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAM;IAEvB,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QASpC;IAED,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,KAAK;IA6Cb,OAAO,CAAC,iBAAiB;IAWzB,MAAM,oCAQL;CACF;eAEc,UAAU"}
|
package/dist/text-typing.js
CHANGED
|
@@ -10,6 +10,8 @@ import { property, state } from 'lit/decorators.js';
|
|
|
10
10
|
import { styles } from './styles';
|
|
11
11
|
/**
|
|
12
12
|
* Cycles through an array of phrases by simulating realistic keystroke
|
|
13
|
+
|
|
14
|
+
* @summary A typewriter effect animation component with looping backspacing features.
|
|
13
15
|
* typing and backspace deletion. Includes subtle speed variance, randomized
|
|
14
16
|
* simulated typos that auto-correct, and a blinking cursor node.
|
|
15
17
|
*
|
|
@@ -27,7 +29,9 @@ import { styles } from './styles';
|
|
|
27
29
|
* @cssprop [--uibit-text-typing-cursor-width=0.125rem] - Cursor bar width
|
|
28
30
|
* @cssprop [--uibit-text-typing-cursor-radius=0.0625rem] - Cursor bar border radius
|
|
29
31
|
* @cssprop [--uibit-text-typing-cursor-blink=0.75s] - Cursor blink interval
|
|
30
|
-
|
|
32
|
+
|
|
33
|
+
* @cssstate typing - Active when text is actively typing out.
|
|
34
|
+
* @cssstate deleting - Active when text is actively backspacing.*/
|
|
31
35
|
let TextTyping = class TextTyping extends UIBitElement {
|
|
32
36
|
constructor() {
|
|
33
37
|
super(...arguments);
|
package/dist/text-typing.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-typing.js","sourceRoot":"","sources":["../src/text-typing.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,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-typing.js","sourceRoot":"","sources":["../src/text-typing.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uibit/text-typing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Headline text block that cycles through marketing phrases with a realistic typing and deleting animation. Includes speed variance, simulated auto-correcting typos, and a blinking cursor.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"directory": "packages/components/text-typing"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@uibit/core": "0.
|
|
49
|
+
"@uibit/core": "0.2.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@types/node": "^20.19.43",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"tagName": "uibit-text-typing"
|
|
84
84
|
},
|
|
85
85
|
"scripts": {
|
|
86
|
-
"build": "cem analyze --
|
|
87
|
-
"dev": "concurrently \"cem analyze --
|
|
88
|
-
"analyze": "cem analyze --
|
|
86
|
+
"build": "cem analyze --config ../custom-elements-manifest.config.js && uibit-codegen --package . && tsc",
|
|
87
|
+
"dev": "concurrently \"cem analyze --config ../custom-elements-manifest.config.js --watch\" \"tsc --watch\"",
|
|
88
|
+
"analyze": "cem analyze --config ../custom-elements-manifest.config.js",
|
|
89
89
|
"typecheck": "tsc --noEmit"
|
|
90
90
|
}
|
|
91
91
|
}
|