@avoraui/av-notifications 0.0.2 → 0.0.4

package/README.md

@@ -4,8 +4,8 @@ A flexible and customizable Angular notification service that provides toast-sty
 
 ## Features
 
-- ✅ **Multiple Notification Types**: Success, Error, and Warning notifications
-- ✅ **Flexible Positioning**: 8 different position options (top, bottom, corners, sides)
+- ✅ **Multiple Notification Types**: Success, Error, Info and Warning notifications
+- ✅ **Flexible Positioning**: 9 different position options (top, bottom, corners, sides)
 - ✅ **Theme Support**: Light, dark, and auto themes
 - ✅ **Auto-close Functionality**: Configurable duration with optional manual close
 - ✅ **Animation Effects**: Smooth entrance and exit animations
@@ -40,7 +40,7 @@ import { MatCard } from "@angular/material/card";
 ### Basic Usage
 
 ```typescript
-import { AvNotificationService } from 'your-library/notification';
+import { AvNotificationService } from '@avoraui/av-notifications';
 
 export class MyComponent {
   constructor(private notificationService: AvNotificationService) {}
@@ -54,6 +54,9 @@ export class MyComponent {
     
     // Warning notification
     this.notificationService.showWarning('Please check your input!');
+
+    // Info notification
+    this.notificationService.showInfo('Here is some information');
   }
 }
 ```
@@ -92,6 +95,16 @@ export class AdvancedNotificationComponent {
       theme: 'auto',
       animationDuration: 300
     });
+
+    // Info with custom configuration
+    this.notificationService.showInfo('Here is some information', {
+      position: 'top-left',
+      duration: 4000,
+      theme: 'dark',
+      showCloseButton: true,
+      autoClose: true,
+      animationDuration: 500
+    });
   }
 }
 ```
@@ -122,13 +135,14 @@ type NotificationPosition =
   | 'top-left'      // Top left corner
   | 'top-right'     // Top right corner
   | 'bottom-left'   // Bottom left corner
-  | 'bottom-right'; // Bottom right corner
+  | 'bottom-right'  // Bottom right corner
+  | 'center';       // Center
 ```
 
 ### Notification Types
 
 ```typescript
-type NotificationType = 'success' | 'error' | 'warning';
+type NotificationType = 'success' | 'error' | 'warning' | 'info';
 ```
 
 ### Theme Options
@@ -150,6 +164,9 @@ showFailure(message: string, options?: Partial<NotificationConfig>): MatDialogRe
 
 // Show warning notification
 showWarning(message: string, options?: Partial<NotificationConfig>): MatDialogRef<any>
+
+// Show info notification
+showInfo(message: string, options?: Partial<NotificationConfig>): MatDialogRef<any>
 ```
 
 ### Management Methods
@@ -215,6 +232,18 @@ export class EcommerceService {
       animationDuration: 500
     });
   }
+
+  // Info notification
+  showInfoNotification() {
+    this.notificationService.showInfo('Here is some information', {
+      position: 'top-left',
+      duration: 4000,
+      theme: 'dark',
+      showCloseButton: true,
+      autoClose: true,
+      animationDuration: 500
+    });
+  }
 }
 ```
 
@@ -250,6 +279,16 @@ export class UserFormComponent {
         theme: 'auto'
       });
     }
+
+    // Info notification
+    this.notificationService.showInfo('Here is some information', {
+      position: 'top-left',
+      duration: 4000,
+      theme: 'dark',
+      showCloseButton: true,
+      autoClose: true,
+      animationDuration: 500
+    });
   }
 }
 ```
@@ -336,6 +375,15 @@ export class SystemNotificationService {
       theme: 'light'
     });
   }
+
+  // Info notification
+  showInfoNotification() {
+    this.notificationService.showInfo('Here is some information', {
+      position: 'top-left',
+      duration: 4000,
+      theme: 'dark'
+    });
+  }
 }
 ```
 
@@ -366,6 +414,12 @@ export class NotificationManagerComponent {
       position: 'top-right',
       duration: 8000
     });
