From 016eb1519dd11f28caead482e432787524b4362f Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Wed, 25 Sep 2024 17:55:44 +0300
Subject: [PATCH] chore(demo): move version manager to header

---
 projects/demo/src/modules/app/app.style.less  |  5 ----
 .../demo/src/modules/app/app.template.html    | 10 ++------
 .../version-manager.component.ts              | 17 ++++----------
 .../version-manager.template.html             | 23 +++++++++++++------
 .../app/version-manager/versions.constants.ts |  2 +-
 5 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/projects/demo/src/modules/app/app.style.less b/projects/demo/src/modules/app/app.style.less
index 0cc177ea8fc38..d6dbe4ad1e388 100644
--- a/projects/demo/src/modules/app/app.style.less
+++ b/projects/demo/src/modules/app/app.style.less
@@ -32,11 +32,6 @@ app {
     }
 }
 
-.app-selects {
-    padding: 0.25rem 0.125rem 0.5rem 0.75rem;
-    box-shadow: 0 -1px var(--tui-border-normal);
-}
-
 @media @tui-mobile {
     .app-link {
         display: none;
diff --git a/projects/demo/src/modules/app/app.template.html b/projects/demo/src/modules/app/app.template.html
index 4654fb05c5e5d..d2c05f8531d3c 100644
--- a/projects/demo/src/modules/app/app.template.html
+++ b/projects/demo/src/modules/app/app.template.html
@@ -12,6 +12,8 @@
                 class="app-christmas"
             />
 
+            <version-manager />
+
             <tui-algolia-search />
 
             <button
@@ -113,14 +115,6 @@
                 [href]="playground"
             ></a>
         </div>
-        <div
-            ngProjectAs="tuiDocNavigation"
-            tuiTextfieldAppearance="none"
-            tuiTextfieldSize="m"
-            class="app-selects"
-        >
-            <version-manager>Version</version-manager>
-        </div>
         <tui-sheets-host ngProjectAs="tuiOverContent" />
         <custom-host ngProjectAs="tuiOverContent" />
     </tui-doc-main>
diff --git a/projects/demo/src/modules/app/version-manager/version-manager.component.ts b/projects/demo/src/modules/app/version-manager/version-manager.component.ts
index 2fc2a6d4dca5c..b3db8ebc44dc8 100644
--- a/projects/demo/src/modules/app/version-manager/version-manager.component.ts
+++ b/projects/demo/src/modules/app/version-manager/version-manager.component.ts
@@ -1,11 +1,11 @@
-import {NgForOf, NgIf} from '@angular/common';
+import {NgForOf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {Router} from '@angular/router';
 import {WA_LOCATION} from '@ng-web-apis/common';
 import {tuiPure} from '@taiga-ui/cdk';
-import {TuiDataList} from '@taiga-ui/core';
-import {TuiStringifyContentPipe, TuiStringifyPipe} from '@taiga-ui/kit';
+import {TuiButton, TuiDataList} from '@taiga-ui/core';
+import {TuiChevron} from '@taiga-ui/kit';
 import {TuiSelectModule} from '@taiga-ui/legacy';
 
 import {TUI_SELECTED_VERSION_META} from './version-manager.providers';
@@ -15,15 +15,7 @@ import {TUI_VERSIONS_META_OPTIONS} from './versions.constants';
 @Component({
     standalone: true,
     selector: 'version-manager',
-    imports: [
-        FormsModule,
-        NgForOf,
-        NgIf,
-        TuiDataList,
-        TuiSelectModule,
-        TuiStringifyContentPipe,
-        TuiStringifyPipe,
-    ],
+    imports: [FormsModule, NgForOf, TuiButton, TuiChevron, TuiDataList, TuiSelectModule],
     templateUrl: './version-manager.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -32,6 +24,7 @@ export class VersionManager {
     private readonly router = inject(Router);
     protected readonly initialVersion = inject(TUI_SELECTED_VERSION_META);
     protected readonly versions = inject(TUI_VERSIONS_META_OPTIONS);
+    protected open = false;
 
     @tuiPure
     protected getVersionHref(version: TuiVersionMeta): string {
diff --git a/projects/demo/src/modules/app/version-manager/version-manager.template.html b/projects/demo/src/modules/app/version-manager/version-manager.template.html
index 0bb7eb38ce6e9..4f3d239b61ca4 100644
--- a/projects/demo/src/modules/app/version-manager/version-manager.template.html
+++ b/projects/demo/src/modules/app/version-manager/version-manager.template.html
@@ -1,10 +1,19 @@
-<tui-select
-    *ngIf="versions.length"
-    [ngModel]="initialVersion"
-    [valueContent]="'label' | tuiStringify | tuiStringifyContent"
+<button
+    appearance="whiteblock"
+    size="s"
+    tuiButton
+    tuiChevron
+    type="button"
+    [tuiDropdown]="content"
+    [tuiDropdownLimitWidth]="'fixed'"
+    [tuiDropdownMaxHeight]="700"
+    [(tuiDropdownOpen)]="open"
 >
-    <ng-content />
-    <tui-data-list *tuiDataList>
+    {{ initialVersion?.label }}
+</button>
+
+<ng-template #content>
+    <tui-data-list size="s">
         <a
             *ngFor="let version of versions"
             tuiOption
@@ -14,4 +23,4 @@
             {{ version.label }}
         </a>
     </tui-data-list>
-</tui-select>
+</ng-template>
diff --git a/projects/demo/src/modules/app/version-manager/versions.constants.ts b/projects/demo/src/modules/app/version-manager/versions.constants.ts
index 1384650f5eb4e..a96fdf98de233 100644
--- a/projects/demo/src/modules/app/version-manager/versions.constants.ts
+++ b/projects/demo/src/modules/app/version-manager/versions.constants.ts
@@ -15,7 +15,7 @@ export const TUI_VERSIONS_META: readonly TuiVersionMeta[] = [
         title: `v${TUI_CURRENT_MAJOR_VERSION}.next`,
     },
     {
-        label: `latest (v${TUI_VERSION})`,
+        label: `v${TUI_VERSION}`,
         baseHref: '/',
         title: `v${TUI_CURRENT_MAJOR_VERSION}`,
     },