{"_id":"@avoraui/av-notifications","_rev":"5-d7535e77a8439a1230b7a18305708873","name":"@avoraui/av-notifications","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.2":{"name":"@avoraui/av-notifications","version":"0.0.2","keywords":["angular","notification","toast","alert","ui-component","typescript","notification-service","popup","message","avora-ui","snackbar","dialog"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-notifications@0.0.2","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"e7e3559836e103c5fe372e36bb6069fab5bf28c1","tarball":"https://registry.npmjs.org/@avoraui/av-notifications/-/av-notifications-0.0.2.tgz","fileCount":9,"integrity":"sha512-mnc+PQxHeGf1FsrynM9Hk76RTx2GUuse7dMK4ApiaGy9SGEo4WPD5f5PBgu5/L0eelWs6IJWoUC97lkvCMqGsg==","signatures":[{"sig":"MEQCIC0cQ3D5Z4Il6kpiahlZYjwFr2uzLQ7TV8JEySxQiYvyAiB/1YS4mapfc77RG8GldCcQYekf2qCl9YaR2AAjZlrjVA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":332107},"module":"fesm2022/avoraui-av-notifications.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-notifications.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"73f4deee84830e1b1ccb1b5d555aa5cfa036ca61","typings":"index.d.ts","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"10.9.0","description":"A flexible Angular notification service with toast-style alerts, multiple positioning options, and theme support. Built with Angular Material for modern web applications.","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-notifications_0.0.2_1753514877407_0.2161156023916373","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@avoraui/av-notifications","version":"0.0.3","keywords":["angular","notification","toast","alert","ui-component","typescript","notification-service","popup","message","avora-ui","snackbar","dialog"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-notifications@0.0.3","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"4a19bec7300cc5fba70fb9bd6f335e3111bc755b","tarball":"https://registry.npmjs.org/@avoraui/av-notifications/-/av-notifications-0.0.3.tgz","fileCount":8,"integrity":"sha512-Zfwgg9/+4TW6p0mLOCPoXUfIIBcSH/aM7mTl4aVhQXULSq9PMOKY7MOlkhIKGdpur0PGERs2jlRrhVAxTunumQ==","signatures":[{"sig":"MEQCIHAv+XKxyCCed0X0qwXNWQi3ZnhWPw6ifDKyE7yqvkLDAiAcPo4fN/GYm7zOtw1GEpFASCYX4K91XD/hH8ZI8QZY4A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":227066},"module":"fesm2022/avoraui-av-notifications.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-notifications.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"9970ef79b8c95dc35a426921a115dc86f4335a1d","typings":"index.d.ts","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"10.9.0","description":"A flexible Angular notification service with toast-style alerts, multiple positioning options, and theme support. Built with Angular Material for modern web applications.","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-notifications_0.0.3_1753515331271_0.9664739615813085","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@avoraui/av-notifications","version":"0.0.4","keywords":["angular","notification","toast","alert","ui-component","typescript","notification-service","popup","message","avora-ui","snackbar","dialog"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-notifications@0.0.4","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"018eb08e624cee5eaf04a311f58fc1a226d37a99","tarball":"https://registry.npmjs.org/@avoraui/av-notifications/-/av-notifications-0.0.4.tgz","fileCount":28,"integrity":"sha512-2wFhyFltm1dL3pkK7EMXIq10B6nSy2WTwZmxofGnyqDKvTfyg6GQ89JOTGc2IjXACcGsy+NKHozGpoqf4Hj3eQ==","signatures":[{"sig":"MEQCIAtScy/w2SB0nfGJIf//vc4zbMLgq6lTHNHB4KlMW83IAiBLhapbso0cVzVRVHzpjtXwOziTfV6lGSi4Z3+ejG+3Hw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":86434},"gitHead":"1b427abce70fb6839d52e5ca6cb8657bea488351","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"11.5.2","description":"A flexible Angular notification service with toast-style alerts, multiple positioning options, and theme support. Built with Angular Material for modern web applications.","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-notifications_0.0.4_1771167801573_0.9076640358301238","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@avoraui/av-notifications","version":"0.0.5","keywords":["angular","notification","toast","alert","ui-component","typescript","notification-service","popup","message","avora-ui","snackbar","dialog"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","_id":"@avoraui/av-notifications@0.0.5","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"dist":{"shasum":"a635af68ef4707beaf902d4321ad247e5adb4068","tarball":"https://registry.npmjs.org/@avoraui/av-notifications/-/av-notifications-0.0.5.tgz","fileCount":29,"integrity":"sha512-pbE95TIwKBGG7aa1VF+6CtctF0+RTLfJpweqFf6tzNJG7JY/k7/e2KK11BE5yzej58Cg0vKo9Ce15uBWl/yXxg==","signatures":[{"sig":"MEUCICCeLi4qcR3lq/mBqa5t4qT/Kb3IX04m49Ea/yhZGY7SAiEA8lWkV3Al1pbRiSld4i5aAOWTEQiWF83y43UEVUdxnY4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106056},"gitHead":"eb92148b8907cb2bd1513bb699f611304cc0bce6","_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"_npmVersion":"11.5.2","description":"A flexible Angular notification service with toast-style alerts, multiple positioning options, and theme support. Built with Angular Material for modern web applications.","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.1.0","@angular/common":"^20.1.0"},"_npmOperationalInternal":{"tmp":"tmp/av-notifications_0.0.5_1771177582908_0.11747256323868105","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@avoraui/av-notifications","version":"0.0.6","description":"A flexible Angular notification service with toast-style alerts, multiple positioning options, and theme support. Built with Angular Material for modern web applications.","keywords":["angular","notification","toast","alert","ui-component","typescript","notification-service","popup","message","avora-ui","snackbar","dialog"],"author":{"name":"Dileesha Ekanayake"},"license":"MIT","peerDependencies":{"@angular/common":"^20.1.0","@angular/core":"^20.1.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/avoraui-av-notifications.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/avoraui-av-notifications.mjs"}},"_id":"@avoraui/av-notifications@0.0.6","gitHead":"eb92148b8907cb2bd1513bb699f611304cc0bce6","_nodeVersion":"22.12.0","_npmVersion":"11.5.2","dist":{"integrity":"sha512-tCg+8p8AHEo/N0yAE1MmJ/WQQ5iFyeJtaEziNx8zTo+mf9+Q129cRHb6Rinc+uQRtJr0RW+3sqW33WFFXZRdwg==","shasum":"e125e2a11f95717db0f9010f2def67c84b476cd9","tarball":"https://registry.npmjs.org/@avoraui/av-notifications/-/av-notifications-0.0.6.tgz","fileCount":6,"unpackedSize":210609,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDhr13qK98TzRH172nw4Ayy+4dt7DzxJvBIHntTL+VTiQIgQ4WWMUvB/HL42gDDk+dsDTbFGSRaNjSGq4wk65xvZKo="}]},"_npmUser":{"name":"avoraui","email":"dileesha65@gmail.com"},"directories":{},"maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/av-notifications_0.0.6_1771178005451_0.48104906154178906"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-26T07:27:57.343Z","modified":"2026-02-15T17:53:25.709Z","0.0.2":"2025-07-26T07:27:57.634Z","0.0.3":"2025-07-26T07:35:31.466Z","0.0.4":"2026-02-15T15:03:21.718Z","0.0.5":"2026-02-15T17:46:23.051Z","0.0.6":"2026-02-15T17:53:25.602Z"},"author":{"name":"Dileesha Ekanayake"},"license":"MIT","keywords":["angular","notification","toast","alert","ui-component","typescript","notification-service","popup","message","avora-ui","snackbar","dialog"],"description":"A flexible Angular notification service with toast-style alerts, multiple positioning options, and theme support. Built with Angular Material for modern web applications.","maintainers":[{"name":"avoraui","email":"dileesha65@gmail.com"}],"readme":"# AvNotification Service (AvoraUI)\r\n\r\nA flexible and customizable Angular notification service that provides toast-style notifications with multiple positioning options, themes, and animation effects. Built with Angular Material Dialog for optimal performance and accessibility.\r\n\r\n## Features\r\n\r\n- ✅ **Multiple Notification Types**: Success, Error, Info and Warning notifications\r\n- ✅ **Flexible Positioning**: 9 different position options (top, bottom, corners, sides)\r\n- ✅ **Theme Support**: Light, dark, and auto themes\r\n- ✅ **Auto-close Functionality**: Configurable duration with optional manual close\r\n- ✅ **Animation Effects**: Smooth entrance and exit animations\r\n- ✅ **Stack Management**: Multiple notifications with proper stacking\r\n- ✅ **Material Design**: Built with Angular Material components\r\n- ✅ **Memory Efficient**: Automatic cleanup and tracking of active notifications\r\n- ✅ **Accessibility**: Full keyboard navigation and screen reader support\r\n\r\n## Dependencies\r\n\r\nThis service requires the following Angular Material modules:\r\n\r\n```typescript\r\nimport { MatDialog, MatDialogModule } from \"@angular/material/dialog\";\r\nimport { MatButton } from \"@angular/material/button\";\r\nimport { MatIcon } from '@angular/material/icon';\r\nimport { MatCard } from \"@angular/material/card\";\r\n```\r\n\r\n**Required Dependencies:**\r\n- `@angular/animations`: \"^20.1.3\"\r\n\r\n## Installation\r\n\r\n1. Ensure you have Angular Material installed in your project\r\n2. Install Angular Animations: `npm install @angular/animations@^20.1.3`\r\n3. Import the notification service in your module or inject it directly (standalone service)\r\n4. Add the notification components to your module declarations\r\n\r\n## Quick Start\r\n\r\n### Basic Usage\r\n\r\n```typescript\r\nimport { AvNotificationService } from '@avoraui/av-notifications';\r\n\r\nexport class MyComponent {\r\n  constructor(private notificationService: AvNotificationService) {}\r\n\r\n  showNotifications() {\r\n    // Success notification\r\n    this.notificationService.showSuccess('Operation completed successfully!');\r\n    \r\n    // Error notification\r\n    this.notificationService.showFailure('Something went wrong!');\r\n    \r\n    // Warning notification\r\n    this.notificationService.showWarning('Please check your input!');\r\n\r\n    // Info notification\r\n    this.notificationService.showInfo('Here is some information');\r\n  }\r\n}\r\n```\r\n\r\n## Advanced Configuration\r\n\r\n### All Available Options\r\n\r\n```typescript\r\nexport class AdvancedNotificationComponent {\r\n  constructor(private notificationService: AvNotificationService) {}\r\n\r\n  showCustomNotifications() {\r\n    // Success with custom configuration\r\n    this.notificationService.showSuccess('File uploaded successfully!', {\r\n      position: 'top-right',\r\n      duration: 8000,\r\n      theme: 'dark',\r\n      showCloseButton: true,\r\n      autoClose: true,\r\n      animationDuration: 500\r\n    });\r\n\r\n    // Error with persistent notification (no auto-close)\r\n    this.notificationService.showFailure('Critical system error occurred', {\r\n      position: 'center',\r\n      autoClose: false,\r\n      theme: 'light',\r\n      showCloseButton: true\r\n    });\r\n\r\n    // Warning with custom positioning\r\n    this.notificationService.showWarning('Session will expire in 5 minutes', {\r\n      position: 'bottom-left',\r\n      duration: 10000,\r\n      theme: 'auto',\r\n      animationDuration: 300\r\n    });\r\n\r\n    // Info with custom configuration\r\n    this.notificationService.showInfo('Here is some information', {\r\n      position: 'top-left',\r\n      duration: 4000,\r\n      theme: 'dark',\r\n      showCloseButton: true,\r\n      autoClose: true,\r\n      animationDuration: 500\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n## Configuration Options\r\n\r\n### NotificationConfig Interface\r\n\r\n| Property | Type | Required | Default | Description |\r\n|----------|------|----------|---------|-------------|\r\n| `message` | `string` | Yes | - | The notification message to display |\r\n| `type` | `NotificationType` | Yes | - | Type of notification (success, error, warning) |\r\n| `position` | `NotificationPosition` | No | `'top'` | Position where notification appears |\r\n| `duration` | `number` | No | `5000` | Auto-close duration in milliseconds |\r\n| `animationDuration` | `number` | No | `300` | Animation duration in milliseconds |\r\n| `showCloseButton` | `boolean` | No | `true` | Whether to show manual close button |\r\n| `autoClose` | `boolean` | No | `true` | Whether notification auto-closes |\r\n| `theme` | `NotificationTheme` | No | `'auto'` | Visual theme (light, dark, auto) |\r\n\r\n### Position Options\r\n\r\n```typescript\r\ntype NotificationPosition = \r\n  | 'top'           // Top center\r\n  | 'bottom'        // Bottom center\r\n  | 'left'          // Left center\r\n  | 'right'         // Right center\r\n  | 'top-left'      // Top left corner\r\n  | 'top-right'     // Top right corner\r\n  | 'bottom-left'   // Bottom left corner\r\n  | 'bottom-right'  // Bottom right corner\r\n  | 'center';       // Center\r\n```\r\n\r\n### Notification Types\r\n\r\n```typescript\r\ntype NotificationType = 'success' | 'error' | 'warning' | 'info';\r\n```\r\n\r\n### Theme Options\r\n\r\n```typescript\r\ntype NotificationTheme = 'light' | 'dark' | 'auto';\r\n```\r\n\r\n## Service Methods\r\n\r\n### Core Methods\r\n\r\n```typescript\r\n// Show success notification\r\nshowSuccess(message: string, options?: Partial<NotificationConfig>): MatDialogRef<any>\r\n\r\n// Show error notification\r\nshowFailure(message: string, options?: Partial<NotificationConfig>): MatDialogRef<any>\r\n\r\n// Show warning notification\r\nshowWarning(message: string, options?: Partial<NotificationConfig>): MatDialogRef<any>\r\n\r\n// Show info notification\r\nshowInfo(message: string, options?: Partial<NotificationConfig>): MatDialogRef<any>\r\n```\r\n\r\n### Management Methods\r\n\r\n```typescript\r\n// Close all active notifications\r\ncloseAll(): void\r\n\r\n// Close notifications by type\r\ncloseByType(type: NotificationType): void\r\n\r\n// Get count of active notifications\r\ngetActiveCount(): number\r\n\r\n// Check if notifications are active\r\nhasActiveNotifications(type?: NotificationType): boolean\r\n```\r\n\r\n## Real-World Examples\r\n\r\n### E-commerce Application\r\n\r\n```typescript\r\nexport class EcommerceService {\r\n  constructor(private notificationService: AvNotificationService) {}\r\n\r\n  // Product added to cart\r\n  addToCart(product: Product) {\r\n    this.cartService.add(product).subscribe({\r\n      next: () => {\r\n        this.notificationService.showSuccess(`${product.name} added to cart!`, {\r\n          position: 'top-right',\r\n          duration: 3000,\r\n          theme: 'light'\r\n        });\r\n      },\r\n      error: () => {\r\n        this.notificationService.showFailure('Failed to add product to cart', {\r\n          position: 'top-right',\r\n          duration: 5000,\r\n          theme: 'light'\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  // Low stock warning\r\n  checkStockLevels() {\r\n    this.notificationService.showWarning('Only 2 items left in stock!', {\r\n      position: 'bottom-right',\r\n      duration: 8000,\r\n      theme: 'auto',\r\n      showCloseButton: true\r\n    });\r\n  }\r\n\r\n  // Payment processing\r\n  processPayment() {\r\n    this.notificationService.showSuccess('Payment processed successfully!', {\r\n      position: 'center',\r\n      duration: 4000,\r\n      theme: 'dark',\r\n      animationDuration: 500\r\n    });\r\n  }\r\n\r\n  // Info notification\r\n  showInfoNotification() {\r\n    this.notificationService.showInfo('Here is some information', {\r\n      position: 'top-left',\r\n      duration: 4000,\r\n      theme: 'dark',\r\n      showCloseButton: true,\r\n      autoClose: true,\r\n      animationDuration: 500\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n### Form Validation\r\n\r\n```typescript\r\nexport class UserFormComponent {\r\n  constructor(private notificationService: AvNotificationService) {}\r\n\r\n  onSubmit(formData: UserForm) {\r\n    if (this.validateForm(formData)) {\r\n      this.userService.save(formData).subscribe({\r\n        next: () => {\r\n          this.notificationService.showSuccess('User profile updated successfully!', {\r\n            position: 'top',\r\n            duration: 6000,\r\n            theme: 'light'\r\n          });\r\n        },\r\n        error: (error) => {\r\n          this.notificationService.showFailure(`Update failed: ${error.message}`, {\r\n            position: 'top',\r\n            autoClose: false,\r\n            theme: 'light',\r\n            showCloseButton: true\r\n          });\r\n        }\r\n      });\r\n    } else {\r\n      this.notificationService.showWarning('Please fill in all required fields', {\r\n        position: 'top-left',\r\n        duration: 4000,\r\n        theme: 'auto'\r\n      });\r\n    }\r\n\r\n    // Info notification\r\n    this.notificationService.showInfo('Here is some information', {\r\n      position: 'top-left',\r\n      duration: 4000,\r\n      theme: 'dark',\r\n      showCloseButton: true,\r\n      autoClose: true,\r\n      animationDuration: 500\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n### File Upload Progress\r\n\r\n```typescript\r\nexport class FileUploadComponent {\r\n  constructor(private notificationService: AvNotificationService) {}\r\n\r\n  uploadFile(file: File) {\r\n    // Start upload notification\r\n    const uploadingRef = this.notificationService.showSuccess('Starting file upload...', {\r\n      position: 'bottom-right',\r\n      duration: 2000,\r\n      theme: 'dark'\r\n    });\r\n\r\n    this.fileService.upload(file).subscribe({\r\n      next: (progress) => {\r\n        if (progress === 100) {\r\n          this.notificationService.showSuccess('File uploaded successfully!', {\r\n            position: 'bottom-right',\r\n            duration: 5000,\r\n            theme: 'light',\r\n            animationDuration: 400\r\n          });\r\n        }\r\n      },\r\n      error: () => {\r\n        this.notificationService.showFailure('Upload failed. Please try again.', {\r\n          position: 'bottom-right',\r\n          autoClose: false,\r\n          theme: 'light',\r\n          showCloseButton: true\r\n        });\r\n      }\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n### System Notifications\r\n\r\n```typescript\r\nexport class SystemNotificationService {\r\n  constructor(private notificationService: AvNotificationService) {}\r\n\r\n  // Session timeout warning\r\n  showSessionTimeout() {\r\n    this.notificationService.showWarning('Your session will expire in 2 minutes', {\r\n      position: 'top',\r\n      duration: 10000,\r\n      theme: 'auto',\r\n      showCloseButton: true,\r\n      animationDuration: 300\r\n    });\r\n  }\r\n\r\n  // Maintenance mode\r\n  showMaintenanceMode() {\r\n    this.notificationService.showWarning('System maintenance scheduled for tonight', {\r\n      position: 'bottom',\r\n      autoClose: false,\r\n      theme: 'dark',\r\n      showCloseButton: true\r\n    });\r\n  }\r\n\r\n  // Connection status\r\n  showConnectionLost() {\r\n    this.notificationService.showFailure('Connection lost. Attempting to reconnect...', {\r\n      position: 'top-right',\r\n      autoClose: false,\r\n      theme: 'light',\r\n      showCloseButton: false\r\n    });\r\n  }\r\n\r\n  showConnectionRestored() {\r\n    this.notificationService.showSuccess('Connection restored!', {\r\n      position: 'top-right',\r\n      duration: 3000,\r\n      theme: 'light'\r\n    });\r\n  }\r\n\r\n  // Info notification\r\n  showInfoNotification() {\r\n    this.notificationService.showInfo('Here is some information', {\r\n      position: 'top-left',\r\n      duration: 4000,\r\n      theme: 'dark'\r\n    });\r\n  }\r\n}\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### Managing Multiple Notifications\r\n\r\n```typescript\r\nexport class NotificationManagerComponent {\r\n  constructor(private notificationService: AvNotificationService) {}\r\n\r\n  showBulkOperationResults() {\r\n    // Clear any existing notifications\r\n    this.notificationService.closeAll();\r\n\r\n    // Show results\r\n    this.notificationService.showSuccess('5 items processed successfully', {\r\n      position: 'top-right',\r\n      duration: 4000\r\n    });\r\n\r\n    this.notificationService.showWarning('2 items skipped (duplicates)', {\r\n      position: 'top-right',\r\n      duration: 6000\r\n    });\r\n\r\n    this.notificationService.showFailure('1 item failed to process', {\r\n      position: 'top-right',\r\n      duration: 8000\r\n    });\r\n\r\n    // Info notification\r\n    this.notificationService.showInfo('Here is some information', {\r\n      position: 'top-left',\r\n      duration: 4000,\r\n    });\r\n  }\r\n\r\n  clearSpecificNotifications() {\r\n    // Close only error notifications\r\n    this.notificationService.closeByType('error');\r\n    \r\n    // Check if any notifications are still active\r\n    const hasActiveNotifications = this.notificationService.hasActiveNotifications();\r\n    console.log('Active notifications:', hasActiveNotifications);\r\n    \r\n    // Get count of active notifications\r\n    const count = this.notificationService.getActiveCount();\r\n    console.log('Total active notifications:', count);\r\n  }\r\n}\r\n```\r\n\r\n### Custom Styling Integration\r\n\r\n```scss\r\n// Custom notification styles\r\n.notification-dialog {\r\n  &.notification-top-right {\r\n    margin-right: 24px !important;\r\n    margin-top: 24px !important;\r\n  }\r\n\r\n  &.notification-success {\r\n    .mat-mdc-dialog-container {\r\n      background: linear-gradient(135deg, #4caf50, #45a049);\r\n      color: white;\r\n    }\r\n  }\r\n\r\n  &.notification-theme-dark {\r\n    .mat-mdc-dialog-container {\r\n      background: #333;\r\n      color: #fff;\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## Browser Support\r\n\r\n- Chrome/Edge 57+\r\n- Firefox 52+\r\n- Safari 10.1+\r\n- Modern browsers with CSS Grid and Flexbox support\r\n\r\n## Requirements\r\n\r\n- Angular 17+\r\n- Angular Material\r\n- Modern browser with CSS Grid support\r\n\r\n## Performance Considerations\r\n\r\n- Notifications are automatically tracked and cleaned up\r\n- Object URLs are properly revoked to prevent memory leaks\r\n- Efficient dialog positioning with CSS transforms\r\n- Minimal DOM impact with Angular Material's overlay system\r\n\r\n## Accessibility Features\r\n\r\n- Full keyboard navigation support\r\n- Screen reader compatibility\r\n- High contrast theme support\r\n- Focus management for modal notifications\r\n- ARIA labels and descriptions\r\n\r\n## Best Practices\r\n\r\n### Do's\r\n```typescript\r\n// ✅ Use appropriate notification types\r\nthis.notificationService.showSuccess('Data saved successfully');\r\nthis.notificationService.showFailure('Validation error occurred');\r\nthis.notificationService.showWarning('Session expiring soon');\r\nthis.notificationService.showInfo('Here is some information');\r\n\r\n// ✅ Configure duration based on content importance\r\nthis.notificationService.showSuccess('Quick action completed', { duration: 3000 });\r\nthis.notificationService.showFailure('Critical error', { autoClose: false });\r\nthis.notificationService.showInfo('Here is some information', { duration: 4000 });\r\n\r\n// ✅ Use consistent positioning\r\nthis.notificationService.showSuccess('Success', { position: 'top-right' });\r\nthis.notificationService.showFailure('Error', { position: 'top-right' });\r\nthis.notificationService.showInfo('Here is some information', { position: 'top-left' });\r\n```\r\n\r\n### Don'ts\r\n```typescript\r\n// ❌ Don't show too many notifications at once\r\n// Instead, use closeAll() or batch them appropriately\r\n\r\n// ❌ Don't use very short durations for important messages\r\nthis.notificationService.showFailure('Critical error', { duration: 1000 }); // Too short\r\n\r\n// ❌ Don't forget to handle notification cleanup in components\r\n// Always let the service manage notification lifecycle\r\n```\r\n\r\n## Troubleshooting\r\n\r\n### Common Issues\r\n\r\n1. **Notifications not appearing**\r\n  - Ensure Angular Material Dialog is imported\r\n  - Check that notification components are declared\r\n  - Verify CSS z-index values\r\n\r\n2. **Styling issues**\r\n  - Import Angular Material themes\r\n  - Check for CSS conflicts with custom styles\r\n  - Ensure proper theme configuration\r\n\r\n3. **Performance issues**\r\n  - Use `closeAll()` before showing bulk notifications\r\n  - Avoid very short animation durations\r\n  - Monitor active notification count\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the LICENSE file for details.\r\n\r\n## Changelog\r\n\r\n### v0.0.6\r\n- Success, error, and warning notification types\r\n- 8 positioning options\r\n- Theme support (light, dark, auto)\r\n- Animation controls\r\n- Stack management\r\n- Accessibility features\r\n","readmeFilename":"README.md"}