From 109d924ffacbf1d2b88928238d70a52b760482dd Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Sat, 19 Oct 2024 23:47:44 +0200
Subject: [PATCH 1/8] convert to new control flow and improve module imports

---
 .../virtualscroller/virtualscroller.ts        | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts
index 88701de8ed4..755415b6edc 100755
--- a/src/app/components/virtualscroller/virtualscroller.ts
+++ b/src/app/components/virtualscroller/virtualscroller.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
     AfterContentInit,
     ChangeDetectionStrategy,
@@ -36,10 +36,12 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
             [attr.data-pc-name]="'virtualscroller'"
             [attr.data-pc-section]="'root'"
         >
-            <div class="p-virtualscroller-header" *ngIf="header || headerTemplate">
-                <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-            </div>
+            @if (header || headerTemplate) {
+                <div class="p-virtualscroller-header">
+                    <ng-content select="p-header"></ng-content>
+                    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                </div>
+            }
             <div #content class="p-virtualscroller-content" [attr.data-pc-section]="'content'">
                 <p-scroller
                     #scroller
@@ -63,10 +65,12 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
                     </ng-template>
                 </p-scroller>
             </div>
-            <div class="p-virtualscroller-footer" *ngIf="footer || footerTemplate" [attr.data-pc-section]="'footer'">
-                <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-            </div>
+            @if (footer || footerTemplate) {
+                <div class="p-virtualscroller-footer" [attr.data-pc-section]="'footer'">
+                    <ng-content select="p-footer"></ng-content>
+                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                </div>
+            }
         </div>
     `,
     changeDetection: ChangeDetectionStrategy.Default,
@@ -193,7 +197,7 @@ export class VirtualScroller implements AfterContentInit, BlockableUI {
 }
 
 @NgModule({
-    imports: [CommonModule, SharedModule, ScrollerModule],
+    imports: [NgClass, NgStyle, NgTemplateOutlet, SharedModule, ScrollerModule],
     exports: [VirtualScroller, SharedModule, ScrollerModule],
     declarations: [VirtualScroller],
 })

From 9a8a7ffa39eb2d2b2c8bbb72ba96980946f3969e Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Sat, 19 Oct 2024 23:55:37 +0200
Subject: [PATCH 2/8] move to modern input

---
 .../virtualscroller/virtualscroller.ts        | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts
index 755415b6edc..835734a2f6c 100755
--- a/src/app/components/virtualscroller/virtualscroller.ts
+++ b/src/app/components/virtualscroller/virtualscroller.ts
@@ -8,7 +8,7 @@ import {
     ContentChildren,
     ElementRef,
     EventEmitter,
-    Input,
+    input,
     NgModule,
     Output,
     QueryList,
@@ -31,8 +31,8 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
     template: `
         <div
             [ngClass]="'p-virtualscroller p-component'"
-            [ngStyle]="style"
-            [class]="styleClass"
+            [ngStyle]="style()"
+            [class]="styleClass()"
             [attr.data-pc-name]="'virtualscroller'"
             [attr.data-pc-section]="'root'"
         >
@@ -45,16 +45,16 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
             <div #content class="p-virtualscroller-content" [attr.data-pc-section]="'content'">
                 <p-scroller
                     #scroller
-                    [items]="value"
+                    [items]="value()"
                     styleClass="p-virtualscroller-list"
-                    [style]="{ height: scrollHeight }"
-                    [itemSize]="itemSize"
-                    [lazy]="lazy"
+                    [style]="{ height: scrollHeight() }"
+                    [itemSize]="itemSize()"
+                    [lazy]="lazy()"
                     (onLazyLoad)="onLazyItemLoad($event)"
-                    [options]="options"
+                    [options]="options()"
                 >
                     <ng-template pTemplate="item" let-item let-scrollerOptions="options">
-                        <div [ngStyle]="{ height: itemSize + 'px' }" class="p-virtualscroller-item">
+                        <div [ngStyle]="{ height: itemSize() + 'px' }" class="p-virtualscroller-item">
                             <ng-container
                                 *ngTemplateOutlet="
                                     item ? itemTemplate : loadingItemTemplate;
