Screens you can copy

import { BarChart } from '@absoluteui/components/bar-chart';
import { DataTable, type DataTableColumn } from '@absoluteui/components/data-table';
import { LineChart } from '@absoluteui/components/line-chart';
import { StatCard } from '@absoluteui/components/stat-card';

const el = (id: string): HTMLElement => {
  const node = document.getElementById(id);
  if (!node) throw new Error(`Missing #${id}`);
  return node;
};

const usd = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 } as const;
StatCard.create(el('revenue'), { label: 'Revenue', value: 48200, previous: 40100, valueFormat: usd, comparisonLabel: 'vs last month', trend: [31000, 35500, 38200, 40100, 48200] });
StatCard.create(el('customers'), { label: 'Active customers', value: 1284, previous: 1203, comparisonLabel: 'vs last month', trend: [1090, 1122, 1160, 1203, 1284] });
StatCard.create(el('churn'), { label: 'Churn', value: 2.1, previous: 2.6, sentiment: 'lower-is-better', valueFormat: { style: 'unit', unit: 'percent', maximumFractionDigits: 1 }, comparisonLabel: 'vs last month', trend: [3.1, 2.9, 2.8, 2.6, 2.1] });
StatCard.create(el('tickets'), { label: 'Open tickets', value: 37, previous: 52, sentiment: 'lower-is-better', comparisonLabel: 'vs last month', trend: [61, 58, 55, 52, 37] });

LineChart.create(el('trend'), {
  label: 'Revenue and target',
  description: 'Thousands of US dollars per month',
  x: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
  series: [
    { id: 'revenue', label: 'Revenue', values: [31, 35.5, 38.2, 40.1, 44.6, 48.2] },
    { id: 'target', label: 'Target', values: [32, 34, 36, 38, 40, 42] },
  ],
  area: true,
  height: 220,
});

BarChart.create(el('regions'), {
  label: 'Revenue by region',
  categories: ['North America', 'Europe', 'Asia Pacific', 'India'],
  series: [{ id: 'q3', label: 'Q3', values: [18.2, 14.6, 9.4, 6.1] }],
  valueFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 1, notation: 'compact' },
  height: 220,
});

interface Approval {
  readonly id: string;
  readonly request: string;
  readonly owner: string;
  readonly amount: number;
}
const approvals: Approval[] = [
  { id: 'a1', request: 'Annual licence renewal', owner: 'Priya Iyer', amount: 12400 },
  { id: 'a2', request: 'Conference travel', owner: 'Liam Novak', amount: 2350 },
  { id: 'a3', request: 'New laptops (4)', owner: 'Maya Okafor', amount: 6800 },
];
const columns: DataTableColumn<Approval>[] = [
  { id: 'request', header: 'Request', accessor: (a) => a.request, rowHeader: true },
  { id: 'owner', header: 'Owner', accessor: (a) => a.owner },
  { id: 'amount', header: 'Amount', accessor: (a) => a.amount, type: 'currency', currency: 'USD' },
];
DataTable.create<Approval>(el('approvals'), { caption: 'Pending approvals', columns, rows: approvals, rowId: (a) => a.id, selection: 'multiple', pageSize: null });

import { Component } from '@angular/core';
import { AuiBarChart } from '@absoluteui/angular/bar-chart';
import { AuiDataTable } from '@absoluteui/angular/data-table';
import { AuiLineChart } from '@absoluteui/angular/line-chart';
import { AuiStatCard } from '@absoluteui/angular/stat-card';
import type { ChartSeries } from '@absoluteui/components/line-chart';
import type { DataTableColumn } from '@absoluteui/components/data-table';

interface Approval {
  readonly id: string;
  readonly request: string;
  readonly owner: string;
  readonly amount: number;
}