+
+    // Info notification
+    this.notificationService.showInfo('Here is some information', {
+      position: 'top-left',
+      duration: 4000,
+    });
   }
 
   clearSpecificNotifications() {
@@ -445,14 +499,17 @@ export class NotificationManagerComponent {
 this.notificationService.showSuccess('Data saved successfully');
 this.notificationService.showFailure('Validation error occurred');
 this.notificationService.showWarning('Session expiring soon');
+this.notificationService.showInfo('Here is some information');
 
 // ✅ Configure duration based on content importance
 this.notificationService.showSuccess('Quick action completed', { duration: 3000 });
 this.notificationService.showFailure('Critical error', { autoClose: false });
+this.notificationService.showInfo('Here is some information', { duration: 4000 });
 
 // ✅ Use consistent positioning
 this.notificationService.showSuccess('Success', { position: 'top-right' });
 this.notificationService.showFailure('Error', { position: 'top-right' });
+this.notificationService.showInfo('Here is some information', { position: 'top-left' });
 ```
 
 ### Don'ts
@@ -492,8 +549,7 @@ This project is licensed under the MIT License - see the LICENSE file for detail
 
 ## Changelog
 
-### v0.0.1
-- Initial release
+### v0.0.4
 - Success, error, and warning notification types
 - 8 positioning options
 - Theme support (light, dark, auto)

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/av-notifications",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,43 +1,19 @@
-{
-  "name": "@avoraui/av-notifications",
-  "version": "0.0.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.",
-  "keywords": [
-    "angular",
-    "notification",
-    "toast",
-    "alert",
-    "ui-component",
-    "typescript",
-    "notification-service",
-    "popup",
-    "message",
-    "avora-ui",
-    "snackbar",
-    "dialog"
-  ],
-  "author": "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"
-    }
-  }
-}
+{
+  "name": "@avoraui/av-notifications",
+  "version": "0.0.4",
+  "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": "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"
+  }
+}

package/src/lib/av-notifications.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {AvNotificationService} from './services/av-notification.service';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  providers: [
+    AvNotificationService
+  ],
+})
+
+export class AvNotificationsModule {
+
+}

package/src/lib/av-notifications.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvNotificationsModule } from './av-notifications.module';
+
+describe('AvNotificationsModule', () => {
+  let component: AvNotificationsModule;
+  let fixture: ComponentFixture<AvNotificationsModule>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AvNotificationsModule]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AvNotificationsModule);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/av-failed-notification/av-failed-notification.css

@@ -0,0 +1,180 @@
+:host {
+  display: block !important;
+}
+
+.notification-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 3rem;
+  min-width: 300px;
+  max-width: 500px;
+  border-radius: 15px;
+  padding: 16px 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(10px);
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.notification-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.notification-icon {
+  font-size: 20px !important;
+  width: 20px !important;
+  height: 20px !important;
+  flex-shrink: 0;
+}
+
+.message {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.close-button {
+  flex-shrink: 0;
+  width: 32px !important;
+  height: 32px !important;
+  margin-left: 8px;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+  border-radius: 50%;
+}
+
+.close-button:hover {
+  opacity: 1;
+}
+
+.close-button mat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px !important;
+  width: 18px !important;
+  height: 18px !important;
+}
+
+/* Position-specific styles */
+.position-top,
+.position-top-left,
+.position-top-right {
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.position-bottom,
+.position-bottom-left,
+.position-bottom-right {
+  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
+}
+
+.position-left {
+  box-shadow: 10px 0 25px rgba(0, 0, 0, 0.15);
+}
+
+.position-right {
+  box-shadow: -10px 0 25px rgba(0, 0, 0, 0.15);
+}
+
+/* ==================== LIGHT THEME ==================== */
+.failed-box.theme-light {
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  color: #dc2626;
+  border: 1px solid rgba(220, 38, 38, 0.3);
+}
+
+.failed-box.theme-light .close-button {
+  background-color: rgba(220, 38, 38, 0.15);
+  color: #dc2626;
+}
+
+.failed-box.theme-light .close-button:hover {
+  background-color: rgba(220, 38, 38, 0.25);
+  color: #b91c1c;
+}
+
+.failed-box.theme-light .notification-icon {
+  color: #dc2626;
+}
+
+/* ==================== DARK THEME ==================== */
+.failed-box.theme-dark {
+  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
+  color: #fca5a5;
+  border: 1px solid rgba(252, 165, 165, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.failed-box.theme-dark .close-button {
+  background-color: rgba(252, 165, 165, 0.15);
+  color: #fca5a5;
+}
+
+.failed-box.theme-dark .close-button:hover {
+  background-color: rgba(252, 165, 165, 0.25);
+  color: #fbbf24;
+}
+
+.failed-box.theme-dark .notification-icon {
+  color: #fca5a5;
+}
+
+.failed-box.theme-dark .message {
+  color: #fca5a5;
+}
+
+/* ==================== RESPONSIVE DESIGN ==================== */
+@media (max-width: 768px) {
+  .notification-box {
+    min-width: 280px;
+    max-width: calc(100vw - 40px);
+    margin: 0 20px;
+  }
+
+  .message {
+    font-size: 13px;
+  }
+}
+
+/* ==================== DIALOG OVERLAY CUSTOMIZATION ==================== */
+>>> .notification-dialog .mat-mdc-dialog-container {
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+>>> .notification-dialog .mat-mdc-dialog-surface {
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+>>> .mdc-dialog--open .mat-mdc-dialog-surface {
+  border-radius: 15px !important;
+}
+
+>>> .mdc-dialog--closing .mat-mdc-dialog-surface {
+  border-radius: 15px !important;
+}
+
+/* ==================== THEME TRANSITION ANIMATIONS ==================== */
+.notification-box {
+  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.close-button {
+  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
+}
+
+.notification-icon,
+.message {
+  transition: color 0.3s ease;
+}

package/src/lib/components/av-failed-notification/av-failed-notification.html

@@ -0,0 +1,16 @@
+<div mat-dialog-content
+     class="notification-box failed-box"
+     [class]="getNotificationClasses()"
+     [@notificationAnimation]>
+
+  <div class="notification-content">
+    <mat-icon class="notification-icon">error</mat-icon>
+    <span class="message">{{ config.message }}</span>
+  </div>
+
+  @if (config.showCloseButton) {
+    <button mat-icon-button class="close-button" (click)="close()">
+      <mat-icon>close</mat-icon>
+    </button>
+  }
+</div>

package/src/lib/components/av-failed-notification/av-failed-notification.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvFailedNotification } from './av-failed-notification';
+
+describe('AvFailedNotification', () => {
+  let component: AvFailedNotification;
+  let fixture: ComponentFixture<AvFailedNotification>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AvFailedNotification]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AvFailedNotification);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});