@@ -81,42 +81,42 @@ export class VirtualScroller implements AfterContentInit, BlockableUI {
      * An array of objects to display.
      * @group Props
      */
-    @Input() value: any[] | undefined;
+    value = input<any[]>();
     /**
      * Height of an item in the list.
      * @group Props
      */
-    @Input({ transform: numberAttribute }) itemSize: number | undefined;
+    itemSize = input<number, any>(undefined, { transform: numberAttribute });
     /**
      * Inline style of the component.
      * @group Props
      */
-    @Input() style: { [klass: string]: any } | null | undefined;
+    style = input<{ [klass: string]: any } | null>();
     /**
      * Style class of the component.
      * @group Props
      */
-    @Input() styleClass: string | undefined;
+    styleClass = input<string>();
     /**
      * Max height of the content area in inline mode.
      * @group Props
      */
-    @Input() scrollHeight: any;
+    scrollHeight = input<any>();
     /**
      * Defines if data is loaded and interacted with in lazy manner.
      * @group Props
      */
-    @Input({ transform: booleanAttribute }) lazy: boolean | undefined;
+    lazy = input<boolean, any>(undefined, { transform: booleanAttribute });
     /**
      * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
      * @group Props
      */
-    @Input() options: ScrollerOptions | undefined;
+    options = input<ScrollerOptions>();
     /**
      * Threshold in milliseconds to delay lazy loading during scrolling.
      * @group Props
      */
-    @Input({ transform: numberAttribute }) delay: number = 250;
+    delay = input<number, any>(250, { transform: numberAttribute });
     /**
      * Callback to invoke in lazy mode to load new data.
      * @param {VirtualScrollerLazyLoadEvent} event - custom lazy load event.
@@ -184,7 +184,7 @@ export class VirtualScroller implements AfterContentInit, BlockableUI {
                 rows: <number>event.last - <number>event.first,
                 forceUpdate: () => this.cd.detectChanges(),
             });
-        }, this.delay);
+        }, this.delay());
     }
 
     getBlockableElement(): HTMLElement {

From f8e59101d90be29a73351fb5645271c16c90ffa4 Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Sat, 19 Oct 2024 23:56:36 +0200
Subject: [PATCH 3/8] move to modern output

---
 src/app/components/virtualscroller/virtualscroller.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts
index 835734a2f6c..1413f32b935 100755
--- a/src/app/components/virtualscroller/virtualscroller.ts
+++ b/src/app/components/virtualscroller/virtualscroller.ts
@@ -7,10 +7,10 @@ import {
     ContentChild,
     ContentChildren,
     ElementRef,
-    EventEmitter,
+    OutputEmitterRef,
     input,
     NgModule,
-    Output,
+    output,
     QueryList,
     TemplateRef,
     ViewChild,
@@ -122,7 +122,7 @@ export class VirtualScroller implements AfterContentInit, BlockableUI {
      * @param {VirtualScrollerLazyLoadEvent} event - custom lazy load event.
      * @group Emits
      */
-    @Output() onLazyLoad: EventEmitter<VirtualScrollerLazyLoadEvent> = new EventEmitter<VirtualScrollerLazyLoadEvent>();
+    onLazyLoad: OutputEmitterRef<VirtualScrollerLazyLoadEvent> = output<VirtualScrollerLazyLoadEvent>();
 
     @ContentChild(Header) header: Header | undefined;
 

From 424f7c0135b386fc62b016d758a6aa37e66a5fa0 Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Sun, 20 Oct 2024 00:06:00 +0200
Subject: [PATCH 4/8] move to modern contentChildren

---
 .../virtualscroller/virtualscroller.ts        | 60 +++++++------------
 1 file changed, 21 insertions(+), 39 deletions(-)

diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts
index 1413f32b935..53ceb763f1a 100755
--- a/src/app/components/virtualscroller/virtualscroller.ts
+++ b/src/app/components/virtualscroller/virtualscroller.ts
@@ -5,18 +5,19 @@ import {
     ChangeDetectorRef,
     Component,
     ContentChild,
-    ContentChildren,
+    contentChildren,
     ElementRef,
     OutputEmitterRef,
     input,
     NgModule,
     output,
-    QueryList,
+    Signal,
     TemplateRef,
     ViewChild,
     ViewEncapsulation,
     booleanAttribute,
     numberAttribute,
+    computed,
 } from '@angular/core';
 import { BlockableUI, Footer, Header, PrimeTemplate, ScrollerOptions, SharedModule } from 'primeng/api';
 import { Scroller, ScrollerModule } from 'primeng/scroller';
@@ -36,10 +37,10 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
             [attr.data-pc-name]="'virtualscroller'"
             [attr.data-pc-section]="'root'"
         >
-            @if (header || headerTemplate) {
+            @if (header || headerTemplate()) {
                 <div class="p-virtualscroller-header">
                     <ng-content select="p-header"></ng-content>
-                    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                    <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
                 </div>
             }
             <div #content class="p-virtualscroller-content" [attr.data-pc-section]="'content'">
@@ -57,7 +58,7 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
                         <div [ngStyle]="{ height: itemSize() + 'px' }" class="p-virtualscroller-item">
                             <ng-container
                                 *ngTemplateOutlet="
-                                    item ? itemTemplate : loadingItemTemplate;
+                                    item ? itemTemplate() : loadingItemTemplate();
                                     context: { $implicit: item, options: scrollerOptions }
                                 "
                             ></ng-container>
@@ -65,10 +66,10 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
                     </ng-template>
                 </p-scroller>
             </div>
-            @if (footer || footerTemplate) {
+            @if (footer || footerTemplate()) {
                 <div class="p-virtualscroller-footer" [attr.data-pc-section]="'footer'">
                     <ng-content select="p-footer"></ng-content>
-                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
                 </div>
             }
         </div>
@@ -76,7 +77,7 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
     changeDetection: ChangeDetectionStrategy.Default,
     encapsulation: ViewEncapsulation.None,
 })
-export class VirtualScroller implements AfterContentInit, BlockableUI {
+export class VirtualScroller implements BlockableUI {
     /**
      * An array of objects to display.
      * @group Props
@@ -128,51 +129,32 @@ export class VirtualScroller implements AfterContentInit, BlockableUI {
 
     @ContentChild(Footer) footer: Footer | undefined;
 
-    @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<PrimeTemplate>>;
+    templates: Signal<readonly PrimeTemplate[]> = contentChildren(PrimeTemplate);
 
     @ViewChild('scroller') scroller: Nullable<Scroller>;
 
-    itemTemplate: Nullable<TemplateRef<any>>;
+    itemTemplate = computed<Nullable<TemplateRef<any>>>(() => this.mappedTemplates()['item']);
 
-    headerTemplate: Nullable<TemplateRef<any>>;
+    headerTemplate = computed<Nullable<TemplateRef<any>>>(() => this.mappedTemplates()['header']);
 
-    footerTemplate: Nullable<TemplateRef<any>>;
+    footerTemplate = computed<Nullable<TemplateRef<any>>>(() => this.mappedTemplates()['footer']);
 
-    loadingItemTemplate: Nullable<TemplateRef<any>>;
+    loadingItemTemplate = computed<Nullable<TemplateRef<any>>>(() => this.mappedTemplates()['loadingItem']);
 
     virtualScrollTimeout: any;
 
+    private mappedTemplates = computed<{ [key: string]: TemplateRef<any> }>(() => {
+        return (this.templates() || []).reduce((prev, item) => {
+            prev[item.getType()] = item.template;
+            return prev;
+        }, {});
+    });
+
     constructor(
         public el: ElementRef,
         public cd: ChangeDetectorRef,
     ) {}
 
-    ngAfterContentInit() {
-        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
-            switch (item.getType()) {
-                case 'item':
-                    this.itemTemplate = item.template;
-                    break;
-
-                case 'loadingItem':
-                    this.loadingItemTemplate = item.template;
-                    break;
-
-                case 'header':
-                    this.headerTemplate = item.template;
-                    break;
-
-                case 'footer':
-                    this.footerTemplate = item.template;
-                    break;
-
-                default:
-                    this.itemTemplate = item.template;
-                    break;
-            }
-        });
-    }
-
     onLazyItemLoad(event: VirtualScrollerLazyLoadEvent) {
         if (this.virtualScrollTimeout) {
             clearTimeout(this.virtualScrollTimeout);

From ef46734fb3671f919a5f1feb4fba08dd0067ba58 Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Sun, 20 Oct 2024 00:15:14 +0200
Subject: [PATCH 5/8] move to modern contentChild and viewChild

---
 .../virtualscroller/virtualscroller.ts        | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts
index 53ceb763f1a..4815eeaa139 100755
--- a/src/app/components/virtualscroller/virtualscroller.ts
+++ b/src/app/components/virtualscroller/virtualscroller.ts
@@ -1,10 +1,9 @@
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
-    AfterContentInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    ContentChild,
+    contentChild,
     contentChildren,
     ElementRef,
     OutputEmitterRef,
@@ -13,11 +12,12 @@ import {
     output,
     Signal,
     TemplateRef,
-    ViewChild,
+    viewChild,
     ViewEncapsulation,
     booleanAttribute,
     numberAttribute,
     computed,
+    inject,
 } from '@angular/core';
 import { BlockableUI, Footer, Header, PrimeTemplate, ScrollerOptions, SharedModule } from 'primeng/api';
 import { Scroller, ScrollerModule } from 'primeng/scroller';
@@ -37,7 +37,7 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
             [attr.data-pc-name]="'virtualscroller'"
             [attr.data-pc-section]="'root'"
         >
-            @if (header || headerTemplate()) {
+            @if (header() || headerTemplate()) {
                 <div class="p-virtualscroller-header">
                     <ng-content select="p-header"></ng-content>
                     <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
@@ -66,7 +66,7 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
                     </ng-template>
                 </p-scroller>
             </div>
-            @if (footer || footerTemplate()) {
+            @if (footer() || footerTemplate()) {
                 <div class="p-virtualscroller-footer" [attr.data-pc-section]="'footer'">
                     <ng-content select="p-footer"></ng-content>
                     <ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
@@ -125,13 +125,13 @@ export class VirtualScroller implements BlockableUI {
      */
     onLazyLoad: OutputEmitterRef<VirtualScrollerLazyLoadEvent> = output<VirtualScrollerLazyLoadEvent>();
 
-    @ContentChild(Header) header: Header | undefined;
+    header = contentChild<Header | undefined>(Header);
 
-    @ContentChild(Footer) footer: Footer | undefined;
+    footer = contentChild<Footer | undefined>(Footer);
 
     templates: Signal<readonly PrimeTemplate[]> = contentChildren(PrimeTemplate);
 
-    @ViewChild('scroller') scroller: Nullable<Scroller>;
+    scroller = viewChild<Nullable<Scroller>>('scroller');
 
     itemTemplate = computed<Nullable<TemplateRef<any>>>(() => this.mappedTemplates()['item']);
 
@@ -150,10 +150,9 @@ export class VirtualScroller implements BlockableUI {
         }, {});
     });
 