@Component({
  selector: 'app-dashboard',
  imports: [AuiStatCard, AuiLineChart, AuiBarChart, AuiDataTable],
  template: `
    <section class="stats" aria-label="Key metrics">
      <aui-stat-card label="Revenue" [value]="48200" [previous]="40100" [valueFormat]="usd" comparisonLabel="vs last month" [trend]="[31000, 35500, 38200, 40100, 48200]" />
      <aui-stat-card label="Active customers" [value]="1284" [previous]="1203" comparisonLabel="vs last month" [trend]="[1090, 1122, 1160, 1203, 1284]" />
      <aui-stat-card label="Open tickets" [value]="37" [previous]="52" sentiment="lower-is-better" comparisonLabel="vs last month" [trend]="[61, 58, 55, 52, 37]" />
    </section>
    <aui-line-chart label="Revenue and target" description="Thousands of US dollars per month" [x]="months" [series]="trend" [area]="true" [height]="220" />
    <aui-bar-chart label="Revenue by region" [categories]="regions" [series]="byRegion" [height]="220" />
    <aui-data-table caption="Pending approvals" [columns]="columns" [rows]="approvals" [rowId]="rowId" selection="multiple" [pageSize]="null" />
  `,
})
export class DashboardComponent {
  readonly usd: Intl.NumberFormatOptions = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 };
  readonly months = ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'];
  readonly trend: ChartSeries[] = [
    { id: 'revenue', label: 'Revenue', values: [31, 35.5, 38.2, 40.1, 44.6, 48.2] },
    { id: 'target', label: 'Target', values: [32, 34, 36, 38, 40, 42] },
  ];
  readonly regions = ['North America', 'Europe', 'Asia Pacific', 'India'];
  readonly byRegion: ChartSeries[] = [{ id: 'q3', label: 'Q3', values: [18.2, 14.6, 9.4, 6.1] }];
  readonly approvals: Approval[] = [
    { id: 'a1', request: 'Annual licence renewal', owner: 'Priya Iyer', amount: 12400 },
    { id: 'a2', request: 'Conference travel', owner: 'Liam Novak', amount: 2350 },
    { id: 'a3', request: 'New laptops (4)', owner: 'Maya Okafor', amount: 6800 },
  ];
  readonly columns: DataTableColumn<Approval>[] = [
    { id: 'request', header: 'Request', accessor: (a) => a.request, rowHeader: true },
    { id: 'owner', header: 'Owner', accessor: (a) => a.owner },
    { id: 'amount', header: 'Amount', accessor: (a) => a.amount, type: 'currency', currency: 'USD' },
  ];
  readonly rowId = (a: Approval): string => a.id;
}

import { DataTable, type DataTableColumn } from '@absoluteui/components/data-table';
import { plainDate, type PlainDate } from '@absoluteui/core';

interface Account {
  readonly id: string;
  readonly name: string;
  readonly owner: string;
  readonly stage: string;
  readonly region: string;
  readonly renewal: PlainDate;
  readonly value: number;
}

const STAGES = ['Lead', 'Qualified', 'Proposal', 'Negotiation', 'Customer'];
const REGIONS = ['North America', 'Europe', 'Asia Pacific', 'India'];
const NAMES = ['Northwind', 'Contoso', 'Tailspin', 'Fabrikam', 'Adatum', 'Litware', 'Proseware', 'Wingtip', 'Fourth Coffee', 'Alpine Ski'];
const OWNERS = ['Priya Iyer', 'Liam Novak', 'Maya Okafor', 'Kenji Tanaka', 'Sofia Rossi'];

// Deterministic sample data.
const accounts: Account[] = Array.from({ length: 64 }, (_, i) => ({
  id: `acc-${String(i + 1)}`,
  name: `${NAMES[i % NAMES.length] ?? ''} ${['Group', 'Labs', 'Retail', 'Health'][i % 4] ?? ''}`,
  owner: OWNERS[(i * 3) % OWNERS.length] ?? '',
  stage: STAGES[(i * 7) % STAGES.length] ?? '',
  region: REGIONS[(i * 5) % REGIONS.length] ?? '',
  renewal: plainDate(2027, 1 + ((i * 5) % 12), 1 + ((i * 11) % 28)),
  value: 8000 + ((i * 7919) % 92000),
}));

const options = (values: readonly string[]) => values.map((v) => ({ value: v, label: v }));
const columns: DataTableColumn<Account>[] = [
  { id: 'name', header: 'Account', accessor: (a) => a.name, rowHeader: true, filter: 'text', minWidth: 180 },
  { id: 'owner', header: 'Owner', accessor: (a) => a.owner, filter: 'enum', filterOptions: options(OWNERS) },
  { id: 'stage', header: 'Stage', accessor: (a) => a.stage, filter: 'enum', filterOptions: options(STAGES) },
  { id: 'region', header: 'Region', accessor: (a) => a.region, filter: 'enum', filterOptions: options(REGIONS) },
  { id: 'renewal', header: 'Renewal', accessor: (a) => a.renewal, type: 'date', filter: 'date' },
  { id: 'value', header: 'Annual value', accessor: (a) => a.value, type: 'currency', currency: 'USD', filter: 'number' },
];

