Skip to content

Commit 8f9f44c

Browse files
shiv-sourceshiv-source
committed
feat: created ngx-typed
BREAKING CHANGE: created ngx-typed for typed js in angular for SPA and SSR applications
0 parents commit 8f9f44c

40 files changed

+10522
-0
lines changed

‎.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎.github/workflows/publiash.yaml‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
name: Publish Package
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
paths:
8+
- "projects/ngx-typedjs/**"
9+
- "!projects/ngx-typedjs/README.md"
10+
11+
jobs:
12+
build:
13+
runs-on: ubuntu-latest
14+
strategy:
15+
matrix:
16+
node-version: [18.x]
17+
18+
steps:
19+
- name: Checkout Repository
20+
uses: actions/checkout@v3
21+
22+
- name: Use PNPM
23+
uses: pnpm/action-setup@v2
24+
with:
25+
version: 8
26+
- name: Use Node.js ${{ matrix.node-version }}
27+
uses: actions/setup-node@v3
28+
with:
29+
node-version: ${{ matrix.node-version }}
30+
cache: "pnpm"
31+
32+
- name: Install Dependencies
33+
run: pnpm install
34+
35+
- name: Build lib
36+
run: pnpm build:lib
37+
38+
- name: Build showcase
39+
run: pnpm build:showcase
40+
41+
publish:
42+
needs: build
43+
runs-on: ubuntu-latest
44+
env:
45+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
46+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
47+
strategy:
48+
matrix:
49+
node-version: [18.x]
50+
permissions:
51+
contents: write # to be able to publish a GitHub release
52+
issues: write # to be able to comment on released issues
53+
pull-requests: write # to be able to comment on released pull requests
54+
id-token: write # to enable use of OIDC for npm provenance
55+
packages: write
56+
57+
steps:
58+
- name: Checkout Repository
59+
uses: actions/checkout@v3
60+
61+
- name: Use PNPM
62+
uses: pnpm/action-setup@v2
63+
with:
64+
version: 8
65+
- name: Use Node.js ${{ matrix.node-version }}
66+
uses: actions/setup-node@v3
67+
with:
68+
node-version: ${{ matrix.node-version }}
69+
cache: "pnpm"
70+
71+
- name: Install Dependencies
72+
run: pnpm install
73+
74+
- name: Publish to GitHub & Github Package Registry
75+
run: |
76+
pnpm build:lib
77+
npx semantic-release@22.0.12

‎.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18.18.0

‎.vscode/extensions.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3+
"recommendations": ["angular.ng-template"]
4+
}

‎.vscode/launch.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3+
"version": "0.2.0",
4+
"configurations": [
5+
{
6+
"name": "ng serve",
7+
"type": "chrome",
8+
"request": "launch",
9+
"preLaunchTask": "npm: start",
10+
"url": "http://localhost:4200/"
11+
},
12+
{
13+
"name": "ng test",
14+
"type": "chrome",
15+
"request": "launch",
16+
"preLaunchTask": "npm: test",
17+
"url": "http://localhost:9876/debug.html"
18+
}
19+
]
20+
}

‎.vscode/settings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"cSpell.words": [
3+
"Typedjs"
4+
]
5+
}

