@ruc-lib/virtual-scroll 3.2.0 → 4.0.0

package/README.md

@@ -13,46 +13,75 @@ npm install @uxpractice/ruc-lib
 
 ### Install Individual Component
 
-If you only need the Virtual Scroll component
+If you only need the VirtualScroll component:
+
+**For Angular 15:**
+```bash
+npm install @ruc-lib/virtual-scroll@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
+```
+
+**For Angular 16:**
+```bash
+npm install @ruc-lib/virtual-scroll@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
+```
+
+**For Angular 17:**
+```bash
+npm install @ruc-lib/virtual-scroll@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
+```
+
+**For Angular 18:**
+```bash
+npm install @ruc-lib/virtual-scroll@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
+```
+
+**For Angular 19:**
 ```bash
-npm install @ruc-lib/virtual-scroll
+npm install @ruc-lib/virtual-scroll@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
 ```
 
+**For Angular 20:**
+```bash
+npm install @ruc-lib/virtual-scroll@4.0.0
+```
+
+> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
+
 ## Version Compatibility
  
 Please ensure you install the correct version of `@ruc-lib/virtual-scroll` based on your Angular version.
  
 | Angular Version    | Compatible `@ruc-lib/virtual-scroll` Version     |
-|--------------------|---------------------------------------------|
+|--------------------|--------------------------------------------------|
 | 15.x.x             | `npm install @ruc-lib/virtual-scroll@^3.2.0`     |
 | 16.x.x             | `npm install @ruc-lib/virtual-scroll@^3.2.0`     |
