import { ChangeDetectionStrategy, Component, ViewEncapsulation, signal } from '@angular/core';

import { CngxTab, CngxTabContent } from '@cngx/common/tabs';
import { CngxTabGroup, CngxTabOverflow } from '@cngx/ui/tabs';

/**
 * Every `CngxTabGroup` skin rendered against a Material 3 palette, plus the
 * `CngxTabOverflow` "More" popover styled as a Material menu.
 *
 * The example's stylesheet builds a real M3 theme in SCSS: `mat.theme` emits
 * the `--mat-sys-*` system tokens, then the published
 * `@cngx/themes/material/tabs-theme` bridge routes every tab token onto its
 * Material counterpart:
 *
 * ```scss
 * @use '@angular/material' as mat;
 * @use '@cngx/themes/material/tabs-theme' as tabs;
 *
 * $theme: mat.define-theme((color: (theme-type: light, primary: mat.$azure-palette)));
 * html {
 *   @include mat.theme($theme);
 *   @include tabs.theme($theme);
 * }
 * ```
 *
 * So each skin inherits the active indicator / label (primary), surfaces
 * (surface) and error tones (error) from the Material palette with no per-skin
 * overrides, and the overflow popover reads as a `mat-menu`. The shared
 * `[(activeIndex)]` keeps every group in lock-step - the skin is purely
 * visual. `ViewEncapsulation.None` lets the global `html` theme and the
 * `:where(cngx-tab-group)` / `:where(.cngx-tab-overflow__panel)` bridge rules
 * reach the tabs and the top-layer popover.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [CngxTabGroup, CngxTabOverflow, CngxTab, CngxTabContent],
  styleUrl: './skins-coverage.component.scss',
  template: `
    <div class="coverage">
      @for (skin of skins; track skin.id) {
        <section>
          <h3>{{ skin.id }}</h3>
          <cngx-tab-group [skin]="skin.id" [(activeIndex)]="active" [attr.aria-label]="skin.label">
            <div cngxTab [label]="'Overview'">
              <ng-template cngxTabContent><p>Overview content.</p></ng-template>
            </div>
            <div cngxTab [label]="'Activity'">
              <ng-template cngxTabContent><p>Activity content.</p></ng-template>
            </div>
            <div cngxTab [label]="'Settings'">
              <ng-template cngxTabContent><p>Settings content.</p></ng-template>
            </div>
          </cngx-tab-group>
        </section>
      }

      <section>
        <h3>overflow - "More" menu</h3>
        <div class="coverage__narrow">
          <cngx-tab-group [(activeIndex)]="overflowActive" aria-label="Overflow - Material menu">
            <div cngxTab [label]="'Profile'">
              <ng-template cngxTabContent><p>Profile</p></ng-template>
            </div>
            <div cngxTab [label]="'Account'">
              <ng-template cngxTabContent><p>Account</p></ng-template>
            </div>
            <div cngxTab [label]="'Notifications'">
              <ng-template cngxTabContent><p>Notifications</p></ng-template>
            </div>
            <div cngxTab [label]="'Privacy'">
              <ng-template cngxTabContent><p>Privacy</p></ng-template>
            </div>
            <div cngxTab [label]="'Sessions'">
              <ng-template cngxTabContent><p>Sessions</p></ng-template>
            </div>
            <div cngxTab [label]="'Tokens'">
              <ng-template cngxTabContent><p>API tokens</p></ng-template>
            </div>
            <div cngxTab [label]="'Billing'">
              <ng-template cngxTabContent><p>Billing</p></ng-template>
            </div>
            <div cngxTab [label]="'Danger zone'">
              <ng-template cngxTabContent><p>Destructive actions</p></ng-template>
            </div>
            <cngx-tab-overflow></cngx-tab-overflow>
          </cngx-tab-group>
        </div>
      </section>
    </div>
  `,
})
export class SkinsCoverageExample {
  protected readonly active = signal(0);
  protected readonly overflowActive = signal(0);

  protected readonly skins = [
    { id: 'line', label: 'Line skin' },
    { id: 'contained', label: 'Contained skin' },
    { id: 'segmented', label: 'Segmented skin' },
    { id: 'pill', label: 'Pill skin' },
    { id: 'pill-outline', label: 'Pill-outline skin' },
  ] as const;
}
export { SkinsCoverageExample as AppComponent };

import { ChangeDetectionStrategy, Component, ViewEncapsulation, signal } from '@angular/core';

import { CngxTab, CngxTabContent } from '@cngx/common/tabs';
import { CngxTabGroup, CngxTabOverflow } from '@cngx/ui/tabs';

/**
 * `CngxTabOverflow` under a live width constraint, Material-themed.
 *
 * Drag the frame's resize handle (bottom-right corner): an
 * `IntersectionObserver` rooted on the tab strip re-derives the hidden set
 * as the width crosses each tab's threshold, and the clipped tabs collapse
 * into the "More" popover - itself painted as a Material `mat-menu` by the
 * `@cngx/themes/material/tabs-theme` bridge. Picking a hidden tab delegates
 * back to the panel host, so keyboard and pointer paths converge. The whole
 * thing is the runnable counterpart to the static overflow stories - the
 * resize gesture is the point.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [CngxTabGroup, CngxTabOverflow, CngxTab, CngxTabContent],
  styleUrl: './overflow-resize.component.scss',
  template: `
    <p class="hint">
      Drag the bottom-right handle to resize. Tabs that no longer fit collapse
      into the "More" menu.
    </p>
    <div class="frame">
      <cngx-tab-group [(activeIndex)]="active" aria-label="Workspace sections">
        @for (tab of tabs; track tab) {
          <div cngxTab [label]="tab">
            <ng-template cngxTabContent><p>{{ tab }} content.</p></ng-template>
          </div>
        }
        <cngx-tab-overflow></cngx-tab-overflow>
      </cngx-tab-group>
    </div>
  `,
})
export class OverflowResizeExample {
  protected readonly active = signal(0);
  protected readonly tabs = [
    'Profile',
    'Account',
    'Notifications',
    'Privacy',
    'Sessions',
    'Tokens',
    'Billing',
    'Danger zone',
  ];
}
export { OverflowResizeExample as AppComponent };

import { ChangeDetectionStrategy, Component, ViewEncapsulation, signal } from '@angular/core';
import { Observable } from 'rxjs';

import { CngxTab, CngxTabContent, type CngxTabsCommitAction } from '@cngx/common/tabs';
import { CngxTabGroup } from '@cngx/ui/tabs';

/**
 * Tabs as an async navigation guard - `[commitAction]` gates each switch.
 *
 * The action returns an `Observable<boolean>` that resolves after a delay.
 * **Optimistic** flips the panel immediately and rolls back if the action
 * rejects; **pessimistic** blocks the switch until it resolves. Toggle the
 * mode and "simulate error" to exercise all four quadrants:
 *
 * - while a commit is pending the target tab shows the busy spinner
 *   (`aria-busy`),
 * - a rejection lights the rejection decoration and announces the rollback,
 * - optimistic rolls the active tab back; pessimistic never moved it.
 *
 * No explicit state machine and no `[state]` binding - the presenter's commit
 * lifecycle drives every visual. Themed via the Material tabs-theme bridge.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [CngxTabGroup, CngxTab, CngxTabContent],
  styleUrl: './async-commit.component.scss',
  template: `
    <div class="controls">
      <div class="seg" role="group" aria-label="Commit mode">
        <button type="button" [class.seg--on]="mode() === 'optimistic'" (click)="mode.set('optimistic')">
          optimistic
        </button>
        <button type="button" [class.seg--on]="mode() === 'pessimistic'" (click)="mode.set('pessimistic')">
          pessimistic
        </button>
      </div>
      <label class="flag">
        <input type="checkbox" [checked]="shouldFail()" (change)="shouldFail.set($any($event.target).checked)" />
        simulate error
      </label>
    </div>

    <cngx-tab-group
      [(activeIndex)]="active"
      [commitAction]="commitAction"
      [commitMode]="mode()"
      aria-label="Async tab navigation"
    >
      <div cngxTab [label]="'Profile'">
        <ng-template cngxTabContent><p>Profile content.</p></ng-template>
      </div>
      <div cngxTab [label]="'Account'">
        <ng-template cngxTabContent><p>Account content.</p></ng-template>
      </div>
      <div cngxTab [label]="'Notifications'">
        <ng-template cngxTabContent><p>Notification preferences.</p></ng-template>
      </div>
    </cngx-tab-group>

    <p class="status">Active tab: {{ active() }} - mode: {{ mode() }}</p>
  `,
})
export class AsyncCommitExample {
  protected readonly active = signal(0);
  protected readonly mode = signal<'optimistic' | 'pessimistic'>('optimistic');
  protected readonly shouldFail = signal(false);

  /** Resolves `true` after 600ms, or errors when "simulate error" is on. */
  protected readonly commitAction: CngxTabsCommitAction = (from, to) =>
    new Observable<boolean>((subscriber) => {
      const fail = this.shouldFail();
      const handle = setTimeout(() => {
        if (fail) {
          subscriber.error(new Error('Server refused tab ' + from + ' -> ' + to));
        } else {
          subscriber.next(true);
          subscriber.complete();
        }
      }, 600);
      return () => clearTimeout(handle);
    });
}
export { AsyncCommitExample as AppComponent };

