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 grids de cards.
 *
 * @example
 * <val-skeleton-grid [config]="{ count: 6 }"></val-skeleton-grid>
 *
 * @example
 * <val-skeleton-grid [config]="{ count: 8, variant: 'cards', columns: 4 }"></val-skeleton-grid>
 */
export class GridSkeletonComponent {
    constructor() {
        this.config = { count: 6 };
    }
    get items() {
        return Array(this.config.count ?? 6).fill(0);
    }
    get gridColumns() {
        if (this.config.columns) {
            return `repeat(${this.config.columns}, 1fr)`;
        }
        return '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GridSkeletonComponent, isStandalone: true, selector: "val-skeleton-grid", inputs: { config: "config" }, ngImport: i0, template: `
    <div
      class="skeleton-grid"
      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
      [style.gap]="config.gap || '16px'"
      [style.grid-template-columns]="gridColumns"
    >
      @for (item of items; track $index) {
        @switch (config.variant) {
          @case ('cards') {
            <div class="skeleton-card">
              <val-skeleton
                [props]="{
                  type: 'custom',
                  width: '100%',
                  height: '140px',
                  borderRadius: '8px 8px 0 0',
                  animated: config.animated !== false
                }"
              ></val-skeleton>
              <div class="skeleton-card-content">
                <val-skeleton
                  [props]="{
                    type: 'text',
                    width: '80%',
                    height: '18px',
                    animated: config.animated !== false
                  }"
                ></val-skeleton>
                <val-skeleton
                  [props]="{
                    type: 'text',
                    width: '60%',
                    height: '14px',
                    animated: config.animated !== false
                  }"
                ></val-skeleton>
              </div>
            </div>
          }
          @case ('compact') {
            <val-skeleton
              [props]="{
                type: 'thumbnail',
                animated: config.animated !== false
              }"
            ></val-skeleton>
          }
          @default {
            <val-skeleton
              [props]="{
                type: 'card',
                animated: config.animated !== false
              }"
            ></val-skeleton>
          }
        }
      }
    </div>
  `, isInline: true, styles: [".skeleton-grid{display:grid;width:100%;&.variant-default{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}&.variant-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}&.variant-compact{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}}.skeleton-card{border-radius:8px;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.skeleton-card-content{padding:12px;display:flex;flex-direction:column;gap:8px}\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: GridSkeletonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-skeleton-grid', standalone: true, imports: [CommonModule, SkeletonComponent], template: `
    <div
      class="skeleton-grid"
      [class]="'variant-' + (config.variant || 'default') + ' ' + (config.cssClass || '')"
      [style.gap]="config.gap || '16px'"
      [style.grid-template-columns]="gridColumns"
    >
      @for (item of items; track $index) {
        @switch (config.variant) {
          @case ('cards') {
            <div class="skeleton-card">
              <val-skeleton
                [props]="{
                  type: 'custom',
                  width: '100%',
                  height: '140px',
                  borderRadius: '8px 8px 0 0',
                  animated: config.animated !== false
                }"
              ></val-skeleton>
              <div class="skeleton-card-content">
                <val-skeleton
                  [props]="{
                    type: 'text',
                    width: '80%',
                    height: '18px',
                    animated: config.animated !== false
                  }"
                ></val-skeleton>
                <val-skeleton
                  [props]="{
                    type: 'text',
                    width: '60%',
                    height: '14px',
                    animated: config.animated !== false
                  }"
                ></val-skeleton>
              </div>
            </div>
          }
          @case ('compact') {
            <val-skeleton
              [props]="{
                type: 'thumbnail',
                animated: config.animated !== false
              }"
            ></val-skeleton>
          }
          @default {
            <val-skeleton
              [props]="{
                type: 'card',
                animated: config.animated !== false
              }"
            ></val-skeleton>
          }
        }
      }
    </div>
  `, styles: [".skeleton-grid{display:grid;width:100%;&.variant-default{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}&.variant-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}&.variant-compact{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}}.skeleton-card{border-radius:8px;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.skeleton-card-content{padding:12px;display:flex;flex-direction:column;gap:8px}\n"] }]
        }], propDecorators: { config: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 