‎.vscode/tasks.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3+
"version": "2.0.0",
4+
"tasks": [
5+
{
6+
"type": "npm",
7+
"script": "start",
8+
"isBackground": true,
9+
"problemMatcher": {
10+
"owner": "typescript",
11+
"pattern": "$tsc",
12+
"background": {
13+
"activeOnStart": true,
14+
"beginsPattern": {
15+
"regexp": "(.*?)"
16+
},
17+
"endsPattern": {
18+
"regexp": "bundle generation complete"
19+
}
20+
}
21+
}
22+
},
23+
{
24+
"type": "npm",
25+
"script": "test",
26+
"isBackground": true,
27+
"problemMatcher": {
28+
"owner": "typescript",
29+
"pattern": "$tsc",
30+
"background": {
31+
"activeOnStart": true,
32+
"beginsPattern": {
33+
"regexp": "(.*?)"
34+
},
35+
"endsPattern": {
36+
"regexp": "bundle generation complete"
37+
}
38+
}
39+
}
40+
}
41+
]
42+
}

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Shiv Kumar
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# ngx-typed2
2+
3+
![NPM Version](https://img.shields.io/npm/v/ngx-typed2.svg?style=flat)
4+
![NPM Downloads](https://img.shields.io/npm/dm/ngx-typed2.svg)
5+
![GitHub release](https://img.shields.io/github/release/shiv-source/ngx-typed2)
6+
![License](https://img.shields.io/github/license/shiv-source/ngx-typed2)
7+
[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/shiv-source/ngx-typed2)](https://github.com/shiv-source/ngx-typed2/pulls)
8+
9+
ngx-typed2 is an Angular library designed to seamlessly integrate Typed.js functionalities into Angular applications, compatible with both Single Page Applications (SPA) and Server-Side Rendering (SSR)
10+
11+
## Installation
12+
13+
You can install ngx-typed2 via npm:
14+
15+
```bash
16+
npm install ngx-typed2
17+
```
18+
19+
You can install ngx-typed2 via yarn:
20+
21+
```bash
22+
yarn add ngx-typed2
23+
```
24+
25+
26+
You can install ngx-typed2 via pnpm:
27+
28+
```bash
29+
pnpm add ngx-typed2
30+
```
31+
32+
## Usage
33+
34+
### Import the Module
35+
36+
Import the `NgxTypedJsModule` into your Angular module:
37+
38+
```typescript
39+
import { NgxTypedJsModule } from 'ngx-typed2';
40+
41+
@NgModule({
42+
imports: [
43+
NgxTypedJsModule
44+
]
45+
})
46+
export class AppModule { }
47+
```
48+
49+
### Use in the Component
50+
51+
Use the `ngx-typed2` component in your Angular templates:
52+
53+
```html
54+
<ngx-typed2
55+
[strings]="['Hello', 'World']"
56+
typeSpeed="50"
57+
backSpeed="30"
58+
[loop]="false"
59+
[showCursor]="true"
60+
cursorChar="|"
61+
[autoInsertCss]="true"
62+
></ngx-typed2>
63+
```
64+
65+
### Available Inputs
66+
67+
| Input | Type | Default | Description |
68+
|----------------------|--------------|-------------|------------------------------------------------------|
69+
| strings | string[] | [] | Array of strings to be typed out sequentially. |
70+
| stringsElement | string | undefined | String element to be typed out. |
71+
| typeSpeed | number | 100 | Typing speed (in milliseconds per character). |
72+
| startDelay | number | undefined | Delay before typing starts (in milliseconds). |
73+
| backSpeed | number | 100 | Backspacing speed (in milliseconds per character). |
74+
| smartBackspace | boolean | undefined | Enable smart backspacing for natural typing effects. |
75+
| shuffle | boolean | undefined | Enable random string selection. |
76+
| backDelay | number | 500 | Delay between characters during backspacing. |
77+
| fadeOut | boolean | undefined | Enable fade-out effect. |
78+
| fadeOutClass | string | undefined | CSS class for fade-out effect. |
79+
| fadeOutDelay | number | 500 | Delay before fade-out (in milliseconds). |
80+
| loop | boolean | true | Control looping of typing animation. |
81+
| loopCount | number | undefined | Specify the number of loop counts. |
82+
| showCursor | boolean | undefined | Toggle cursor visibility. |
83+
| cursorChar | string | undefined | Customize cursor appearance. |
84+
| autoInsertCss | boolean | undefined | Automatically insert Typed.js CSS. |
85+
| attr | string | undefined | Additional attributes. |
86+
| bindInputFocusEvents | boolean | undefined | Bind input focus events. |
87+
| contentType | string | undefined | Specify content type (e.g., 'html', 'text'). |
88+
| cursorColor | string | undefined | Customize cursor color. |
89+
| ngClass | string | undefined | Apply custom classes. |
90+
91+
92+
### Available Outputs
93+
94+
95+
| Output | Event Emitted Data | Description |
96+
|-------------------------|-------------------------------------------------|----------------------------------------------------------|
97+
| onBeginEvent | Typed | Triggered when typing begins. |
98+
| onCompleteEvent | Typed | Triggered when typing completes. |
99+
| preStringTypedEvent | { arrayPos: number, self: Typed } | Triggered before a string is typed. |
100+
| onStringTypedEvent | { arrayPos: number, self: Typed } | Triggered after a string is typed. |
101+
| onLastStringBackspacedEvent | Typed | Triggered when the last string is backspaced. |
102+
| onTypingPausedEvent | { arrayPos: number, self: Typed } | Triggered when typing is paused. |
103+
| onTypingResumedEvent | { arrayPos: number, self: Typed } | Triggered when typing resumes after being paused. |
104+
| onResetEvent | Typed | Triggered when typing is reset. |
105+
| onStopEvent | { arrayPos: number, self: Typed } | Triggered when typing is stopped. |
106+
| onStartEvent | { arrayPos: number, self: Typed } | Triggered when typing starts for a particular string. |
107+
| onDestroyEvent | Typed | Triggered when the ngx-typed2 instance is destroyed. |
108+
109+
110+
### Available Methods
111+
112+
| Method | Description |
113+
|-----------|---------------------------------------------------|
114+
| start() | Initiates the typing animation. |
115+
| stop() | Pauses the typing animation. |
116+
| reset() | Resets the typing animation to its initial state. |
117+
| toggle() | Toggles between starting and stopping the typing animation. |
118+
| destroy() | Stops the typing animation and cleans up any resources used. |
119+
120+
121+
## License
122+
123+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
124+
125+
126+
## Contact
127+
128+
- **Author:** Shiv Kumar
129+
- **Website:** [https://shivkumar.me](https://shivkumar.me)
130+
- **Email:** [hello@shivkumar.me](mailto:hello@shivkumar.me)
131+
- **Issue Tracker:** [GitHub Issues](https://github.com/shiv-source/ngx-typed2/issues)

0 commit comments

Comments
 (0)