const host = document.getElementById('accounts');
if (host) {
  DataTable.create<Account>(host, {
    caption: 'Accounts',
    columns,
    rows: accounts,
    rowId: (a) => a.id,
    selection: 'multiple',
    searchable: true,
    filterRow: true,
    resizable: true,
    multiSort: true,
    pinnedColumns: { start: ['name'] },
    sort: { column: 'value', direction: 'descending' },
    pageSize: 10,
    pageSizes: [10, 25, 64],
    stickyHeader: true,
  });
}

import { Component, signal } from '@angular/core';
import { AuiDataTable } from '@absoluteui/angular/data-table';
import type { DataTableColumn, DataTableSort } from '@absoluteui/components/data-table';
import type { PlainDate } from '@absoluteui/core';

export interface Account {
  readonly id: string;
  readonly name: string;
  readonly owner: string;
  readonly stage: string;
  readonly region: string;
  readonly renewal: PlainDate;
  readonly value: number;
}

const STAGES = ['Lead', 'Qualified', 'Proposal', 'Negotiation', 'Customer'];
const options = (values: readonly string[]) => values.map((v) => ({ value: v, label: v }));

@Component({
  selector: 'app-accounts',
  imports: [AuiDataTable],
  template: `
    <aui-data-table caption="Accounts" [columns]="columns" [rows]="accounts()" [rowId]="rowId"
      selection="multiple" [searchable]="true" [filterRow]="true" [resizable]="true" [multiSort]="true"
      [pinnedColumns]="{ start: ['name'] }" [(sort)]="sort" [pageSize]="10" [pageSizes]="[10, 25, 64]" [stickyHeader]="true" />
  `,
})
export class AccountsComponent {
  /** Load from your API; the table filters, sorts, and pages on the client. */
  readonly accounts = signal<Account[]>([]);
  readonly sort = signal<DataTableSort | readonly DataTableSort[] | null>({ column: 'value', direction: 'descending' });
  readonly columns: DataTableColumn<Account>[] = [
    { id: 'name', header: 'Account', accessor: (a) => a.name, rowHeader: true, filter: 'text', minWidth: 180 },
    { id: 'owner', header: 'Owner', accessor: (a) => a.owner, filter: 'text' },
    { id: 'stage', header: 'Stage', accessor: (a) => a.stage, filter: 'enum', filterOptions: options(STAGES) },
    { id: 'region', header: 'Region', accessor: (a) => a.region, filter: 'text' },
    { id: 'renewal', header: 'Renewal', accessor: (a) => a.renewal, type: 'date', filter: 'date' },
    { id: 'value', header: 'Annual value', accessor: (a) => a.value, type: 'currency', currency: 'USD', filter: 'number' },
  ];
  readonly rowId = (a: Account): string => a.id;
}

import { Button } from '@absoluteui/components/button';
import { Form } from '@absoluteui/components/form';
import { OtpInput } from '@absoluteui/components/otp-input';
import { PasswordInput } from '@absoluteui/components/password-input';
import { TextInput } from '@absoluteui/components/text-input';

const signIn = document.querySelector<HTMLFormElement>('#sign-in');
const verify = document.querySelector<HTMLFormElement>('#verify');

if (signIn && verify) {
  const field = (form: HTMLFormElement): HTMLDivElement => {
    const host = document.createElement('div');
    form.append(host);
    return host;
  };

  // Step 1: email and password.
  TextInput.create(field(signIn), { label: 'Work email', name: 'email', type: 'email', required: true, autocomplete: 'username' });
  PasswordInput.create(field(signIn), { label: 'Password', name: 'password', required: true, autocomplete: 'current-password', capsLockWarning: true });
  signIn.append(Button.create({ text: 'Continue', type: 'submit', variant: 'primary' }).element);
  Form.create(signIn, { focusOnInvalid: 'summary' });

  // Step 2: the one-time code. In this demo the server step is simulated in the page.
  const otp = OtpInput.create(field(verify), { label: 'One-time code', name: 'code', length: 6, required: true, description: 'Enter the six-digit code from your authenticator app.' });
  verify.append(Button.create({ text: 'Verify', type: 'submit', variant: 'primary' }).element);
  Form.create(verify, { focusOnInvalid: 'summary' });

  signIn.addEventListener('aui-submit', () => {
    signIn.hidden = true;
    verify.hidden = false;
    otp.focus();
  });
  otp.host.addEventListener('aui-complete', () => {
    verify.requestSubmit();
  });
}

