valtech-components 2.0.847 → 2.0.849

package/lib/components/molecules/empty-state/empty-state.component.d.ts

@@ -0,0 +1,43 @@
+import { ButtonMetadata } from '../../types';
+import { EmptyStateMetadata, EmptyStateVariant } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `<val-empty-state>` — molecule declarativo para estados de "no hay datos /
+ * hubo error / sin red". Reemplaza el patrón ad-hoc (ion-icon + val-title +
+ * val-text + val-button) que cada página venía improvisando.
+ *
+ * Uso típico:
+ *
+ * ```html
+ * @if (loading()) {
+ *   <val-skeleton-layout [props]="..." />
+ * } @else if (errorState(); as e) {
+ *   <val-empty-state [props]="e" />
+ * } @else if (items().length === 0) {
+ *   <val-empty-state [props]="emptyProps" />
+ * } @else {
+ *   <!-- contenido normal -->
+ * }
+ * ```
+ *
+ * I18n: las cadenas vienen ya traducidas en las props (la lib es agnóstica de
+ * namespaces). Para wiring automático desde un error capturado, usar el
+ * helper `createErrorStateProps(err, ...)` (`valtech-components`).
+ */
+export declare class EmptyStateComponent {
+    props: import("@angular/core").InputSignal<EmptyStateMetadata>;
+    /** Variante resuelta (default `'empty'`). */
+    protected variantClass: import("@angular/core").Signal<EmptyStateVariant>;
+    /** Icono final — custom si se pasó, default de la variante si no. */
+    protected iconName: import("@angular/core").Signal<string>;
+    /** Tamaño en px. Default 64. */
+    protected iconSize: import("@angular/core").Signal<number>;
+    /**
+     * Props del botón CTA. Construidas a partir de `props().action`. El estado
+     * `WORKING` se aplica cuando `action.loading === true` (spinner mientras
+     * el handler corre).
+     */
+    protected ctaProps: import("@angular/core").Signal<ButtonMetadata>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "val-empty-state", never, { "props": { "alias": "props"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/empty-state/factory.d.ts

@@ -0,0 +1,64 @@
+import { EmptyStateMetadata } from './types';
+/**
+ * Opciones del helper. Los strings son requeridos para mantener el
+ * componente i18n-agnóstico — la página los resuelve (con su namespace) y los
+ * pasa ya traducidos. El helper solo decide la VARIANTE y compone los props.
+ */
+export interface CreateErrorStateOpts {
+    /**
+     * Título a mostrar. Convención: la página lo resuelve por escenario:
+     *  - red caída     → `t('offlineTitle')`
+     *  - error backend → `t('errorTitle')`
+     *
+     * Si pasás un solo string, se usa en ambas variantes. Si pasás el objeto,
+     * el helper elige según `isNetwork` del error interpretado.
+     */
+    title: string | {
+        offline: string;
+        error: string;
+    };
+    /** Descripción a mostrar (típicamente el `message` del backend en español). */
+    description?: string | {
+        offline: string;
+        error: string;
+    };
+    /** Label del botón CTA (típicamente `t('retry')`). Si se omite, no se muestra botón. */
+    retryLabel?: string;
+    /** Handler invocado al click de retry. Requerido si `retryLabel` está. */
+    onRetry?: () => void | Promise<void>;
+    /** `true` mientras el retry está corriendo — el botón pasa a WORKING. */
+    retrying?: boolean;
+}
+/**
+ * Convierte un error capturado en `EmptyStateMetadata` listo para
+ * `<val-empty-state>`. Decide la variante (`offline` vs `error`) según
+ * `interpretError(err).isNetwork`.
+ *
+ * Uso típico en una page:
+ *
+ * ```ts
+ * readonly errorState = computed(() => {
+ *   const err = this.loadError();
+ *   if (!err) return null;
+ *   return createErrorStateProps(err, {
+ *     title: { offline: this.t('offlineTitle'), error: this.t('errorTitle') },
+ *     description: { offline: this.t('offlineHint'), error: interpretError(err).message },
+ *     retryLabel: this.t('retry'),
+ *     onRetry: () => this.reload(),
+ *     retrying: this.reloading(),
+ *   });
+ * });
+ * ```
+ *
+ * En el template:
+ *
+ * ```html
+ * @if (errorState(); as e) {
+ *   <val-empty-state [props]="e" />
+ * }
+ * ```
+ *
+ * Para escenarios SIN error (lista vacía), construir `EmptyStateMetadata`
+ * manualmente con `variant: 'empty'` — no es lo que este helper resuelve.
+ */
+export declare function createErrorStateProps(err: unknown, opts: CreateErrorStateOpts): EmptyStateMetadata;

package/lib/components/molecules/empty-state/types.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Variante semántica del empty/error state.
+ *
+ * - `empty`    — la fuente devolvió cero resultados (lista vacía, sin notifs).
+ *                Icono neutro, sin alarma.
+ * - `error`    — la fuente falló por un error de la app/servidor (500, parse).
+ *                Icono de alerta.
+ * - `offline`  — la fuente falló por red caída / Firestore unreachable.
+ *                Icono cloud-offline.
+ *
+ * Cada variante mapea a un icono default si `icon` no se especifica.
+ */
+export type EmptyStateVariant = 'empty' | 'error' | 'offline';
+/**
+ * Acción CTA opcional del state (típicamente "Reintentar" / "Recargar").
+ *
+ * Si se omite, el componente no renderiza botón. El `handler` ya viene
+ * traducido — el componente NO resuelve i18n internamente.
+ */
+export interface EmptyStateAction {
+    label: string;
+    handler: () => void | Promise<void>;
+    /** Si `true`, el botón pasa a estado WORKING (spinner). Útil mientras re-fetcha. */
+    loading?: boolean;
+}
+/**
+ * Metadata para `<val-empty-state>` — molecule que renderiza un estado
+ * declarativo de "no hay datos / hubo error / sin red" con título, descripción
+ * opcional y CTA opcional. Reemplaza el patrón ad-hoc (ion-icon + val-title +
+ * val-text + val-button) que cada página venía improvisando.
+ *
+ * I18n: los strings (`title`, `description`, `action.label`) los resuelve la
+ * página antes de construir las props. Esto mantiene el componente agnóstico
+ * a namespaces y consistente con el resto de la lib (FormMetadata, etc.).
+ */
+export interface EmptyStateMetadata {
+    /** Título principal. Requerido. */
+    title: string;
+    /** Descripción opcional (1-2 líneas) debajo del título. */
+    description?: string;
+    /** Variante semántica. Default `'empty'`. */
+    variant?: EmptyStateVariant;
+    /**
+     * Nombre del icono Ionicons (kebab-case). Si se omite, el componente usa
+     * el default de la variante:
+     *  - empty   → `document-outline`
+     *  - error   → `alert-circle-outline`
+     *  - offline → `cloud-offline-outline`
+     *
+     * Si pasás un icono custom, importalo + registralo con `addIcons({ ... })`
+     * en el componente consumidor (Ionic standalone no auto-registra).
+     */
+    icon?: string;
+    /** Tamaño del icono en píxeles. Default `64`. */
+    iconSize?: number;
+    /** Acción CTA opcional. Si se omite, no se muestra botón. */
+    action?: EmptyStateAction;
+}

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.847";
+export declare const VERSION = "2.0.849";

package/package.json

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

package/public-api.d.ts

@@ -174,6 +174,9 @@ export * from './lib/components/molecules/username-input/username-input.componen
 export * from './lib/components/molecules/username-input/types';
 export * from './lib/components/molecules/linked-providers/linked-providers.component';
 export * from './lib/components/molecules/linked-providers/types';
+export * from './lib/components/molecules/empty-state/empty-state.component';
+export * from './lib/components/molecules/empty-state/factory';
+export * from './lib/components/molecules/empty-state/types';
 export * from './lib/components/molecules/image-crop/image-crop.component';
 export * from './lib/components/molecules/modal-shell/modal-shell.component';
 export * from './lib/components/organisms/article/article.component';