mesauth-angular 1.1.4 → 1.1.6

package/package.json

@@ -1,37 +1,44 @@
-{
-  "name": "mesauth-angular",
-  "version": "1.1.4",
-  "description": "Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications with dark/light theme support",
-  "main": "dist/fesm2022/mesauth-angular.mjs",
-  "types": "dist/index.d.ts",
-  "files": ["dist"],
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json",
-    "prepare": "npm run build"    
-  },
-  "keywords": ["angular","signalr","notifications","auth","mes"],
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/core": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "rxjs": "^7"
-  },
-  "dependencies": {
-    "@microsoft/signalr": "^7.0.0",
-    "rxjs": "^7.5.0"
-  },
-  "devDependencies": {
-    "@angular/compiler-cli": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "typescript": "~5.8.0",
-    "tslib": "^2.0.0",
-    "ng-packagr": "^20.0.0"
-  },
-  "angularCompilerOptions": {
-    "enableIvy": true
-  }
-}
+{
+  "name": "mesauth-angular",
+  "version": "1.1.6",
+  "description": "Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications with dark/light theme support",
+  "main": "dist/fesm2022/mesauth-angular.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "angular",
+    "signalr",
+    "notifications",
+    "auth",
+    "mes"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "rxjs": "^7"
+  },
+  "dependencies": {
+    "@microsoft/signalr": "^7.0.0",
+    "rxjs": "^7.5.0",
+    "tslib": "^2.3.0"
+  },
+  "angularCompilerOptions": {
+    "enableIvy": true
+  },
+  "module": "fesm2022/mesauth-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/mesauth-angular.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/dist/README.md