import { ChangeDetectionStrategy, Component, ViewEncapsulation, signal } from '@angular/core';

import { CngxTab, type CngxTabCloseEvent, CngxTabContent } from '@cngx/common/tabs';
import { CngxTabGroup } from '@cngx/ui/tabs';

/**
 * Dismissable + addable tabs (APG deletable-tabs pattern), Material-themed.
 *
 * `[closable]` adds a close button to each tab (Delete on a focused tab also
 * closes it); `[addable]` adds an add-tab button. The library moves the
 * active tab to a surviving neighbour and restores focus - the consumer owns
 * the data: `(tabClose)` removes from the signal array, `(tabAdd)` appends.
 * The pinned **Home** tab sets `[closable]="false"`, so it never shows a
 * close button. Tabs are derived from a `signal` array - Ableitung statt
 * Verwaltung.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [CngxTabGroup, CngxTab, CngxTabContent],
  styleUrl: './dynamic-tabs.component.scss',
  template: `
    <cngx-tab-group
      skin="contained"
      [closable]="true"
      [addable]="true"
      [(activeIndex)]="active"
      aria-label="Open documents"
      (tabClose)="onClose($event)"
      (tabAdd)="onAdd()"
    >
      <div cngxTab [label]="'Home'" [closable]="false">
        <ng-template cngxTabContent><p>Pinned home tab - no close button.</p></ng-template>
      </div>
      @for (doc of docs(); track doc.id) {
        <div cngxTab [id]="doc.id" [label]="doc.label">
          <ng-template cngxTabContent><p>{{ doc.label }} content.</p></ng-template>
        </div>
      }
    </cngx-tab-group>

    <p class="status">Open documents: {{ docs().length }}</p>
  `,
})
export class DynamicTabsExample {
  protected readonly active = signal(0);
  protected readonly docs = signal([
    { id: 'doc-1', label: 'Document 1' },
    { id: 'doc-2', label: 'Document 2' },
  ]);
  private seq = 2;

  protected onClose(event: CngxTabCloseEvent): void {
    this.docs.update((list) => list.filter((doc) => doc.id !== event.id));
  }

  protected onAdd(): void {
    this.seq += 1;
    const id = 'doc-' + this.seq;
    this.docs.update((list) => [...list, { id, label: 'Document ' + this.seq }]);
    // Home sits at index 0; the new document is the last tab.
    this.active.set(this.docs().length);
  }
}
export { DynamicTabsExample as AppComponent };

import { HttpClient, type HttpErrorResponse } from '@angular/common/http';
import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject, signal } from '@angular/core';
import { throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

import { CngxTab, CngxTabContent, type CngxTabsCommitAction } from '@cngx/common/tabs';
import { CngxTabGroup } from '@cngx/ui/tabs';
import { CngxToastOn, CngxToastOutlet } from '@cngx/ui/feedback';

import { type Section } from './backend';

// Re-export ships app.config.ts (HttpClient + fake-backend interceptor) into
// the StackBlitz manifest.
export { appConfig } from './app.config';

/**
 * Data-driven tabs over a real `HttpClient`, Material-themed.
 *
 * The tab set is loaded from `GET /api/sections`, and `[commitAction]` issues a
 * real `PUT /api/sections/<id>/activate` per switch - so the busy spinner and
 * the rejection decoration are driven by genuine async HTTP, not a `setTimeout`.
 * Switching to **Billing** is refused by the server (409): pessimistic mode
 * keeps the active tab put and the rejection icon lights up. This needs
 * `provideHttpClient` + an interceptor, so it only works as a runnable
 * playground - not as a static `<example-url>` story.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [CngxTabGroup, CngxTab, CngxTabContent, CngxToastOn, CngxToastOutlet],
  styleUrl: './http-commit-material.component.scss',
  template: `
    @if (sections().length) {
      <cngx-tab-group
        [(activeIndex)]="active"
        [commitAction]="commit"
        commitMode="pessimistic"
        aria-label="Workspace sections"
        cngxToastOn
        toastError="Could not switch section"
        [toastErrorDetail]="true"
      >
        @for (section of sections(); track section.id) {
          <div cngxTab [label]="section.label">
            <ng-template cngxTabContent><p>{{ section.body }}</p></ng-template>
          </div>
        }
      </cngx-tab-group>
    } @else {
      <p class="loading">Loading sections from /api/sections…</p>
    }

    <cngx-toast-outlet />
  `,
})
export class HttpCommitMaterialExample {
  private readonly http = inject(HttpClient);
  protected readonly sections = signal<Section[]>([]);
  protected readonly active = signal(0);

  constructor() {
    this.http.get<Section[]>('/api/sections').subscribe((sections) => this.sections.set(sections));
  }

  /**
   * Commit a switch by PUT-ing to the API; a non-2xx response rejects it. The
   * `HttpErrorResponse` is mapped to a plain `Error` carrying the server's
   * business message so `cngxToastOn` (with `toastErrorDetail`) surfaces it.
   */
  protected readonly commit: CngxTabsCommitAction = (_from, to) => {
    const target = this.sections()[to];
    return this.http.put(`/api/sections/${target.id}/activate`, {}).pipe(
      map(() => true),
      catchError((err: HttpErrorResponse) =>
        throwError(() => new Error(err.error?.message ?? 'The server refused the switch.')),
      ),
    );
  };
}
export { HttpCommitMaterialExample as AppComponent };

