refactor: add prefixes for doc components

projects/addon-doc/components/demo/index.ts

@@ -15,7 +15,7 @@ import type {AbstractControl} from '@angular/forms';
 import {FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import type {Params, UrlTree} from '@angular/router';
 import {UrlSerializer} from '@angular/router';
-import {TuiThemeDarkService} from '@taiga-ui/addon-doc/services';
+import {TuiDocThemeDarkService} from '@taiga-ui/addon-doc/services';
 import {TUI_DOC_DEMO_TEXTS, TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
 import type {TuiDemoParams} from '@taiga-ui/addon-doc/types';
 import {tuiCleanObject, tuiCoerceValueIsTrue} from '@taiga-ui/addon-doc/utils';
@@ -77,7 +77,7 @@ export class TuiDocDemo implements OnInit {
     protected readonly template: TemplateRef<Record<string, unknown>> | null = null;
 
     protected dark = tuiCoerceValueIsTrue(
-        this.params.darkMode ?? inject(TuiThemeDarkService).value,
+        this.params.darkMode ?? inject(TuiDocThemeDarkService).value,
     );
 
     protected testForm?: FormGroup;

projects/addon-doc/components/index.ts

@@ -21,6 +21,7 @@ export * from './internal/source-code/source-code.component';
 export * from './language-switcher';
 export * from './main/main.component';
 export * from './navigation/navigation.component';
+export * from './navigation/navigation.providers';
 export * from './page/page.component';
 export * from './page/page.providers';
 export * from './page/page-tab.directive';

projects/addon-doc/components/language-switcher/index.ts

@@ -10,7 +10,7 @@ import {TuiSelectModule} from '@taiga-ui/legacy/components/select';
 
 @Component({
     standalone: true,
-    selector: 'tui-language-switcher',
+    selector: 'tui-doc-language-switcher',
     imports: [
         ReactiveFormsModule,
         TuiDataList,
@@ -23,7 +23,7 @@ import {TuiSelectModule} from '@taiga-ui/legacy/components/select';
     styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TuiLanguageSwitcher {
+export class TuiDocLanguageSwitcher {
     protected readonly switcher = inject(TuiLanguageSwitcherService);
     protected readonly language = new FormControl(capitalize(this.switcher.language));
 

projects/addon-doc/components/language-switcher/tests/language-switcher.component.spec.ts

@@ -1,27 +1,27 @@
 import type {ComponentFixture} from '@angular/core/testing';
 import {TestBed} from '@angular/core/testing';
 import {ReactiveFormsModule} from '@angular/forms';
-import {TuiLanguageSwitcher} from '@taiga-ui/addon-doc';
+import {TuiDocLanguageSwitcher} from '@taiga-ui/addon-doc';
 import {TuiDataList, TuiFlagPipe} from '@taiga-ui/core';
 import {TuiLanguageSwitcherService} from '@taiga-ui/i18n';
 import {TuiSelectModule} from '@taiga-ui/legacy';
 
 describe('TuiLanguageSwitcherComponent', () => {
-    let component: TuiLanguageSwitcher;
-    let fixture: ComponentFixture<TuiLanguageSwitcher>;
+    let component: TuiDocLanguageSwitcher;
+    let fixture: ComponentFixture<TuiDocLanguageSwitcher>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [
                 ReactiveFormsModule,
                 TuiSelectModule,
                 TuiDataList,
-                TuiLanguageSwitcher,
+                TuiDocLanguageSwitcher,
             ],
             providers: [TuiLanguageSwitcherService],
         }).compileComponents();
 
-        fixture = TestBed.createComponent(TuiLanguageSwitcher);
+        fixture = TestBed.createComponent(TuiDocLanguageSwitcher);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

projects/addon-doc/components/main/main.component.ts

@@ -6,7 +6,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import {RouterOutlet} from '@angular/router';
-import {TuiThemeDarkService} from '@taiga-ui/addon-doc/services';
+import {TuiDocThemeDarkService} from '@taiga-ui/addon-doc/services';
 import {TUI_DOC_ICONS} from '@taiga-ui/addon-doc/tokens';
 import {TuiSwipeService} from '@taiga-ui/cdk/directives/swipe';
 import {TuiButton} from '@taiga-ui/core/components/button';
@@ -37,7 +37,7 @@ import {TuiDocNavigation} from '../navigation/navigation.component';
 export class TuiDocMain {
     private readonly icons = inject(TUI_DOC_ICONS);
 
-    protected readonly dark$ = inject(TuiThemeDarkService);
+    protected readonly dark$ = inject(TuiDocThemeDarkService);
 
     protected get icon(): string {
         return this.dark$.value ? this.icons.light : this.icons.dark;

projects/addon-doc/components/navigation/navigation.component.ts

@@ -16,7 +16,6 @@ import {
     RouterLinkActive,
     Scroll,
 } from '@angular/router';
-import {TuiScrollIntoViewLink} from '@taiga-ui/addon-doc/directives';
 import {
     TUI_DOC_ICONS,
     TUI_DOC_PAGE_LOADED,
@@ -48,6 +47,7 @@ import {
     NAVIGATION_PROVIDERS,
     NAVIGATION_TITLE,
 } from './navigation.providers';
+import {TuiDocScrollIntoViewLink} from './scroll-into-view.directive';
 
 @Component({
     standalone: true,
@@ -69,7 +69,7 @@ import {
         TuiAccordion,
         NgTemplateOutlet,
         TuiLink,
-        TuiScrollIntoViewLink,
+        TuiDocScrollIntoViewLink,
         RouterLinkActive,
         TuiExpand,
         TuiTextfieldControllerModule,

projects/addon-doc/components/navigation/navigation.template.html

@@ -119,7 +119,7 @@
                         [attr.rel]="item.rel"
                         [routerLink]="item.route"
                         [target]="item.target || '_self'"
-                        [tuiScrollIntoViewLink]="isActive(item.route)"
+                        [tuiDocScrollIntoViewLink]="isActive(item.route)"
                         (click)="closeMenu()"
                     >
                         {{ item.title }}
@@ -188,7 +188,7 @@
                                         [fragment]="subPage.fragment"
                                         [routerLink]="subPage.route"
                                         [target]="subPage.target || '_self'"
-                                        [tuiScrollIntoViewLink]="isActive(subPage.route)"
+                                        [tuiDocScrollIntoViewLink]="isActive(subPage.route)"
                                         (click)="closeMenu()"
                                     >
                                         {{ subPage.title }}

projects/addon-doc/components/navigation/scroll-into-view.directive.ts

@@ -0,0 +1,29 @@
+import {Directive, inject, Input} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc/tokens';
+import {tuiGetElementObscures, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
+import {debounceTime, filter, ReplaySubject, switchMap} from 'rxjs';
+
+@Directive({
+    standalone: true,
+    selector: '[tuiDocScrollIntoViewLink]',
+})
+export class TuiDocScrollIntoViewLink {
+    private readonly scroll$ = new ReplaySubject<boolean>(1);
+    private readonly el = tuiInjectElement();
+
+    protected readonly sub = inject(TUI_DOC_PAGE_LOADED)
+        .pipe(
+            filter(Boolean),
+            switchMap(() => this.scroll$),
+            debounceTime(750),
+            filter(shallWe => shallWe && !!tuiGetElementObscures(this.el)),
+            takeUntilDestroyed(),
+        )
+        .subscribe(() => this.el.scrollIntoView());
+
+    @Input()
+    public set TuiDocScrollIntoViewLink(shallWe: boolean) {
+        this.scroll$.next(shallWe);
+    }
+}

projects/addon-doc/components/theme-switcher/theme-switcher.component.ts

@@ -21,7 +21,7 @@ export function tuiDocThemeProvider(): FactoryProvider {
 
 @Component({
     standalone: true,
-    selector: 'tui-theme-switcher',
+    selector: 'tui-doc-theme-switcher',
     imports: [NgForOf, FormsModule, TuiDataList, TuiSelectModule],
     templateUrl: './theme-switcher.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/addon-doc/directives/index.ts

@@ -1,2 +1 @@
-export * from './scroll-into-view/scroll-into-view.directive';
 export * from './text-code/text-code.directive';

projects/addon-doc/directives/text-code/text-code.directive.ts

@@ -2,10 +2,10 @@ import {Directive, HostBinding, Input} from '@angular/core';
 
 @Directive({
     standalone: true,
-    selector: 'code[tuiText]',
+    selector: 'code[tuiDocText]',
 })
-export class TuiTextCode {
-    @Input('tuiText')
+export class TuiDocText {
+    @Input('tuiDocText')
     @HostBinding('textContent')
     public code = '';
 }

projects/addon-doc/index.ts

@@ -13,7 +13,7 @@ import {
     TuiDocTab,
     TuiDocTypeReferencePipe,
 } from '@taiga-ui/addon-doc/components';
-import {TuiTextCode} from '@taiga-ui/addon-doc/directives';
+import {TuiDocText} from '@taiga-ui/addon-doc/directives';
 
 export const TuiAddonDoc = [
     TuiDocCopy,
@@ -29,7 +29,7 @@ export const TuiAddonDoc = [
     TuiDocPageTabConnector,
     TuiDocNavigation,
     TuiDocMain,
-    TuiTextCode,
+    TuiDocText,
 ] as const;
 
 export * from '@taiga-ui/addon-doc/components';

projects/addon-doc/pipes/markdown/markdown.pipe.ts

@@ -9,9 +9,9 @@ import {identity, map, of, switchMap} from 'rxjs';
 
 @Pipe({
     standalone: true,
-    name: 'tuiMarkdown',
+    name: 'tuiDocMarkdown',
 })
-export class TuiMarkdownPipe implements PipeTransform {
+export class TuiDocMarkdownPipe implements PipeTransform {
     public transform(
         value: TuiRawLoaderContent,
         mapper: TuiStringHandler<string> = identity,

projects/addon-doc/services/theme-dark.service.ts

@@ -10,7 +10,7 @@ export const TUI_DARK_THEME = tuiCreateToken(false);
 @Injectable({
     providedIn: 'root',
 })
-export class TuiThemeDarkService extends BehaviorSubject<boolean> {
+export class TuiDocThemeDarkService extends BehaviorSubject<boolean> {
     private readonly storage = inject(LOCAL_STORAGE);
     private readonly key = inject(TUI_DARK_THEME_KEY);
 

projects/cdk/schematics/ng-update/v3/constants/templates.ts

@@ -654,7 +654,7 @@ export const ATTR_TO_DIRECTIVE: ReplacementAttributeToDirective[] = [
     {
         componentSelector: '*',
         inputProperty: 'scrollIntoView',
-        directive: 'tuiScrollIntoViewLink',
+        directive: 'TuiDocScrollIntoViewLink',
         directiveModule: {
             name: 'TuiScrollIntoViewLinkModule',
             moduleSpecifier: '@taiga-ui/addon-doc',

projects/cdk/schematics/ng-update/v3/constants/types.ts

@@ -124,7 +124,7 @@ export const TYPES_TO_RENAME: readonly ReplacementType[] = [
     },
     {
         from: 'ScrollIntoViewDirective',
-        to: 'TuiScrollIntoViewLink',
+        to: 'TuiDocScrollIntoViewLink',
         moduleSpecifier: ['@taiga-ui/addon-doc'],
     },
     {

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -1225,7 +1225,7 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
             moduleSpecifier: '@taiga-ui/addon-doc',
         },
         to: {
-            name: 'TuiScrollIntoViewLink',
+            name: 'TuiDocScrollIntoViewLink',
             moduleSpecifier: '@taiga-ui/addon-doc',
         },
     },
@@ -1235,7 +1235,7 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
             moduleSpecifier: '@taiga-ui/addon-doc',
         },
         to: {
-            name: 'TuiTextCode',
+            name: 'TuiDocText',
             moduleSpecifier: '@taiga-ui/addon-doc',
         },
     },

projects/demo-playwright/utils/goto.ts

@@ -72,7 +72,7 @@ export async function tuiGoto(
     }
 
     if (hideLanguageSwitcher) {
-        await tuiRemoveElement(page.locator('tui-language-switcher'));
+        await tuiRemoveElement(page.locator('tui-doc-language-switcher'));
     }
 
     expect(

projects/demo/src/modules/app/app.component.ts

@@ -7,7 +7,7 @@ import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
 import {LOCAL_STORAGE} from '@ng-web-apis/common';
 import {ResizeObserverService} from '@ng-web-apis/resize-observer';
-import {TuiLanguageSwitcher} from '@taiga-ui/addon-doc';
+import {TuiDocLanguageSwitcher} from '@taiga-ui/addon-doc';
 import {TuiSheetModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {distinctUntilChanged, filter, map} from 'rxjs';
 
@@ -22,7 +22,7 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
     selector: 'app',
     imports: [
         TuiDemo,
-        TuiLanguageSwitcher,
+        TuiDocLanguageSwitcher,
         VersionManager,
         CustomHost,
         TuiTextfieldControllerModule,

projects/demo/src/modules/app/app.template.html

@@ -57,7 +57,7 @@
             tuiTextfieldSize="m"
             class="app-selects"
         >
-            <tui-language-switcher>Language of components</tui-language-switcher>
+            <tui-doc-language-switcher>Language of components</tui-doc-language-switcher>
             <version-manager>Version</version-manager>
         </div>
         <tui-sheets-host ngProjectAs="tuiOverContent" />

projects/demo/src/modules/components/alert/index.html

@@ -78,7 +78,7 @@
                 [(documentationPropertyValue)]="data"
             >
                 Input data of notification, type:
-                <code tuiText="<I>"></code>
+                <code tuiDocText="<I>"></code>
             </ng-template>
             <ng-template
                 documentationPropertyName="autoClose"
@@ -138,7 +138,7 @@
                     You can also customize notification logic with a component. Inject
                     <code>POLYMORPHEUS_CONTEXT</code>
                     into the component to get context input data and to output results. It has the following interface:
-                    <code tuiText="TuiPopover<TuiAlertOptions<I>, O>"></code>
+                    <code tuiDocText="TuiPopover<TuiAlertOptions<I>, O>"></code>
                     , where
                     <code>O</code>
                     is output data type and

projects/demo/src/modules/components/combo-box/index.html

@@ -215,7 +215,7 @@
                 [(documentationPropertyValue)]="strict"
             >
                 Value must only be an item of suggestions 
-                <code tuiText="<T>"></code>
+                <code tuiDocText="<T>"></code>
 
                 <p>
                     <strong>
@@ -226,7 +226,7 @@
                         can handle
                         <code>string</code>
                         value, as well as
-                        <code tuiText="<T>"></code>
+                        <code tuiDocText="<T>"></code>
                     </strong>
                 </p>
             </ng-template>