From 34e2bd2e06feeed564652a23ade315ee802cd89f Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Tue, 24 Sep 2024 14:31:18 +0300
Subject: [PATCH] feat(addon-doc): move language switcher to page from header

---
 .../components/language-switcher/index.html   | 69 +++++++++++--------
 .../components/language-switcher/index.less   |  4 ++
 .../components/language-switcher/index.ts     |  9 ++-
 .../components/page/page.component.ts         |  4 +-
 .../addon-doc/components/page/page.style.less | 12 +++-
 .../components/page/page.template.html        | 22 ++++--
 .../demo/src/modules/app/app.component.ts     |  2 -
 .../demo/src/modules/app/app.template.html    |  2 -
 8 files changed, 76 insertions(+), 48 deletions(-)

diff --git a/projects/addon-doc/components/language-switcher/index.html b/projects/addon-doc/components/language-switcher/index.html
index 434c9fd6ec75a..03440d68943b1 100644
--- a/projects/addon-doc/components/language-switcher/index.html
+++ b/projects/addon-doc/components/language-switcher/index.html
@@ -1,29 +1,40 @@
-<button
-    appearance="whiteblock"
-    iconStart="@tui.languages"
-    size="s"
-    tuiButtonSelect
-    tuiIconButton
-    type="button"
-    [formControl]="language"
->
-    Language
-    <tui-data-list *tuiTextfieldDropdown>
-        <tui-opt-group label="Language of components">
-            <button
-                *ngFor="let name of names"
-                tuiOption
-                type="button"
-                [value]="name | titlecase"
-                (click)="setLang(name)"
-            >
-                <img
-                    alt=""
-                    class="t-flag"
-                    [src]="flags.get(name) | tuiFlag"
-                />
-                {{ name | titlecase }}
-            </button>
-        </tui-opt-group>
-    </tui-data-list>
-</button>
+<tui-badged-content>
+    <img
+        *ngIf="flags.get(language.value ?? '') | tuiFlag as flag"
+        alt=""
+        size="s"
+        tuiBadge
+        tuiSlot="bottom"
+        [src]="flag"
+    />
+
+    <button
+        appearance="whiteblock"
+        iconStart="@tui.languages"
+        size="s"
+        tuiButtonSelect
+        tuiIconButton
+        type="button"
+        [formControl]="language"
+    >
+        Language
+        <tui-data-list *tuiTextfieldDropdown>
+            <tui-opt-group label="Language of components">
+                <button
+                    *ngFor="let name of names"
+                    tuiOption
+                    type="button"
+                    [value]="name | titlecase"
+                    (click)="setLang(name)"
+                >
+                    <img
+                        alt=""
+                        class="t-flag"
+                        [src]="flags.get(name) | tuiFlag"
+                    />
+                    {{ name | titlecase }}
+                </button>
+            </tui-opt-group>
+        </tui-data-list>
+    </button>
+</tui-badged-content>
diff --git a/projects/addon-doc/components/language-switcher/index.less b/projects/addon-doc/components/language-switcher/index.less
index 367d96cc7aa21..4d16fb4f60896 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 054e4e6c2f000..83164619210c6 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 2e471cf5bb586..cb9b64762deec 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 c337f91c2fa59..ade8a473c2b8e 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 ae13afb10cad4..0363fa46db919 100644
--- a/projects/addon-doc/components/page/page.template.html
+++ b/projects/addon-doc/components/page/page.template.html
@@ -47,13 +47,21 @@ <h1 class="t-title">
             </ng-container>
         </ng-container>
     </tui-tabs-with-more>
-    <tui-doc-source-code
-        class="t-source-code"
-        [header]="header"
-        [package]="package"
-        [path]="path"
-        [type]="type"
-    />
+
+    <div
+        *ngIf="package || path || type"
+        class="t-right-side"
+    >
+        <tui-doc-source-code
+            class="t-source-code"
+            [header]="header"
+            [package]="package"
+            [path]="path"
+            [type]="type"
+        />
+
+        <tui-doc-language-switcher />
+    </div>
 </header>
 <div class="t-content">
     <ng-content />
diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts
index e764765bb9866..9aee7a5297c32 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 df9f562ee5383..4654fb05c5e5d 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"
             />
 
-            <tui-doc-language-switcher />
-
             <tui-algolia-search />
 
             <button