@tejaskedare/search-highlight-pipe 1.0.1 → 1.0.3

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.
Files changed (2) hide show
  1. package/README.md +69 -34
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,63 +1,98 @@
1
- # TextUtils
1
+ # 🔍 Angular Search Highlight Pipe
2
2
 
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
3
+ A lightweight Angular pipe to highlight search text dynamically in UI.
4
4
 
5
- ## Code scaffolding
5
+ ---
6
6
 
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
7
+ ## 📦 Installation
8
8
 
9
9
  ```bash
10
- ng generate component component-name
10
+ npm install @tejaskedare/search-highlight-pipe
11
11
  ```
12
12
 
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
13
+ ---
14
14
 
15
- ```bash
16
- ng generate --help
15
+ ## 🚀 Usage
16
+
17
+ ### 1. Import (Standalone)
18
+
19
+ ```ts
20
+ import { SearchHighlightPipe } from '@tejaskedare/search-highlight-pipe';
21
+
22
+ @Component({
23
+ standalone: true,
24
+ imports: [SearchHighlightPipe],
25
+ })
26
+ export class AppComponent {}
17
27
  ```
18
28
 
19
- ## Building
29
+ ---
20
30
 
21
- To build the library, run:
31
+ ### 2. Use in Template
22
32
 
23
- ```bash
24
- ng build text-utils
33
+ ```html
34
+ <div [innerHTML]="text | searchHighlight: searchTerm"></div>
25
35
  ```
26
36
 
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
37
+ ---
28
38
 
29
- ### Publishing the Library
39
+ ## 🎨 Styling
30
40
 
31
- Once the project is built, you can publish your library by following these steps:
41
+ ```css
42
+ .highlight {
43
+ background-color: yellow;
44
+ font-weight: bold;
45
+ }
46
+ ```
32
47
 
33
- 1. Navigate to the `dist` directory:
34
- ```bash
35
- cd dist/text-utils
36
- ```
48
+ ---
37
49
 
38
- 2. Run the `npm publish` command to publish your library to the npm registry:
39
- ```bash
40
- npm publish
41
- ```
50
+ ## ⚙️ Features
42
51
 
43
- ## Running unit tests
52
+ * Highlights matching text dynamically
53
+ * Case-insensitive search
54
+ * Safe HTML rendering using Angular DomSanitizer
55
+ * Supports custom CSS class
44
56
 
45
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
57
+ ---
46
58
 
47
- ```bash
48
- ng test
59
+ ## 🔧 Parameters
60
+
61
+ | Parameter | Type | Description |
62
+ | ---------- | ------ | ------------------------- |
63
+ | value | string | Original text |
64
+ | searchText | string | Text to highlight |
65
+ | className | string | (Optional) CSS class name |
66
+
67
+ ---
68
+
69
+ ## 💡 Example
70
+
71
+ ```ts
72
+ text = "Angular makes development easier";
73
+ searchTerm = "angular";
49
74
  ```
50
75
 
51
- ## Running end-to-end tests
76
+ 👉 Output:
52
77
 
53
- For end-to-end (e2e) testing, run:
78
+ * "Angular" will be highlighted
79
+
80
+ ---
81
+
82
+ ## 📁 Package
54
83
 
55
- ```bash
56
- ng e2e
57
84
  ```
85
+ @tejaskedare/search-highlight-pipe
86
+ ```
87
+
88
+ ---
89
+
90
+ ## 👨‍💻 Author
91
+
92
+ Tejas Kedare
58
93
 
59
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
94
+ ---
60
95
 
61
- ## Additional Resources
96
+ ## 📜 License
62
97
 
63
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
98
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tejaskedare/search-highlight-pipe",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Reusable Angular pipes like search highlight, truncate, mask",
5
5
  "author": "Tejas Kedare",
6
6
  "license": "MIT",