From d8bbb397434b8f3674a853637c99979fa5d716c9 Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Thu, 31 Oct 2024 11:15:28 +0500
Subject: [PATCH 1/8] feat: added fixed gradient input

---
 .../progress-bar/examples/2/index.html        | 13 ++++++++++-
 projects/kit/components/progress/index.ts     |  1 +
 .../progress-fixed-gradient.directive.ts      | 23 +++++++++++++++++++
 projects/kit/components/progress/progress.ts  |  2 ++
 .../kit/styles/components/progress-bar.less   | 11 +++++++++
 5 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts

diff --git a/projects/demo/src/modules/components/progress-bar/examples/2/index.html b/projects/demo/src/modules/components/progress-bar/examples/2/index.html
index f9df187e6bb7..abb09a0c4ea5 100644
--- a/projects/demo/src/modules/components/progress-bar/examples/2/index.html
+++ b/projects/demo/src/modules/components/progress-bar/examples/2/index.html
@@ -18,7 +18,9 @@ <h6 class="description">With fancy color gradient</h6>
 <p>
     Set component's input property
     <code>color</code>
-    to get more complex color combinations.
+    to get more complex color combinations. Use directive
+    <code>tuiProgressFixedGradient</code>
+    to make gradient fixed.
 </p>
 
 <progress
@@ -29,6 +31,15 @@ <h6 class="description">With fancy color gradient</h6>
     [value]="fastValue$ | async"
 ></progress>
 
+<progress
+    color="linear-gradient(to right, var(--tui-chart-categorical-02), var(--tui-chart-categorical-14), var(--tui-chart-categorical-12))"
+    max="100"
+    tuiProgressBar
+    tuiProgressFixedGradient
+    class="progress"
+    [value]="fastValue$ | async"
+></progress>
+
 <h6 class="description">Multicolor segments</h6>
 <p>
     Use
diff --git a/projects/kit/components/progress/index.ts b/projects/kit/components/progress/index.ts
index 9bf5a2e01dd5..8053159e8b5c 100644
--- a/projects/kit/components/progress/index.ts
+++ b/projects/kit/components/progress/index.ts
@@ -5,3 +5,4 @@ export * from './progress-bar/progress-color-segments.directive';
 export * from './progress-circle/progress-circle.component';
 export * from './progress-label/progress-label.component';
 export * from './progress-segmented/progress-segmented.directive';
+export * from './progress-bar/progress-fixed-gradient.directive';
diff --git a/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts b/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
new file mode 100644
index 000000000000..73177d349bd0
--- /dev/null
+++ b/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
@@ -0,0 +1,23 @@
+import {Directive, ElementRef, inject} from '@angular/core';
+
+@Directive({
+    standalone: true,
+    selector: 'progress[tuiProgressBar][tuiProgressFixedGradient]',
+    host: {
+        '[style.--tui-progress-percent]': "progressPercent + '%'",
+    },
+})
+export class TuiProgressFixedGradientDirective {
+    private nativeElement = inject(ElementRef<HTMLProgressElement>);
+
+    public get progressPercent(): number {
+        const value = this.nativeElement.nativeElement.value;
+        const max = this.nativeElement.nativeElement.max;
+
+        if (!max) {
+            return 0;
+        }
+
+        return Math.min((value / max) * 100, 100);
+    }
+}
diff --git a/projects/kit/components/progress/progress.ts b/projects/kit/components/progress/progress.ts
index f97e0a27bca6..0226376303fa 100644
--- a/projects/kit/components/progress/progress.ts
+++ b/projects/kit/components/progress/progress.ts
@@ -1,5 +1,6 @@
 import {TuiProgressBar} from './progress-bar/progress-bar.component';
 import {TuiProgressColorSegments} from './progress-bar/progress-color-segments.directive';
+import {TuiProgressFixedGradientDirective} from './progress-bar/progress-fixed-gradient.directive';
 import {TuiProgressCircle} from './progress-circle/progress-circle.component';
 import {TuiProgressLabel} from './progress-label/progress-label.component';
 import {TuiProgressSegmented} from './progress-segmented/progress-segmented.directive';
@@ -8,6 +9,7 @@ export const TuiProgress = [
     TuiProgressBar,
     TuiProgressCircle,
     TuiProgressColorSegments,
+    TuiProgressFixedGradientDirective,
     TuiProgressLabel,
     TuiProgressSegmented,
 ] as const;
