diff --git a/projects/addon-doc/components/language-switcher/index.html b/projects/addon-doc/components/language-switcher/index.html
index 434c9fd6ec75..03440d68943b 100644
--- a/projects/addon-doc/components/language-switcher/index.html
+++ b/projects/addon-doc/components/language-switcher/index.html
@@ -1,29 +1,40 @@
-
+
+
+
+
+ Language
+
+
+
+
+ {{ name | titlecase }}
+
+
+
+
+
diff --git a/projects/addon-doc/components/language-switcher/index.less b/projects/addon-doc/components/language-switcher/index.less
index 367d96cc7aa2..4d16fb4f6089 100644
--- a/projects/addon-doc/components/language-switcher/index.less
+++ b/projects/addon-doc/components/language-switcher/index.less
@@ -9,3 +9,7 @@
justify-content: flex-start;
gap: 0.5rem;
}
+
+img {
+ box-shadow: inset 0 0 0 1px var(--tui-border-normal);
+}
diff --git a/projects/addon-doc/components/language-switcher/index.ts b/projects/addon-doc/components/language-switcher/index.ts
index 054e4e6c2f00..83164619210c 100644
--- a/projects/addon-doc/components/language-switcher/index.ts
+++ b/projects/addon-doc/components/language-switcher/index.ts
@@ -1,14 +1,15 @@
-import {NgForOf, TitleCasePipe} from '@angular/common';
+import {NgForOf, NgIf, TitleCasePipe} from '@angular/common';
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiButton} from '@taiga-ui/core/components/button';
import {TuiDataList} from '@taiga-ui/core/components/data-list';
import {tuiScrollbarOptionsProvider} from '@taiga-ui/core/components/scrollbar';
import {TuiTextfield} from '@taiga-ui/core/components/textfield';
-import {TuiDropdown} from '@taiga-ui/core/directives/dropdown';
import {TuiFlagPipe} from '@taiga-ui/core/pipes/flag';
import type {TuiCountryIsoCode, TuiLanguageName} from '@taiga-ui/i18n/types';
import {TuiLanguageSwitcherService} from '@taiga-ui/i18n/utils';
+import {TuiBadge} from '@taiga-ui/kit/components/badge';
+import {TuiBadgedContent} from '@taiga-ui/kit/components/badged-content';
import {TuiButtonSelect} from '@taiga-ui/kit/directives/button-select';
@Component({
@@ -16,12 +17,14 @@ import {TuiButtonSelect} from '@taiga-ui/kit/directives/button-select';
selector: 'tui-doc-language-switcher',
imports: [
NgForOf,
+ NgIf,
ReactiveFormsModule,
TitleCasePipe,
+ TuiBadge,
+ TuiBadgedContent,
TuiButton,
TuiButtonSelect,
TuiDataList,
- TuiDropdown,
TuiFlagPipe,
TuiTextfield,
],
diff --git a/projects/addon-doc/components/page/page.component.ts b/projects/addon-doc/components/page/page.component.ts
index 2e471cf5bb58..cb9b64762dee 100644
--- a/projects/addon-doc/components/page/page.component.ts
+++ b/projects/addon-doc/components/page/page.component.ts
@@ -10,7 +10,6 @@ import {
import {RouterLink, RouterLinkActive} from '@angular/router';
import {TUI_DOC_DEFAULT_TABS} from '@taiga-ui/addon-doc/tokens';
import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
-import {TuiItem} from '@taiga-ui/cdk/directives/item';
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';
@@ -18,6 +17,7 @@ import {TuiTabs} from '@taiga-ui/kit/components/tabs';
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 {TuiDocPageTabConnector} from './page-tab.directive';
@@ -32,9 +32,9 @@ import {TuiDocPageTabConnector} from './page-tab.directive';
RouterLinkActive,
TuiAutoColorPipe,
TuiChip,
+ TuiDocLanguageSwitcher,
TuiDocSeeAlso,
TuiDocSourceCode,
- TuiItem,
TuiReplacePipe,
TuiTabs,
],
diff --git a/projects/addon-doc/components/page/page.style.less b/projects/addon-doc/components/page/page.style.less
index c337f91c2fa5..ade8a473c2b8 100644
--- a/projects/addon-doc/components/page/page.style.less
+++ b/projects/addon-doc/components/page/page.style.less
@@ -82,8 +82,14 @@
}
}
-.t-source-code {
- align-self: flex-end;
- line-height: 2.75rem;
+.t-right-side {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ align-self: center;
margin-left: auto;
}
+
+.t-source-code {
+ block-size: 3.125rem;
+}
diff --git a/projects/addon-doc/components/page/page.template.html b/projects/addon-doc/components/page/page.template.html
index ae13afb10cad..0363fa46db91 100644
--- a/projects/addon-doc/components/page/page.template.html
+++ b/projects/addon-doc/components/page/page.template.html
@@ -47,13 +47,21 @@
-
+
+
+
+
+
+
diff --git a/projects/demo-playwright/tests/addon-doc/navigation.spec.ts b/projects/demo-playwright/tests/addon-doc/navigation.spec.ts
index bf7b692801c9..889e2e4d7929 100644
--- a/projects/demo-playwright/tests/addon-doc/navigation.spec.ts
+++ b/projects/demo-playwright/tests/addon-doc/navigation.spec.ts
@@ -8,7 +8,6 @@ test.describe('Navigation', () => {
test('getting started / [light mode]', async ({page}) => {
await tuiGoto(page, DemoRoute.GettingStarted, {
hideHeader: false,
- hideLanguageSwitcher: true,
hideVersionManager: true,
});
const sideNavigation = page.locator('tui-doc-navigation');
@@ -24,7 +23,6 @@ test.describe('Navigation', () => {
await tuiGoto(page, DemoRoute.GettingStarted, {
hideHeader: false,
enableNightMode: true,
- hideLanguageSwitcher: true,
hideVersionManager: true,
});
const sideNavigation = page.locator('tui-doc-navigation');
diff --git a/projects/demo-playwright/utils/goto.ts b/projects/demo-playwright/utils/goto.ts
index b488334289b6..070d9216f879 100644
--- a/projects/demo-playwright/utils/goto.ts
+++ b/projects/demo-playwright/utils/goto.ts
@@ -12,7 +12,6 @@ interface TuiGotoOptions extends NonNullable
[1]> {
hideHeader?: boolean;
enableNightMode?: boolean;
hideVersionManager?: boolean;
- hideLanguageSwitcher?: boolean;
}
export async function tuiGoto(
@@ -23,7 +22,6 @@ export async function tuiGoto(
hideHeader = true,
enableNightMode = false,
hideVersionManager = false,
- hideLanguageSwitcher = false,
language,
...playwrightGotoOptions
}: TuiGotoOptions = {},
@@ -71,10 +69,6 @@ export async function tuiGoto(
await tuiRemoveElement(page.locator('version-manager'));
}
- if (hideLanguageSwitcher) {
- await tuiRemoveElement(page.locator('tui-doc-language-switcher'));
- }
-
expect(
await page.evaluate("matchMedia('(prefers-reduced-motion)').matches"),
).toBeTruthy();
diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts
index e764765bb986..9aee7a5297c3 100644
--- a/projects/demo/src/modules/app/app.component.ts
+++ b/projects/demo/src/modules/app/app.component.ts
@@ -8,7 +8,6 @@ import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {WA_LOCAL_STORAGE} from '@ng-web-apis/common';
import {ResizeObserverService} from '@ng-web-apis/resize-observer';
-import {TuiDocLanguageSwitcher} from '@taiga-ui/addon-doc';
import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';
import {TuiSheetModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
import {distinctUntilChanged, filter, map, startWith} from 'rxjs';
@@ -29,7 +28,6 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
TuiButton,
TuiDataList,
TuiDemo,
- TuiDocLanguageSwitcher,
TuiDropdown,
TuiSheetModule,
TuiTextfieldControllerModule,
diff --git a/projects/demo/src/modules/app/app.template.html b/projects/demo/src/modules/app/app.template.html
index df9f562ee538..4654fb05c5e5 100644
--- a/projects/demo/src/modules/app/app.template.html
+++ b/projects/demo/src/modules/app/app.template.html
@@ -12,8 +12,6 @@
class="app-christmas"
/>
-
-