valtech-components 2.0.621 → 2.0.623

package/lib/components/atoms/rights-footer/rights-footer.component.d.ts

@@ -39,7 +39,7 @@ export declare class RightsFooterComponent {
     /**
      * Computed helper for align prop in template.
      */
-    propsAlign: import("@angular/core").Signal<"center" | "left" | "right">;
+    propsAlign: import("@angular/core").Signal<"left" | "center" | "right">;
     /**
      * Computed helper for color prop in template.
      */

package/lib/components/molecules/features-list/features-list.component.d.ts

@@ -47,9 +47,9 @@ export declare class FeaturesListComponent {
         i18nNamespace?: string;
         iconColor: string;
         iconSize: number;
-        mode: "vertical" | "horizontal";
+        mode: "horizontal" | "vertical";
         gap: "small" | "medium" | "large";
-        alignment: "start" | "center";
+        alignment: "center" | "start";
     }>;
     /** Resolved icon color (handles Ionic colors and CSS colors) */
     iconColorStyle: import("@angular/core").Signal<string>;

package/lib/components/molecules/update-banner/update-banner.component.d.ts

@@ -0,0 +1,42 @@
+import { BannerMetadata } from '../../organisms/banner/types';
+import * as i0 from "@angular/core";
+/**
+ * val-update-banner
+ *
+ * Banner de actualización que aparece cuando hay una nueva versión disponible.
+ * Se cierra automáticamente cuando el usuario hace clic en "Actualizar" o en cerrar.
+ *
+ * @example
+ * ```html
+ * <!-- Uso básico -->
+ * <val-update-banner />
+ *
+ * <!-- El banner solo aparece si hay actualización disponible -->
+ * ```
+ */
+export declare class UpdateBannerComponent {
+    private appConfig;
+    private i18n;
+    /**
+     * Signal para controlar si el banner fue descartado por el usuario.
+     */
+    private dismissed;
+    /**
+     * Indica si el banner debe mostrarse.
+     */
+    readonly show: import("@angular/core").Signal<boolean>;
+    /**
+     * Props del banner calculadas reactivamente.
+     */
+    readonly bannerProps: import("@angular/core").Signal<BannerMetadata>;
+    /**
+     * Maneja el clic en acciones del banner.
+     */
+    onAction(token: string): void;
+    /**
+     * Descarta el banner temporalmente (hasta que se recargue la página).
+     */
+    dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpdateBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UpdateBannerComponent, "val-update-banner", never, {}, {}, never, never, true, never>;
+}

package/lib/components/organisms/article/article.component.d.ts

@@ -57,7 +57,7 @@ export declare class ArticleComponent implements OnInit {
         linkConfig?: import("valtech-components").LinkProcessorConfig;
         allowPartialBold?: boolean;
         authorColor?: import("@ionic/core").Color;
-        alignment?: "center" | "left" | "right";
+        alignment?: "left" | "center" | "right";
         showQuoteMark?: boolean;
     };
     getHighlightTextProps(element: ArticleElement): {
@@ -91,7 +91,7 @@ export declare class ArticleComponent implements OnInit {
         icon?: import("valtech-components").IconMetada;
         shape?: "round";
         size?: "small" | "large" | "default";
-        fill?: "default" | "clear" | "outline" | "solid";
+        fill?: "default" | "outline" | "clear" | "solid";
         type: "button" | "submit" | "reset";
         token?: string;
         ref?: any;

package/lib/components/organisms/toolbar/toolbar.component.d.ts

@@ -73,7 +73,7 @@ export declare class ToolbarComponent implements OnInit {
         showFlags?: boolean;
         color: import("@ionic/core").Color;
         size?: "small" | "large" | "default";
-        fill?: "default" | "clear" | "outline" | "solid";
+        fill?: "default" | "outline" | "clear" | "solid";
         shape?: "round";
         expand?: "full" | "block";
         disabled?: boolean;

package/lib/components/templates/maintenance-page/maintenance-page.component.d.ts

@@ -0,0 +1,57 @@
+import { MaintenancePageMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-maintenance-page
+ *
+ * Página completa de mantenimiento con imagen, título y mensaje personalizables.
+ * Se integra con i18n para textos por defecto en múltiples idiomas.
+ *
+ * @example
+ * ```html
+ * <!-- Uso básico (usa textos por defecto) -->
+ * <val-maintenance-page />
+ *
+ * <!-- Personalizado -->
+ * <val-maintenance-page
+ *   [props]="{
+ *     title: 'En mantenimiento',
+ *     message: 'Volvemos pronto',
+ *     image: 'assets/maintenance.svg'
+ *   }"
+ * />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // En app.component.ts
+ * @Component({
+ *   template: \`
+ *     @if (appConfig.isMaintenanceMode()) {
+ *       <val-maintenance-page />
+ *     } @else {
+ *       <ion-router-outlet />
+ *     }
+ *   \`
+ * })
+ * export class AppComponent {
+ *   appConfig = inject(AppConfigService);
+ * }
+ * ```
+ */
+export declare class MaintenancePageComponent {
+    /**
+     * Configuración de la página de mantenimiento.
+     */
+    props: MaintenancePageMetadata;
+    private i18n;
+    /**
+     * Título de la página (reactivo a cambios de idioma).
+     */
+    title: import("@angular/core").Signal<string>;
+    /**
+     * Mensaje de la página (reactivo a cambios de idioma).
+     */
+    message: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaintenancePageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaintenancePageComponent, "val-maintenance-page", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/templates/maintenance-page/types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Props para val-maintenance-page component.
+ *
+ * @property title - Título personalizado (opcional, usa i18n por defecto)
+ * @property message - Mensaje personalizado (opcional, usa i18n por defecto)
+ * @property image - Ruta a imagen personalizada (opcional)
+ */
+export type MaintenancePageMetadata = {
+    title?: string;
+    message?: string;
+    image?: string;
+};

package/lib/components/templates/page-content/page-content.component.d.ts

@@ -36,7 +36,13 @@ export declare class PageContentComponent {
      * Page content configuration.
      */
     props: PageContentMetadata;
+    private appConfigEnabled;
     constructor(theme: ThemeService, nav: NavigationService);
+    /**
+     * Whether to show the update banner.
+     * Only shows if AppConfigService is configured and not disabled via props.
+     */
+    get showUpdateBanner(): boolean;
     /**
      * Emits when a header action is clicked.
      */

package/lib/components/templates/page-content/types.d.ts

@@ -18,4 +18,10 @@ export interface PageContentMetadata {
      * Uses 'icon' mode by default for compact display.
      */
     languageSelector?: LanguageSelectorMetadata;
+    /**
+     * Whether to show the update banner when a new version is available.
+     * Requires AppConfigService to be configured with provideValtechAppConfig().
+     * @default true
+     */
+    showUpdateBanner?: boolean;
 }

package/lib/services/app-config/app-config.service.d.ts

@@ -0,0 +1,115 @@
+import { AppConfig } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio de configuración remota de la aplicación.
+ *
+ * Lee la configuración desde Firestore (apps/{appId}/config/app) y provee:
+ * - Feature flags reactivos
+ * - Variables dinámicas de configuración
+ * - Detección de nuevas versiones
+ * - Modo mantenimiento
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class MyComponent {
+ *   private appConfig = inject(AppConfigService);
+ *
+ *   // Verificar feature flag
+ *   showNewFeature = computed(() =>
+ *     this.appConfig.isFeatureEnabled('newDashboard')
+ *   );
+ *
+ *   // Obtener variable
+ *   maxSize = this.appConfig.getVariable('maxUploadSize', 5242880);
+ * }
+ * ```
+ */
+export declare class AppConfigService {
+    private firestore;
+    private serviceConfig;
+    private subscription;
+    /**
+     * Configuración actual de la aplicación.
+     * null si no se ha cargado o no está configurado.
+     */
+    readonly appConfig: import("@angular/core").WritableSignal<AppConfig>;
+    /**
+     * Indica si la configuración está cargando.
+     */
+    readonly loading: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Error de carga, si existe.
+     */
+    readonly error: import("@angular/core").WritableSignal<string>;
+    /**
+     * Indica si hay una nueva versión disponible.
+     */
+    readonly hasUpdate: import("@angular/core").Signal<boolean>;
+    /**
+     * Indica si la aplicación está en modo mantenimiento.
+     */
+    readonly isMaintenanceMode: import("@angular/core").Signal<boolean>;
+    /**
+     * Versión remota de la aplicación.
+     */
+    readonly remoteVersion: import("@angular/core").Signal<string>;
+    /**
+     * Versión actual de la aplicación (local).
+     */
+    readonly currentVersion: import("@angular/core").Signal<string>;
+    /**
+     * Inicializa el servicio y comienza a escuchar cambios en la configuración.
+     * Se llama automáticamente via APP_INITIALIZER si se usa provideValtechAppConfig().
+     */
+    initialize(): Promise<void>;
+    /**
+     * Verifica si un feature flag está habilitado.
+     *
+     * @param feature - Nombre del feature flag
+     * @param defaultValue - Valor por defecto si no existe (default: false)
+     * @returns true si el feature está habilitado
+     *
+     * @example
+     * ```typescript
+     * if (appConfig.isFeatureEnabled('darkMode')) {
+     *   // Mostrar toggle de dark mode
+     * }
+     * ```
+     */
+    isFeatureEnabled(feature: string, defaultValue?: boolean): boolean;
+    /**
+     * Obtiene una variable de configuración.
+     *
+     * @param key - Clave de la variable
+     * @param defaultValue - Valor por defecto si no existe
+     * @returns Valor de la variable o el valor por defecto
+     *
+     * @example
+     * ```typescript
+     * const maxSize = appConfig.getVariable('maxUploadSize', 5242880);
+     * const supportEmail = appConfig.getVariable('supportEmail', 'support@example.com');
+     * ```
+     */
+    getVariable<T>(key: string, defaultValue: T): T;
+    /**
+     * Recarga la configuración manualmente (one-time read).
+     * Útil si necesitas forzar una actualización.
+     */
+    refresh(): Promise<void>;
+    /**
+     * Desuscribe del listener de Firestore.
+     * Se llama automáticamente cuando el servicio se destruye.
+     */
+    destroy(): void;
+    /**
+     * Compara dos versiones semver y retorna true si remote > current.
+     *
+     * @param remote - Versión remota (ej: "1.2.3")
+     * @param current - Versión actual (ej: "1.2.0")
+     * @returns true si remote es mayor que current
+     */
+    private isNewerVersion;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppConfigService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AppConfigService>;
+}

package/lib/services/app-config/config.d.ts

@@ -0,0 +1,31 @@
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { AppConfigServiceConfig } from './types';
+/**
+ * Token de inyección para la configuración de AppConfig.
+ */
+export declare const VALTECH_APP_CONFIG: InjectionToken<AppConfigServiceConfig>;
+/**
+ * Provee el servicio de configuración remota a la aplicación Angular.
+ *
+ * @param config - Configuración del servicio
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAppConfig } from 'valtech-components';
+ * import { version } from '../package.json';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechFirebase(environment.valtechFirebase),
+ *     provideValtechAppConfig({
+ *       currentVersion: version,
+ *       showUpdateBanner: true,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export declare function provideValtechAppConfig(config: AppConfigServiceConfig): EnvironmentProviders;

package/lib/services/app-config/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * AppConfig Service Module
+ *
+ * Servicio de configuración remota para aplicaciones Angular.
+ * Lee configuración desde Firestore y provee feature flags, variables dinámicas,
+ * y detección de actualizaciones.
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { provideValtechAppConfig } from 'valtech-components';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechFirebase(environment.valtechFirebase),
+ *     provideValtechAppConfig({
+ *       currentVersion: '1.0.0',
+ *       showUpdateBanner: true,
+ *     }),
+ *   ],
+ * });
+ *
+ * // component.ts
+ * import { AppConfigService } from 'valtech-components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   private appConfig = inject(AppConfigService);
+ *
+ *   showFeature = computed(() =>
+ *     this.appConfig.isFeatureEnabled('newDashboard')
+ *   );
+ * }
+ * ```
+ */
+export * from './types';
+export { VALTECH_APP_CONFIG, provideValtechAppConfig } from './config';
+export { AppConfigService } from './app-config.service';

package/lib/services/app-config/types.d.ts

@@ -0,0 +1,54 @@
+/**
+ * AppConfig Types
+ *
+ * Tipos para el servicio de configuración remota de la aplicación.
+ */
+import { FirestoreDocument } from '../firebase/types';
+/**
+ * Configuración de la aplicación almacenada en Firestore.
+ *
+ * @property version - Versión más reciente de la app
+ * @property minVersion - Versión mínima soportada (opcional)
+ * @property maintenance - Modo mantenimiento global
+ * @property features - Feature flags (key-value boolean)
+ * @property variables - Variables dinámicas de configuración
+ * @property announcements - Anuncios opcionales para mostrar
+ */
+export interface AppConfig extends FirestoreDocument {
+    version: string;
+    minVersion?: string;
+    maintenance?: boolean;
+    features: Record<string, boolean>;
+    variables: Record<string, unknown>;
+    announcements?: Announcement[];
+}
+/**
+ * Anuncio para mostrar en la aplicación.
+ *
+ * @property id - Identificador único del anuncio
+ * @property type - Tipo de anuncio (info, warning, promo)
+ * @property message - Mensaje en múltiples idiomas
+ * @property active - Si el anuncio está activo
+ * @property link - URL opcional para redirección
+ */
+export interface Announcement {
+    id: string;
+    type: 'info' | 'warning' | 'promo';
+    message: Record<string, string>;
+    active: boolean;
+    link?: string;
+}
+/**
+ * Configuración para el proveedor de AppConfigService.
+ *
+ * @property currentVersion - Versión actual de la aplicación
+ * @property showUpdateBanner - Mostrar banner de actualización automáticamente
+ */
+export interface AppConfigServiceConfig {
+    currentVersion: string;
+    showUpdateBanner?: boolean;
+}
+/**
+ * Configuración por defecto del servicio.
+ */
+export declare const DEFAULT_APP_CONFIG_SERVICE_CONFIG: AppConfigServiceConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.621",
+  "version": "2.0.623",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -161,6 +161,7 @@ export * from './lib/components/molecules/links-accordion/links-accordion.compon
 export * from './lib/components/molecules/links-accordion/types';
 export * from './lib/components/molecules/refresher/refresher.component';
 export * from './lib/components/molecules/refresher/types';
+export * from './lib/components/molecules/update-banner/update-banner.component';
 export * from './lib/components/organisms/article/article.component';
 export * from './lib/components/organisms/article/types';
 export * from './lib/components/organisms/banner/banner.component';
@@ -213,6 +214,8 @@ export * from './lib/components/templates/page-content/page-content.component';
 export * from './lib/components/templates/page-content/types';
 export * from './lib/components/templates/page-wrapper/page-wrapper.component';
 export * from './lib/components/templates/page-wrapper/types';
+export * from './lib/components/templates/maintenance-page/maintenance-page.component';
+export * from './lib/components/templates/maintenance-page/types';
 export * from './lib/services/download.service';
 export * from './lib/services/icons.service';
 export * from './lib/services/in-app-browser.service';
@@ -232,6 +235,7 @@ export * from './lib/services/modal/types';
 export * from './lib/services/firebase';
 export * from './lib/services/auth';
 export * from './lib/services/i18n';
+export * from './lib/services/app-config';
 export * from './lib/services/presets';
 export * from './lib/services/skeleton';
 export * from './lib/services/pagination';