mesauth-angular 0.1.6 → 0.1.8

package/README.md

@@ -11,28 +11,37 @@ Angular helper library to connect to a backend API and SignalR hub to surface th
     npm install ../path/to/mesauth-angular
     ```
 
-2. Provide the service in your app:
-   - **For module-based apps**: Add `MesAuthService` to the providers in your `AppModule` or a feature module.
+2. Provide the service and import components:
+   - **For standalone components/apps**: Import `MesAuthModule` in your standalone component or `app.config.ts`.
      ```ts
-     import { MesAuthService } from 'mesauth-angular';
+     import { MesAuthModule } from 'mesauth-angular';
 
-     @NgModule({
-       // ... other module config ...
-       providers: [MesAuthService]
+     @Component({
+       standalone: true,
+       imports: [MesAuthModule, /* other imports */],
+       // ...
      })
-     export class AppModule { }
+     export class MyComponent {}
      ```
-   - **For standalone apps**: Add `MesAuthService` to the providers in `app.config.ts`.
+     Or in `app.config.ts`:
      ```ts
-     import { MesAuthService } from 'mesauth-angular';
+     import { MesAuthModule } from 'mesauth-angular';
 
      export const appConfig: ApplicationConfig = {
-       providers: [
-         // ... other providers ...
-         MesAuthService
-       ]
+       imports: [MesAuthModule],
+       // ... other config
      };
      ```
+   - **For module-based apps**: Import `MesAuthModule` in your `AppModule` or feature module.
+     ```ts
+     import { MesAuthModule } from 'mesauth-angular';
+
+     @NgModule({
+       imports: [MesAuthModule],
+       // ... other config
+     })
+     export class AppModule { }
+     ```
 
 3. (Optional) Provide the HTTP interceptor to handle 403 errors:
    - The interceptor redirects to `${userBaseUrl}/403?returnUrl=encodedCurrentUrl` using `window.location.href` for external URLs (since `userBaseUrl` may be outside the client app).
@@ -146,6 +155,8 @@ Angular helper library to connect to a backend API and SignalR hub to surface th
 
 ## Components
 
+**Note:** All components are standalone and can only be imported in standalone components or apps. If your app uses NgModules, use dynamic imports or convert to standalone.
+
 ### ma-user-profile
 
 A reusable Angular component for displaying the current user's profile information, with options for navigation and logout.
@@ -179,6 +190,26 @@ A reusable Angular component for displaying the current user's profile informati
     }
     ```
 
+### 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();
+    ```
+
 ## Notes
 - The service expects an endpoint `GET /api/user/current` that returns the current user.
 - SignalR events used: `UserUpdated` and `NewNotification` (adjust to your backend).
@@ -212,3 +243,23 @@ If you encounter an error like "The injectable 'MesAuthService' needs to be comp
    - If using standalone components, confirm the service is available in the injection context.
 
 If issues persist, check your Angular version compatibility and ensure the package's `package.json` includes the correct entry points for AOT.
+
+### Components Appear Empty
+If components like `ma-user` or `ma-user-profile` render as empty:
+- Ensure `MesAuthService` is provided in your app (see Quick Start step 2).
+- Check browser console for logs from components (e.g., "UserProfileComponent: currentUser").
+- If `currentUser` is null, the component shows a login button—verify the service is initialized and the API returns user data.
+- For standalone apps, confirm `APP_INITIALIZER` or manual init is used.
+
+---
+
+# Dynamic import in a module-based component
+import { Component } from '@angular/core';
+
+@Component({...})
+export class DefaultHeaderComponent {
+  async ngOnInit() {
+    const { MaUserComponent } = await import('mesauth-angular');
+    // Use it dynamically
+  }
+}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export * from './mes-auth.service';
 export * from './mes-auth.interceptor';
+export * from './mes-auth.module';
 export * from './user-profile.component';
 export * from './ma-user.component';
 export * from './notification-badge.component';
-export * from './toast.service';
 export * from './notification-panel.component';
+export * from './toast.service';
 export * from './toast-container.component';

package/dist/index.js

@@ -1,8 +1,9 @@
 export * from './mes-auth.service';
 export * from './mes-auth.interceptor';
+export * from './mes-auth.module';
 export * from './user-profile.component';
 export * from './ma-user.component';
 export * from './notification-badge.component';
-export * from './toast.service';
 export * from './notification-panel.component';
+export * from './toast.service';
 export * from './toast-container.component';

package/dist/mes-auth.module.d.ts

@@ -0,0 +1,2 @@
+export declare class MesAuthModule {
+}

package/dist/mes-auth.module.js

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { NgModule } from '@angular/core';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { MesAuthService } from './mes-auth.service';
+import { MesAuthInterceptor } from './mes-auth.interceptor';
+import { UserProfileComponent } from './user-profile.component';
+import { MaUserComponent } from './ma-user.component';
+import { NotificationBadgeComponent } from './notification-badge.component';
+import { NotificationPanelComponent } from './notification-panel.component';
+// Import ToastContainerComponent if available
+let MesAuthModule = class MesAuthModule {
+};
+MesAuthModule = __decorate([
+    NgModule({
+        providers: [
+            MesAuthService,
+            { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
+        ],
+        exports: [
+            UserProfileComponent,
+            MaUserComponent,
+            NotificationBadgeComponent,
+            NotificationPanelComponent
+        ]
+    })
+], MesAuthModule);
+export { MesAuthModule };

package/dist/notification-panel.component.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgIf, NgFor } from '@angular/common';
 import { MesAuthService } from './mes-auth.service';
 import { ToastService } from './toast.service';
 import { Subject } from 'rxjs';
@@ -101,7 +101,7 @@ NotificationPanelComponent = __decorate([
     Component({
         selector: 'ma-notification-panel',
         standalone: true,
-        imports: [CommonModule],
+        imports: [NgIf, NgFor],
         template: `
     <div class="notification-panel" [class.open]="isOpen">
       <!-- Header -->

package/dist/user-profile.component.js

@@ -24,9 +24,11 @@ let UserProfileComponent = class UserProfileComponent {
         this.destroy$ = new Subject();
     }
     ngOnInit() {
+        console.log('UserProfileComponent: Service injected?', !!this.authService);
         this.authService.currentUser$
             .pipe(takeUntil(this.destroy$))
             .subscribe(user => {
+            console.log('UserProfileComponent: currentUser', user);
             this.currentUser = user;
         });
         this.loadUnreadCount();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesauth-angular",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Angular-friendly SignalR notifier + API helper for current user and notifications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",