ngx-transforms 0.2.0 → 0.3.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.
Files changed (5) hide show
  1. package/README.md +33 -78
  2. package/fesm2022/ngx-transforms.mjs +1961 -2
  3. package/fesm2022/ngx-transforms.mjs.map +1 -1
  4. package/package.json +3 -3
  5. package/types/ngx-transforms.d.ts +1099 -1
package/README.md CHANGED
@@ -1,101 +1,58 @@
1
1
  # ngx-transforms
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/ngx-transforms.svg)](https://www.npmjs.com/package/ngx-transforms)
4
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
- [![Angular](https://img.shields.io/badge/Angular-21+-dd0031.svg)](https://angular.dev)
3
+ [![npm](https://img.shields.io/npm/v/ngx-transforms.svg)](https://www.npmjs.com/package/ngx-transforms)
4
+ [![Angular](https://img.shields.io/badge/Angular-17+-dd0031.svg)](https://angular.dev)
5
+ [![License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6
6
 
7
- A collection of **standalone Angular pipes** for common data transformations such as text formatting, masking, encoding, sanitization, and more.
7
+ > 86+ standalone, tree-shakable Angular pipes for text, arrays, math, objects, and more.
8
8
 
9
- ## Installation
9
+ **[Docs & live playground →](https://ngx-transforms.vercel.app)**
10
10
 
11
- ```bash
12
- npm install ngx-transforms
13
- ```
14
-
15
- ### Peer Dependencies
11
+ ---
16
12
 
17
- This library requires Angular 17+:
13
+ ## Install
18
14
 
19
15
  ```bash
20
- npm install @angular/core @angular/platform-browser
16
+ npm install ngx-transforms
21
17
  ```
22
18
 
23
- ## Quick Start
24
-
25
- All pipes are **standalone** and are tree-shakable, so import only what you need directly into your component:
19
+ ## Use
26
20
 
27
- ```typescript
21
+ ```ts
28
22
  import { Component } from '@angular/core';
29
- import { CamelCasePipe, ReversePipe } from 'ngx-transforms';
23
+ import { TruncatePipe, TimeAgoPipePipe } from 'ngx-transforms';
30
24
 
31
25
  @Component({
32
- selector: 'app-example',
33
26
  standalone: true,
34
- imports: [CamelCasePipe, ReversePipe],
27
+ imports: [TruncatePipe, TimeAgoPipePipe],
35
28
  template: `
36
- <p>{{ 'hello world' | camelCase }}</p> <!-- helloWorld -->
37
- <p>{{ 'angular' | reverse }}</p> <!-- ralunga -->
29
+ <p>{{ post.body | truncate:80 }}</p>
30
+ <small>{{ post.createdAt | timeAgo }}</small>
38
31
  `,
39
32
  })
40
- export class ExampleComponent {}
33
+ export class PostCard {}
41
34
  ```
42
35
 
43
- ## Available Pipes
44
-
45
- ### Text Transformation
46
-
47
- | Pipe | Template Name | Description | Example |
48
- |------|--------------|-------------|---------|
49
- | `CamelCasePipe` | `camelCase` | Converts text to camelCase | `{{ 'hello world' \| camelCase }}` &rarr; `helloWorld` |
50
- | `KebabCasePipe` | `kebabCase` | Converts text to kebab-case | `{{ 'hello world' \| kebabCase }}` &rarr; `hello-world` |
51
- | `SnakeCasePipe` | `snakeCase` | Converts text to snake_case | `{{ 'hello world' \| snakeCase }}` &rarr; `hello_world` |
52
- | `TitleCasePipe` | `titleCase` | Capitalizes first letter of each word | `{{ 'hello world' \| titleCase }}` &rarr; `Hello World` |
53
- | `ReversePipe` | `reverse` | Reverses characters in a string | `{{ 'hello' \| reverse }}` &rarr; `olleh` |
54
- | `TruncatePipe` | `truncate` | Truncates text to a max length | `{{ 'long text here' \| truncate:8 }}` &rarr; `long tex...` |
55
- | `InitialsPipe` | `initials` | Extracts initials from a name | `{{ 'John Doe' \| initials }}` &rarr; `JD` |
56
- | `CountPipe` | `count` | Counts elements in arrays, strings, or object keys | `{{ [1,2,3] \| count }}` &rarr; `3` |
57
-
58
- ### Data Masking
59
-
60
- | Pipe | Template Name | Description | Example |
61
- |------|--------------|-------------|---------|
62
- | `CreditCardMaskPipe` | `creditCardMask` | Masks all but last 4 digits | `{{ '4111111111111111' \| creditCardMask }}` &rarr; `************1111` |
63
- | `EmailMaskPipe` | `emailMask` | Masks the local part of an email | `{{ 'john@example.com' \| emailMask }}` &rarr; `j***n@example.com` |
64
- | `IpAddressMaskPipe` | `ipAddressMask` | Masks last two octets of IPv4 | `{{ '192.168.1.1' \| ipAddressMask }}` &rarr; `192.168.*.*` |
65
-
66
- ### Encoding & Generation
67
-
68
- | Pipe | Template Name | Description | Example |
69
- |------|--------------|-------------|---------|
70
- | `QrCodePipe` | `qrCode` | Generates a QR code data URL | `<img [src]="'data' \| qrCode \| async" />` |
71
- | `BarcodePipe` | `barcode` | Generates a barcode (SVG/img/canvas) | `<div [innerHTML]="'123' \| barcode \| async"></div>` |
72
- | `MorseCodePipe` | `morseCode` | Converts text to Morse code | `{{ 'SOS' \| morseCode }}` &rarr; `... --- ...` |
73
- | `AsciiArtPipe` | `asciiArt` | Converts text to ASCII art | `{{ 'HI' \| asciiArt }}` |
74
- | `GravatarPipe` | `gravatar` | Generates Gravatar URL from email | `<img [src]="email \| gravatar:100" />` |
75
- | `ColorConvertPipe` | `colorConvert` | Converts colors between HEX, RGB, RGBA | `{{ '#FF0000' \| colorConvert:'rgb' }}` &rarr; `rgb(255, 0, 0)` |
76
-
77
- ### HTML & Security
78
-
79
- | Pipe | Template Name | Description | Example |
80
- |------|--------------|-------------|---------|
81
- | `HtmlSanitizePipe` | `htmlSanitize` | Sanitizes HTML, removing unsafe elements | `<div [innerHTML]="html \| htmlSanitize"></div>` |
82
- | `HtmlEscapePipe` | `htmlEscape` | Escapes HTML special characters | `{{ '<b>bold</b>' \| htmlEscape }}` &rarr; `&lt;b&gt;bold&lt;/b&gt;` |
83
- | `HighlightPipe` | `highlight` | Highlights search term matches in text | `<span [innerHTML]="text \| highlight:'term'"></span>` |
84
- | `JsonPrettyPipe` | `jsonPretty` | Formats JSON with syntax highlighting | `<pre [innerHTML]="data \| jsonPretty"></pre>` |
85
- | `ReplacePipe` | `replace` | Replaces or highlights text by pattern | `{{ 'hello' \| replace:'ello':'ola' }}` &rarr; `hola` |
36
+ Every pipe is standalone — import only what you use, the rest is tree-shaken.
86
37
 
87
- ### Device & Browser
38
+ ## What's inside
88
39
 
89
- | Pipe | Template Name | Description | Example |
90
- |------|--------------|-------------|---------|
91
- | `DeviceTypePipe` | `device` | Detects device type (mobile/tablet/desktop) | `{{ '' \| device }}` &rarr; `desktop` |
92
- | `TextToSpeechPipe` | `textToSpeech` | Speaks text using the Web Speech API | `<button (click)="speak('Hello' \| textToSpeech)">` |
40
+ | Category | Count | Examples |
41
+ | ------------ | ----- | -------------------------------------------------------------- |
42
+ | **Text** | 27 | `truncate`, `slugify`, `latinize`, `template`, `wrap` |
43
+ | **Array** | 20 | `groupBy`, `orderBy`, `unique`, `chunk`, `intersection` |
44
+ | **Math** | 13 | `min`, `max`, `sum`, `average`, `bytes`, `percentage` |
45
+ | **Object** | 8 | `keys`, `pairs`, `pick`, `omit`, `invert`, `diffObj` |
46
+ | **Data** | 5 | `count`, `timeAgo`, `jsonPretty`, `device`, `textToSpeech` |
47
+ | **Security** | 5 | `htmlSanitize`, `creditCardMask`, `emailMask`, `ipAddressMask` |
48
+ | **Media** | 4 | `qrCode`, `barcode`, `gravatar`, `colorConvert` |
49
+ | **Boolean** | 4 | `isDefined`, `isNull`, `isString`, `isNumber` |
93
50
 
94
- ## Provide All Pipes
51
+ Full API reference at **[ngx-transforms.vercel.app](https://ngx-transforms.vercel.app)**.
95
52
 
96
- To make all pipes available via dependency injection:
53
+ ## Provide all at once
97
54
 
98
- ```typescript
55
+ ```ts
99
56
  import { ALL_PIPES } from 'ngx-transforms';
100
57
 
101
58
  bootstrapApplication(AppComponent, {
@@ -103,12 +60,10 @@ bootstrapApplication(AppComponent, {
103
60
  });
104
61
  ```
105
62
 
106
- ## Angular Compatibility
63
+ ## Compatibility
107
64
 
108
- | ngx-transforms | Angular |
109
- |----------|---------|
110
- | 0.0.x | 17+ |
65
+ Supports **Angular 17–21**. Pipes use only the stable standalone-pipe API.
111
66
 
112
67
  ## License
113
68
 
114
- [MIT](./LICENSE) - Mofiro Jean
69
+ MIT © [Mofiro Jean](https://github.com/mofirojean)