<!-- Semmet Angular: Skeleton Loading — https://www.w3.org/TR/wai-aria-1.2/#status -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> [lines]="3" label="Loading profile" />
-->
@if (variant() === 'text') {
  <span
    [id]="instanceId"
    [class]="textClasses()"
    [attr.aria-hidden]="ariaHidden()"
    [attr.aria-label]="ariaLabel()"
    [attr.aria-live]="ariaLive()"
    [attr.role]="role()"
  >
    @for (line of lineItems(); track line) {
      <span
        class="<%= dasherize(name) %>__line"
        [style.width]="lineWidth(line)"
        [style.height]="heightStyle()"
        [style.border-radius]="radiusStyle()"
      ></span>
    }
  </span>
} @else {
  <span
    [id]="instanceId"
    [class]="skeletonClasses()"
    [style.width]="widthStyle()"
    [style.height]="heightStyle()"
    [style.border-radius]="radiusStyle()"
    [attr.aria-hidden]="ariaHidden()"
    [attr.aria-label]="ariaLabel()"
    [attr.aria-live]="ariaLive()"
    [attr.role]="role()"
  ></span>
}
