Empty

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

@Component({
  selector: 'app-empty-default-demo',
  imports: [WdsEmptyComponent, WdsButtonComponent],
  template: `
    <wds-empty media="icon" heading="No Projects Yet" description="You haven't created any projects yet. Get started by creating your first project.">
      <svg slot="media" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /><path d="M2 10h20" /></svg>
      <div class="flex flex-wrap justify-center gap-2">
        <wds-button>Create Project</wds-button>
        <wds-button variant="outline">Import Project</wds-button>
      </div>
      <wds-button variant="link" size="sm" href="#">Learn More →</wds-button>
    </wds-empty>
  `,
})
export class EmptyDefaultDemo {}

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

@Component({
  selector: 'app-empty-outline-demo',
  imports: [WdsEmptyComponent, WdsButtonComponent],
  template: `
    <wds-empty outline media="icon" heading="Cloud Storage Empty" description="Upload files to your cloud storage to access them anywhere.">
      <svg slot="media" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 13v8" /><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" /><path d="m8 17 4-4 4 4" /></svg>
      <wds-button variant="outline" size="sm">Upload Files</wds-button>
    </wds-empty>
  `,
})
export class EmptyOutlineDemo {}

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

@Component({
  selector: 'app-empty-background-demo',
  imports: [WdsEmptyComponent, WdsButtonComponent],
  template: `
    <wds-empty
      class="w-full rounded-lg bg-[linear-gradient(to_top,var(--wds-muted),transparent_70%)]"
      media="icon"
      heading="No Notifications"
      description="You're all caught up. New notifications will appear here."
    >
      <svg slot="media" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg>
      <wds-button variant="outline" size="sm">Refresh</wds-button>
    </wds-empty>
  `,
})
export class EmptyBackgroundDemo {}

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

@Component({
  selector: 'app-empty-avatar-demo',
  imports: [WdsEmptyComponent, WdsAvatarComponent, WdsButtonComponent],
  template: `
    <wds-empty heading="User Offline" description="This user is currently offline. You can leave a message to notify them or try again later.">
      <wds-avatar slot="media" class="grayscale [--wds-avatar-size:48px]" src="https://github.com/octocat.png" aria-hidden="true">OC</wds-avatar>
      <wds-button size="sm">Leave Message</wds-button>
    </wds-empty>
  `,
})
export class EmptyAvatarDemo {}

import { Component } from '@angular/core';
import { WdsEmptyComponent } from '@wds/angular/empty';
import { WdsInputGroupAddonComponent, WdsInputGroupComponent } from '@wds/angular/input-group';
import { WdsInputComponent } from '@wds/angular/input';
import { WdsKbdComponent } from '@wds/angular/kbd';

@Component({
  selector: 'app-empty-input-group-demo',
  imports: [WdsEmptyComponent, WdsInputGroupComponent, WdsInputGroupAddonComponent, WdsInputComponent, WdsKbdComponent],
  template: `
    <wds-empty heading="404 - Not Found" description="The page you're looking for doesn't exist. Try searching for what you need below.">
      <wds-input-group class="w-full">
        <wds-input placeholder="Try searching for pages..." aria-label="Search pages"></wds-input>
        <wds-input-group-addon>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg>
        </wds-input-group-addon>
        <wds-input-group-addon align="inline-end"><wds-kbd>/</wds-kbd></wds-input-group-addon>
      </wds-input-group>
      <span class="text-(length:--wds-font-size-sm) text-muted-foreground">Need help? <a class="text-inherit underline-offset-4" href="#">Contact support</a></span>
    </wds-empty>
  `,
})
export class EmptyInputGroupDemo {}

import { Component } from '@angular/core';
import { WdsEmptyComponent } from '@wds/angular/empty';

@Component({
  selector: 'app-empty-slots-demo',
  imports: [WdsEmptyComponent],
  template: `
    <wds-empty outline media="icon">
      <svg slot="media" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34" /><circle cx="11" cy="11" r="8" /></svg>
      <span slot="title">No results for “<strong>lit radio</strong>”</span>
      <span slot="description">Check the spelling or <a class="text-inherit underline-offset-4 hover:text-primary" href="#">clear the filters</a>.</span>
    </wds-empty>
  `,
})
export class EmptySlotsDemo {}