chore(demo): fix broken link for documentation page Mode (#7185)

taiga-family · Apr 8, 2024 · 1de97a9 · 1de97a9
1 parent edd917f
commit 1de97a9
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 14 deletions.
diff --git a/projects/addon-doc/components/demo/demo.template.html b/projects/addon-doc/components/demo/demo.template.html
@@ -4,6 +4,7 @@
 >
     <ng-template #tooltip>
         {{ texts[0] }}
+        <!-- TODO: @taiga-ui/addon-doc should not include relative link of Taiga UI demo application -->
         <a
             routerLink="/directives/mode"
             tuiLink

diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts
@@ -186,7 +186,7 @@ export const DemoRoute = {
     Validator: 'directives/validator',
     ValueChanges: 'directives/value-changes',
     Media: 'media',
-    Mode: 'mode',
+    Mode: 'directives/mode',
     AutoFocus: 'directives/auto-focus',
     Currency: 'pipes/currency',
     FilterPipe: 'pipes/filter',

diff --git a/projects/demo/src/modules/components/input/examples/5/index.html b/projects/demo/src/modules/components/input/examples/5/index.html
@@ -1,15 +1,4 @@
 <form [formGroup]="testForm">
-    <tui-notification>
-        Custom mode is set with
-        <a
-            routerLink="/directives/mode"
-            tuiLink
-        >
-            <code>tuiMode</code>
-        </a>
-        directive
-    </tui-notification>
-
     <p>
         <tui-input
             formControlName="testValue"

diff --git a/projects/demo/src/modules/components/input/input.component.ts b/projects/demo/src/modules/components/input/input.component.ts
@@ -2,6 +2,7 @@ import type {TemplateRef} from '@angular/core';
 import {Component, ViewChild} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {DemoRoute} from '@demo/routes';
 import type {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiProvide} from '@taiga-ui/cdk';
 import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
@@ -43,6 +44,8 @@ export class ExampleTuiInputComponent extends AbstractExampleTuiControl {
 
     protected readonly exampleForm = import('./examples/import/declare-form.md?raw');
 
+    protected modeDocPage = `/${DemoRoute.Mode}`;
+
     protected readonly example1: TuiDocExample = {
         TypeScript: import('./examples/1/index.ts?raw'),
         HTML: import('./examples/1/index.html?raw'),

diff --git a/projects/demo/src/modules/components/input/input.template.html b/projects/demo/src/modules/components/input/input.template.html
@@ -170,6 +170,16 @@
             heading="Modes"
             [content]="example5"
         >
+            <tui-notification>
+                Custom mode is set with
+                <a
+                    tuiLink
+                    [routerLink]="modeDocPage"
+                >
+                    <code>tuiMode</code>
+                </a>
+                directive
+            </tui-notification>
             <tui-input-example-5 />
         </tui-doc-example>
 

diff --git a/projects/demo/src/modules/components/theme-night/theme-night.component.ts b/projects/demo/src/modules/components/theme-night/theme-night.component.ts
@@ -1,12 +1,15 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {DemoRoute} from '@demo/routes';
 
 @Component({
     selector: 'example-tui-theme-night',
     templateUrl: './theme-night.template.html',
     changeDetection,
 })
 export class ExampleTuiThemeNightComponent {
+    protected modeDocPage = `/${DemoRoute.Mode}`;
+
     protected readonly exampleModule = import('./examples/import/import-module.md?raw');
     protected readonly exampleComponent = import(
         './examples/import/insert-component.md?raw'

diff --git a/projects/demo/src/modules/components/theme-night/theme-night.template.html b/projects/demo/src/modules/components/theme-night/theme-night.template.html
@@ -15,8 +15,8 @@
             </a>
             that you can use together with
             <a
-                routerLink="/directives/mode"
                 tuiLink
+                [routerLink]="modeDocPage"
             >
                 <code>Mode</code>
             </a>

diff --git a/projects/demo/src/modules/customization/wrapper/index.html b/projects/demo/src/modules/customization/wrapper/index.html
@@ -30,8 +30,8 @@
         <code>[data-mode='onLight']</code>
         selectors to account for
         <a
-            routerLink="/directives/mode"
             tuiLink
+            [routerLink]="modeDocPage"
         >
             Mode
         </a>

diff --git a/projects/demo/src/modules/customization/wrapper/index.ts b/projects/demo/src/modules/customization/wrapper/index.ts
@@ -3,6 +3,7 @@ import {NgForOf} from '@angular/common';
 import {Component, ViewEncapsulation} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {DemoRoute} from '@demo/routes';
 import {
     TuiDocCopyModule,
     type TuiDocExample,
@@ -30,6 +31,8 @@ import {TuiWrapperExample1} from './examples/1';
     changeDetection,
 })
 export default class PageComponent {
+    protected modeDocPage = `/${DemoRoute.Mode}`;
+
     protected readonly example1: TuiDocExample = {
         HTML: import('./examples/1/index.html?raw'),
         LESS: import('./examples/1/index.less?raw'),