diff --git a/projects/kit/styles/components/progress-bar.less b/projects/kit/styles/components/progress-bar.less
index 48cb7c4a58a3..79cbabfcdf61 100644
--- a/projects/kit/styles/components/progress-bar.less
+++ b/projects/kit/styles/components/progress-bar.less
@@ -104,6 +104,17 @@
         border-radius: inherit;
     }
 
+    &[tuiProgressFixedGradient] {
+        .progressValue({
+            border-radius: inherit;
+            width: 100% !important;
+
+            clip-path: inset(0 calc(100% - var(--tui-progress-percent)) 0 0 round var(--tui-radius-m));
+
+            transition: clip-path var(--tui-duration) linear;
+        });
+    }
+
     &::-webkit-progress-bar {
         background: transparent;
         border-radius: inherit;

From d8469522c6b780149835aa44981473682b6efee4 Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Thu, 31 Oct 2024 13:12:31 +0500
Subject: [PATCH 2/8] fix: fixed lint

---
 projects/kit/components/progress/index.ts                       | 2 +-
 .../progress/progress-bar/progress-fixed-gradient.directive.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/kit/components/progress/index.ts b/projects/kit/components/progress/index.ts
index 8053159e8b5c..1a9aa927f16c 100644
--- a/projects/kit/components/progress/index.ts
+++ b/projects/kit/components/progress/index.ts
@@ -3,6 +3,6 @@ export * from './progress.options';
 export * from './progress-bar/progress-bar.component';
 export * from './progress-bar/progress-color-segments.directive';
 export * from './progress-circle/progress-circle.component';
+export * from './progress-bar/progress-fixed-gradient.directive';
 export * from './progress-label/progress-label.component';
 export * from './progress-segmented/progress-segmented.directive';
-export * from './progress-bar/progress-fixed-gradient.directive';
diff --git a/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts b/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
index 73177d349bd0..c062acc9a527 100644
--- a/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
+++ b/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
@@ -8,7 +8,7 @@ import {Directive, ElementRef, inject} from '@angular/core';
     },
 })
 export class TuiProgressFixedGradientDirective {
-    private nativeElement = inject(ElementRef<HTMLProgressElement>);
+    private readonly nativeElement = inject(ElementRef<HTMLProgressElement>);
 
     public get progressPercent(): number {
         const value = this.nativeElement.nativeElement.value;

From e9bdb2c24e25b7e3ec6aaf5dc6e414e8fa6ed33a Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Thu, 31 Oct 2024 13:34:02 +0500
Subject: [PATCH 3/8] fix: fixed lint

---
 projects/kit/components/progress/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/kit/components/progress/index.ts b/projects/kit/components/progress/index.ts
index 1a9aa927f16c..464842f74257 100644
--- a/projects/kit/components/progress/index.ts
+++ b/projects/kit/components/progress/index.ts
@@ -2,7 +2,7 @@ export * from './progress';
 export * from './progress.options';
 export * from './progress-bar/progress-bar.component';
 export * from './progress-bar/progress-color-segments.directive';
-export * from './progress-circle/progress-circle.component';
 export * from './progress-bar/progress-fixed-gradient.directive';
+export * from './progress-circle/progress-circle.component';
 export * from './progress-label/progress-label.component';
 export * from './progress-segmented/progress-segmented.directive';

From 5fce54d02bd7c69c9e802f244ab7b02c1d53769e Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Fri, 1 Nov 2024 11:54:09 +0500
Subject: [PATCH 4/8] fix: review fixes

---
 .../progress-bar/progress-fixed-gradient.directive.ts     | 8 ++------
 projects/kit/styles/components/progress-bar.less          | 5 +++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts b/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
index c062acc9a527..484d06ff95a2 100644
--- a/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
+++ b/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
@@ -4,7 +4,7 @@ import {Directive, ElementRef, inject} from '@angular/core';
     standalone: true,
     selector: 'progress[tuiProgressBar][tuiProgressFixedGradient]',
     host: {
-        '[style.--tui-progress-percent]': "progressPercent + '%'",
+        '[style.--tui-progress-percent.%]': 'progressPercent',
     },
 })
 export class TuiProgressFixedGradientDirective {
@@ -12,11 +12,7 @@ export class TuiProgressFixedGradientDirective {
 
     public get progressPercent(): number {
         const value = this.nativeElement.nativeElement.value;
-        const max = this.nativeElement.nativeElement.max;
-
-        if (!max) {
-            return 0;
-        }
+        const max = this.nativeElement.nativeElement.max ?? 1;
 
         return Math.min((value / max) * 100, 100);
     }
diff --git a/projects/kit/styles/components/progress-bar.less b/projects/kit/styles/components/progress-bar.less
index 79cbabfcdf61..7124108fa61d 100644
--- a/projects/kit/styles/components/progress-bar.less
+++ b/projects/kit/styles/components/progress-bar.less
@@ -107,11 +107,12 @@
     &[tuiProgressFixedGradient] {
         .progressValue({
             border-radius: inherit;
+
             width: 100% !important;
+            margin-right: calc(-100% + var(--tui-progress-percent));
 
             clip-path: inset(0 calc(100% - var(--tui-progress-percent)) 0 0 round var(--tui-radius-m));
-
-            transition: clip-path var(--tui-duration) linear;
+            transition: all var(--tui-duration) linear;
         });
     }
 

From bb155ee41083dc3a5340863af906436f25ed00b6 Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Fri, 1 Nov 2024 16:09:59 +0500
Subject: [PATCH 5/8] fix: review fixes again

---
 .../progress-bar/examples/2/index.html        | 10 +++--
 projects/kit/components/progress/index.ts     |  2 +-
 .../progress-fixed-gradient.directive.ts      | 41 +++++++++++++++++++
 .../progress-fixed-gradient.style.less        | 17 ++++++++
 .../progress-fixed-gradient.directive.ts      | 19 ---------
 projects/kit/components/progress/progress.ts  |  2 +-
 .../kit/styles/components/progress-bar.less   | 12 ------
 7 files changed, 67 insertions(+), 36 deletions(-)
 create mode 100644 projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
 create mode 100644 projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less
 delete mode 100644 projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts

diff --git a/projects/demo/src/modules/components/progress-bar/examples/2/index.html b/projects/demo/src/modules/components/progress-bar/examples/2/index.html
index abb09a0c4ea5..603cde615379 100644
--- a/projects/demo/src/modules/components/progress-bar/examples/2/index.html
+++ b/projects/demo/src/modules/components/progress-bar/examples/2/index.html
@@ -18,9 +18,7 @@ <h6 class="description">With fancy color gradient</h6>
 <p>
     Set component's input property
     <code>color</code>
-    to get more complex color combinations. Use directive
-    <code>tuiProgressFixedGradient</code>
-    to make gradient fixed.
+    to get more complex color combinations.
 </p>
 
 <progress
@@ -31,6 +29,12 @@ <h6 class="description">With fancy color gradient</h6>
     [value]="fastValue$ | async"
 ></progress>
 
+<p>
+    Use directive
+    <code>tuiProgressFixedGradient</code>
+    to make gradient fixed.
+</p>
+
 <progress
     color="linear-gradient(to right, var(--tui-chart-categorical-02), var(--tui-chart-categorical-14), var(--tui-chart-categorical-12))"
     max="100"
diff --git a/projects/kit/components/progress/index.ts b/projects/kit/components/progress/index.ts
index 464842f74257..c25889a4a361 100644
--- a/projects/kit/components/progress/index.ts
+++ b/projects/kit/components/progress/index.ts
@@ -2,7 +2,7 @@ export * from './progress';
 export * from './progress.options';
 export * from './progress-bar/progress-bar.component';
 export * from './progress-bar/progress-color-segments.directive';
-export * from './progress-bar/progress-fixed-gradient.directive';
+export * from './progress-bar/fixed-gradient/progress-fixed-gradient.directive';
 export * from './progress-circle/progress-circle.component';
 export * from './progress-label/progress-label.component';
 export * from './progress-segmented/progress-segmented.directive';
diff --git a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
new file mode 100644
index 000000000000..c391f28eb278
--- /dev/null
+++ b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
@@ -0,0 +1,41 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Directive,
+    ElementRef,
+    inject,
+    ViewEncapsulation,
+} from '@angular/core';
+import {tuiWithStyles} from '@taiga-ui/cdk';
+
+@Component({
+    standalone: true,
+    template: '',
+    styleUrls: ['./progress-fixed-gradient.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-fixed-gradient',
+    },
+})
+class TuiProgressFixedGradientStyles {}
+
+@Directive({
+    standalone: true,
+    selector: 'progress[tuiProgressBar][tuiProgressFixedGradient]',
+    host: {
+        '[style.--tui-progress-percent.%]': 'progressPercent',
+    },
+})
+export class TuiProgressFixedGradientDirective {
+    protected readonly nothing = tuiWithStyles(TuiProgressFixedGradientStyles);
+
+    private readonly nativeElement = inject(ElementRef<HTMLProgressElement>);
+
+    protected get progressPercent(): number {
+        const value = this.nativeElement.nativeElement.value;
+        const max = this.nativeElement.nativeElement.max ?? 1;
+
+        return Math.min((value / max) * 100, 100);
+    }
+}
diff --git a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less
new file mode 100644
index 000000000000..d50591e8b882
--- /dev/null
+++ b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less
@@ -0,0 +1,17 @@
+.fixed-gradient() {
+    inline-size: 100% !important;
+    clip-path: inset(0 calc(100% - var(--tui-progress-percent)) 0 0 round var(--tui-radius-m));
+    transition: clip-path var(--tui-duration) linear;
+}
+
+&[tuiProgressFixedGradient] {
+    &::-moz-progress-bar {
+        .fixed-gradient();
+
+        margin-right: calc(-100% + var(--tui-progress-percent));
+    }
+
+    &::-webkit-progress-value {
+        .fixed-gradient();
+    }
+}
diff --git a/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts b/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
deleted file mode 100644
index 484d06ff95a2..000000000000
--- a/projects/kit/components/progress/progress-bar/progress-fixed-gradient.directive.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Directive, ElementRef, inject} from '@angular/core';
-
-@Directive({
-    standalone: true,
-    selector: 'progress[tuiProgressBar][tuiProgressFixedGradient]',
-    host: {
-        '[style.--tui-progress-percent.%]': 'progressPercent',
-    },
-})
-export class TuiProgressFixedGradientDirective {
-    private readonly nativeElement = inject(ElementRef<HTMLProgressElement>);
-
-    public get progressPercent(): number {
-        const value = this.nativeElement.nativeElement.value;
-        const max = this.nativeElement.nativeElement.max ?? 1;
-
-        return Math.min((value / max) * 100, 100);
-    }
-}
diff --git a/projects/kit/components/progress/progress.ts b/projects/kit/components/progress/progress.ts
index 0226376303fa..14f284369451 100644
--- a/projects/kit/components/progress/progress.ts
+++ b/projects/kit/components/progress/progress.ts
@@ -1,6 +1,6 @@
 import {TuiProgressBar} from './progress-bar/progress-bar.component';
 import {TuiProgressColorSegments} from './progress-bar/progress-color-segments.directive';
