Spinner

import { Component } from '@angular/core';
import { WdsSpinnerComponent } from '@wds/angular/spinner';

@Component({
  selector: 'app-spinner-default-demo',
  imports: [WdsSpinnerComponent],
  template: `
    <wds-spinner></wds-spinner>
  `,
})
export class SpinnerDefaultDemo {}

import { Component } from '@angular/core';
import { WdsSpinnerComponent } from '@wds/angular/spinner';

@Component({
  selector: 'app-spinner-size-demo',
  imports: [WdsSpinnerComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-spinner size="sm"></wds-spinner>
      <wds-spinner></wds-spinner>
      <wds-spinner size="lg"></wds-spinner>
      <wds-spinner size="xl"></wds-spinner>
      <wds-spinner class="[--wds-spinner-size:48px]"></wds-spinner>
    </div>
  `,
})
export class SpinnerSizeDemo {}

import { Component } from '@angular/core';
import { WdsSpinnerComponent } from '@wds/angular/spinner';

@Component({
  selector: 'app-spinner-color-demo',
  imports: [WdsSpinnerComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-spinner size="lg" class="text-primary"></wds-spinner>
      <wds-spinner size="lg" class="text-muted-foreground"></wds-spinner>
      <wds-spinner size="lg" class="text-destructive"></wds-spinner>
      <wds-spinner size="lg" class="text-chart-2"></wds-spinner>
    </div>
  `,
})
export class SpinnerColorDemo {}

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsSpinnerComponent } from '@wds/angular/spinner';

@Component({
  selector: 'app-spinner-button-demo',
  imports: [WdsButtonComponent, WdsSpinnerComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-button loading>Saving</wds-button>
      <wds-button variant="outline" disabled>
        <wds-spinner decorative></wds-spinner>
        Sending
      </wds-button>
      <wds-button variant="secondary" size="sm" disabled>
        <wds-spinner decorative size="sm"></wds-spinner>
        Loading
      </wds-button>
    </div>
  `,
})
export class SpinnerButtonDemo {}

import { Component } from '@angular/core';
import { WdsBadgeComponent } from '@wds/angular/badge';
import { WdsSpinnerComponent } from '@wds/angular/spinner';

@Component({
  selector: 'app-spinner-badge-demo',
  imports: [WdsBadgeComponent, WdsSpinnerComponent],
  template: `
    <div class="flex flex-wrap items-center gap-4">
      <wds-badge><wds-spinner decorative size="sm"></wds-spinner>Syncing</wds-badge>
      <wds-badge variant="secondary"><wds-spinner decorative size="sm"></wds-spinner>Updating</wds-badge>
      <wds-badge variant="outline"><wds-spinner decorative size="sm"></wds-spinner>Processing</wds-badge>
    </div>
  `,
})
export class SpinnerBadgeDemo {}

import { Component } from '@angular/core';
import { WdsInputGroupAddonComponent, WdsInputGroupComponent } from '@wds/angular/input-group';
import { WdsInputComponent } from '@wds/angular/input';
import { WdsSpinnerComponent } from '@wds/angular/spinner';

@Component({
  selector: 'app-spinner-input-group-demo',
  imports: [WdsInputGroupComponent, WdsInputGroupAddonComponent, WdsInputComponent, WdsSpinnerComponent],
  template: `
    <div class="flex w-full max-w-sm">
      <wds-input-group class="w-full">
        <wds-input placeholder="Search..." value="lit web components" aria-label="Search"></wds-input>
        <wds-input-group-addon align="inline-end"><wds-spinner label="Searching"></wds-spinner></wds-input-group-addon>
      </wds-input-group>
    </div>
  `,
})
export class SpinnerInputGroupDemo {}

import { Component } from '@angular/core';
import { WdsSpinnerComponent } from '@wds/angular/spinner';

@Component({
  selector: 'app-spinner-with-text-demo',
  imports: [WdsSpinnerComponent],
  template: `
    <span class="inline-flex items-center gap-2 text-sm text-muted-foreground">
      <wds-spinner decorative></wds-spinner>
      Loading data...
    </span>
  `,
})
export class SpinnerWithTextDemo {}

import { Component } from '@angular/core';
import { WdsEmptyComponent } from '@wds/angular/empty';
import { WdsSpinnerComponent } from '@wds/angular/spinner';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-spinner-empty-demo',
  imports: [WdsEmptyComponent, WdsSpinnerComponent, WdsButtonComponent],
  template: `
    <wds-empty outline media="icon" heading="Processing your request" description="Please wait while we process your request. Do not refresh the page.">
      <wds-spinner slot="media" size="lg" label="Processing"></wds-spinner>
      <wds-button variant="outline" size="sm">Cancel</wds-button>
    </wds-empty>
  `,
})
export class SpinnerEmptyDemo {}