+| 17.x.x             | `npm install @ruc-lib/virtual-scroll@^4.0.0`     |
+| 18.x.x             | `npm install @ruc-lib/virtual-scroll@^4.0.0`     |
+| 19.x.x             | `npm install @ruc-lib/virtual-scroll@^4.0.0`     |
+| 20.x.x             | `npm install @ruc-lib/virtual-scroll@^4.0.0`     |
 
 
 ## Usage
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibVirtualScrollModule`:
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibVirtualScrollComponent`:
 
 ```typescript
+import { Component } from '@angular/core';
+
 // For Complete Library
-import { RuclibVirtualScrollModule } from '@uxpractice/ruc-lib/virtual-scroll';
+import { RuclibVirtualScrollComponent } from '@uxpractice/ruc-lib/virtual-scroll';
 
 // For Individual Package
-import { RuclibVirtualScrollModule } from '@ruc-lib/virtual-scroll';
-
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    RuclibVirtualScrollModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+import { RuclibVirtualScrollComponent } from '@ruc-lib/virtual-scroll';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibVirtualScrollComponent],
+  templateUrl: './app.component.html',
 })
-export class AppModule {}
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component

package/fesm2022/ruc-lib-virtual-scroll.mjs

@@ -0,0 +1,143 @@
+import * as i0 from '@angular/core';
+import { ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+class RuclibVirtualScrollComponent {
+    constructor() {
+        // Configuration object, aligns with how other components might be fed data in your app
+        this.rucInputData = {};
+        this.itemSize = 10; // Default item size in pixels
+        this.viewportWidth = '100vw'; // Default viewport width
+        this.viewportHeight = '100vh'; // Default viewport height
+        this.clientHeight = 0;
+        // Optional: For theming, if your component needs to react to theme changes
+        this.customTheme = '';
+    }
+    ngOnInit() {
+        this.updateInternalState();
+    }
+    ngOnChanges(changes) {
+        // Re-process inputs if they change
+        if (changes['rucInputData']) {
+            this.updateInternalState();
+        }
+    }
+    ngAfterViewChecked() {
+        const isDataLoading = this.rucInputData?.isLoad || false;
+        if (isDataLoading) {
+            this.scrollToIndex();
+        }
+    }
+    updateInternalState() {
+        this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
+        // Update itemSize from rucInputData if provided, otherwise keep current or default
+        this.itemSize =
+            this.rucInputData?.itemSize !== undefined
+                ? this.rucInputData.itemSize
+                : this.itemSize;
+        // Update viewportWidth from rucInputData if provided, otherwise keep current or default
+        this.viewportWidth =
+            this.rucInputData?.viewportWidth !== undefined
+                ? this.rucInputData.viewportWidth
+                : this.viewportWidth;
+        // Update viewportHeight from rucInputData if provided, otherwise keep current or default
+        this.viewportHeight =
+            this.rucInputData?.viewportHeight !== undefined
+                ? this.rucInputData.viewportHeight
+                : this.viewportHeight;
+    }
+    /**
+     * Example public method that can be called by a parent component.
+     * Scrolls the virtual scroll viewport to the specified index.
+     * @param index The index of the item to scroll to.
+     * @param behavior Optional scroll behavior ('auto', 'smooth').
+     */
+    scrollToIndex() {
+        const newClientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
+        if (this.virtualScrollViewport) {
+            if (newClientHeight !== this.clientHeight) {
+                this.clientHeight = document.getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0].clientHeight;
+                document
+                    .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]
+                    .scrollIntoView({ behavior: 'auto', block: 'end' });
+            }
+        }
+        else {
+            console.warn('RuclibVirtualScrollComponent: Viewport not available to scroll.');
+        }
+    }
+    /**
+     * To handle the scroll position on top by using back to top icon
+     * @returns scroll position at top
+     */
+    handleScroll() {
+        document
+            .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]
+            .scrollIntoView({ behavior: 'auto', block: 'start' });
+    }
+    /**
+     * To get the icon of back to top icon
+     * @returns default: 'arrow_upward'
+     */
+    getBackToTopIcon() {
+        return this.rucInputData?.backToTopIcon || 'arrow_upward';
+    }
+    /**
+     * To get the label of back to top icon
+     * @returns default: 'Back to Top'
+     */
+    getBackToTopLabel() {
+        return this.rucInputData?.backToTopLabel || 'Back to Top';
+    }
+    /**
+     * To get the color of icon
+     * @returns default: false
+     */
+    getIconColor() {
+        return this.rucInputData?.iconColor || 'primary';
+    }
+    /**
+     * To check wheteher back to top icon shold be there or not in view
+     * @returns default: false
+     */
+    isBackToTopIcon() {
+        return this.rucInputData?.isBackToTopIcon || false;
+    }
+    /**
+     * To get the thumb color of virtual scroll
+     * @returns default: '#888'
+     */
+    getScrollbarThumbColor() {
+        return this.rucInputData?.thumbColor || '#888';
+    }
+    /**
+     * To get the track color of virtual scroll
+     * @returns default: '#f1f1f1'
+     */
+    getScrollbarTrackColor() {
+        return this.rucInputData?.trackColor || '#f1f1f1';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibVirtualScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibVirtualScrollComponent, isStandalone: true, selector: "uxp-ruclib-virtual-scroll", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport\r\n  [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n  class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n  <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n@if (isBackToTopIcon()) {\r\n  <div class=\"virtual-scrollar__back-to-top\">\r\n    <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n      <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n    </button>\r\n  </div>\r\n}", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibVirtualScrollComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-virtual-scroll', imports: [ScrollingModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport\r\n  [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n  class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n  <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n@if (isBackToTopIcon()) {\r\n  <div class=\"virtual-scrollar__back-to-top\">\r\n    <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n      <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n    </button>\r\n  </div>\r\n}", styles: [".virtual-scrollar-wrapper{border:1px solid #ccc}.virtual-scrollar__back-to-top{margin:8px 0}.virtual-scrollar__back-to-top .virtual-scrollar__back-to-top-btn{cursor:pointer}::ng-deep .cdk-virtual-scroll-content-wrapper{contain:inline-size!important}\n"] }]
+        }], propDecorators: { rucInputData: [{
+                type: Input
+            }], customTheme: [{
+                type: Input
+            }], virtualScrollViewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibVirtualScrollComponent };
+//# sourceMappingURL=ruc-lib-virtual-scroll.mjs.map

package/fesm2022/ruc-lib-virtual-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-virtual-scroll.mjs","sources":["../../src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.ts","../../src/lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component.html","../../src/ruc-lib-virtual-scroll.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Input,\r\n  OnChanges,\r\n  OnInit,\r\n  SimpleChanges,\r\n  ViewChild,\r\n} from '@angular/core';\r\n\r\nimport { RucVirtualScrollInput } from '../../model/ruclib-virtual-scroll.model';\r\nimport {\r\n  CdkVirtualScrollViewport,\r\n  ScrollingModule,\r\n} from '@angular/cdk/scrolling';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\n@Component({\r\n    selector: 'uxp-ruclib-virtual-scroll',\r\n    imports: [ScrollingModule, MatIconModule],\r\n    templateUrl: './ruclib-virtual-scroll.component.html',\r\n    styleUrl: './ruclib-virtual-scroll.component.scss',\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class RuclibVirtualScrollComponent implements OnInit, OnChanges {\r\n  // Configuration object, aligns with how other components might be fed data in your app\r\n  @Input() rucInputData: RucVirtualScrollInput = {};\r\n  itemSize = 10; // Default item size in pixels\r\n  viewportWidth = '100vw'; // Default viewport width\r\n  viewportHeight = '100vh'; // Default viewport height\r\n  clientHeight = 0;\r\n\r\n  // Optional: For theming, if your component needs to react to theme changes\r\n  @Input() customTheme = '';\r\n\r\n  @ViewChild(CdkVirtualScrollViewport) virtualScrollViewport:\r\n    | CdkVirtualScrollViewport\r\n    | undefined;\r\n\r\n  ngOnInit(): void {\r\n    this.updateInternalState();\r\n  }\r\n\r\n  ngOnChanges(changes: SimpleChanges): void {\r\n    // Re-process inputs if they change\r\n    if (changes['rucInputData']) {\r\n      this.updateInternalState();\r\n    }\r\n  }\r\n\r\n  ngAfterViewChecked() {\r\n    const isDataLoading = this.rucInputData?.isLoad || false;\r\n    if (isDataLoading) {\r\n      this.scrollToIndex();\r\n    }\r\n  }\r\n\r\n  private updateInternalState(): void {\r\n    this.clientHeight = document.getElementsByClassName(\r\n      'cdk-virtual-scroll-content-wrapper'\r\n    )[0].clientHeight;\r\n\r\n    // Update itemSize from rucInputData if provided, otherwise keep current or default\r\n    this.itemSize =\r\n      this.rucInputData?.itemSize !== undefined\r\n        ? this.rucInputData.itemSize\r\n        : this.itemSize;\r\n\r\n    // Update viewportWidth from rucInputData if provided, otherwise keep current or default\r\n    this.viewportWidth =\r\n      this.rucInputData?.viewportWidth !== undefined\r\n        ? this.rucInputData.viewportWidth\r\n        : this.viewportWidth;\r\n\r\n    // Update viewportHeight from rucInputData if provided, otherwise keep current or default\r\n    this.viewportHeight =\r\n      this.rucInputData?.viewportHeight !== undefined\r\n        ? this.rucInputData.viewportHeight\r\n        : this.viewportHeight;\r\n  }\r\n\r\n  /**\r\n   * Example public method that can be called by a parent component.\r\n   * Scrolls the virtual scroll viewport to the specified index.\r\n   * @param index The index of the item to scroll to.\r\n   * @param behavior Optional scroll behavior ('auto', 'smooth').\r\n   */\r\n  public scrollToIndex(): void {\r\n    const newClientHeight = document.getElementsByClassName(\r\n      'cdk-virtual-scroll-content-wrapper'\r\n    )[0].clientHeight;\r\n    if (this.virtualScrollViewport) {\r\n      if (newClientHeight !== this.clientHeight) {\r\n        this.clientHeight = document.getElementsByClassName(\r\n          'cdk-virtual-scroll-content-wrapper'\r\n        )[0].clientHeight;\r\n        document\r\n          .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]\r\n          .scrollIntoView({ behavior: 'auto', block: 'end' });\r\n      }\r\n    } else {\r\n      console.warn(\r\n        'RuclibVirtualScrollComponent: Viewport not available to scroll.'\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * To handle the scroll position on top by using back to top icon\r\n   * @returns scroll position at top\r\n   */\r\n  public handleScroll(): void {\r\n    document\r\n      .getElementsByClassName('cdk-virtual-scroll-content-wrapper')[0]\r\n      .scrollIntoView({ behavior: 'auto', block: 'start' });\r\n  }\r\n\r\n  /**\r\n   * To get the icon of back to top icon\r\n   * @returns default: 'arrow_upward'\r\n   */\r\n  getBackToTopIcon(): string {\r\n    return this.rucInputData?.backToTopIcon || 'arrow_upward';\r\n  }\r\n\r\n  /**\r\n   * To get the label of back to top icon\r\n   * @returns default: 'Back to Top'\r\n   */\r\n  getBackToTopLabel(): string {\r\n    return this.rucInputData?.backToTopLabel || 'Back to Top';\r\n  }\r\n\r\n  /**\r\n   * To get the color of icon\r\n   * @returns default: false\r\n   */\r\n  getIconColor(): string {\r\n    return this.rucInputData?.iconColor || 'primary';\r\n  }\r\n\r\n  /**\r\n   * To check wheteher back to top icon shold be there or not in view\r\n   * @returns default: false\r\n   */\r\n  isBackToTopIcon(): boolean {\r\n    return this.rucInputData?.isBackToTopIcon || false;\r\n  }\r\n\r\n  /**\r\n   * To get the thumb color of virtual scroll\r\n   * @returns default: '#888'\r\n   */\r\n  getScrollbarThumbColor(): string {\r\n    return this.rucInputData?.thumbColor || '#888';\r\n  }\r\n\r\n  /**\r\n   * To get the track color of virtual scroll\r\n   * @returns default: '#f1f1f1'\r\n   */\r\n  getScrollbarTrackColor(): string {\r\n    return this.rucInputData?.trackColor || '#f1f1f1';\r\n  }\r\n}\r\n","<cdk-virtual-scroll-viewport\r\n  [style.scrollbar-color]=\"getScrollbarThumbColor() + ' ' + getScrollbarTrackColor()\"\r\n  class=\"virtual-scrollar-wrapper\" itemSize=\"itemSize\" [style.width]=\"viewportWidth\" [style.height]=\"viewportHeight\">\r\n  <ng-content></ng-content>\r\n</cdk-virtual-scroll-viewport>\r\n\r\n@if (isBackToTopIcon()) {\r\n  <div class=\"virtual-scrollar__back-to-top\">\r\n    <button class=\"virtual-scrollar__back-to-top-btn\" mat-mini-fab aria-label=\"getBackToTopLabel()\" (click)=\"handleScroll()\">\r\n      <mat-icon color=\"{{getIconColor()}}\">{{getBackToTopIcon()}}</mat-icon>\r\n    </button>\r\n  </div>\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAwBa,4BAA4B,CAAA;AAPzC,IAAA,WAAA,GAAA;;QASW,IAAA,CAAA,YAAY,GAA0B,EAAE;AACjD,QAAA,IAAA,CAAA,QAAQ,GAAG,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,aAAa,GAAG,OAAO,CAAC;AACxB,QAAA,IAAA,CAAA,cAAc,GAAG,OAAO,CAAC;QACzB,IAAA,CAAA,YAAY,GAAG,CAAC;;QAGP,IAAA,CAAA,WAAW,GAAG,EAAE;AAmI1B,IAAA;IA7HC,QAAQ,GAAA;QACN,IAAI,CAAC,mBAAmB,EAAE;IAC5B;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAEhC,QAAA,IAAI,OAAO,CAAC,cAAc,CAAC,EAAE;YAC3B,IAAI,CAAC,mBAAmB,EAAE;QAC5B;IACF;IAEA,kBAAkB,GAAA;QAChB,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,IAAI,KAAK;QACxD,IAAI,aAAa,EAAE;YACjB,IAAI,CAAC,aAAa,EAAE;QACtB;IACF;IAEQ,mBAAmB,GAAA;AACzB,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,sBAAsB,CACjD,oCAAoC,CACrC,CAAC,CAAC,CAAC,CAAC,YAAY;;AAGjB,QAAA,IAAI,CAAC,QAAQ;AACX,YAAA,IAAI,CAAC,YAAY,EAAE,QAAQ,KAAK;AAC9B,kBAAE,IAAI,CAAC,YAAY,CAAC;AACpB,kBAAE,IAAI,CAAC,QAAQ;;AAGnB,QAAA,IAAI,CAAC,aAAa;AAChB,YAAA,IAAI,CAAC,YAAY,EAAE,aAAa,KAAK;AACnC,kBAAE,IAAI,CAAC,YAAY,CAAC;AACpB,kBAAE,IAAI,CAAC,aAAa;;AAGxB,QAAA,IAAI,CAAC,cAAc;AACjB,YAAA,IAAI,CAAC,YAAY,EAAE,cAAc,KAAK;AACpC,kBAAE,IAAI,CAAC,YAAY,CAAC;AACpB,kBAAE,IAAI,CAAC,cAAc;IAC3B;AAEA;;;;;AAKG;IACI,aAAa,GAAA;AAClB,QAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,sBAAsB,CACrD,oCAAoC,CACrC,CAAC,CAAC,CAAC,CAAC,YAAY;AACjB,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;AAC9B,YAAA,IAAI,eAAe,KAAK,IAAI,CAAC,YAAY,EAAE;AACzC,gBAAA,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,sBAAsB,CACjD,oCAAoC,CACrC,CAAC,CAAC,CAAC,CAAC,YAAY;gBACjB;AACG,qBAAA,sBAAsB,CAAC,oCAAoC,CAAC,CAAC,CAAC;qBAC9D,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;YACvD;QACF;aAAO;AACL,YAAA,OAAO,CAAC,IAAI,CACV,iEAAiE,CAClE;QACH;IACF;AAEA;;;AAGG;IACI,YAAY,GAAA;QACjB;AACG,aAAA,sBAAsB,CAAC,oCAAoC,CAAC,CAAC,CAAC;aAC9D,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;IACzD;AAEA;;;AAGG;IACH,gBAAgB,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,aAAa,IAAI,cAAc;IAC3D;AAEA;;;AAGG;IACH,iBAAiB,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,cAAc,IAAI,aAAa;IAC3D;AAEA;;;AAGG;IACH,YAAY,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,SAAS,IAAI,SAAS;IAClD;AAEA;;;AAGG;IACH,eAAe,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,eAAe,IAAI,KAAK;IACpD;AAEA;;;AAGG;IACH,sBAAsB,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,UAAU,IAAI,MAAM;IAChD;AAEA;;;AAGG;IACH,sBAAsB,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE,UAAU,IAAI,SAAS;IACnD;8GA3IW,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,kNAW5B,wBAAwB,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnCrC,0oBAYC,EAAA,MAAA,EAAA,CAAA,6PAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDOa,eAAe,4WAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK/B,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;+BACI,2BAA2B,EAAA,OAAA,EAC5B,CAAC,eAAe,EAAE,aAAa,CAAC,EAAA,eAAA,EAGxB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,0oBAAA,EAAA,MAAA,EAAA,CAAA,6PAAA,CAAA,EAAA;;sBAIhD;;sBAOA;;sBAEA,SAAS;uBAAC,wBAAwB;;;AEnCrC;;AAEG;;;;"}

package/index.d.ts

@@ -1,2 +1,109 @@
-export * from './lib/ruclib-virtual-scroll.module';
-export * from './lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component';
+import * as i0 from '@angular/core';
+import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+
+/**
+ *Interface for defining the Virtual Scroll Input
+ */
+interface RucVirtualScrollInput {
+    /**
+     * The size of each item in the list in pixels.
+     */
+    itemSize?: number;
+    /**
+     * The width of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
+     */
+    viewportWidth?: string;
+    /**
+     * The height of the virtual scroll viewport. Can be a percentage, pixels, or other CSS unit.
+     */
+    viewportHeight?: string;
+    /**
+     * The name of the Material icon to use for the 'back to top' button.
+     */
+    backToTopIcon?: string;
+    /**
+     * The label text for the 'back to top' button.
+     */
+    backToTopLabel?: string;
+    /**
+     * The color of the 'back to top' icon (e.g., 'primary', 'accent', 'warn').
+     */
+    iconColor?: string;
+    /**
+     * Determines whether to display the 'back to top' icon.
+     */
+    isBackToTopIcon?: boolean;
+    /**
+     * A flag to indicate if the virtual scroll is currently loading data.
+     */
+    isLoad?: boolean;
+    /**
+     * The color of the scrollbar thumb.
+     */
+    thumbColor?: string;
+    /**
+     * The color of the scrollbar track.
+     */
+    trackColor?: string;
+}
+
+declare class RuclibVirtualScrollComponent implements OnInit, OnChanges {
+    rucInputData: RucVirtualScrollInput;
+    itemSize: number;
+    viewportWidth: string;
+    viewportHeight: string;
+    clientHeight: number;
+    customTheme: string;
+    virtualScrollViewport: CdkVirtualScrollViewport | undefined;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewChecked(): void;
+    private updateInternalState;
+    /**
+     * Example public method that can be called by a parent component.
+     * Scrolls the virtual scroll viewport to the specified index.
+     * @param index The index of the item to scroll to.
+     * @param behavior Optional scroll behavior ('auto', 'smooth').
+     */
+    scrollToIndex(): void;
+    /**
+     * To handle the scroll position on top by using back to top icon
+     * @returns scroll position at top
+     */
+    handleScroll(): void;
+    /**
+     * To get the icon of back to top icon
+     * @returns default: 'arrow_upward'
+     */
+    getBackToTopIcon(): string;
+    /**
+     * To get the label of back to top icon
+     * @returns default: 'Back to Top'
+     */
+    getBackToTopLabel(): string;
+    /**
+     * To get the color of icon
+     * @returns default: false
+     */
+    getIconColor(): string;
+    /**
+     * To check wheteher back to top icon shold be there or not in view
+     * @returns default: false
+     */
+    isBackToTopIcon(): boolean;
+    /**
+     * To get the thumb color of virtual scroll
+     * @returns default: '#888'
+     */
+    getScrollbarThumbColor(): string;
+    /**
+     * To get the track color of virtual scroll
+     * @returns default: '#f1f1f1'
+     */
+    getScrollbarTrackColor(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibVirtualScrollComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RuclibVirtualScrollComponent, "uxp-ruclib-virtual-scroll", never, { "rucInputData": { "alias": "rucInputData"; "required": false; }; "customTheme": { "alias": "customTheme"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+export { RuclibVirtualScrollComponent };

package/package.json

@@ -1,26 +1,16 @@
 {
   "name": "@ruc-lib/virtual-scroll",
-  "version": "3.2.0",
-  "license": "MIT",
+  "version": "4.0.0",
   "peerDependencies": {
-    "@angular/common": "^17.0.0 || ^16.0.0 || ^15.0.0",
-    "@angular/core": "^17.0.0 || ^16.0.0 || ^15.0.0",
-    "@angular/material": "^15.2.9 || ^14.0.0 || ^13.0.0",
-    "@angular/cdk": "15.2.9",
-    "@angular/platform-browser": "15.2.10"
+    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "sideEffects": false,
-  "module": "fesm2015/ruc-lib-virtual-scroll.mjs",
-  "es2020": "fesm2020/ruc-lib-virtual-scroll.mjs",
-  "esm2020": "esm2020/ruc-lib-virtual-scroll.mjs",
-  "fesm2020": "fesm2020/ruc-lib-virtual-scroll.mjs",
-  "fesm2015": "fesm2015/ruc-lib-virtual-scroll.mjs",
+  "module": "fesm2022/ruc-lib-virtual-scroll.mjs",
   "typings": "index.d.ts",
   "exports": {
     "./package.json": {
@@ -28,11 +18,7 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/ruc-lib-virtual-scroll.mjs",
-      "es2020": "./fesm2020/ruc-lib-virtual-scroll.mjs",
-      "es2015": "./fesm2015/ruc-lib-virtual-scroll.mjs",
-      "node": "./fesm2015/ruc-lib-virtual-scroll.mjs",
-      "default": "./fesm2020/ruc-lib-virtual-scroll.mjs"
+      "default": "./fesm2022/ruc-lib-virtual-scroll.mjs"
     }
   }
-}
+}

package/esm2020/index.mjs

@@ -1,3 +0,0 @@
-export * from './lib/ruclib-virtual-scroll.module';
-export * from './lib/ruclib-virtual-scroll/ruclib-virtual-scroll.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLDZEQUE2RCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9saWIvcnVjbGliLXZpcnR1YWwtc2Nyb2xsLm1vZHVsZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL3J1Y2xpYi12aXJ0dWFsLXNjcm9sbC9ydWNsaWItdmlydHVhbC1zY3JvbGwuY29tcG9uZW50JzsiXX0=