-import {TuiProgressFixedGradientDirective} from './progress-bar/progress-fixed-gradient.directive';
+import {TuiProgressFixedGradientDirective} from './progress-bar/fixed-gradient/progress-fixed-gradient.directive';
 import {TuiProgressCircle} from './progress-circle/progress-circle.component';
 import {TuiProgressLabel} from './progress-label/progress-label.component';
 import {TuiProgressSegmented} from './progress-segmented/progress-segmented.directive';
diff --git a/projects/kit/styles/components/progress-bar.less b/projects/kit/styles/components/progress-bar.less
index 7124108fa61d..48cb7c4a58a3 100644
--- a/projects/kit/styles/components/progress-bar.less
+++ b/projects/kit/styles/components/progress-bar.less
@@ -104,18 +104,6 @@
         border-radius: inherit;
     }
 
-    &[tuiProgressFixedGradient] {
-        .progressValue({
-            border-radius: inherit;
-
-            width: 100% !important;
-            margin-right: calc(-100% + var(--tui-progress-percent));
-
-            clip-path: inset(0 calc(100% - var(--tui-progress-percent)) 0 0 round var(--tui-radius-m));
-            transition: all var(--tui-duration) linear;
-        });
-    }
-
     &::-webkit-progress-bar {
         background: transparent;
         border-radius: inherit;

From b4c455997a54ab5b66a7c0904d7ae9e24751e9e0 Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Fri, 1 Nov 2024 17:07:42 +0500
Subject: [PATCH 6/8] fix: review fixes again

---
 .../fixed-gradient/progress-fixed-gradient.style.less           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less
index d50591e8b882..364567bec6e3 100644
--- a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less
+++ b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.style.less
@@ -4,7 +4,7 @@
     transition: clip-path var(--tui-duration) linear;
 }
 
