taiga-family · waterplea · Jun 28, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 28, 2024
@@ -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;

@@ -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';

@@ -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));
 

@@ -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>;
+describe('TuiDocLanguageSwitcher', () => {
+ 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();
  });

@@ -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;

@@ -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,

@@ -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 }}

@@ -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);
+ }
+}
@@ -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,

@@ -1,2 +1 @@
-export * from './scroll-into-view/scroll-into-view.directive';
 export * from './text-code/text-code.directive';
@@ -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 = '';
 }
@@ -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';

@@ -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,

@@ -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);
 

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

@@ -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(

@@ -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,

@@ -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" />

@@ -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

@@ -215,7 +215,7 @@
  [(documentationPropertyValue)]="strict"
  >
  Value must only be an item of suggestions&nbsp;
- <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>

@@ -189,7 +189,7 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
  [(documentationPropertyValue)]="closeable"
  >
  Show a cross to close dialog. Pass
- <code tuiText="Observable<boolean>"></code>
+ <code tuiDocText="Observable<boolean>"></code>
  if you want prevent closing, for example, with a confirmation prompt.
  </ng-template>
  <ng-template
@@ -198,7 +198,7 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
  [(documentationPropertyValue)]="dismissible"
  >
  Dialog can be canceled with Escape key or with a click outside. Pass
- <code tuiText="Observable<boolean>"></code>
+ <code tuiDocText="Observable<boolean>"></code>
  if you want prevent closing, for example, with a confirmation prompt.
  </ng-template>
  <ng-template
@@ -207,7 +207,7 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
  [(documentationPropertyValue)]="data"
  >
  Input data for dialog, type:
- <code tuiText="<T>"></code>
+ <code tuiDocText="<T>"></code>
  </ng-template>
  <ng-template
  documentationPropertyName="header"
@@ -273,7 +273,7 @@ <h2 *ngIf="size === 'xl'">Template can be customized</h2>
  in it. Dialog will provide this token with some useful options:
  <code>$implicit</code>
  with
- <code tuiText="Observer<O>"></code>
+ <code tuiDocText="Observer<O>"></code>
  and
  <code>completeWith</code>
  hook to call