npm package: @smartsoft001-mobilems/angular
Description: Shared Angular functionality for the MobileMS Framework.
Latest version: 2.80.0

# @smartsoft001-mobilems/angular

Shared Angular functionality for the MobileMS Framework.

## Components

### HeaderComponent

Base header component with TypeScript logic for managing header state and navigation. Designed to be extended by child components with custom templates.

**Features:**

- WCAG configuration toggle
- Search panel toggle
- User authentication state
- Local collection counter
- Responsive mobile detection
- Configuration-driven visibility
- Modern Angular signals for reactive state

**Usage:**

```typescript
import { Component } from '@angular/core';
import { HeaderComponent } from '@smartsoft001-mobilems/angular';

@Component({
  selector: 'app-custom-header',
  standalone: true,
  imports: [],
  template: `
    <header class="smart-bg-white smart-border-b smart-border-gray-200">
      <div class="smart-container smart-mx-auto smart-px-4">
        @if (isWcagVisible()) {
        <div class="smart-py-4">
          <button
            (click)="toggleWcagConfig()"
            class="smart-px-4 smart-py-2 smart-bg-blue-500 smart-text-white smart-rounded hover:smart-bg-blue-600"
          >
            WCAG Settings
          </button>
        </div>
        } @if (user()) {
        <div class="smart-py-4">
          <span>Welcome, {{ user()?.userID }}</span>
          <button
            (click)="routeToUserAccount()"
            class="smart-ml-4 smart-px-4 smart-py-2 smart-bg-green-500 smart-text-white smart-rounded hover:smart-bg-green-600"
          >
            My Account
          </button>
        </div>
        } @else {
        <button
          (click)="routeToLogin()"
          class="smart-px-4 smart-py-2 smart-bg-gray-500 smart-text-white smart-rounded hover:smart-bg-gray-600"
        >
          Login
        </button>
        } @if (isLocalCollectionVisible()) {
        <button
          (click)="routeToLocalCollection()"
          class="smart-px-4 smart-py-2 smart-bg-purple-500 smart-text-white smart-rounded hover:smart-bg-purple-600"
        >
          My Collection ({{ localCollectionCount() }})
        </button>
        }
      </div>
    </header>
  `,
})
export class CustomHeaderComponent extends HeaderComponent {
  override ngOnInit() {
    super.ngOnInit();
    // Custom initialization logic
    this.setUser({ userID: 'john.doe@example.com' });
    this.setLocalCollectionCount(5);
  }
}
```

**API:**

**Signals:**

- `showWcagConfig: Signal<boolean>` - WCAG panel visibility state
- `showSearchPanel: Signal<boolean>` - Search panel visibility state
- `user: Signal<IHeaderUser | null>` - Current user state
- `localCollectionCount: Signal<number>` - Local collection items count

**Computed Signals:**

- `config: Signal<IHeaderConfig>` - Header configuration from ConfigsFacade
- `isMobile: Signal<boolean>` - Mobile device detection
- `headerConfig: Signal<IHeaderConfig['theme']>` - Theme-specific header config
- `isWcagVisible: Signal<boolean>` - WCAG panel visibility based on config and state
- `isSearchVisible: Signal<boolean>` - Search visibility based on config
- `isLocalCollectionVisible: Signal<boolean>` - Local collection button visibility
- `isLanguageSelectorVisible: Signal<boolean>` - Language selector visibility
- `isUserAccountVisible: Signal<boolean>` - User account button visibility

**Methods:**

- `toggleWcagConfig(): void` - Toggle WCAG configuration panel
- `toggleSearchPanel(): void` - Toggle search panel
- `onWcagCloseButtonEvent(closed: boolean): void` - Handle WCAG panel close event
- `onSearchPanelButtonEvent(opened: boolean): void` - Handle search panel open event
- `routeToLogin(): void` - Navigate to login page
- `routeToUserAccount(): void` - Navigate to user account page
- `routeToLocalCollection(): void` - Navigate to local collection page
- `setUser(user: IHeaderUser | null): void` - Set current user
- `setLocalCollectionCount(count: number): void` - Set local collection count
- `getUser(): IHeaderUser | null` - Get current user
- `getLocalCollectionCount(): number` - Get local collection count
- `updateConfig(): void` - Update header configuration

**Types:**

```typescript
export interface IHeaderUser {
  userID: string;
  [key: string]: unknown;
}

export interface IHeaderConfig {
  theme?: {
    header?: {
      showWcagConfig?: boolean;
      showSearch?: boolean;
      showLocalCollection?: boolean;
      showLanguageSelector?: boolean;
      showUserAccount?: boolean;
    };
  };
}
```

### FooterComponent

Base footer component with TypeScript logic for managing footer state and static pages. Designed to be extended by child components with custom templates.

## Services

## State Management