shared-lib-angular 1.0.36 → 2.0.1

package/fesm2022/shared-lib-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, Input, Component, HostListener } from '@angular/core';
+import { signal, computed, Injectable, inject, input, Component, HostListener } from '@angular/core';
 import * as i1 from 'angular-oauth2-oidc';
 import { OAuthEvent } from 'angular-oauth2-oidc';
 import { BehaviorSubject, firstValueFrom, of, Observable } from 'rxjs';
@@ -20,14 +20,14 @@ import { CommonModule } from '@angular/common';
  * Versión actual de la librería @dinafi/frmk
  * Sincronizada con package.json
  */
-const VERSION = '1.0.36';
+const VERSION = '2.0.1';
 /**
  * Información completa de la versión
  */
 const VERSION_INFO = {
-    version: '1.0.36',
+    version: '2.0.1',
     name: 'shared-lib-angular',
-    buildDate: '2026-02-05T18:40:47.647Z',
+    buildDate: '2026-02-05T20:39:22.686Z',
     angular: '^20.0.0'
 };
 
@@ -73,398 +73,286 @@ const DEFAULT_LIBRARY_CONFIG = {
     requireHttps: true,
     showDebugInformation: false
 };
+
 /**
- * Token de inyección para la configuración de la librería
+ * Store centralizado de configuración del framework.
  *
- * @example
- * // En el app.config.ts o app.module.ts de la aplicación consumidora:
- * providers: [
- *   {
- *     provide: FRMK_LIBRARY_CONFIG,
- *     useValue: {
- *       configServerHost: 'config-server.miempresa.com',
- *       frontendId: 'mi-aplicacion-frontend',
- *       production: environment.production
- *     }
- *   }
- * ]
- */
-const FRMK_LIBRARY_CONFIG = new InjectionToken('FrmkLibraryConfig');
-/**
- * Función helper para crear la configuración de la librería
+ * Reemplaza las variables globales mutables (`currentAppConfig`, `libraryConfig`)
+ * con un servicio inyectable basado en signals de Angular.
  *
- * @example
- * // En el app.config.ts:
- * import { provideFrmkConfig } from '@mh-dinafi-frmk/shared-lib-angular';
+ * Ciclo de vida:
+ *   1. `initialize(config)` — llamado en APP_INITIALIZER con FrmkLibraryConfig
+ *   2. `applyServerConfig(data)` — llamado por ConfigService tras obtener datos del Config Server
+ *
+ * Todas las propiedades computadas lanzan error si se leen antes de `initialize()`.
  *
- * export const appConfig: ApplicationConfig = {
- *   providers: [
- *     provideFrmkConfig({
- *       configServerHost: environment.configServerHost,
- *       frontendId: 'mi-aplicacion'
- *     })
- *   ]
- * };
+ * @example
+ * // En APP_INITIALIZER:
+ * const store = inject(FrmkConfigStore);
+ * store.initialize(myLibraryConfig);
+ * await configService.loadConfig();          // internamente llama store.applyServerConfig()
+ * authService.initializeAuth(store.authConfig());
  */