@@ -1,291 +0,0 @@
-# mesauth-angular
-
-Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications with dark/light theme support.
-
-## Changelog
-
-### v1.1.0 (2026-01-21) - **Major Update**
-- 🚀 **New `provideMesAuth()` Function**: Simplified setup with a single function call
-- ✨ **Functional Interceptor**: New `mesAuthInterceptor` for better compatibility with standalone apps
-- 📦 **Automatic Initialization**: `provideMesAuth()` handles service initialization via `APP_INITIALIZER`
-- 🔧 **Simplified API**: Just pass `apiBaseUrl` and `userBaseUrl` - no manual DI required
-
-### v1.0.1 (2026-01-21)
-- 🔧 Internal refactoring for better module compatibility
-
-### v0.2.28 (2026-01-19)
-- ✨ **Enhanced Avatar Support**: Direct `avatarPath` usage from user data for instant display without backend calls
-- 🔄 **Improved Avatar Refresh**: Timestamp-based cache busting prevents request cancellation issues
-- 🎯 **Better Change Detection**: Signal-based user updates with `ChangeDetectorRef` for reliable UI updates
-
-### v0.2.27 (2026-01-19)
-- 🐛 Fixed avatar refresh issues in header components
-- 📦 Improved build process and dependencies
-
-## Features
-
-- 🔐 **Authentication**: User login/logout with API integration
-- 🔔 **Real-time Notifications**: SignalR integration for live notifications
-- 🎨 **Dark/Light Theme**: Automatic theme detection and support
-- 🖼️ **Avatar Support**: Direct API-based avatar loading
-- 🍞 **Toast Notifications**: In-app notification toasts
-- 🛡️ **HTTP Interceptor**: Automatic 401/403 error handling with redirects
-
-## Quick Start (v1.1.0+)
-
-### 1. Install
-
-```bash
-npm install mesauth-angular
-```
-
-### 2. Configure in app.config.ts (Recommended for Angular 14+)
-
-```ts
-import { ApplicationConfig } from '@angular/core';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { provideMesAuth, mesAuthInterceptor } from 'mesauth-angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideHttpClient(
-      withInterceptors([mesAuthInterceptor])  // Handles 401/403 redirects
-    ),
-    provideMesAuth({
-      apiBaseUrl: 'https://mes.kefico.vn/auth',
-      userBaseUrl: 'https://mes.kefico.vn/x'   // For login/403 redirects
-    })
-  ]
-};
-```
-
-That's it! The library handles:
-- Service initialization via `APP_INITIALIZER`
-- `HttpClient` and `Router` injection automatically
-- 401 → redirects to `{userBaseUrl}/login?returnUrl=...`
-- 403 → redirects to `{userBaseUrl}/403?returnUrl=...`
-
-### 3. Use in Components
-
-```ts
-import { MesAuthService } from 'mesauth-angular';
-
-@Component({...})
-export class MyComponent {
-  private auth = inject(MesAuthService);
-
-  // Observable streams
-  currentUser$ = this.auth.currentUser$;
-  notifications$ = this.auth.notifications$;
-
-  logout() {
-    this.auth.logout().subscribe();
-  }
-}
-```
-
-## Configuration Options
-
-```ts
-interface MesAuthConfig {
-  apiBaseUrl: string;      // Required: MesAuth API base URL
-  userBaseUrl?: string;    // Optional: Base URL for login/403 redirects
-  withCredentials?: boolean; // Optional: Send cookies (default: true)
-}
-```
-
-## Theme Support
-
-The library automatically detects and adapts to your application's theme:
-
-### Automatic Theme Detection
-The library checks for theme indicators on the `<html>` element:
-- `class="dark"`
-- `data-theme="dark"`
-- `theme="dark"`
-- `data-coreui-theme="dark"`
-
-### Dynamic Theme Changes
-Theme changes are detected in real-time using `MutationObserver`, so components automatically update when your app switches themes.
-
-### Manual Theme Control
-```ts
-import { ThemeService } from 'mesauth-angular';
-
-// Check current theme
-const currentTheme = themeService.currentTheme; // 'light' | 'dark'
-
-// Manually set theme
-themeService.setTheme('dark');
-
-// Listen for theme changes
-themeService.currentTheme$.subscribe(theme => {
-  console.log('Theme changed to:', theme);
-});
-```
-
-## Avatar Loading
-
-Avatars are loaded efficiently using multiple strategies:
-
-### Primary Method: Direct Path Usage
-If the user object contains an `avatarPath`, it's used directly:
-- **Full URLs**: Used as-is (e.g., `https://example.com/avatar.jpg`)
-- **Relative Paths**: Combined with API base URL (e.g., `/uploads/avatar.jpg` → `{apiBaseUrl}/uploads/avatar.jpg`)
-
-### Fallback Method: API Endpoint
-If no `avatarPath` is available, avatars are loaded via API:
-- **API Endpoint**: `GET {apiBaseUrl}/auth/{userId}/avatar`
-- **Authentication**: Uses the same credentials as other API calls
-
-### Cache Busting
-Avatar URLs include timestamps to prevent browser caching issues during updates:
-- Automatic refresh when user data changes
-- Manual refresh triggers for upload/delete operations
-
-### Fallback Service
-- **UI Avatars**: Generates initials-based avatars if no user data available
-- **Authentication**: Not required for fallback avatars
-
-## Components
-
-**Note:** All components are standalone and can be imported directly.
-
-### ma-user-profile
-
-A reusable Angular component for displaying the current user's profile information, with options for navigation and logout.
-
-- **Description**: Renders user details (e.g., name, avatar) fetched via the MesAuthService. Supports custom event handlers for navigation and logout actions.
-- **Inputs**: None (data is sourced from the MesAuthService).
-- **Outputs**:
-  - `onNavigate`: Emits an event when the user triggers navigation (e.g., to a profile page). Pass a handler to define behavior.
-  - `onLogout`: Emits an event when the user logs out. Pass a handler to perform logout logic (e.g., clear tokens, redirect).
-- **Usage Example**:
-
-    ```html
-    <ma-user-profile
-      (onNavigate)="handleNavigation($event)"
-      (onLogout)="handleLogout()">
-    </ma-user-profile>
-    ```
-
-    In your component's TypeScript file:
-
-    ```ts
-    handleNavigation(event: any) {
-      // Navigate to user profile page
-      this.router.navigate(['/profile']);
-    }
-
-    handleLogout() {
-      // Perform logout, e.g., clear session and redirect
-      this.mesAuth.logout(); // Assuming a logout method exists
-      this.router.navigate(['/login']);
-    }
-    ```
-
-### ma-notification-panel
-
-A standalone component for displaying a slide-out notification panel with real-time updates.
-
-- **Description**: Shows a list of notifications, allows marking as read/delete, and integrates with toast notifications for new alerts.
-- **Inputs**: None.
-- **Outputs**: None (uses internal methods for actions).
-- **Usage Example**:
-
-    ```html
-    <ma-notification-panel #notificationPanel></ma-notification-panel>
-    ```
-
-    In your component:
-
-    ```ts
-    // To open the panel
-    notificationPanel.open();
-    ```
-
-## Migration Guide
-
-### Upgrading from v0.x to v1.1.0+
-
-The setup has been greatly simplified. Here's how to migrate:
-
-**Before (v0.x):**
-```ts
-// app.config.ts - OLD WAY
-import { MesAuthModule, MesAuthService } from 'mesauth-angular';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    importProvidersFrom(MesAuthModule),
-    { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
-  ]
-};
-
-// app.component.ts - OLD WAY
-export class AppComponent {
-  constructor() {
-    this.mesAuthService.init({
-      apiBaseUrl: '...',
-      userBaseUrl: '...'
-    }, inject(HttpClient), inject(Router));
-  }
-}
-```
-
-**After (v1.1.0+):**
-```ts
-// app.config.ts - NEW WAY (everything in one place!)
-import { provideMesAuth, mesAuthInterceptor } from 'mesauth-angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideHttpClient(withInterceptors([mesAuthInterceptor])),
-    provideMesAuth({
-      apiBaseUrl: 'https://mes.kefico.vn/auth',
-      userBaseUrl: 'https://mes.kefico.vn/x'
-    })
-  ]
-};
-
-// app.component.ts - No init() needed!
-export class AppComponent {
-  // Just inject and use - no manual initialization required
-}
-```
-
-**Key Changes:**
-- `provideMesAuth()` replaces `MesAuthModule` + manual `init()` call
-- `mesAuthInterceptor` (functional) replaces `MesAuthInterceptor` (class-based)
-- No need to inject `HttpClient` or `Router` manually
-- Configuration moved from `AppComponent` to `app.config.ts`
-
-## Troubleshooting
-
-### JIT Compiler Error in Production or AOT Mode
-If you encounter an error like "The injectable 'MesAuthService' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available," this typically occurs because:
-- The package is being imported directly from source code (e.g., during development) without building it first.
-- The client app is running in AOT (Ahead-of-Time) compilation mode, which requires pre-compiled libraries.
-
-**Solutions:**
-1. **Build the package for production/AOT compatibility:**
-   - Ensure you have built the package using `npm run build` (which uses ng-packagr or similar to generate AOT-ready code).
-   - Install the built package via npm (e.g., from a local tarball or registry) instead of linking to the source folder.
-
-2. **For development (if you must link to source):**
-   - Switch your Angular app to JIT mode by bootstrapping with `@angular/platform-browser-dynamic` instead of `@angular/platform-browser`.
-
-3. **Verify imports:**
-   - Ensure you're importing from the built package (e.g., `import { MesAuthService } from 'mesauth-angular';`) and not from the `src` folder.
-
-### Components Appear Empty
-If components like `ma-user` or `ma-user-profile` render as empty:
-- Ensure `provideMesAuth()` is called in your `app.config.ts`.
-- Check browser console for logs from components.
-- If `currentUser` is null, the component shows a login button—verify the API returns user data.
-
-## Notes
-- The service expects an endpoint `GET {apiBaseUrl}/auth/me` that returns the current user.
-- Avatar endpoint: `GET {apiBaseUrl}/auth/{userId}/avatar`
-- SignalR events used: `ReceiveNotification` (adjust to your backend).