valtech-components 4.0.970 → 4.0.972

package/lib/components/organisms/page-block/page-block.component.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter } from '@angular/core';
+import { FaqCategory } from '../faq/types';
+import { PageBlock, PageCTABlockProps, PageCTAIntent, PageFAQBlockProps, PageGalleryBlockProps, PageHeroBlockProps, PageTextBlockProps } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-page-block`
+ *
+ * Organism que renderiza UN bloque del constructor de páginas de plataforma
+ * (ADR-077, `services/page` en el backend). Es el punto de la lib donde el
+ * catálogo de bloques (`hero`, `text`, `gallery`, `cta`, `faq`) mapea 1:1 a
+ * componentes reales — la razón de ser del ADR: "un rediseño de la lib
+ * mejora todas las páginas publicadas sin tocar sus datos".
+ *
+ * Presentacional puro: recibe `props` ya tipados (espejo exacto del `Block`
+ * del backend), sin llamadas HTTP propias ni conocimiento de a qué app
+ * pertenece la página. El bloque `cta` NO navega — emite `(ctaAction)` con
+ * la intención cruda (`{ action }`) para que el consumidor (la app) la
+ * resuelva contra su propio routing (ADR-077: "el CTA guarda una intención,
+ * nunca una URL").
+ *
+ * El caller típico itera `Page.Blocks` y renderiza uno de estos por bloque:
+ *
+ * @example
+ * ```html
+ * @for (block of page().blocks; track $index) {
+ *   <val-page-block [props]="block" (ctaAction)="onCtaAction($event)" />
+ * }
+ * ```
+ */
+export declare class PageBlockComponent {
+    /** El bloque a renderizar — espejo de `page.Block` (backend). */
+    props: PageBlock;
+    /**
+     * Emite la intención cruda del CTA al hacer click (`{ action }`, nunca una
+     * URL — ver comentario de clase). El consumidor decide qué hacer con
+     * `action`; este componente no la interpreta.
+     */
+    ctaAction: EventEmitter<PageCTAIntent>;
+    /** Fallback de imagen rota (convención de la lib) — un slot, una signal. */
+    readonly heroImageFailed: import("@angular/core").WritableSignal<boolean>;
+    /** Índices de `gallery.images` cuya carga falló (`error` del `<img>`). */
+    readonly failedGalleryImages: import("@angular/core").WritableSignal<Set<number>>;
+    get hero(): PageHeroBlockProps;
+    get text(): PageTextBlockProps;
+    get gallery(): PageGalleryBlockProps;
+    get cta(): PageCTABlockProps;
+    get faq(): PageFAQBlockProps;
+    /**
+     * `text.body` es texto plano (no markdown — a diferencia de
+     * `val-article`/`val-faq`, `blocks_validate.go` solo exige un string no
+     * vacío). Partido por línea para que `val-text` (un `<p>` por línea)
+     * respete los saltos que el autor escribió, sin interpretar sintaxis.
+     */
+    textParagraphs(): string[];
+    /**
+     * `val-faq` agrupa por categoría; el bloque `faq` de `services/page` no
+     * tiene categorías (solo `items` planos) — se envuelve en una única
+     * categoría sin label (`hideSingleCategoryLabel` default `true` la oculta).
+     */
+    faqCategories(): FaqCategory[];
+    onCtaClick(): void;
+    onGalleryImageError(index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageBlockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PageBlockComponent, "val-page-block", never, { "props": { "alias": "props"; "required": false; }; }, { "ctaAction": "ctaAction"; }, never, never, true, never>;
+}

package/lib/components/organisms/page-block/types.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Tipos del organism `val-page-block` — constructor de páginas de plataforma
+ * (ADR-077: `docs/adr/077-constructor-de-paginas-de-plataforma.md`, primera
+ * aplicación real en Eklesee, Bloque 4:
+ * `docs/eklesee/03-roadmap-y-abiertos.md`).
+ *
+ * Espejo 1:1 de `Block`/`Props` en `backend/go/services/page/types.go` +
+ * `backend/go/services/page/blocks_validate.go` — la forma de cada `props`
+ * sale de ahí, no se inventa acá. El catálogo de esta primera pasada son 5
+ * tipos (`hero`, `text`, `gallery`, `cta`, `faq`); `countdown`/`sponsors`/
+ * `progress` (catálogo completo del ADR) quedan fuera hasta que Bingo migre.
+ *
+ * El componente es i18n-agnóstico y agnóstico al dominio a propósito (mismo
+ * criterio que `val-faq`/`val-article`): recibe `props` ya resueltos, sin
+ * llamadas HTTP propias ni conocimiento de rutas de ninguna app. La app que
+ * lo consume (Eklesee) resuelve `PageCTAIntent.action` a una ruta real —
+ * este organism solo la emite via `(ctaAction)`.
+ */
+/** hero — props: `title` (requerido), `subtitle`/`image`/`align` (opcionales). */
+export interface PageHeroBlockProps {
+    title: string;
+    subtitle?: string;
+    /** URL de la imagen de fondo/acompañante. */
+    image?: string;
+    align?: 'left' | 'center' | 'right';
+}
+/** text — props: `body` (requerido), `heading` (opcional). */
+export interface PageTextBlockProps {
+    body: string;
+    heading?: string;
+}
+/** gallery — props: `images` (requerido, 1..20 URLs, validado en backend). */
+export interface PageGalleryBlockProps {
+    images: string[];
+}
+/**
+ * Intención del CTA, NUNCA una URL (ADR-077: "el link del vendedor puede
+ * regenerarse... sin dejar páginas publicadas apuntando a un token muerto").
+ * El catálogo de `action` es del backend (`page.CTAAction`, hoy solo
+ * `apply_membership` — ver `services/page/types.go`). Este componente NO
+ * resuelve la intención a una ruta: solo la recibe y la reemite tal cual via
+ * `(ctaAction)` para que la app la resuelva contra su propio routing.
+ */
+export interface PageCTAIntent {
+    action: string;
+}
+/** cta — props: `label` (requerido), `intent.action` (requerido). */
+export interface PageCTABlockProps {
+    label: string;
+    intent: PageCTAIntent;
+}
+/** Un ítem de FAQ (pregunta + respuesta en texto plano). */
+export interface PageFAQItemProps {
+    question: string;
+    answer: string;
+}
+/** faq — props: `items` (requerido, 1..50, validado en backend). */
+export interface PageFAQBlockProps {
+    items: PageFAQItemProps[];
+}
+/** Discriminador de bloque — espejo de `page.BlockType` (backend). */
+export type PageBlockType = 'hero' | 'text' | 'gallery' | 'cta' | 'faq';
+interface PageBlockBase {
+    /**
+     * Orden de renderizado dentro de `Page.Blocks`. El backend lo re-estampa
+     * SIEMPRE a partir de la posición del array al guardar (`SetBlocks` —
+     * regla #7 backend/go/CLAUDE.md: nunca confiar en un `order` que venga del
+     * cliente). Opcional acá: el consumidor típico ya itera el array en el
+     * orden real, este campo es informativo.
+     */
+    order?: number;
+}
+export interface PageHeroBlock extends PageBlockBase {
+    type: 'hero';
+    props: PageHeroBlockProps;
+}
+export interface PageTextBlock extends PageBlockBase {
+    type: 'text';
+    props: PageTextBlockProps;
+}
+export interface PageGalleryBlock extends PageBlockBase {
+    type: 'gallery';
+    props: PageGalleryBlockProps;
+}
+export interface PageCTABlock extends PageBlockBase {
+    type: 'cta';
+    props: PageCTABlockProps;
+}
+export interface PageFAQBlock extends PageBlockBase {
+    type: 'faq';
+    props: PageFAQBlockProps;
+}
+/** Unión discriminada — espejo de `page.Block` (backend, `Props map[string]any` tipado por `Type`). */
+export type PageBlock = PageHeroBlock | PageTextBlock | PageGalleryBlock | PageCTABlock | PageFAQBlock;
+/**
+ * Props de `<val-page-block>`. Alias de `PageBlock` con el nombre
+ * `*Metadata` que sigue el resto de la lib (`convención: Props interface
+ * → *Metadata`) — mismo tipo, dos nombres para dos contextos de uso (el
+ * array de la página vs. el `@Input` de un componente puntual).
+ */
+export type PageBlockMetadata = PageBlock;
+export {};

package/lib/components/organisms/rich-editor/article-to-tiptap.d.ts

@@ -0,0 +1,3 @@
+import { ArticleMetadata } from '../article/types';
+import { TiptapDoc } from './tiptap-to-article';
+export declare function articleToTiptapDoc(article: ArticleMetadata): TiptapDoc;

package/lib/components/organisms/rich-editor/rich-editor.component.d.ts

@@ -0,0 +1,46 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ArticleMetadata } from '../article/types';
+import { RichEditorMetadata, RichEditorToolbarButton } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-rich-editor
+ *
+ * Organism: editor WYSIWYG reusable para toda la plataforma, sobre TipTap.
+ * Emite `ArticleMetadata` — el mismo contrato que `val-article` renderiza,
+ * que también producen Markdown (`parseMarkdownArticle`) y (a futuro) el
+ * page builder. El consumer nunca toca TipTap directamente.
+ *
+ * Cobertura de la toolbar v1: negrita, cursiva, título (H2), subtítulo (H3),
+ * lista con/sin viñetas, cita, separador, imagen. Ver `tiptap-to-article.ts`
+ * para qué tipos de `ArticleElement` puede producir el editor hoy.
+ *
+ * @example
+ * ```html
+ * <val-rich-editor
+ *   [props]="{ initialValue: recipe.descriptionArticle, placeholder: 'Escribe la preparación...' }"
+ *   (articleChange)="onArticleChange($event)"
+ * />
+ * ```
+ */
+export declare class RichEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
+    props: RichEditorMetadata;
+    articleChange: EventEmitter<ArticleMetadata>;
+    editorHost: ElementRef<HTMLElement>;
+    private i18n;
+    private editor?;
+    /** Se recalcula en cada `onUpdate`/`onSelectionUpdate` para reflejar el
+     * mark/nodo activo bajo el cursor (ej. el botón "B" resaltado si el
+     * cursor está dentro de texto en negrita). */
+    private readonly _toolbarTick;
+    readonly toolbarButtons: import("@angular/core").WritableSignal<RichEditorToolbarButton[]>;
+    constructor();
+    private t;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private emitArticle;
+    private refreshToolbar;
+    runCommand(token: string): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RichEditorComponent, "val-rich-editor", never, { "props": { "alias": "props"; "required": false; }; }, { "articleChange": "articleChange"; }, never, never, true, never>;
+}

package/lib/components/organisms/rich-editor/rich-editor.i18n.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Defaults i18n (es/en) del `val-rich-editor`. Auto-registrados en el
+ * constructor (namespace `RichEditor`) — el consumer nunca los registra.
+ */
+export declare const RICH_EDITOR_I18N: {
+    readonly es: {
+        readonly bold: "Negrita";
+        readonly italic: "Cursiva";
+        readonly heading2: "Título";
+        readonly heading3: "Subtítulo";
+        readonly bulletList: "Lista con viñetas";
+        readonly orderedList: "Lista numerada";
+        readonly quote: "Cita";
+        readonly separator: "Separador";
+    };
+    readonly en: {
+        readonly bold: "Bold";
+        readonly italic: "Italic";
+        readonly heading2: "Heading";
+        readonly heading3: "Subheading";
+        readonly bulletList: "Bullet list";
+        readonly orderedList: "Numbered list";
+        readonly quote: "Quote";
+        readonly separator: "Separator";
+    };
+};

package/lib/components/organisms/rich-editor/tiptap-to-article.d.ts

@@ -0,0 +1,38 @@
+import { ArticleElement, ArticleMetadata } from '../article/types';
+/**
+ * Convierte el documento JSON de TipTap (ProseMirror) a `ArticleElement[]`
+ * sin pasar por HTML intermedio — es la mitad "guardar" de `val-rich-editor`,
+ * que alimenta el mismo `val-article` que ya usan Markdown
+ * (`parseMarkdownArticle`) y las instrucciones de receta de Okhelia. Ver
+ * `article-to-tiptap.ts` para la conversión inversa (hidratar el editor con
+ * contenido existente).
+ *
+ * Cobertura: los nodos que trae `@tiptap/starter-kit` por default (doc,
+ * paragraph, heading, bulletList/orderedList/listItem, blockquote, codeBlock,
+ * horizontalRule) + marks inline (bold, italic vía <strong>/<em>, igual
+ * criterio que `allowPartialBold` de ArticleTextElement/ArticleNoteElement).
+ * NO cubre todavía: tablas, ni extensiones custom para `note`/`diagram`/
+ * `command` (esos requerirían nodos TipTap propios — factible, pendiente de
+ * decidir si vale la pena). `image` sí está cubierto (ver case 'image').
+ */
+export interface TiptapNode {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: TiptapNode[];
+    text?: string;
+    marks?: Array<{
+        type: string;
+        attrs?: Record<string, unknown>;
+    }>;
+}
+export interface TiptapDoc {
+    type: 'doc';
+    content: TiptapNode[];
+}
+/**
+ * Convierte un doc de TipTap a `ArticleElement[]`. Función pura — sin
+ * Angular DI, usable también desde Node (mismo criterio que
+ * `parseMarkdownArticle`).
+ */
+export declare function tiptapDocToArticleElements(doc: TiptapDoc): ArticleElement[];
+export declare function tiptapDocToArticle(doc: TiptapDoc, config?: Partial<ArticleMetadata>): ArticleMetadata;

package/lib/components/organisms/rich-editor/types.d.ts

@@ -0,0 +1,21 @@
+import { ArticleMetadata } from '../article/types';
+/**
+ * Props de `val-rich-editor` (object-first, como el resto de la lib).
+ */
+export interface RichEditorMetadata {
+    /** Contenido inicial — pasar el `ArticleMetadata` ya guardado para editar
+     * algo existente. Vacío/undefined = editor en blanco. */
+    initialValue?: ArticleMetadata;
+    /** Texto de placeholder cuando el editor está vacío. */
+    placeholder?: string;
+    /** Deshabilita la edición (solo lectura, sin toolbar interactiva). */
+    disabled?: boolean;
+}
+/** Un botón de la toolbar — identifica el comando TipTap y su estado activo. */
+export interface RichEditorToolbarButton {
+    token: string;
+    icon: string;
+    label: string;
+    isActive: boolean;
+    disabled: boolean;
+}

package/lib/components/organisms/video-player/types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Tipos de `val-video-player` (ADR-087 — video como servicio de plataforma).
+ *
+ * Espejo agnóstico al dominio de `content.VideoAsset` (backend Go,
+ * `backend/go/services/content/video.go`) — mismos nombres de campo en
+ * camelCase. Cualquier app pasa acá el `VideoAsset` que le devuelve SU propio
+ * backend (sermón en Eklesee, receta en Okhelia, animal en Chesed, artículo de
+ * ayuda) con un mapeo trivial; el componente no conoce ni le importa de qué
+ * dominio viene.
+ */
+export type VideoPlayerSource = 'upload' | 'link';
+/** Solo aplica a `source: 'upload'`. Un link normalizado con éxito nace en 'ready'. */
+export type VideoPlayerStatus = 'uploading' | 'processing' | 'ready' | 'failed' | 'rejected';
+export interface VideoPlayerCaption {
+    locale: string;
+    url: string;
+}
+export interface VideoPlayerAsset {
+    source: VideoPlayerSource;
+    /**
+     * `source:'upload'` → URL de reproducción ya presignada por el backend
+     * (TTL corto, ~15 min — ADR-087 §6). Úsala directo, no la cachees ni la
+     * persistas: se recalcula en cada lectura del documento.
+     * `source:'link'` → URL normalizada del proveedor (no se usa para el
+     * embed, ver `externalId`).
+     */
+    url?: string;
+    /** `'youtube' | 'vimeo'` — solo si `source: 'link'`. */
+    provider?: string;
+    /**
+     * ID ya normalizado por el backend — el ÚNICO dato que arma el iframe de
+     * embed. El componente NUNCA arma un `src` con datos crudos del usuario.
+     */
+    externalId?: string;
+    durationSec?: number;
+    /** Portada — se muestra mientras el video no está `ready` (mejor percepción de carga). */
+    thumbnail?: string;
+    captions?: VideoPlayerCaption[];
+    status?: VideoPlayerStatus;
+    /**
+     * Motivo legible de `failed`/`rejected`, ya en el idioma que decidió el
+     * backend (es-CL) — se muestra tal cual, no es un código a traducir.
+     */
+    failReason?: string;
+}

package/lib/components/organisms/video-player/video-player.component.d.ts

@@ -0,0 +1,42 @@
+import { SafeResourceUrl } from '@angular/platform-browser';
+import { VideoPlayerAsset } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-video-player` — reproductor de video de plataforma (ADR-087, "Fase 1 —
+ * Reproducción"). Presentacional/dumb: recibe un `VideoPlayerAsset` YA
+ * RESUELTO por el backend de turno y decide el render, sin fetch propio.
+ *
+ * - `source:'upload'` + `status:'ready'` → `<video>` nativo (`preload="none"`
+ *   + portada — ADR-087 §8, cero bytes de video hasta que alguien le da play).
+ * - `source:'upload'` + `uploading|processing` → portada (si hay) + mensaje.
+ * - `source:'upload'` + `failed|rejected` → mensaje legible con `failReason`
+ *   (texto ya resuelto por el backend, se muestra tal cual).
+ * - `source:'link'` → iframe **siempre** contra un patrón fijo por proveedor
+ *   conocido (`youtube-nocookie.com/embed/{id}` · `player.vimeo.com/video/{id}`),
+ *   nunca un `src` armado con datos crudos del usuario. Proveedor no
+ *   reconocido → mensaje, nunca un iframe "por si acaso".
+ *
+ * @example
+ * <val-video-player [video]="doc.video" />
+ */
+export declare class VideoPlayerComponent {
+    private readonly i18n;
+    private readonly sanitizer;
+    /** El `VideoAsset` ya resuelto por el backend. `null`/`undefined` → no renderiza nada. */
+    readonly video: import("@angular/core").InputSignal<VideoPlayerAsset>;
+    readonly asset: import("@angular/core").Signal<VideoPlayerAsset>;
+    readonly thumbFailed: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Arma el embed SIEMPRE contra un patrón fijo por proveedor conocido — el
+     * `externalId` es el único dato del backend que entra en el `src`. Un
+     * proveedor no reconocido devuelve `null` (el template cae al mensaje, no a
+     * un iframe "por si acaso"). `bypassSecurityTrustResourceUrl` es seguro acá
+     * porque el string completo lo arma este componente, nunca el usuario.
+     */
+    readonly embedUrl: import("@angular/core").Signal<SafeResourceUrl>;
+    constructor();
+    private buildEmbedUrl;
+    t(key: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VideoPlayerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VideoPlayerComponent, "val-video-player", never, { "video": { "alias": "video"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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 = "4.0.970";
+export declare const VERSION = "4.0.972";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "4.0.970",
+  "version": "4.0.972",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"
@@ -48,6 +48,10 @@
     "@dicebear/initials": "^9.4.2",
     "@dicebear/pixel-art": "^9.4.2",
     "@dicebear/shapes": "^9.4.2",
+    "@tiptap/core": "^2.27.2",
+    "@tiptap/extension-image": "^2.27.2",
+    "@tiptap/pm": "^2.27.2",
+    "@tiptap/starter-kit": "^2.27.2",
     "@zxing/browser": "^0.2.0",
     "@zxing/library": "^0.22.0",
     "compressorjs": "^1.3.0",

package/public-api.d.ts

@@ -247,6 +247,10 @@ export * from './lib/components/organisms/attachment-uploader/attachment-uploade
 export * from './lib/components/organisms/attachment-uploader/types';
 export * from './lib/components/organisms/article/article.component';
 export * from './lib/components/organisms/article/types';
+export * from './lib/components/organisms/rich-editor/rich-editor.component';
+export * from './lib/components/organisms/rich-editor/types';
+export * from './lib/components/organisms/rich-editor/tiptap-to-article';
+export * from './lib/components/organisms/rich-editor/article-to-tiptap';
 export * from './lib/components/organisms/banner/banner.component';
 export * from './lib/components/organisms/banner/types';
 export * from './lib/components/organisms/change-password-modal/change-password-modal.component';
@@ -580,3 +584,7 @@ export { ThreadPanelComponent } from './lib/components/organisms/thread-panel/th
 export * from './lib/services/forms';
 export * from './lib/services/metering.service';
 export { ValQuotaWarningComponent } from './lib/components/val-quota-warning/val-quota-warning.component';
+export * from './lib/components/organisms/page-block/page-block.component';
+export * from './lib/components/organisms/page-block/types';
+export * from './lib/components/organisms/video-player/video-player.component';
+export * from './lib/components/organisms/video-player/types';