ngx-transforms 0.3.0 → 0.3.2
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 +46 -73
- package/fesm2022/ngx-transforms.mjs +1609 -180
- package/fesm2022/ngx-transforms.mjs.map +1 -1
- package/package.json +7 -6
- package/types/ngx-transforms.d.ts +828 -12
package/README.md
CHANGED
|
@@ -1,101 +1,76 @@
|
|
|
1
1
|
# ngx-transforms
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/ngx-transforms)
|
|
4
|
+
[](https://angular.dev)
|
|
5
|
+
[](#bundle-size)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
> 90 standalone, tree-shakable Angular pipes for text, arrays, math, objects, and more.
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
**[Docs & live playground →](https://ngx-transforms.vercel.app)**
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
npm install ngx-transforms
|
|
13
|
-
```
|
|
12
|
+
---
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
This library requires Angular 17+:
|
|
14
|
+
## Install
|
|
18
15
|
|
|
19
16
|
```bash
|
|
20
|
-
npm install
|
|
17
|
+
npm install ngx-transforms
|
|
21
18
|
```
|
|
22
19
|
|
|
23
|
-
##
|
|
20
|
+
## Use
|
|
24
21
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```typescript
|
|
22
|
+
```ts
|
|
28
23
|
import { Component } from '@angular/core';
|
|
29
|
-
import {
|
|
24
|
+
import { TruncatePipe, TimeAgoPipe } from 'ngx-transforms';
|
|
30
25
|
|
|
31
26
|
@Component({
|
|
32
|
-
selector: 'app-example',
|
|
33
27
|
standalone: true,
|
|
34
|
-
imports: [
|
|
28
|
+
imports: [TruncatePipe, TimeAgoPipe],
|
|
35
29
|
template: `
|
|
36
|
-
<p>{{
|
|
37
|
-
<
|
|
30
|
+
<p>{{ post.body | truncate:80 }}</p>
|
|
31
|
+
<small>{{ post.createdAt | timeAgo }}</small>
|
|
38
32
|
`,
|
|
39
33
|
})
|
|
40
|
-
export class
|
|
34
|
+
export class PostCard {}
|
|
41
35
|
```
|
|
42
36
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
### Text Transformation
|
|
46
|
-
|
|
47
|
-
| Pipe | Template Name | Description | Example |
|
|
48
|
-
|------|--------------|-------------|---------|
|
|
49
|
-
| `CamelCasePipe` | `camelCase` | Converts text to camelCase | `{{ 'hello world' \| camelCase }}` → `helloWorld` |
|
|
50
|
-
| `KebabCasePipe` | `kebabCase` | Converts text to kebab-case | `{{ 'hello world' \| kebabCase }}` → `hello-world` |
|
|
51
|
-
| `SnakeCasePipe` | `snakeCase` | Converts text to snake_case | `{{ 'hello world' \| snakeCase }}` → `hello_world` |
|
|
52
|
-
| `TitleCasePipe` | `titleCase` | Capitalizes first letter of each word | `{{ 'hello world' \| titleCase }}` → `Hello World` |
|
|
53
|
-
| `ReversePipe` | `reverse` | Reverses characters in a string | `{{ 'hello' \| reverse }}` → `olleh` |
|
|
54
|
-
| `TruncatePipe` | `truncate` | Truncates text to a max length | `{{ 'long text here' \| truncate:8 }}` → `long tex...` |
|
|
55
|
-
| `InitialsPipe` | `initials` | Extracts initials from a name | `{{ 'John Doe' \| initials }}` → `JD` |
|
|
56
|
-
| `CountPipe` | `count` | Counts elements in arrays, strings, or object keys | `{{ [1,2,3] \| count }}` → `3` |
|
|
37
|
+
Every pipe is standalone meaning you import only what you use, the rest is tree-shaken.
|
|
57
38
|
|
|
58
|
-
|
|
39
|
+
## What's inside
|
|
59
40
|
|
|
60
|
-
|
|
|
61
|
-
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
41
|
+
| Category | Count | Examples |
|
|
42
|
+
| ------------ | ----- | -------------------------------------------------------------- |
|
|
43
|
+
| **Text** | 27 | `truncate`, `slugify`, `latinize`, `template`, `wrap` |
|
|
44
|
+
| **Array** | 20 | `groupBy`, `orderBy`, `unique`, `chunk`, `intersection` |
|
|
45
|
+
| **Math** | 13 | `min`, `max`, `sum`, `average`, `bytes`, `percentage` |
|
|
46
|
+
| **Object** | 8 | `keys`, `pairs`, `pick`, `omit`, `invert`, `diffObj` |
|
|
47
|
+
| **Boolean** | 8 | `isDefined`, `isString`, `isArray`, `isObject`, `isEmpty` |
|
|
48
|
+
| **Data** | 5 | `count`, `timeAgo`, `jsonPretty`, `device`, `textToSpeech` |
|
|
49
|
+
| **Security** | 5 | `htmlSanitize`, `creditCardMask`, `emailMask`, `ipAddressMask` |
|
|
50
|
+
| **Media** | 4 | `qrCode`, `barcode`, `gravatar`, `colorConvert` |
|
|
65
51
|
|
|
66
|
-
|
|
52
|
+
Full API reference at **[ngx-transforms.vercel.app](https://ngx-transforms.vercel.app)**.
|
|
67
53
|
|
|
68
|
-
|
|
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 }}` → `... --- ...` |
|
|
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' }}` → `rgb(255, 0, 0)` |
|
|
54
|
+
## Bundle size
|
|
76
55
|
|
|
77
|
-
|
|
56
|
+
The complete library includes all 90 pipes, and it is **27.9 KB gzipped** / **23.3 KB brotli**. What you actually ship is much smaller, because Angular's CLI tree-shakes any pipe you don't import.
|
|
78
57
|
|
|
79
|
-
|
|
|
80
|
-
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
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' }}` → `hola` |
|
|
58
|
+
| Measure | Size |
|
|
59
|
+
| -------------------- | -------- |
|
|
60
|
+
| FESM bundle (raw) | 169 KB |
|
|
61
|
+
| FESM bundle (gzip) | 27.9 KB |
|
|
62
|
+
| FESM bundle (brotli) | 23.3 KB |
|
|
86
63
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
| `DeviceTypePipe` | `device` | Detects device type (mobile/tablet/desktop) | `{{ '' \| device }}` → `desktop` |
|
|
92
|
-
| `TextToSpeechPipe` | `textToSpeech` | Speaks text using the Web Speech API | `<button (click)="speak('Hello' \| textToSpeech)">` |
|
|
64
|
+
```ts
|
|
65
|
+
// Only TruncatePipe and its transitive imports lands in your bundle.
|
|
66
|
+
import { TruncatePipe } from 'ngx-transforms';
|
|
67
|
+
```
|
|
93
68
|
|
|
94
|
-
|
|
69
|
+
A handful of pipes pull their own dependencies — `qrCode` (qrcode), `barcode` (jsbarcode), `gravatar` (js-md5), `asciiArt` (ts-ascii-engine). If you skip those, the rest of the library is pure standalone-pipe code.
|
|
95
70
|
|
|
96
|
-
|
|
71
|
+
## Provide all at once
|
|
97
72
|
|
|
98
|
-
```
|
|
73
|
+
```ts
|
|
99
74
|
import { ALL_PIPES } from 'ngx-transforms';
|
|
100
75
|
|
|
101
76
|
bootstrapApplication(AppComponent, {
|
|
@@ -103,12 +78,10 @@ bootstrapApplication(AppComponent, {
|
|
|
103
78
|
});
|
|
104
79
|
```
|
|
105
80
|
|
|
106
|
-
##
|
|
81
|
+
## Compatibility
|
|
107
82
|
|
|
108
|
-
|
|
109
|
-
|----------|---------|
|
|
110
|
-
| 0.0.x | 17+ |
|
|
83
|
+
Supports **Angular 17–21**. Pipes use only the stable standalone-pipe API.
|
|
111
84
|
|
|
112
85
|
## License
|
|
113
86
|
|
|
114
|
-
|
|
87
|
+
MIT © [Mofiro Jean](https://github.com/mofirojean)
|