feat(addon-doc): allow adding extra tabs with DI (#9381)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 8, 2024 · 421a92e · 421a92e
1 parent 48048de
commit 421a92e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/projects/addon-doc/components/page/page.component.ts b/projects/addon-doc/components/page/page.component.ts
@@ -1,4 +1,4 @@
-import {NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
+import {KeyValuePipe, NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
 import type {QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -7,27 +7,30 @@ import {
     inject,
     Input,
 } from '@angular/core';
-import {RouterLink, RouterLinkActive} from '@angular/router';
+import {ActivatedRoute, RouterLink, RouterLinkActive} from '@angular/router';
 import {TUI_DOC_DEFAULT_TABS, TUI_DOC_SUPPORT_LANGUAGE} from '@taiga-ui/addon-doc/tokens';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
 import {TuiReplacePipe} from '@taiga-ui/cdk/pipes/replace';
 import {TuiAutoColorPipe} from '@taiga-ui/core/pipes/auto-color';
 import {TuiChip} from '@taiga-ui/kit/components/chip';
 import {TuiTabs} from '@taiga-ui/kit/components/tabs';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
 import {TuiDocSeeAlso} from '../internal/see-also';
 import {TuiDocSourceCode} from '../internal/source-code/source-code.component';
 import {TuiDocLanguageSwitcher} from '../language-switcher';
-import {PAGE_PROVIDERS, PAGE_SEE_ALSO} from './page.providers';
+import {PAGE_PROVIDERS, PAGE_SEE_ALSO, TUI_DOC_TABS} from './page.providers';
 import {TuiDocPageTabConnector} from './page-tab.directive';
 
 @Component({
     standalone: true,
     selector: 'tui-doc-page',
     imports: [
+        KeyValuePipe,
         NgForOf,
         NgIf,
         NgTemplateOutlet,
+        PolymorpheusOutlet,
         RouterLink,
         RouterLinkActive,
         TuiAutoColorPipe,
@@ -44,6 +47,7 @@ import {TuiDocPageTabConnector} from './page-tab.directive';
     providers: PAGE_PROVIDERS,
 })
 export class TuiDocPage {
+    protected readonly tabs = inject(TUI_DOC_TABS)(inject(ActivatedRoute).snapshot);
     protected readonly supportLanguage = inject(TUI_DOC_SUPPORT_LANGUAGE);
     protected readonly defaultTabs = inject(TUI_DOC_DEFAULT_TABS);
     protected readonly from = / /g;

diff --git a/projects/addon-doc/components/page/page.providers.ts b/projects/addon-doc/components/page/page.providers.ts
@@ -1,7 +1,14 @@
 import type {Provider} from '@angular/core';
 import {ElementRef} from '@angular/core';
+import type {ActivatedRouteSnapshot} from '@angular/router';
 import {TUI_DOC_SEE_ALSO} from '@taiga-ui/addon-doc/tokens';
+import type {TuiHandler} from '@taiga-ui/cdk/types';
 import {tuiCreateToken} from '@taiga-ui/cdk/utils/miscellaneous';
+import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
+
+export const TUI_DOC_TABS = tuiCreateToken<
+    TuiHandler<ActivatedRouteSnapshot, Record<string, PolymorpheusContent>>
+>(() => ({}));
 
 /**
  * Array if related page titles

diff --git a/projects/addon-doc/components/page/page.template.html b/projects/addon-doc/components/page/page.template.html
@@ -46,6 +46,16 @@ <h1 class="t-title">
                 </a>
             </ng-container>
         </ng-container>
+        <ng-container *ngFor="let tab of tabs | keyvalue">
+            <a
+                *tuiItem
+                routerLinkActive
+                tuiTab
+                [routerLink]="tab.key"
+            >
+                {{ tab.key }}
+            </a>
+        </ng-container>
     </tui-tabs-with-more>
 
     <div
@@ -76,4 +86,9 @@ <h1 class="t-title">
             [ngTemplateOutlet]="tab.template"
         />
     </ng-container>
+    <ng-container *ngFor="let tab of tabs | keyvalue; index as index">
+        <ng-container *ngIf="index + tabConnectors.length === activeItemIndex">
+            <ng-container *polymorpheusOutlet="tab.value as text">{{ text }}</ng-container>
+        </ng-container>
+    </ng-container>
 </div>
diff --git a/projects/addon-doc/components/page/tests/page.component.spec.ts b/projects/addon-doc/components/page/tests/page.component.spec.ts
@@ -1,5 +1,6 @@
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
+import {ActivatedRoute} from '@angular/router';
 import {PAGE_SEE_ALSO, TuiDocPage} from '@taiga-ui/addon-doc';
 import {TUI_DOC_DEFAULT_TABS} from '@taiga-ui/addon-doc/tokens';
 import {EMPTY_QUERY} from '@taiga-ui/cdk';
@@ -12,6 +13,10 @@ describe('TuiDocPageComponent', () => {
         await TestBed.configureTestingModule({
             imports: [TuiDocPage],
             providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: {},
+                },
                 {
                     provide: TUI_DOC_DEFAULT_TABS,
                     useValue: ['tab1', 'tab2'],