feat(cdk): add TuiRepeatTimes pipe (#9262)

projects/cdk/pipes/index.ts

@@ -2,5 +2,6 @@ export * from '@taiga-ui/cdk/pipes/filter';
 export * from '@taiga-ui/cdk/pipes/is-present';
 export * from '@taiga-ui/cdk/pipes/keys';
 export * from '@taiga-ui/cdk/pipes/mapper';
+export * from '@taiga-ui/cdk/pipes/repeat-times';
 export * from '@taiga-ui/cdk/pipes/replace';
 export * from '@taiga-ui/cdk/pipes/to-array';

projects/cdk/pipes/repeat-times/index.ts

@@ -0,0 +1,12 @@
+import {Pipe, type PipeTransform} from '@angular/core';
+import {tuiClamp} from '@taiga-ui/cdk/utils';
+
+@Pipe({
+    standalone: true,
+    name: 'tuiRepeatTimes',
+})
+export class TuiRepeatTimesPipe implements PipeTransform {
+    public transform(n: number): number[] {
+        return Array.from({length: tuiClamp(n, 0, n)}, (_, i) => i);
+    }
+}

projects/cdk/pipes/repeat-times/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/cdk/pipes/repeat-times/test/repeat-times.pipe.spec.ts

@@ -0,0 +1,16 @@
+import {TuiRepeatTimesPipe} from '@taiga-ui/cdk';
+
+describe('TuiRepeatTimes pipe', () => {
+    const pipe = new TuiRepeatTimesPipe();
+
+    it('works', () => {
+        expect(pipe.transform(-2)).toEqual([]);
+        expect(pipe.transform(-1)).toEqual([]);
+        expect(pipe.transform(0)).toEqual([]);
+        expect(pipe.transform(1)).toEqual([0]);
+        expect(pipe.transform(2)).toEqual([0, 1]);
+        expect(pipe.transform(3)).toEqual([0, 1, 2]);
+        expect(pipe.transform(4)).toEqual([0, 1, 2, 3]);
+        expect(pipe.transform(5)).toEqual([0, 1, 2, 3, 4]);
+    });
+});

projects/demo/src/modules/app/app.routes.ts

@@ -970,6 +970,11 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../pipes/mapper'),
         title: 'Mapper',
     }),
+    route({
+        path: DemoRoute.RepeatTimes,
+        loadComponent: async () => import('../pipes/repeat-times'),
+        title: 'RepeatTimes',
+    }),
     route({
         path: DemoRoute.Stringify,
         loadComponent: async () => import('../pipes/stringify'),

projects/demo/src/modules/app/demo-routes.ts

@@ -192,6 +192,7 @@ export const DemoRoute = {
     FormatNumber: '/pipes/format-number',
     IsPresent: '/pipes/is-present',
     Mapper: '/pipes/mapper',
+    RepeatTimes: '/pipes/repeat-times',
     Stringify: '/pipes/stringify',
     StringifyContent: '/pipes/stringify-content',
     Alert: '/components/alert',

projects/demo/src/modules/app/pages.ts

@@ -1368,6 +1368,12 @@ export const pages: TuiDocRoutePages = [
                 keywords: 'mapper, мап, преобразование, пайп, pipe',
                 route: DemoRoute.Mapper,
             },
+            {
+                section: 'Tools',
+                title: 'RepeatTimes',
+                keywords: 'повторение, repeat, пайп, pipe',
+                route: DemoRoute.RepeatTimes,
+            },
             {
                 section: 'Tools',
                 title: 'FieldError',

projects/demo/src/modules/pipes/repeat-times/examples/1/index.html

@@ -0,0 +1,3 @@
+<ng-container *ngFor="let index of 5 | tuiRepeatTimes">
+    {{ index }}
+</ng-container>

projects/demo/src/modules/pipes/repeat-times/examples/1/index.ts

@@ -0,0 +1,14 @@
+import {NgForOf} from '@angular/common';
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimesPipe} from '@taiga-ui/cdk';
+
+@Component({
+    standalone: true,
+    imports: [NgForOf, TuiRepeatTimesPipe],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/pipes/repeat-times/examples/import/import.md

@@ -0,0 +1,15 @@
+```ts
+import {TuiRepeatTimesPipe} from '@taiga-ui/cdk';
+
+//...
+
+@Component({
+  standalone: true,
+  imports: [
+    // ...
+    TuiRepeatTimesPipe,
+  ],
+  //  ...
+})
+export class Example {}
+```

projects/demo/src/modules/pipes/repeat-times/examples/import/template.md

@@ -0,0 +1,5 @@
+```html
+@for (index of 3 | tuiRepeatTimes; track index) {
+<div class="t-cell"></div>
+}
+```

projects/demo/src/modules/pipes/repeat-times/index.html

@@ -0,0 +1,17 @@
+<tui-doc-page
+    header="RepeatTimes"
+    package="CDK"
+    type="pipes"
+>
+    <ng-template pageTab>
+        <tui-doc-example
+            id="base"
+            description="Pipe for making an array of elements by length"
+            heading="Base"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>

projects/demo/src/modules/pipes/repeat-times/index.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class Page {}