From d40770fd944a60b2e5af4f6f2df8fc0dfdbf4fb7 Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott@gmail.com>
Date: Thu, 20 Nov 2025 18:10:10 +0000
Subject: [PATCH] refactor(docs-infra): remove the multiple code example view
 modes

Rather than using multiple view modes for code examples, we can just treat the previous snippet mode as
as multifile mode that just only has one file in it.

(cherry picked from commit f61e61ac4ffc9f7b9987e4c5a2907fa89a3586ee)
---
 .../docs-viewer/docs-viewer.component.spec.ts      |  6 ++----
 .../example-viewer/example-viewer.component.html   | 14 +++-----------
 .../example-viewer/example-viewer.component.ts     | 11 -----------
 3 files changed, 5 insertions(+), 26 deletions(-)

diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts
index 45fde2b96b5..b6be1fe5cd2 100644
--- a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts
+++ b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.spec.ts
@@ -11,7 +11,7 @@ import {By} from '@angular/platform-browser';
 import {provideRouter} from '@angular/router';
 import {ExampleViewerContentLoader} from '../../../interfaces';
 import {EXAMPLE_VIEWER_CONTENT_LOADER} from '../../../providers';
-import {CodeExampleViewMode, ExampleViewer} from '../example-viewer/example-viewer.component';
+import {ExampleViewer} from '../example-viewer/example-viewer.component';
 import {DocViewer} from './docs-viewer.component';
 import {IconComponent} from '../../icon/icon.component';
 import {Breadcrumb} from '../../breadcrumb/breadcrumb.component';
@@ -98,7 +98,7 @@ describe('DocViewer', () => {
     expect(fixture.nativeElement.innerHTML).toBe('hello world');
   });
 
-  it('should instantiate example viewer in snippet view mode', async () => {
+  it('should instantiate example viewer with only a single file', async () => {
     const fixture = TestBed.createComponent(DocViewer);
     fixture.componentRef.setInput('docContent', exampleDocContentWithExampleViewerPlaceholders);
     fixture.detectChanges();
@@ -107,7 +107,6 @@ describe('DocViewer', () => {
     const exampleViewer = fixture.debugElement.query(By.directive(ExampleViewer));
 
     expect(exampleViewer).not.toBeNull();
-    expect(exampleViewer.componentInstance.view()).toBe(CodeExampleViewMode.SNIPPET);
 
     const copySourceCodeButton = fixture.debugElement.query(By.directive(CopySourceCodeButton));
     expect(copySourceCodeButton).not.toBeNull();
@@ -132,7 +131,6 @@ describe('DocViewer', () => {
     const exampleViewer = fixture.debugElement.query(By.directive(ExampleViewer));
 
     expect(exampleViewer).not.toBeNull();
-    expect(exampleViewer.componentInstance.view()).toBe(CodeExampleViewMode.MULTI_FILE);
     expect(exampleViewer.componentInstance.tabs().length).toBe(2);
   });
 
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
index 172e805465e..c7e7ac5571c 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
+++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
@@ -1,15 +1,9 @@
 <div class="docs-example-viewer" role="group">
   <header class="docs-example-viewer-actions">
-    @if (view() === CodeExampleViewMode.SNIPPET) {
-      <span>{{ exampleMetadata()?.title }}</span>
-    }
-
-    @if (view() === CodeExampleViewMode.MULTI_FILE) {
+    @if (showCode()) {
       <mat-tab-group #codeTabs animationDuration="0ms" mat-stretch-tabs="false">
-        @if (showCode()) {
-          @for (tab of tabs(); track tab) {
-            <mat-tab [label]="tab.name" />
-          }
+        @for (tab of tabs(); track tab) {
+          <mat-tab [label]="tab.name" />
         }
       </mat-tab-group>
     }
@@ -102,8 +96,6 @@
   @if (showCode()) {
     <div
       class="docs-example-viewer-code-wrapper"
-      [class.docs-example-viewer-snippet]="view() === CodeExampleViewMode.SNIPPET"
-      [class.docs-example-viewer-multi-file]="view() === CodeExampleViewMode.MULTI_FILE"
       [class.shell]="snippetCode()?.shell"
     >
       <button docs-copy-source-code></button>
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
index 66acde39206..4fb52292486 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
+++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts
@@ -31,11 +31,6 @@ import {EXAMPLE_VIEWER_CONTENT_LOADER} from '../../../providers/index';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {MatTooltipModule} from '@angular/material/tooltip';
 
-export enum CodeExampleViewMode {
-  SNIPPET = 'snippet',
-  MULTI_FILE = 'multi',
-}
-
 export const CODE_LINE_NUMBER_CLASS_NAME = 'shiki-ln-number';
 export const CODE_LINE_CLASS_NAME = 'line';
 export const GAP_CODE_LINE_CLASS_NAME = 'gap';
@@ -77,7 +72,6 @@ export class ExampleViewer {
     return new Set(fileExtensions).size !== fileExtensions.length;
   });
 
-  CodeExampleViewMode = CodeExampleViewMode;
   exampleComponent?: Type<unknown>;
 
   readonly expandable = signal<boolean>(false);
@@ -91,11 +85,6 @@ export class ExampleViewer {
       code: file.sanitizedContent,
     })),
   );
-  readonly view = computed(() =>
-    this.exampleMetadata()?.files.length === 1
-      ? CodeExampleViewMode.SNIPPET
-      : CodeExampleViewMode.MULTI_FILE,
-  );
 
   async renderExample(): Promise<void> {
     // Lazy load live example component