feat(daffio): add dynamically rendered design component doc view

apps/daffio/src/app/docs/design/components/doc/component.html

@@ -0,0 +1,25 @@
+<daffio-doc-article [breadcrumbs]="doc().breadcrumbs">
+	<daff-tabs>
+		<daff-tab>
+			<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>
+			<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/doc/component.ts

@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+} from '@angular/core';
+
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
+import { DAFF_TABS_COMPONENTS } 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 { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+
+@Component({
+  selector: 'daffio-docs-design-component-page',
+  templateUrl: './component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DAFF_TABS_COMPONENTS,
+    DAFF_ARTICLE_COMPONENTS,
+    DaffioDocArticleModule,
+    DaffioSafeHtmlPipe,
+  ],
+})
+export class DaffioDocsDesignComponentDocComponent implements DaffioDocComponent<DaffPackageGuideDoc> {
+  static readonly kind = DaffDocKind.COMPONENT;
+
+  doc = input<DaffPackageGuideDoc>();
+}

apps/daffio/src/app/docs/design/components/doc/provider.ts

@@ -0,0 +1,4 @@
+import { DaffioDocsDesignComponentDocComponent } from './component';
+import { provideDaffioDocRendererComponents } from '../../../components/doc-renderer/token';
+
+export const daffioDocsDesignComponentProvider = () => provideDaffioDocRendererComponents(DaffioDocsDesignComponentDocComponent);

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

@@ -13,10 +13,8 @@ import {
 } from '@daffodil/docs-utils';
 
 import { DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
-import { DaffioDocsDesignComponentPageComponent } from './pages/component/component';
 import { DaffioDocsDesignComponentOverviewPageComponent } from './pages/components-overview/component-overview.component';
 import { DaffioDocsDesignOverviewPageComponent } from './pages/overview/overview.component';
-import { DaffioDesignComponentDocResolver } from './resolvers/component-doc-resolver.service';
 import { DAFF_NAV_SIDEBAR_REGISTRATION } from '../../core/nav/sidebar.provider';
 import { DaffioRoute } from '../../core/router/route.type';
 import { DaffioDocsPageComponent } from '../pages/docs-page/docs-page.component';
@@ -51,21 +49,6 @@ export const docsDesignRoutes: Routes = [
         path: DAFF_DOC_KIND_PATH_SEGMENT_MAP[DaffDocKind.COMPONENT],
         component: DaffioDocsDesignComponentOverviewPageComponent,
       },
-      {
-        path: 'components',
-        children: [
-					<DaffioRoute>{
-					  path: '**',
-					  component: DaffioDocsDesignComponentPageComponent,
-					  resolve: {
-					    doc: DaffioDesignComponentDocResolver,
-					  },
-					  data: {
-					    sidebarMode: DaffSidebarModeEnum.SideFixed,
-					  },
-					},
-        ],
-      },
       <DaffioRoute>{
         path: '**',
         component: DaffioDocsPageComponent,

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { daffioDocsDesignComponentProvider } from './components/doc/provider';
 import { DaffioDocsDesignRoutingModule } from './design-routing.module';
 import { DaffioDocsDesignIndexService } from './services/index.service';
 
@@ -9,6 +10,7 @@ import { DaffioDocsDesignIndexService } from './services/index.service';
   ],
   providers: [
     DaffioDocsDesignIndexService,
+    daffioDocsDesignComponentProvider(),
   ],
 })
 export class DaffioDocsDesignModule {}