fix(material/paginator): allow readonly options

closes #24050

Author: lekhmanrus

src/material-experimental/mdc-paginator/paginator.spec.ts

@@ -511,6 +511,13 @@ describe('MDC-based MatPaginator', () => {
     const hostElement = fixture.nativeElement.querySelector('mat-paginator');
     expect(hostElement.getAttribute('role')).toBe('group');
   });
+
+  it('should handle the page size options input being passed in as readonly array', () => {
+    const fixture = createComponent(MatPaginatorWithReadonlyOptions);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.paginator._displayedPageSizeOptions).toEqual([5, 10, 25, 100]);
+  });
 });
 
 function getPreviousButton(fixture: ComponentFixture<any>) {
@@ -600,3 +607,14 @@ class MatPaginatorWithoutOptionsApp {
 class MatPaginatorWithStringValues {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 }
+
+@Component({
+  template: `
+    <mat-paginator [pageSizeOptions]="pageSizeOptions">
+    </mat-paginator>
+  `,
+})
+class MatPaginatorWithReadonlyOptions {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  pageSizeOptions: readonly number[] = [5, 10, 25, 100];
+}

src/material-experimental/mdc-paginator/paginator.ts

@@ -28,7 +28,7 @@ export interface MatPaginatorDefaultOptions {
   pageSize?: number;
 
   /** The set of provided page size options to display to the user. */
-  pageSizeOptions?: number[];
+  pageSizeOptions?: readonly number[];
 
   /** Whether to hide the page size selection UI from the user. */
   hidePageSize?: boolean;

src/material/paginator/paginator.spec.ts

@@ -506,6 +506,13 @@ describe('MatPaginator', () => {
     const hostElement = fixture.nativeElement.querySelector('mat-paginator');
     expect(hostElement.getAttribute('role')).toBe('group');
   });
+
+  it('should handle the page size options input being passed in as readonly array', () => {
+    const fixture = createComponent(MatPaginatorWithReadonlyOptions);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.paginator._displayedPageSizeOptions).toEqual([5, 10, 25, 100]);
+  });
 });
 
 function getPreviousButton(fixture: ComponentFixture<any>) {
@@ -595,3 +602,14 @@ class MatPaginatorWithoutOptionsApp {
 class MatPaginatorWithStringValues {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 }
+
+@Component({
+  template: `
+    <mat-paginator [pageSizeOptions]="pageSizeOptions">
+    </mat-paginator>
+  `,
+})
+class MatPaginatorWithReadonlyOptions {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  pageSizeOptions: readonly number[] = [5, 10, 25, 100];
+}

src/material/paginator/paginator.ts

@@ -68,7 +68,7 @@ export interface MatPaginatorDefaultOptions {
   pageSize?: number;
 
   /** The set of provided page size options to display to the user. */
-  pageSizeOptions?: number[];
+  pageSizeOptions?: readonly number[];
 
   /** Whether to hide the page size selection UI from the user. */
   hidePageSize?: boolean;
@@ -97,7 +97,7 @@ const _MatPaginatorMixinBase = mixinDisabled(mixinInitialized(class {}));
 export abstract class _MatPaginatorBase<
     O extends {
       pageSize?: number;
-      pageSizeOptions?: number[];
+      pageSizeOptions?: readonly number[];
       hidePageSize?: boolean;
       showFirstLastButtons?: boolean;
     },
@@ -146,14 +146,14 @@ export abstract class _MatPaginatorBase<
 
   /** The set of provided page size options to display to the user. */
   @Input()
-  get pageSizeOptions(): number[] {
+  get pageSizeOptions(): readonly number[] {
     return this._pageSizeOptions;
   }
-  set pageSizeOptions(value: number[]) {
+  set pageSizeOptions(value: readonly number[]) {
     this._pageSizeOptions = (value || []).map(p => coerceNumberProperty(p));
     this._updateDisplayedPageSizeOptions();
   }
-  private _pageSizeOptions: number[] = [];
+  private _pageSizeOptions: readonly number[] = [];
 
   /** Whether to hide the page size selection UI from the user. */
   @Input()

tools/public_api_guard/material/paginator.md

@@ -52,7 +52,7 @@ export class MatPaginator extends _MatPaginatorBase<MatPaginatorDefaultOptions>
 // @public
 export abstract class _MatPaginatorBase<O extends {
     pageSize?: number;
-    pageSizeOptions?: number[];
+    pageSizeOptions?: readonly number[];
     hidePageSize?: boolean;
     showFirstLastButtons?: boolean;
 }> extends _MatPaginatorMixinBase implements OnInit, OnDestroy, CanDisable, HasInitialized {
@@ -94,8 +94,8 @@ export abstract class _MatPaginatorBase<O extends {
     set pageIndex(value: number);
     get pageSize(): number;
     set pageSize(value: number);
-    get pageSizeOptions(): number[];
-    set pageSizeOptions(value: number[]);
+    get pageSizeOptions(): readonly number[];
+    set pageSizeOptions(value: readonly number[]);
     _previousButtonsDisabled(): boolean;
     previousPage(): void;
     get showFirstLastButtons(): boolean;
@@ -111,7 +111,7 @@ export interface MatPaginatorDefaultOptions {
     formFieldAppearance?: MatFormFieldAppearance;
     hidePageSize?: boolean;
     pageSize?: number;
-    pageSizeOptions?: number[];
+    pageSizeOptions?: readonly number[];
     showFirstLastButtons?: boolean;
 }