-    constructor(
-        public el: ElementRef,
-        public cd: ChangeDetectorRef,
-    ) {}
+    el = inject(ElementRef);
+
+    cd = inject(ChangeDetectorRef);
 
     onLazyItemLoad(event: VirtualScrollerLazyLoadEvent) {
         if (this.virtualScrollTimeout) {
@@ -174,7 +173,7 @@ export class VirtualScroller implements BlockableUI {
     }
 
     scrollToIndex(index: number, mode?: ScrollBehavior): void {
-        this.scroller?.scrollToIndex(index, mode);
+        this.scroller()?.scrollToIndex(index, mode);
     }
 }
 

From 97dc41b937142ce8b1024297870557b92cfcc554 Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Sun, 20 Oct 2024 00:48:09 +0200
Subject: [PATCH 6/8] add tests

---
 .../virtualscroller/virtualscroller.spec.ts   | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/app/components/virtualscroller/virtualscroller.spec.ts

diff --git a/src/app/components/virtualscroller/virtualscroller.spec.ts b/src/app/components/virtualscroller/virtualscroller.spec.ts
new file mode 100644
index 00000000000..6b95af9b923
--- /dev/null
+++ b/src/app/components/virtualscroller/virtualscroller.spec.ts
@@ -0,0 +1,46 @@
+import { ComponentRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { VirtualScroller, VirtualScrollerModule } from './virtualscroller';
+
+fdescribe('VirtualScroller', () => {
+    let virtualScroller: VirtualScroller;
+    let fixture: ComponentFixture<VirtualScroller>;
+    let virtualScrollerRef: ComponentRef<VirtualScroller>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [NoopAnimationsModule, VirtualScrollerModule],
+        });
+
+        fixture = TestBed.createComponent(VirtualScroller);
+        virtualScroller = fixture.componentInstance;
+        virtualScrollerRef = fixture.componentRef;
+    });
+
+    it('should render the VirtualScroller with default inputs', () => {
+        fixture.detectChanges();
+
+        const virtualScrollerElement = fixture.nativeElement.querySelector('.p-virtualscroller');
+        expect(virtualScrollerElement).toBeTruthy();
+    });
+
+    it('should apply the correct style and styleClass', () => {
+        virtualScrollerRef.setInput('style', { 'max-height': '500px' });
+        virtualScrollerRef.setInput('styleClass', 'custom-class');
+        fixture.detectChanges();
+
+        const virtualScrollerElement = fixture.nativeElement.querySelector('.p-virtualscroller');
+        expect(virtualScrollerElement.style.maxHeight).toBe('500px');
+        expect(virtualScrollerElement.classList).toContain('custom-class');
+    });
+
+    it('should scroll to the specified index', () => {
+        spyOn(virtualScroller.scroller(), 'scrollToIndex');
+
+        virtualScroller.scrollToIndex(10);
+        fixture.detectChanges();
+
+        expect(virtualScroller.scroller().scrollToIndex).toHaveBeenCalledWith(10, undefined);
+    });
+});

