Merge branch 'master' into simeonoff/fix-7167

simeonoff · web-flow · commit da6682f94bfd · 2020-04-21T17:40:31.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
+- `igx-paginator` -  The following inputs have been deprecated for the `paginator` component and will be removed in future versions
+    - `selectLabel` and `prepositionPage` Use 'resourceStrings' to set/get values.
 
 - `IgxInputGroup`
   - **Renamed** `supressInputAutofocus` input to `suppressInputAutofocus`
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/igniteui-angular/src/lib/core/i18n/paginator-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/paginator-resources.ts
@@ -1,9 +1,17 @@
 export interface IPaginatorResourceStrings {
     igx_paginator_label?: string;
     igx_paginator_pager_text?: string;
+    igx_paginator_first_page_button_text?: string;
+    igx_paginator_previous_page_button_text?: string;
+    igx_paginator_last_page_button_text?: string;
+    igx_paginator_next_page_button_text?: string;
 }
 
 export const PaginatorResourceStringsEN: IPaginatorResourceStrings = {
     igx_paginator_label: 'Items per page',
-    igx_paginator_pager_text: 'of'
+    igx_paginator_pager_text: 'of',
+    igx_paginator_first_page_button_text: 'Go to first page',
+    igx_paginator_previous_page_button_text: 'Previous page',
+    igx_paginator_last_page_button_text: 'Go to last page',
+    igx_paginator_next_page_button_text: 'Next page',
 };
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
@@ -24,7 +24,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../
 import { ExpressionUI } from '../grid-filtering.service';
 import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.component';
 import { IgxFilteringService } from '../grid-filtering.service';
