@unipin/angular-applet 18.9.3 → 18.9.5

package/projects/unipin-angular/src/lib/components/grids/grid-snapshot/grid-snapshot.component.ts

@@ -0,0 +1,229 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ColDef, IDatasource, IGetRowsParams, ModuleRegistry, GridReadyEvent, DragStoppedEvent, SelectionChangedEvent, GridApi, PaginationChangedEvent, RowClassParams, RowNode } from '@ag-grid-community/core';
+import { AgGridModule } from '@ag-grid-community/angular';
+import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
+import { GridConfig } from '../interfaces/grid-config.interface';
+import { GridService } from '../services/grid.service';
+
+@Component({
+  standalone: true,
+  selector: 'up-snapshot-grid',
+  styleUrl: './grid-snapshot.component.scss',
+  templateUrl: './grid-snapshot.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AgGridModule
+  ]
+})
+export class GridSnapshotComponent implements OnInit, OnDestroy {
+
+  /**
+   * Input variable for specifying the unique identifier of the ag-Grid component.
+   * @type {`grid-${ string }`}
+   */
+  @Input() public id: `grid-${ string }` = 'grid-s';
+
+  /**
+   * Input variable for the configuration object defining the ag-Grid properties.
+   * @type {GridConfig}
+   * @required
+   */
+  @Input({ required: true }) public config!: GridConfig;
+
+  /**
+   * Input variable for specifying the row selection mode. It can be 'single' or 'multiple'.
+   * @type {('single' | 'multiple')}
+   */
+  @Input() public rowSelection: 'single' | 'multiple' = 'single';
+
+  /**
+   * Callback version of property `rowClass` to set class(es) for each row individually. 
+   * Function should return either a string (class name), array of strings (array of class names) or undefined for no class.
+   * @type { RowClassParams<TData = any, TContext = any> }
+   * @returns { string }
+   */ 
+  @Input() public getRowClass: ((params: RowClassParams<RowNode, any>) => string) | undefined;
+
+  /**
+   * Output event emitter triggered when a row in the ag-Grid is clicked.
+   * Emits the data associated with the clicked row.
+   * @type {EventEmitter<any>}
+   */
+  @Output() public readonly onRowClick: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * Output event emitter triggered when the ag-Grid is ready.
+   * Emits a `GridReadyEvent` object.
+   * @type {EventEmitter<GridReadyEvent>}
+   */
+  @Output() public readonly onGridReady: EventEmitter<GridReadyEvent> = new EventEmitter();
+
+  /**
+   * Output event emitter triggered when the selection in the ag-Grid changes.
+   * Emits a `SelectionChangedEvent<any>` object.
+   * @type {EventEmitter<SelectionChangedEvent<any>>}
+   */
+  @Output() public readonly onSelectionChanged: EventEmitter<SelectionChangedEvent<any>> = new EventEmitter();
+
+  /**
+   * Default column definition for the ag-Grid.
+   * @type {ColDef}
+   */
+  public readonly defaultColDef: ColDef = { minWidth: 200, flex: 1, sortable: true, resizable: true, sortingOrder: [ 'asc', 'desc' ], cellStyle: { textAlign: 'left' }};
+
+  /**
+   * Protected variable to store sorting information.
+   * @type {{ orderBy: string, order: string }}
+   */
+  protected readonly sort: { orderBy: string, order: string } = { order: '', orderBy: '' };
+  
+  /**
+   * Protected variable to store the total count of records.
+   * @type {number | undefined}
+   */
+  protected count?: number;
+
+  /**
+   * Protected variable to store the ag-Grid API.
+   * @type {GridApi}
+   */
+  protected gridApi!: GridApi;
+
+  /**
+   * Protected variable to store the subscription to data retrieval.
+   * @type {Subscription | undefined}
+   */
+  protected subs?: Subscription;
+
+  /**
+   * Protected variable to store the cursor for paginating snapshot data.
+   * @type {string | null}
+   */
+  protected after?: string | null;
+
+  constructor(
+    protected readonly service: GridService
+  ) {
+    ModuleRegistry.register(InfiniteRowModelModule);
+  }
+
+  /**
+   * Lifecycle hook to initialize the component.
+   * Sets default values for rowPerPage and noRowText properties in the configuration.
+   */
+  public ngOnInit(): void{
+    if (!this.config.rowPerPage) this.config.rowPerPage = 50;
+
+    this.config.noRowText = `<span class="f20">${ this.config.noRowText?? 'Data not found' }</span>`;
+  }
+
+  /**
+   * Lifecycle hook to handle component destruction.
+   * Unsubscribes from data retrieval subscriptions.
+   */
+  public ngOnDestroy(): void{ this.subs?.unsubscribe(); }
+
+  /**
+   * Event handler for clicking a row in the ag-Grid.
+   * Emits the data associated with the clicked row.
+   * @param {any} data - Data associated with the clicked row.
+   */
+  public clickRow(data: any): void{ this.onRowClick.emit(data.node); }
+
+  /**
+   * Event handler for when column drag stops in the ag-Grid.
+   * Saves the column state to local storage.
+   * @param {DragStoppedEvent} param0 - DragStoppedEvent object containing API information.
+   */
+  public dragColumn({ api }: DragStoppedEvent): void{ localStorage.setItem(this.id, JSON.stringify(api.getColumnState())); }
+
+  /**
+   * Event handler for selection change in the ag-Grid.
+   * Emits a `SelectionChangedEvent<any>` object.
+   * @param {SelectionChangedEvent<any>} data - SelectionChangedEvent object.
+   */
+  public changeSelected(data: SelectionChangedEvent<any>): void{ this.onSelectionChanged.emit(data); }
+
+  /**
+   * Event handler for pagination change in the ag-Grid.
+   * Updates the rowPerPage property in the configuration based on the new page size.
+   * @param {PaginationChangedEvent} ev - PaginationChangedEvent object.
+   */
+  public changePagination(ev: PaginationChangedEvent): void{
+    if (ev.newPageSize) this.config.rowPerPage = this.gridApi.paginationGetPageSize();
+  }
+
+  /**
+   * Event handler for setting the datasource when the ag-Grid is ready.
+   * Emits the onGridReady event and sets the API in the GridService.
+   * Applies column state from local storage and resets the grid.
+   * @param {GridReadyEvent} ev - GridReadyEvent object.
+   */
+  public setDatasource(ev: GridReadyEvent): void{
+    this.gridApi = ev.api;
+    this.onGridReady.emit(ev);
+    this.service.setApi(this.id, this.gridApi);
+
+    const state = JSON.parse(localStorage.getItem(this.id) as any);
+    if (state) {
+      this.gridApi.applyColumnState({ state, applyOrder: true });
+      this.gridApi.setColumnsVisible(this.gridApi.getAllGridColumns(), true);
+    }
+
+    this.reset();
+  }
+
+  /**
+   * Resets the datasource for snapshot data.
+   * Retrieves rows asynchronously based on pagination and sorting.
+   * Updates the count of records and calls success or fail callbacks accordingly.
+   */
+  public reset(): void{
+    const datasource: IDatasource = {
+      getRows: ({ sortModel: [{ colId, sort }], successCallback, failCallback }: IGetRowsParams) => {
+        this.gridApi.showLoadingOverlay();
+
+        if (colId !== this.sort.orderBy || sort !== this.sort.order) {
+          this.sort.order = sort;
+          this.sort.orderBy = colId;
+
+          this.gridApi.paginationGoToFirstPage();
+        }
+
+        const page = this.gridApi.paginationGetCurrentPage();
+        if (page === 0) this.after = null;
+
+        this.subs = this.config.getDataSnapshot!(this.config.rowPerPage!, colId, sort, this.after).subscribe({
+          next: ({ data, totalRecord }) => {
+            this.gridApi.hideOverlay();
+
+            const { edges, pageInfo } = data;
+            if (edges.length > 0) this.after = pageInfo.endCursor;
+
+            if (page === 0) {
+              if (edges.length === 0){
+                this.gridApi.setGridOption('overlayNoRowsTemplate', this.config.noRowText);
+                this.gridApi.showNoRowsOverlay();
+              }
+              this.count = totalRecord;
+            }
+
+            if (!this.config.useTotalRecord && !pageInfo.hasNextPage) {
+              this.count = (page * this.config.rowPerPage!) + edges.length;
+            }
+            successCallback(edges, this.count);
+          },
+          error: ({ message }) => {
+            this.gridApi.setGridOption('overlayNoRowsTemplate', `<span class="f20">${ message }</span>`);
+
+            this.gridApi.hideOverlay();
+            this.gridApi.showNoRowsOverlay();
+            failCallback();
+          }
+        });
+      }
+    };
+    this.gridApi.setGridOption('datasource', datasource);
+  }
+}

