From 1f6c0f698f084cd393cddb9ec27c5d9c1c79455a Mon Sep 17 00:00:00 2001
From: pradoslav <pradoslav@vmware.com>
Date: Thu, 28 Jul 2022 11:22:21 +0300
Subject: [PATCH] feat(datagrid): add input for page size select element id

Co-Authored-By: Kevin Buhmann <kbuhmann@vmware.com>
---
 projects/angular/clarity.api.md               |  4 ++-
 .../data/datagrid/datagrid-page-size.spec.ts  | 28 ++++++++++++++++++-
 .../src/data/datagrid/datagrid-page-size.ts   |  4 ++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
index 75ae4ad9eb..bc6294f743 100644
--- a/projects/angular/clarity.api.md
+++ b/projects/angular/clarity.api.md
@@ -1649,7 +1649,9 @@ export class ClrDatagridPageSize {
     // (undocumented)
     pageSizeOptions: number[];
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridPageSize, "clr-dg-page-size", never, { "pageSizeOptions": "clrPageSizeOptions"; }, {}, never, ["*"]>;
+    pageSizeOptionsId: string;
+    // (undocumented)
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridPageSize, "clr-dg-page-size", never, { "pageSizeOptions": "clrPageSizeOptions"; "pageSizeOptionsId": "clrPageSizeOptionsId"; }, {}, never, ["*"]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridPageSize, never>;
 }
diff --git a/projects/angular/src/data/datagrid/datagrid-page-size.spec.ts b/projects/angular/src/data/datagrid/datagrid-page-size.spec.ts
index d2b0c2a8c7..c80572db61 100644
--- a/projects/angular/src/data/datagrid/datagrid-page-size.spec.ts
+++ b/projects/angular/src/data/datagrid/datagrid-page-size.spec.ts
@@ -25,6 +25,12 @@ export default function (): void {
         context.detectChanges();
         expect(context.clarityDirective.pageSizeOptions).toEqual([10, 20, 50, 100]);
       });
+
+      it('receives an input for page size options id', function () {
+        context.testComponent.pageSizeOptionsId = 'some-id';
+        context.detectChanges();
+        expect(context.clarityDirective.pageSizeOptionsId).toEqual('some-id');
+      });
     });
 
     describe('View', function () {
@@ -56,6 +62,21 @@ export default function (): void {
           expect(context.clarityElement.textContent.trim()).toMatch('Hello world');
         });
 
+        it('displays a select with a default id if none given', function () {
+          const select = context.clarityElement.querySelector('select');
+          expect(select).not.toBeNull();
+          expect(select.id).toBeTruthy();
+        });
+
+        it('displays a select with pageSizeOptionsId as id', function () {
+          const pageSizeOptionsId = 'some-id';
+          context.testComponent.pageSizeOptionsId = pageSizeOptionsId;
+          context.detectChanges();
+          const select = context.clarityElement.querySelector('select');
+          expect(select).not.toBeNull();
+          expect(select.id).toBe(pageSizeOptionsId);
+        });
+
         it('displays a select with pageSizeOptions as choices', function () {
           const pageSizeOptions = [10, 20, 50, 100];
           context.testComponent.pageSizeOptions = pageSizeOptions;
@@ -92,8 +113,13 @@ export default function (): void {
 class SimpleTest {}
 
 @Component({
-  template: `<clr-dg-page-size [clrPageSizeOptions]="pageSizeOptions">Hello world</clr-dg-page-size>`,
+  template: `
+    <clr-dg-page-size [clrPageSizeOptions]="pageSizeOptions" [clrPageSizeOptionsId]="pageSizeOptionsId">
+      Hello world
+    </clr-dg-page-size>
+  `,
 })
 class FullTest {
   pageSizeOptions: number[];
+  pageSizeOptionsId: string;
 }
diff --git a/projects/angular/src/data/datagrid/datagrid-page-size.ts b/projects/angular/src/data/datagrid/datagrid-page-size.ts
index 283e2e0163..ee83a89fa8 100644
--- a/projects/angular/src/data/datagrid/datagrid-page-size.ts
+++ b/projects/angular/src/data/datagrid/datagrid-page-size.ts
@@ -6,6 +6,7 @@
 
 import { Component, Input } from '@angular/core';
 
+import { uniqueIdFactory } from '../../utils/id-generator/id-generator.service';
 import { Page } from './providers/page';
 
 @Component({
@@ -13,7 +14,7 @@ import { Page } from './providers/page';
   template: `
     <ng-content></ng-content>
     <div class="clr-select-wrapper">
-      <select [class.clr-page-size-select]="true" [(ngModel)]="page.size">
+      <select [id]="pageSizeOptionsId" [class.clr-page-size-select]="true" [(ngModel)]="page.size">
         <option *ngFor="let option of pageSizeOptions" [ngValue]="option">{{ option }}</option>
       </select>
     </div>
@@ -21,6 +22,7 @@ import { Page } from './providers/page';
 })
 export class ClrDatagridPageSize {
   @Input('clrPageSizeOptions') pageSizeOptions: number[];
+  @Input('clrPageSizeOptionsId') pageSizeOptionsId = uniqueIdFactory();
 
   constructor(public page: Page) {}