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