refactor(grid-summaries): bundle styles with component

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

@@ -432,13 +432,13 @@
         @include grid($grid-theme-map);
     }
 
-    @if is-used('igx-grid-summary', $exclude) {
-        $grid-summary-theme-map: grid-summary-theme(
-            $schema: $schema,
-        );
-        $grid-summary-theme-map: meta.call($theme-handler, $grid-summary-theme-map);
-        @include grid-summary($grid-summary-theme-map);
-    }
+    // @if is-used('igx-grid-summary', $exclude) {
+    //     $grid-summary-theme-map: grid-summary-theme(
+    //         $schema: $schema,
+    //     );
+    //     $grid-summary-theme-map: meta.call($theme-handler, $grid-summary-theme-map);
+    //     @include grid-summary($grid-summary-theme-map);
+    // }
 
     @if is-used('igx-grid-toolbar', $exclude) {
         $grid-toolbar-theme-map: grid-toolbar-theme(

projects/igniteui-angular/src/lib/grids/summaries/grid-summary.component.scss

@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';

projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, HostBinding, HostListener, ChangeDetectionStrategy, ElementRef, TemplateRef, booleanAttribute } from '@angular/core';
+import { Component, Input, HostBinding, HostListener, ChangeDetectionStrategy, ElementRef, TemplateRef, booleanAttribute, ViewEncapsulation } from '@angular/core';
 import {
     IgxSummaryOperand,
     IgxSummaryResult
@@ -13,6 +13,8 @@ import { trackByIdentity } from '../../core/utils';
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-grid-summary-cell',
     templateUrl: './summary-cell.component.html',
+    styleUrl: 'grid-summary.component.css',
+    encapsulation: ViewEncapsulation.None,
     imports: [NgTemplateOutlet]
 })
 export class IgxSummaryCellComponent {

projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts

@@ -9,7 +9,8 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     DoCheck,
-    Inject
+    Inject,
+    ViewEncapsulation
 } from '@angular/core';
 import { IgxSummaryResult } from './grid-summary';
 import { IgxSummaryCellComponent } from './summary-cell.component';
@@ -25,6 +26,8 @@ import { trackByIdentity } from '../../core/utils';
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-grid-summary-row',
     templateUrl: './summary-row.component.html',
+    styleUrl: 'grid-summary.component.css',
+    encapsulation: ViewEncapsulation.None,
     providers: [IgxForOfSyncService],
     imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe]
 })

projects/igniteui-angular/src/lib/grids/summaries/themes/_base.scss

@@ -0,0 +1,91 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use './light/tokens' as *;
+
+$_theme: $material;
+
+@include layer(base) {
+    $cell-pin: (
+        style: var-get($_theme, 'pinned-border-width') var-get($_theme, 'pinned-border-style'),
+        color: var-get($_theme, 'pinned-border-color')
+    );
+
+    @include b(igx-grid-summary) {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 0%;
+        padding-block: 0;
+        padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+        background: var-get($_theme, 'background-color', inherit);
+        overflow: hidden;
+        outline-style: none;
+
+        &::after {
+            position: absolute;
+            inset: 0;
+        }
+
+        &:focus::after {
+            background: var-get($_theme, 'focus-background-color');
+        }
+
+        @include e(item) {
+            display: flex;
+            align-items: center;
+            position: relative;
+            padding-block: pad(rem(0), rem(2px), rem(6px));
+            padding-inline: 0;
+            font-size: rem(12px);
+        }
+
+        @include e(label) {
+            @include ellipsis();
+
+            color: var-get($_theme, 'label-color');
+            min-width: rem(30px);
+            margin-inline-end: rem(3px);
+
+            &:hover {
+                color: var-get($_theme, 'label-hover-color');
+            }
+        }
+
+        @include e(result) {
+            @include ellipsis();
+
+            color: var-get($_theme, 'result-color');
+            font-weight: 600;
+            flex: 1 1 auto;
+            text-align: end;
+        }
+
+        @include m(pinned) {
+            position: relative;
+            z-index: 1;
+        }
+
+        @include m(pinned-last) {
+            border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
+
+            @media print {
+                border-inline-end: map.get($cell-pin, 'style') #999;
+            }
+        }
+
+        @include m(pinned-first) {
+            border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
+
+            @media print {
+                border-inline-start: map.get($cell-pin, 'style') #999;
+            }
+        }
+
+        @include m(fw) {
+            flex-grow: 0;
+        }
+    }
+}

projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-grid-summary, $tokens, dark);

projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_tokens.scss

@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-summary' as *;
+
+$material: digest-schema($dark-material-grid-summary);
+$bootstrap: digest-schema($dark-bootstrap-grid-summary);
+$fluent: digest-schema($dark-fluent-grid-summary);
+$indigo: digest-schema($dark-indigo-grid-summary);

projects/igniteui-angular/src/lib/grids/summaries/themes/light/_index.scss

@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-grid-summary, $tokens, light);

projects/igniteui-angular/src/lib/grids/summaries/themes/light/_tokens.scss

@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/grid-summary' as *;
+
+$base: digest-schema($light-grid-summary);
+$material: digest-schema($material-grid-summary);
+$bootstrap: digest-schema($bootstrap-grid-summary);
+$fluent: digest-schema($fluent-grid-summary);
+$indigo: digest-schema($indigo-grid-summary);

projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_index.scss

@@ -0,0 +1 @@
+@forward 'indigo';

projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_indigo.scss

@@ -0,0 +1,26 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $indigo;
+
+@include themed-block(igx-grid-summary, indigo) {
+    padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+    border-top: rem(1px) solid var-get($_theme, 'border-color');
+
+    @include e(item) {
+        min-height: sizable(rem(24px), rem(30px), rem(36px));
+        font-size: initial;
+    }
+
+    @include e(label) {
+        @include type-style('caption');
+
+        margin-inline-end: initial;
+    }
+
+    @include e(result) {
+        @include type-style('detail-2', false);
+    }
+}