feat(duplicate-directive): adds duplicate directive (#24)

Author: Majies

Diff for: apps/www/.eslintrc.json

@@ -9,15 +9,21 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "app",
+            "prefix": [
+              "app",
+              "ngt"
+            ],
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "app",
+            "prefix": [
+              "app",
+              "ngt"
+            ],
             "style": "kebab-case"
           }
         ]

Diff for: apps/www/src/app/library-components/directives/duplicate/duplicate.directive.spec.ts

@@ -0,0 +1,67 @@
+import {render, RenderComponentOptions, screen} from "@testing-library/angular";
+import {DuplicateDirective} from "./duplicate.directive";
+
+const renderOptions: RenderComponentOptions<unknown> = {
+  imports: [DuplicateDirective]
+};
+
+describe('Duplicate Directive', () => {
+
+  it.each([1, 2, 3, 5, 10, 15])(`should render element %s times`, async (duplicateValue) => {
+    await render(`<p *ngtDuplicate="${duplicateValue}" data-testid="test"></p>`, renderOptions)
+    const elements = screen.getAllByTestId<HTMLParagraphElement>('test');
+    expect(elements.length).toEqual(duplicateValue);
+  })
+
+  it('should return correct context for index', async () => {
+    await render(`<p *ngtDuplicate="5; let index = index" data-testid="test">{{ index }}</p>`, renderOptions);
+    const elements = screen.getAllByTestId<HTMLParagraphElement>('test');
+
+    elements.forEach((element, index) => expect(Number(element.textContent)).toEqual(index));
+  })
+
+  it('should return correct context for first', async () => {
+    await render(`<p *ngtDuplicate="5; let first = first" data-testid="test">{{ first }}</p>`, renderOptions);
+    const elements = screen.getAllByTestId<HTMLParagraphElement>('test');
+
+    elements.forEach((element, index) => {
+      const booleanValue = element.textContent === 'true';
+      const isFirst = index === 0;
+      expect(booleanValue).toEqual(isFirst);
+    });
+  })
+
+  it('should return correct context for last', async () => {
+    await render(`<p *ngtDuplicate="5; let last = last" data-testid="test">{{ last }}</p>`, renderOptions);
+    const elements = screen.getAllByTestId<HTMLParagraphElement>('test');
+
+    elements.forEach((element, index) => {
+      const booleanValue = element.textContent === 'true';
+      const isLast = index === elements.length - 1;
+      expect(booleanValue).toEqual(isLast);
+    });
+  })
+
+  it('should return correct context for even', async () => {
+    await render(`<p *ngtDuplicate="5; let even = even" data-testid="test">{{ even }}</p>`, renderOptions);
+    const elements = screen.getAllByTestId<HTMLParagraphElement>('test');
+
+    elements.forEach((element, index) => {
+      const booleanValue = element.textContent === 'true';
+      const isEven = index % 2 === 0;
+      expect(booleanValue).toEqual(isEven);
+    });
+  })
+
+  it('should return correct context for odd', async () => {
+    await render(`<p *ngtDuplicate="5; let odd = odd" data-testid="test">{{ odd }}</p>`, renderOptions);
+    const elements = screen.getAllByTestId<HTMLParagraphElement>('test');
+
+    elements.forEach((element, index) => {
+      const booleanValue = element.textContent === 'true';
+      const isOdd = index % 2 !== 0;
+      expect(booleanValue).toEqual(isOdd);
+    });
+  })
+
+})

Diff for: apps/www/src/app/library-components/directives/duplicate/duplicate.directive.ts

@@ -0,0 +1,48 @@
+import {Directive, Input, TemplateRef, ViewContainerRef} from "@angular/core";
+
+class DuplicateContext {
+  constructor(public index: number, public count: number) {}
+
+  get first() {
+    return this.index === 0;
+  }
+
+  get last() {
+    return this.index === this.count - 1;
+  }
+
+  get even() {
+    return this.index % 2 === 0;
+  }
+
+  get odd() {
+    return !this.even;
+  }
+}
+
+@Directive({
+  selector: '[ngtDuplicate]',
+  standalone: true
+})
+export class DuplicateDirective {
+  constructor(
+    private templateRef: TemplateRef<DuplicateContext>,
+    private viewContainerRef: ViewContainerRef
+  ) {
+  }
+
+  @Input('ngtDuplicate') set count(value: number) {
+    this.viewContainerRef.clear();
+    for (let index = 0; index < value; index++) {
+      const context = new DuplicateContext(index, value);
+      this.viewContainerRef.createEmbeddedView(this.templateRef, context);
+    }
+  }
+
+  static ngTemplateContextGuard(
+    directive: DuplicateDirective,
+    context: DuplicateContext
+  ): context is DuplicateContext {
+    return true
+  }
+}

Diff for: apps/www/src/app/library-components/directives/duplicate/index.ts

@@ -0,0 +1 @@
+export * from './duplicate.directive';

Diff for: apps/www/src/app/library-components/directives/index.ts

@@ -1 +1,2 @@
+export * from './duplicate';
 export * from './radio-control-accessor';

Diff for: apps/www/src/app/library-components/directives/radio-control-accessor/radio-value-accessor.directive.spec.ts

@@ -1,6 +1,6 @@
-import {Component, DebugElement, HostBinding, HostListener, Input} from "@angular/core";
+import {Component, HostBinding, HostListener, Input} from "@angular/core";
 import {RadioValueAccessorDirective} from "./radio-value-accessor.directive";
-import {CheckboxControlValueAccessor, FormControl, ReactiveFormsModule} from "@angular/forms";
+import {FormControl, ReactiveFormsModule} from "@angular/forms";
 import {fireEvent, render, RenderResult} from "@testing-library/angular";
 
 const selectors = {