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 listas.
 *
 * @example
 * <val-skeleton-list [config]="{ count: 5 }"></val-skeleton-list>
 *
 * @example
 * <val-skeleton-list [config]="{ count: 3, variant: 'avatar', gap: '16px' }"></val-skeleton-list>
 */
export class ListSkeletonComponent {
    constructor() {
        this.config = { count: 3 };
    }
    get items() {
        return Array(this.config.count ?? 3).fill(0);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListSkeletonComponent, isStandalone: true, selector: "val-skeleton-list", inputs: { config: "config" }, ngImport: i0, template: `
    <div class="skeleton-list" [style.gap]="config.gap || '12px'" [class]="config.cssClass">
      @for (item of items; track $index) {
        @if (config.variant === 'avatar') {
          <div class="skeleton-list-item-avatar">
            <val-skeleton
              [props]="{
                type: 'avatar',
                animated: config.animated !== false
              }"
            ></val-skeleton>
            <div class="skeleton-content">
              <val-skeleton
                [props]="{
                  type: 'text',
                  width: '70%',
                  height: '16px',
                  animated: config.animated !== false
                }"
              ></val-skeleton>
              <val-skeleton
                [props]="{
                  type: 'text',
                  width: '50%',
                  height: '14px',
                  animated: config.animated !== false
                }"
              ></val-skeleton>
            </div>
          </div>
        } @else {
          <val-skeleton
            [props]="{
              type: 'list-item',
              animated: config.animated !== false
            }"
          ></val-skeleton>
        }
      }
    </div>
  `, isInline: true, styles: [".skeleton-list{display:flex;flex-direction:column;width:100%}.skeleton-list-item-avatar{display:flex;align-items:center;gap:12px;padding:8px 0}.skeleton-content{display:flex;flex-direction:column;gap:6px;flex:1}\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: ListSkeletonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-skeleton-list', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
    <div class="skeleton-list" [style.gap]="config.gap || '12px'" [class]="config.cssClass">
      @for (item of items; track $index) {
        @if (config.variant === 'avatar') {
          <div class="skeleton-list-item-avatar">
            <val-skeleton
              [props]="{
                type: 'avatar',
                animated: config.animated !== false
              }"
            ></val-skeleton>
            <div class="skeleton-content">
              <val-skeleton
                [props]="{
                  type: 'text',
                  width: '70%',
                  height: '16px',
                  animated: config.animated !== false
                }"
              ></val-skeleton>
              <val-skeleton
                [props]="{
                  type: 'text',
                  width: '50%',
                  height: '14px',
                  animated: config.animated !== false
                }"
              ></val-skeleton>
            </div>
          </div>
        } @else {
          <val-skeleton
            [props]="{
              type: 'list-item',
              animated: config.animated !== false
            }"
          ></val-skeleton>
        }
      }
    </div>
  `, styles: [".skeleton-list{display:flex;flex-direction:column;width:100%}.skeleton-list-item-avatar{display:flex;align-items:center;gap:12px;padding:8px 0}.skeleton-content{display:flex;flex-direction:column;gap:6px;flex:1}\n"] }]
        }], propDecorators: { config: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 