From 67b735a498e897c7f464436d7b52ad6071a5ac53 Mon Sep 17 00:00:00 2001
From: Barsukov Nikita <nikita.s.barsukov@gmail.com>
Date: Mon, 11 Apr 2022 12:49:03 +0300
Subject: [PATCH] fix(kit): `InputRange` case with very long placeholder

---
 .../tests/kit/input-range/input-range.spec.ts | 31 +++++++++
 .../input-range/examples/2/index.less         |  1 +
 .../input-range/input-range.template.html     |  4 +-
 .../input-range/input-range.style.less        | 24 +++++--
 .../input-range/input-range.template.html     | 68 ++++++++++---------
 5 files changed, 89 insertions(+), 39 deletions(-)

diff --git a/projects/demo-integrations/cypress/tests/kit/input-range/input-range.spec.ts b/projects/demo-integrations/cypress/tests/kit/input-range/input-range.spec.ts
index 557097b4b2e66..29a49e47b5702 100644
--- a/projects/demo-integrations/cypress/tests/kit/input-range/input-range.spec.ts
+++ b/projects/demo-integrations/cypress/tests/kit/input-range/input-range.spec.ts
@@ -203,6 +203,37 @@ describe('InputRange', () => {
             });
         });
     });
+
+    describe('Very long placeholder', () => {
+        it('basic case', () => {
+            cy.viewport('macbook-11');
+            cy.tuiVisit(`${INPUT_RANGE_PAGE_URL}/API`);
+
+            cy.get('#demoContent')
+                .should('be.visible')
+                .matchImageSnapshot('01-long-placeholder_basic');
+        });
+
+        it('with `leftValueContent` and `rightValueContent`', () => {
+            cy.viewport('iphone-x');
+            cy.tuiVisit(
+                `${INPUT_RANGE_PAGE_URL}/API?rightValueContent=TOP%20SECRET&leftValueContent=I%20am%20a%20leftValueContent`,
+            );
+
+            cy.get('#demoContent')
+                .should('be.visible')
+                .matchImageSnapshot('02-long-placeholder_value-content');
+        });
+
+        it('with `pluralize`', () => {
+            cy.viewport('iphone-8');
+            cy.tuiVisit(`${INPUT_RANGE_PAGE_URL}/API?pluralize$=1`);
+
+            cy.get('#demoContent')
+                .should('be.visible')
+                .matchImageSnapshot('03-long-placeholder_pluralize');
+        });
+    });
 });
 
 function initializeAliases(
diff --git a/projects/demo/src/modules/components/input-range/examples/2/index.less b/projects/demo/src/modules/components/input-range/examples/2/index.less
index 5726855abb666..42aa572dedec7 100644
--- a/projects/demo/src/modules/components/input-range/examples/2/index.less
+++ b/projects/demo/src/modules/components/input-range/examples/2/index.less
@@ -5,5 +5,6 @@
 
 .control {
     flex: 1;
+    min-width: 0;
     margin-right: 1.5rem;
 }
diff --git a/projects/demo/src/modules/components/input-range/input-range.template.html b/projects/demo/src/modules/components/input-range/input-range.template.html
index c7abd7d22f55b..54a9c98d4480f 100644
--- a/projects/demo/src/modules/components/input-range/input-range.template.html
+++ b/projects/demo/src/modules/components/input-range/input-range.template.html
@@ -112,7 +112,9 @@
                     [maxLabel]="maxLabel"
                     [segmentsPluralize]="segmentsPluralize"
                 >
-                    Range
+                    Just a very long label. Don't afraid it does not overflow
+                    the wrapper, the label is just cut off with ellipsis when it
+                    does not fit the wrapper.
                 </tui-input-range>
             </ng-template>
         </tui-doc-demo>
diff --git a/projects/kit/components/input-range/input-range.style.less b/projects/kit/components/input-range/input-range.style.less
index 7b10239ff3d84..9f5d2cd596c2a 100644
--- a/projects/kit/components/input-range/input-range.style.less
+++ b/projects/kit/components/input-range/input-range.style.less
@@ -1,15 +1,29 @@
 .t-wrapper {
-    display: flex;
+    position: relative;
 }
 
-.t-text-input {
-    flex: 1;
+.t-left {
+    width: 100%;
+}
+
+.t-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    width: 50%;
+    height: 100%;
+    text-align: right;
 
-    &:last-of-type {
-        text-align: right;
+    & .t-text-input {
+        flex: 1;
     }
 }
 
+.t-text-input {
+    text-align: inherit;
+}
+
 .t-pluralize-right {
     display: flex;
     align-items: center;
diff --git a/projects/kit/components/input-range/input-range.template.html b/projects/kit/components/input-range/input-range.template.html
index 64a81b56ce757..4523c59718143 100644
--- a/projects/kit/components/input-range/input-range.template.html
+++ b/projects/kit/components/input-range/input-range.template.html
@@ -10,7 +10,7 @@
 >
     <tui-input-number
         tuiTextfieldAppearance="none"
-        class="t-text-input"
+        class="t-left t-text-input"
         [min]="min"
         [max]="value[1]"
         [precision]="precision"
@@ -35,39 +35,41 @@
         ></div>
     </tui-input-number>
 
-    <tui-input-number
-        tuiTextfieldAppearance="none"
-        class="t-text-input"
-        [min]="value[0]"
-        [max]="max"
-        [precision]="precision"
-        [decimal]="decimal"
-        [disabled]="computedDisabled"
-        [readOnly]="readOnly"
-        [tuiTextfieldSize]="computedSize"
-        [tuiTextfieldLabelOutside]="legacyLabelOutside"
-        [ngModel]="value[1]"
-        (ngModelChange)="onInputRight($event)"
-        (focusedChange)="onTextInputFocused($event, true)"
-        (keydown.arrowUp)="changeByStep($event, [0, 1])"
-        (keydown.arrowDown)="changeByStep($event, [0, -1])"
-    >
-        <div
-            *ngIf="showRightValueContent"
-            polymorpheus-outlet
-            [content]="maxLabel ? legacyMaxLabel : rightValueContent"
-            [context]="{$implicit: value[1]}"
-        ></div>
-    </tui-input-number>
+    <div class="t-right">
+        <tui-input-number
+            tuiTextfieldAppearance="none"
+            class="t-text-input"
+            [min]="value[0]"
+            [max]="max"
+            [precision]="precision"
+            [decimal]="decimal"
+            [disabled]="computedDisabled"
+            [readOnly]="readOnly"
+            [tuiTextfieldSize]="computedSize"
+            [tuiTextfieldLabelOutside]="legacyLabelOutside"
+            [ngModel]="value[1]"
+            (ngModelChange)="onInputRight($event)"
+            (focusedChange)="onTextInputFocused($event, true)"
+            (keydown.arrowUp)="changeByStep($event, [0, 1])"
+            (keydown.arrowDown)="changeByStep($event, [0, -1])"
+        >
+            <div
+                *ngIf="showRightValueContent"
+                polymorpheus-outlet
+                [content]="maxLabel ? legacyMaxLabel : rightValueContent"
+                [context]="{$implicit: value[1]}"
+            ></div>
+        </tui-input-number>
 
-    <!-- TODO replace by postfix of the right InputNumber (after fix https://github.com/Tinkoff/taiga-ui/issues/1193) -->
-    <span
-        *ngIf="!showRightValueContent && pluralizeMap"
-        automation-id="tui-input-range__pluralize-right"
-        class="t-pluralize-right"
-    >
-        &nbsp;{{value[1] | i18nPlural: pluralizeMap}}
-    </span>
+        <!-- TODO replace by postfix of the right InputNumber (after fix https://github.com/Tinkoff/taiga-ui/issues/1193) -->
+        <span
+            *ngIf="!showRightValueContent && pluralizeMap"
+            automation-id="tui-input-range__pluralize-right"
+            class="t-pluralize-right"
+        >
+            &nbsp;{{value[1] | i18nPlural: pluralizeMap}}
+        </span>
+    </div>
 
     <tui-range
         class="t-slider"