feat: Use en dash in MatPaginatorIntl (#16693)

This is the correct typography to use to format number ranges

BREAKING CHANGE: MatPaginatorIntl will now cause MatPaginator to display
an 'EN DASH' (U+2013) rather than a 'HYPHEN-MINUS' (U+002D)

Author: paulferaud

src/material/paginator/paginator-intl.ts

@@ -50,7 +50,7 @@ export class MatPaginatorIntl {
         Math.min(startIndex + pageSize, length) :
         startIndex + pageSize;
 
-    return `${startIndex + 1} - ${endIndex} of ${length}`;
+    return `${startIndex + 1} – ${endIndex} of ${length}`;
   }
 }
 

src/material/paginator/paginator.spec.ts

@@ -47,14 +47,14 @@ describe('MatPaginator', () => {
       component.pageSize = 10;
       component.pageIndex = 1;
       fixture.detectChanges();
-      expect(rangeElement.innerText).toBe('11 - 20 of 100');
+      expect(rangeElement.innerText).toBe('11 – 20 of 100');
 
       // View third page of list of 200, each page contains 20 items.
       component.length = 200;
       component.pageSize = 20;
       component.pageIndex = 2;
       fixture.detectChanges();
-      expect(rangeElement.innerText).toBe('41 - 60 of 200');
+      expect(rangeElement.innerText).toBe('41 – 60 of 200');
 
       // View first page of list of 0, each page contains 5 items.
       component.length = 0;
@@ -68,21 +68,21 @@ describe('MatPaginator', () => {
       component.pageSize = 5;
       component.pageIndex = 2;
       fixture.detectChanges();
-      expect(rangeElement.innerText).toBe('11 - 12 of 12');
+      expect(rangeElement.innerText).toBe('11 – 12 of 12');
 
       // View third page of list of 10, each page contains 5 items.
       component.length = 10;
       component.pageSize = 5;
       component.pageIndex = 2;
       fixture.detectChanges();
-      expect(rangeElement.innerText).toBe('11 - 15 of 10');
+      expect(rangeElement.innerText).toBe('11 – 15 of 10');
 
       // View third page of list of -5, each page contains 5 items.
       component.length = -5;
       component.pageSize = 5;
       component.pageIndex = 2;
       fixture.detectChanges();
-      expect(rangeElement.innerText).toBe('11 - 15 of 0');
+      expect(rangeElement.innerText).toBe('11 – 15 of 0');
     });
 
     it('should show right aria-labels for select and buttons', () => {
@@ -247,19 +247,19 @@ describe('MatPaginator', () => {
   it('should mark for check when inputs are changed directly', () => {
     const rangeElement = fixture.nativeElement.querySelector('.mat-paginator-range-label');
 
-    expect(rangeElement.innerText).toBe('1 - 10 of 100');
+    expect(rangeElement.innerText).toBe('1 – 10 of 100');
 
     paginator.length = 99;
     fixture.detectChanges();
-    expect(rangeElement.innerText).toBe('1 - 10 of 99');
+    expect(rangeElement.innerText).toBe('1 – 10 of 99');
 
     paginator.pageSize = 6;
     fixture.detectChanges();
-    expect(rangeElement.innerText).toBe('1 - 6 of 99');
+    expect(rangeElement.innerText).toBe('1 – 6 of 99');
 
     paginator.pageIndex = 1;
     fixture.detectChanges();
-    expect(rangeElement.innerText).toBe('7 - 12 of 99');
+    expect(rangeElement.innerText).toBe('7 – 12 of 99');
 
     // Having one option and the same page size should remove the select menu
     expect(fixture.nativeElement.querySelector('.mat-select')).not.toBeNull();