package/projects/unipin-angular/src/lib/components/grids/grid-snapshot/grid-snapshot.stories.ts

@@ -0,0 +1,173 @@
+import { formatDate } from '@angular/common';
+import { of } from 'rxjs';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { ICellRendererParams } from '@ag-grid-community/core';
+import { GridSnapshotComponent } from './grid-snapshot.component';
+
+const meta: Meta<GridSnapshotComponent> = {
+  title: 'Grids/Grid Snapshot',
+  tags: [ 'autodocs' ],
+  component: GridSnapshotComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        GridSnapshotComponent
+      ]
+    })
+  ],
+  argTypes: {
+    config: {
+      defaultValue: undefined,
+      description: 'Configuration object for the grid, specifying the column definitions, pagination settings, and data retrieval function.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: true,
+        name: 'string'
+      }
+    },
+    id: {
+      defaultValue: 'grid-s',
+      description: 'Unique identifier for the grid component.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        name: 'string'
+      }
+    },
+    rowSelection: {
+      defaultValue: 'single',
+      description: 'Type of row selection allowed in the grid.',
+      control: {
+        type: 'select'
+      },
+      options: [ 'single', 'multiple' ],
+      table: {
+        category: 'Input'
+      },
+      type: {
+        name: 'string'
+      }
+    },
+    getRowClass: {
+      type: 'function',
+      description: 'Callback version of property `rowClass` to set class(es) for each row individually',
+      control: { disable: true },
+      table: { disable: true }
+    },
+    changeSelected: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    clickRow: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    defaultColDef: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    dragColumn: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    ngOnDestroy: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    ngOnInit: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    onGridReady: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    onRowClick: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    onSelectionChanged: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    reset: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    setDatasource: {
+      control: { disable: true },
+      table: { disable: true }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<GridSnapshotComponent>;
+
+export const DisplayData: Story = {
+  args: {
+    config: {
+      useTotalRecord: false,
+      noRowText: 'Data not found',
+      colDefs: [
+        { headerName: 'Name', sortable: false, field: 'node.name' },
+        { headerName: 'Status', sortable: false, field: 'node.status', cellRenderer: ({ value }: ICellRendererParams)=> value? `<div class='badge bg-${ value === 'ACTIVE'? 'success' : 'warning'}'>${ value }</div>` : '' },
+        { headerName: 'Created Date', colId: 'createdDate', field: 'node.createdDate', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' },
+        { headerName: 'Updated Date', colId: 'updatedDate', field: 'node.updatedDate', sort: 'desc', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
+      ],
+      getDataSnapshot: (pageSize: number, sortBy: string, dir: 'asc' | 'desc', after: any) => {
+        const criteria = { sortBy: 'createdAt', sortDirection: 'desc', pageSize: 50, after: null };
+
+        criteria.sortBy = sortBy;
+        criteria.pageSize = pageSize;
+        criteria.sortDirection = dir;
+        criteria.after = after;
+
+        return of({
+          data: {
+            'pageInfo': {
+              'endCursor': 'MzcwYzYzMGItYTM5Mi00ZWU1LWJkMTktNDg3ZTRkMmJhZTRhXzIwMjMtMTEtMDhUMDQ6NTk6NDEuNjcwMTE4Wg==',
+              'hasNextPage': false
+            },
+            'edges': [
+              {
+                'node': {
+                  'name': 'John Doe',
+                  'status': 'ACTIVE',
+                  'createdDate': '2024-01-25T09:29:31.281245Z',
+                  'updatedDate': '2024-01-25T09:29:31.281250Z',
+                  'appLoginPrincipal': [
+                    {
+                      'principalId': 'john_doe@gmail.com',
+                      'principalType': 'EMAIL_USERNAME'
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+
+        });
+      }
+    },
+    getRowClass : ({ node }: any) => {
+      if(!node) return '';
+  
+      if (node.rowIndex % 2 === 1) return 'bg-primary';
+      
+      return 'bg-secondary'
+    }
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <up-snapshot-grid style="height: 500px !important; width: 768px !important;" id="id" class="flex-grow-1" rowSelection="rowSelection" [config]="config" />
+    `
+  }),
+}

package/projects/unipin-angular/src/lib/components/grids/interfaces/grid-config.interface.ts

@@ -0,0 +1,44 @@
+import { Observable } from 'rxjs';
+import { ColDef, ColGroupDef } from '@ag-grid-community/core';
+
+export interface GridConfig {
+  /**
+   * Array of column definitions for the ag-Grid.
+   * @type {(ColDef | ColGroupDef)[]}
+   */
+  colDefs: (ColDef | ColGroupDef)[];
+
+  /**
+   * Function to retrieve data asynchronously for the ag-Grid.
+   * It returns an Observable of { data, totalRecord } object, where data is an array of records and
+   * totalRecord is an optional total count of records.
+   * @type {(page: number, pageSize: number, orderBy: string, order: 'asc' | 'desc') => Observable<{ data: any[], totalRecord?: number }>}
+   */
+  getData?: (page: number, pageSize: number, orderBy: string, order: 'asc' | 'desc') => Observable<{ data: any[], totalRecord?: number }>;
+
+  /**
+   * Function to retrieve a data snapshot asynchronously for the ag-Grid.
+   * It returns an Observable of { data, totalRecord } object, where data is a single record and
+   * totalRecord is an optional total count of records.
+   * @type {(pageSize: number, orderBy: string, order: 'asc' | 'desc', after?: any) => Observable<{ data: any, totalRecord?: number }>}
+   */
+  getDataSnapshot?: (pageSize: number, orderBy: string, order: 'asc' | 'desc', after?: any) => Observable<{ data: any, totalRecord?: number }>;
+
+   /**
+   * Text to display when no rows are available in the ag-Grid.
+   * @type {string}
+   */
+  noRowText?: string;
+
+  /**
+   * Flag indicating whether to use the total record count for pagination.
+   * @type {boolean}
+   */
+  useTotalRecord?: boolean;
+
+  /**
+   * Number of rows to display per page in the ag-Grid.
+   * @type {number}
+   */
+  rowPerPage?: number;
+}

package/projects/unipin-angular/src/lib/components/grids/services/grid.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { GridApi } from '@ag-grid-community/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GridService {
+
+  protected readonly apis: { [id: string]: GridApi } = {};
+
+  public getApi(id: string): GridApi{ return this.apis[id]; }
+
+  public setApi(id: string, api: GridApi): void{ this.apis[id] = api; }
+
+  public refreshGridCache(id: string, forceRefresh: boolean = false): void{
+    this.apis[id]?.refreshInfiniteCache();
+
+    if (forceRefresh) {
+      this.apis[id]?.paginationGoToFirstPage();
+      this.apis[id]?.purgeInfiniteCache();
+    }
+  }
+}

package/{lib/components/index.d.ts → projects/unipin-angular/src/lib/components/index.ts}

@@ -1,8 +1,20 @@
 export { ButtonGroupComponent, ButtonGroupConfig, ButtonLoadingComponent } from './buttons';
-export { AppletConfig, APPLET_CONFIG, provideAppletConfig, AppletContainerComponent, ColumnContainerComponent, ColumnHeaderContainerComponent, ListContainerConfig, ListPaginationContainerComponent, ListSnapshotContainerComponent, ModalContainerComponent } from './containers';
+export { 
+  AppletConfig,
+  APPLET_CONFIG,
+  provideAppletConfig,
+  AppletContainerComponent, 
+
+  ColumnContainerComponent, 
+  ColumnHeaderContainerComponent, 
+  ListContainerConfig, 
+  ListPaginationContainerComponent, 
+  ListSnapshotContainerComponent, 
+  ModalContainerComponent 
+} from './containers';
 export { FilterComponent, FilterConfig, FilterField, FilterSearchEvent } from './filter';
 export { FormDateComponent, FormInputComponent, FormNumberComponent, FormPasswordComponent, FormSearchableSelectComponent, FormSelectComponent, FormTextareaComponent, FormImagePickerComponent, FormCurrencyInputComponent, FormCountryInputComponent, FormRateGroupCodeInputComponent } from './forms';
-export { GridConfig, GridPaginationComponent, GridService, GridSnapshotComponent } from './grids';
+export { GridConfig, GridPaginationComponent, GridService, GridSnapshotComponent } from './grids'; 
 export { TabContentComponent, TabGroupComponent, TabsChangedEvent } from './tabs';
 export { AuditListComponent, AuditDetailComponent } from './audit';
 export { ApprovalListComponent, ApprovalService, ApprovalDetailComponent, provideApprovalEntities, APPROVAL_ENTITIES } from './approval';

package/projects/unipin-angular/src/lib/components/infinite-scroll/directive/infinite-scroll.directive.ts

@@ -0,0 +1,72 @@
+import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[upInfiniteScroll]',
+})
+export class InfiniteScrollDirective implements OnInit, AfterViewInit, OnDestroy {
+
+  /**
+   * Threshold at which to trigger the callback. A value of 0.0 means that the callback
+   * will be triggered as soon as a single pixel is visible. 1.0 means that the callback will only be triggered when the entire element is visible.
+   * @type {number}
+   */
+  @Input() public threshold: number = 0.5;
+
+  /**
+   * Margin around the root. This can be used to grow or shrink the area used to
+   * determine intersections. It follows the same syntax as the CSS margin property.
+   * Example values: '10px', '10px 20px', '10%', '10% 20% 30% 40%'.
+   * @type {string}
+   */
+  @Input() public rootMargin: string = '0px';
+
+  /**
+   * Event emitted when the observed element scrolls into view.
+   * This triggers the component to load more data.
+   * @type {EventEmitter<boolean>}
+   */
+  @Output() public readonly onScrollThreshold: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  /**
+   * IntersectionObserver instance used to observe the element.
+   * @type {IntersectionObserver}
+   */
+  protected observer!: IntersectionObserver;
+
+  constructor(
+    protected readonly element: ElementRef
+  ) {}
+
+  /**
+   * Lifecycle hook that is called after Angular has initialized all data-bound properties.
+   * Initializes the IntersectionObserver with specific options.
+   */
+  public ngOnInit(): void{
+    const options = { 
+      root: null, 
+      rootMargin: this.rootMargin, 
+      threshold: Math.max(0, Math.min(1, this.threshold))
+    };
+    
+    this.observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+      if (entries[0].isIntersecting) this.onScrollThreshold.emit(true);
+    }, options);
+  }
+
+  /**
+   * Lifecycle hook that is called after Angular has fully initialized the component's view.
+   * Starts observing the element.
+   */
+  public ngAfterViewInit(): void{
+    this.observer.observe(this.element.nativeElement);
+  }
+
+  /**
+   * Lifecycle hook that is called when the directive is being destroyed.
+   * Disconnects the IntersectionObserver to stop observing the element to prevent memory leaks.
+   */
+  public ngOnDestroy(): void{
+    this.observer.disconnect();
+  }
+}

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.component.html

@@ -0,0 +1,13 @@
+<div 
+    class="scroll-container"    
+    [threshold]="threshold" 
+    [rootMargin]="rootMargin" 
+    (onScrollThreshold)="scroll()"
+    upInfiniteScroll 
+>
+    <ion-spinner [name]="loadingIcon" />
+
+    @if (loadingText) {
+        <div class="loading-text">{{ loadingText }}</div>
+    }
+</div>

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.component.scss

@@ -0,0 +1,10 @@
+.scroll-container {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+.loading-text {
+    padding-top: 8px;
+}

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { InfiniteScrollDirective } from './directive/infinite-scroll.directive';
+
+@Component({
+  standalone: true,
+  selector: 'up-infinite-scroll',
+  styleUrl: './infinite-scroll.component.scss',
+  templateUrl: './infinite-scroll.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    IonicModule,
+    InfiniteScrollDirective
+  ]
+})
+export class InfiniteScrollComponent {
+  
+  /**
+   * Text to display when loading more items.
+   * @type {string}
+   */
+  @Input() public loadingText?: string;
+
+  /**
+   * Threshold at which to trigger the callback. A value of 0.0 means that the callback
+   * will be triggered as soon as a single pixel is visible. 1.0 means that the callback will only be triggered when the entire element is visible.
+   * @type {number}
+   */
+  @Input() public threshold: number = 0.5;
+
+  /**
+   * Margin around the root. This can be used to grow or shrink the area used to
+   * determine intersections. It follows the same syntax as the CSS margin property.
+   * Example values: '10px', '10px 20px', '10%', '10% 20% 30% 40%'.
+   * @type {string}
+   */
+  @Input() public rootMargin: string = '0px';
+
+  /**
+   * Icon to display while loading more items. 
+   * Can be one of 'bubbles', 'circles', 'circular', 'crescent', 'dots', 'lines', 'lines-sharp', 'lines-sharp-small', or 'lines-small'.
+   * @type {'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-sharp' | 'lines-sharp-small' | 'lines-small'}
+   * @default 'dots'
+   */
+  @Input() public loadingIcon: 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-sharp' | 'lines-sharp-small' | 'lines-small' = 'dots';
+
+  /**
+   * Event emitted when the user has scrolled to the bottom of the list.
+   * Used for triggering the component to load more data.
+   * @type {EventEmitter<void>}
+   */
+  @Output() public onScrollThreshold: EventEmitter<void> = new EventEmitter<void>();
+
+  /**
+   * Method to emit the scrolled event, indicating that the user has reached the bottom of the list.
+   * This triggers the component to load more data.
+   */
+  public scroll(): void{
+    this.onScrollThreshold.emit();
+  }
+}