import { Component, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiButton } from '@absoluteui/angular/button';
import { AuiForm } from '@absoluteui/angular/form';
import { AuiOtpInput } from '@absoluteui/angular/otp-input';
import { AuiPasswordInput } from '@absoluteui/angular/password-input';
import { AuiTextInput } from '@absoluteui/angular/text-input';

@Component({
  selector: 'app-sign-in',
  imports: [ReactiveFormsModule, AuiForm, AuiTextInput, AuiPasswordInput, AuiOtpInput, AuiButton],
  template: `
    @if (step() === 'password') {
      <form auiForm [formGroup]="credentials" focusOnInvalid="summary" (submitted)="continue()">
        <h1>Sign in</h1>
        <aui-text-input label="Work email" type="email" name="email" autocomplete="username" [required]="true" formControlName="email" />
        <aui-password-input label="Password" name="password" autocomplete="current-password" [required]="true" [capsLockWarning]="true" formControlName="password" />
        <button type="submit" auiButton variant="primary">Continue</button>
      </form>
    } @else {
      <form auiForm [formGroup]="verification" focusOnInvalid="summary" (submitted)="verify()">
        <h1>Enter your code</h1>
        <aui-otp-input label="One-time code" name="code" [length]="6" [required]="true" description="Enter the six-digit code from your authenticator app." formControlName="code" (completed)="verify()" />
        <button type="submit" auiButton variant="primary">Verify</button>
      </form>
    }
  `,
})
export class SignInComponent {
  readonly step = signal<'password' | 'code'>('password');
  readonly credentials = new FormGroup({
    email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }),
    password: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
  });
  readonly verification = new FormGroup({
    code: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.minLength(6)] }),
  });

  continue(): void {
    // Send the credentials to your server; on success it asks for the one-time code.
    this.step.set('code');
  }

  verify(): void {
    // Send this.verification.value.code to your server.
  }
}

import { Button } from '@absoluteui/components/button';
import { Fieldset } from '@absoluteui/components/fieldset';
import { Form } from '@absoluteui/components/form';
import { Select } from '@absoluteui/components/select';
import { Switch } from '@absoluteui/components/switch';
import { TextInput } from '@absoluteui/components/text-input';

const form = document.querySelector<HTMLFormElement>('#settings');
const profile = document.querySelector<HTMLFieldSetElement>('#profile');
const notifications = document.querySelector<HTMLFieldSetElement>('#notifications');
const actions = document.querySelector<HTMLElement>('#actions');

if (form && profile && notifications && actions) {
  const field = (parent: HTMLElement): HTMLDivElement => {
    const host = document.createElement('div');
    parent.append(host);
    return host;
  };

  Fieldset.enhance(profile, { legend: 'Profile', description: 'Shown to your team.' });
  TextInput.create(field(profile), { label: 'Display name', name: 'name', value: 'Priya Iyer', required: true, autocomplete: 'name' });
  Select.create(field(profile), {
    label: 'Time zone',
    name: 'timezone',
    value: 'Asia/Kolkata',
    options: [
      { value: 'Asia/Kolkata', label: 'India (Asia/Kolkata)' },
      { value: 'Europe/London', label: 'United Kingdom (Europe/London)' },
      { value: 'America/New_York', label: 'US Eastern (America/New_York)' },
    ],
  });
  Select.create(field(profile), {
    label: 'Week starts on',
    name: 'weekStart',
    value: 'monday',
    options: [
      { value: 'monday', label: 'Monday' },
      { value: 'sunday', label: 'Sunday' },
    ],
  });

  Fieldset.enhance(notifications, { legend: 'Notifications', description: 'Email and in-app.' });
  Switch.create(field(notifications), { label: 'Weekly summary', name: 'summary', checked: true });
  Switch.create(field(notifications), { label: 'Approval requests', name: 'approvals', checked: true, description: 'When someone asks you to approve a request' });

  actions.append(Button.create({ text: 'Cancel', type: 'reset', variant: 'secondary' }).element, Button.create({ text: 'Save changes', type: 'submit', variant: 'primary' }).element);
  Form.create(form, { focusOnInvalid: 'summary' });
}

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiButton } from '@absoluteui/angular/button';
import { AuiFieldset } from '@absoluteui/angular/fieldset';
import { AuiForm } from '@absoluteui/angular/form';
import { AuiSelect } from '@absoluteui/angular/select';
import { AuiSwitch } from '@absoluteui/angular/switch';
import { AuiTextInput } from '@absoluteui/angular/text-input';

