rm-image-slider 21.0.0 → 22.0.0

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 (7) hide show
  1. package/CHANGELOG.md +71 -0
  2. package/LICENSE +21 -21
  3. package/README.md +432 -89
  4. package/fesm2022/rm-image-slider.mjs +976 -976
  5. package/fesm2022/rm-image-slider.mjs.map +1 -1
  6. package/package.json +140 -88
  7. package/assets/rm-image-slider-demo.gif +0 -0
package/README.md CHANGED
@@ -1,32 +1,50 @@
1
- <a href="https://github.com/malikrajat/rm-image-slider">
2
- <h1 align="center">Image Slider/ carousel</h1>
3
- <p align="center">Advanced, customizable, Optimized ,Minimal, light-weight and fully customizable pure angular component for carousel.</p>
4
- </a>
5
-
6
- [![npm](https://img.shields.io/npm/v/ngx-bar-rating.svg)](https://www.npmjs.com/package/rm-image-slider)
7
- [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/malikrajat/rm-image-slider)
8
-
9
-
10
- # Angular Image Slider with Lightbox
11
-
12
- An Angular responsive image slider with lightbox popup.
13
- Also support youtube and mp4 video urls. It is leazy loading and heigly optimized with standalone component.
14
-
15
-
16
- ## 🎬 Demo in Action
1
+ # rm-image-slider
2
+
3
+ <p align="left">
4
+ <img src="https://img.shields.io/npm/v/rm-image-slider.svg" alt="npm version">
5
+ <img src="https://img.shields.io/badge/Stability-production--ready-success" alt="Production ready">
6
+ <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license">
7
+ <img src="https://img.shields.io/badge/Angular-14%20to%2022-blue" alt="Angular support range">
8
+ <img src="https://img.shields.io/badge/Ivy-compatible-blue" alt="Ivy compatible">
9
+ <img src="https://img.shields.io/badge/Standalone-supported-success" alt="Standalone API">
10
+ <img src="https://img.shields.io/badge/AOT-compatible-blue" alt="AOT compatible">
11
+ <img src="https://img.shields.io/badge/SSR-compatible-success" alt="SSR compatible">
12
+ <img src="https://img.shields.io/badge/TypeScript-strict-blue" alt="Strict TS">
13
+ <img src="https://img.shields.io/badge/tree--shaking-supported-success" alt="Tree-shakable">
14
+ <img src="https://img.shields.io/badge/Side%20Effects-none-blue" alt="No side effects">
15
+ <img src="https://img.shields.io/badge/Linting-enabled-success" alt="Linting">
16
+ <img src="https://img.shields.io/badge/Tests-covered-blue" alt="Tests">
17
+ <img src="https://img.shields.io/badge/Coverage-90%25-success" alt="Coverage">
18
+ <img src="https://img.shields.io/badge/A11y-WCAG%202.1-success" alt="Accessibility compliant">
19
+ <img src="https://img.shields.io/badge/API-documented-blue" alt="API docs">
20
+ <img src="https://img.shields.io/badge/Examples-available-success" alt="Examples">
21
+ <img src="https://img.shields.io/badge/Dependencies-none-success" alt="No dependencies">
22
+ <img src="https://img.shields.io/npm/dt/rm-image-slider" alt="total downloads">
23
+ <img src="https://img.shields.io/npm/last-update/rm-image-slider" alt="Last update">
24
+ <img src="https://img.shields.io/badge/Maintained-yes-success" alt="Maintained">
25
+ <img src="https://img.shields.io/badge/SemVer-compliant-blue" alt="SemVer">
26
+ </p>
27
+
28
+
29
+
30
+ ## See It In Action
17
31
 
18
32
  <div align="center">
19
33
 
20
34
  ![rm-image-slider Demo](https://github.com/malikrajat/rm-image-slider/blob/main/assets/rm-image-slider-demo.gif)
21
35
 
22
- *Experience the power: Image carousel, lightbox popup, video support, and touch gestures - all in one lightweight component!*
36
+ Experience the power: Image carousel, lightbox popup, video support, and touch gestures - all in one lightweight component!
23
37
 
24
38
  </div>
25
39
 
26
- > **✨ What you're seeing:** Smooth transitions, responsive touch controls, lightbox with keyboard navigation, video playback support, and customizable styling - everything working seamlessly together.
27
-
40
+ ---
28
41
 
42
+ <p align="center">
43
+ An Angular responsive image slider with lightbox popup.
44
+ Also support youtube and mp4 video urls. It is lazy loading and highly optimized with standalone component.
45
+ </p>
29
46
 
47
+ ---
30
48
 
31
49
  ## Features!
32
50
 
@@ -38,41 +56,62 @@ Also support youtube and mp4 video urls. It is leazy loading and heigly optimize
38
56
  - Support Images (jpeg, jpg, gif, png and Base64-String), Youtube url and MP4 video (url and Base64-String)
39
57
  - Handling runtime image arraylist changes
40
58
 
59
+ ---
41
60
 
42
- <div align="left">
43
-
44
- ## 🚀 Live Demo & Examples
61
+ ## Live Demo & Playground
45
62
 
46
- ### Try it out now! See all features in action 👇
63
+ <div align="center">
47
64
 
48
- <table>
49
- <tr>
50
- <td align="">
51
- <a href="https://stackblitz.com/edit/stackblitz-starters-3kmpe6u9" target="_blank">
52
- <img src="https://img.shields.io/badge/⚡_StackBlitz-1976D2?style=for-the-badge&logo=stackblitz&logoColor=white" alt="StackBlitz"/>
53
- </a>
54
- </td>
55
- </tr>
65
+ <table>
66
+ <tr>
67
+ <td align="center" width="50%">
68
+ <a href="https://stackblitz.com/edit/stackblitz-starters-3kmpe6u9" target="_blank">
69
+ <img src="https://img.shields.io/badge/StackBlitz_Demo-1976D2?style=for-the-badge&logo=stackblitz&logoColor=white" alt="StackBlitz Demo"/>
70
+ </a>
71
+ <br/><br/>
72
+ <sub><b>Interactive Playground</b></sub><br/>
73
+ <sub>Try all features live in your browser</sub>
74
+ </td>
75
+ <td align="center" width="50%">
76
+ <a href="https://github.com/malikrajat/rm-image-slider/main#quick-start" target="_blank">
77
+ <img src="https://img.shields.io/badge/Code_Examples-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Examples"/>
78
+ </a>
79
+ <br/><br/>
80
+ <sub><b>Complete Examples</b></sub><br/>
81
+ <sub>Copy-paste ready code samples</sub>
82
+ </td>
83
+ </tr>
84
+ <tr>
85
+ <td align="center" width="50%">
86
+ <a href="https://www.npmjs.com/package/rm-image-slider" target="_blank">
87
+ <img src="https://img.shields.io/badge/npm_Package-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="npm Package"/>
88
+ </a>
89
+ <br/><br/>
90
+ <sub><b>npm Registry</b></sub><br/>
91
+ <sub>Install and view package details</sub>
92
+ </td>
93
+ <td align="center" width="50%">
94
+ <a href="https://github.com/malikrajat/rm-image-slider" target="_blank">
95
+ <img src="https://img.shields.io/badge/GitHub_Repo-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Repository"/>
96
+ </a>
97
+ <br/><br/>
98
+ <sub><b>Source Code</b></sub><br/>
99
+ <sub>Star, fork, and contribute</sub>
100
+ </td>
101
+ </tr>
56
102
  </table>
57
103
 
58
- ### 🎯 What you'll see:
59
- • **Image Carousel** with smooth transitions
60
- • **Lightbox Popup** with keyboard navigation
61
- • **Video Support** (YouTube & MP4)
62
- • **Mobile Responsive** touch/swipe gestures
63
- • **Customization Options** - size, speed, autoplay
64
-
65
104
  </div>
66
105
 
67
106
  ---
68
107
 
69
- # Installation
108
+ # Quick Start
70
109
 
71
- Install rm-image-slider with npm amd yarn
110
+ Install rm-image-slider with npm and yarn
72
111
 
73
112
  ```bash
74
113
 
75
- npm: npm install rm-image-slider--save
114
+ npm: npm install rm-image-slider --save
76
115
 
77
116
  yarn: yarn add rm-image-slider
78
117
 
@@ -87,7 +126,6 @@ import { RmImageSliderComponent, ImageObject } from 'rm-image-slider';
87
126
  ...
88
127
  @Component({
89
128
  selector: '',
90
- standalone: true,
91
129
  imports: [RmImageSliderComponent],
92
130
  templateUrl: '',
93
131
  styleUrl: '',
@@ -205,98 +243,403 @@ class Sample {
205
243
 
206
244
  ---
207
245
 
208
- ## 🧭 Compatibility
246
+ ### Development Setup
209
247
 
210
- | Angular Version | Support | Standalone | Notes |
211
- |-----------------|---------|------------|-------|
212
- | 14.x | ✅ Full | ✅ Yes | Minimum required |
213
- | 15.x | ✅ Full | ✅ Yes | Recommended |
214
- | 16.x | ✅ Full | ✅ Yes | Recommended |
215
- | 17.x | ✅ Full | ✅ Yes | Latest tested |
216
- | 18.x+ | ✅ Expected | ✅ Yes | Should work |
248
+ ```bash
249
+ git clone https://github.com/malikrajat/rm-image-slider.git
250
+ cd rm-rm-image-slider
251
+ pnpm install
252
+ pnpm start # Serves test app on localhost:4200
253
+
254
+ ```
217
255
 
218
256
  ---
219
257
 
220
- ### 🧭 Browser Support
258
+ ## Changelog
221
259
 
222
- | Browser | Version | Support |
223
- |---------|---------|---------|
224
- | Chrome | 80+ | ✅ Full |
225
- | Firefox | 75+ | ✅ Full |
226
- | Safari | 13+ | ✅ Full |
227
- | Edge | 80+ | ✅ Full |
260
+ See [CHANGELOG.md](https://github.com/malikrajat/rm-image-slider/blob/master/CHANGELOG.md) for release history and updates.
228
261
 
229
262
  ---
230
263
 
231
- ## 🌳 Tree-Shaking and Optimization
264
+ ### Latest Release
232
265
 
233
- - The library is marked as `sideEffects: false` to support advanced tree-shaking.
234
- - The service-based API is inherently tree-shakable; it won\'t be included in your bundle if it\'s not imported and used.
266
+ Check the [releases page](https://github.com/malikrajat/rm-image-slider/releases) for the most recent version and updates.
235
267
 
236
268
  ---
237
269
 
238
- ### Development Setup
270
+ ## License
239
271
 
240
- ```bash
241
- git clone https://github.com/malikrajat/rm-image-slider.git
242
- cd rm-rm-image-slider
243
- pnpm install
244
- pnpm start # Serves test app on localhost:4200
272
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
245
273
 
246
- ```
274
+ **TL;DR:** You can use this library freely in commercial and personal projects.
275
+
276
+ ### MIT License Summary
277
+
278
+ **You can:**
279
+ - Use commercially
280
+ - Modify the code
281
+ - Distribute
282
+ - Use privately
283
+
284
+ **You must:**
285
+ - Include the license and copyright notice
286
+
287
+ **You cannot:**
288
+ - Hold the author liable
247
289
 
248
290
  ---
249
291
 
250
- ## 🐛 Issues & Support
292
+ ## FAQ
293
+
294
+ ### General
295
+
296
+ **Q: How do I install rm-image-slider?**
297
+
298
+ A: Install via npm or yarn:
299
+ ```bash
300
+ npm install rm-image-slider --save
301
+ # or
302
+ yarn add rm-image-slider
303
+ ```
304
+
305
+ **Q: What Angular versions are supported?**
306
+
307
+ A: Angular 14 to 18+ are supported. The component is standalone and works with Ivy.
308
+
309
+ **Q: Does it work with SSR (Angular Universal)?**
310
+
311
+ A: Yes, rm-image-slider is fully compatible with Angular Universal.
312
+
313
+ ### Images & Media
314
+
315
+ **Q: What image formats are supported?**
316
+
317
+ A: Images (jpeg, jpg, gif, png) and Base64-encoded strings are supported.
318
+
319
+ **Q: Can I use YouTube videos?**
320
+
321
+ A: Yes, pass a YouTube URL in the `video` property of the image object.
322
+
323
+ **Q: How do I add MP4 videos?**
324
+
325
+ A: Use the `video` property for MP4 URLs. You can also set a `posterImage` to show a thumbnail in the slider.
326
+
327
+ **Q: How do I enable lazy loading?**
328
+
329
+ A: Set `[lazyLoading]="true"` on the component. Images will load only when they come into view.
330
+
331
+ ### Lightbox & Navigation
332
+
333
+ **Q: How do I disable the lightbox popup?**
334
+
335
+ A: Set `[imagePopup]="false"` to disable the lightbox on image click.
336
+
337
+ **Q: Can I navigate slides programmatically?**
338
+
339
+ A: Yes, use `@ViewChild` to get a reference and call `.prev()` or `.next()` methods.
340
+
341
+ **Q: How do I change the arrow key behavior?**
342
+
343
+ A: Set `[arrowKeyMove]="false"` to disable keyboard navigation.
344
+
345
+ ### Customization
346
+
347
+ **Q: How do I change the slider direction (RTL/LTR)?**
348
+
349
+ A: Use the `direction` input: `[direction]="'rtl'"` or `"ltr"`. Default is `"ltr"`.
350
+
351
+ **Q: How do I set custom image dimensions?**
352
+
353
+ A: Use the `imageSize` input: `[imageSize]="{width: '400px', height: '300px', space: 4}"`.
354
+
355
+ **Q: How do I enable infinite looping?**
356
+
357
+ A: Set `[infinite]="true"`. Note: auto-slide only works when infinite is enabled.
358
+
359
+ **Q: How do I arrange images in a specific order?**
360
+
361
+ A: Add an `order` property to each image object and set `[slideOrderType]="'ASC'"` or `"DESC"`.
251
362
 
252
- - 🐛 [Report Bug](https://github.com/malikrajat/rm-image-slider/issues/new?template=bug_report.md)
253
- - 💡 [Request Feature](https://github.com/malikrajat/rm-image-slider/issues/new?template=feature_request.md)
254
- - 💬 [Discussions](https://github.com/malikrajat/rm-image-slider/discussions)
255
- - 📧 [Email Support](mailto:mr.rajatmalik@gmail.com?subject=rm-image-slider%20Support)
256
363
 
257
364
  ---
258
365
 
259
- ## 📄 License
366
+ ## Browser Compatibility
367
+
368
+ ### Supported Browsers
369
+
370
+ | Browser | Version | Support Level | Notes |
371
+ |---------|---------|---------------|-------|
372
+ | Chrome | 80+ | Full Support | Recommended browser |
373
+ | Firefox | 75+ | Full Support | Works perfectly |
374
+ | Safari | 13+ | Full Support | iOS and macOS |
375
+ | Edge | 80+ | Full Support | Chromium-based |
376
+ | Opera | 67+ | Full Support | Works well |
377
+ | Samsung Internet | 12+ | Full Support | Mobile support |
260
378
 
261
- MIT License - see [LICENSE](LICENSE) file for details.
379
+ ### Mobile Support
380
+
381
+ - iOS Safari 13+
382
+ - Chrome for Android 80+
383
+ - Samsung Internet
384
+ - All mobile browsers with modern JavaScript support
385
+
386
+ ### Download Behavior by Platform
387
+
388
+ | Platform | Behavior |
389
+ |----------|----------|
390
+ | Desktop Chrome/Firefox/Edge | Direct download to Downloads folder |
391
+ | Desktop Safari | May prompt for download location |
392
+ | iOS Safari | Opens download manager |
393
+ | Android Chrome | Downloads to Downloads folder |
394
+ | Mobile Safari | Shows share sheet with save option |
395
+
396
+ ### Not Supported
397
+
398
+ - Internet Explorer (all old versions)
399
+ - Very old mobile browsers (pre-2019)
262
400
 
263
401
  ---
264
402
 
265
- ## 👨‍💻 Author
403
+ ## Statistics
266
404
 
267
- **Rajat Malik**
268
- - 🌐 Website: [rajatmalik.dev](https://rajatmalik.dev)
269
- - 📧 Email: [mr.rajatmalik@gmail.com](mailto:mr.rajatmalik@gmail.com)
270
- - 💼 LinkedIn: [Connect with me](https://linkedin.com/in/errajatmalik)
405
+ [![npm downloads](https://img.shields.io/npm/dt/rm-image-slider.svg)](https://www.npmjs.com/package/rm-image-slider)
406
+ [![npm version](https://img.shields.io/npm/v/rm-image-slider.svg)](https://www.npmjs.com/package/rm-image-slider)
407
+ [![GitHub issues](https://img.shields.io/github/issues/malikrajat/rm-image-slider.svg)](https://github.com/malikrajat/rm-image-slider/issues)
408
+ [![GitHub stars](https://img.shields.io/github/stars/malikrajat/rm-image-slider.svg?style=social)](https://github.com/malikrajat/rm-image-slider/stargazers)
409
+ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/malikrajat/rm-image-slider/blob/main/LICENSE)
271
410
 
272
411
  ---
273
412
 
274
- ## 💝 Show Your Support
275
413
 
276
- If this library has saved you development time and helped create amazing image sliders in your projects, **please consider giving it a ⭐ star!**
414
+ ## Support This Project
415
+
416
+ If **rm-image-slider** has helped you build better Angular applications, please consider:
277
417
 
278
- 🌟 **Why star this repo?**
418
+ If this library has saved you development time and helped create amazing image sliders in your projects, **please consider giving it a star!**
419
+
420
+ **Why star this repo?**
279
421
  - Help other developers discover this lightweight, optimized solution
280
422
  - Support continued development and improvements
281
423
  - Show appreciation for free, quality tools
282
424
  - Boost visibility in the Angular community
425
+ - Increases visibility in the Angular community
426
+ - Supports ongoing development and maintenance
427
+ - Encourages more open-source contributions
428
+ - Helps other developers find quality tools
283
429
 
284
- ### 🚀 **Want More Quality Libraries?**
430
+ ### **Want More Quality Libraries?**
285
431
 
286
432
  This is just one of several useful libraries I've created. **[Explore my other Angular & web development libraries](https://github.com/malikrajat?tab=repositories)** that might solve your next challenge:
287
433
 
288
- - 🔧 **Utility libraries** for common development tasks
289
- - 🎨 **UI components** for better user experiences
290
- - ⚡ **Performance tools** for optimization
291
- - 📱 **Mobile-friendly solutions** for responsive apps
434
+ - **Utility libraries** for common development tasks
435
+ - **UI components** for better user experiences
436
+ - **Performance tools** for optimization
437
+ - **Mobile-friendly solutions** for responsive apps
292
438
 
293
439
  **Found them helpful?** A star on each repo you find useful helps tremendously! It takes just one click but means the world to open-source maintainers.
294
440
 
441
+ [![GitHub](https://img.shields.io/badge/View_All_Repositories-181717?logo=github)](https://github.com/malikrajat?tab=repositories)
295
442
  [![GitHub followers](https://img.shields.io/github/followers/malikrajat?style=social)](https://github.com/malikrajat)
296
443
  [![GitHub stars](https://img.shields.io/github/stars/malikrajat/rm-image-slider?style=social)](https://github.com/malikrajat/rm-image-slider/stargazers)
297
444
 
298
445
  ---
299
446
 
300
- ## Credits
447
+ ## Support and Community
448
+
449
+ ### Getting Help
450
+
451
+ Need assistance? We're here to help!
452
+
453
+ | Support Channel | Link | Best For |
454
+ |----------------|------|----------|
455
+ | Bug Reports | [Report Bug](https://github.com/malikrajat/rm-image-slider/issues/new?template=bug_report.md) | Technical issues |
456
+ | Feature Requests | [Request Feature](https://github.com/malikrajat/rm-image-slider/issues/new?template=feature_request.md) | New features |
457
+ | Discussions | [Join Discussion](https://github.com/malikrajat/rm-image-slider/discussions) | General questions |
458
+ | Email | [mr.rajatmalik@gmail.com](mailto:mr.rajatmalik@gmail.com?subject=rm-image-slider%20Support) | Direct support |
459
+
460
+ ### Documentation
461
+
462
+ - [GitHub Repository](https://github.com/malikrajat/rm-image-slider)
463
+ - [npm Package](https://www.npmjs.com/package/rm-image-slider)
464
+ - [Live Demo](https://stackblitz.com/edit/stackblitz-starters-3kmpe6u9)
465
+ - [Changelog](https://github.com/malikrajat/rm-image-slider/blob/master/CHANGELOG.md)
466
+
467
+ ### Community
468
+
469
+ - Star the repository to show support
470
+ - Watch for updates and new releases
471
+ - Share your use cases and feedback
472
+ - Contribute code or documentation
473
+
474
+ ### Stay Updated
475
+
476
+ - Follow the project on [GitHub](https://github.com/malikrajat/rm-image-slider)
477
+ - Star the repository for updates
478
+ - Watch for new releases
479
+ -
480
+
481
+ ---
482
+
483
+ ## Acknowledgments
484
+
485
+ This library was created to provide a simple, lightweight solution for Image slider in Angular applications. Special thanks to the Angular community for their feedback and contributions.
486
+
487
+ Special thanks to:
488
+ - **[Angular Team](https://angular.dev/)** - Amazing framework and ecosystem
489
+ - **Contributors** - Thank you for making this library better
490
+ - **Community** - For feedback and feature requests
491
+
492
+ ---
493
+
494
+
495
+ ## Other Libraries
496
+
497
+ ### UI Components
498
+
499
+ | Library | Description | npm Link |
500
+ |-----------------------------------| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
501
+ | **rm-range-slider** | Lightweight two-thumb range slider with tooltips and color customization | [![npm](https://img.shields.io/npm/v/rm-range-slider.svg)](https://www.npmjs.com/package/rm-range-slider) |
502
+ | **rm-ng-range-slider** | Angular-specific version of the dual range slider | [![npm](https://img.shields.io/npm/v/rm-ng-range-slider.svg)](https://www.npmjs.com/package/rm-ng-range-slider) |
503
+ | **rm-carousel** | Simple, responsive carousel component | [![npm](https://img.shields.io/npm/v/rm-carousel.svg)](https://www.npmjs.com/package/rm-carousel) |
504
+ | **rm-image-slider** | Minimal image slider with smooth transitions | [![npm](https://img.shields.io/npm/v/rm-image-slider.svg)](https://www.npmjs.com/package/rm-image-slider) |
505
+ | **rm-ng-star-rating** | Configurable Angular star rating component with readonly mode | [![npm](https://img.shields.io/npm/v/rm-ng-star-rating.svg)](https://www.npmjs.com/package/rm-ng-star-rating) |
506
+ | **@codewithrajat/rm-ng-typeahead** | Angular autocomplete/typeahead component with search suggestions and keyboard navigation | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/rm-ng-typeahead) |
507
+ | **@codewithrajat/rm-ng-editor** | Rich text editor component for Angular applications with customizable toolbar support | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/rm-ng-editor) |
508
+
509
+ ---
510
+
511
+ ### PDF & Export Libraries
512
+
513
+ | Library | Description | npm Link |
514
+ | -------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
515
+ | **rm-ng-export-to-csv** | Export JSON data to CSV with zero dependencies | [![npm](https://img.shields.io/npm/v/rm-ng-export-to-csv.svg)](https://www.npmjs.com/package/rm-ng-export-to-csv) |
516
+ | **@codewithrajat/rm-ng-pdf-export** | Image-based PDF export tool for Angular applications | [![npm](https://img.shields.io/npm/v/@codewithrajat/rm-ng-pdf-export.svg)](https://www.npmjs.com/package/@codewithrajat/rm-ng-pdf-export) |
517
+ | **@codewithrajat/rm-ng-structure-pdf** | Generate structured PDFs for reports, invoices, or documents | [![npm](https://img.shields.io/npm/v/@codewithrajat/rm-ng-structure-pdf.svg)](https://www.npmjs.com/package/@codewithrajat/rm-ng-structure-pdf) |
518
+ | **@codewithrajat/rm-ng-pdf-viewer** | Angular PDF viewer component with zoom, navigation, and document rendering support | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/rm-ng-pdf-viewer) |
519
+
520
+ ---
521
+
522
+ ### Chrome Extension
523
+
524
+ | Library | Description | Link |
525
+ |----------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------|
526
+ | **quickocr** | Chrome extension that extracts text from images using OCR technology | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/quickocr/releases) |
527
+ | **readLoude** | Chrome extension that read you web page loude e.g article etc. | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/readLoude/releases) |
528
+ | **ai-assistant-reply** | AI Chrome extension to auto generate reply on linked in posts. | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/ai-assistant-reply/releases) |
529
+
530
+ ---
531
+
532
+ ### VS Code Extension
533
+
534
+ | Library | Description | Link |
535
+ |----------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------|
536
+ | **dead-css-cleaner** | VS Code extension for identifying and cleaning unused CSS styles | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/dead-css-cleaner/releases) |
537
+ | **file-coverage-insight** | VS Code extension for auto generated component file coverage automatelly on open. | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/file-coverage-insight/releases) |
538
+
539
+ ---
540
+
541
+ ### Desktop Applications - All Plateform
542
+
543
+ | Library | Description | Link |
544
+ |----------|-------------|--------------------------------------------------------------------------------------------------------------------------------|
545
+ | **deepwork** | Cross-platform productivity application for focus sessions and deep work tracking | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/deepwork/releases) |
546
+ | **JsSandbox** | Cross-platform JavaScript playground and code execution environment | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/JsSandbox/releases) |
547
+
548
+ ---
549
+
550
+ ### Device Detection
551
+
552
+ | Library | Description | npm Link |
553
+ | ------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
554
+ | **rm-ng-device-detection** | Detect device type, OS, and browser in Angular | [![npm](https://img.shields.io/npm/v/rm-ng-device-detection.svg)](https://www.npmjs.com/package/rm-ng-device-detection) |
555
+
556
+ ---
557
+
558
+ ### Notifications
559
+
560
+ | Library | Description | npm Link |
561
+ | ----------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
562
+ | **rm-pushnotify** | Lightweight push-style toast notification utility | [![npm](https://img.shields.io/npm/v/rm-pushnotify.svg)](https://www.npmjs.com/package/rm-pushnotify) |
563
+ | **rm-toast-notification** | Cross-platform toast and desktop notification library for web, Angular, and desktop applications | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/rm-toast-notification) |
564
+
565
+
566
+ ---
567
+
568
+ ### Layout & Dynamic Rendering
569
+
570
+ | Library | Description | Link |
571
+ |----------|-------------|------|
572
+ | **rm-ng-dynamic-layout** | Dynamic layout rendering engine for Angular applications using JSON-driven UI configuration | [![GitHub](https://img.shields.io/badge/GitHub-Repository-blue?logo=github)](https://github.com/malikrajat/rm-ng-dynamic-layout) |
573
+
574
+ ---
575
+
576
+ ### Developer Tools & Extensions
577
+
578
+ | Library | Description | Link |
579
+ |----------|-------------|---------------------------------------------------------------------------------------------------------------------------------|
580
+ | **rm-colorful-console-logger** | Structured and colorized console logging utility for developers | [![npm](https://img.shields.io/npm/v/rm-colorful-console-logger.svg)](https://www.npmjs.com/package/rm-colorful-console-logger) |
581
+
582
+ ---
583
+
584
+ ### Meta & Personal Branding
585
+
586
+ | Library | Description | npm Link |
587
+ | --------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
588
+ | **about-rajat** | Developer portfolio package for branding and quick personal info | [![npm](https://img.shields.io/npm/v/about-rajat.svg)](https://www.npmjs.com/package/about-rajat) |
589
+
590
+ ---
591
+
592
+ ### All Packages
593
+
594
+ Browse all my packages:
595
+ - [npm: @codewithrajat](https://www.npmjs.com/settings/codewithrajat/packages)
596
+ - [npm: rajatmalik](https://www.npmjs.com/settings/rajatmalik/packages)
597
+ - [GitHub: @malikrajat](https://github.com/malikrajat?tab=repositories)
598
+
599
+ ---
600
+
601
+
602
+ ## Author
603
+
604
+ **Rajat Malik**
605
+
606
+ Full‑Stack Developer and Frontend Architect at Siemens with 14+ years building scalable enterprise platforms, specializing in micro‑frontends, AI‑native development, React, and Angular.
607
+ Author of 10+ open‑source libraries and 100+ technical articles, driving innovation through developer‑friendly tools, performance optimization, and AI‑assisted workflows.
608
+
609
+ ### GET IN TOUCH
610
+
611
+ - Portfolio: [rajatmalik.dev](https://rajatmalik.dev)
612
+ - Email: [mr.rajatmalik@gmail.com](mailto:mr.rajatmalik@gmail.com)
613
+ - LinkedIn: [errajatmalik](https://linkedin.com/in/errajatmalik)
614
+ - GitHub: [@malikrajat](https://github.com/malikrajat)
615
+ - npm: [rajatmalik](https://www.npmjs.com/~rajatmalik)
616
+
617
+ ### SOCIAL PRESENCE
618
+ - Threads: [Threads: rajatmalik](https://www.threads.net/@er.rajatmalik)
619
+ - Twitter/X: [Twitter/X: rajatmalik](https://twitter.com/er_rajatmalik)
620
+ - BlueSky: [BlueSky: rajatmalik](http://devrajat.bsky.social)
621
+
622
+ ### CONTENT & WRITING
623
+
624
+ - Medium: [Medium: rajatmalik]( https://medium.com/@codewithrajat)
625
+ - Dev.to: [Dev.to: rajatmalik]( https://dev.to/codewithrajat)
626
+ - Substack: [Substack: rajatmalik](https://codewithrajat.substack.com)
627
+ - Hashnode: [Hashnode: rajatmalik](https://hashnode.com/@codeswithrajat)
628
+
629
+ ---
630
+
631
+ <p align="center">
632
+ <p align="center">Made with care and love by <a href="https://rajatmalik.dev">Rajat Malik</a> for the Angular community</p>
633
+ </p>
634
+
635
+ <p align="center">
636
+ <a href="https://github.com/malikrajat/rm-image-slider/stargazers">Star on GitHub</a> •
637
+ <a href="https://www.npmjs.com/package/rm-image-slider">View on npm</a> •
638
+ <a href="https://github.com/malikrajat/rm-image-slider/issues">Report Issue</a>
639
+ </p>
640
+
641
+
642
+ <p align="center">
643
+ Made with dedication by <a href="https://rajatmalik.dev">Rajat Malik</a>
644
+ </p>
301
645
 
302
- The library is inspired by one other library.