@smartsoft001-mobilems/angular 2.13.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

@@ -1,13 +1,14 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, inject, PLATFORM_ID, signal, effect, computed, Component, Directive, contentChild, HostListener, Inject, ElementRef, input, APP_INITIALIZER, NgModule } from '@angular/core';
+import { Injectable, inject, PLATFORM_ID, signal, effect, computed, input, output, HostListener, Component, ApplicationRef, EnvironmentInjector, createComponent, Directive, contentChild, Inject, ElementRef, APP_INITIALIZER, NgModule } from '@angular/core';
 import { Meta, Title, DomSanitizer } from '@angular/platform-browser';
 import { StyleService as StyleService$1, ReduxAction, AppBaseComponent, PageBaseComponent, BaseComponent } from '@smartsoft001/angular';
 import { HttpClient } from '@angular/common/http';
 import * as moment from 'moment';
-import { lastValueFrom, combineLatest, firstValueFrom, of, throwError } from 'rxjs';
+import { lastValueFrom, combineLatest, firstValueFrom, Subject, of, throwError } from 'rxjs';
 import { map, filter, catchError } from 'rxjs/operators';
-import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
 import { Router, ActivatedRoute, NavigationEnd, RouterOutlet, RouterModule } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { CrudService, CrudFacade } from '@smartsoft001/crud-shell-angular';
@@ -555,6 +556,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Container component for modal overlay and content.
+ * Handles backdrop clicks and ESC key press.
+ */
+class ModalContainerComponent {
+    constructor() {
+        /**
+         * Template to render inside the modal content area.
+         */
+        this.contentTemplate = input.required(...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+        /**
+         * Emits when backdrop is clicked or ESC key is pressed.
+         */
+        this.backdropClick = output();
+    }
+    /**
+     * Listens for ESC key press on document level.
+     */
+    onEscapeKey() {
+        this.backdropClick.emit();
+    }
+    /**
+     * Handles backdrop click event.
+     * @param _event Mouse click event
+     */
+    onBackdropClick(_event) {
+        this.backdropClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.0", type: ModalContainerComponent, isStandalone: true, selector: "smart-mobilems-modal-container", inputs: { contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: `
+    <div
+      class="smart-fixed smart-inset-0 smart-bg-black smart-bg-opacity-50 smart-flex smart-items-center smart-justify-center smart-z-50"
+      (click)="onBackdropClick($event)"
+    >
+      <div
+        class="smart-bg-white smart-rounded-lg smart-shadow-xl smart-max-w-2xl smart-w-full smart-m-4 smart-max-h-[90vh] smart-overflow-auto"
+        (click)="$event.stopPropagation()"
+      >
+        <div class="smart-p-6">
+          <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ModalContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-mobilems-modal-container',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div
+      class="smart-fixed smart-inset-0 smart-bg-black smart-bg-opacity-50 smart-flex smart-items-center smart-justify-center smart-z-50"
+      (click)="onBackdropClick($event)"
+    >
+      <div
+        class="smart-bg-white smart-rounded-lg smart-shadow-xl smart-max-w-2xl smart-w-full smart-m-4 smart-max-h-[90vh] smart-overflow-auto"
+        (click)="$event.stopPropagation()"
+      >
+        <div class="smart-p-6">
+          <ng-container *ngTemplateOutlet="contentTemplate()"></ng-container>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Reference to an opened modal.
+ * Provides methods to close the modal and observe its lifecycle.
+ */
+class ModalRef {
+    constructor(closeCallback) {
+        this.closeCallback = closeCallback;
+        this._afterClosed = new Subject();
+        /**
+         * Observable that emits when the modal has been closed.
+         * Completes after emission.
+         */
+        this.afterClosed$ = this._afterClosed.asObservable();
+    }
+    /**
+     * Closes the modal and triggers cleanup.
+     * Safe to call multiple times.
+     */
+    close() {
+        this.closeCallback();
+        this._afterClosed.next();
+        this._afterClosed.complete();
+    }
+}
+
+/**
+ * Service for managing modal dialogs.
+ * Provides methods to open, close, and manage modal instances.
+ */
+class ModalService {
+    constructor() {
+        this.appRef = inject(ApplicationRef);
+        this.injector = inject(EnvironmentInjector);
+        this.document = inject(DOCUMENT);
+        this.activeModals = [];
+    }
+    /**
+     * Opens a modal with the provided template.
+     * @param template TemplateRef to render inside the modal
+     * @returns ModalRef instance for controlling the modal
+     */
+    open(template) {
+        const componentRef = createComponent(ModalContainerComponent, {
+            environmentInjector: this.injector,
+        });
+        componentRef.setInput('contentTemplate', template);
+        const modalRef = new ModalRef(() => this.closeModal(componentRef));
+        componentRef.instance.backdropClick.subscribe(() => {
+            modalRef.close();
+        });
+        this.appRef.attachView(componentRef.hostView);
+        const domElem = componentRef.hostView.rootNodes[0];
+        this.document.body.appendChild(domElem);
+        componentRef.changeDetectorRef.detectChanges();
+        this.activeModals.push(componentRef);
+        return modalRef;
+    }
+    /**
+     * Closes a specific modal instance.
+     * @param componentRef Component reference to close
+     */
+    closeModal(componentRef) {
+        const index = this.activeModals.indexOf(componentRef);
+        if (index > -1) {
+            this.activeModals.splice(index, 1);
+        }
+        this.appRef.detachView(componentRef.hostView);
+        componentRef.destroy();
+    }
+    /**
+     * Closes all currently open modals.
+     */
+    closeAll() {
+        const modals = [...this.activeModals];
+        modals.forEach((componentRef) => this.closeModal(componentRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class SeoService {
     constructor() {
         this.title = inject(Title);
@@ -892,6 +1051,7 @@ const SERVICES = [
     MetaService,
     SeoService,
     StyleService,
+    ModalService,
 ];
 
 class ConfigsFacade {
@@ -1369,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];
 
 /**
@@ -1618,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, 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