wip: implement id anchor for API tab

apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html

@@ -3,6 +3,6 @@
 		On this page
 	</div>
 	<div class="daffio-docs-table-of-contents__links">
-		<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" [fragment]="entry.slug">{{ entry.content }}</a>
+		<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" queryParamsHandling="merge" [fragment]="entry.slug">{{ entry.content }}</a>
 	</div>
 </aside>

apps/daffio/src/app/docs/design/components/component-content/component-content.component.html

@@ -0,0 +1,30 @@
+<daffio-doc-article [breadcrumbs]="doc().breadcrumbs" [toc]="toc()">
+	<daff-tabs
+		[initiallySelected]="USAGE_TAB_ID"
+		[linkMode]="true"
+		[url]="doc().id"
+		(tabChange)="setTab($event)"
+	>
+		<daff-tab [id]="USAGE_TAB_ID">
+			<daff-tab-label>
+				Usage
+			</daff-tab-label>
+			<daff-tab-panel>
+				<daff-article
+					[innerHtml]="doc().contents | safe">
+				</daff-article>
+			</daff-tab-panel>
+		</daff-tab>
+
+		<daff-tab [id]="API_TAB_ID">
+			<daff-tab-label>
+				API
+			</daff-tab-label>
+			<daff-tab-panel>
+				@for (apiDoc of doc().api; track $index) {
+					<div [innerHtml]="apiDoc | safe"></div>
+				}
+			</daff-tab-panel>
+		</daff-tab>
+	</daff-tabs>
+</daffio-doc-article>

apps/daffio/src/app/docs/design/components/component-content/component-content.component.spec.ts

@@ -0,0 +1,39 @@
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { DaffioDocsDesignComponentPageComponent } from './docs-list.component';
+
+describe('DaffioDocsDesignComponentPageComponent', () => {
+  let component: DaffioDocsDesignComponentPageComponent;
+  let fixture: ComponentFixture<DaffioDocsDesignComponentPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [DaffioDocsDesignComponentPageComponent,
+        RouterTestingModule,
+        NoopAnimationsModule],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioDocsDesignComponentPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/daffio/src/app/docs/design/components/component-content/component-content.component.ts

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
+import {
+  DAFF_TABS_COMPONENTS,
+  DaffTabsComponent,
+} from '@daffodil/design/tabs';
+import {
+  DaffDocKind,
+  DaffPackageGuideDoc,
+} from '@daffodil/docs-utils';
+
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
+import { DaffioDocArticleModule } from '../../../components/doc-article/module';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
+
+
+@Component({
+  selector: 'daffio-docs-design-component-content',
+  templateUrl: './component-content.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DAFF_TABS_COMPONENTS,
+    DAFF_ARTICLE_COMPONENTS,
+    DaffioDocArticleModule,
+    DaffioSafeHtmlPipe,
+  ],
+})
+export class DaffioDocsDesignComponentContentComponent implements DaffioDocsDynamicContent<DaffPackageGuideDoc> {
+  static readonly kind = DaffDocKind.COMPONENT;
+
+  private readonly _tab = signal<string>('');
+
+  readonly USAGE_TAB_ID = 'usage';
+  readonly API_TAB_ID = 'api';
+
+  tabs = viewChild.required(DaffTabsComponent);
+  doc = input<DaffPackageGuideDoc>();
+  toc = computed(() => {
+    switch (this._tab()) {
+      case this.API_TAB_ID:
+        return this.doc().apiToc;
+
+      default:
+      case this.USAGE_TAB_ID:
+        return this.doc().tableOfContents;
+    }
+  });
+
+  setTab(tab: string) {
+    this._tab.set(tab);
+  }
+}

apps/daffio/src/app/docs/design/components/component-content/component-content.provider.ts

@@ -0,0 +1,4 @@
+import { DaffioDocsDesignComponentContentComponent } from './component-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const provideDaffioDocsDesignComponentContentComponent = () => provideDaffioDocsDynamicContentComponents(DaffioDocsDesignComponentContentComponent);

apps/daffio/src/app/docs/design/design.module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 
+import { provideDaffioDocsDesignComponentContentComponent } from './components/component-content/component-content.provider';
 import { DaffioDocsDesignRoutingModule } from './design-routing.module';
 import { DaffioDocsDesignIndexService } from './services/index.service';
+import { provideDaffioDocsPackagesContentComponent } from '../packages/components/packages-content/packages-content.provider';
 
 @NgModule({
   imports: [
     DaffioDocsDesignRoutingModule,
   ],
   providers: [
     DaffioDocsDesignIndexService,
+    provideDaffioDocsDesignComponentContentComponent(),
+    provideDaffioDocsPackagesContentComponent(),
   ],
 })
 export class DaffioDocsDesignModule {}