import { Component, Input } from '@angular/core';
import { IonSkeletonText } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { SKELETON_PRESETS } from './types';
import * as i0 from "@angular/core";
/**
 * val-skeleton
 *
 * A skeleton loader component for content placeholders.
 * Supports various presets for common UI patterns.
 *
 * @example Text skeleton
 * <val-skeleton [props]="{ type: 'text' }"></val-skeleton>
 *
 * @example Avatar skeleton
 * <val-skeleton [props]="{ type: 'avatar' }"></val-skeleton>
 *
 * @example Paragraph skeleton
 * <val-skeleton [props]="{ type: 'paragraph', lines: 4 }"></val-skeleton>
 *
 * @example Custom skeleton
 * <val-skeleton [props]="{
 *   type: 'custom',
 *   width: '200px',
 *   height: '100px',
 *   borderRadius: '12px'
 * }"></val-skeleton>
 *
 * @input props: SkeletonMetadata - Configuration for the skeleton
 */
export class SkeletonComponent {
    constructor() {
        this.props = { type: 'text' };
    }
    getWidth() {
        if (this.props.width)
            return this.props.width;
        const preset = SKELETON_PRESETS[this.props.type || 'text'];
        return preset.width || '100%';
    }
    getHeight() {
        if (this.props.height)
            return this.props.height;
        const preset = SKELETON_PRESETS[this.props.type || 'text'];
        return preset.height || '16px';
    }
    getBorderRadius() {
        if (this.props.borderRadius)
            return this.props.borderRadius;
        if (this.isCircle())
            return '50%';
        const preset = SKELETON_PRESETS[this.props.type || 'text'];
        return preset.borderRadius || '4px';
    }
    isCircle() {
        if (this.props.circle !== undefined)
            return this.props.circle;
        return this.props.type === 'avatar';
    }
    getLines() {
        const lines = this.props.lines || SKELETON_PRESETS[this.props.type || 'text'].lines || 1;
        return Array(lines).fill(0);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SkeletonComponent, isStandalone: true, selector: "val-skeleton", inputs: { props: "props" }, ngImport: i0, template: `
    @switch (props.type) {
      @case ('paragraph') {
        <div class="skeleton-paragraph">
          @for (line of getLines(); track $index; let isLast = $last) {
            <ion-skeleton-text
              [animated]="props.animated !== false"
              [style.width]="isLast ? '60%' : '100%'"
              [style.height]="getHeight()"
              [style.border-radius]="getBorderRadius()"
            ></ion-skeleton-text>
          }
        </div>
      }
      @case ('list-item') {
        <div class="skeleton-list-item">
          <ion-skeleton-text
            [animated]="props.animated !== false"
            class="skeleton-avatar"
          ></ion-skeleton-text>
          <div class="skeleton-content">
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 70%; height: 14px;"
            ></ion-skeleton-text>
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 50%; height: 12px;"
            ></ion-skeleton-text>
          </div>
        </div>
      }
      @case ('card') {
        <div class="skeleton-card">
          <ion-skeleton-text
            [animated]="props.animated !== false"
            class="skeleton-card-image"
          ></ion-skeleton-text>
          <div class="skeleton-card-content">
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 80%; height: 16px;"
            ></ion-skeleton-text>
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 60%; height: 12px;"
            ></ion-skeleton-text>
          </div>
        </div>
      }
      @default {
        <ion-skeleton-text
          [animated]="props.animated !== false"
          [style.width]="getWidth()"
          [style.height]="getHeight()"
          [style.border-radius]="getBorderRadius()"
          [class.circle]="isCircle()"
        ></ion-skeleton-text>
      }
    }
  `, isInline: true, styles: [":host{display:block}ion-skeleton-text{margin:0;display:block}ion-skeleton-text.circle{border-radius:50%}.skeleton-paragraph{display:flex;flex-direction:column;gap:8px}.skeleton-list-item{display:flex;align-items:center;gap:12px;padding:8px 0}.skeleton-list-item .skeleton-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-list-item .skeleton-content{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card{border-radius:8px;overflow:hidden;background:var(--ion-color-light)}.skeleton-card .skeleton-card-image{width:100%;height:120px;border-radius:0}.skeleton-card .skeleton-card-content{padding:12px;display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-skeleton', standalone: true, imports: [CommonModule, IonSkeletonText], template: `
    @switch (props.type) {
      @case ('paragraph') {
        <div class="skeleton-paragraph">
          @for (line of getLines(); track $index; let isLast = $last) {
            <ion-skeleton-text
              [animated]="props.animated !== false"
              [style.width]="isLast ? '60%' : '100%'"
              [style.height]="getHeight()"
              [style.border-radius]="getBorderRadius()"
            ></ion-skeleton-text>
          }
        </div>
      }
      @case ('list-item') {
        <div class="skeleton-list-item">
          <ion-skeleton-text
            [animated]="props.animated !== false"
            class="skeleton-avatar"
          ></ion-skeleton-text>
          <div class="skeleton-content">
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 70%; height: 14px;"
            ></ion-skeleton-text>
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 50%; height: 12px;"
            ></ion-skeleton-text>
          </div>
        </div>
      }
      @case ('card') {
        <div class="skeleton-card">
          <ion-skeleton-text
            [animated]="props.animated !== false"
            class="skeleton-card-image"
          ></ion-skeleton-text>
          <div class="skeleton-card-content">
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 80%; height: 16px;"
            ></ion-skeleton-text>
            <ion-skeleton-text
              [animated]="props.animated !== false"
              style="width: 60%; height: 12px;"
            ></ion-skeleton-text>
          </div>
        </div>
      }
      @default {
        <ion-skeleton-text
          [animated]="props.animated !== false"
          [style.width]="getWidth()"
          [style.height]="getHeight()"
          [style.border-radius]="getBorderRadius()"
          [class.circle]="isCircle()"
        ></ion-skeleton-text>
      }
    }
  `, styles: [":host{display:block}ion-skeleton-text{margin:0;display:block}ion-skeleton-text.circle{border-radius:50%}.skeleton-paragraph{display:flex;flex-direction:column;gap:8px}.skeleton-list-item{display:flex;align-items:center;gap:12px;padding:8px 0}.skeleton-list-item .skeleton-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-list-item .skeleton-content{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-card{border-radius:8px;overflow:hidden;background:var(--ion-color-light)}.skeleton-card .skeleton-card-image{width:100%;height:120px;border-radius:0}.skeleton-card .skeleton-card-content{padding:12px;display:flex;flex-direction:column;gap:8px}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 