-import { KEYS, isEdge, isIE } from '../../../core/utils';
+import { KEYS, isEdge } from '../../../core/utils';
 import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll';
 
 /**
@@ -262,11 +262,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     public onInput(eventArgs) {
         // The 'iskeyPressed' flag is needed for a case in IE, because the input event is fired on focus and for some reason,
         // when you have a japanese character as a placeholder, on init the value here is empty string .
-        // There is no need to reset the value on every invalid number input.
-        // The invalid value is converted to empty string input type="number"
-        const target = eventArgs.target;
-        if (isEdge() && target.type !== 'number' || this.isKeyPressed && isIE() || target.value) {
-             this.value = target.value;
+        if (isEdge() || this.isKeyPressed || eventArgs.target.value) {
+            this.value = eventArgs.target.value;
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
@@ -350,7 +350,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         }
     }
 
-    constructor(private cdr: ChangeDetectorRef) {}
+    constructor(private cdr: ChangeDetectorRef, private element: ElementRef) {}
 
     /**
      * @hidden @internal
@@ -519,7 +519,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         this.customDialog.selectedOperator = eventArgs.newSelection.value;
         eventArgs.cancel = true;
         if (this.overlayComponentId) {
-            this.mainDropdown.nativeElement.style.display = 'none';
+            this.element.nativeElement.style.display = 'none';
         }
         this.subMenu.close();
         this.customDialog.open(this.mainDropdown.nativeElement);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -229,13 +229,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
 
             expect(grid.rowList.length).toEqual(3);
             verifyFilterRowUI(input, close, reset, false);
-
-            // greater than or equal to with invalid value should not reset filter
-            GridFunctions.openFilterDDAndSelectCondition(fix, 4);
-            GridFunctions.typeValueInFilterRowInput('254..', fix, input);
-
-            expect(grid.rowList.length).toEqual(3);
-            verifyFilterRowUI(input, close, reset, false);
         }));
 
         // UI tests boolean column
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -28,7 +28,7 @@
 </div>
 
 <div class="igx-grid__thead">
-    <div class="igx-grid__thead-wrapper" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="composite" (focus)="navigation.focusFirstCell()"
+    <div class="igx-grid__thead-wrapper" [class.igx-grid__tr--mrl]='hasColumnLayouts' role="rowgroup" (focus)="navigation.focusFirstCell()"
     [style.width.px]='calcWidth' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.headerNavigation($event)" (scroll)="preventHeaderScroll($event)" #theadRow>
         <div class="igx-grid__tr" role="row" [style.width.px]='calcWidth'>
             <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
@@ -209,7 +209,7 @@
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant"
 (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
     <igx-grid-summary-row [style.width.px]='calcWidth'  [style.height.px]='summariesHeight'
-        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id"
+        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
         class="igx-grid__summaries" #summaryRow>
     </igx-grid-summary-row>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -167,7 +167,7 @@
 <div class="igx-grid__tfoot" tabindex="0" (focus)="navigation.focusFirstCell(false)" [attr.aria-activedescendant]="activeDescendant"
  (keydown)="navigation.summaryNav($event)"  role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
     <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
-        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id"
+        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
         class="igx-grid__summaries" #summaryRow>
     </igx-grid-summary-row>
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
@@ -12,6 +12,7 @@
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
         <igx-grid-summary-cell
             class="igx-grid-summary igx-grid-summary--fw"
+            role="cell"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
             [class.igx-grid-summary--empty]="!col.hasSummary"
@@ -37,6 +38,7 @@
 
 <ng-template #summaryCellTemplate let-col>
     <igx-grid-summary-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
+            role="cell"
             class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
             [class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
             [class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -142,7 +142,7 @@
 
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
     <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'
-        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id"
+        *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" role="row"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="dataView.length"
         class="igx-grid__summaries" #summaryRow>
     </igx-grid-summary-row>
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.html b/projects/igniteui-angular/src/lib/paginator/paginator.component.html
@@ -1,30 +1,31 @@
 <div class="igx-paginator__select" [hidden]="dropdownHidden">
-    <label class="igx-paginator__label">{{ selectLabel }}</label>
+    <label class="igx-paginator__label">{{ resourceStrings.igx_paginator_label }}</label>
     <div class="igx-paginator__select-input">
         <igx-select [(ngModel)]="perPage" [displayDensity]="paginatorSelectDisplayDensity()" type="border"
             [disabled]="!dropdownEnabled">
+            <label igxLabel [hidden]="true">{{ resourceStrings.igx_paginator_label }}</label>
             <igx-select-item [value]="val" *ngFor="let val of selectOptions">
                 {{val}}
             </igx-select-item>
         </igx-select>
     </div>
 </div>
-<div class="igx-paginator__pager" [hidden]="pagerHidden">
-    <button [disabled]="isFirstPage || !pagerEnabled ? true: false" (click)="paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
+<div class="igx-paginator__pager" [hidden]="pagerHidden" role="navigation">
+    <button [title]="resourceStrings.igx_paginator_first_page_button_text" [disabled]="isFirstPageDisabled" [attr.aria-disabled]="isFirstPageDisabled" (click)="paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
         <igx-icon fontSet="material">first_page</igx-icon>
     </button>
-    <button [disabled]="isFirstPage || !pagerEnabled ? true: false" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
+    <button [title]="resourceStrings.igx_paginator_previous_page_button_text" [disabled]="isFirstPageDisabled" [attr.aria-disabled]="isFirstPageDisabled" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
         <igx-icon fontSet="material">chevron_left</igx-icon>
     </button>
-    <div class='igx-paginator__pager-text'>
+    <div class='igx-paginator__pager-text' aria-current="page">
         <span>{{ page + 1 }}</span>
-        <span>&nbsp;{{prepositionPage}}&nbsp;</span>
+        <span>&nbsp;{{ resourceStrings.igx_paginator_pager_text }}&nbsp;</span>
         <span>{{ totalPages }}</span>
     </div>
-    <button [disabled]="isLastPage || !pagerEnabled ? true: false" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+    <button [title]="resourceStrings.igx_paginator_next_page_button_text" [disabled]="isLastPageDisabled" [attr.aria-disabled]="isLastPageDisabled" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
         <igx-icon fontSet="material">chevron_right</igx-icon>
     </button>
-    <button [disabled]="isLastPage || !pagerEnabled ? true: false" (click)="paginate(totalPages - 1)" igxButton="icon" igxRipple
+    <button [title]="resourceStrings.igx_paginator_last_page_button_text" [disabled]="isLastPageDisabled" [attr.aria-disabled]="isLastPageDisabled" (click)="paginate(totalPages - 1)" igxButton="icon" igxRipple
         igxRippleCentered="true">
         <igx-icon fontSet="material">last_page</igx-icon>
     </button>
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.spec.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.spec.ts
@@ -146,9 +146,10 @@ describe('IgxPaginator with custom settings', () => {
         const fix = TestBed.createComponent(CustomizedPaginatorComponent);
         fix.detectChanges();
         const paginator = fix.componentInstance.paginator;
-        const selectLabel = paginator.selectLabel;
+        paginator.resourceStrings.igx_paginator_label = 'Per page';
 
-        expect(selectLabel).toEqual('Per page');
+        fix.detectChanges();
+        expect(paginator.resourceStrings.igx_paginator_label).toEqual('Per page');
     });
 
     it('should disable the dropdown and pager buttons if set to false through input', () => {
@@ -189,7 +190,6 @@ export class DefaultPaginatorComponent {
 }
 @Component({
     template: `<igx-paginator
-        [selectLabel]="'Per page'"
         [totalRecords]="25"
         [selectOptions]="[3,10,25,40]"
         [perPage]="7"
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts

Original file line number	Diff line number	Diff line change
`@@ -350,7 +350,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {`
`350`	`350`	`}`
`351`	`351`	`}`
`352`	`352`
`353`		`- constructor(private cdr: ChangeDetectorRef) {}`
	`353`	`+ constructor(private cdr: ChangeDetectorRef, private element: ElementRef) {}`
`354`	`354`
`355`	`355`	`/**`
`356`	`356`	`* @hidden @internal`
`@@ -519,7 +519,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {`
`519`	`519`	`this.customDialog.selectedOperator = eventArgs.newSelection.value;`
`520`	`520`	`eventArgs.cancel = true;`
`521`	`521`	`if (this.overlayComponentId) {`
`522`		`- this.mainDropdown.nativeElement.style.display = 'none';`
	`522`	`+ this.element.nativeElement.style.display = 'none';`
`523`	`523`	`}`
`524`	`524`	`this.subMenu.close();`
`525`	`525`	`this.customDialog.open(this.mainDropdown.nativeElement);`