import { CommonModule } from '@angular/common';
import { Component, Input } 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 { TextComponent } from '../../atoms/text/text.component';
import { TitleComponent } from '../../atoms/title/title.component';
import { CodeDisplayComponent } from '../../molecules/code-display/code-display.component';
import { NotesBoxComponent } from '../../molecules/notes-box/notes-box.component';
import { PlainCodeBoxComponent } from '../../molecules/plain-code-box/plain-code-box.component';
import { ARTICLE_SPACING, } from './types';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
 * 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 {
    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() {
        const spacing = this.props.containerSpacing;
        if (!spacing)
            return {};
        const styles = {};
        const spacingValues = {
            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, element) {
        return element.id || index;
    }
    /**
     * Obtiene el espaciado por defecto según el tipo de elemento
     */
    getDefaultSpacingForType(type) {
        const spacingMap = {
            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) {
        const defaultForType = this.getDefaultSpacingForType(element.type);
        const globalOverride = this.props.elementSpacing || this.props.defaultSpacing; // backward compat
        const spacing = {
            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 = [];
        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) {
        return element;
    }
    getSubtitleElement(element) {
        return element;
    }
    getTextElement(element) {
        return element;
    }
    getQuoteElement(element) {
        return element;
    }
    getHighlightElement(element) {
        return element;
    }
    getCodeElement(element) {
        return element;
    }
    getListElement(element) {
        return element;
    }
    getButtonElement(element) {
        return element;
    }
    getSeparatorElement(element) {
        return element;
    }
    getImageElement(element) {
        return element;
    }
    getVideoElement(element) {
        return element;
    }
    getCustomElement(element) {
        return element;
    }
    // === FUNCIONES AUXILIARES PARA PROPS ===
    getQuoteTextProps(element) {
        const quoteElement = this.getQuoteElement(element);
        const { author, source, ...textProps } = quoteElement.props;
        return textProps;
    }
    getHighlightTextProps(element) {
        const highlightElement = this.getHighlightElement(element);
        const { backgroundColor, rounded, ...textProps } = highlightElement.props;
        return textProps;
    }
    getHighlightColor(element) {
        const highlightElement = this.getHighlightElement(element);
        return highlightElement.props.backgroundColor || 'var(--ion-color-light)';
    }
    getButtonProps(element) {
        const buttonElement = this.getButtonElement(element);
        const { alignment, ...buttonProps } = buttonElement.props;
        return buttonProps;
    }
    getCodeDisplayProps(element) {
        const codeElement = this.getCodeElement(element);
        return {
            code: codeElement.props.code,
            language: codeElement.props.language || 'typescript',
            tabs: [],
        };
    }
    getNoteElement(element) {
        return element;
    }
    getCommandElement(element) {
        return element;
    }
    getNoteBoxProps(element) {
        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) {
        const commandElement = this.getCommandElement(element);
        return {
            lines: commandElement.props.lines,
            showCopyButton: commandElement.props.showCopyButton ?? true,
            language: commandElement.props.language,
        };
    }
    getImageMetadata(element) {
        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',
            width: props.maxWidth ? parseInt(props.maxWidth.replace('px', '')) : undefined,
            previewMode: props.preview || false,
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ArticleComponent, isStandalone: true, selector: "val-article", inputs: { props: "props" }, ngImport: i0, 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>
  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.val-article{width:100%;margin:0 auto;line-height:1.6;color:var(--ion-color-dark, #1f2937);display:block;position:static}.val-article--centered{margin:0 auto}.val-article--light{background-color:var(--ion-color-light, #ffffff);color:var(--ion-color-dark, #1f2937)}.val-article--dark{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article__element{position:relative}.val-article__element:last-child{margin-bottom:0!important}.val-article__spacing-top--none{margin-top:0!important}.val-article__spacing-top--small{margin-top:.5rem!important}.val-article__spacing-top--medium{margin-top:1rem!important}.val-article__spacing-top--large{margin-top:1.5rem!important}.val-article__spacing-top--xlarge{margin-top:2.5rem!important}.val-article__spacing-bottom--none{margin-bottom:0!important}.val-article__spacing-bottom--small{margin-bottom:.5rem!important}.val-article__spacing-bottom--medium{margin-bottom:1rem!important}.val-article__spacing-bottom--large{margin-bottom:1.5rem!important}.val-article__spacing-bottom--xlarge{margin-bottom:2.5rem!important}.val-article__spacing-horizontal--none{margin-left:0!important;margin-right:0!important}.val-article__spacing-horizontal--small{margin-left:.5rem!important;margin-right:.5rem!important}.val-article__spacing-horizontal--medium{margin-left:1rem!important;margin-right:1rem!important}.val-article__spacing-horizontal--large{margin-left:1.5rem!important;margin-right:1.5rem!important}.val-article__spacing-horizontal--xlarge{margin-left:2.5rem!important;margin-right:2.5rem!important}.val-article__quote{border-left:4px solid #0969da;padding:1rem;background-color:var(--ion-color-light-shade, #f8f9fa);border-radius:0 8px 8px 0;font-style:italic}.val-article__quote-content{margin-bottom:.5rem;font-size:1.1em}.val-article__quote-author{font-size:.9em;color:var(--ion-color-medium, #6c757d);font-style:normal;font-weight:500;text-align:right}.val-article__quote-source{font-weight:400;opacity:.8}.val-article__highlight{padding:1rem;background-color:var(--ion-color-warning-tint, #fff3cd);border:1px solid var(--ion-color-warning, #ffc107);border-radius:4px}.val-article__highlight--rounded{border-radius:12px}.val-article__code{border-radius:8px;overflow:hidden;border:1px solid #e1e5e9}.val-article__code-language{background-color:var(--ion-color-medium-tint, #f8f9fa);padding:.5rem 1rem;font-size:.875em;font-weight:500;color:var(--ion-color-dark, #495057);border-bottom:1px solid #e1e5e9;text-transform:uppercase;letter-spacing:.5px}.val-article__code-content{background-color:#f6f8fa;color:#24292e;padding:1rem;margin:0;overflow-x:auto;font-family:SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;line-height:1.5}.val-article__code-content code{background:none;padding:0;font-size:inherit;color:inherit}.val-article__code-content--dark{background-color:#161b22;color:#f0f6fc}.val-article__list{padding-left:1.5rem}.val-article__list--ordered{list-style-type:decimal}.val-article__list-item{margin-bottom:.5rem;line-height:1.6;position:relative}.val-article__list-item:last-child{margin-bottom:0}.val-article__list-check{color:var(--ion-color-success, #28a745);font-weight:700;margin-right:.5rem;position:absolute;left:-1.5rem}.val-article .val-article__list:has(.val-article__list-check){list-style:none;padding-left:1rem}.val-article__button-container--left{text-align:left}.val-article__button-container--center{text-align:center}.val-article__button-container--right{text-align:right}.val-article__separator{text-align:center}.val-article__separator-line{border:none;height:1px;background-color:#d0d7de;margin:0}.val-article__separator-line--thin{height:1px}.val-article__separator-line--thick{height:3px}.val-article__separator-dots{color:#d0d7de;font-size:1.5em;letter-spacing:.5em;-webkit-user-select:none;user-select:none}.val-article__separator-space{height:0}.val-article__image{text-align:center}.val-article__image--left{text-align:left}.val-article__image--center{text-align:center}.val-article__image--right{text-align:right}.val-article__image-content{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.val-article__image-content:hover{transform:scale(1.02)}.val-article__image-content--rounded{border-radius:12px}.val-article__image-caption{margin-top:.5rem;font-size:.875em;color:var(--ion-color-medium, #6c757d);font-style:italic;text-align:center}.val-article__video{text-align:center}.val-article__video-content{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #00000026}.val-article__video-title{margin-top:.5rem;font-size:.9em;color:var(--ion-color-medium, #6c757d);font-weight:500}.val-article__custom *{max-width:100%}@media (max-width: 768px){.val-article__code-content{font-size:.8em;padding:.5rem}.val-article__image-content:hover{transform:none}.val-article__quote,.val-article__highlight{padding:.5rem}}:host-context(body.dark) .val-article--auto,:host-context(.dark) .val-article--auto,:host-context(.ion-palette-dark) .val-article--auto,:host-context(html.ion-palette-dark) .val-article--auto,:host-context([data-theme=dark]) .val-article--auto{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}:host-context(body.dark) .val-article--auto .val-article__quote,:host-context(.dark) .val-article--auto .val-article__quote,:host-context(.ion-palette-dark) .val-article--auto .val-article__quote,:host-context(html.ion-palette-dark) .val-article--auto .val-article__quote,:host-context([data-theme=dark]) .val-article--auto .val-article__quote{background-color:#ffffff14;border-left-color:var(--ion-color-primary)}:host-context(body.dark) .val-article--auto .val-article__highlight,:host-context(.dark) .val-article--auto .val-article__highlight,:host-context(.ion-palette-dark) .val-article--auto .val-article__highlight,:host-context(html.ion-palette-dark) .val-article--auto .val-article__highlight,:host-context([data-theme=dark]) .val-article--auto .val-article__highlight{background-color:#ffc1071a;border-color:var(--ion-color-warning-shade, #e0a800)}:host-context(body.dark) .val-article--auto .val-article__code-content,:host-context(.dark) .val-article--auto .val-article__code-content,:host-context(.ion-palette-dark) .val-article--auto .val-article__code-content,:host-context(html.ion-palette-dark) .val-article--auto .val-article__code-content,:host-context([data-theme=dark]) .val-article--auto .val-article__code-content{background-color:#161b22;color:#f0f6fc}.val-article__element{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.val-article__separator-line{background-color:currentColor;opacity:.5}.val-article__quote{border-left-width:6px}}@media (prefers-reduced-motion: reduce){.val-article .val-article__element{animation:none}.val-article__image-content{transition:none}.val-article__image-content:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: CodeDisplayComponent, selector: "val-code-display", inputs: ["props"] }, { kind: "component", type: NotesBoxComponent, selector: "val-notes-box", inputs: ["props"] }, { kind: "component", type: PlainCodeBoxComponent, selector: "val-plain-code-box", inputs: ["props"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleComponent, decorators: [{
            type: Component,
            args: [{ 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>
  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.val-article{width:100%;margin:0 auto;line-height:1.6;color:var(--ion-color-dark, #1f2937);display:block;position:static}.val-article--centered{margin:0 auto}.val-article--light{background-color:var(--ion-color-light, #ffffff);color:var(--ion-color-dark, #1f2937)}.val-article--dark{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article__element{position:relative}.val-article__element:last-child{margin-bottom:0!important}.val-article__spacing-top--none{margin-top:0!important}.val-article__spacing-top--small{margin-top:.5rem!important}.val-article__spacing-top--medium{margin-top:1rem!important}.val-article__spacing-top--large{margin-top:1.5rem!important}.val-article__spacing-top--xlarge{margin-top:2.5rem!important}.val-article__spacing-bottom--none{margin-bottom:0!important}.val-article__spacing-bottom--small{margin-bottom:.5rem!important}.val-article__spacing-bottom--medium{margin-bottom:1rem!important}.val-article__spacing-bottom--large{margin-bottom:1.5rem!important}.val-article__spacing-bottom--xlarge{margin-bottom:2.5rem!important}.val-article__spacing-horizontal--none{margin-left:0!important;margin-right:0!important}.val-article__spacing-horizontal--small{margin-left:.5rem!important;margin-right:.5rem!important}.val-article__spacing-horizontal--medium{margin-left:1rem!important;margin-right:1rem!important}.val-article__spacing-horizontal--large{margin-left:1.5rem!important;margin-right:1.5rem!important}.val-article__spacing-horizontal--xlarge{margin-left:2.5rem!important;margin-right:2.5rem!important}.val-article__quote{border-left:4px solid #0969da;padding:1rem;background-color:var(--ion-color-light-shade, #f8f9fa);border-radius:0 8px 8px 0;font-style:italic}.val-article__quote-content{margin-bottom:.5rem;font-size:1.1em}.val-article__quote-author{font-size:.9em;color:var(--ion-color-medium, #6c757d);font-style:normal;font-weight:500;text-align:right}.val-article__quote-source{font-weight:400;opacity:.8}.val-article__highlight{padding:1rem;background-color:var(--ion-color-warning-tint, #fff3cd);border:1px solid var(--ion-color-warning, #ffc107);border-radius:4px}.val-article__highlight--rounded{border-radius:12px}.val-article__code{border-radius:8px;overflow:hidden;border:1px solid #e1e5e9}.val-article__code-language{background-color:var(--ion-color-medium-tint, #f8f9fa);padding:.5rem 1rem;font-size:.875em;font-weight:500;color:var(--ion-color-dark, #495057);border-bottom:1px solid #e1e5e9;text-transform:uppercase;letter-spacing:.5px}.val-article__code-content{background-color:#f6f8fa;color:#24292e;padding:1rem;margin:0;overflow-x:auto;font-family:SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;line-height:1.5}.val-article__code-content code{background:none;padding:0;font-size:inherit;color:inherit}.val-article__code-content--dark{background-color:#161b22;color:#f0f6fc}.val-article__list{padding-left:1.5rem}.val-article__list--ordered{list-style-type:decimal}.val-article__list-item{margin-bottom:.5rem;line-height:1.6;position:relative}.val-article__list-item:last-child{margin-bottom:0}.val-article__list-check{color:var(--ion-color-success, #28a745);font-weight:700;margin-right:.5rem;position:absolute;left:-1.5rem}.val-article .val-article__list:has(.val-article__list-check){list-style:none;padding-left:1rem}.val-article__button-container--left{text-align:left}.val-article__button-container--center{text-align:center}.val-article__button-container--right{text-align:right}.val-article__separator{text-align:center}.val-article__separator-line{border:none;height:1px;background-color:#d0d7de;margin:0}.val-article__separator-line--thin{height:1px}.val-article__separator-line--thick{height:3px}.val-article__separator-dots{color:#d0d7de;font-size:1.5em;letter-spacing:.5em;-webkit-user-select:none;user-select:none}.val-article__separator-space{height:0}.val-article__image{text-align:center}.val-article__image--left{text-align:left}.val-article__image--center{text-align:center}.val-article__image--right{text-align:right}.val-article__image-content{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.val-article__image-content:hover{transform:scale(1.02)}.val-article__image-content--rounded{border-radius:12px}.val-article__image-caption{margin-top:.5rem;font-size:.875em;color:var(--ion-color-medium, #6c757d);font-style:italic;text-align:center}.val-article__video{text-align:center}.val-article__video-content{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #00000026}.val-article__video-title{margin-top:.5rem;font-size:.9em;color:var(--ion-color-medium, #6c757d);font-weight:500}.val-article__custom *{max-width:100%}@media (max-width: 768px){.val-article__code-content{font-size:.8em;padding:.5rem}.val-article__image-content:hover{transform:none}.val-article__quote,.val-article__highlight{padding:.5rem}}:host-context(body.dark) .val-article--auto,:host-context(.dark) .val-article--auto,:host-context(.ion-palette-dark) .val-article--auto,:host-context(html.ion-palette-dark) .val-article--auto,:host-context([data-theme=dark]) .val-article--auto{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}:host-context(body.dark) .val-article--auto .val-article__quote,:host-context(.dark) .val-article--auto .val-article__quote,:host-context(.ion-palette-dark) .val-article--auto .val-article__quote,:host-context(html.ion-palette-dark) .val-article--auto .val-article__quote,:host-context([data-theme=dark]) .val-article--auto .val-article__quote{background-color:#ffffff14;border-left-color:var(--ion-color-primary)}:host-context(body.dark) .val-article--auto .val-article__highlight,:host-context(.dark) .val-article--auto .val-article__highlight,:host-context(.ion-palette-dark) .val-article--auto .val-article__highlight,:host-context(html.ion-palette-dark) .val-article--auto .val-article__highlight,:host-context([data-theme=dark]) .val-article--auto .val-article__highlight{background-color:#ffc1071a;border-color:var(--ion-color-warning-shade, #e0a800)}:host-context(body.dark) .val-article--auto .val-article__code-content,:host-context(.dark) .val-article--auto .val-article__code-content,:host-context(.ion-palette-dark) .val-article--auto .val-article__code-content,:host-context(html.ion-palette-dark) .val-article--auto .val-article__code-content,:host-context([data-theme=dark]) .val-article--auto .val-article__code-content{background-color:#161b22;color:#f0f6fc}.val-article__element{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.val-article__separator-line{background-color:currentColor;opacity:.5}.val-article__quote{border-left-width:6px}}@media (prefers-reduced-motion: reduce){.val-article .val-article__element{animation:none}.val-article__image-content{transition:none}.val-article__image-content:hover{transform:none}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { props: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 