@smartsoft001-mobilems/angular

@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:

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:

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