feat: add initials pipe with documentation and demo

Author: love1024

README.md

@@ -97,7 +97,7 @@ export class UserService {
 | **Directives** | `auto-focus`, `click-outside`, `click-throttle`, `hover-class`, `infinite-scroll`, `numbers-only`, `press-enter`, `repeat`, `resized`, `shortcut`, `typed-template`, `visibility-change` |
 | **Guards** | `param`, `query-param`, `unsaved-changes` |
 | **Interceptors** | `base-url`, `cache`, `correlation-id`, `encryption`, `jwt`, `performance`, `timeout` |
-| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |
+| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `initials`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |
 | **Rxjs** | `backoff-retry`, `catch-error-with-fallback`, `data-polling`, `debug`, `live-search`, `loading-status` |
 | **Services** | `cache`, `clipboard`, `cookie`, `device`, `event`, `jwt`, `logger`, `network-status`, `shortcut`, `storage` |
 | **Signals** | `breakpoint-matcher`, `debounced-signal`, `deep-computed`, `event-signal`, `interval-signal`, `route-param-signal`, `route-query-param-signal`, `router-event-signal`, `state-signal`, `storage-signal`, `throttled-signal`, `websocket-signal` |

projects/ngx-oneforall-docs/src/app/categories/getting-started/pages/introduction/index.md

@@ -52,7 +52,7 @@ Fully typed APIs and consistent behavior make these utilities predictable and ea
 | **Directives** | `auto-focus`, `click-outside`, `click-throttle`, `hover-class`, `infinite-scroll`, `numbers-only`, `press-enter`, `repeat`, `resized`, `shortcut`, `typed-template`, `visibility-change` |
 | **Guards** | `param`, `query-param`, `unsaved-changes` |
 | **Interceptors** | `base-url`, `cache`, `correlation-id`, `encryption`, `jwt`, `performance`, `timeout` |
-| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |
+| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `initials`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |
 | **Rxjs** | `backoff-retry`, `catch-error-with-fallback`, `data-polling`, `debug`, `live-search`, `loading-status` |
 | **Services** | `cache`, `clipboard`, `cookie`, `device`, `event`, `jwt`, `logger`, `network-status`, `shortcut`, `storage` |
 | **Signals** | `breakpoint-matcher`, `debounced-signal`, `deep-computed`, `event-signal`, `interval-signal`, `route-param-signal`, `route-query-param-signal`, `router-event-signal`, `state-signal`, `storage-signal`, `throttled-signal`, `websocket-signal` |

projects/ngx-oneforall-docs/src/app/categories/pipes/pages/initials/demo/initials-demo.component.scss

@@ -0,0 +1,53 @@
+.demo-container {
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: #fafbfc;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    font-family: Arial, sans-serif;
+}
+h2 {
+    margin-bottom: 1rem;
+    color: #2c3e50;
+}
+.demo-section {
+    margin-top: 2rem;
+}
+.demo-section h3 {
+    margin-bottom: 0.5rem;
+    color: #34495e;
+}
+.result {
+    background: #e8f5e9;
+    padding: 0.75rem 1rem;
+    border-radius: 4px;
+    margin-top: 0.5rem;
+    font-family: 'Fira Mono', monospace;
+    font-size: 1.05em;
+    color: #1b5e20;
+    display: flex;
+    align-items: center;
+}
+code {
+    background: #f5f2f0;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.95em;
+    color: #c7254e;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  background-color: #3f51b5;
+  color: white;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  margin-right: 15px;
+  font-family: Arial, sans-serif;
+  flex-shrink: 0;
+}

projects/ngx-oneforall-docs/src/app/categories/pipes/pages/initials/demo/initials-demo.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { InitialsPipe } from 'ngx-oneforall/pipes/initials';
+
+@Component({
+  selector: 'lib-initials-demo',
+  standalone: true,
+  imports: [InitialsPipe],
+  template: `
+    <div class="demo-container">
+      <h2>Initials Pipe Demo</h2>
+
+      <div class="demo-section">
+        <h3>Full Name (Default: 2)</h3>
+        <code>'John Doe' | initials</code>
+        <div class="result">
+          <div class="avatar">{{ 'John Doe' | initials }}</div>
+          <span>Output: {{ 'John Doe' | initials }}</span>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Single Name</h3>
+        <code>'John' | initials</code>
+        <div class="result">
+          <div class="avatar">{{ 'John' | initials }}</div>
+          <span>Output: {{ 'John' | initials }}</span>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Three Names (Limit 3)</h3>
+        <code>'John Middle Doe' | initials:3</code>
+        <div class="result">
+          <div class="avatar">{{ 'John Middle Doe' | initials: 3 }}</div>
+          <span>Output: {{ 'John Middle Doe' | initials: 3 }}</span>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>LowerCase Input</h3>
+        <code>'jane doe' | initials</code>
+        <div class="result">
+          <div class="avatar">{{ 'jane doe' | initials }}</div>
+          <span>Output: {{ 'jane doe' | initials }}</span>
+        </div>
+      </div>
+    </div>
+  `,
+  styleUrl: './initials-demo.component.scss',
+})
+export class InitialsDemoComponent {}

projects/ngx-oneforall-docs/src/app/categories/pipes/pages/initials/index.md

@@ -0,0 +1,44 @@
+![Bundle Size](https://deno.bundlejs.com/badge?q=ngx-oneforall/pipes/initials&treeshake=[*]&config={"esbuild":{"external":["rxjs","@angular/core","@angular/common","@angular/forms","@angular/router"]}})
+
+The `initials` pipe transforms a name or string into its initials. It handles single or multiple words and allows customizing the number of initials returned.
+
+### Usage
+
+Import the `InitialsPipe` from `ngx-oneforall/pipes/initials`.
+
+```typescript
+import { InitialsPipe } from 'ngx-oneforall/pipes/initials';
+```
+
+### Examples
+
+#### Basic Usage
+
+```html file="./snippets.html"#L2-L3
+```
+
+#### Single Name
+
+```html file="./snippets.html"#L6-L7
+```
+
+#### Custom Limit (1 Initial)
+
+```html file="./snippets.html"#L10-L11
+```
+
+#### Custom Limit (3 Initials)
+
+```html file="./snippets.html"#L14-L15
+```
+
+### Parameters
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | The input string to transform |
+| `count` | `number` | `2` | The maximum number of initials to return |
+
+### Live Demo
+
+{{ NgDocActions.demo("InitialsDemoComponent") }}

projects/ngx-oneforall-docs/src/app/categories/pipes/pages/initials/ng-doc.page.ts

@@ -0,0 +1,14 @@
+import { NgDocPage } from '@ng-doc/core';
+import PipesCategory from '../../ng-doc.category';
+import { InitialsDemoComponent } from './demo/initials-demo.component';
+
+const Initials: NgDocPage = {
+  title: 'Initials',
+  mdFile: './index.md',
+  category: PipesCategory,
+  demos: {
+    InitialsDemoComponent,
+  },
+};
+
+export default Initials;

projects/ngx-oneforall-docs/src/app/categories/pipes/pages/initials/snippets.html

@@ -0,0 +1,15 @@
+<!-- snippet: basic-usage -->
+<p>{{ 'John Doe' | initials }}</p>
+<!-- Output: JD -->
+
+<!-- snippet: single-name -->
+<p>{{ 'John' | initials }}</p>
+<!-- Output: JO -->
+
+<!-- snippet: limit-1 -->
+<p>{{ 'John Doe' | initials: 1 }}</p>
+<!-- Output: J -->
+
+<!-- snippet: limit-3 -->
+<p>{{ 'John Middle Doe' | initials: 3 }}</p>
+<!-- Output: JMD -->

projects/ngx-oneforall-lib/README.md

@@ -97,7 +97,7 @@ export class UserService {
 | **Directives** | `auto-focus`, `click-outside`, `click-throttle`, `hover-class`, `infinite-scroll`, `numbers-only`, `press-enter`, `repeat`, `resized`, `shortcut`, `typed-template`, `visibility-change` |
 | **Guards** | `param`, `query-param`, `unsaved-changes` |
 | **Interceptors** | `base-url`, `cache`, `correlation-id`, `encryption`, `jwt`, `performance`, `timeout` |
-| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |
+| **Pipes** | `bytes`, `call`, `first-error-key`, `highlight-search`, `initials`, `pluralize`, `range`, `safe-html`, `time-ago`, `truncate` |
 | **Rxjs** | `backoff-retry`, `catch-error-with-fallback`, `data-polling`, `debug`, `live-search`, `loading-status` |
 | **Services** | `cache`, `clipboard`, `cookie`, `device`, `event`, `jwt`, `logger`, `network-status`, `shortcut`, `storage` |
 | **Signals** | `breakpoint-matcher`, `debounced-signal`, `deep-computed`, `event-signal`, `interval-signal`, `route-param-signal`, `route-query-param-signal`, `router-event-signal`, `state-signal`, `storage-signal`, `throttled-signal`, `websocket-signal` |

projects/ngx-oneforall-lib/pipes/initials/ng-package.json

@@ -0,0 +1 @@
+{ "lib": { "entryFile": "src/public_api.ts" } }

projects/ngx-oneforall-lib/pipes/initials/src/initials.pipe.spec.ts

@@ -0,0 +1,38 @@
+import { InitialsPipe } from './initials.pipe';
+
+describe('InitialsPipe', () => {
+  let pipe: InitialsPipe;
+
+  beforeEach(() => {
+    pipe = new InitialsPipe();
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return empty string for null/undefined/empty input', () => {
+    expect(pipe.transform(null)).toBe('');
+    expect(pipe.transform(undefined)).toBe('');
+    expect(pipe.transform('')).toBe('');
+  });
+
+  it('should extract initials from multi-word string', () => {
+    expect(pipe.transform('John Doe')).toBe('JD');
+    expect(pipe.transform('John Middle Doe')).toBe('JM'); // Default limit 2
+  });
+
+  it('should respect the limit param', () => {
+    expect(pipe.transform('John Middle Doe', 3)).toBe('JMD');
+    expect(pipe.transform('John Doe', 1)).toBe('J');
+  });
+
+  it('should handle single word string', () => {
+    expect(pipe.transform('John')).toBe('JO'); // Takes first 2 chars by default
+    expect(pipe.transform('John', 1)).toBe('J');
+  });
+
+  it('should handle extra whitespace', () => {
+    expect(pipe.transform('  John   Doe  ')).toBe('JD');
+  });
+});