From dacccf5403c97c1f819e1bf5111b25f2e95ef328 Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Sun, 20 Oct 2024 00:51:14 +0200
Subject: [PATCH 7/8] add tests

---
 src/app/components/virtualscroller/virtualscroller.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/virtualscroller/virtualscroller.spec.ts b/src/app/components/virtualscroller/virtualscroller.spec.ts
index 6b95af9b923..ff879d14776 100644
--- a/src/app/components/virtualscroller/virtualscroller.spec.ts
+++ b/src/app/components/virtualscroller/virtualscroller.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { VirtualScroller, VirtualScrollerModule } from './virtualscroller';
 
-fdescribe('VirtualScroller', () => {
+describe('VirtualScroller', () => {
     let virtualScroller: VirtualScroller;
     let fixture: ComponentFixture<VirtualScroller>;
     let virtualScrollerRef: ComponentRef<VirtualScroller>;

From cdcbbd1ee3304e72cf1e41798e54c16c8d2900e7 Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Date: Mon, 21 Oct 2024 01:42:02 +0200
Subject: [PATCH 8/8] better syntax

---
 src/app/components/virtualscroller/virtualscroller.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts
index c9e1bb5a1a1..324925ba423 100755
--- a/src/app/components/virtualscroller/virtualscroller.ts
+++ b/src/app/components/virtualscroller/virtualscroller.ts
@@ -55,7 +55,7 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
                     [options]="options()"
                 >
                     <ng-template #item let-item let-scrollerOptions="options">
-                        <div [ngStyle]="{ height: itemSize() + 'px' }" class="p-virtualscroller-item">
+                        <div [style.height.px]="itemSize()" class="p-virtualscroller-item">
                             <ng-container
                                 *ngTemplateOutlet="
                                     item ? itemTemplate() : loadingItemTemplate();