Accordion

import { Component } from '@angular/core';
import { WdsAccordionComponent, WdsAccordionItemComponent } from '@wds/angular/accordion';

@Component({
  selector: 'app-accordion-default-demo',
  imports: [WdsAccordionComponent, WdsAccordionItemComponent],
  template: `
    <wds-accordion class="w-full max-w-lg" value="shipping">
      <wds-accordion-item value="shipping" heading="What are your shipping options?">
        <p class="m-0">We offer standard (3–5 business days), express (2–3 days) and next-day delivery.</p>
        <p class="mb-0">International shipping is available to over 100 countries.</p>
      </wds-accordion-item>
      <wds-accordion-item value="returns" heading="What is your return policy?">
        <p class="m-0">You have 30 days to return an item. It must be unused and in its original packaging.</p>
        <p class="mb-0">Refunds reach your account within 5–7 business days after we receive the package.</p>
      </wds-accordion-item>
      <wds-accordion-item value="support" heading="How can I contact customer support?">
        <p class="m-0">Email us, use the live chat or call. We reply within 24 hours.</p>
      </wds-accordion-item>
    </wds-accordion>
  `,
})
export class AccordionDefaultDemo {}

import { Component } from '@angular/core';
import { WdsAccordionComponent, WdsAccordionItemComponent } from '@wds/angular/accordion';

@Component({
  selector: 'app-accordion-basic-demo',
  imports: [WdsAccordionComponent, WdsAccordionItemComponent],
  template: `
    <wds-accordion class="w-full max-w-lg">
      <wds-accordion-item value="item-1" heading="Is it accessible?">
        Yes. It follows the WAI-ARIA Accordion pattern: buttons with aria-expanded, regions named by the header and arrow-key navigation.
      </wds-accordion-item>
      <wds-accordion-item value="item-2" heading="Is it styled?">
        Yes. It matches the other components and uses the --wds-* tokens.
      </wds-accordion-item>
      <wds-accordion-item value="item-3" heading="Is it animated?">
        Yes. It expands smoothly, and without animation with prefers-reduced-motion.
      </wds-accordion-item>
    </wds-accordion>
  `,
})
export class AccordionBasicDemo {}

import { Component } from '@angular/core';
import { WdsAccordionComponent, WdsAccordionItemComponent } from '@wds/angular/accordion';

@Component({
  selector: 'app-accordion-borders-demo',
  imports: [WdsAccordionComponent, WdsAccordionItemComponent],
  template: `
    <wds-accordion class="w-full max-w-lg rounded-lg border border-border">
      <wds-accordion-item class="px-4" value="item-1" heading="What is this component?">A list of sections that expand when you click their header.</wds-accordion-item>
      <wds-accordion-item class="px-4" value="item-2" heading="When should I use it?">When there is a lot of content and users usually need only part of it, e.g. in an FAQ.</wds-accordion-item>
      <wds-accordion-item class="px-4" value="item-3" heading="Can several sections be open at once?">Yes, with type="multiple".</wds-accordion-item>
    </wds-accordion>
  `,
})
export class AccordionBordersDemo {}

import { Component } from '@angular/core';
import { WdsCardComponent } from '@wds/angular/card';
import { WdsAccordionComponent, WdsAccordionItemComponent } from '@wds/angular/accordion';

@Component({
  selector: 'app-accordion-card-demo',
  imports: [WdsCardComponent, WdsAccordionComponent, WdsAccordionItemComponent],
  template: `
    <wds-card class="w-full max-w-lg" heading="Subscription &amp; Billing">
      <span slot="description">Common questions about your plan, payments and cancellation.</span>
      <wds-accordion value="plans">
        <wds-accordion-item value="plans" heading="What plans are available?">
          Starter ($9/month), Pro ($29/month) and Enterprise (custom pricing). Each has a 14-day trial.
        </wds-accordion-item>
        <wds-accordion-item value="billing" heading="How does billing work?">
          You pay monthly or yearly in advance (two months free). The invoice arrives by email.
        </wds-accordion-item>
        <wds-accordion-item value="cancel" heading="Can I cancel at any time?">
          Yes. You keep access until the end of the paid period, with no extra fees.
        </wds-accordion-item>
      </wds-accordion>
    </wds-card>
  `,
})
export class AccordionCardDemo {}

import { Component } from '@angular/core';
import { WdsAccordionComponent, WdsAccordionItemComponent } from '@wds/angular/accordion';

@Component({
  selector: 'app-accordion-disabled-demo',
  imports: [WdsAccordionComponent, WdsAccordionItemComponent],
  template: `
    <wds-accordion class="w-full max-w-lg">
      <wds-accordion-item value="item-1" heading="Can I change my shipping address?">
        Yes, until the order ships.
      </wds-accordion-item>
      <wds-accordion-item value="item-2" heading="Premium options (unavailable)" disabled>
        This content cannot be expanded.
      </wds-accordion-item>
      <wds-accordion-item value="item-3" heading="How do I track my package?">
        The tracking number arrives by email with the shipping confirmation.
      </wds-accordion-item>
    </wds-accordion>
  `,
})
export class AccordionDisabledDemo {}

import { Component, signal } from '@angular/core';
import { WDS_ACCORDION } from '@wds/angular/accordion';

@Component({
  selector: 'app-accordion-multiple-demo',
  imports: [...WDS_ACCORDION],
  template: `
    <div class="flex w-lg max-w-full flex-col gap-3">
      <wds-accordion type="multiple" [value]="expanded()" (wdsOpenChange)="expanded.set($event.expanded)">
        @for (item of faq; track item.value) {
          <wds-accordion-item [value]="item.value" [heading]="item.heading">{{ item.body }}</wds-accordion-item>
        }
      </wds-accordion>
      <p class="m-0 text-sm text-muted-foreground">Expanded: {{ expanded().join(', ') || 'none' }}</p>
    </div>
  `,
})
export class AccordionMultipleDemo {
  protected readonly faq = [
    { value: 'item-1', heading: 'What is this component?', body: 'A list of sections that expand when you click their header.' },
    { value: 'item-2', heading: 'When should I use it?', body: 'When there is a lot of content and users usually need only part of it.' },
    { value: 'item-3', heading: 'Can several sections be open at once?', body: 'Yes, with type="multiple".' },
  ];
  protected readonly expanded = signal(['item-1', 'item-2']);
}

import { Component } from '@angular/core';
import { WdsAccordionComponent, WdsAccordionItemComponent } from '@wds/angular/accordion';

@Component({
  selector: 'app-accordion-not-collapsible-demo',
  imports: [WdsAccordionComponent, WdsAccordionItemComponent],
  template: `
    <wds-accordion class="w-full max-w-lg" collapsible="false" value="item-1">
      <wds-accordion-item value="item-1" heading="What is this component?">A list of sections that expand when you click their header.</wds-accordion-item>
      <wds-accordion-item value="item-2" heading="When should I use it?">When there is a lot of content and users usually need only part of it, e.g. in an FAQ.</wds-accordion-item>
      <wds-accordion-item value="item-3" heading="Can several sections be open at once?">Yes, with type="multiple".</wds-accordion-item>
    </wds-accordion>
  `,
})
export class AccordionNotCollapsibleDemo {}