feat(datagrid): add input for page size select element id

Co-Authored-By: Kevin Buhmann <kbuhmann@vmware.com>
vmware-clarity · Aug 17, 2022 · 1f6c0f6 · 1f6c0f6
1 parent ef47c29
commit 1f6c0f6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -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
@@ -6,21 +6,23 @@
 
 import { Component, Input } from '@angular/core';
 
+import { uniqueIdFactory } from '../../utils/id-generator/id-generator.service';
 import { Page } from './providers/page';
 
 @Component({
   selector: 'clr-dg-page-size',
   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>
   `,
 })
 export class ClrDatagridPageSize {
   @Input('clrPageSizeOptions') pageSizeOptions: number[];
+  @Input('clrPageSizeOptionsId') pageSizeOptionsId = uniqueIdFactory();
 
   constructor(public page: Page) {}