From 6824717ff6c9231ff2fd2496acc38c41eccc56c4 Mon Sep 17 00:00:00 2001
From: nsbarsukov <nsbarsukov@users.noreply.github.com>
Date: Mon, 4 Apr 2022 19:40:43 +0300
Subject: [PATCH] chore(kit): `Range` add not-chromium Edge support (16-18)

---
 .../range/examples/import/insert-template.md           | 10 ++++++++--
 .../src/modules/components/range/range.template.html   | 10 ++++++++--
 .../kit/components/range/range-change.directive.ts     |  5 +++--
 projects/kit/components/range/range.style.less         |  9 +++++++++
 projects/kit/components/range/range.template.html      | 10 ++++++++--
 projects/kit/components/slider/slider.style.less       |  2 ++
 6 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/projects/demo/src/modules/components/range/examples/import/insert-template.md b/projects/demo/src/modules/components/range/examples/import/insert-template.md
index e74ee5942ca7..50f02b228fd3 100644
--- a/projects/demo/src/modules/components/range/examples/import/insert-template.md
+++ b/projects/demo/src/modules/components/range/examples/import/insert-template.md
@@ -1,5 +1,11 @@
 ```html
-<tui-range [max]="10" [(ngModel)]="model"></tui-range>
+<tui-range
+  [max]="10"
+  [(ngModel)]="model"
+></tui-range>
 
-<tui-range [formControl]="testValue" [max]="10"></tui-range>
+<tui-range
+  [formControl]="testValue"
+  [max]="10"
+></tui-range>
 ```
diff --git a/projects/demo/src/modules/components/range/range.template.html b/projects/demo/src/modules/components/range/range.template.html
index 236f8bb0c0f0..8ef2edaf641d 100644
--- a/projects/demo/src/modules/components/range/range.template.html
+++ b/projects/demo/src/modules/components/range/range.template.html
@@ -7,7 +7,10 @@
         <p i18n>Component allows to choose a part of a range</p>
 
         <tui-notification status="warning">
-            <p i18n class="tui-space_top-0">
+            <p
+                i18n
+                class="tui-space_top-0"
+            >
                 This component is being refactored.
                 Soon&nbsp;(next&nbsp;major&nbsp;release) you will see the fresh
                 version of it!
@@ -53,7 +56,10 @@
             [content]="example3"
         >
             <tui-notification class="tui-space_bottom-8">
-                <p i18n class="tui-space_top-0">
+                <p
+                    i18n
+                    class="tui-space_top-0"
+                >
                     Use mixin
                     <code>tui-slider-ticks-labels</code>
                     to arrange ticks' labels (it places them strictly below
diff --git a/projects/kit/components/range/range-change.directive.ts b/projects/kit/components/range/range-change.directive.ts
index 3233dd58099d..a41e1f0b7bb0 100644
--- a/projects/kit/components/range/range-change.directive.ts
+++ b/projects/kit/components/range/range-change.directive.ts
@@ -2,7 +2,7 @@ import {DOCUMENT} from '@angular/common';
 import {Directive, ElementRef, Inject} from '@angular/core';
 import {clamp, round, TuiDestroyService, typedFromEvent} from '@taiga-ui/cdk';
 import {TUI_FLOATING_PRECISION} from '@taiga-ui/kit/constants';
-import {merge, Observable, race} from 'rxjs';
+import {merge, Observable} from 'rxjs';
 import {filter, map, repeat, startWith, switchMap, takeUntil, tap} from 'rxjs/operators';
 
 import {TuiRangeComponent} from './range.component';
@@ -54,8 +54,9 @@ export class TuiRangeChangeDirective {
                 }),
                 switchMap(event => this.pointerMove$.pipe(startWith(event))),
                 map(({clientX}) => clamp(this.getFractionFromEvents(clientX), 0, 1)),
-                takeUntil(race(this.pointerUp$, destroy$)),
+                takeUntil(this.pointerUp$),
                 repeat(),
+                takeUntil(destroy$),
             )
             .subscribe(fraction => {
                 const value = this.range.getValueFromFraction(
diff --git a/projects/kit/components/range/range.style.less b/projects/kit/components/range/range.style.less
index 5e3f077bc43e..fece30f7e751 100644
--- a/projects/kit/components/range/range.style.less
+++ b/projects/kit/components/range/range.style.less
@@ -85,6 +85,15 @@
         &::-moz-range-progress {
             background: transparent;
         }
+
+        /* Not-chromium Edge (16-18) */
+        &::-ms-track {
+            background: transparent;
+        }
+
+        &::-ms-fill-lower {
+            background: transparent;
+        }
     }
 }
 
diff --git a/projects/kit/components/range/range.template.html b/projects/kit/components/range/range.template.html
index 4828f89513b2..67e5e8572847 100644
--- a/projects/kit/components/range/range.template.html
+++ b/projects/kit/components/range/range.template.html
@@ -30,14 +30,20 @@
 </div>
 
 <!-- TODO backward compatibility only (remove in v3.0) -->
-<div *ngIf="segmented" class="segments">
+<div
+    *ngIf="segmented"
+    class="segments"
+>
     <span
         *tuiRepeatTimes="let tickIndex of segments + 1"
         automation-id="tui-slider__segment"
         class="segment"
     >
         <ng-container *ngIf="fromToTexts$ | async as fromToText">
-            <span *ngIf="!isNew" class="number">
+            <span
+                *ngIf="!isNew"
+                class="number"
+            >
                 {{ getSegmentPrefix(tickIndex, fromToText) }} {{ tickIndex |
                 tuiSliderTickLabel:segments:computedKeySteps | tuiFormatNumber
                 }}
diff --git a/projects/kit/components/slider/slider.style.less b/projects/kit/components/slider/slider.style.less
index d7169cf352eb..8516d4da7598 100644
--- a/projects/kit/components/slider/slider.style.less
+++ b/projects/kit/components/slider/slider.style.less
@@ -155,6 +155,7 @@
 :host._old-edge {
     &::-ms-thumb {
         background: @thumb-color;
+        border-radius: 50%;
     }
 
     &::-ms-fill-lower {
@@ -163,5 +164,6 @@
 
     &::-ms-track {
         background: @track-color;
+        border: none;
     }
 }