From 08f458e1e1f869df3a6fbdcdeddcafd31bdac61f Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 3 Apr 2025 16:19:36 +0300
Subject: [PATCH] refactor(grid-summaries): bundle styles with component
---
.../core/styles/themes/generators/_base.scss | 14 +--
.../summaries/grid-summary.component.scss | 4 +
.../grids/summaries/summary-cell.component.ts | 4 +-
.../grids/summaries/summary-row.component.ts | 5 +-
.../src/lib/grids/summaries/themes/_base.scss | 91 +++++++++++++++++++
.../grids/summaries/themes/dark/_index.scss | 6 ++
.../grids/summaries/themes/dark/_tokens.scss | 7 ++
.../grids/summaries/themes/light/_index.scss | 6 ++
.../grids/summaries/themes/light/_tokens.scss | 8 ++
.../grids/summaries/themes/shared/_index.scss | 1 +
.../summaries/themes/shared/_indigo.scss | 26 ++++++
11 files changed, 163 insertions(+), 9 deletions(-)
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/grid-summary.component.scss
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/themes/_base.scss
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_index.scss
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_tokens.scss
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/themes/light/_index.scss
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/themes/light/_tokens.scss
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_index.scss
create mode 100644 projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_indigo.scss
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index 8514f76c6ac..87c90e5ee64 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/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(
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.component.scss b/projects/igniteui-angular/src/lib/grids/summaries/grid-summary.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/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';
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts
index 8f4da37f72e..507548cfecb 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts
+++ b/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 {
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
index 6628188091d..e7e01819199 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
+++ b/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]
})
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/themes/_base.scss b/projects/igniteui-angular/src/lib/grids/summaries/themes/_base.scss
new file mode 100644
index 00000000000..c73235a93f6
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_index.scss
new file mode 100644
index 00000000000..2dfafa24720
--- /dev/null
+++ b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/grids/summaries/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..f1fa90b7050
--- /dev/null
+++ b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/themes/light/_index.scss b/projects/igniteui-angular/src/lib/grids/summaries/themes/light/_index.scss
new file mode 100644
index 00000000000..e242334cbe7
--- /dev/null
+++ b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/grids/summaries/themes/light/_tokens.scss
new file mode 100644
index 00000000000..ca2a2970f98
--- /dev/null
+++ b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_index.scss
new file mode 100644
index 00000000000..ca3dd3bc266
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_index.scss
@@ -0,0 +1 @@
+@forward 'indigo';
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/grids/summaries/themes/shared/_indigo.scss
new file mode 100644
index 00000000000..fb95206a05c
--- /dev/null
+++ b/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);
+ }
+}