feat(kit): new tuiProgressFixedGradient for ProgressBar

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

projects/kit/components/progress/index.ts

@@ -2,6 +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-circle/progress-circle.component';
 export * from './progress-label/progress-label.component';
 export * from './progress-segmented/progress-segmented.directive';

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 readonly 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);
+    }
+}

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;

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;