@smartsoft001-mobilems/angular 2.14.0 → 2.15.0

package/README.md

@@ -0,0 +1,144 @@
+# @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

package/fesm2022/smartsoft001-mobilems-angular.mjs

@@ -1529,6 +1529,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             args: [{ selector: 'smart-mobilems-footer', standalone: true, imports: [], template: `` }]
         }] });
 
+class HeaderComponent {
+    constructor() {
+        this.configsFacade = inject(ConfigsFacade);
+        this.router = inject(Router);
+        this.platformId = inject(PLATFORM_ID);
+        this.config = computed(() => this.configsFacade.data, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.isMobile = computed(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return false;
+            }
+            return typeof window !== 'undefined' && window.innerWidth <= 640;
+        }, ...(ngDevMode ? [{ debugName: "isMobile" }] : []));
+        this.showWcagConfig = signal(false, ...(ngDevMode ? [{ debugName: "showWcagConfig" }] : []));
+        this.showSearchPanel = signal(false, ...(ngDevMode ? [{ debugName: "showSearchPanel" }] : []));
+        this.user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
+        this.localCollectionCount = signal(0, ...(ngDevMode ? [{ debugName: "localCollectionCount" }] : []));
+        this.headerConfig = computed(() => {
+            const config = this.config();
+            return config?.theme ?? {};
+        }, ...(ngDevMode ? [{ debugName: "headerConfig" }] : []));
+        this.isWcagVisible = computed(() => {
+            return (this.showWcagConfig() &&
+                this.headerConfig()?.header?.showWcagConfig !== false);
+        }, ...(ngDevMode ? [{ debugName: "isWcagVisible" }] : []));
+        this.isSearchVisible = computed(() => {
+            return this.headerConfig()?.header?.showSearch !== false;
+        }, ...(ngDevMode ? [{ debugName: "isSearchVisible" }] : []));
+        this.isLocalCollectionVisible = computed(() => {
+            return this.headerConfig()?.header?.showLocalCollection !== false;
+        }, ...(ngDevMode ? [{ debugName: "isLocalCollectionVisible" }] : []));
+        this.isLanguageSelectorVisible = computed(() => {
+            return this.headerConfig()?.header?.showLanguageSelector !== false;
+        }, ...(ngDevMode ? [{ debugName: "isLanguageSelectorVisible" }] : []));
+        this.isUserAccountVisible = computed(() => {
+            return this.headerConfig()?.header?.showUserAccount !== false;
+        }, ...(ngDevMode ? [{ debugName: "isUserAccountVisible" }] : []));
+    }
+    toggleWcagConfig() {
+        this.showWcagConfig.update((value) => !value);
+    }
+    toggleSearchPanel() {
+        this.showSearchPanel.update((value) => !value);
+    }
+    onWcagCloseButtonEvent(closed) {
+        this.showWcagConfig.set(!closed);
+    }
+    onSearchPanelButtonEvent(opened) {
+        this.showSearchPanel.set(opened);
+    }
+    routeToLogin() {
+        this.router.navigate(['/login']);
+    }
+    routeToUserAccount() {
+        this.router.navigate(['/profile']);
+    }
+    routeToLocalCollection() {
+        this.router.navigate(['/my-collection']);
+    }
+    setUser(user) {
+        this.user.set(user);
+    }
+    setLocalCollectionCount(count) {
+        this.localCollectionCount.set(count);
+    }
+    getUser() {
+        return this.user();
+    }
+    getLocalCollectionCount() {
+        return this.localCollectionCount();
+    }
+    updateConfig() {
+        const current = this.config();
+        if (!current)
+            return;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: HeaderComponent, isStandalone: true, selector: "smart-mobilems-header", ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-mobilems-header', standalone: true, imports: [], template: `` }]
+        }] });
+
 const COMPONENTS = [AppComponent];
 
 /**
@@ -1778,5 +1861,5 @@ const unauthorizedGuard = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { AppComponent, AuthStorageService, COMPONENTS, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HoverDirective, ImageBox, ListMode, MetaService, ModalContainerComponent, ModalRef, ModalService, PageComponent, SERVICES, ScrollTopComponent, ScrollableDirective, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, authenticationGuard, environment, setTranslationsAndLang, unauthorizedGuard };
+export { AppComponent, AuthStorageService, COMPONENTS, ConfigsFacade, ConfigsService, ContrastService, CrudBaseService, DIRECTIVES, DictionaryService, FileUrlService, FiltersBaseComponent, FiltersContext, FooterComponent, GameType, GlobalService, HeaderComponent, HoverDirective, ImageBox, ListMode, MetaService, ModalContainerComponent, ModalRef, ModalService, PageComponent, SERVICES, ScrollTopComponent, ScrollableDirective, SeoService, SettingsService, SharedConfig, SharedModule, StyleService, TRANSLATE_DATA_PL, TranslationService, WcagService, authenticationGuard, environment, setTranslationsAndLang, unauthorizedGuard };
 //# sourceMappingURL=smartsoft001-mobilems-angular.mjs.map