Merge pull request #6060 from IgniteUI/paginator-styles-5841-master

Decouple IgxPaginator from IgxGrid - master

Author: zdrawku

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

@@ -73,7 +73,6 @@ export interface IGridResourceStrings {
     igx_grid_excel_date_filter?: string;
     igx_grid_excel_boolean_filter?: string;
     igx_grid_excel_custom_filter?: string;
-    igx_grid_paginator_label?: string;
     igx_grid_advanced_filter_title?: string;
     igx_grid_advanced_filter_and_group?: string;
     igx_grid_advanced_filter_or_group?: string;
@@ -166,7 +165,6 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_date_filter: 'Date filter',
     igx_grid_excel_boolean_filter: 'Boolean filter',
     igx_grid_excel_custom_filter: 'Custom filter...',
-    igx_grid_paginator_label: 'Items per page',
     igx_grid_advanced_filter_title: 'Advanced Filtering',
     igx_grid_advanced_filter_and_group: '"And" Group',
     igx_grid_advanced_filter_or_group: '"Or" Group',

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

@@ -0,0 +1,7 @@
+export interface IPaginatorResourceStrings {
+    igx_paginator_label?: string;
+}
+
+export const PaginatorResourceStringsEN: IPaginatorResourceStrings = {
+    igx_paginator_label: 'Items per page'
+};

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

@@ -1,5 +1,6 @@
 import { IGridResourceStrings, GridResourceStringsEN } from './grid-resources';
 import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-picker-resources';
+import { PaginatorResourceStringsEN } from './paginator-resources';
 import { cloneValue } from '../utils';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings {}
@@ -9,7 +10,8 @@ export interface IResourceStrings extends IGridResourceStrings, ITimePickerResou
  */
 export const CurrentResourceStrings = {
     GridResStrings: cloneValue(GridResourceStringsEN),
-    TimePickerResStrings: cloneValue(TimePickerResourceStringsEN)
+    TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
+    PaginatorResStrings: cloneValue(PaginatorResourceStringsEN)
 };
 
 function updateResourceStrings(currentStrings: IResourceStrings, newStrings: IResourceStrings ) {

projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-component.scss

@@ -0,0 +1,42 @@
+////
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+
+@include b(igx-paginator) {
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %igx-paginator !optional;
+
+    @include e(label) {
+        @extend %igx-paginator__label !optional;
+    }
+
+    @include e(select) {
+        @extend %igx-paginator__select !optional;
+    }
+
+    @include e(select-input) {
+        @extend %igx-paginator__select-input !optional;
+    }
+
+    @include e(pager) {
+        @extend %igx-paginator__pager !optional;
+    }
+
+    @include e(pager-text) {
+        @extend %igx-paginator__pager-text !optional;
+    }
+
+    @include m(cosy) {
+        @extend %igx-paginator !optional;
+        @extend %igx-paginator--cosy !optional;
+    }
+
+    @include m(compact) {
+        @extend %igx-paginator !optional;
+        @extend %igx-paginator--compact !optional;
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-component.scss

@@ -17,20 +17,20 @@
 /// @requires extend
 ///
 /// @example scss Change the stripes color
-///   $my-grid-paginator-theme: igx-grid-paginator-theme(
+///   $my-paginator-theme: igx-paginator-theme(
 ///     $stripes-color: orange
 ///   );
-///   // Pass the theme to the igx-grid-paginator component mixin
-///   @include igx-grid-paginator($my-grid-paginator-theme);
-@function igx-grid-paginator-theme(
+///   // Pass the theme to the igx-paginator component mixin
+///   @include igx-paginator($my-paginator-theme);
+@function igx-paginator-theme(
     $palette: $default-palette,
     $schema: $light-schema,
 
     $text-color: null,
     $background-color: null,
     $border-color: null
 ) {
-    $name: 'igx-grid-paginator';
+    $name: 'igx-paginator';
     $theme: apply-palette(map-get($schema, $name), $palette);
 
     @return extend($theme, (
@@ -46,7 +46,7 @@
 /// @requires {mixin} igx-root-css-vars
 /// @requires rem
 /// @requires --var
-@mixin igx-grid-paginator($theme) {
+@mixin igx-paginator($theme) {
     @include igx-root-css-vars($theme);
 
     $paginator-padding: (
@@ -64,12 +64,13 @@
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
 
-    %igx-grid-paginator {
+    %igx-paginator {
         display: flex;
         justify-content: space-between;
         align-items: center;
         color: --var($theme, 'text-color');
         background: --var($theme, 'background-color');
+        // ??
         grid-row: 7;
         font-size: 12px;
         border-top: 1px solid --var($theme, 'border-color');
@@ -83,30 +84,30 @@
         }
     }
 
-    %igx-grid-paginator--cosy {
+    %igx-paginator--cosy {
         padding: map-get($paginator-padding, 'cosy');
         height: map-get($paginator-height, 'cosy');
     }
 
-    %igx-grid-paginator--compact {
+    %igx-paginator--compact {
         padding: map-get($paginator-padding, 'compact');
         height: map-get($paginator-height, 'compact');
     }
 
 
-    %igx-grid-paginator__label {
+    %igx-paginator__label {
         margin-#{$right}: 8px;
         @include ellipsis();
     }
 
-    %igx-grid-paginator__select {
+    %igx-paginator__select {
         display: flex;
         justify-content: flex-start;
         align-items: center;
         flex: 1;
     }
 
-    %igx-grid-paginator__pager {
+    %igx-paginator__pager {
         display: flex;
         justify-content: flex-end;
         align-items: center;
@@ -123,11 +124,11 @@
         }
     }
 
-    %igx-grid-paginator__pager-text {
+    %igx-paginator__pager-text {
         display: flex;
     }
 
-    %igx-grid-paginator__select-input {
+    %igx-paginator__select-input {
         display: flex;
         max-width: 90px;
         min-width: 80px;

…rid-paginator/_grid-paginator-theme.scss …mponents/paginator/_paginator-theme.scssprojects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss renamed to projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss renamed to projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss

@@ -27,7 +27,7 @@ $print-background: #eee;
         %igx-button--disabled,
         %grid-tbody-scrollbar,
         %vhelper-display,
-        %igx-grid-paginator,
+        %igx-paginator,
         %igx-grid-toolbar__actions,
         %grid__cbx-selection,
         %igx-drop-area__icon,
@@ -40,7 +40,7 @@ $print-background: #eee;
         }
 
         %igx-grid__grouparea,
-        %igx-grid-paginator,
+        %igx-paginator,
         %igx-grid-toolbar__actions,
         %igx-drop-area__icon,
         %igx-drop-area__text,

projects/igniteui-angular/src/lib/core/styles/print/_grid-print.scss

@@ -40,7 +40,7 @@
 @import '../components/expansion-panel/expansion-panel-component';
 @import '../components/grid/grid-component';
 @import '../components/grid-summary/grid-summary-component';
-@import '../components/grid-paginator/grid-paginator-component';
+@import '../components/paginator/paginator-component';
 @import '../components/grid-toolbar/grid-toolbar-component';
 @import '../components/highlight/highlight-component';
 @import '../components/icon/icon-component';

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -27,7 +27,7 @@
 @import '../components/expansion-panel/expansion-panel-theme';
 @import '../components/grid/grid-theme';
 @import '../components/grid-summary/grid-summary-theme';
-@import '../components/grid-paginator/grid-paginator-theme';
+@import '../components/paginator/paginator-theme';
 @import '../components/grid-toolbar/grid-toolbar-theme';
 @import '../components/highlight/highlight-theme';
 @import '../components/overlay/overlay-theme';
@@ -71,7 +71,7 @@
 /// @requires {mixin} igx-expansion-panel
 /// @requires {mixin} igx-grid
 /// @requires {mixin} igx-grid-summary
-/// @requires {mixin} igx-grid-paginator
+/// @requires {mixin} igx-paginator
 /// @requires {mixin} igx-icon
 /// @requires {mixin} igx-input-group
 /// @requires {mixin} igx-list
@@ -331,8 +331,8 @@
         @include igx-overlay(igx-overlay-theme($palette, $schema));
     }
 
-    @if not(index($exclude, 'igx-grid-paginator')) {
-        @include igx-grid-paginator(igx-grid-paginator-theme($palette, $schema));
+    @if not(index($exclude, 'igx-paginator')) {
+        @include igx-paginator(igx-paginator-theme($palette, $schema));
     }
 
     @if not(index($exclude, 'igx-circular-bar')) {