Merge branch 'master' into sstoychev/paging-ghost-rows-fixes

Author: kdinev

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`

package-lock.json

@@ -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',
 };

projects/igniteui-angular/src/lib/core/i18n/paginator-resources.ts

@@ -177,7 +177,7 @@
         &:hover,
         &:focus {
             @extend %cal-value--month-hover !optional;
-            @extend %cal-value--month-current !optional;
+            @extend %cal-value--month-current-hover !optional;
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -35,11 +35,14 @@
 /// @param {Color} $weekend-text-color [null] - The text color for weekend days.
 ///
 /// @param {Color} $year-current-text-color [null] - The text color for the current/selected year.
-/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.
 ///
-/// @param {Color} $year-hover-text-color [null] - The year hover text color.
+/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.
+/// @param {Color} $month-hover-current-text-color [null]- The text color for the current/selected month on hover.
 /// @param {Color} $month-hover-text-color [null] - The month hover text color.
 /// @param {Color} $month-hover-background [null] - The month hover background color.
+/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.
+///
+/// @param {Color} $year-hover-text-color [null] - The year hover text color.
 ///
 /// @param {Color} $date-selected-background [null] - The background color for the selected date.
 /// @param {Color} $date-selected-text-color [null] - The text color for the selected date.
@@ -56,7 +59,6 @@
 ///
 /// @param {border-radius} $border-radius [null] - The border radius used for the outline of the calendar.
 /// @param {border-radius} $date-border-radius [null] - The border radius used for the outline outline of the date.
-/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -100,6 +102,7 @@
 
     $year-hover-text-color: null,
     $month-hover-text-color: null,
+    $month-hover-current-text-color: null,
     $month-hover-background: null,
 
     $date-selected-background: null,
@@ -239,17 +242,15 @@
         $date-special-text-color: text-contrast($date-special-background);
     }
 
-    @if $not-bootstrap-theme {
-        @if not($month-hover-text-color) and $content-background{
-            @if type-of($content-background) == 'color' {
-                $month-hover-text-color: text-contrast($content-background);
-            }
+    @if not($month-hover-text-color) and $month-hover-background {
+        @if type-of($month-hover-background) == 'color' {
+            $month-hover-text-color: text-contrast($month-hover-background);
         }
     }
 
-    @if not($month-hover-text-color) and $month-hover-background {
-        @if type-of($month-hover-text-color) == 'color' {
-            $month-hover-text-color: text-contrast($month-hover-background);
+    @if not($month-hover-current-text-color) and $month-hover-background {
+        @if type-of($month-hover-background) == 'color' {
+            $month-hover-current-text-color: text-contrast($month-hover-background);
         }
     }
 
@@ -289,6 +290,7 @@
 
         year-hover-text-color: $year-hover-text-color,
         month-hover-text-color: $month-hover-text-color,
+        month-hover-current-text-color: $month-hover-current-text-color,
         month-hover-background: $month-hover-background,
 
         date-selected-background: $date-selected-background,
@@ -746,6 +748,10 @@
         color: --var($theme, 'month-current-text-color');
     }
 
+    %cal-value--month-current-hover {
+        color: --var($theme, 'month-hover-current-text-color');
+    }
+
     %cal-value--inactive {
         cursor: pointer;
         color: --var($theme, 'inactive-text-color');

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -26,9 +26,11 @@
 /// @prop {Map} year-current-text-color [igx-color: ('secondary', 500)] - The text color for the current/selected year.
 /// @prop {Map} year-hover-text-color [igx-color: ('secondary', 500)] - The year hover text color.
 ///
-/// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month.
 /// @prop {Map} month-hover-text-color [igx-color: 'surface', text-contrast: ()] - The month hover text color.
 /// @prop {Map} month-hover-background [igx-color: ('grays', 200)] - The month hover text color.
+/// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month.
+/// @prop {Map} month-hover-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month on hover.
+/// @prop {Number} month-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
 ///
 /// @prop {Map} date-selected-background [igx-color: ('secondary', 500)] - The background color for the selected date.
 /// @prop {Map} date-selected-text-color [igx-contrast-color: ('secondary', 500)] - The text color for the selected date.
@@ -49,7 +51,6 @@
 ///
 /// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for calendar.
 /// @prop {Number} date-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
-/// @prop {Number} month-border-radius [1] - The border radius fraction, between 0-1 to be used for calendar.
 /// @requires {function} extend
 /// @requires {map} $_default-shape-calendar
 /// @see $default-palette
@@ -130,6 +131,10 @@ $_light-calendar: extend(
             igx-color: ('secondary', 500)
         ),
 
+        month-hover-current-text-color: (
+            igx-color: ('secondary', 500)
+        ),
+
         year-hover-text-color: (
             igx-color: ('secondary', 500)
         ),
@@ -223,6 +228,7 @@ $_fluent-calendar: extend(
 /// @prop {Map} date-special-background [igx-color: ('warn'), rgba:.5] - The background color used for special dates.
 ///
 /// @prop {Map} month-hover-text-color [igx-color: ('primary', 500)] - The month hover text color.
+/// @prop {Map} month-hover-current-text-color [igx-color: ('primary', 500)] - The current month hover text color.
 /// @prop {Map} month-hover-background [igx-color: ('grays', 100)] - The month hover text color.
 ///
 /// @prop {Map} picker-text-hover-color [igx-color: ('primary', 500)]-  The hover picker month/year color.
@@ -272,6 +278,10 @@ $_bootstrap-calendar: extend(
             igx-color: ('primary', 500)
         ),
 
+        month-hover-current-text-color: (
+            igx-color: ('primary', 500)
+        ),
+
         month-hover-background: (
             igx-color: ('grays', 100)
         ),

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss

@@ -5238,7 +5238,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * Deselects all rows
      * @remarks
      * By default if filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.
-     * If you set the parameter onlyFilterData to false that will select all rows in the grid exept deleted rows.
+     * If you set the parameter onlyFilterData to false that will deselect all rows in the grid exept deleted rows.
      * @example
      * ```typescript
      * this.grid.deselectAllRows();

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -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>