import { HttpClient, type HttpErrorResponse } from '@angular/common/http';
import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject, signal } from '@angular/core';
import { throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

import { CngxTab, CngxTabContent, type CngxTabsCommitAction } from '@cngx/common/tabs';
import { CngxTabGroup } from '@cngx/ui/tabs';
import { CngxToastOn, CngxToastOutlet } from '@cngx/ui/feedback';

import { type Section } from './backend';

export { appConfig } from './app.config';

/**
 * Data-driven tabs over a real `HttpClient`, on the cngx default theme (no
 * Material bridge).
 *
 * Identical wiring to the Material variant - tabs loaded from `GET
 * /api/sections`, `[commitAction]` PUTs per switch, **Billing** is refused by
 * the server (409) - but rendered on cngx's own default styling, so it shows the
 * components are fully themed without Material. Needs `provideHttpClient` + an
 * interceptor, so it only works as a runnable playground.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [CngxTabGroup, CngxTab, CngxTabContent, CngxToastOn, CngxToastOutlet],
  styleUrl: './http-commit-plain.component.scss',
  template: `
    @if (sections().length) {
      <cngx-tab-group
        [(activeIndex)]="active"
        [commitAction]="commit"
        commitMode="pessimistic"
        aria-label="Workspace sections"
        cngxToastOn
        toastError="Could not switch section"
        [toastErrorDetail]="true"
      >
        @for (section of sections(); track section.id) {
          <div cngxTab [label]="section.label">
            <ng-template cngxTabContent><p>{{ section.body }}</p></ng-template>
          </div>
        }
      </cngx-tab-group>
    } @else {
      <p class="loading">Loading sections from /api/sections…</p>
    }

    <cngx-toast-outlet />
  `,
})
export class HttpCommitPlainExample {
  private readonly http = inject(HttpClient);
  protected readonly sections = signal<Section[]>([]);
  protected readonly active = signal(0);

  constructor() {
    this.http.get<Section[]>('/api/sections').subscribe((sections) => this.sections.set(sections));
  }

  protected readonly commit: CngxTabsCommitAction = (_from, to) => {
    const target = this.sections()[to];
    return this.http.put(`/api/sections/${target.id}/activate`, {}).pipe(
      map(() => true),
      catchError((err: HttpErrorResponse) =>
        throwError(() => new Error(err.error?.message ?? 'The server refused the switch.')),
      ),
    );
  };
}
export { HttpCommitPlainExample as AppComponent };

import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { startWith } from 'rxjs/operators';

import { injectErrorAggregator } from '@cngx/common/interactive';
import { CngxTab, CngxTabContent } from '@cngx/common/tabs';
import { CngxTabGroup } from '@cngx/ui/tabs';

/**
 * Per-tab form error aggregation.
 *
 * Each `[cngxTab]` binds `[errorAggregator]` to a `CngxErrorAggregator`
 * built with `injectErrorAggregator`. The aggregator's source signal reads
 * the form group's `statusChanges` (via `toSignal` + `startWith`) and the
 * matching tab header gains a `cngx-tabs__badge` plus an SR descriptor
 * span — fully signal-derived, no manual toggles. Both tabs start with
 * valid pre-filled values; clear a field to trigger its badge. The two
 * aggregators are independent — fixing one tab does not affect the other.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ReactiveFormsModule, CngxTabGroup, CngxTab, CngxTabContent],
  template: `
    <p style="margin: 0 0 12px; opacity: 0.8; font-size: 0.875rem">
      Two tabs, each bound to a reactive <code>FormGroup</code>. Clear a
      field — the per-tab error aggregator reads
      <code>statusChanges</code> and a badge lights up on the tab header.
    </p>
    <cngx-tab-group aria-label="Form error aggregation demo">
      <div cngxTab label="Profile" [errorAggregator]="profileErrors">
        <ng-template cngxTabContent>
          <form
            [formGroup]="profileForm"
            style="display: flex; flex-direction: column; gap: 8px; padding: 12px"
          >
            <label style="display: flex; flex-direction: column; gap: 4px">
              <span>Name</span>
              <input type="text" formControlName="name" />
            </label>
            <small style="opacity: 0.7">Required, min 2 characters</small>
          </form>
        </ng-template>
      </div>
      <div cngxTab label="Account" [errorAggregator]="accountErrors">
        <ng-template cngxTabContent>
          <form
            [formGroup]="accountForm"
            style="display: flex; flex-direction: column; gap: 8px; padding: 12px"
          >
            <label style="display: flex; flex-direction: column; gap: 4px">
              <span>Email</span>
              <input type="email" formControlName="email" />
            </label>
            <small style="opacity: 0.7">Required, valid email format</small>
          </form>
        </ng-template>
      </div>
      <div cngxTab label="Notifications">
        <ng-template cngxTabContent>
          <p style="padding: 12px">No aggregator bound — no badge on this tab.</p>
        </ng-template>
      </div>
    </cngx-tab-group>
  `,
})
export class FormErrorsExample {
  protected readonly profileForm = new FormGroup({
    name: new FormControl('Jane Doe', {
      nonNullable: true,
      validators: [Validators.required, Validators.minLength(2)],
    }),
  });
  protected readonly accountForm = new FormGroup({
    email: new FormControl('jane@example.com', {
      nonNullable: true,
      validators: [Validators.required, Validators.email],
    }),
  });

  private readonly profileStatus = toSignal(
    this.profileForm.statusChanges.pipe(startWith(this.profileForm.status)),
    { initialValue: this.profileForm.status },
  );
  private readonly accountStatus = toSignal(
    this.accountForm.statusChanges.pipe(startWith(this.accountForm.status)),
    { initialValue: this.accountForm.status },
  );

  protected readonly profileErrors = injectErrorAggregator(
    undefined,
    { profile: computed(() => this.profileStatus() === 'INVALID') },
    undefined,
    { profile: 'Profile name is required (min 2 chars)' },
  );
  protected readonly accountErrors = injectErrorAggregator(
    undefined,
    { account: computed(() => this.accountStatus() === 'INVALID') },
    undefined,
    { account: 'Account email must be valid' },
  );
}
export { FormErrorsExample as AppComponent };

import { ChangeDetectionStrategy, Component, inject, viewChild } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NavigationCancel, Router, RouterOutlet } from '@angular/router';
import { filter } from 'rxjs/operators';

import { CngxTab, type CngxTabGroupPresenter, CngxTabsRouteSync } from '@cngx/common/tabs';
import { CngxTabGroup } from '@cngx/ui/tabs';

import { DemoFormState } from './demo-routes';

// Re-export forces compodocx to ship app.config.ts (and, transitively,
// demo-routes.ts) in the StackBlitz manifest - the router lives there.
export { appConfig } from './app.config';

/**
 * Routed tab group - tabs gate a `<router-outlet>` through the router.
 *
 * `[cngxTabsRouteSync]` on `<cngx-tab-group>` turns every tab switch into
 * an Angular navigation: clicking a tab runs `router.navigate([id])`, the
 * active tab follows the *resolved* route, and the presenter's existing
 * commit lifecycle is the gate - no new state machine.
 *
 * - **CanDeactivate gating.** The `profile` route guards its own exit.
 *   Check "I have unsaved changes", then click another tab: the guard
 *   refuses, the navigation is cancelled, and the active tab stays on
 *   Profile.
 * - **The fault shows on the source, not the target.** A blocked *leave*
 *   is the Profile tab's problem, so the Profile tab binds `[error]` to the
 *   shared unsaved signal and shows the badge proactively. cngx also pins
 *   its generic rejection marker on the tab you *tried* to reach (the
 *   cancelled-navigation target) - the wrong tab for a leave guard - so
 *   this demo clears it on `NavigationCancel`. The clicked tab stays clean;
 *   only Profile signals.
 * - **External navigation.** Browser back/forward and direct URL edits
 *   reflect into the active tab without re-navigating.
 *
 * The tab strip drives the outlet; the group's own panel region is
 * hidden because the content is the route.
 */
@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CngxTabGroup, CngxTab, CngxTabsRouteSync, RouterOutlet],
  styles: [
    `
      :host {
        display: block;
        max-width: 640px;
      }
      /* Routed content lives in the outlet, not the internal panels. */
      .routed-demo cngx-tab-group .cngx-tabs__panels {
        display: none;
      }
      .routed-demo__outlet {
        padding: 16px;
        border: 1px solid var(--cngx-color-border, #d4d4d8);
        border-top: none;
        border-radius: 0 0 8px 8px;
      }
    `,
  ],
  template: `
    <div class="routed-demo">
      <p style="opacity: 0.8; font-size: 0.875rem">
        A <code>&lt;cngx-tab-group cngxTabsRouteSync&gt;</code> over a
        <code>&lt;router-outlet&gt;</code>. The Profile route guards its
        exit while "unsaved changes" is on - only the Profile tab signals.
      </p>

      <cngx-tab-group #tg="cngxTabGroup" cngxTabsRouteSync aria-label="Routed account tabs">
        <div cngxTab id="overview" label="Overview"></div>
        <div
          cngxTab
          id="profile"
          label="Profile"
          [error]="state.unsaved() ? 'Unsaved changes - resolve before leaving' : false"
        ></div>
        <div cngxTab id="settings" label="Settings"></div>
      </cngx-tab-group>

      <div class="routed-demo__outlet">
        <router-outlet></router-outlet>
      </div>
    </div>
  `,
})
export class RoutedOutletExample {
  protected readonly state = inject(DemoFormState);
  private readonly router = inject(Router);
  private readonly group = viewChild<CngxTabGroupPresenter>('tg');

  constructor() {
    // A refused *leave* belongs to the Profile tab (its `[error]`), not to
    // the tab the user clicked. cngx pins its generic rejection marker on
    // the cancelled-navigation target; clear it after the presenter sets it
    // (queueMicrotask defers past the presenter's own NavigationCancel
    // handler) so the clicked tab never lights up red.
    this.router.events
      .pipe(
        filter((event): event is NavigationCancel => event instanceof NavigationCancel),
        takeUntilDestroyed(),
      )
      .subscribe(() => queueMicrotask(() => this.group()?.clearLastFailed()));
  }
}
export { RoutedOutletExample as AppComponent };