valtech-components 2.0.305 → 2.0.307

package/lib/components/atoms/image/types.d.ts

@@ -11,6 +11,10 @@
  * @property size - The image size ('small' | 'medium' | 'large' | 'xlarge').
  * @property width - The image width in px (optional).
  * @property height - The image height in px (optional).
+ * @property alignment - The alignment of the image container ('left' | 'center' | 'right').
+ * @property caption - Optional caption text below the image.
+ * @property captionSize - Size of the caption text ('small' | 'medium' | 'large').
+ * @property containerClass - Additional CSS classes for the container.
  */
 export type ImageMetadata = {
     src: string;
@@ -23,4 +27,8 @@ export type ImageMetadata = {
     size: 'small' | 'medium' | 'large' | 'xlarge';
     width?: number;
     height?: number;
+    alignment?: 'left' | 'center' | 'right';
+    caption?: string;
+    captionSize?: 'small' | 'medium' | 'large';
+    containerClass?: string;
 };

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

@@ -0,0 +1,84 @@
+import { OnInit } from '@angular/core';
+import { ImageMetadata } from '../../atoms/image/types';
+import { ArticleButtonElement, ArticleCodeElement, ArticleCustomElement, ArticleElement, ArticleHighlightElement, ArticleImageElement, ArticleListElement, ArticleMetadata, ArticleQuoteElement, ArticleSeparatorElement, ArticleSubtitleElement, ArticleTextElement, ArticleTitleElement, ArticleVideoElement } from './types';
+import * as i0 from "@angular/core";
+export declare class ArticleComponent implements OnInit {
+    /**
+     * Configuración del artículo
+     * @type {ArticleMetadata}
+     */
+    props: ArticleMetadata;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * Función de trackBy para optimizar el rendering de elementos
+     */
+    trackByFn(index: number, element: ArticleElement): any;
+    /**
+     * Obtiene las clases CSS para el espaciado del elemento
+     */
+    getElementSpacingClass(element: ArticleElement): string;
+    getTitleElement(element: ArticleElement): ArticleTitleElement;
+    getSubtitleElement(element: ArticleElement): ArticleSubtitleElement;
+    getTextElement(element: ArticleElement): ArticleTextElement;
+    getQuoteElement(element: ArticleElement): ArticleQuoteElement;
+    getHighlightElement(element: ArticleElement): ArticleHighlightElement;
+    getCodeElement(element: ArticleElement): ArticleCodeElement;
+    getListElement(element: ArticleElement): ArticleListElement;
+    getButtonElement(element: ArticleElement): ArticleButtonElement;
+    getSeparatorElement(element: ArticleElement): ArticleSeparatorElement;
+    getImageElement(element: ArticleElement): ArticleImageElement;
+    getVideoElement(element: ArticleElement): ArticleVideoElement;
+    getCustomElement(element: ArticleElement): ArticleCustomElement;
+    getQuoteTextProps(element: ArticleElement): {
+        size: "small" | "medium" | "large" | "xlarge";
+        color: import("@ionic/core").Color;
+        content?: string;
+        bold: boolean;
+        contentKey?: string;
+        contentClass?: string;
+        contentFallback?: string;
+        contentInterpolation?: Record<string, string | number>;
+        processLinks?: boolean;
+        linkConfig?: import("valtech-components").LinkProcessorConfig;
+    };
+    getHighlightTextProps(element: ArticleElement): {
+        size: "small" | "medium" | "large" | "xlarge";
+        color: import("@ionic/core").Color;
+        content?: string;
+        bold: boolean;
+        contentKey?: string;
+        contentClass?: string;
+        contentFallback?: string;
+        contentInterpolation?: Record<string, string | number>;
+        processLinks?: boolean;
+        linkConfig?: import("valtech-components").LinkProcessorConfig;
+    };
+    getHighlightColor(element: ArticleElement): string;
+    getButtonProps(element: ArticleElement): {
+        actionType?: import("valtech-components").ActionType;
+        expand?: "full" | "block";
+        link?: string;
+        href?: string;
+        target?: "_blank" | "_self" | "_parent" | "_top";
+        download?: string;
+        color: import("@ionic/core").Color;
+        state: import("valtech-components").ComponentState;
+        text?: string;
+        contentKey?: string;
+        contentClass?: string;
+        contentFallback?: string;
+        contentInterpolation?: Record<string, string | number>;
+        icon?: import("valtech-components").IconMetada;
+        shape?: "round";
+        size?: "small" | "large" | "default";
+        fill?: "default" | "clear" | "outline" | "solid";
+        type: "button" | "submit" | "reset";
+        token?: string;
+        ref?: any;
+        handler?: (value: any) => any;
+    };
+    getImageMetadata(element: ArticleElement): ImageMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ArticleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleComponent, "val-article", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,293 @@
+import { Color } from '@ionic/core';
+import { TextMetadata } from '../../atoms/text/types';
+import { TitleMetadata } from '../../atoms/title/types';
+import { ButtonMetadata } from '../../types';
+/**
+ * Tipos de contenido soportados en el componente val-article
+ */
+export type ArticleContentType = 'title' | 'subtitle' | 'text' | 'paragraph' | 'quote' | 'highlight' | 'code' | 'list' | 'button' | 'separator' | 'image' | 'video' | 'custom';
+/**
+ * Configuración de espaciado entre elementos
+ */
+export interface ArticleSpacing {
+    /** Espaciado superior */
+    top?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+    /** Espaciado inferior */
+    bottom?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+    /** Espaciado lateral */
+    horizontal?: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+}
+/**
+ * Configuración base para cualquier elemento del artículo
+ */
+export interface BaseArticleElement {
+    /** Tipo de elemento */
+    type: ArticleContentType;
+    /** ID único del elemento (opcional) */
+    id?: string;
+    /** Clases CSS adicionales */
+    cssClass?: string;
+    /** Configuración de espaciado */
+    spacing?: ArticleSpacing;
+    /** Elemento visible condicionalmente */
+    visible?: boolean;
+}
+/**
+ * Elemento de título
+ */
+export interface ArticleTitleElement extends BaseArticleElement {
+    type: 'title';
+    props: TitleMetadata;
+}
+/**
+ * Elemento de subtítulo
+ */
+export interface ArticleSubtitleElement extends BaseArticleElement {
+    type: 'subtitle';
+    props: TitleMetadata;
+}
+/**
+ * Elemento de texto/párrafo
+ */
+export interface ArticleTextElement extends BaseArticleElement {
+    type: 'text' | 'paragraph';
+    props: TextMetadata;
+}
+/**
+ * Elemento de cita
+ */
+export interface ArticleQuoteElement extends BaseArticleElement {
+    type: 'quote';
+    props: TextMetadata & {
+        /** Autor de la cita */
+        author?: string;
+        /** Fuente de la cita */
+        source?: string;
+    };
+}
+/**
+ * Elemento de texto destacado
+ */
+export interface ArticleHighlightElement extends BaseArticleElement {
+    type: 'highlight';
+    props: TextMetadata & {
+        /** Color de fondo del highlight */
+        backgroundColor?: Color;
+        /** Esquinas redondeadas */
+        rounded?: boolean;
+    };
+}
+/**
+ * Elemento de código
+ */
+export interface ArticleCodeElement extends BaseArticleElement {
+    type: 'code';
+    props: {
+        /** Código a mostrar */
+        code: string;
+        /** Lenguaje de programación */
+        language?: string;
+        /** Mostrar números de línea */
+        showLineNumbers?: boolean;
+        /** Tema del código */
+        theme?: 'light' | 'dark';
+    };
+}
+/**
+ * Elemento de lista
+ */
+export interface ArticleListElement extends BaseArticleElement {
+    type: 'list';
+    props: {
+        /** Elementos de la lista */
+        items: Array<{
+            /** Texto del elemento */
+            text: string;
+            /** Configuración de contenido reactivo */
+            contentKey?: string;
+            contentClass?: string;
+            contentFallback?: string;
+            contentInterpolation?: Record<string, string | number>;
+        }>;
+        /** Tipo de lista */
+        listType?: 'unordered' | 'ordered' | 'checklist';
+        /** Color de los elementos */
+        color?: Color;
+    };
+}
+/**
+ * Elemento de botón
+ */
+export interface ArticleButtonElement extends BaseArticleElement {
+    type: 'button';
+    props: ButtonMetadata & {
+        /** Alineación del botón */
+        alignment?: 'left' | 'center' | 'right';
+    };
+}
+/**
+ * Elemento separador
+ */
+export interface ArticleSeparatorElement extends BaseArticleElement {
+    type: 'separator';
+    props: {
+        /** Tipo de separador */
+        style?: 'line' | 'dots' | 'space';
+        /** Color del separador */
+        color?: Color;
+        /** Grosor del separador */
+        thickness?: 'thin' | 'medium' | 'thick';
+    };
+}
+/**
+ * Elemento de imagen
+ */
+export interface ArticleImageElement extends BaseArticleElement {
+    type: 'image';
+    props: {
+        /** URL de la imagen */
+        src: string;
+        /** Texto alternativo */
+        alt: string;
+        /** Título de la imagen */
+        title?: string;
+        /** Leyenda de la imagen */
+        caption?: string;
+        /** Configuración de contenido reactivo para caption */
+        captionContentKey?: string;
+        captionContentClass?: string;
+        captionContentFallback?: string;
+        /** Alineación de la imagen */
+        alignment?: 'left' | 'center' | 'right';
+        /** Ancho máximo */
+        maxWidth?: string;
+        /** Imagen con bordes redondeados */
+        rounded?: boolean;
+    };
+}
+/**
+ * Elemento de video
+ */
+export interface ArticleVideoElement extends BaseArticleElement {
+    type: 'video';
+    props: {
+        /** URL del video */
+        src: string;
+        /** Imagen de poster */
+        poster?: string;
+        /** Título del video */
+        title?: string;
+        /** Controles visibles */
+        controls?: boolean;
+        /** Reproducción automática */
+        autoplay?: boolean;
+        /** Silenciado por defecto */
+        muted?: boolean;
+        /** Ancho máximo */
+        maxWidth?: string;
+    };
+}
+/**
+ * Elemento personalizado
+ */
+export interface ArticleCustomElement extends BaseArticleElement {
+    type: 'custom';
+    props: {
+        /** Contenido HTML personalizado */
+        htmlContent?: string;
+        /** Clase de componente personalizado */
+        componentClass?: any;
+        /** Props para el componente personalizado */
+        componentProps?: any;
+    };
+}
+/**
+ * Unión de todos los tipos de elementos posibles
+ */
+export type ArticleElement = ArticleTitleElement | ArticleSubtitleElement | ArticleTextElement | ArticleQuoteElement | ArticleHighlightElement | ArticleCodeElement | ArticleListElement | ArticleButtonElement | ArticleSeparatorElement | ArticleImageElement | ArticleVideoElement | ArticleCustomElement;
+/**
+ * Configuración del artículo completo
+ */
+export interface ArticleMetadata {
+    /** Elementos del artículo */
+    elements: ArticleElement[];
+    /** Configuración de espaciado global */
+    defaultSpacing?: ArticleSpacing;
+    /** Ancho máximo del artículo */
+    maxWidth?: string;
+    /** Centrar el artículo */
+    centered?: boolean;
+    /** Tema del artículo */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Clases CSS adicionales */
+    cssClass?: string;
+}
+/**
+ * Configuración de espaciado predefinida
+ */
+export declare const ARTICLE_SPACING: {
+    readonly NONE: ArticleSpacing;
+    readonly SMALL: ArticleSpacing;
+    readonly MEDIUM: ArticleSpacing;
+    readonly LARGE: ArticleSpacing;
+    readonly XLARGE: ArticleSpacing;
+    readonly TITLE: ArticleSpacing;
+    readonly SUBTITLE: ArticleSpacing;
+    readonly PARAGRAPH: ArticleSpacing;
+    readonly QUOTE: ArticleSpacing;
+    readonly CODE: ArticleSpacing;
+    readonly LIST: ArticleSpacing;
+    readonly BUTTON: ArticleSpacing;
+    readonly IMAGE: ArticleSpacing;
+    readonly SEPARATOR: ArticleSpacing;
+};
+/**
+ * Función helper para crear elementos de artículo de forma fácil
+ */
+export declare class ArticleBuilder {
+    private elements;
+    /**
+     * Añade un título al artículo
+     */
+    title(props: TitleMetadata, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un subtítulo al artículo
+     */
+    subtitle(props: TitleMetadata, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un párrafo al artículo
+     */
+    paragraph(props: TextMetadata, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade una cita al artículo
+     */
+    quote(props: ArticleQuoteElement['props'], options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade código al artículo
+     */
+    code(code: string, language?: string, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade una lista al artículo
+     */
+    list(items: ArticleListElement['props']['items'], listType?: ArticleListElement['props']['listType'], options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un botón al artículo
+     */
+    button(props: ButtonMetadata, alignment?: 'left' | 'center' | 'right', options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade un separador al artículo
+     */
+    separator(style?: 'line' | 'dots' | 'space', options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Añade una imagen al artículo
+     */
+    image(src: string, alt: string, caption?: string, options?: Partial<BaseArticleElement>): ArticleBuilder;
+    /**
+     * Construye el artículo final
+     */
+    build(config?: Partial<ArticleMetadata>): ArticleMetadata;
+    /**
+     * Resetea el builder para crear un nuevo artículo
+     */
+    clear(): ArticleBuilder;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.305",
+  "version": "2.0.307",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/public-api.d.ts

@@ -63,6 +63,8 @@ export * from './lib/components/molecules/select-search/select-search.component'
 export * from './lib/components/molecules/text-input/text-input.component';
 export * from './lib/components/molecules/title-block/title-block.component';
 export * from './lib/components/molecules/title-block/types';
+export * from './lib/components/organisms/article/article.component';
+export * from './lib/components/organisms/article/types';
 export * from './lib/components/organisms/banner/banner.component';
 export * from './lib/components/organisms/banner/types';
 export * from './lib/components/organisms/footer/footer.component';
@@ -80,6 +82,8 @@ export * from './lib/components/organisms/toolbar/types';
 export * from './lib/components/organisms/wizard/types';
 export * from './lib/components/organisms/wizard/wizard-footer/wizard-footer.component';
 export * from './lib/components/organisms/wizard/wizard.component';
+export * from './lib/components/organisms/article/article.component';
+export * from './lib/components/organisms/article/types';
 export * from './lib/components/templates/layout/layout.component';
 export * from './lib/components/templates/simple/simple.component';
 export * from './lib/components/templates/simple/types';