@Component({
  selector: 'app-settings',
  imports: [ReactiveFormsModule, AuiForm, AuiFieldset, AuiTextInput, AuiSelect, AuiSwitch, AuiButton],
  template: `
    <form auiForm [formGroup]="settings" focusOnInvalid="summary" (submitted)="save()">
      <fieldset auiFieldset legend="Profile" description="Shown to your team.">
        <aui-text-input label="Display name" name="name" autocomplete="name" [required]="true" formControlName="name" />
        <aui-select label="Time zone" name="timezone" [options]="timeZones" formControlName="timezone" />
        <aui-select label="Week starts on" name="weekStart" [options]="weekStarts" formControlName="weekStart" />
      </fieldset>
      <fieldset auiFieldset legend="Notifications" description="Email and in-app.">
        <aui-switch label="Weekly summary" formControlName="summary" />
        <aui-switch label="Approval requests" description="When someone asks you to approve a request" formControlName="approvals" />
      </fieldset>
      <button type="reset" auiButton variant="secondary">Cancel</button>
      <button type="submit" auiButton variant="primary">Save changes</button>
    </form>
  `,
})
export class SettingsComponent {
  readonly timeZones = [
    { value: 'Asia/Kolkata', label: 'India (Asia/Kolkata)' },
    { value: 'Europe/London', label: 'United Kingdom (Europe/London)' },
    { value: 'America/New_York', label: 'US Eastern (America/New_York)' },
  ];
  readonly weekStarts = [
    { value: 'monday', label: 'Monday' },
    { value: 'sunday', label: 'Sunday' },
  ];
  readonly settings = new FormGroup({
    name: new FormControl('Priya Iyer', { nonNullable: true, validators: [Validators.required] }),
    timezone: new FormControl<string | null>('Asia/Kolkata'),
    weekStart: new FormControl<string | null>('monday'),
    summary: new FormControl(true, { nonNullable: true }),
    approvals: new FormControl(true, { nonNullable: true }),
  });

  save(): void {
    // Send this.settings.getRawValue() to your server.
  }
}

import { Scheduler, type SchedulerEvent } from '@absoluteui/components/scheduler';
import { parseInstant, parseRecurrenceRule, plainDate, plainTime, type Instant } from '@absoluteui/core';
import type { BusinessCalendarDefinition } from '@absoluteui/components/business-calendar';

const at = (text: string): Instant => {
  const value = parseInstant(text);
  if (!value) throw new Error(`Bad instant ${text}`);
  return value;
};

// Working days and hours, and holidays: non-working time is shaded.
const calendar: BusinessCalendarDefinition = {
  workingDays: [1, 2, 3, 4, 5],
  hours: [{ start: plainTime(9, 0), end: plainTime(18, 0) }],
  holidays: [{ date: plainDate(2026, 10, 2), name: 'Gandhi Jayanti', yearly: true }],
};

const events: SchedulerEvent[] = [
  { id: 'standup', title: 'Standup', start: at('2026-10-26T03:30:00Z'), end: at('2026-10-26T04:00:00Z'), recurrence: parseRecurrenceRule('FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR') },
  { id: 'review', title: 'Design review', start: at('2026-10-27T08:30:00Z'), end: at('2026-10-27T10:00:00Z'), location: 'Room 4', color: 3 },
  { id: 'planning', title: 'Sprint planning', start: at('2026-10-28T05:30:00Z'), end: at('2026-10-28T07:00:00Z'), color: 2 },
  { id: 'demo', title: 'Customer demo', start: at('2026-10-29T09:30:00Z'), end: at('2026-10-29T10:30:00Z'), color: 5 },
  { id: 'offsite', title: 'Team offsite', start: plainDate(2026, 10, 30), end: plainDate(2026, 10, 31) },
];

const host = document.getElementById('calendar');
if (host) {
  Scheduler.create(host, {
    label: 'Team calendar',
    events,
    editable: true,
    view: 'week',
    timezone: 'Asia/Kolkata',
    businessCalendar: calendar,
    date: plainDate(2026, 10, 27),
    dayStartHour: 8,
  });
}

import { Component } from '@angular/core';
import { AuiScheduler } from '@absoluteui/angular/scheduler';
import type { BusinessCalendarDefinition } from '@absoluteui/components/business-calendar';
import type { SchedulerEvent, SchedulerEventChangeDetail } from '@absoluteui/components/scheduler';
import { plainDate, plainTime } from '@absoluteui/core';

