valtech-components 2.0.787 → 2.0.795

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

@@ -0,0 +1,474 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ButtonComponent } from '../../atoms/button/button.component';
+import { DisplayComponent } from '../../atoms/display/display.component';
+import { ImageComponent } from '../../atoms/image/image.component';
+import { ImageMetadata } from '../../atoms/image/types';
+import { TextComponent } from '../../atoms/text/text.component';
+import { TitleComponent } from '../../atoms/title/title.component';
+import { CodeDisplayComponent } from '../../molecules/code-display/code-display.component';
+import { CodeDisplayMetadata } from '../../molecules/code-display/types';
+import { NotesBoxComponent } from '../../molecules/notes-box/notes-box.component';
+import { NotesBoxMetadata } from '../../molecules/notes-box/types';
+import { PlainCodeBoxComponent } from '../../molecules/plain-code-box/plain-code-box.component';
+import { PlainCodeBoxMetadata } from '../../molecules/plain-code-box/types';
+import {
+  ARTICLE_SPACING,
+  ArticleButtonElement,
+  ArticleCodeElement,
+  ArticleCommandElement,
+  ArticleContentType,
+  ArticleCustomElement,
+  ArticleElement,
+  ArticleHighlightElement,
+  ArticleImageElement,
+  ArticleListElement,
+  ArticleMetadata,
+  ArticleNoteElement,
+  ArticleQuoteElement,
+  ArticleSeparatorElement,
+  ArticleSpacing,
+  ArticleSubtitleElement,
+  ArticleTextElement,
+  ArticleTitleElement,
+  ArticleVideoElement,
+} from './types';
+
+@Component({
+  selector: 'val-article',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DisplayComponent,
+    TitleComponent,
+    TextComponent,
+    ButtonComponent,
+    ImageComponent,
+    CodeDisplayComponent,
+    NotesBoxComponent,
+    PlainCodeBoxComponent,
+  ],
+  template: `
+    <article
+      class="val-article"
+      [class]="props.cssClass"
+      [ngClass]="{
+        'val-article--centered': props.centered,
+        'val-article--light': props.theme === 'light',
+        'val-article--dark': props.theme === 'dark',
+      }"
+      [style.max-width]="props.maxWidth"
+      [ngStyle]="getContainerStyles()"
+    >
+      <div
+        *ngFor="let element of props.elements; trackBy: trackByFn"
+        class="val-article__element"
+        [class]="element.cssClass"
+        [ngClass]="getElementSpacingClass(element)"
+        [style.display]="element.visible === false ? 'none' : 'block'"
+      >
+        <!-- Título -->
+        <ng-container *ngIf="element.type === 'title'">
+          <val-display [props]="getTitleElement(element).props"></val-display>
+        </ng-container>
+
+        <!-- Subtítulo -->
+        <ng-container *ngIf="element.type === 'subtitle'">
+          <val-title [props]="getSubtitleElement(element).props"></val-title>
+        </ng-container>
+
+        <!-- Texto/Párrafo -->
+        <ng-container *ngIf="element.type === 'text' || element.type === 'paragraph'">
+          <val-text [props]="getTextElement(element).props"></val-text>
+        </ng-container>
+
+        <!-- Cita -->
+        <ng-container *ngIf="element.type === 'quote'">
+          <div class="val-article__quote">
+            <div class="val-article__quote-content">
+              <val-text [props]="getQuoteTextProps(element)"></val-text>
+            </div>
+            <div *ngIf="getQuoteElement(element).props.author" class="val-article__quote-author">
+              — {{ getQuoteElement(element).props.author }}
+              <span *ngIf="getQuoteElement(element).props.source" class="val-article__quote-source">
+                , {{ getQuoteElement(element).props.source }}
+              </span>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Texto destacado -->
+        <ng-container *ngIf="element.type === 'highlight'">
+          <div
+            class="val-article__highlight"
+            [ngClass]="{
+              'val-article__highlight--rounded': getHighlightElement(element).props.rounded,
+            }"
+            [style.background-color]="getHighlightColor(element)"
+          >
+            <val-text [props]="getHighlightTextProps(element)"></val-text>
+          </div>
+        </ng-container>
+
+        <!-- Código -->
+        <ng-container *ngIf="element.type === 'code'">
+          <val-code-display [props]="getCodeDisplayProps(element)"></val-code-display>
+        </ng-container>
+
+        <!-- Nota destacada -->
+        <ng-container *ngIf="element.type === 'note'">
+          <val-notes-box [props]="getNoteBoxProps(element)"></val-notes-box>
+        </ng-container>
+
+        <!-- Comando de terminal -->
+        <ng-container *ngIf="element.type === 'command'">
+          <val-plain-code-box [props]="getCommandProps(element)"></val-plain-code-box>
+        </ng-container>
+
+        <!-- Lista -->
+        <ng-container *ngIf="element.type === 'list'">
+          <ul *ngIf="getListElement(element).props.listType !== 'ordered'" class="val-article__list">
+            <li *ngFor="let item of getListElement(element).props.items" class="val-article__list-item">
+              <span *ngIf="getListElement(element).props.listType === 'checklist'" class="val-article__list-check"
+                >✓</span
+              >
+              <span [innerHTML]="item.text"></span>
+            </li>
+          </ul>
+          <ol
+            *ngIf="getListElement(element).props.listType === 'ordered'"
+            class="val-article__list val-article__list--ordered"
+          >
+            <li *ngFor="let item of getListElement(element).props.items" class="val-article__list-item">
+              <span [innerHTML]="item.text"></span>
+            </li>
+          </ol>
+        </ng-container>
+
+        <!-- Botón -->
+        <ng-container *ngIf="element.type === 'button'">
+          <div
+            class="val-article__button-container"
+            [ngClass]="{
+              'val-article__button-container--left': getButtonElement(element).props.alignment === 'left',
+              'val-article__button-container--center': getButtonElement(element).props.alignment === 'center',
+              'val-article__button-container--right': getButtonElement(element).props.alignment === 'right',
+            }"
+          >
+            <val-button [props]="getButtonProps(element)"></val-button>
+          </div>
+        </ng-container>
+
+        <!-- Separador -->
+        <ng-container *ngIf="element.type === 'separator'">
+          <div class="val-article__separator">
+            <hr
+              *ngIf="getSeparatorElement(element).props.style === 'line'"
+              class="val-article__separator-line"
+              [ngClass]="{
+                'val-article__separator-line--thin': getSeparatorElement(element).props.thickness === 'thin',
+                'val-article__separator-line--thick': getSeparatorElement(element).props.thickness === 'thick',
+              }"
+            />
+            <div *ngIf="getSeparatorElement(element).props.style === 'dots'" class="val-article__separator-dots">
+              • • •
+            </div>
+            <div
+              *ngIf="getSeparatorElement(element).props.style === 'space'"
+              class="val-article__separator-space"
+            ></div>
+          </div>
+        </ng-container>
+
+        <!-- Imagen -->
+        <ng-container *ngIf="element.type === 'image'">
+          <val-image [props]="getImageMetadata(element)"></val-image>
+        </ng-container>
+
+        <!-- Video -->
+        <ng-container *ngIf="element.type === 'video'">
+          <div class="val-article__video">
+            <video
+              [src]="getVideoElement(element).props.src"
+              [poster]="getVideoElement(element).props.poster"
+              [controls]="getVideoElement(element).props.controls !== false"
+              [autoplay]="getVideoElement(element).props.autoplay"
+              [muted]="getVideoElement(element).props.muted"
+              [style.max-width]="getVideoElement(element).props.maxWidth"
+              class="val-article__video-content"
+            >
+              Tu navegador no soporta el elemento video.
+            </video>
+            <div *ngIf="getVideoElement(element).props.title" class="val-article__video-title">
+              {{ getVideoElement(element).props.title }}
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Contenido personalizado -->
+        <ng-container *ngIf="element.type === 'custom'">
+          <div class="val-article__custom" [innerHTML]="getCustomElement(element).props.htmlContent"></div>
+        </ng-container>
+      </div>
+    </article>
+  `,
+  styleUrls: ['./article.component.scss'],
+  // changeDetection: ChangeDetectionStrategy.OnPush, // Comentado temporalmente para debug
+})
+/**
+ * val-article
+ *
+ * Componente para crear artículos, blogs y documentación de forma declarativa.
+ * Permite combinar múltiples elementos (títulos, texto, imágenes, código, etc.)
+ * con espaciado automático y soporte multi-idioma.
+ *
+ * @example Uso básico:
+ * ```html
+ * <val-article [props]="articleConfig"></val-article>
+ * ```
+ *
+ * @example Con ArticleBuilder:
+ * ```typescript
+ * articleConfig = new ArticleBuilder()
+ *   .title(titleProps)
+ *   .paragraph(textProps)
+ *   .code('console.log("Hello World")', 'javascript')
+ *   .build();
+ * ```
+ *
+ * @input props: ArticleMetadata - Configuración completa del artículo
+ */
+export class ArticleComponent implements OnInit {
+  /**
+   * Configuración del artículo
+   * @type {ArticleMetadata}
+   */
+  @Input()
+  props!: ArticleMetadata;
+
+  constructor() {}
+
+  ngOnInit() {
+    // Validación básica
+    if (!this.props || !this.props.elements) {
+      console.warn('val-article: props.elements is required');
+    }
+  }
+
+  /**
+   * Obtiene los estilos de padding para el contenedor article
+   */
+  getContainerStyles(): { [key: string]: string } {
+    const spacing = this.props.containerSpacing;
+    if (!spacing) return {};
+
+    const styles: { [key: string]: string } = {};
+    const spacingValues: Record<string, string> = {
+      none: '0',
+      small: '0.5rem',
+      medium: '1rem',
+      large: '1.5rem',
+      xlarge: '2.5rem',
+    };
+
+    if (spacing.top) styles['padding-top'] = spacingValues[spacing.top];
+    if (spacing.bottom) styles['padding-bottom'] = spacingValues[spacing.bottom];
+    if (spacing.horizontal) {
+      styles['padding-left'] = spacingValues[spacing.horizontal];
+      styles['padding-right'] = spacingValues[spacing.horizontal];
+    }
+
+    return styles;
+  }
+
+  /**
+   * Función de trackBy para optimizar el rendering de elementos
+   */
+  trackByFn(index: number, element: ArticleElement): any {
+    return element.id || index;
+  }
+
+  /**
+   * Obtiene el espaciado por defecto según el tipo de elemento
+   */
+  private getDefaultSpacingForType(type: ArticleContentType): ArticleSpacing {
+    const spacingMap: Record<ArticleContentType, ArticleSpacing> = {
+      title: ARTICLE_SPACING.TITLE,
+      subtitle: ARTICLE_SPACING.SUBTITLE,
+      text: ARTICLE_SPACING.PARAGRAPH,
+      paragraph: ARTICLE_SPACING.PARAGRAPH,
+      quote: ARTICLE_SPACING.QUOTE,
+      highlight: ARTICLE_SPACING.MEDIUM,
+      code: ARTICLE_SPACING.CODE,
+      note: ARTICLE_SPACING.NOTE,
+      command: ARTICLE_SPACING.COMMAND,
+      list: ARTICLE_SPACING.LIST,
+      button: ARTICLE_SPACING.BUTTON,
+      separator: ARTICLE_SPACING.SEPARATOR,
+      image: ARTICLE_SPACING.IMAGE,
+      video: ARTICLE_SPACING.IMAGE,
+      custom: ARTICLE_SPACING.MEDIUM,
+    };
+    return spacingMap[type] || ARTICLE_SPACING.MEDIUM;
+  }
+
+  /**
+   * Obtiene las clases CSS para el espaciado del elemento.
+   * Prioridad: element.spacing > elementSpacing > espaciado nativo por tipo
+   */
+  getElementSpacingClass(element: ArticleElement): string {
+    const defaultForType = this.getDefaultSpacingForType(element.type);
+    const globalOverride = this.props.elementSpacing || this.props.defaultSpacing; // backward compat
+
+    const spacing: ArticleSpacing = {
+      top: element.spacing?.top ?? globalOverride?.top ?? defaultForType.top,
+      bottom: element.spacing?.bottom ?? globalOverride?.bottom ?? defaultForType.bottom,
+      horizontal: element.spacing?.horizontal ?? globalOverride?.horizontal ?? defaultForType.horizontal,
+    };
+
+    const classes: string[] = [];
+    if (spacing.top) classes.push(`val-article__spacing-top--${spacing.top}`);
+    if (spacing.bottom) classes.push(`val-article__spacing-bottom--${spacing.bottom}`);
+    if (spacing.horizontal) classes.push(`val-article__spacing-horizontal--${spacing.horizontal}`);
+
+    return classes.join(' ');
+  }
+
+  // === FUNCIONES DE TIPO PARA TYPESCRIPT ===
+
+  getTitleElement(element: ArticleElement): ArticleTitleElement {
+    return element as ArticleTitleElement;
+  }
+
+  getSubtitleElement(element: ArticleElement): ArticleSubtitleElement {
+    return element as ArticleSubtitleElement;
+  }
+
+  getTextElement(element: ArticleElement): ArticleTextElement {
+    return element as ArticleTextElement;
+  }
+
+  getQuoteElement(element: ArticleElement): ArticleQuoteElement {
+    return element as ArticleQuoteElement;
+  }
+
+  getHighlightElement(element: ArticleElement): ArticleHighlightElement {
+    return element as ArticleHighlightElement;
+  }
+
+  getCodeElement(element: ArticleElement): ArticleCodeElement {
+    return element as ArticleCodeElement;
+  }
+
+  getListElement(element: ArticleElement): ArticleListElement {
+    return element as ArticleListElement;
+  }
+
+  getButtonElement(element: ArticleElement): ArticleButtonElement {
+    return element as ArticleButtonElement;
+  }
+
+  getSeparatorElement(element: ArticleElement): ArticleSeparatorElement {
+    return element as ArticleSeparatorElement;
+  }
+
+  getImageElement(element: ArticleElement): ArticleImageElement {
+    return element as ArticleImageElement;
+  }
+
+  getVideoElement(element: ArticleElement): ArticleVideoElement {
+    return element as ArticleVideoElement;
+  }
+
+  getCustomElement(element: ArticleElement): ArticleCustomElement {
+    return element as ArticleCustomElement;
+  }
+
+  // === FUNCIONES AUXILIARES PARA PROPS ===
+
+  getQuoteTextProps(element: ArticleElement) {
+    const quoteElement = this.getQuoteElement(element);
+    const { author, source, ...textProps } = quoteElement.props;
+    return textProps;
+  }
+
+  getHighlightTextProps(element: ArticleElement) {
+    const highlightElement = this.getHighlightElement(element);
+    const { backgroundColor, rounded, ...textProps } = highlightElement.props;
+    return textProps;
+  }
+
+  getHighlightColor(element: ArticleElement): string {
+    const highlightElement = this.getHighlightElement(element);
+    return highlightElement.props.backgroundColor || 'var(--ion-color-light)';
+  }
+
+  getButtonProps(element: ArticleElement) {
+    const buttonElement = this.getButtonElement(element);
+    const { alignment, ...buttonProps } = buttonElement.props;
+    return buttonProps;
+  }
+
+  getCodeDisplayProps(element: ArticleElement): CodeDisplayMetadata {
+    const codeElement = this.getCodeElement(element);
+    return {
+      code: codeElement.props.code,
+      language: codeElement.props.language || 'typescript',
+      tabs: [],
+    };
+  }
+
+  getNoteElement(element: ArticleElement): ArticleNoteElement {
+    return element as ArticleNoteElement;
+  }
+
+  getCommandElement(element: ArticleElement): ArticleCommandElement {
+    return element as ArticleCommandElement;
+  }
+
+  getNoteBoxProps(element: ArticleElement): NotesBoxMetadata {
+    const noteElement = this.getNoteElement(element);
+    return {
+      text: noteElement.props.text,
+      // `??` (not `||`) so explicit empty string suppresses the prefix.
+      prefix: noteElement.props.prefix ?? 'Nota:',
+      color: noteElement.props.color || 'warning',
+      textColor: noteElement.props.textColor || 'dark',
+      size: noteElement.props.size || 'medium',
+      rounded: noteElement.props.rounded ?? true,
+      padding: noteElement.props.padding,
+      allowPartialBold: noteElement.props.allowPartialBold,
+      processLinks: noteElement.props.processLinks,
+      compact: noteElement.props.compact,
+      align: noteElement.props.align,
+    };
+  }
+
+  getCommandProps(element: ArticleElement): PlainCodeBoxMetadata {
+    const commandElement = this.getCommandElement(element);
+    return {
+      lines: commandElement.props.lines,
+      showCopyButton: commandElement.props.showCopyButton ?? true,
+      language: commandElement.props.language,
+    };
+  }
+
+  getImageMetadata(element: ArticleElement): ImageMetadata {
+    const imageElement = this.getImageElement(element);
+    const props = imageElement.props;
+
+    return {
+      src: props.src,
+      alt: props.alt,
+      mode: props.rounded ? 'rounded' : 'box',
+      size: props.size || 'medium',
+      shaded: false,
+      bordered: false,
+      alignment: props.alignment || 'center',
+      caption: props.caption,
+      captionSize: 'medium' as const,
+      width: props.maxWidth ? parseInt(props.maxWidth.replace('px', '')) : undefined,
+      previewMode: props.preview || false,
+    };
+  }
+}