valtech-components 2.0.691 → 2.0.692

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

@@ -1,469 +0,0 @@
-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
-              >
-              {{ item.text }}
-            </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">
-              {{ item.text }}
-            </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,
-      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,
-    };
-  }
-
-  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,
-    };
-  }
-}