import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SkeletonComponent } from '../../../components/atoms/skeleton/skeleton.component';
import * as i0 from "@angular/core";
/**
 * Template de skeleton para paginas de detalle.
 *
 * @example
 * <val-skeleton-detail></val-skeleton-detail>
 *
 * @example
 * <val-skeleton-detail [config]="{ sections: 3 }"></val-skeleton-detail>
 */
export class DetailSkeletonComponent {
    constructor() {
        this.config = { sections: 2 };
    }
    get sections() {
        return Array(this.config.sections ?? 2).fill(0);
    }
    get metaItems() {
        return [1, 2, 3];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DetailSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DetailSkeletonComponent, isStandalone: true, selector: "val-skeleton-detail", inputs: { config: "config" }, ngImport: i0, template: `
    <div class="skeleton-detail" [class]="config.cssClass">
      <!-- Hero/Header section -->
      <div class="skeleton-detail-hero">
        <val-skeleton
          [props]="{
            type: 'custom',
            width: '100%',
            height: '200px',
            borderRadius: '8px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
      </div>

      <!-- Title section -->
      <div class="skeleton-detail-title">
        <val-skeleton
          [props]="{
            type: 'text',
            width: '70%',
            height: '28px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
        <val-skeleton
          [props]="{
            type: 'text',
            width: '40%',
            height: '16px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
      </div>

      <!-- Metadata row -->
      <div class="skeleton-detail-meta">
        @for (meta of metaItems; track $index) {
          <val-skeleton
            [props]="{
              type: 'custom',
              width: '80px',
              height: '24px',
              borderRadius: '12px',
              animated: config.animated !== false
            }"
          ></val-skeleton>
        }
      </div>

      <!-- Content sections -->
      @for (section of sections; track $index) {
        <div class="skeleton-detail-section">
          <!-- Section title -->
          <val-skeleton
            [props]="{
              type: 'text',
              width: '30%',
              height: '20px',
              animated: config.animated !== false
            }"
          ></val-skeleton>
          <!-- Section content -->
          <val-skeleton
            [props]="{
              type: 'paragraph',
              lines: 4,
              animated: config.animated !== false
            }"
          ></val-skeleton>
        </div>
      }

      <!-- Action buttons -->
      <div class="skeleton-detail-actions">
        <val-skeleton
          [props]="{
            type: 'custom',
            width: '120px',
            height: '44px',
            borderRadius: '8px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
        <val-skeleton
          [props]="{
            type: 'custom',
            width: '120px',
            height: '44px',
            borderRadius: '8px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
      </div>
    </div>
  `, isInline: true, styles: [".skeleton-detail{display:flex;flex-direction:column;gap:20px;width:100%}.skeleton-detail-hero{width:100%}.skeleton-detail-title{display:flex;flex-direction:column;gap:8px}.skeleton-detail-meta{display:flex;gap:12px;flex-wrap:wrap}.skeleton-detail-section{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-detail-actions{display:flex;gap:12px;padding-top:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DetailSkeletonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-skeleton-detail', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
    <div class="skeleton-detail" [class]="config.cssClass">
      <!-- Hero/Header section -->
      <div class="skeleton-detail-hero">
        <val-skeleton
          [props]="{
            type: 'custom',
            width: '100%',
            height: '200px',
            borderRadius: '8px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
      </div>

      <!-- Title section -->
      <div class="skeleton-detail-title">
        <val-skeleton
          [props]="{
            type: 'text',
            width: '70%',
            height: '28px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
        <val-skeleton
          [props]="{
            type: 'text',
            width: '40%',
            height: '16px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
      </div>

      <!-- Metadata row -->
      <div class="skeleton-detail-meta">
        @for (meta of metaItems; track $index) {
          <val-skeleton
            [props]="{
              type: 'custom',
              width: '80px',
              height: '24px',
              borderRadius: '12px',
              animated: config.animated !== false
            }"
          ></val-skeleton>
        }
      </div>

      <!-- Content sections -->
      @for (section of sections; track $index) {
        <div class="skeleton-detail-section">
          <!-- Section title -->
          <val-skeleton
            [props]="{
              type: 'text',
              width: '30%',
              height: '20px',
              animated: config.animated !== false
            }"
          ></val-skeleton>
          <!-- Section content -->
          <val-skeleton
            [props]="{
              type: 'paragraph',
              lines: 4,
              animated: config.animated !== false
            }"
          ></val-skeleton>
        </div>
      }

      <!-- Action buttons -->
      <div class="skeleton-detail-actions">
        <val-skeleton
          [props]="{
            type: 'custom',
            width: '120px',
            height: '44px',
            borderRadius: '8px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
        <val-skeleton
          [props]="{
            type: 'custom',
            width: '120px',
            height: '44px',
            borderRadius: '8px',
            animated: config.animated !== false
          }"
        ></val-skeleton>
      </div>
    </div>
  `, styles: [".skeleton-detail{display:flex;flex-direction:column;gap:20px;width:100%}.skeleton-detail-hero{width:100%}.skeleton-detail-title{display:flex;flex-direction:column;gap:8px}.skeleton-detail-meta{display:flex;gap:12px;flex-wrap:wrap}.skeleton-detail-section{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--ion-color-light-shade, #d7d8da)}.skeleton-detail-actions{display:flex;gap:12px;padding-top:16px}\n"] }]
        }], propDecorators: { config: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 