From 8602e4e9b40bbb7ef5305430a13ecd71caf7b3ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= <omaxphp@yandex.ru>
Date: Mon, 18 Nov 2024 16:53:32 +0300
Subject: [PATCH] feat(addon-doc): use only one property on route for expose
 input prop value (#9774)

---
 ...umentation-property-connector.directive.ts | 29 +++++++++++++------
 .../tests/core/hint/hint.pw.spec.ts           |  5 ++--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts b/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
index a595014a1052..bf4f836fc6ed 100644
--- a/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
+++ b/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
@@ -12,7 +12,7 @@ import {
 import type {Params} from '@angular/router';
 import {ActivatedRoute, UrlSerializer} from '@angular/router';
 import {TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
-import {tuiCoerceValue, tuiInspectAny} from '@taiga-ui/addon-doc/utils';
+import {tuiCleanObject, tuiCoerceValue, tuiInspectAny} from '@taiga-ui/addon-doc/utils';
 import {tuiIsNumber} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiAlertService} from '@taiga-ui/core/components/alert';
 import {Subject} from 'rxjs';
@@ -132,22 +132,33 @@ export class TuiDocDocumentationPropertyConnector<T> implements OnInit, OnChange
         this.onValueChange(value as T);
     }
 
-    private setQueryParam(value: T | boolean | number | string | null): void {
+    private setQueryParam(value: unknown): void {
         const tree = this.urlSerializer.parse(this.locationRef.path());
-
         const isValueAvailableByKey = value instanceof Object;
+        const name = this.documentationPropertyName;
+        const nameWithSuffix = `${name}${SERIALIZED_SUFFIX}`;
+
         const computedValue =
             isValueAvailableByKey && this.documentationPropertyValues
                 ? this.documentationPropertyValues.indexOf(value as T)
                 : value;
 
-        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
-        const propName = this.documentationPropertyName + suffix;
-
-        tree.queryParams = {
+        tree.queryParams = tuiCleanObject({
             ...tree.queryParams,
-            [propName]: computedValue,
-        };
+            /**
+             * Caretaker note: reset previous conflicted param in route
+             * issue: https://github.com/taiga-family/taiga-ui/issues/9764
+             */
+            ...(isValueAvailableByKey
+                ? {
+                      [nameWithSuffix]: computedValue,
+                      [name]: undefined,
+                  }
+                : {
+                      [nameWithSuffix]: undefined,
+                      [name]: computedValue,
+                  }),
+        });
 
         this.locationRef.go(this.urlStateHandler(tree));
     }
diff --git a/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts b/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts
index 727e39675355..e860709d5bef 100644
--- a/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts
+++ b/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts
@@ -32,8 +32,7 @@ test.describe('TuiHint', () => {
 
         directions.forEach((direction, directionIndex) => {
             [256, 1280].forEach((width) => {
-                // TODO: need fix https://github.com/taiga-family/taiga-ui/issues/9764 before
-                test.skip(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
+                test(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
                     page,
                 }) => {
                     await page.setViewportSize({width, height: 300});
@@ -44,7 +43,7 @@ test.describe('TuiHint', () => {
                     await new TuiDocumentationPagePO(page).prepareBeforeScreenshot();
 
                     await expect(page).toHaveScreenshot(
-                        `02-hint-manual-direction__${direction}-and-width__${width}.png`,
+                        `02-hint-manual-direction-${directionIndex}__${direction}-and-width__${width}.png`,
                     );
                 });
             });