@Component({
  selector: 'app-team-calendar',
  imports: [AuiScheduler],
  template: `
    <aui-scheduler label="Team calendar" [events]="events" [editable]="true" view="week" timezone="Asia/Kolkata"
      [businessCalendar]="calendar" [date]="today" [dayStartHour]="8" (eventChange)="changed($event)" />
  `,
})
export class TeamCalendarComponent {
  /** Working days and hours, and holidays: non-working time is shaded. */
  readonly calendar: BusinessCalendarDefinition = {
    workingDays: [1, 2, 3, 4, 5],
    hours: [{ start: plainTime(9, 0), end: plainTime(18, 0) }],
    holidays: [{ date: plainDate(2026, 10, 2), name: 'Gandhi Jayanti', yearly: true }],
  };
  readonly today = plainDate(2026, 10, 27);
  /** Load events from your API; the TypeScript tab shows sample events, including a recurring standup. */
  events: SchedulerEvent[] = [];

  changed(detail: SchedulerEventChangeDetail): void {
    this.events = detail.events;
  }
}

import { Gantt, type GanttDependency, type GanttTask } from '@absoluteui/components/gantt';
import { plainDate } from '@absoluteui/core';

// Durations count business days: weekends and holidays are skipped when scheduling.
const calendar = { holidays: [{ date: plainDate(2026, 12, 25), name: 'Christmas Day', yearly: true }] };

const start = plainDate(2026, 11, 2);
const tasks: GanttTask[] = [
  { id: 'plan', parentId: null, label: 'Planning', start, duration: 0 },
  { id: 'research', parentId: 'plan', label: 'User research', start, duration: 5, progress: 100 },
  { id: 'spec', parentId: 'plan', label: 'Specification', start, duration: 4, progress: 60 },
  { id: 'build', parentId: null, label: 'Build', start, duration: 0 },
  { id: 'ui', parentId: 'build', label: 'User interface', start, duration: 10, progress: 20 },
  { id: 'api', parentId: 'build', label: 'Server API', start, duration: 8 },
  { id: 'test', parentId: null, label: 'Testing', start, duration: 6 },
  { id: 'launch', parentId: null, label: 'Launch', start, duration: 0 },
];
const dependencies: GanttDependency[] = [
  { id: 'd1', from: 'research', to: 'spec' },
  { id: 'd2', from: 'spec', to: 'ui' },
  { id: 'd3', from: 'spec', to: 'api' },
  { id: 'd4', from: 'ui', to: 'test' },
  { id: 'd5', from: 'api', to: 'test' },
  { id: 'd6', from: 'test', to: 'launch', lag: 1 },
];

const host = document.getElementById('plan');
if (host) {
  Gantt.create(host, {
    label: 'Product launch',
    tasks,
    dependencies,
    calendar,
    editable: true,
    showCritical: true,
    columns: ['name', 'start', 'end', 'duration', 'progress'],
  });
}

import { Component } from '@angular/core';
import { AuiGantt } from '@absoluteui/angular/gantt';
import type { GanttDependency, GanttTask, GanttTaskChangeDetail } from '@absoluteui/components/gantt';
import { plainDate } from '@absoluteui/core';

const start = plainDate(2026, 11, 2);

@Component({
  selector: 'app-launch-plan',
  imports: [AuiGantt],
  template: `
    <aui-gantt label="Product launch" [tasks]="tasks" [dependencies]="dependencies" [calendar]="calendar"
      [editable]="true" [showCritical]="true" [columns]="['name', 'start', 'end', 'duration', 'progress']" (taskChange)="changed($event)" />
  `,
})
export class LaunchPlanComponent {
  /** Durations count business days: weekends and holidays are skipped when scheduling. */
  readonly calendar = { holidays: [{ date: plainDate(2026, 12, 25), name: 'Christmas Day', yearly: true }] };
  tasks: GanttTask[] = [
    { id: 'research', parentId: null, label: 'User research', start, duration: 5, progress: 100 },
    { id: 'spec', parentId: null, label: 'Specification', start, duration: 4, progress: 60 },
    { id: 'ui', parentId: null, label: 'User interface', start, duration: 10, progress: 20 },
    { id: 'launch', parentId: null, label: 'Launch', start, duration: 0 },
  ];
  readonly dependencies: GanttDependency[] = [
    { id: 'd1', from: 'research', to: 'spec' },
    { id: 'd2', from: 'spec', to: 'ui' },
    { id: 'd3', from: 'ui', to: 'launch', lag: 1 },
  ];

  changed(detail: GanttTaskChangeDetail): void {
    this.tasks = detail.tasks;
  }
}