@engie-group/fluid-design-system-angular/src/components/skeleton/skeleton-circle.component.ts

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { AvatarSize } from '../avatar/avatar.model';

@Component({
  selector: 'nj-skeleton-circle',
  templateUrl: './skeleton-circle.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule]
})
export class SkeletonCircleComponent {
  /**
   * @ignore
   */
  private skeletonClassName = 'nj-skeleton';

  /**
   * Circle skeleton height
   */
  @Input() height?: string;

  /**
   * Circle skeleton width
   */
  @Input() width?: string;

  /**
   * Circle skeleton size (based on avatar sizes)
   */
  @Input() variant?: AvatarSize;

  constructor() {}

  /**
   * @ignore
   */
  getSkeletonVariantClass(): string {
    if (!this.variant) {
      return '';
    }
    return `${this.skeletonClassName}--${this.variant}`;
  }
}