mh-helps-lib

📦 A lightweight Angular utility library providing custom validators, directives, pipes, services, and dynamic components to simplify form handling and UI development.

📑 Table of Contents

• ✨ Features
• 📦 Installation
• 📑 Library Index
• 🔥 Usage
  • 1️⃣ Dynamic Icon
  • 2️⃣ Lang Pipe
  • 3️⃣ SAR Currency Pipe
  • 4️⃣ IBAN Format Pipe
  • 5️⃣ Dynamic Form Component
  • 6️⃣ Image Optimization
  • 7️⃣ Utilities
• 🖼️ Demo
• 🤝 Contributing
• 📜 License

✨ Features

| ✨ Feature | Description | | ----------------------------------- | -------------------------------------------------------------------- | | ✅ Dynamic Icon Service | Manage and render SVG icons dynamically without importing manually. | | ✅ Dynamic Form Component | Generate forms dynamically based on configuration. | | ✅ Image Optimization Component | Optimized image loading with placeholders. | | ✅ Lang Pipe | Switch text between Arabic (AR) and English (EN) automatically. | | ✅ SAR Currency Pipe | Format numbers into Saudi Riyal currency. | | ✅ IBAN Format Pipe | Format IBAN numbers for better readability. | | ✅ Form Validation Directives | LeadingStart, NumbersOnly, TrimWhiteSpaces for cleaner inputs. | | ✅ Custom Validators | Ready-made validators for forms. | | ✅ Hijri Date Utils | Format Hijri dates easily. | | ✅ Encrypt/Decrypt Utility | Secure text encryption and decryption. | | ✅ Language Service | Manage language switching at runtime. | | ✅ Helpers | Common helper functions like attachBaseUrl. |

📦 Installation

# Using npm
npm install mh-helps-lib

# Or using yarn
yarn add mh-helps-lib

📑 Library Index

| Category          | Available Exports                                                                           |
| ----------------- | ------------------------------------------------------------------------------------------- |
| **📦 Components** | `DynamicIconComponent`, `DynamicFormComponent`, `ImageOptimizationComponent`                |
| **🧩 Directives** | `LeadingStartDirective`, `NumbersOnlyDirective`, `TrimWhiteSpacesDirective`                 |
| **🔄 Pipes**      | `SarCurrencyPipe`, `LangPipe`, `IbanFormatPipe`                                             |
| **🛠️ Services**  | `FullyValidatorsStyleService`, `ImageOptimizationService`, `LanguageService`, `IconService` |
| **📑 Interfaces** | `IconName`, `Icon` (from `icon.interface`)                                                  |
| **🧮 Models**     | `Patterns`                                                                                  |
| **🧾 Validators** | `CustomValidators`                                                                          |
| **⚡ Utils**       | `formatHijriDate`, `EncryptDecryptUtility`, `helpers`                                       |


🔥 Usage

1️⃣ Dynamic Icon Service & Component

import { DynamicIconComponent } from 'mh-helps-lib';
<dynamic-icon iconName="maps"></dynamic-icon>
Note: Add file assets/data/icons.constants.ts exporting all SVGs.

2️⃣ Lang Pipe
<p>{{ user | lang:'name' }}</p>
If currentLang = 'ar' → user.nameAr
If currentLang = 'en' → user.nameEn

3️⃣ SAR Currency Pipe
<p [innerHTML]="2000 | sarCurrency:'text'"></p>   <!-- outputs text symbol -->
<p [innerHTML]="1500 | sarCurrency:'svg':'#0a84ff'"></p> <!-- outputs SVG -->

4️⃣ IBAN Format Pipe
<p>{{ 'SA4420000001234567891234' | ibanFormat }}</p>

5️⃣ Dynamic Form Component
<app-dynamic-form-input 
  [label]="'password'" 
  [controlName]="'password'" 
  [inputType]="'input'" 
  [type]="'password'" 
  [parentFormGroupValue]="loginForm" 
  [placeholder]="'password'" 
  [isRequired]="true"
  [isSubmitted]="formSubmitted" />

6️⃣ Image Optimization Component
<image-optimization
[imageUrl]="'/assets/images/profile.png'"
[width]="200"
[height]="200"
[alt]="'Profile Image'"
[placeholder]="'/assets/images/general/placeholder.png'"
></image-optimization>

7️⃣ Utils
import { formatHijriDate } from 'mh-helps-lib';
console.log(formatHijriDate('14461026')); 
// Output: 26/10/1446

Encryption / Decryption
import { EncryptDecryptUtility } from 'mh-helps-lib';
const encrypted = EncryptDecryptUtility.encrypt('my-secret');
const decrypted = EncryptDecryptUtility.decrypt(encrypted);

🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to open a PR or Issue.