-function provideFrmkConfig(config) {
-    return {
-        provide: FRMK_LIBRARY_CONFIG,
-        useValue: {
+class FrmkConfigStore {
+    // ── Signals internos ──────────────────────────────────────────────
+    _libraryConfig = signal(null, ...(ngDevMode ? [{ debugName: "_libraryConfig" }] : []));
+    _serverConfig = signal(null, ...(ngDevMode ? [{ debugName: "_serverConfig" }] : []));
+    // ── Estado público (read-only) ────────────────────────────────────
+    /** Indica si la librería ha sido inicializada con `initialize()`. */
+    isConfigured = computed(() => this._libraryConfig() !== null, ...(ngDevMode ? [{ debugName: "isConfigured" }] : []));
+    /** Configuración de la librería (merged con defaults). Lanza si no inicializada. */
+    libraryConfig = computed(() => {
+        const cfg = this._libraryConfig();
+        if (!cfg) {
+            throw new Error('[FRMK] La librería no ha sido configurada. ' +
+                'Llame a FrmkConfigStore.initialize() en su APP_INITIALIZER.');
+        }
+        return cfg;
+    }, ...(ngDevMode ? [{ debugName: "libraryConfig" }] : []));
+    /** Configuración del componente Login (defaults + libraryConfig.loginConfig). */
+    loginConfig = computed(() => {
+        const lib = this.libraryConfig();
+        return { ...DEFAULT_LOGIN_CONFIG, ...(lib.loginConfig || {}) };
+    }, ...(ngDevMode ? [{ debugName: "loginConfig" }] : []));
+    /** Configuración del componente Dashboard (defaults + libraryConfig.dashboardConfig). */
+    dashboardConfig = computed(() => {
+        const lib = this.libraryConfig();
+        return { ...DEFAULT_DASHBOARD_CONFIG, ...(lib.dashboardConfig || {}) };
+    }, ...(ngDevMode ? [{ debugName: "dashboardConfig" }] : []));
+    /**
+     * Configuración completa de la aplicación.
+     * Si hay datos del Config Server se aplican; en caso contrario se usan solo los defaults + libraryConfig.
+     */
+    appConfig = computed(() => {
+        const lib = this.libraryConfig(); // lanza si no inicializada
+        let config = this.createDefaultAppConfig(lib);
+        const serverData = this._serverConfig();
+        if (serverData) {
+            const mapped = this.mapConfigServerResponse(serverData, config);
+            config = this.mergeConfigurations(config, mapped);
+        }
+        return this.buildDynamicUrls(config);
+    }, ...(ngDevMode ? [{ debugName: "appConfig" }] : []));
+    /** AuthConfig de angular-oauth2-oidc derivada de appConfig. */
+    authConfig = computed(() => {
+        const app = this.appConfig();
+        return {
+            issuer: app.auth.issuer,
+            loginUrl: app.auth.loginUrl,
+            tokenEndpoint: app.auth.tokenEndpoint,
+            userinfoEndpoint: app.auth.userinfoEndpoint,
+            logoutUrl: app.auth.logoutUrl,
+            redirectUri: app.auth.redirectUri,
+            postLogoutRedirectUri: app.auth.postLogoutRedirectUri,
+            clientId: app.auth.clientId,
+            responseType: 'code',
+            scope: app.auth.scope,
+            disableAtHashCheck: true,
+            requireHttps: app.environment.requireHttps,
+            showDebugInformation: app.environment.showDebugInformation,
+            strictDiscoveryDocumentValidation: false,
+            skipIssuerCheck: true,
+            requestAccessToken: true,
+            customQueryParams: {},
+            silentRefreshTimeout: 5000,
+            timeoutFactor: 0.25,
+            sessionChecksEnabled: false,
+            clearHashAfterLogin: true,
+            oidc: true,
+            clockSkewInSec: 30,
+            disableIdTokenTimer: true
+        };
+    }, ...(ngDevMode ? [{ debugName: "authConfig" }] : []));
+    // ── Métodos públicos ──────────────────────────────────────────────
+    /**
+     * Inicializa la librería con la configuración proporcionada por la app consumidora.
+     * Debe llamarse UNA vez dentro del APP_INITIALIZER, antes de cualquier otro uso.
+     *
+     * @param config Configuración de la librería (se fusiona con DEFAULT_LIBRARY_CONFIG)
+     */
+    initialize(config) {
+        this._libraryConfig.set({
             ...DEFAULT_LIBRARY_CONFIG,
             ...config
-        }
-    };
-}
-
-// Variable global para almacenar la configuración actual
-let currentAppConfig = null;
-// Variable global para almacenar la configuración de la librería
-let libraryConfig = null;
-/**
- * Inicializa la configuración de la librería con los valores proporcionados por la aplicación
- * Esta función debe ser llamada antes de usar cualquier servicio de la librería
- *
- * @param config Configuración proporcionada por la aplicación consumidora
- */
-function initializeLibraryConfig(config) {
-    libraryConfig = {
-        ...DEFAULT_LIBRARY_CONFIG,
-        ...config
-    };
-    // Resetear la configuración actual para que se reconstruya con los nuevos valores
-    currentAppConfig = null;
-}
-/**
- * Obtiene la configuración de la librería
- * Lanza error si no ha sido inicializada
- */
-function getLibraryConfig() {
-    if (!libraryConfig) {
-        throw new Error('[FRMK] La librería no ha sido configurada. ' +
-            'Debe proporcionar FRMK_LIBRARY_CONFIG en los providers de su aplicación. ' +
-            'Ejemplo: provideFrmkConfig({ configServerHost: "...", frontendId: "..." })');
+        });
+        // Resetear server config para que appConfig se recalcule con los nuevos defaults
+        this._serverConfig.set(null);
     }
-    return libraryConfig;
-}
-/**
- * Verifica si la librería ha sido configurada
- */
-function isLibraryConfigured() {
-    return libraryConfig !== null;
-}
-/**
- * Obtiene la configuración del componente Login
- * Combina los valores por defecto con los configurados en la librería
- */
-function getLoginConfig() {
-    const libConfig = isLibraryConfigured() ? getLibraryConfig() : null;
-    return {
-        ...DEFAULT_LOGIN_CONFIG,
-        ...(libConfig?.loginConfig || {})
-    };
-}
-/**
- * Obtiene la configuración del componente Dashboard
- * Combina los valores por defecto con los configurados en la librería
- */
-function getDashboardConfig() {
-    const libConfig = isLibraryConfigured() ? getLibraryConfig() : null;
-    return {
-        ...DEFAULT_DASHBOARD_CONFIG,
-        ...(libConfig?.dashboardConfig || {})
-    };
-}
-// Función para crear la configuración por defecto usando los valores de la librería
-function createDefaultAppConfig() {
-    const libConfig = getLibraryConfig();
-    return {
-        hosts: {
-            configServer: libConfig.configServerHost,
-            authServer: '', // Leído desde Config Server
-            keycloak: '', // Leído desde Config Server
-            localApp: '' // Leído desde Config Server
-        },
-        paths: {
-            configService: libConfig.configServicePath || '/api/v1/config/service',
-            realm: libConfig.realm || 'realm-to-create'
-        },
-        configServer: {
-            url: '', // Se construirá dinámicamente
-            frontend: libConfig.frontendId
-        },
-        auth: {
-            issuer: '', // Se construirá dinámicamente
-            loginUrl: '', // Se construirá dinámicamente
-            tokenEndpoint: '', // Se construirá dinámicamente
-            userinfoEndpoint: '', // Se construirá dinámicamente
-            logoutUrl: '', // Se construirá dinámicamente
-            clientId: '',
-            redirectUri: '', // Se construirá dinámicamente
-            postLogoutRedirectUri: '', // Se construirá dinámicamente
-            silentRefreshRedirectUri: '', // Se construirá dinámicamente
-            scope: 'openid email profile'
-        },
-        authorization: {
-            baseUrl: '',
-            verifyEndpoint: '/api/v1/authz/verify-groups',
-            hierarchyEndpoint: '/api/v1/authz/hierarchy-by-component-and-groups',
-        },
-        environment: {
-            production: libConfig.production ?? false,
-            requireHttps: libConfig.requireHttps ?? true,
-            showDebugInformation: libConfig.showDebugInformation ?? false
-        }
-    };
-}
-// Getter para obtener la configuración por defecto (lazy initialization)
-function getDefaultAppConfig() {
-    return createDefaultAppConfig();
-}
-// Función para mapear la configuración del config server a la configuración de la aplicación
-function mapConfigServerResponse(configServerData) {
-    const mappedConfig = {};
-    const defaultConfig = getDefaultAppConfig();
-    // Mapear Auth URL
-    configureAuthServer();
-    // Mapear client ID
-    initializeClientId();
-    // Mapear realm
-    initializeRealmMapping();
-    // Mapear URL de autorización (authServer)
-    initializeAuthorizationConfig();
-    // Mapear scope de autorización
-    initializeAuthScope();
-    // Mapear keycloak URL
-    initializeKeycloakHost();
-    // Mapear callback URL (local app host)
-    configureLocalAppCallback();
-    // Mapear callback URL (local app host)
-    initializeHttpsSettings();
-    return mappedConfig;
-    function initializeHttpsSettings() {
-        if (configServerData["security.url.https"]) {
-            mappedConfig.environment = {
-                ...defaultConfig.environment,
-                ...(mappedConfig.environment || {}),
-                requireHttps: configServerData["security.url.https"]
-            };
-        }
+    /**
+     * Aplica los datos devueltos por el Config Server.
+     * Llamado por `ConfigService.loadConfig()` después de la petición HTTP.
+     *
+     * @param data Respuesta del Config Server (o undefined si falló la carga)
+     */
+    applyServerConfig(data) {
+        this._serverConfig.set(data ?? null);
+    }
+    // ── Lógica privada (migrada de app.config.ts) ─────────────────────
+    createDefaultAppConfig(lib) {
+        return {
+            hosts: {
+                configServer: lib.configServerHost,
+                authServer: '',
+                keycloak: '',
+                localApp: ''
+            },
+            paths: {
+                configService: lib.configServicePath || '/api/v1/config/service',
+                realm: lib.realm || 'realm-to-create'
+            },
+            configServer: {
+                url: '',
+                frontend: lib.frontendId
+            },
+            auth: {
+                issuer: '',
+                loginUrl: '',
+                tokenEndpoint: '',
+                userinfoEndpoint: '',
+                logoutUrl: '',
+                clientId: '',
+                redirectUri: '',
+                postLogoutRedirectUri: '',
+                silentRefreshRedirectUri: '',
+                scope: 'openid email profile'
+            },
+            authorization: {
+                baseUrl: '',
+                verifyEndpoint: '/api/v1/authz/verify-groups',
+                hierarchyEndpoint: '/api/v1/authz/hierarchy-by-component-and-groups'
+            },
+            environment: {
+                production: lib.production ?? false,
+                requireHttps: lib.requireHttps ?? true,
+                showDebugInformation: lib.showDebugInformation ?? false
+            }
+        };
     }
-    function configureLocalAppCallback() {
-        if (configServerData["security.url.callback"]) {
-            mappedConfig.hosts = {
+    mapConfigServerResponse(data, defaultConfig) {
+        const mapped = {};
+        if (data['security.url.auth']) {
+            mapped.hosts = {
                 ...defaultConfig.hosts,
-                ...(mappedConfig.hosts || {}),
-                localApp: configServerData["security.url.callback"]
+                ...(mapped.hosts || {}),
+                authServer: data['security.url.auth']
             };
         }
-    }
-    function initializeKeycloakHost() {
-        if (configServerData["security.url.keycloak"]) {
-            mappedConfig.hosts = {
-                ...defaultConfig.hosts,
-                ...(mappedConfig.hosts || {}),
-                keycloak: configServerData["security.url.keycloak"]
+        if (data['quarkus.oidc.client-id']) {
+            mapped.auth = {
+                ...defaultConfig.auth,
+                ...(mapped.auth || {}),
+                clientId: data['quarkus.oidc.client-id']
             };
         }
-    }
-    function initializeAuthScope() {
-        if (configServerData["security.scope"]) {
-            mappedConfig.auth = {
-                ...defaultConfig.auth,
-                ...(mappedConfig.auth || {}),
-                scope: configServerData["security.scope"]
+        if (data['security.realm']) {
+            mapped.paths = {
+                ...defaultConfig.paths,
+                ...(mapped.paths || {}),
+                realm: data['security.realm']
             };
         }
-    }
-    function initializeAuthorizationConfig() {
-        if (configServerData["security.url.authz"]) {
-            mappedConfig.authorization = {
+        if (data['security.url.authz']) {
+            mapped.authorization = {
                 ...defaultConfig.authorization,
-                ...(mappedConfig.authorization || {}),
-                baseUrl: configServerData["security.url.authz"]
+                ...(mapped.authorization || {}),
+                baseUrl: data['security.url.authz']
             };
         }
-    }
-    function initializeRealmMapping() {
-        if (configServerData["security.realm"]) {
-            mappedConfig.paths = {
-                ...defaultConfig.paths,
-                ...(mappedConfig.paths || {}),
-                realm: configServerData["security.realm"]
+        if (data['security.scope']) {
+            mapped.auth = {
+                ...defaultConfig.auth,
+                ...(mapped.auth || {}),
+                scope: data['security.scope']
             };
         }
-    }
-    function initializeClientId() {
-        if (configServerData["quarkus.oidc.client-id"]) {
-            mappedConfig.auth = {
-                ...defaultConfig.auth,
-                ...(mappedConfig.auth || {}),
-                clientId: configServerData["quarkus.oidc.client-id"]
+        if (data['security.url.keycloak']) {
+            mapped.hosts = {
+                ...defaultConfig.hosts,
+                ...(mapped.hosts || {}),
+                keycloak: data['security.url.keycloak']
             };
         }
-    }
-    function configureAuthServer() {
-        if (configServerData["security.url.auth"]) {
-            mappedConfig.hosts = {
+        if (data['security.url.callback']) {
+            mapped.hosts = {
                 ...defaultConfig.hosts,
-                ...(mappedConfig.hosts || {}),
-                authServer: configServerData["security.url.auth"]
+                ...(mapped.hosts || {}),
+                localApp: data['security.url.callback']
             };
         }
-    }
-}
-/**
- * Función para establecer la configuración actual con datos del config server
- * Esta función debe ser llamada desde el ConfigService después de cargar la configuración
- */
-function setCurrentAppConfig(configServerData) {
-    currentAppConfig = getAppConfigWithServerData(configServerData);
-}
-/**
- * Función para obtener la configuración actual
- * Si no se ha establecido una configuración, devuelve la configuración por defecto
- */
-function getCurrentAppConfig() {
-    return currentAppConfig || getAppConfig();
-}
-// Función para obtener la configuración con posibles sobrescrituras de variables de entorno
-function getAppConfig() {
-    const config = { ...getDefaultAppConfig() };
-    // Construir URLs dinámicamente
-    const localProtocol = config.environment.requireHttps ? 'https' : 'http';
-    // Config Server URL
-    config.configServer.url = `${localProtocol}://${config.hosts.configServer}${config.paths.configService}`;
-    // Auth URLs
-    config.auth.issuer = `${localProtocol}://${config.hosts.keycloak}/realms/${config.paths.realm}`;
-    config.auth.loginUrl = `${localProtocol}://${config.hosts.keycloak}/realms/${config.paths.realm}/protocol/openid-connect/auth`;
-    config.auth.tokenEndpoint = `${localProtocol}://${config.hosts.authServer}/oidc/realm/${config.paths.realm}/protocol/openid-connect/token`;
-    config.auth.userinfoEndpoint = `${localProtocol}://${config.hosts.authServer}/oidc/realm/${config.paths.realm}/protocol/openid-connect/userinfo`;
-    config.auth.logoutUrl = `${localProtocol}://${config.hosts.authServer}/oidc/realm/${config.paths.realm}/protocol/openid-connect/logout`;
-    // Redirect URLs (locales)
-    const currentOrigin = globalThis.window?.location?.origin ?? config.hosts.localApp;
-    config.auth.redirectUri = `${currentOrigin}/login`;
-    config.auth.postLogoutRedirectUri = `${currentOrigin}/login`;
-    // Authorization URL
-    config.authorization.baseUrl = `${localProtocol}://${config.authorization.baseUrl}`;
-    return config;
-}
-// Función para obtener la configuración aplicando primero la del config server y luego variables de entorno
-function getAppConfigWithServerData(configServerData) {
-    let config = { ...getDefaultAppConfig() };
-    // Aplicar configuración del config server si está disponible
-    if (configServerData) {
-        const serverMappedConfig = mapConfigServerResponse(configServerData);
-        config = mergeConfigurations(config, serverMappedConfig);
-    }
-    // Construir URLs dinámicamente
-    config = buildDynamicUrls(config);
-    return config;
-}
-// Función auxiliar para fusionar configuraciones
-function mergeConfigurations(base, override) {
-    const merged = { ...base };
-    if (override.hosts) {
-        merged.hosts = { ...merged.hosts, ...override.hosts };
-    }
-    if (override.paths) {
-        merged.paths = { ...merged.paths, ...override.paths };
-    }
-    if (override.configServer) {
-        merged.configServer = { ...merged.configServer, ...override.configServer };
-    }
-    if (override.auth) {
-        merged.auth = { ...merged.auth, ...override.auth };
-    }
-    if (override.authorization) {
-        merged.authorization = { ...merged.authorization, ...override.authorization };
-    }
-    if (override.environment) {
-        merged.environment = { ...merged.environment, ...override.environment };
-    }
-    return merged;
-}
-// Función para construir URLs dinámicamente
-function buildDynamicUrls(config) {
-    const localProtocol = config.environment.requireHttps ? 'https' : 'http';
-    // Config Server URL
-    config.configServer.url = `${localProtocol}://${config.hosts.configServer}${config.paths.configService}`;
-    // Auth URLs
-    config.auth.issuer = `${localProtocol}://${config.hosts.keycloak}/realms/${config.paths.realm}`;
-    config.auth.loginUrl = `${localProtocol}://${config.hosts.keycloak}/realms/${config.paths.realm}/protocol/openid-connect/auth`;
-    config.auth.tokenEndpoint = `${localProtocol}://${config.hosts.authServer}/oidc/realm/${config.paths.realm}/protocol/openid-connect/token`;
-    config.auth.userinfoEndpoint = `${localProtocol}://${config.hosts.authServer}/oidc/realm/${config.paths.realm}/protocol/openid-connect/userinfo`;
-    config.auth.logoutUrl = `${localProtocol}://${config.hosts.authServer}/oidc/realm/${config.paths.realm}/protocol/openid-connect/logout`;
-    // Redirect URLs (locales)
-    const currentOrigin = globalThis.window?.location?.origin ?? config.hosts.localApp;
-    config.auth.redirectUri = `${currentOrigin}/login`;
-    config.auth.postLogoutRedirectUri = `${currentOrigin}/login`;
-    // Authorization URL
-    config.authorization.baseUrl = `${localProtocol}://${config.authorization.baseUrl}`;
-    return config;
-}
-
-/**
- * Función para obtener la configuración de autenticación actual
- * Esta función se evalúa cada vez que se llama, por lo que siempre tendrá la configuración más reciente
- */
-function getAuthConfig() {
-    const appConfig = getCurrentAppConfig();
-    return {
-        // URL base del servidor de identidad
-        issuer: appConfig.auth.issuer,
-        // URLs específicas para evitar discovery document
-        loginUrl: appConfig.auth.loginUrl,
-        tokenEndpoint: appConfig.auth.tokenEndpoint,
-        userinfoEndpoint: appConfig.auth.userinfoEndpoint,
-        logoutUrl: appConfig.auth.logoutUrl,
-        // IMPORTANTE: URLs de redirección completas
-        redirectUri: appConfig.auth.redirectUri,
-        postLogoutRedirectUri: appConfig.auth.postLogoutRedirectUri,
-        // Configuración del cliente
-        clientId: appConfig.auth.clientId,
-        // Configuración OAuth
-        responseType: 'code',
-        scope: appConfig.auth.scope,
-        // Configuraciones para desarrollo
-        disableAtHashCheck: true,
-        requireHttps: appConfig.environment.requireHttps,
-        showDebugInformation: appConfig.environment.showDebugInformation,
-        strictDiscoveryDocumentValidation: false,
-        skipIssuerCheck: true,
-        // IMPORTANTE: Configuraciones para manejar state y session_state
-        requestAccessToken: true,
-        customQueryParams: {},
-        // Timeouts
-        silentRefreshTimeout: 5000,
-        timeoutFactor: 0.25,
-        // Session checks
-        sessionChecksEnabled: false,
-        clearHashAfterLogin: true,
-        // Configuración OIDC
-        oidc: true,
-        // Tolerancia de tiempo para tokens (10 minutos)
-        clockSkewInSec: 30,
-        // Deshabilitar timer de id_token para evitar validaciones innecesarias
-        disableIdTokenTimer: true
-    };
-}
-// Mantener la exportación original para compatibilidad
-function getAuthConfigEnv() {
-    return getAuthConfig();
+        if (data['security.url.https'] !== undefined) {
+            mapped.environment = {
+                ...defaultConfig.environment,
+                ...(mapped.environment || {}),
+                requireHttps: data['security.url.https']
+            };
+        }
+        return mapped;
+    }
+    mergeConfigurations(base, override) {
+        const merged = { ...base };
+        if (override.hosts) {
+            merged.hosts = { ...merged.hosts, ...override.hosts };
+        }
+        if (override.paths) {
+            merged.paths = { ...merged.paths, ...override.paths };
+        }
+        if (override.configServer) {
+            merged.configServer = { ...merged.configServer, ...override.configServer };
+        }
+        if (override.auth) {
+            merged.auth = { ...merged.auth, ...override.auth };
+        }
+        if (override.authorization) {
+            merged.authorization = { ...merged.authorization, ...override.authorization };
+        }
+        if (override.environment) {
+            merged.environment = { ...merged.environment, ...override.environment };
+        }
+        return merged;
+    }
+    buildDynamicUrls(config) {
+        const c = { ...config };
+        const proto = c.environment.requireHttps ? 'https' : 'http';
+        // Config Server URL
+        c.configServer = { ...c.configServer };
+        c.configServer.url = `${proto}://${c.hosts.configServer}${c.paths.configService}`;
+        // Auth URLs
+        c.auth = { ...c.auth };
+        c.auth.issuer = `${proto}://${c.hosts.keycloak}/realms/${c.paths.realm}`;
+        c.auth.loginUrl = `${proto}://${c.hosts.keycloak}/realms/${c.paths.realm}/protocol/openid-connect/auth`;
+        c.auth.tokenEndpoint = `${proto}://${c.hosts.authServer}/oidc/realm/${c.paths.realm}/protocol/openid-connect/token`;
+        c.auth.userinfoEndpoint = `${proto}://${c.hosts.authServer}/oidc/realm/${c.paths.realm}/protocol/openid-connect/userinfo`;
+        c.auth.logoutUrl = `${proto}://${c.hosts.authServer}/oidc/realm/${c.paths.realm}/protocol/openid-connect/logout`;
+        // Redirect URLs (locales)
+        const currentOrigin = globalThis.window?.location?.origin ?? c.hosts.localApp;
+        c.auth.redirectUri = `${currentOrigin}/login`;
+        c.auth.postLogoutRedirectUri = `${currentOrigin}/login`;
+        // Authorization URL
+        c.authorization = { ...c.authorization };
+        c.authorization.baseUrl = `${proto}://${c.authorization.baseUrl}`;
+        return c;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrmkConfigStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrmkConfigStore, providedIn: 'root' });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FrmkConfigStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class AuthService {
     oauthService;
     router;
+    store;
     isAuthenticatedSubject$ = new BehaviorSubject(false);
     isAuthenticated$ = this.isAuthenticatedSubject$.asObservable();
     isDoneLoadingSubject$ = new BehaviorSubject(false);
     isDoneLoading$ = this.isDoneLoadingSubject$.asObservable();
     isInitialLogin = true;
-    constructor(oauthService, router) {
+    constructor(oauthService, router, store) {
         this.oauthService = oauthService;
         this.router = router;
+        this.store = store;
         // IMPORTANTE: Limpiar tokens expirados ANTES de cualquier otra operación
         this.clearExpiredTokensOnStartup();
         this.oauthService.events
@@ -666,7 +554,7 @@ class AuthService {
         }
     }
     setupManualConfiguration() {
-        const authConfig = getAuthConfigEnv();
+        const authConfig = this.store.authConfig();
         this.oauthService.tokenEndpoint = authConfig.tokenEndpoint;
         this.oauthService.userinfoEndpoint = authConfig.userinfoEndpoint;
         this.oauthService.loginUrl = authConfig.loginUrl;
@@ -723,7 +611,7 @@ class AuthService {
         }
     }
     getAuthConfig() {
-        return getAuthConfigEnv();
+        return this.store.authConfig();
     }
     login(targetUrl) {
         this.isInitialLogin = true;
@@ -748,7 +636,7 @@ class AuthService {
         }
     }
     async callKeycloakLogoutEndpoint() {
-        const authConfig = getAuthConfigEnv();
+        const authConfig = this.store.authConfig();
         const logoutUrl = authConfig.logoutUrl;
         let refreshToken = this.oauthService.getRefreshToken();
         if (!refreshToken) {
@@ -831,7 +719,7 @@ class AuthService {
             if (claims.realm_access?.roles) {
                 roles.push(...claims.realm_access.roles);
             }
-            const authConfig = getAuthConfigEnv();
+            const authConfig = this.store.authConfig();
             if (claims.resource_access?.[authConfig.clientId]?.roles) {
                 roles.push(...claims.resource_access[authConfig.clientId].roles);
             }
@@ -924,7 +812,7 @@ class AuthService {
             return {};
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, deps: [{ token: i1.OAuthService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, deps: [{ token: i1.OAuthService }, { token: i4.Router }, { token: FrmkConfigStore }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, decorators: [{
@@ -932,33 +820,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.OAuthService }, { type: i4.Router }] });
+        }], ctorParameters: () => [{ type: i1.OAuthService }, { type: i4.Router }, { type: FrmkConfigStore }] });
 
 class ConfigService {
     http;
+    store;
     configServerData = null;
-    finalAppConfig = null;
     isLoaded = false;
-    initialAppConfig = getAppConfig();
-    constructor(http) {
+    constructor(http, store) {
         this.http = http;
+        this.store = store;
     }
     /**
      * Carga la configuración desde el config-server
      */
     async loadConfig() {
         try {
-            const url = `${this.initialAppConfig.configServer.url}/${this.initialAppConfig.configServer.frontend}`;
+            const appConfig = this.store.appConfig();
+            const url = `${appConfig.configServer.url}/${appConfig.configServer.frontend}`;
             this.configServerData = await firstValueFrom(this.http.get(url));
-            this.finalAppConfig = getAppConfigWithServerData(this.configServerData);
-            // IMPORTANTE: Establecer la configuración actual para que esté disponible globalmente
-            setCurrentAppConfig(this.configServerData);
+            // Aplicar datos del server al store — todos los computeds se recalculan automáticamente
+            this.store.applyServerConfig(this.configServerData);
             this.isLoaded = true;
         }
         catch (error) {
             console.log(`Exception while loading config: ${error}`);
-            this.finalAppConfig = this.initialAppConfig;
-            setCurrentAppConfig();
+            this.store.applyServerConfig();
             this.isLoaded = true;
         }
     }
@@ -984,7 +871,7 @@ class ConfigService {
      * Obtiene la configuración final de la aplicación (con valores del config server aplicados)
      */
     getAppConfig() {
-        return this.finalAppConfig || this.initialAppConfig;
+        return this.store.appConfig();
     }
     /**
      * Obtiene los datos raw del config server
@@ -992,7 +879,7 @@ class ConfigService {
     getConfigServerData() {
         return this.configServerData;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, deps: [{ token: i1$1.HttpClient }, { token: FrmkConfigStore }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, decorators: [{
@@ -1000,7 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FrmkConfigStore }] });
 
 class AuthorizationService {
     http;
@@ -1175,40 +1062,28 @@ class LoginComponent {
     /**
      * Configuration object to customize the login component appearance and behavior
      */
-    config = {};
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    store = inject(FrmkConfigStore);
     isLoggingIn = false;
     statusMessage = '';
     authSubscription;
     isProcessingCallback = false;
-    // Merged configuration with defaults - initialize with defaults immediately
-    _mergedConfig;
+    /** Configuración merged: defaults ← libraryConfig.loginConfig ← @Input config */
+    mergedConfig = computed(() => {
+        const storeConfig = this.store.isConfigured()
+            ? this.store.loginConfig()
+            : DEFAULT_LOGIN_CONFIG;
+        const inputCfg = this.config();
+        return {
+            ...storeConfig,
+            ...inputCfg,
+            version: inputCfg.version || storeConfig.version || VERSION
+        };
+    }, ...(ngDevMode ? [{ debugName: "mergedConfig" }] : []));
     constructor(authService) {
         this.authService = authService;
-        // Initialize with global config in constructor to avoid template errors
-        try {
-            this._mergedConfig = getLoginConfig();
-        }
-        catch {
-            this._mergedConfig = { ...DEFAULT_LOGIN_CONFIG };
-        }
     }
     ngOnInit() {
-        // Get global config from library, then merge with component input
-        try {
-            const globalConfig = getLoginConfig();
-            this._mergedConfig = {
-                ...globalConfig,
-                ...this.config,
-                version: this.config?.version || globalConfig.version || VERSION
-            };
-        }
-        catch {
-            this._mergedConfig = {
-                ...DEFAULT_LOGIN_CONFIG,
-                ...this.config,
-                version: this.config?.version || VERSION
-            };
-        }
         // Check if processing OAuth callback
         // Also check for 'iss' and 'session_state' which indicate we came from OAuth even if 'code' was already processed
         const urlParams = new URLSearchParams(globalThis.location?.search || '');
@@ -1241,21 +1116,22 @@ class LoginComponent {
      * Get merged configuration value
      */
     getConfig(key) {
-        return this._mergedConfig[key];
+        return this.mergedConfig()[key];
     }
     /**
      * Get custom CSS styles for theming
      */
     getCustomStyles() {
         const styles = {};
-        if (this._mergedConfig.primaryColor) {
-            styles['--color-primary'] = this._mergedConfig.primaryColor;
+        const cfg = this.mergedConfig();
+        if (cfg.primaryColor) {
+            styles['--color-primary'] = cfg.primaryColor;
         }
-        if (this._mergedConfig.backgroundColor) {
-            styles['--login-bg-color'] = this._mergedConfig.backgroundColor;
+        if (cfg.backgroundColor) {
+            styles['--login-bg-color'] = cfg.backgroundColor;
         }
-        if (this._mergedConfig.textColor) {
-            styles['--login-text-color'] = this._mergedConfig.textColor;
+        if (cfg.textColor) {
+            styles['--login-text-color'] = cfg.textColor;
         }
         return styles;
     }
@@ -1276,26 +1152,25 @@ class LoginComponent {
         this.navigateToRedirect();
     }
     navigateToRedirect() {
-        const redirectUrl = this._mergedConfig.redirectUrl;
+        const redirectUrl = this.mergedConfig().redirectUrl;
         if (typeof globalThis.location !== 'undefined') {
             const baseUrl = `${globalThis.location.protocol}//${globalThis.location.host}`;
             globalThis.location.href = `${baseUrl}${redirectUrl}`;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoginComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LoginComponent, isStandalone: true, selector: "lib-login", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"login-page\" [ngStyle]=\"getCustomStyles()\">\r\n  <div class=\"login-page__container\">\r\n    <!-- Logo -->\r\n    <div class=\"login-page__logo\">\r\n      <img \r\n        [src]=\"getConfig('logoUrl')\" \r\n        [alt]=\"getConfig('logoAlt')\" \r\n        class=\"login-page__logo-img\"\r\n        [style.width]=\"getConfig('logoWidth')\"\r\n        [style.height]=\"getConfig('logoHeight')\" />\r\n    </div>\r\n\r\n    <!-- Header -->\r\n    <div class=\"login-page__header\">\r\n      <h1>{{ getConfig('title') }}</h1>\r\n      <p *ngIf=\"getConfig('subtitle')\" class=\"subtitle\">{{ getConfig('subtitle') }}</p>\r\n    </div>\r\n    \r\n    <!-- Login Form -->\r\n    <div *ngIf=\"(authService.isDoneLoading$ | async)\" class=\"login-page__form\">\r\n      <div *ngIf=\"!(authService.isAuthenticated$ | async)\">\r\n        <!-- Status Message -->\r\n        <div *ngIf=\"statusMessage\" class=\"auth-alert auth-alert--info\">\r\n          <div class=\"auth-alert__content\">\r\n            <p>{{ statusMessage }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Login Button -->\r\n        <button \r\n          class=\"btn btn--primary btn--lg\" \r\n          (click)=\"login()\" \r\n          [disabled]=\"isLoggingIn\"\r\n          [class.loading]=\"isLoggingIn\">\r\n          {{ isLoggingIn ? 'Redirigiendo...' : getConfig('loginButtonText') }}\r\n        </button>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"login-page__footer\" *ngIf=\"getConfig('showFooter')\">\r\n          <p *ngIf=\"getConfig('footerText'); else defaultFooter\">\r\n            {{ getConfig('footerText') }}\r\n          </p>\r\n          <ng-template #defaultFooter>\r\n            <p>\r\n              Acceso seguro para usuarios de \r\n              <strong>{{ getConfig('institutionName') }}</strong>\r\n            </p>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Already Authenticated -->\r\n      <div *ngIf=\"authService.isAuthenticated$ | async\" class=\"auth-alert auth-alert--success\">\r\n        <div class=\"auth-alert__content\">\r\n          <h4>\u00A1Sesi\u00F3n activa!</h4>\r\n          <p>Ya tienes una sesi\u00F3n iniciada en el sistema.</p>\r\n        </div>\r\n        \r\n        <div class=\"login-page__actions\">\r\n          <button class=\"btn btn--primary btn--lg\" (click)=\"goToDashboard()\">\r\n            {{ getConfig('dashboardButtonText') }}\r\n          </button>\r\n          \r\n          <button \r\n            *ngIf=\"getConfig('showLogoutButton')\"\r\n            class=\"btn btn--secondary btn--lg\" \r\n            (click)=\"logout()\">\r\n            {{ getConfig('logoutButtonText') }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Loading State -->\r\n    <div *ngIf=\"!(authService.isDoneLoading$ | async)\" class=\"auth-loading\">\r\n      <div class=\"auth-loading__spinner\"></div>\r\n      <p class=\"auth-loading__text\">Procesando autenticaci\u00F3n...</p>\r\n    </div>\r\n\r\n    <!-- Version -->\r\n    <div *ngIf=\"getConfig('showVersion')\" class=\"login-page__version\">\r\n      <span>v{{ getConfig('version') }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100vh}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-primary, #313945);padding:var(--spacing-4, 1rem);position:relative}.login-page__container{width:100%;max-width:450px;background:var(--login-bg-color, var(--color-primary, #313945));color:var(--login-text-color, var(--color-white, #ffffff));border-radius:var(--border-radius-2xl, 1rem);box-shadow:0 25px 50px -12px #00000040;padding:var(--spacing-8, 2rem);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2);animation:slideInUp .6s cubic-bezier(.4,0,.2,1)}.login-page__container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#313945,#3c4557)}@media(max-width:576px){.login-page__container{padding:var(--spacing-6, 1.5rem);margin:var(--spacing-4, 1rem);max-width:380px}}.login-page__logo{width:120px;height:120px;margin:0 auto var(--spacing-6, 1.5rem) auto;display:flex;justify-content:center;align-items:center}.login-page__logo-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(30,58,95,.1));transition:transform .25s cubic-bezier(.4,0,.2,1)}.login-page__logo-img:hover{transform:scale(1.05)}.login-page__header{text-align:center;margin-bottom:var(--spacing-8, 2rem)}.login-page__header h1{font-family:var(--font-family-display, \"Bembo Std\", Georgia, serif);font-size:var(--font-size-3xl, 1.875rem);font-weight:var(--font-weight-bold, 700);color:var(--login-text-color, var(--color-white, #ffffff));margin:0 0 var(--spacing-3, .75rem) 0}@media(max-width:576px){.login-page__header h1{font-size:var(--font-size-2xl, 1.5rem)}}.login-page__header .subtitle{color:var(--login-text-color, var(--color-white, #ffffff));font-size:var(--font-size-base, 1rem);margin:0;font-weight:var(--font-weight-normal, 400);opacity:.8}.login-page__form .btn{width:100%;margin-bottom:var(--spacing-3, .75rem)}.login-page__actions{margin-top:var(--spacing-6, 1.5rem);display:flex;flex-direction:column;gap:var(--spacing-3, .75rem)}.login-page__footer{text-align:center;margin-top:var(--spacing-8, 2rem);padding-top:var(--spacing-6, 1.5rem);border-top:1px solid rgba(255,255,255,.2)}.login-page__footer p{color:#fffc;font-size:var(--font-size-sm, .875rem);margin:0}.login-page__version{text-align:center;margin-top:var(--spacing-4, 1rem)}.login-page__version span{font-size:var(--font-size-xs, .75rem);color:#ffffff80}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-3, .75rem) var(--spacing-6, 1.5rem);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500);border-radius:var(--border-radius-lg, .5rem);border:none;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.btn--lg{height:48px;font-size:var(--font-size-base, 1rem)}.btn--primary{background-color:var(--color-gray-900, #212529);color:var(--color-white, #ffffff);border:1px solid var(--color-primary, #313945)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover, #1c1e4d);border-color:var(--color-primary-hover, #1c1e4d);transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--primary:disabled{opacity:.7;cursor:not-allowed}.btn--primary.loading{pointer-events:none}.btn--secondary{background-color:transparent;color:var(--color-white, #ffffff);border:1px solid rgba(255,255,255,.3)}.btn--secondary:hover:not(:disabled){background-color:#ffffff1a;border-color:#ffffff80}.auth-alert{padding:var(--spacing-4, 1rem);border-radius:var(--border-radius-lg, .5rem);margin-bottom:var(--spacing-4, 1rem)}.auth-alert--info{background:#2ca8ff1a;border:1px solid rgba(44,168,255,.3)}.auth-alert--success{background:#018e111a;border:1px solid rgba(1,142,17,.3)}.auth-alert__content h4{margin:0 0 var(--spacing-2, .5rem) 0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600)}.auth-alert__content p{margin:0;font-size:var(--font-size-sm, .875rem);opacity:.9}.auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-8, 2rem)}.auth-loading__spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top:3px solid var(--color-white, #ffffff);border-radius:50%;animation:spin 1s linear infinite}.auth-loading__text{margin-top:var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);color:#fffc}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.login-page__container{animation:none}.login-page__logo-img{transition:none}.auth-loading__spinner{animation:none}}@media(prefers-contrast:high){.login-page__container{border:2px solid var(--color-white, #ffffff)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: LoginComponent, isStandalone: true, selector: "lib-login", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"login-page\" [ngStyle]=\"getCustomStyles()\">\r\n  <div class=\"login-page__container\">\r\n    <!-- Logo -->\r\n    <div class=\"login-page__logo\">\r\n      <img \r\n        [src]=\"getConfig('logoUrl')\" \r\n        [alt]=\"getConfig('logoAlt')\" \r\n        class=\"login-page__logo-img\"\r\n        [style.width]=\"getConfig('logoWidth')\"\r\n        [style.height]=\"getConfig('logoHeight')\" />\r\n    </div>\r\n\r\n    <!-- Header -->\r\n    <div class=\"login-page__header\">\r\n      <h1>{{ getConfig('title') }}</h1>\r\n      <p *ngIf=\"getConfig('subtitle')\" class=\"subtitle\">{{ getConfig('subtitle') }}</p>\r\n    </div>\r\n    \r\n    <!-- Login Form -->\r\n    <div *ngIf=\"(authService.isDoneLoading$ | async)\" class=\"login-page__form\">\r\n      <div *ngIf=\"!(authService.isAuthenticated$ | async)\">\r\n        <!-- Status Message -->\r\n        <div *ngIf=\"statusMessage\" class=\"auth-alert auth-alert--info\">\r\n          <div class=\"auth-alert__content\">\r\n            <p>{{ statusMessage }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Login Button -->\r\n        <button \r\n          class=\"btn btn--primary btn--lg\" \r\n          (click)=\"login()\" \r\n          [disabled]=\"isLoggingIn\"\r\n          [class.loading]=\"isLoggingIn\">\r\n          {{ isLoggingIn ? 'Redirigiendo...' : getConfig('loginButtonText') }}\r\n        </button>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"login-page__footer\" *ngIf=\"getConfig('showFooter')\">\r\n          <p *ngIf=\"getConfig('footerText'); else defaultFooter\">\r\n            {{ getConfig('footerText') }}\r\n          </p>\r\n          <ng-template #defaultFooter>\r\n            <p>\r\n              Acceso seguro para usuarios de \r\n              <strong>{{ getConfig('institutionName') }}</strong>\r\n            </p>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Already Authenticated -->\r\n      <div *ngIf=\"authService.isAuthenticated$ | async\" class=\"auth-alert auth-alert--success\">\r\n        <div class=\"auth-alert__content\">\r\n          <h4>\u00A1Sesi\u00F3n activa!</h4>\r\n          <p>Ya tienes una sesi\u00F3n iniciada en el sistema.</p>\r\n        </div>\r\n        \r\n        <div class=\"login-page__actions\">\r\n          <button class=\"btn btn--primary btn--lg\" (click)=\"goToDashboard()\">\r\n            {{ getConfig('dashboardButtonText') }}\r\n          </button>\r\n          \r\n          <button \r\n            *ngIf=\"getConfig('showLogoutButton')\"\r\n            class=\"btn btn--secondary btn--lg\" \r\n            (click)=\"logout()\">\r\n            {{ getConfig('logoutButtonText') }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Loading State -->\r\n    <div *ngIf=\"!(authService.isDoneLoading$ | async)\" class=\"auth-loading\">\r\n      <div class=\"auth-loading__spinner\"></div>\r\n      <p class=\"auth-loading__text\">Procesando autenticaci\u00F3n...</p>\r\n    </div>\r\n\r\n    <!-- Version -->\r\n    <div *ngIf=\"getConfig('showVersion')\" class=\"login-page__version\">\r\n      <span>v{{ getConfig('version') }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100vh}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-primary, #313945);padding:var(--spacing-4, 1rem);position:relative}.login-page__container{width:100%;max-width:450px;background:var(--login-bg-color, var(--color-primary, #313945));color:var(--login-text-color, var(--color-white, #ffffff));border-radius:var(--border-radius-2xl, 1rem);box-shadow:0 25px 50px -12px #00000040;padding:var(--spacing-8, 2rem);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2);animation:slideInUp .6s cubic-bezier(.4,0,.2,1)}.login-page__container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#313945,#3c4557)}@media(max-width:576px){.login-page__container{padding:var(--spacing-6, 1.5rem);margin:var(--spacing-4, 1rem);max-width:380px}}.login-page__logo{width:120px;height:120px;margin:0 auto var(--spacing-6, 1.5rem) auto;display:flex;justify-content:center;align-items:center}.login-page__logo-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(30,58,95,.1));transition:transform .25s cubic-bezier(.4,0,.2,1)}.login-page__logo-img:hover{transform:scale(1.05)}.login-page__header{text-align:center;margin-bottom:var(--spacing-8, 2rem)}.login-page__header h1{font-family:var(--font-family-display, \"Bembo Std\", Georgia, serif);font-size:var(--font-size-3xl, 1.875rem);font-weight:var(--font-weight-bold, 700);color:var(--login-text-color, var(--color-white, #ffffff));margin:0 0 var(--spacing-3, .75rem) 0}@media(max-width:576px){.login-page__header h1{font-size:var(--font-size-2xl, 1.5rem)}}.login-page__header .subtitle{color:var(--login-text-color, var(--color-white, #ffffff));font-size:var(--font-size-base, 1rem);margin:0;font-weight:var(--font-weight-normal, 400);opacity:.8}.login-page__form .btn{width:100%;margin-bottom:var(--spacing-3, .75rem)}.login-page__actions{margin-top:var(--spacing-6, 1.5rem);display:flex;flex-direction:column;gap:var(--spacing-3, .75rem)}.login-page__footer{text-align:center;margin-top:var(--spacing-8, 2rem);padding-top:var(--spacing-6, 1.5rem);border-top:1px solid rgba(255,255,255,.2)}.login-page__footer p{color:#fffc;font-size:var(--font-size-sm, .875rem);margin:0}.login-page__version{text-align:center;margin-top:var(--spacing-4, 1rem)}.login-page__version span{font-size:var(--font-size-xs, .75rem);color:#ffffff80}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-3, .75rem) var(--spacing-6, 1.5rem);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500);border-radius:var(--border-radius-lg, .5rem);border:none;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.btn--lg{height:48px;font-size:var(--font-size-base, 1rem)}.btn--primary{background-color:var(--color-gray-900, #212529);color:var(--color-white, #ffffff);border:1px solid var(--color-primary, #313945)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover, #1c1e4d);border-color:var(--color-primary-hover, #1c1e4d);transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--primary:disabled{opacity:.7;cursor:not-allowed}.btn--primary.loading{pointer-events:none}.btn--secondary{background-color:transparent;color:var(--color-white, #ffffff);border:1px solid rgba(255,255,255,.3)}.btn--secondary:hover:not(:disabled){background-color:#ffffff1a;border-color:#ffffff80}.auth-alert{padding:var(--spacing-4, 1rem);border-radius:var(--border-radius-lg, .5rem);margin-bottom:var(--spacing-4, 1rem)}.auth-alert--info{background:#2ca8ff1a;border:1px solid rgba(44,168,255,.3)}.auth-alert--success{background:#018e111a;border:1px solid rgba(1,142,17,.3)}.auth-alert__content h4{margin:0 0 var(--spacing-2, .5rem) 0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600)}.auth-alert__content p{margin:0;font-size:var(--font-size-sm, .875rem);opacity:.9}.auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-8, 2rem)}.auth-loading__spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top:3px solid var(--color-white, #ffffff);border-radius:50%;animation:spin 1s linear infinite}.auth-loading__text{margin-top:var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);color:#fffc}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.login-page__container{animation:none}.login-page__logo-img{transition:none}.auth-loading__spinner{animation:none}}@media(prefers-contrast:high){.login-page__container{border:2px solid var(--color-white, #ffffff)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-login', standalone: true, imports: [CommonModule], template: "<div class=\"login-page\" [ngStyle]=\"getCustomStyles()\">\r\n  <div class=\"login-page__container\">\r\n    <!-- Logo -->\r\n    <div class=\"login-page__logo\">\r\n      <img \r\n        [src]=\"getConfig('logoUrl')\" \r\n        [alt]=\"getConfig('logoAlt')\" \r\n        class=\"login-page__logo-img\"\r\n        [style.width]=\"getConfig('logoWidth')\"\r\n        [style.height]=\"getConfig('logoHeight')\" />\r\n    </div>\r\n\r\n    <!-- Header -->\r\n    <div class=\"login-page__header\">\r\n      <h1>{{ getConfig('title') }}</h1>\r\n      <p *ngIf=\"getConfig('subtitle')\" class=\"subtitle\">{{ getConfig('subtitle') }}</p>\r\n    </div>\r\n    \r\n    <!-- Login Form -->\r\n    <div *ngIf=\"(authService.isDoneLoading$ | async)\" class=\"login-page__form\">\r\n      <div *ngIf=\"!(authService.isAuthenticated$ | async)\">\r\n        <!-- Status Message -->\r\n        <div *ngIf=\"statusMessage\" class=\"auth-alert auth-alert--info\">\r\n          <div class=\"auth-alert__content\">\r\n            <p>{{ statusMessage }}</p>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Login Button -->\r\n        <button \r\n          class=\"btn btn--primary btn--lg\" \r\n          (click)=\"login()\" \r\n          [disabled]=\"isLoggingIn\"\r\n          [class.loading]=\"isLoggingIn\">\r\n          {{ isLoggingIn ? 'Redirigiendo...' : getConfig('loginButtonText') }}\r\n        </button>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"login-page__footer\" *ngIf=\"getConfig('showFooter')\">\r\n          <p *ngIf=\"getConfig('footerText'); else defaultFooter\">\r\n            {{ getConfig('footerText') }}\r\n          </p>\r\n          <ng-template #defaultFooter>\r\n            <p>\r\n              Acceso seguro para usuarios de \r\n              <strong>{{ getConfig('institutionName') }}</strong>\r\n            </p>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Already Authenticated -->\r\n      <div *ngIf=\"authService.isAuthenticated$ | async\" class=\"auth-alert auth-alert--success\">\r\n        <div class=\"auth-alert__content\">\r\n          <h4>\u00A1Sesi\u00F3n activa!</h4>\r\n          <p>Ya tienes una sesi\u00F3n iniciada en el sistema.</p>\r\n        </div>\r\n        \r\n        <div class=\"login-page__actions\">\r\n          <button class=\"btn btn--primary btn--lg\" (click)=\"goToDashboard()\">\r\n            {{ getConfig('dashboardButtonText') }}\r\n          </button>\r\n          \r\n          <button \r\n            *ngIf=\"getConfig('showLogoutButton')\"\r\n            class=\"btn btn--secondary btn--lg\" \r\n            (click)=\"logout()\">\r\n            {{ getConfig('logoutButtonText') }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Loading State -->\r\n    <div *ngIf=\"!(authService.isDoneLoading$ | async)\" class=\"auth-loading\">\r\n      <div class=\"auth-loading__spinner\"></div>\r\n      <p class=\"auth-loading__text\">Procesando autenticaci\u00F3n...</p>\r\n    </div>\r\n\r\n    <!-- Version -->\r\n    <div *ngIf=\"getConfig('showVersion')\" class=\"login-page__version\">\r\n      <span>v{{ getConfig('version') }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100vh}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-primary, #313945);padding:var(--spacing-4, 1rem);position:relative}.login-page__container{width:100%;max-width:450px;background:var(--login-bg-color, var(--color-primary, #313945));color:var(--login-text-color, var(--color-white, #ffffff));border-radius:var(--border-radius-2xl, 1rem);box-shadow:0 25px 50px -12px #00000040;padding:var(--spacing-8, 2rem);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2);animation:slideInUp .6s cubic-bezier(.4,0,.2,1)}.login-page__container:before{content:\"\";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#313945,#3c4557)}@media(max-width:576px){.login-page__container{padding:var(--spacing-6, 1.5rem);margin:var(--spacing-4, 1rem);max-width:380px}}.login-page__logo{width:120px;height:120px;margin:0 auto var(--spacing-6, 1.5rem) auto;display:flex;justify-content:center;align-items:center}.login-page__logo-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(30,58,95,.1));transition:transform .25s cubic-bezier(.4,0,.2,1)}.login-page__logo-img:hover{transform:scale(1.05)}.login-page__header{text-align:center;margin-bottom:var(--spacing-8, 2rem)}.login-page__header h1{font-family:var(--font-family-display, \"Bembo Std\", Georgia, serif);font-size:var(--font-size-3xl, 1.875rem);font-weight:var(--font-weight-bold, 700);color:var(--login-text-color, var(--color-white, #ffffff));margin:0 0 var(--spacing-3, .75rem) 0}@media(max-width:576px){.login-page__header h1{font-size:var(--font-size-2xl, 1.5rem)}}.login-page__header .subtitle{color:var(--login-text-color, var(--color-white, #ffffff));font-size:var(--font-size-base, 1rem);margin:0;font-weight:var(--font-weight-normal, 400);opacity:.8}.login-page__form .btn{width:100%;margin-bottom:var(--spacing-3, .75rem)}.login-page__actions{margin-top:var(--spacing-6, 1.5rem);display:flex;flex-direction:column;gap:var(--spacing-3, .75rem)}.login-page__footer{text-align:center;margin-top:var(--spacing-8, 2rem);padding-top:var(--spacing-6, 1.5rem);border-top:1px solid rgba(255,255,255,.2)}.login-page__footer p{color:#fffc;font-size:var(--font-size-sm, .875rem);margin:0}.login-page__version{text-align:center;margin-top:var(--spacing-4, 1rem)}.login-page__version span{font-size:var(--font-size-xs, .75rem);color:#ffffff80}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-3, .75rem) var(--spacing-6, 1.5rem);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500);border-radius:var(--border-radius-lg, .5rem);border:none;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.btn--lg{height:48px;font-size:var(--font-size-base, 1rem)}.btn--primary{background-color:var(--color-gray-900, #212529);color:var(--color-white, #ffffff);border:1px solid var(--color-primary, #313945)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover, #1c1e4d);border-color:var(--color-primary-hover, #1c1e4d);transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--primary:disabled{opacity:.7;cursor:not-allowed}.btn--primary.loading{pointer-events:none}.btn--secondary{background-color:transparent;color:var(--color-white, #ffffff);border:1px solid rgba(255,255,255,.3)}.btn--secondary:hover:not(:disabled){background-color:#ffffff1a;border-color:#ffffff80}.auth-alert{padding:var(--spacing-4, 1rem);border-radius:var(--border-radius-lg, .5rem);margin-bottom:var(--spacing-4, 1rem)}.auth-alert--info{background:#2ca8ff1a;border:1px solid rgba(44,168,255,.3)}.auth-alert--success{background:#018e111a;border:1px solid rgba(1,142,17,.3)}.auth-alert__content h4{margin:0 0 var(--spacing-2, .5rem) 0;font-size:var(--font-size-lg, 1.125rem);font-weight:var(--font-weight-semibold, 600)}.auth-alert__content p{margin:0;font-size:var(--font-size-sm, .875rem);opacity:.9}.auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-8, 2rem)}.auth-loading__spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top:3px solid var(--color-white, #ffffff);border-radius:50%;animation:spin 1s linear infinite}.auth-loading__text{margin-top:var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);color:#fffc}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.login-page__container{animation:none}.login-page__logo-img{transition:none}.auth-loading__spinner{animation:none}}@media(prefers-contrast:high){.login-page__container{border:2px solid var(--color-white, #ffffff)}}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }], propDecorators: { config: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [{ type: AuthService }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
 class DashboardComponent {
     authService;
     authorizationService;
-    config = {};
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    store = inject(FrmkConfigStore);
     userInfo = null;
     userRoles = [];
     menuHierarchy = [];
@@ -1304,43 +1179,31 @@ class DashboardComponent {
     openMenuItems = new Set();
     isUserPanelOpen = false;
     isMobileMenuOpen = false;
-    _mergedConfig;
+    /** Configuración merged: defaults ← libraryConfig.dashboardConfig ← @Input config */
+    mergedConfig = computed(() => {
+        const storeConfig = this.store.isConfigured()
+            ? this.store.dashboardConfig()
+            : DEFAULT_DASHBOARD_CONFIG;
+        const inputCfg = this.config();
+        return {
+            ...storeConfig,
+            ...inputCfg,
+            version: inputCfg.version || storeConfig.version || VERSION
+        };
+    }, ...(ngDevMode ? [{ debugName: "mergedConfig" }] : []));
     constructor(authService, authorizationService) {
         this.authService = authService;
         this.authorizationService = authorizationService;
-        // Initialize with global config in constructor to avoid template errors
-        try {
-            this._mergedConfig = getDashboardConfig();
-        }
-        catch {
-            this._mergedConfig = { ...DEFAULT_DASHBOARD_CONFIG };
-        }
     }
     ngOnInit() {
-        // Get global config from library, then merge with component input
-        try {
-            const globalConfig = getDashboardConfig();
-            this._mergedConfig = {
-                ...globalConfig,
-                ...this.config,
-                version: this.config?.version || globalConfig.version || VERSION
-            };
-        }
-        catch {
-            this._mergedConfig = {
-                ...DEFAULT_DASHBOARD_CONFIG,
-                ...this.config,
-                version: this.config?.version || VERSION
-            };
-        }
         this.loadUserInfo();
         this.loadMenuHierarchy();
     }
     getConfig(key) {
-        return this._mergedConfig[key];
+        return this.mergedConfig()[key];
     }
     get appVersion() {
-        return this._mergedConfig.version;
+        return this.mergedConfig().version;
     }
     loadUserInfo() {
         this.userInfo = this.authService.identityClaims;
@@ -1542,14 +1405,12 @@ class DashboardComponent {
         document.body.style.overflow = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardComponent, deps: [{ token: AuthService }, { token: AuthorizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DashboardComponent, isStandalone: true, selector: "lib-dashboard", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"dashboard\">\r\n  <!-- Header -->\r\n  <header class=\"dashboard-header\">\r\n    <!-- Mobile Header Top -->\r\n    <div class=\"header-mobile-top\">\r\n      <div class=\"ministry-logo-mobile\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n      </div>\r\n      <h1 class=\"mobile-title\">{{ getConfig('title') }}</h1>\r\n    </div>\r\n\r\n    <!-- Mobile Header Bottom -->\r\n    <div class=\"header-mobile-bottom\">\r\n      <button class=\"hamburger-btn\" \r\n              (click)=\"toggleMobileMenu()\"\r\n              [class.active]=\"isMobileMenuOpen\"\r\n              aria-label=\"Toggle menu\">\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n      </button>\r\n\r\n      <div class=\"user-profile mobile-user\" *ngIf=\"userInfo\">\r\n        <button class=\"user-info-trigger\" \r\n                (click)=\"toggleUserPanel($event)\"\r\n                [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                aria-label=\"Abrir men\u00FA de usuario\">\r\n          <div class=\"user-avatar\">\r\n            <span>{{ getUserInitials() }}</span>\r\n          </div>\r\n          <div class=\"user-details\">\r\n            <span class=\"user-name\">{{ getUsername() }}</span>\r\n          </div>\r\n          <span class=\"material-symbols-outlined dropdown-icon\">\r\n            {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n          </span>\r\n        </button>\r\n        \r\n        <!-- User Panel -->\r\n        <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Desktop Header -->\r\n    <div class=\"header-desktop-layout\">\r\n      <div class=\"header-left\">\r\n        <div class=\"ministry-logo\">\r\n          <div class=\"logo-icon\">\r\n            <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n          </div>\r\n          <div class=\"ministry-info\">\r\n            <h1>{{ getConfig('title') }}</h1>\r\n            <span class=\"subtitle\" *ngIf=\"getConfig('subtitle')\">{{ getConfig('subtitle') }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"header-right\">\r\n        <div class=\"user-profile desktop-user\" *ngIf=\"userInfo\">\r\n          <button class=\"user-info-trigger\" \r\n                  (click)=\"toggleUserPanel($event)\"\r\n                  [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                  aria-label=\"Abrir men\u00FA de usuario\">\r\n            <div class=\"user-avatar\">\r\n              <span>{{ getUserInitials() }}</span>\r\n            </div>\r\n            <div class=\"user-details\">\r\n              <span class=\"user-name\">{{ getUsername() }}</span>\r\n            </div>\r\n            <span class=\"material-symbols-outlined dropdown-icon\">\r\n              {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n            </span>\r\n          </button>\r\n          \r\n          <!-- User Panel -->\r\n          <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <!-- User Panel Template -->\r\n  <ng-template #userPanelTemplate>\r\n    <div class=\"user-panel\" *ngIf=\"isUserPanelOpen\">\r\n      <div class=\"user-panel-header\">\r\n        <span class=\"panel-title\">Perfil de Usuario</span>\r\n      </div>\r\n      <div class=\"user-panel-content\">\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">person</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">C\u00F3digo de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUsername() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">badge</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Nombre de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUserFullName() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">credit_card</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Documento:</span>\r\n            <span class=\"info-value\">{{ getDocument() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">business</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Instituci\u00F3n:</span>\r\n            <span class=\"info-value\">{{ getInstitution() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">apartment</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Dependencia:</span>\r\n            <span class=\"info-value\">{{ getDependency() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">work</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Rol:</span>\r\n            <span class=\"info-value\">{{ getRole() }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"user-panel-footer\">\r\n        <button class=\"logout-btn-panel\" (click)=\"logoutAndRedirect()\" title=\"Cerrar sesi\u00F3n\">\r\n          <span class=\"material-symbols-outlined\">logout</span>\r\n          <span class=\"logout-text\">CERRAR SESI\u00D3N</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Mobile Menu Overlay -->\r\n  <div class=\"nav-overlay\" *ngIf=\"isMobileMenuOpen\" (click)=\"closeMobileMenu()\"></div>\r\n\r\n  <!-- Navigation (Horizontal Desktop / Sidebar Mobile) -->\r\n  <nav class=\"dashboard-nav\" [class.mobile-open]=\"isMobileMenuOpen\">\r\n    <div class=\"nav-mobile-header\">\r\n      <div class=\"nav-mobile-logo\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n        <span class=\"nav-mobile-title\">Men\u00FA</span>\r\n      </div>\r\n      <button class=\"nav-close-btn\" (click)=\"closeMobileMenu()\" aria-label=\"Cerrar men\u00FA\">\r\n        <span class=\"material-symbols-outlined\">close</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nav-container\">\r\n      <!-- Static Menu Items -->\r\n      <ng-container *ngIf=\"getConfig('showStaticMenu')\">\r\n        <a routerLink=\".\" \r\n           routerLinkActive=\"active\" \r\n           [routerLinkActiveOptions]=\"{exact: true}\" \r\n           class=\"nav-item\"\r\n           (click)=\"closeMobileMenu()\">\r\n          <span class=\"material-symbols-outlined nav-icon\">home</span>\r\n          <span class=\"nav-text\">Inicio</span>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <!-- Separator -->\r\n      <div class=\"nav-separator\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\"></div>\r\n      \r\n      <!-- Dynamic Menu -->\r\n      <div class=\"dynamic-menu\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\">\r\n        <ng-container *ngFor=\"let rootItem of getRootMenuItems()\">\r\n          <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(rootItem)\">\r\n            <a \r\n              [routerLink]=\"hasChildren(rootItem) ? null : rootItem.path\" \r\n              routerLinkActive=\"active\" \r\n              class=\"nav-item root-item\"\r\n              [class.expandable]=\"hasChildren(rootItem)\"\r\n              (click)=\"onMenuItemClick($event, rootItem)\">\r\n              <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(rootItem) }}</span>\r\n              <span class=\"nav-text\">{{ rootItem.name }}</span>\r\n              <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(rootItem)\">\r\n                {{ isMenuItemOpen(rootItem.code) ? 'expand_more' : 'chevron_right' }}\r\n              </span>\r\n            </a>\r\n            \r\n            <!-- Submenu -->\r\n            <div class=\"submenu\" *ngIf=\"hasChildren(rootItem) && isMenuItemOpen(rootItem.code)\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: rootItem.children, level: 2 }\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      \r\n      <!-- Loading Indicator -->\r\n      <div class=\"menu-loading\" *ngIf=\"isLoadingMenu\">\r\n        <span class=\"material-symbols-outlined nav-icon\">hourglass_empty</span>\r\n        <span class=\"nav-text\">Cargando men\u00FA...</span>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <!-- Recursive Menu Template -->\r\n  <ng-template #menuTemplate let-items=\"items\" let-level=\"level\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(item)\" [attr.data-level]=\"level\">\r\n        <a \r\n          [routerLink]=\"hasChildren(item) ? null : item.path\" \r\n          routerLinkActive=\"active\" \r\n          class=\"nav-item submenu-item\"\r\n          [class.expandable]=\"hasChildren(item)\"\r\n          (click)=\"onMenuItemClick($event, item)\">\r\n          <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(item) }}</span>\r\n          <span class=\"nav-text\">{{ item.name }}</span>\r\n          <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(item)\">\r\n            {{ isMenuItemOpen(item.code) ? 'expand_more' : 'chevron_right' }}\r\n          </span>\r\n        </a>\r\n\r\n        <!-- Recursive Submenu (max 5 levels) -->\r\n        <div class=\"submenu\" *ngIf=\"hasChildren(item) && isMenuItemOpen(item.code) && level < 5\">\r\n          <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: item.children, level: level + 1 }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Main Content -->\r\n  <main class=\"dashboard-content\">\r\n    <div class=\"content-wrapper\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <!-- Footer -->\r\n  <footer class=\"dashboard-footer\">\r\n    <div class=\"footer-content\">\r\n      <span class=\"footer-text\">\r\n        {{ getConfig('footerText') }}\r\n        <ng-container *ngIf=\"getConfig('showVersion')\">\r\n          Versi\u00F3n {{ appVersion }}.\r\n        </ng-container>\r\n        Todos los derechos reservados.\r\n      </span>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-height:100vh}.dashboard{min-height:100vh;display:flex;flex-direction:column;background:var(--color-primary, #313945);font-family:var(--font-family-primary, \"Museo Sans\", sans-serif)}.dashboard-header{background:var(--color-primary, #313945);color:var(--color-white, #ffffff);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem);align-items:stretch}}.header-mobile-top{display:none}@media(max-width:768px){.header-mobile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem)}}.ministry-logo-mobile{display:none}@media(max-width:768px){.ministry-logo-mobile{display:flex;align-items:center}.ministry-logo-mobile img{height:50px;width:auto;filter:brightness(0) invert(1)}}.mobile-title{display:none}@media(max-width:768px){.mobile-title{display:block;font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff);margin:0;text-align:right;flex:1}}.header-mobile-bottom{display:none}@media(max-width:768px){.header-mobile-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem);padding-top:var(--spacing-1, .25rem)}}.header-desktop-layout{display:flex;justify-content:space-between;align-items:center;width:100%}@media(max-width:768px){.header-desktop-layout{display:none}}.header-left{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.header-right{display:flex;align-items:center}.ministry-logo{display:flex;align-items:center;gap:var(--spacing-3, .75rem)}.ministry-logo .logo-icon{display:flex;width:80px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.ministry-logo .logo-icon img{width:100%;height:auto}.ministry-logo .ministry-info h1{font-family:var(--font-family-primary, sans-serif);font-size:var(--font-size-xl, 1.25rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-white, #ffffff);line-height:1.2}.ministry-logo .ministry-info .subtitle{font-size:var(--font-size-xs, .75rem);color:#ffffffd9;font-weight:var(--font-weight-medium, 500)}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;padding:6px;z-index:1003;transition:all .3s ease;flex-shrink:0}@media(max-width:768px){.hamburger-btn{display:flex}}.hamburger-btn .hamburger-line{width:100%;height:2px;background:var(--color-white, #ffffff);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-btn.active{background:#fff3}.hamburger-btn.active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hamburger-btn:hover{background:#fff3}.user-profile{position:relative;display:flex;align-items:center}.user-profile .user-info-trigger{display:flex;align-items:center;gap:var(--spacing-2, .5rem);background:#ffffff1a;padding:var(--spacing-1, .25rem) var(--spacing-3, .75rem);border-radius:var(--border-radius-lg, .5rem);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:inherit;font-family:inherit}.user-profile .user-info-trigger:hover{background:#ffffff26}.user-profile .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-white, #ffffff) 0%,#e2e8f0 100%);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #313945);font-size:var(--font-size-sm, .875rem);box-shadow:0 2px 6px #0000001a}.user-profile .user-details{display:flex;flex-direction:column}.user-profile .user-details .user-name{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #ffffff)}.user-profile .dropdown-icon{color:#fffc;font-size:18px;transition:transform .2s ease}.user-panel{position:absolute;top:calc(100% + var(--spacing-2, .5rem));right:0;min-width:320px;background:var(--color-white, #ffffff);border-radius:var(--border-radius-lg, .5rem);box-shadow:0 10px 40px #0003;border:1px solid var(--color-gray-200, #e9ecef);z-index:1100;overflow:hidden;animation:slideDown .2s ease}@media(max-width:768px){.user-panel{position:absolute;top:calc(100% + var(--spacing-1, .25rem));right:0;left:auto;min-width:280px;max-width:calc(100vw - 1rem);max-height:80vh;overflow-y:auto}}.user-panel-header{background:linear-gradient(135deg,#3c4557,#2a3142);padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem)}.user-panel-header .panel-title{font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff)}.user-panel-content{padding:var(--spacing-3, .75rem)}.user-info-item{display:flex;align-items:flex-start;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);border-bottom:1px solid var(--color-gray-100, #f1f3f4)}.user-info-item:last-child{border-bottom:none}.user-info-item .info-icon{font-size:var(--font-size-lg, 1.125rem);flex-shrink:0;color:var(--color-primary, #313945)}.user-info-item .info-content{display:flex;flex-direction:column;gap:2px;flex:1}.user-info-item .info-content .info-label{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-600, #5a6268);text-transform:uppercase;letter-spacing:.5px}.user-info-item .info-content .info-value{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, #212529);word-break:break-word}@media(max-width:768px){.mobile-hidden{display:none!important}}.user-panel-footer{padding:var(--spacing-3, .75rem);background:var(--color-gray-50, #f8f9fa);border-top:1px solid var(--color-gray-200, #e9ecef)}.user-panel-footer .logout-btn-panel{width:100%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:var(--color-white, #ffffff);border:none;padding:var(--spacing-3, .75rem);border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);text-transform:uppercase}.user-panel-footer .logout-btn-panel:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.nav-overlay{display:none}@media(max-width:768px){.nav-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:1001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.dashboard-nav{background-color:#3c4557;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.dashboard-nav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85%;transform:translate(-100%);z-index:1002;overflow-y:auto;box-shadow:2px 0 10px #0000004d;transition:transform .3s ease}.dashboard-nav.mobile-open{transform:translate(0)}}.dashboard-nav .nav-mobile-header{display:none}@media(max-width:768px){.dashboard-nav .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3, .75rem);background:var(--color-primary, #313945);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:10}}.dashboard-nav .nav-mobile-logo{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.dashboard-nav .nav-mobile-logo img{width:36px;height:auto;filter:brightness(0) invert(1)}.dashboard-nav .nav-mobile-logo .nav-mobile-title{color:var(--color-white, #ffffff);font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-semibold, 600)}.dashboard-nav .nav-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;color:var(--color-white, #ffffff)}.dashboard-nav .nav-close-btn:hover{background:#fff3}.nav-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1, .25rem);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem)}@media(max-width:768px){.nav-container{flex-direction:column;align-items:stretch;padding:var(--spacing-3, .75rem);gap:var(--spacing-1, .25rem)}}.nav-item{display:flex;align-items:center;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);color:var(--color-white, #ffffff);text-decoration:none;border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);transition:all .2s ease;cursor:pointer;background:transparent;border:none;font-family:inherit;white-space:nowrap}.nav-item:hover{background:#ffffff1a}.nav-item.active{background:#fff3}.nav-item .nav-icon{font-size:18px;flex-shrink:0}.nav-item .nav-text{flex:1;text-align:left}.nav-item .expand-icon{font-size:16px;flex-shrink:0;margin-left:var(--spacing-1, .25rem)}@media(max-width:768px){.nav-item{width:100%;padding:var(--spacing-3, .75rem)}}.nav-separator{width:1px;height:20px;background:#fff3;margin:0 var(--spacing-1, .25rem);align-self:center}@media(max-width:768px){.nav-separator{width:100%;height:1px;margin:var(--spacing-2, .5rem) 0}}.dynamic-menu{display:flex;flex-wrap:wrap;gap:var(--spacing-1, .25rem);align-items:flex-start}@media(max-width:768px){.dynamic-menu{flex-direction:column;width:100%}}.menu-item-container{position:relative}@media(max-width:768px){.menu-item-container{width:100%}}@media(min-width:769px){.menu-item-container>.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1000;margin-top:var(--spacing-1, .25rem)}}@media(max-width:768px){.menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}@media(min-width:769px){.submenu{min-width:200px}}@media(max-width:768px){.submenu{width:100%}}.submenu .menu-item-container{width:100%}@media(min-width:769px){.submenu .menu-item-container>.submenu{position:absolute;top:0;left:100%;min-width:200px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1001;margin-left:2px}}@media(max-width:768px){.submenu .menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}.submenu .submenu-item{padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);width:100%;box-sizing:border-box}.submenu .submenu-item:hover{background:#ffffff1a}.menu-loading{display:flex;align-items:center;gap:var(--spacing-2, .5rem);color:#ffffffb3;padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);font-size:var(--font-size-sm, .875rem)}.dashboard-content{flex:1;background:var(--color-white, #ffffff)}.dashboard-content .content-wrapper{padding:var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);max-width:1400px;margin:0 auto}@media(max-width:768px){.dashboard-content .content-wrapper{padding:var(--spacing-3, .75rem)}}.dashboard-footer{background:#3c4557;color:#c5c8cf;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border-top:1px solid rgba(255,255,255,.1)}.dashboard-footer .footer-content{text-align:center}.dashboard-footer .footer-text{font-size:var(--font-size-xs, .75rem)}@media(min-width:769px){.mobile-user{display:none}}@media(max-width:768px){.desktop-user{display:none}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DashboardComponent, isStandalone: true, selector: "lib-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"dashboard\">\r\n  <!-- Header -->\r\n  <header class=\"dashboard-header\">\r\n    <!-- Mobile Header Top -->\r\n    <div class=\"header-mobile-top\">\r\n      <div class=\"ministry-logo-mobile\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n      </div>\r\n      <h1 class=\"mobile-title\">{{ getConfig('title') }}</h1>\r\n    </div>\r\n\r\n    <!-- Mobile Header Bottom -->\r\n    <div class=\"header-mobile-bottom\">\r\n      <button class=\"hamburger-btn\" \r\n              (click)=\"toggleMobileMenu()\"\r\n              [class.active]=\"isMobileMenuOpen\"\r\n              aria-label=\"Toggle menu\">\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n      </button>\r\n\r\n      <div class=\"user-profile mobile-user\" *ngIf=\"userInfo\">\r\n        <button class=\"user-info-trigger\" \r\n                (click)=\"toggleUserPanel($event)\"\r\n                [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                aria-label=\"Abrir men\u00FA de usuario\">\r\n          <div class=\"user-avatar\">\r\n            <span>{{ getUserInitials() }}</span>\r\n          </div>\r\n          <div class=\"user-details\">\r\n            <span class=\"user-name\">{{ getUsername() }}</span>\r\n          </div>\r\n          <span class=\"material-symbols-outlined dropdown-icon\">\r\n            {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n          </span>\r\n        </button>\r\n        \r\n        <!-- User Panel -->\r\n        <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Desktop Header -->\r\n    <div class=\"header-desktop-layout\">\r\n      <div class=\"header-left\">\r\n        <div class=\"ministry-logo\">\r\n          <div class=\"logo-icon\">\r\n            <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n          </div>\r\n          <div class=\"ministry-info\">\r\n            <h1>{{ getConfig('title') }}</h1>\r\n            <span class=\"subtitle\" *ngIf=\"getConfig('subtitle')\">{{ getConfig('subtitle') }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"header-right\">\r\n        <div class=\"user-profile desktop-user\" *ngIf=\"userInfo\">\r\n          <button class=\"user-info-trigger\" \r\n                  (click)=\"toggleUserPanel($event)\"\r\n                  [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                  aria-label=\"Abrir men\u00FA de usuario\">\r\n            <div class=\"user-avatar\">\r\n              <span>{{ getUserInitials() }}</span>\r\n            </div>\r\n            <div class=\"user-details\">\r\n              <span class=\"user-name\">{{ getUsername() }}</span>\r\n            </div>\r\n            <span class=\"material-symbols-outlined dropdown-icon\">\r\n              {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n            </span>\r\n          </button>\r\n          \r\n          <!-- User Panel -->\r\n          <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <!-- User Panel Template -->\r\n  <ng-template #userPanelTemplate>\r\n    <div class=\"user-panel\" *ngIf=\"isUserPanelOpen\">\r\n      <div class=\"user-panel-header\">\r\n        <span class=\"panel-title\">Perfil de Usuario</span>\r\n      </div>\r\n      <div class=\"user-panel-content\">\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">person</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">C\u00F3digo de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUsername() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">badge</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Nombre de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUserFullName() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">credit_card</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Documento:</span>\r\n            <span class=\"info-value\">{{ getDocument() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">business</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Instituci\u00F3n:</span>\r\n            <span class=\"info-value\">{{ getInstitution() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">apartment</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Dependencia:</span>\r\n            <span class=\"info-value\">{{ getDependency() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">work</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Rol:</span>\r\n            <span class=\"info-value\">{{ getRole() }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"user-panel-footer\">\r\n        <button class=\"logout-btn-panel\" (click)=\"logoutAndRedirect()\" title=\"Cerrar sesi\u00F3n\">\r\n          <span class=\"material-symbols-outlined\">logout</span>\r\n          <span class=\"logout-text\">CERRAR SESI\u00D3N</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Mobile Menu Overlay -->\r\n  <div class=\"nav-overlay\" *ngIf=\"isMobileMenuOpen\" (click)=\"closeMobileMenu()\"></div>\r\n\r\n  <!-- Navigation (Horizontal Desktop / Sidebar Mobile) -->\r\n  <nav class=\"dashboard-nav\" [class.mobile-open]=\"isMobileMenuOpen\">\r\n    <div class=\"nav-mobile-header\">\r\n      <div class=\"nav-mobile-logo\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n        <span class=\"nav-mobile-title\">Men\u00FA</span>\r\n      </div>\r\n      <button class=\"nav-close-btn\" (click)=\"closeMobileMenu()\" aria-label=\"Cerrar men\u00FA\">\r\n        <span class=\"material-symbols-outlined\">close</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nav-container\">\r\n      <!-- Static Menu Items -->\r\n      <ng-container *ngIf=\"getConfig('showStaticMenu')\">\r\n        <a routerLink=\".\" \r\n           routerLinkActive=\"active\" \r\n           [routerLinkActiveOptions]=\"{exact: true}\" \r\n           class=\"nav-item\"\r\n           (click)=\"closeMobileMenu()\">\r\n          <span class=\"material-symbols-outlined nav-icon\">home</span>\r\n          <span class=\"nav-text\">Inicio</span>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <!-- Separator -->\r\n      <div class=\"nav-separator\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\"></div>\r\n      \r\n      <!-- Dynamic Menu -->\r\n      <div class=\"dynamic-menu\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\">\r\n        <ng-container *ngFor=\"let rootItem of getRootMenuItems()\">\r\n          <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(rootItem)\">\r\n            <a \r\n              [routerLink]=\"hasChildren(rootItem) ? null : rootItem.path\" \r\n              routerLinkActive=\"active\" \r\n              class=\"nav-item root-item\"\r\n              [class.expandable]=\"hasChildren(rootItem)\"\r\n              (click)=\"onMenuItemClick($event, rootItem)\">\r\n              <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(rootItem) }}</span>\r\n              <span class=\"nav-text\">{{ rootItem.name }}</span>\r\n              <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(rootItem)\">\r\n                {{ isMenuItemOpen(rootItem.code) ? 'expand_more' : 'chevron_right' }}\r\n              </span>\r\n            </a>\r\n            \r\n            <!-- Submenu -->\r\n            <div class=\"submenu\" *ngIf=\"hasChildren(rootItem) && isMenuItemOpen(rootItem.code)\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: rootItem.children, level: 2 }\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      \r\n      <!-- Loading Indicator -->\r\n      <div class=\"menu-loading\" *ngIf=\"isLoadingMenu\">\r\n        <span class=\"material-symbols-outlined nav-icon\">hourglass_empty</span>\r\n        <span class=\"nav-text\">Cargando men\u00FA...</span>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <!-- Recursive Menu Template -->\r\n  <ng-template #menuTemplate let-items=\"items\" let-level=\"level\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(item)\" [attr.data-level]=\"level\">\r\n        <a \r\n          [routerLink]=\"hasChildren(item) ? null : item.path\" \r\n          routerLinkActive=\"active\" \r\n          class=\"nav-item submenu-item\"\r\n          [class.expandable]=\"hasChildren(item)\"\r\n          (click)=\"onMenuItemClick($event, item)\">\r\n          <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(item) }}</span>\r\n          <span class=\"nav-text\">{{ item.name }}</span>\r\n          <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(item)\">\r\n            {{ isMenuItemOpen(item.code) ? 'expand_more' : 'chevron_right' }}\r\n          </span>\r\n        </a>\r\n\r\n        <!-- Recursive Submenu (max 5 levels) -->\r\n        <div class=\"submenu\" *ngIf=\"hasChildren(item) && isMenuItemOpen(item.code) && level < 5\">\r\n          <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: item.children, level: level + 1 }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Main Content -->\r\n  <main class=\"dashboard-content\">\r\n    <div class=\"content-wrapper\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <!-- Footer -->\r\n  <footer class=\"dashboard-footer\">\r\n    <div class=\"footer-content\">\r\n      <span class=\"footer-text\">\r\n        {{ getConfig('footerText') }}\r\n        <ng-container *ngIf=\"getConfig('showVersion')\">\r\n          Versi\u00F3n {{ appVersion }}.\r\n        </ng-container>\r\n        Todos los derechos reservados.\r\n      </span>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-height:100vh}.dashboard{min-height:100vh;display:flex;flex-direction:column;background:var(--color-primary, #313945);font-family:var(--font-family-primary, \"Museo Sans\", sans-serif)}.dashboard-header{background:var(--color-primary, #313945);color:var(--color-white, #ffffff);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem);align-items:stretch}}.header-mobile-top{display:none}@media(max-width:768px){.header-mobile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem)}}.ministry-logo-mobile{display:none}@media(max-width:768px){.ministry-logo-mobile{display:flex;align-items:center}.ministry-logo-mobile img{height:50px;width:auto;filter:brightness(0) invert(1)}}.mobile-title{display:none}@media(max-width:768px){.mobile-title{display:block;font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff);margin:0;text-align:right;flex:1}}.header-mobile-bottom{display:none}@media(max-width:768px){.header-mobile-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem);padding-top:var(--spacing-1, .25rem)}}.header-desktop-layout{display:flex;justify-content:space-between;align-items:center;width:100%}@media(max-width:768px){.header-desktop-layout{display:none}}.header-left{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.header-right{display:flex;align-items:center}.ministry-logo{display:flex;align-items:center;gap:var(--spacing-3, .75rem)}.ministry-logo .logo-icon{display:flex;width:80px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.ministry-logo .logo-icon img{width:100%;height:auto}.ministry-logo .ministry-info h1{font-family:var(--font-family-primary, sans-serif);font-size:var(--font-size-xl, 1.25rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-white, #ffffff);line-height:1.2}.ministry-logo .ministry-info .subtitle{font-size:var(--font-size-xs, .75rem);color:#ffffffd9;font-weight:var(--font-weight-medium, 500)}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;padding:6px;z-index:1003;transition:all .3s ease;flex-shrink:0}@media(max-width:768px){.hamburger-btn{display:flex}}.hamburger-btn .hamburger-line{width:100%;height:2px;background:var(--color-white, #ffffff);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-btn.active{background:#fff3}.hamburger-btn.active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hamburger-btn:hover{background:#fff3}.user-profile{position:relative;display:flex;align-items:center}.user-profile .user-info-trigger{display:flex;align-items:center;gap:var(--spacing-2, .5rem);background:#ffffff1a;padding:var(--spacing-1, .25rem) var(--spacing-3, .75rem);border-radius:var(--border-radius-lg, .5rem);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:inherit;font-family:inherit}.user-profile .user-info-trigger:hover{background:#ffffff26}.user-profile .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-white, #ffffff) 0%,#e2e8f0 100%);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #313945);font-size:var(--font-size-sm, .875rem);box-shadow:0 2px 6px #0000001a}.user-profile .user-details{display:flex;flex-direction:column}.user-profile .user-details .user-name{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #ffffff)}.user-profile .dropdown-icon{color:#fffc;font-size:18px;transition:transform .2s ease}.user-panel{position:absolute;top:calc(100% + var(--spacing-2, .5rem));right:0;min-width:320px;background:var(--color-white, #ffffff);border-radius:var(--border-radius-lg, .5rem);box-shadow:0 10px 40px #0003;border:1px solid var(--color-gray-200, #e9ecef);z-index:1100;overflow:hidden;animation:slideDown .2s ease}@media(max-width:768px){.user-panel{position:absolute;top:calc(100% + var(--spacing-1, .25rem));right:0;left:auto;min-width:280px;max-width:calc(100vw - 1rem);max-height:80vh;overflow-y:auto}}.user-panel-header{background:linear-gradient(135deg,#3c4557,#2a3142);padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem)}.user-panel-header .panel-title{font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff)}.user-panel-content{padding:var(--spacing-3, .75rem)}.user-info-item{display:flex;align-items:flex-start;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);border-bottom:1px solid var(--color-gray-100, #f1f3f4)}.user-info-item:last-child{border-bottom:none}.user-info-item .info-icon{font-size:var(--font-size-lg, 1.125rem);flex-shrink:0;color:var(--color-primary, #313945)}.user-info-item .info-content{display:flex;flex-direction:column;gap:2px;flex:1}.user-info-item .info-content .info-label{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-600, #5a6268);text-transform:uppercase;letter-spacing:.5px}.user-info-item .info-content .info-value{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, #212529);word-break:break-word}@media(max-width:768px){.mobile-hidden{display:none!important}}.user-panel-footer{padding:var(--spacing-3, .75rem);background:var(--color-gray-50, #f8f9fa);border-top:1px solid var(--color-gray-200, #e9ecef)}.user-panel-footer .logout-btn-panel{width:100%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:var(--color-white, #ffffff);border:none;padding:var(--spacing-3, .75rem);border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);text-transform:uppercase}.user-panel-footer .logout-btn-panel:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.nav-overlay{display:none}@media(max-width:768px){.nav-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:1001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.dashboard-nav{background-color:#3c4557;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.dashboard-nav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85%;transform:translate(-100%);z-index:1002;overflow-y:auto;box-shadow:2px 0 10px #0000004d;transition:transform .3s ease}.dashboard-nav.mobile-open{transform:translate(0)}}.dashboard-nav .nav-mobile-header{display:none}@media(max-width:768px){.dashboard-nav .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3, .75rem);background:var(--color-primary, #313945);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:10}}.dashboard-nav .nav-mobile-logo{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.dashboard-nav .nav-mobile-logo img{width:36px;height:auto;filter:brightness(0) invert(1)}.dashboard-nav .nav-mobile-logo .nav-mobile-title{color:var(--color-white, #ffffff);font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-semibold, 600)}.dashboard-nav .nav-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;color:var(--color-white, #ffffff)}.dashboard-nav .nav-close-btn:hover{background:#fff3}.nav-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1, .25rem);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem)}@media(max-width:768px){.nav-container{flex-direction:column;align-items:stretch;padding:var(--spacing-3, .75rem);gap:var(--spacing-1, .25rem)}}.nav-item{display:flex;align-items:center;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);color:var(--color-white, #ffffff);text-decoration:none;border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);transition:all .2s ease;cursor:pointer;background:transparent;border:none;font-family:inherit;white-space:nowrap}.nav-item:hover{background:#ffffff1a}.nav-item.active{background:#fff3}.nav-item .nav-icon{font-size:18px;flex-shrink:0}.nav-item .nav-text{flex:1;text-align:left}.nav-item .expand-icon{font-size:16px;flex-shrink:0;margin-left:var(--spacing-1, .25rem)}@media(max-width:768px){.nav-item{width:100%;padding:var(--spacing-3, .75rem)}}.nav-separator{width:1px;height:20px;background:#fff3;margin:0 var(--spacing-1, .25rem);align-self:center}@media(max-width:768px){.nav-separator{width:100%;height:1px;margin:var(--spacing-2, .5rem) 0}}.dynamic-menu{display:flex;flex-wrap:wrap;gap:var(--spacing-1, .25rem);align-items:flex-start}@media(max-width:768px){.dynamic-menu{flex-direction:column;width:100%}}.menu-item-container{position:relative}@media(max-width:768px){.menu-item-container{width:100%}}@media(min-width:769px){.menu-item-container>.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1000;margin-top:var(--spacing-1, .25rem)}}@media(max-width:768px){.menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}@media(min-width:769px){.submenu{min-width:200px}}@media(max-width:768px){.submenu{width:100%}}.submenu .menu-item-container{width:100%}@media(min-width:769px){.submenu .menu-item-container>.submenu{position:absolute;top:0;left:100%;min-width:200px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1001;margin-left:2px}}@media(max-width:768px){.submenu .menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}.submenu .submenu-item{padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);width:100%;box-sizing:border-box}.submenu .submenu-item:hover{background:#ffffff1a}.menu-loading{display:flex;align-items:center;gap:var(--spacing-2, .5rem);color:#ffffffb3;padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);font-size:var(--font-size-sm, .875rem)}.dashboard-content{flex:1;background:var(--color-white, #ffffff)}.dashboard-content .content-wrapper{padding:var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);max-width:1400px;margin:0 auto}@media(max-width:768px){.dashboard-content .content-wrapper{padding:var(--spacing-3, .75rem)}}.dashboard-footer{background:#3c4557;color:#c5c8cf;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border-top:1px solid rgba(255,255,255,.1)}.dashboard-footer .footer-content{text-align:center}.dashboard-footer .footer-text{font-size:var(--font-size-xs, .75rem)}@media(min-width:769px){.mobile-user{display:none}}@media(max-width:768px){.desktop-user{display:none}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-dashboard', standalone: true, imports: [CommonModule, RouterModule], template: "<div class=\"dashboard\">\r\n  <!-- Header -->\r\n  <header class=\"dashboard-header\">\r\n    <!-- Mobile Header Top -->\r\n    <div class=\"header-mobile-top\">\r\n      <div class=\"ministry-logo-mobile\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n      </div>\r\n      <h1 class=\"mobile-title\">{{ getConfig('title') }}</h1>\r\n    </div>\r\n\r\n    <!-- Mobile Header Bottom -->\r\n    <div class=\"header-mobile-bottom\">\r\n      <button class=\"hamburger-btn\" \r\n              (click)=\"toggleMobileMenu()\"\r\n              [class.active]=\"isMobileMenuOpen\"\r\n              aria-label=\"Toggle menu\">\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n      </button>\r\n\r\n      <div class=\"user-profile mobile-user\" *ngIf=\"userInfo\">\r\n        <button class=\"user-info-trigger\" \r\n                (click)=\"toggleUserPanel($event)\"\r\n                [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                aria-label=\"Abrir men\u00FA de usuario\">\r\n          <div class=\"user-avatar\">\r\n            <span>{{ getUserInitials() }}</span>\r\n          </div>\r\n          <div class=\"user-details\">\r\n            <span class=\"user-name\">{{ getUsername() }}</span>\r\n          </div>\r\n          <span class=\"material-symbols-outlined dropdown-icon\">\r\n            {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n          </span>\r\n        </button>\r\n        \r\n        <!-- User Panel -->\r\n        <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Desktop Header -->\r\n    <div class=\"header-desktop-layout\">\r\n      <div class=\"header-left\">\r\n        <div class=\"ministry-logo\">\r\n          <div class=\"logo-icon\">\r\n            <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n          </div>\r\n          <div class=\"ministry-info\">\r\n            <h1>{{ getConfig('title') }}</h1>\r\n            <span class=\"subtitle\" *ngIf=\"getConfig('subtitle')\">{{ getConfig('subtitle') }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"header-right\">\r\n        <div class=\"user-profile desktop-user\" *ngIf=\"userInfo\">\r\n          <button class=\"user-info-trigger\" \r\n                  (click)=\"toggleUserPanel($event)\"\r\n                  [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                  aria-label=\"Abrir men\u00FA de usuario\">\r\n            <div class=\"user-avatar\">\r\n              <span>{{ getUserInitials() }}</span>\r\n            </div>\r\n            <div class=\"user-details\">\r\n              <span class=\"user-name\">{{ getUsername() }}</span>\r\n            </div>\r\n            <span class=\"material-symbols-outlined dropdown-icon\">\r\n              {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n            </span>\r\n          </button>\r\n          \r\n          <!-- User Panel -->\r\n          <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <!-- User Panel Template -->\r\n  <ng-template #userPanelTemplate>\r\n    <div class=\"user-panel\" *ngIf=\"isUserPanelOpen\">\r\n      <div class=\"user-panel-header\">\r\n        <span class=\"panel-title\">Perfil de Usuario</span>\r\n      </div>\r\n      <div class=\"user-panel-content\">\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">person</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">C\u00F3digo de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUsername() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">badge</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Nombre de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUserFullName() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">credit_card</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Documento:</span>\r\n            <span class=\"info-value\">{{ getDocument() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">business</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Instituci\u00F3n:</span>\r\n            <span class=\"info-value\">{{ getInstitution() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">apartment</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Dependencia:</span>\r\n            <span class=\"info-value\">{{ getDependency() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">work</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Rol:</span>\r\n            <span class=\"info-value\">{{ getRole() }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"user-panel-footer\">\r\n        <button class=\"logout-btn-panel\" (click)=\"logoutAndRedirect()\" title=\"Cerrar sesi\u00F3n\">\r\n          <span class=\"material-symbols-outlined\">logout</span>\r\n          <span class=\"logout-text\">CERRAR SESI\u00D3N</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Mobile Menu Overlay -->\r\n  <div class=\"nav-overlay\" *ngIf=\"isMobileMenuOpen\" (click)=\"closeMobileMenu()\"></div>\r\n\r\n  <!-- Navigation (Horizontal Desktop / Sidebar Mobile) -->\r\n  <nav class=\"dashboard-nav\" [class.mobile-open]=\"isMobileMenuOpen\">\r\n    <div class=\"nav-mobile-header\">\r\n      <div class=\"nav-mobile-logo\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n        <span class=\"nav-mobile-title\">Men\u00FA</span>\r\n      </div>\r\n      <button class=\"nav-close-btn\" (click)=\"closeMobileMenu()\" aria-label=\"Cerrar men\u00FA\">\r\n        <span class=\"material-symbols-outlined\">close</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nav-container\">\r\n      <!-- Static Menu Items -->\r\n      <ng-container *ngIf=\"getConfig('showStaticMenu')\">\r\n        <a routerLink=\".\" \r\n           routerLinkActive=\"active\" \r\n           [routerLinkActiveOptions]=\"{exact: true}\" \r\n           class=\"nav-item\"\r\n           (click)=\"closeMobileMenu()\">\r\n          <span class=\"material-symbols-outlined nav-icon\">home</span>\r\n          <span class=\"nav-text\">Inicio</span>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <!-- Separator -->\r\n      <div class=\"nav-separator\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\"></div>\r\n      \r\n      <!-- Dynamic Menu -->\r\n      <div class=\"dynamic-menu\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\">\r\n        <ng-container *ngFor=\"let rootItem of getRootMenuItems()\">\r\n          <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(rootItem)\">\r\n            <a \r\n              [routerLink]=\"hasChildren(rootItem) ? null : rootItem.path\" \r\n              routerLinkActive=\"active\" \r\n              class=\"nav-item root-item\"\r\n              [class.expandable]=\"hasChildren(rootItem)\"\r\n              (click)=\"onMenuItemClick($event, rootItem)\">\r\n              <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(rootItem) }}</span>\r\n              <span class=\"nav-text\">{{ rootItem.name }}</span>\r\n              <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(rootItem)\">\r\n                {{ isMenuItemOpen(rootItem.code) ? 'expand_more' : 'chevron_right' }}\r\n              </span>\r\n            </a>\r\n            \r\n            <!-- Submenu -->\r\n            <div class=\"submenu\" *ngIf=\"hasChildren(rootItem) && isMenuItemOpen(rootItem.code)\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: rootItem.children, level: 2 }\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      \r\n      <!-- Loading Indicator -->\r\n      <div class=\"menu-loading\" *ngIf=\"isLoadingMenu\">\r\n        <span class=\"material-symbols-outlined nav-icon\">hourglass_empty</span>\r\n        <span class=\"nav-text\">Cargando men\u00FA...</span>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <!-- Recursive Menu Template -->\r\n  <ng-template #menuTemplate let-items=\"items\" let-level=\"level\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(item)\" [attr.data-level]=\"level\">\r\n        <a \r\n          [routerLink]=\"hasChildren(item) ? null : item.path\" \r\n          routerLinkActive=\"active\" \r\n          class=\"nav-item submenu-item\"\r\n          [class.expandable]=\"hasChildren(item)\"\r\n          (click)=\"onMenuItemClick($event, item)\">\r\n          <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(item) }}</span>\r\n          <span class=\"nav-text\">{{ item.name }}</span>\r\n          <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(item)\">\r\n            {{ isMenuItemOpen(item.code) ? 'expand_more' : 'chevron_right' }}\r\n          </span>\r\n        </a>\r\n\r\n        <!-- Recursive Submenu (max 5 levels) -->\r\n        <div class=\"submenu\" *ngIf=\"hasChildren(item) && isMenuItemOpen(item.code) && level < 5\">\r\n          <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: item.children, level: level + 1 }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Main Content -->\r\n  <main class=\"dashboard-content\">\r\n    <div class=\"content-wrapper\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <!-- Footer -->\r\n  <footer class=\"dashboard-footer\">\r\n    <div class=\"footer-content\">\r\n      <span class=\"footer-text\">\r\n        {{ getConfig('footerText') }}\r\n        <ng-container *ngIf=\"getConfig('showVersion')\">\r\n          Versi\u00F3n {{ appVersion }}.\r\n        </ng-container>\r\n        Todos los derechos reservados.\r\n      </span>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-height:100vh}.dashboard{min-height:100vh;display:flex;flex-direction:column;background:var(--color-primary, #313945);font-family:var(--font-family-primary, \"Museo Sans\", sans-serif)}.dashboard-header{background:var(--color-primary, #313945);color:var(--color-white, #ffffff);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem);align-items:stretch}}.header-mobile-top{display:none}@media(max-width:768px){.header-mobile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem)}}.ministry-logo-mobile{display:none}@media(max-width:768px){.ministry-logo-mobile{display:flex;align-items:center}.ministry-logo-mobile img{height:50px;width:auto;filter:brightness(0) invert(1)}}.mobile-title{display:none}@media(max-width:768px){.mobile-title{display:block;font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff);margin:0;text-align:right;flex:1}}.header-mobile-bottom{display:none}@media(max-width:768px){.header-mobile-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem);padding-top:var(--spacing-1, .25rem)}}.header-desktop-layout{display:flex;justify-content:space-between;align-items:center;width:100%}@media(max-width:768px){.header-desktop-layout{display:none}}.header-left{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.header-right{display:flex;align-items:center}.ministry-logo{display:flex;align-items:center;gap:var(--spacing-3, .75rem)}.ministry-logo .logo-icon{display:flex;width:80px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.ministry-logo .logo-icon img{width:100%;height:auto}.ministry-logo .ministry-info h1{font-family:var(--font-family-primary, sans-serif);font-size:var(--font-size-xl, 1.25rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-white, #ffffff);line-height:1.2}.ministry-logo .ministry-info .subtitle{font-size:var(--font-size-xs, .75rem);color:#ffffffd9;font-weight:var(--font-weight-medium, 500)}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;padding:6px;z-index:1003;transition:all .3s ease;flex-shrink:0}@media(max-width:768px){.hamburger-btn{display:flex}}.hamburger-btn .hamburger-line{width:100%;height:2px;background:var(--color-white, #ffffff);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-btn.active{background:#fff3}.hamburger-btn.active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hamburger-btn:hover{background:#fff3}.user-profile{position:relative;display:flex;align-items:center}.user-profile .user-info-trigger{display:flex;align-items:center;gap:var(--spacing-2, .5rem);background:#ffffff1a;padding:var(--spacing-1, .25rem) var(--spacing-3, .75rem);border-radius:var(--border-radius-lg, .5rem);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:inherit;font-family:inherit}.user-profile .user-info-trigger:hover{background:#ffffff26}.user-profile .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-white, #ffffff) 0%,#e2e8f0 100%);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #313945);font-size:var(--font-size-sm, .875rem);box-shadow:0 2px 6px #0000001a}.user-profile .user-details{display:flex;flex-direction:column}.user-profile .user-details .user-name{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #ffffff)}.user-profile .dropdown-icon{color:#fffc;font-size:18px;transition:transform .2s ease}.user-panel{position:absolute;top:calc(100% + var(--spacing-2, .5rem));right:0;min-width:320px;background:var(--color-white, #ffffff);border-radius:var(--border-radius-lg, .5rem);box-shadow:0 10px 40px #0003;border:1px solid var(--color-gray-200, #e9ecef);z-index:1100;overflow:hidden;animation:slideDown .2s ease}@media(max-width:768px){.user-panel{position:absolute;top:calc(100% + var(--spacing-1, .25rem));right:0;left:auto;min-width:280px;max-width:calc(100vw - 1rem);max-height:80vh;overflow-y:auto}}.user-panel-header{background:linear-gradient(135deg,#3c4557,#2a3142);padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem)}.user-panel-header .panel-title{font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff)}.user-panel-content{padding:var(--spacing-3, .75rem)}.user-info-item{display:flex;align-items:flex-start;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);border-bottom:1px solid var(--color-gray-100, #f1f3f4)}.user-info-item:last-child{border-bottom:none}.user-info-item .info-icon{font-size:var(--font-size-lg, 1.125rem);flex-shrink:0;color:var(--color-primary, #313945)}.user-info-item .info-content{display:flex;flex-direction:column;gap:2px;flex:1}.user-info-item .info-content .info-label{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-600, #5a6268);text-transform:uppercase;letter-spacing:.5px}.user-info-item .info-content .info-value{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, #212529);word-break:break-word}@media(max-width:768px){.mobile-hidden{display:none!important}}.user-panel-footer{padding:var(--spacing-3, .75rem);background:var(--color-gray-50, #f8f9fa);border-top:1px solid var(--color-gray-200, #e9ecef)}.user-panel-footer .logout-btn-panel{width:100%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:var(--color-white, #ffffff);border:none;padding:var(--spacing-3, .75rem);border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);text-transform:uppercase}.user-panel-footer .logout-btn-panel:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.nav-overlay{display:none}@media(max-width:768px){.nav-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:1001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.dashboard-nav{background-color:#3c4557;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.dashboard-nav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85%;transform:translate(-100%);z-index:1002;overflow-y:auto;box-shadow:2px 0 10px #0000004d;transition:transform .3s ease}.dashboard-nav.mobile-open{transform:translate(0)}}.dashboard-nav .nav-mobile-header{display:none}@media(max-width:768px){.dashboard-nav .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3, .75rem);background:var(--color-primary, #313945);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:10}}.dashboard-nav .nav-mobile-logo{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.dashboard-nav .nav-mobile-logo img{width:36px;height:auto;filter:brightness(0) invert(1)}.dashboard-nav .nav-mobile-logo .nav-mobile-title{color:var(--color-white, #ffffff);font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-semibold, 600)}.dashboard-nav .nav-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;color:var(--color-white, #ffffff)}.dashboard-nav .nav-close-btn:hover{background:#fff3}.nav-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1, .25rem);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem)}@media(max-width:768px){.nav-container{flex-direction:column;align-items:stretch;padding:var(--spacing-3, .75rem);gap:var(--spacing-1, .25rem)}}.nav-item{display:flex;align-items:center;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);color:var(--color-white, #ffffff);text-decoration:none;border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);transition:all .2s ease;cursor:pointer;background:transparent;border:none;font-family:inherit;white-space:nowrap}.nav-item:hover{background:#ffffff1a}.nav-item.active{background:#fff3}.nav-item .nav-icon{font-size:18px;flex-shrink:0}.nav-item .nav-text{flex:1;text-align:left}.nav-item .expand-icon{font-size:16px;flex-shrink:0;margin-left:var(--spacing-1, .25rem)}@media(max-width:768px){.nav-item{width:100%;padding:var(--spacing-3, .75rem)}}.nav-separator{width:1px;height:20px;background:#fff3;margin:0 var(--spacing-1, .25rem);align-self:center}@media(max-width:768px){.nav-separator{width:100%;height:1px;margin:var(--spacing-2, .5rem) 0}}.dynamic-menu{display:flex;flex-wrap:wrap;gap:var(--spacing-1, .25rem);align-items:flex-start}@media(max-width:768px){.dynamic-menu{flex-direction:column;width:100%}}.menu-item-container{position:relative}@media(max-width:768px){.menu-item-container{width:100%}}@media(min-width:769px){.menu-item-container>.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1000;margin-top:var(--spacing-1, .25rem)}}@media(max-width:768px){.menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}@media(min-width:769px){.submenu{min-width:200px}}@media(max-width:768px){.submenu{width:100%}}.submenu .menu-item-container{width:100%}@media(min-width:769px){.submenu .menu-item-container>.submenu{position:absolute;top:0;left:100%;min-width:200px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1001;margin-left:2px}}@media(max-width:768px){.submenu .menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}.submenu .submenu-item{padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);width:100%;box-sizing:border-box}.submenu .submenu-item:hover{background:#ffffff1a}.menu-loading{display:flex;align-items:center;gap:var(--spacing-2, .5rem);color:#ffffffb3;padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);font-size:var(--font-size-sm, .875rem)}.dashboard-content{flex:1;background:var(--color-white, #ffffff)}.dashboard-content .content-wrapper{padding:var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);max-width:1400px;margin:0 auto}@media(max-width:768px){.dashboard-content .content-wrapper{padding:var(--spacing-3, .75rem)}}.dashboard-footer{background:#3c4557;color:#c5c8cf;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border-top:1px solid rgba(255,255,255,.1)}.dashboard-footer .footer-content{text-align:center}.dashboard-footer .footer-text{font-size:var(--font-size-xs, .75rem)}@media(min-width:769px){.mobile-user{display:none}}@media(max-width:768px){.desktop-user{display:none}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: AuthorizationService }], propDecorators: { config: [{
-                type: Input
-            }], onDocumentClick: [{
+        }], ctorParameters: () => [{ type: AuthService }, { type: AuthorizationService }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -1564,5 +1425,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, AuthorizationService, ConfigService, DEFAULT_DASHBOARD_CONFIG, DEFAULT_LIBRARY_CONFIG, DEFAULT_LOGIN_CONFIG, DashboardComponent, FRMK_LIBRARY_CONFIG, LoginComponent, VERSION, VERSION_INFO, authGuard, getAppConfig, getAppConfigWithServerData, getAuthConfig, getAuthConfigEnv, getCurrentAppConfig, getDashboardConfig, getDefaultAppConfig, getLibraryConfig, getLoginConfig, initializeLibraryConfig, isLibraryConfigured, mapConfigServerResponse, provideFrmkConfig, setCurrentAppConfig };
+export { AuthService, AuthorizationService, ConfigService, DEFAULT_DASHBOARD_CONFIG, DEFAULT_LIBRARY_CONFIG, DEFAULT_LOGIN_CONFIG, DashboardComponent, FrmkConfigStore, LoginComponent, VERSION, VERSION_INFO, authGuard };
 //# sourceMappingURL=shared-lib-angular.mjs.map