lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/shared/services/layout.service.ts

@@ -0,0 +1,179 @@
+import { Injectable, effect, signal, computed } from '@angular/core';
+import { Subject } from 'rxjs';
+
+export interface layoutConfig {
+    preset?: string;
+    primary?: string;
+    surface?: string | undefined | null;
+    darkTheme?: boolean;
+    menuMode?: string;
+}
+
+interface LayoutState {
+    staticMenuDesktopInactive?: boolean;
+    overlayMenuActive?: boolean;
+    configSidebarVisible?: boolean;
+    staticMenuMobileActive?: boolean;
+    menuHoverActive?: boolean;
+}
+
+interface MenuChangeEvent {
+    key: string;
+    routeEvent?: boolean;
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LayoutService {
+    _config: layoutConfig = {
+        preset: 'Aura',
+        primary: 'emerald',
+        surface: null,
+        darkTheme: false,
+        menuMode: 'static'
+    };
+
+    _state: LayoutState = {
+        staticMenuDesktopInactive: false,
+        overlayMenuActive: false,
+        configSidebarVisible: false,
+        staticMenuMobileActive: false,
+        menuHoverActive: false
+    };
+
+    layoutConfig = signal<layoutConfig>(this._config);
+
+    layoutState = signal<LayoutState>(this._state);
+
+    private configUpdate = new Subject<layoutConfig>();
+
+    private overlayOpen = new Subject<unknown>();
+
+    private menuSource = new Subject<MenuChangeEvent>();
+
+    private resetSource = new Subject();
+
+    menuSource$ = this.menuSource.asObservable();
+
+    resetSource$ = this.resetSource.asObservable();
+
+    configUpdate$ = this.configUpdate.asObservable();
+
+    overlayOpen$ = this.overlayOpen.asObservable();
+
+    theme = computed(() => (this.layoutConfig()?.darkTheme ? 'light' : 'dark'));
+
+    isSidebarActive = computed(() => this.layoutState().overlayMenuActive || this.layoutState().staticMenuMobileActive);
+
+    isDarkTheme = computed(() => this.layoutConfig().darkTheme);
+
+    getPrimary = computed(() => this.layoutConfig().primary);
+
+    getSurface = computed(() => this.layoutConfig().surface);
+
+    isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay');
+
+    transitionComplete = signal<boolean>(false);
+
+    private initialized = false;
+
+    constructor() {
+        effect(() => {
+            const config = this.layoutConfig();
+            if (config) {
+                this.onConfigUpdate();
+            }
+        });
+
+        effect(() => {
+            const config = this.layoutConfig();
+
+            if (!this.initialized || !config) {
+                this.initialized = true;
+                return;
+            }
+
+            this.handleDarkModeTransition(config);
+        });
+    }
+
+    private handleDarkModeTransition(config: layoutConfig): void {
+        if ((document as any).startViewTransition) {
+            this.startViewTransition(config);
+        } else {
+            this.toggleDarkMode(config);
+            this.onTransitionEnd();
+        }
+    }
+
+    private startViewTransition(config: layoutConfig): void {
+        const transition = (document as any).startViewTransition(() => {
+            this.toggleDarkMode(config);
+        });
+
+        transition.ready
+            .then(() => {
+                this.onTransitionEnd();
+            })
+            .catch(() => {});
+    }
+
+    toggleDarkMode(config?: layoutConfig): void {
+        const _config = config || this.layoutConfig();
+        if (_config.darkTheme) {
+            document.documentElement.classList.add('app-dark');
+        } else {
+            document.documentElement.classList.remove('app-dark');
+        }
+    }
+
+    private onTransitionEnd() {
+        this.transitionComplete.set(true);
+        setTimeout(() => {
+            this.transitionComplete.set(false);
+        });
+    }
+
+    onMenuToggle() {
+        if (this.isOverlay()) {
+            this.layoutState.update((prev) => ({ ...prev, overlayMenuActive: !this.layoutState().overlayMenuActive }));
+
+            if (this.layoutState().overlayMenuActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+
+        if (this.isDesktop()) {
+            this.layoutState.update((prev) => ({ ...prev, staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive }));
+        } else {
+            this.layoutState.update((prev) => ({ ...prev, staticMenuMobileActive: !this.layoutState().staticMenuMobileActive }));
+
+            if (this.layoutState().staticMenuMobileActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+    }
+
+    isDesktop() {
+        // Usar matchMedia para detectar correctamente el breakpoint independientemente del zoom/UA
+        return !window.matchMedia('(max-width: 991px)').matches;
+    }
+
+    isMobile() {
+        return window.matchMedia('(max-width: 991px)').matches;
+    }
+
+    onConfigUpdate() {
+        this._config = { ...this.layoutConfig() };
+        this.configUpdate.next(this.layoutConfig());
+    }
+
+    onMenuStateChange(event: MenuChangeEvent) {
+        this.menuSource.next(event);
+    }
+
+    reset() {
+        this.resetSource.next(true);
+    }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/services/meta-data.service.ts/meta-data.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class MetaDataService {
+  constructor() {}
+
+  /**
+   * Devuelve los metadatos completos para cualquier operación.
+   * @param topic nombre del topic o ruta del topic kafka
+   * @param proceso Operación: 'listar' | 'guardar' | 'eliminar'
+   */
+  get(topic: string, proceso: 'listar' | 'guardar' | 'eliminar' = 'listar') {
+    // Aquí puedes reemplazar con lógica real para obtener ID del negocio y usuario
+    const idBusiness = this.getIdBusinessFromSession();
+    const idDatosUsuario = this.getIdDatosUsuarioFromSession();
+
+    return {
+      ip: '127.0.0.1', // opcional: luego dinámico
+      dominio: 'app',
+      usuario: 'admin',
+      idBusiness,
+      idDatosUsuario,
+      topic,
+      proceso,
+    };
+  }
+
+  public getIdBusinessFromSession(): string | number {
+    // lógica real: por ejemplo desde localStorage o servicio de sesión
+    return '1'; // ejemplo 1 bussiness de momento hasta que se aplique lógica real
+  }
+
+  public getIdDatosUsuarioFromSession(): string {
+    // lógica real: por ejemplo desde token JWT o servicio de sesión
+    return 'userX';
+  }
+}