-&[tuiProgressFixedGradient] {
+[tuiProgressFixedGradient] {
     &::-moz-progress-bar {
         .fixed-gradient();
 

From 862547d0195f49bb01e2ec3ba957610b984b19fc Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Sat, 2 Nov 2024 09:38:30 +0500
Subject: [PATCH 7/8] fix: lint fixes

---
 projects/kit/components/progress/index.ts                    | 2 +-
 .../fixed-gradient/progress-fixed-gradient.directive.ts      | 5 ++---
 projects/kit/components/progress/progress.ts                 | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/projects/kit/components/progress/index.ts b/projects/kit/components/progress/index.ts
index c25889a4a361..eaeb2748f860 100644
--- a/projects/kit/components/progress/index.ts
+++ b/projects/kit/components/progress/index.ts
@@ -1,8 +1,8 @@
 export * from './progress';
 export * from './progress.options';
+export * from './progress-bar/fixed-gradient/progress-fixed-gradient.directive';
 export * from './progress-bar/progress-bar.component';
 export * from './progress-bar/progress-color-segments.directive';
-export * from './progress-bar/fixed-gradient/progress-fixed-gradient.directive';
 export * from './progress-circle/progress-circle.component';
 export * from './progress-label/progress-label.component';
 export * from './progress-segmented/progress-segmented.directive';
diff --git a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
index c391f28eb278..d66941e89eb9 100644
--- a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
+++ b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
@@ -6,7 +6,7 @@ import {
     inject,
     ViewEncapsulation,
 } from '@angular/core';
-import {tuiWithStyles} from '@taiga-ui/cdk';
+import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
 
 @Component({
     standalone: true,
@@ -28,9 +28,8 @@ class TuiProgressFixedGradientStyles {}
     },
 })
 export class TuiProgressFixedGradientDirective {
-    protected readonly nothing = tuiWithStyles(TuiProgressFixedGradientStyles);
-
     private readonly nativeElement = inject(ElementRef<HTMLProgressElement>);
+    protected readonly nothing = tuiWithStyles(TuiProgressFixedGradientStyles);
 
     protected get progressPercent(): number {
         const value = this.nativeElement.nativeElement.value;
diff --git a/projects/kit/components/progress/progress.ts b/projects/kit/components/progress/progress.ts
index 14f284369451..e7db9925dd8a 100644
--- a/projects/kit/components/progress/progress.ts
+++ b/projects/kit/components/progress/progress.ts
@@ -1,6 +1,6 @@
+import {TuiProgressFixedGradientDirective} from './progress-bar/fixed-gradient/progress-fixed-gradient.directive';
 import {TuiProgressBar} from './progress-bar/progress-bar.component';
 import {TuiProgressColorSegments} from './progress-bar/progress-color-segments.directive';
-import {TuiProgressFixedGradientDirective} from './progress-bar/fixed-gradient/progress-fixed-gradient.directive';
 import {TuiProgressCircle} from './progress-circle/progress-circle.component';
 import {TuiProgressLabel} from './progress-label/progress-label.component';
 import {TuiProgressSegmented} from './progress-segmented/progress-segmented.directive';

From f64547bcbce2d6e70c4a36e5a366bf0a0b23cd92 Mon Sep 17 00:00:00 2001
From: Alexandr Shakirov <al.a.shakirov@tinkoff.ru>
Date: Tue, 5 Nov 2024 10:20:06 +0500
Subject: [PATCH 8/8] fix: review fixes again

---
 .../fixed-gradient/progress-fixed-gradient.directive.ts  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
index d66941e89eb9..e130737837aa 100644
--- a/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
+++ b/projects/kit/components/progress/progress-bar/fixed-gradient/progress-fixed-gradient.directive.ts
@@ -2,10 +2,9 @@ import {
     ChangeDetectionStrategy,
     Component,
     Directive,
-    ElementRef,
-    inject,
     ViewEncapsulation,
 } from '@angular/core';
+import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous';
 
 @Component({
@@ -28,12 +27,12 @@ class TuiProgressFixedGradientStyles {}
     },
 })
 export class TuiProgressFixedGradientDirective {
-    private readonly nativeElement = inject(ElementRef<HTMLProgressElement>);
+    private readonly nativeProgress = tuiInjectElement<HTMLProgressElement>();
     protected readonly nothing = tuiWithStyles(TuiProgressFixedGradientStyles);
 
     protected get progressPercent(): number {
-        const value = this.nativeElement.nativeElement.value;
-        const max = this.nativeElement.nativeElement.max ?? 1;
+        const value = this.nativeProgress.value;
+        const max = this.nativeProgress.max ?? 1;
 
         return Math.min((value / max) * 100, 100);
     }