@if (iconTemplate) {
}
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts
index cdd36288ff4..cbfd834cdd0 100644
--- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts
@@ -9,6 +9,7 @@ import {
inject,
Input,
Output,
+ ViewEncapsulation,
booleanAttribute
} from '@angular/core';
import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component';
@@ -26,6 +27,8 @@ let NEXT_ID = 0;
@Component({
selector: 'igx-expansion-panel',
templateUrl: 'expansion-panel.component.html',
+ styleUrl: 'expansion-panel.component.css',
+ encapsulation: ViewEncapsulation.None,
providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }],
imports: []
})
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts
index 6e6b570d4e7..cbed56e4fa8 100644
--- a/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.spec.ts
@@ -850,33 +850,33 @@ describe('igxExpansionPanel', () => {
expect(header.iconPosition).toEqual('left');
expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
- expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START);
+ expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_START);
expect(headerButton.children[1].getBoundingClientRect().left).
toBeLessThan(headerButton.children[0].getBoundingClientRect().left);
header.iconPosition = ExpansionPanelHeaderIconPosition.NONE;
fixture.detectChanges();
expect(header.iconPosition).toEqual('none');
- expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE);
+ expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_NONE);
header.iconPosition = ExpansionPanelHeaderIconPosition.RIGHT;
fixture.detectChanges();
expect(header.iconPosition).toEqual('right');
expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
- expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_END);
+ expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_END);
expect(headerButton.children[0].getBoundingClientRect().left).
toBeLessThan(headerButton.children[1].getBoundingClientRect().left);
header.iconPosition = ExpansionPanelHeaderIconPosition.NONE;
fixture.detectChanges();
expect(header.iconPosition).toEqual('none');
- expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE);
+ expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_NONE);
header.iconPosition = ExpansionPanelHeaderIconPosition.LEFT;
fixture.detectChanges();
expect(header.iconPosition).toEqual('left');
expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
- expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START);
+ expect(headerButton.children[1].classList).toContain(CSS_CLASS_HEADER_ICON_START);
expect(headerButton.children[1].getBoundingClientRect().left).
toBeLessThan(headerButton.children[0].getBoundingClientRect().left);
});
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/_base.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/_base.scss
new file mode 100644
index 00000000000..61e213a2ba1
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/_base.scss
@@ -0,0 +1,137 @@
+@use 'igniteui-theming/sass/animations' as *;
+@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: $base;
+
+@include layer(base) {
+ $panel-padding: rem(16px) rem(24px);
+
+ %ellipsis {
+ @include ellipsis();
+ }
+
+ @include b(igx-expansion-panel) {
+ display: flex;
+ flex-direction: column;
+ border-radius: var-get($theme, 'border-radius');
+ overflow: hidden;
+ transition: margin 350ms $ease-out-quad;
+
+ @include e(title-wrapper) {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex: 1 0 0%;
+ overflow: hidden;
+ }
+
+ @include e(header-inner) {
+ display: flex;
+ align-items: center;
+ padding: $panel-padding;
+ cursor: pointer;
+ background: var-get($theme, 'header-background');
+
+ &:focus,
+ &:active {
+ background: var-get($theme, 'header-focus-background');
+ outline: transparent;
+ }
+ }
+
+ @include e(header-title) {
+ @extend %ellipsis;
+
+ color: var-get($theme, 'header-title-color');
+ margin-inline-end: rem(16px, 16px);
+ }
+
+ @include e(header-description) {
+ @extend %ellipsis;
+
+ color: var-get($theme, 'header-description-color');
+ }
+
+ @include e(header-icon) {
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ user-select: none;
+
+ color: var-get($theme, 'header-icon-color');
+
+ igx-icon {
+ --component-size: 3;
+ color: var-get($theme, 'header-icon-color');
+ }
+ }
+
+ @include e(header-icon, $m: start) {
+ order: -1;
+ margin-inline-end: rem(16px, 16px);
+ }
+
+ @include e(header-icon, $m: end) {
+ order: 1;
+ margin-inline-start: rem(16px, 16px);
+ }
+
+ @include e(header-icon, $m: none) {
+ display: none;
+ }
+
+ @include e(body) {
+ color: var-get($theme, 'body-color');
+ background: var-get($theme, 'body-background');
+ overflow: hidden;
+ padding: $panel-padding;
+ }
+
+ @include m(disabled) {
+ pointer-events: none;
+
+ @include e(header-title) {
+ color: var-get($theme, 'disabled-text-color');
+ }
+
+ @include e(header-description) {
+ color: var-get($theme, 'disabled-description-color');
+ }
+
+ @include e(header-icon) {
+ igx-icon {
+ color: var-get($theme, 'disabled-text-color');
+ }
+ }
+ }
+
+ @include m(expanded) {
+ margin: var-get($theme, 'expanded-margin') 0;
+
+ &:first-of-type {
+ margin-top: 0;
+ }
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ @include b(igx-accordion) {
+ box-sizing: content-box;
+ overflow-y: auto;
+
+ // WARN: This breaks BEM principles
+ .igx-expansion-panel__header-title {
+ @include line-clamp(4, true, true);
+
+ white-space: initial;
+ word-wrap: break-word;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/dark/_index.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/dark/_index.scss
new file mode 100644
index 00000000000..39864e7d817
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/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-expansion-panel, $tokens, dark);
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/dark/_tokens.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..658ebed7082
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/expansion-panel' as *;
+
+$material: digest-schema($dark-material-expansion-panel);
+$bootstrap: digest-schema($dark-bootstrap-expansion-panel);
+$fluent: digest-schema($dark-fluent-expansion-panel);
+$indigo: digest-schema($dark-indigo-expansion-panel);
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/light/_index.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/light/_index.scss
new file mode 100644
index 00000000000..3ae515b11e0
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/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-expansion-panel, $tokens, light);
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/light/_tokens.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/light/_tokens.scss
new file mode 100644
index 00000000000..8edf9400d6b
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/expansion-panel' as *;
+
+$base: digest-schema($light-expansion-panel);
+$material: digest-schema($material-expansion-panel);
+$bootstrap: digest-schema($bootstrap-expansion-panel);
+$fluent: digest-schema($fluent-expansion-panel);
+$indigo: digest-schema($indigo-expansion-panel);
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/_index.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/_index.scss
new file mode 100644
index 00000000000..ba66d4b4e48
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/_index.scss
@@ -0,0 +1,4 @@
+@forward 'material';
+@forward 'indigo';
+@forward 'bootstrap';
+@forward 'fluent';
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/bootstrap.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/bootstrap.scss
new file mode 100644
index 00000000000..1347faea319
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/bootstrap.scss
@@ -0,0 +1,23 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-expansion-panel, bootstrap) {
+ @include e(header-title) {
+ @include type-style(h5) {
+ margin: 0;
+ }
+ }
+
+ @include e(header-description) {
+ @include type-style(subtitle-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(body) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/fluent.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/fluent.scss
new file mode 100644
index 00000000000..daaba6e5b7e
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/fluent.scss
@@ -0,0 +1,23 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-expansion-panel, fluent) {
+ @include e(header-title) {
+ @include type-style(subtitle-1) {
+ margin: 0;
+ }
+ }
+
+ @include e(header-description) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(body) {
+ @include type-style(caption) {
+ margin: 0;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/indigo.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/indigo.scss
new file mode 100644
index 00000000000..5bb9bf6b902
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/indigo.scss
@@ -0,0 +1,47 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-expansion-panel, indigo) {
+ @include e(header-inner) {
+ padding: rem(10px) rem(16px);
+ }
+
+ @include e(header-icon) {
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(header-icon, $m: start) {
+ margin-inline-end: rem(8px, 16px);
+ }
+
+ @include e(header-icon, $m: end) {
+ margin-inline-start: rem(8px, 16px);
+ }
+
+ @include e(body) {
+ padding: rem(4px) rem(16px) rem(16px);
+ }
+
+ @include e(header-title) {
+ margin-block-end: rem(2px);
+
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(header-description) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(body) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/material.scss b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/material.scss
new file mode 100644
index 00000000000..3dd2adbeadb
--- /dev/null
+++ b/projects/igniteui-angular/expansion-panel/src/expansion-panel/themes/shared/material.scss
@@ -0,0 +1,23 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-expansion-panel, material) {
+ @include e(header-title) {
+ @include type-style(h5) {
+ margin: 0;
+ }
+ }
+
+ @include e(header-description) {
+ @include type-style(subtitle-2) {
+ margin: 0;
+ }
+ }
+
+ @include e(body) {
+ @include type-style(body-2) {
+ margin: 0;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.scss b/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts b/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts
index 0c474bc8585..7c8e04417cc 100644
--- a/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts
+++ b/projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.ts
@@ -1,4 +1,21 @@
-import { Component, DoCheck, EventEmitter, HostBinding, Input, IterableDiffer, IterableDiffers, Output, Pipe, PipeTransform, QueryList, ViewChildren, booleanAttribute, forwardRef, inject } from '@angular/core';
+import {
+ Component,
+ DoCheck,
+ EventEmitter,
+ HostBinding,
+ Input,
+ IterableDiffer,
+ IterableDiffers,
+ Output,
+ Pipe,
+ PipeTransform,
+ QueryList,
+ ViewChildren,
+ ViewEncapsulation,
+ booleanAttribute,
+ forwardRef,
+ inject
+} from '@angular/core';
import { ColumnDisplayOrder } from '../common/enums';
import { GridType } from '../common/grid.interface';
import { IColumnToggledEventArgs } from '../common/events';
@@ -18,7 +35,9 @@ let NEXT_ID = 0;
*/
@Component({
selector: 'igx-column-actions',
+ styleUrl: 'column-actions.component.css',
templateUrl: './column-actions.component.html',
+ encapsulation: ViewEncapsulation.None,
imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)]
})
export class IgxColumnActionsComponent implements DoCheck {
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/themes/_base.scss b/projects/igniteui-angular/grids/core/src/column-actions/themes/_base.scss
new file mode 100644
index 00000000000..bc0294c0de7
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/themes/_base.scss
@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use 'sass:meta';
+@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) {
+ @include b(igx-column-actions) {
+ display: flex;
+ flex-flow: column nowrap;
+ background: var-get($_theme, 'background-color');
+ box-shadow: var(--ig-elevation-8);
+ width: 100%;
+ flex: 1 1 auto;
+ min-width: rem(180px);
+
+ @include e(header-title) {
+ @include type-style(subtitle-1);
+
+ color: var-get($_theme, 'title-color');
+ margin: 0;
+ padding: rem(16px) rem(16px) rem(8px);
+ }
+
+ @include e(header-input) {
+ font-size: rem(16px);
+ margin: 0 !important;
+ padding: rem(8px) rem(16px);
+ }
+
+ @include e(columns) {
+ display: flex;
+ flex-flow: column nowrap;
+ overflow-y: auto;
+ outline-style: none;
+ }
+
+ @include e(columns-item) {
+ padding: rem(4px) rem(16px);
+ min-height: rem(32px);
+ }
+
+ @include e(buttons) {
+ display: flex;
+ justify-content: flex-end;
+ padding: rem(8px) rem(16px);
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/themes/dark/_index.scss b/projects/igniteui-angular/grids/core/src/column-actions/themes/dark/_index.scss
new file mode 100644
index 00000000000..a1760eedbce
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/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-column-actions, $tokens, dark);
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/core/src/column-actions/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..eacc4f226ea
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/column-actions' as *;
+
+$material: digest-schema($dark-material-column-actions);
+$bootstrap: digest-schema($dark-bootstrap-column-actions);
+$fluent: digest-schema($dark-fluent-column-actions);
+$indigo: digest-schema($dark-indigo-column-actions);
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/themes/light/_index.scss b/projects/igniteui-angular/grids/core/src/column-actions/themes/light/_index.scss
new file mode 100644
index 00000000000..471e1af6c8b
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/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-column-actions, $tokens, light);
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/themes/light/_tokens.scss b/projects/igniteui-angular/grids/core/src/column-actions/themes/light/_tokens.scss
new file mode 100644
index 00000000000..a70c3491636
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/column-actions' as *;
+
+$base: digest-schema($light-column-actions);
+$material: digest-schema($material-column-actions);
+$bootstrap: digest-schema($bootstrap-column-actions);
+$fluent: digest-schema($fluent-column-actions);
+$indigo: digest-schema($indigo-column-actions);
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/themes/shared/_index.scss b/projects/igniteui-angular/grids/core/src/column-actions/themes/shared/_index.scss
new file mode 100644
index 00000000000..945f5346612
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/themes/shared/_index.scss
@@ -0,0 +1 @@
+@forward 'material';
diff --git a/projects/igniteui-angular/grids/core/src/column-actions/themes/shared/material.scss b/projects/igniteui-angular/grids/core/src/column-actions/themes/shared/material.scss
new file mode 100644
index 00000000000..3f0171ea8d5
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/column-actions/themes/shared/material.scss
@@ -0,0 +1,24 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-column-actions, material) {
+ .igx-checkbox__composite-wrapper {
+ padding: 0;
+ }
+
+ .igx-checkbox__label {
+ margin-inline-start: rem(12px);
+ }
+
+ .igx-checkbox__label--before {
+ margin-inline-end: rem(12px);
+ }
+
+ .igx-checkbox__label,
+ .igx-checkbox__label--before {
+ &:empty {
+ margin: 0;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts
index 166248f9aa4..981ab976abd 100644
--- a/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.ts
@@ -15,7 +15,7 @@ import {
ViewChild,
ViewRef,
DOCUMENT,
- inject
+ inject, ViewEncapsulation
} from '@angular/core';
import { Subscription } from 'rxjs';
import { GridSelectionMode } from '../../common/enums';
@@ -62,6 +62,8 @@ export class IgxExcelStyleFilterOperationsTemplateDirective { }
providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }],
selector: 'igx-grid-excel-style-filtering',
templateUrl: './excel-style-filtering.component.html',
+ styleUrls: ['./excel-style-filtering.component.css'],
+ encapsulation: ViewEncapsulation.None,
imports: [IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass]
})
export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent implements AfterViewInit, OnDestroy {
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss
new file mode 100644
index 00000000000..95375a431e5
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_base.scss
@@ -0,0 +1,464 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'igniteui-theming/sass/elevations/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use './light/tokens' as *;
+
+$theme: $material;
+
+$tree-node-indent: (
+ comfortable: #{rem(16px)},
+ cosy: #{rem(8px)},
+ compact: #{rem(4px)}
+);
+
+$tree-node-expander-size: #{rem(20px)};
+
+$tree-node-height: (
+ comfortable: rem(40px),
+ cosy: rem(32px),
+ compact: rem(24px)
+);
+
+$checkbox-indent: (
+ comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}),
+ cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}),
+ compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}),
+);
+
+@include layer(base) {
+ %grid-excel-actions__action {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-block: pad-block(rem(4px), rem(8px), rem(8px));
+ padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+ cursor: pointer;
+
+ // TODO MOVE excel-filtering-actions-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-actions-foreground');
+ color: color($color: 'gray', $variant: 700);
+
+ outline-style: none;
+
+ &:hover,
+ &:focus {
+ // TODO MOVE excel-filtering-actions-hover-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+ color: color($color: 'gray', $variant: 700);
+
+ background: color($color: 'gray', $variant: 100);
+ }
+
+ [dir='rtl'] & {
+ igx-icon {
+ transform: scaleX(-1);
+ }
+ }
+ }
+
+ %grid-excel-action--compact {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ header {
+ margin-inline-end: auto;
+ }
+ }
+
+ %grid-excel-sort-move {
+ display: block;
+ padding-block: pad-block(rem(4px), rem(8px), rem(8px));
+ padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+
+ header {
+ @include type-style('overline');
+
+ // TODO MOVE excel-filtering-subheader-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-subheader-foreground');
+ color: color($color: 'gray', $variant: 700);
+
+ margin-block-end: rem(4px);
+ }
+
+ igx-icon {
+ --component-size: 1;
+
+ display: initial;
+ width: var(--size) !important;
+ height: var(--size) !important;
+ font-size: var(--size) !important;
+ }
+ }
+
+ @include b(igx-excel-filter) {
+ --component-size: var(--ig-size, var(--ig-size-large));
+
+ display: block;
+ overflow: auto;
+ width: rem(320px);
+ min-width: rem(320px);
+ height: 100%;
+ flex-grow: 1;
+ box-shadow: elevation(12);
+ background: var(--filtering-row-background);
+
+ @include e(sizing) {
+ @include sizable();
+
+ min-height: sizable(rem(330px), rem(465px), rem(645px));
+ max-height: sizable(rem(405px), rem(565px), rem(775px));
+ }
+
+ @include e(menu) {
+ --component-size: var(--ig-size, var(--ig-size-large));
+
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ // TODO: The border-radius should not be hardcoded.
+ border-radius: border-radius(rem(4px));
+
+ background: var(--filtering-row-background);
+
+ .igx-button-group {
+ --elevation: none !important;
+
+
+ --item-background: var(--filtering-row-background);
+
+ --item-hover-background: #{color($color: 'gray', $variant: 100)} !important;
+ --item-selected-background: #{color($color: 'gray', $variant: 100)} !important;
+ --item-text-color: #{color($color: 'gray', $variant: 700)} !important;
+ --item-icon-color: #{color($color: 'gray', $variant: 700)} !important;
+ --item-hover-text-color: #{color($color: 'gray', $variant: 800)} !important;
+ --item-hover-icon-color: #{color($color: 'gray', $variant: 800)} !important;
+ --item-selected-text-color: color($color: 'secondary', $variant: 500) !important;
+ --item-selected-icon-color: color($color: 'secondary', $variant: 500) !important;
+ --item-selected-hover-icon-color: contrast-color($color: 'gray', $variant: 50) !important;
+ --item-border-color: transparent !important;
+ --item-hover-border-color: transparent !important;
+ --item-focused-border-color: transparent !important;
+ --item-selected-border-color: transparent !important;
+ --item-selected-hover-border-color: transparent !important;
+ --item-disabled-border: transparent !important;
+ --disabled-selected-border-color: transparent !important;
+ }
+
+ .igx-tree-node__wrapper {
+ padding: 0;
+ }
+
+ igx-chips-area {
+ padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
+ padding-block-start: pad-block(rem(4px), rem(8px), rem(16px));
+ padding-block-end: 0;
+ gap: sizable(rem(4px), rem(4px), rem(8px));
+ }
+
+ // TODO SEE IF THIS IS THE BEST WAY
+ //@include tree(tree-theme(
+ // $background: color($color: 'surface'),
+ // $background-selected: color($color: 'surface'),
+ // $background-active: color($color: 'surface'),
+ // $background-active-selected: color($color: 'surface'),
+ // $foreground: contrast-color($color: 'surface'),
+ // $foreground-selected: contrast-color($color: 'surface'),
+ // $foreground-active: contrast-color($color: 'surface'),
+ // $foreground-active-selected: contrast-color($color: 'surface'),
+ //));
+ }
+
+ @include e(menu-header) {
+ display: flex;
+ align-items: center;
+ padding: pad(rem(4px), rem(8px), rem(16px));
+
+ > h4 {
+ @include type-style('h6');
+ }
+
+ // TODO MOVE excel-filtering-header-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-header-foreground');
+ color: color($color: 'gray', $variant: 700);
+ }
+
+ @include e(menu-main) {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ overflow: hidden;
+ padding: pad(rem(4px), rem(8px), rem(16px));
+ gap: sizable(rem(4px), rem(8px), rem(16px));
+
+ igx-list {
+ flex-grow: 1;
+ overflow: hidden;
+ margin-inline: calc(#{sizable(rem(-4px), rem(-8px), rem(-16px))} * -1);
+ border: 0;
+ border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
+ border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
+ }
+ }
+
+ @include e(tree) {
+ background: color($color: 'surface');
+ overflow-y: auto;
+ margin-inline: calc(#{pad-inline(rem(-4px), rem(-8px), rem(-16px))} * -1);
+ margin-block: 0;
+ flex: 1;
+ border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
+ border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
+
+ igx-icon {
+ width: var(--ig-icon-size, #{$tree-node-expander-size});
+ height: var(--ig-icon-size, #{$tree-node-expander-size});
+ font-size: var(--ig-icon-size, #{$tree-node-expander-size});
+ }
+
+ > igx-checkbox,
+ .igx-tree-node__wrapper {
+ height: #{sizable(
+ map.get($tree-node-height, 'compact'),
+ map.get($tree-node-height, 'cosy'),
+ map.get($tree-node-height, 'comfortable')
+ )};
+
+ min-height: #{sizable(
+ map.get($tree-node-height, 'compact'),
+ map.get($tree-node-height, 'cosy'),
+ map.get($tree-node-height, 'comfortable')
+ )};
+ }
+
+ .igx-tree-node__toggle-button {
+ min-width: rem(20px);
+ margin-inline-start: pad-inline(
+ map.get($tree-node-indent, 'compact'),
+ map.get($tree-node-indent, 'cosy'),
+ map.get($tree-node-indent, 'comfortable')
+ );
+ margin-inline-end: pad-inline(rem(4px), rem(8px));
+ }
+
+ .igx-tree {
+ overflow-y: hidden;
+ }
+ }
+
+ @include e(tree-alike) {
+ background: color($color: 'surface');
+ display: flex;
+ flex-direction: column;
+ z-index: 1;
+ }
+
+ @include e(tree-alike-item) {
+ display: flex;
+ align-items: center;
+ height: sizable(
+ map.get($tree-node-height, 'compact'),
+ map.get($tree-node-height, 'cosy'),
+ map.get($tree-node-height, 'comfortable')
+ );
+ background: color($color: 'surface');
+
+ &:hover,
+ &:focus {
+ background: color($color: 'gray', $variant: 200);
+ }
+
+ > igx-checkbox {
+ margin-inline-start: pad-inline(
+ map.get($checkbox-indent, 'compact'),
+ map.get($checkbox-indent, 'cosy'),
+ map.get($checkbox-indent, 'comfortable')
+ );
+ }
+ }
+
+ @include e(sort) {
+ @extend %grid-excel-sort !optional;
+ @extend %grid-excel-sort-move !optional;
+
+ .igx-button-group {
+ [dir='rtl'] & {
+ flex-direction: row-reverse;
+
+ // stylelint-disable-next-line max-nesting-depth
+ igx-icon,
+ [igxButton] {
+ direction: ltr;
+ }
+ // stylelint-enable-next-line max-nesting-depth
+ }
+ }
+ }
+
+ @include e(move) {
+ @extend %grid-excel-sort-move !optional;
+ }
+
+ @include e(actions-pin) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-pin, $m: disabled) {
+ @extend %grid-excel-actions__action !optional;
+
+ // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+ color: color($color: 'gray', $variant: 400);
+
+ pointer-events: none;
+ }
+
+ @include e(actions-unpin) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-hide) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-select) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-selected) {
+ @extend %grid-excel-actions__action !optional;
+
+ igx-icon {
+ color: color($color: 'secondary', $variant: 500);
+ }
+ }
+
+ @include e(actions-filter) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-filter, $m: active) {
+ @extend %grid-excel-actions__action !optional;
+
+ background: color($color: 'gray', $variant: 100);
+
+ // TODO MOVE excel-filtering-actions-hover-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+ color: color($color: 'gray', $variant: 700);
+ }
+
+ @include e(actions-clear) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-clear, $m: disabled) {
+ @extend %grid-excel-actions__action !optional;
+
+ // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+ color: color($color: 'gray', $variant: 400);
+
+ pointer-events: none;
+ }
+
+ @include e(menu-header-actions) {
+ display: flex;
+ margin-inline-start: auto;
+ gap: rem(4px);
+ }
+
+ // Filtering
+ @include e(secondary-header) {
+ border-block-end: rem(1px) solid color($color: 'gray', $variant: 300);
+
+ > h4 {
+ @include type-style('h6')
+ }
+ }
+
+ @include e(filter-results) {
+ position: absolute;
+ width: rem(1px);
+ height: rem(1px);
+ overflow: hidden;
+ }
+
+ @include e(menu-footer) {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ @include e(apply) {
+ flex-grow: 1;
+
+ [igxButton] {
+ width: 100%;
+ }
+ }
+
+ @include e(cancel) {
+ flex-grow: 1;
+
+ [igxButton] {
+ width: 100%;
+ }
+ }
+
+ @include m(inline) {
+ box-shadow: none;
+ width: 100%;
+ }
+
+ @include e(menu, $m: compact) {
+ .igx-excel-filter__sort {
+ @extend %grid-excel-action--compact;
+
+ igx-buttongroup {
+ width: rem(208px);
+ }
+
+ header {
+ @include type-style('body-2');
+ }
+ }
+
+ igx-excel-filter__move {
+ @extend %grid-excel-action--compact;
+
+ igx-buttongroup {
+ width: rem(208px);
+ }
+
+ header {
+ @include type-style('body-2');
+
+ text-transform: capitalize;
+
+ }
+ }
+
+ .igx-excel-filter__menu-header {
+ @include type-style('subtitle-1')
+ }
+
+ .igx-excel-filter__menu-header-actions {
+ span {
+ @include type-style('body-2');
+ }
+ }
+
+ .igx-checkbox__label {
+ @include type-style('body-2');
+ }
+ }
+
+ @include e(clear) {
+ flex-grow: 1;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss
new file mode 100644
index 00000000000..c6dfd747325
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_index.scss
@@ -0,0 +1,7 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+@use 'indigo';
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-excel-filter, $tokens, dark);
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss
new file mode 100644
index 00000000000..5fe4866f646
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_indigo.scss
@@ -0,0 +1,81 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'igniteui-theming/sass/elevations' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-excel-filter, indigo, dark) {
+ %grid-excel-actions__action {
+ background: contrast-color($color: 'gray', $variant: 50, $opacity: .1);
+
+ &:hover,
+ &:focus {
+ igx-icon {
+ color: contrast-color($color: 'gray', $variant: 50, $opacity: .8);
+
+ }
+ }
+
+ igx-icon {
+ color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
+ }
+ }
+
+ @include e(actions-pin) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-pin, $m: disabled) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-unpin) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-hide) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-select) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-selected) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-filter) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-filter, $m: active) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-clear) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-clear, $m: disabled) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(menu) {
+ background: color($color: 'gray', $variant: 50);
+
+ .igx-button-group {
+ --item-text-color: #{contrast-color($color: 'surface', $variant: 500)};
+ }
+ }
+
+ @include e(menu-main) {
+ border-block: rem(1px) dashed color($color: 'gray', $variant: 100);
+ }
+
+ @include e(tree) {
+ %igx-excel-filter__tree {
+ border-block: rem(1px) dashed color($color: 'gray', $variant: 100);
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..e2944e3883f
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-filtering' as *;
+
+$material: digest-schema($dark-material-grid-filtering);
+$bootstrap: digest-schema($dark-bootstrap-grid-filtering);
+$fluent: digest-schema($dark-fluent-grid-filtering);
+$indigo: digest-schema($dark-indigo-grid-filtering);
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_index.scss
new file mode 100644
index 00000000000..7aa5f25945f
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/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-excel-filter, $tokens, light);
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss
new file mode 100644
index 00000000000..c481da18361
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/grid-filtering' as *;
+
+$base: digest-schema($light-grid-filtering);
+$material: digest-schema($material-grid-filtering);
+$bootstrap: digest-schema($bootstrap-grid-filtering);
+$fluent: digest-schema($fluent-grid-filtering);
+$indigo: digest-schema($indigo-grid-filtering);
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss
new file mode 100644
index 00000000000..06e696ef72c
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_bootstrap.scss
@@ -0,0 +1,31 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'igniteui-theming/sass/typography/mixins' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-excel-filter, bootstrap) {
+ @include e(secondary-header) {
+ border-block-end: rem(1px) solid color($color: 'gray', $variant: 100);
+ }
+
+ @include e(secondary-footer) {
+ padding-inline: pad-inline(rem(16px));
+ padding-block: pad-block(rem(16px));
+ border-top: rem(1px) solid color($color: 'gray', $variant: 300);
+ }
+
+ @include e(menu-main) {
+ igx-list {
+ border-top: rem(1px) dashed var(--ig-gray-100);
+ border-bottom: rem(1px) dashed var(--ig-gray-100);
+ }
+ }
+
+ @include e(menu-header) {
+ > h4 {
+ @include type-style('subtitle-1');
+ }
+ }
+}
+
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss
new file mode 100644
index 00000000000..b702498a688
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_fluent.scss
@@ -0,0 +1,12 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-excel-filter, fluent) {
+ @include m(menu) {
+ .igx-button-group {
+ --item-selected-hover-icon-color: color($color: 'secondary', $variant: 500);
+ --item-focused-border-color: color($color: 'gray', $variant: 700);
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss
new file mode 100644
index 00000000000..0ca60c75786
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_index.scss
@@ -0,0 +1,4 @@
+@forward 'material';
+@forward 'bootstrap';
+@forward 'fluent';
+@forward 'indigo';
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss
new file mode 100644
index 00000000000..ca5fbacd686
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_indigo.scss
@@ -0,0 +1,182 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+// TODO type style is throwing an error
+
+@include themed-block(igx-excel-filter, indigo) {
+ %grid-excel-actions__action {
+ padding-block: pad-block(rem(4px), rem(6px), rem(8px));
+ padding-inline: pad-inline(rem(12px));
+ margin-inline: rem(8px);
+ margin-block-end: rem(4px);
+ border-radius: rem(4px);
+
+ &:hover,
+ &:focus {
+ background: color($color: 'gray', $variant: 200);
+
+ igx-icon {
+ color: color($color: 'gray', $variant: 700);
+ }
+ }
+
+
+ igx-icon {
+ --component-size: 2;
+
+ color: color($color: 'gray', $variant: 600);
+ }
+ }
+
+ @include e(actions-pin) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-pin, $m: disabled) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-unpin) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-hide) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-select) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-selected) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-filter) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-filter, $m: active) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-clear) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ @include e(actions-clear, $m: disabled) {
+ @extend %grid-excel-actions__action !optional;
+ }
+
+ %grid-excel-sort-move {
+ padding-inline: pad-inline(rem(16px));
+
+ header {
+ margin-block-end: sizable(rem(0), rem(4px), rem(4px)) !important;
+ text-transform: capitalize !important;
+ }
+
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(menu) {
+ background: contrast-color($color: 'gray', $variant: 900);
+
+ .igx-button-group__item {
+ &:not(:nth-child(1)) {
+ margin: 0;
+ }
+ }
+
+ .igx-button-group {
+ --item-background: transparent !important;
+ --border-color: transparent !important;
+ --item-border-color: transparent !important;
+ --item-focused-border-color: transparent !important;
+ --item-hover-border-color: transparent !important;
+ --item-selected-border-color: transparent !important;
+ --item-selected-hover-border-color: transparent !important;
+ --item-disabled-border: transparent !important;
+ --disabled-selected-border-color: transparent !important;
+ --elevation: none !important;
+ --item-selected-text-color: contrast-color($color: 'surface') !important;
+ --item-selected-icon-color: contrast-color($color: 'surface') !important;
+ }
+ }
+
+ @include e(menu-header) {
+ padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px)));
+ }
+
+ @include e(menu-main) {
+ padding: pad(rem(16px));
+ gap: sizable(rem(16px));
+
+ igx-list {
+ --background: #{color($color: 'surface', $variant: 500)};
+
+ margin-inline: calc(#{sizable(rem(-16px))} * -1);
+
+ // This is the only way to take the gap from the list,
+ // otherwise we have to hardcode it here
+ > div {
+ gap: inherit;
+ }
+
+ igx-display-container {
+ display: flex;
+ flex-direction: column;
+ gap: inherit;
+ padding: pad(rem(8px));
+ }
+ }
+ }
+
+ @include e(actions-filter) {
+ margin-block-end: 0;
+ }
+
+ @include e(actions-pin, $m: disabled) {
+ igx-icon {
+ // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+ color: color($color: 'gray', $variant: 900, $opacity: .2);
+ }
+ }
+
+ @include e(actions-clear, $m: disabled) {
+ igx-icon {
+ // TODO MOVE excel-filtering-actions-disabled-foreground TO THE FILTERING SCHEMA and use it here.
+ //color: var-get($theme, 'excel-filtering-actions-disabled-foreground');
+ color: color($color: 'gray', $variant: 900, $opacity: .2);
+ }
+ }
+
+ @include e(sort) {
+ @extend %grid-excel-sort-move !optional;
+
+ padding-block-end: 0;
+ }
+
+ @include e(move) {
+ @extend %grid-excel-sort-move !optional;
+
+ margin-block-end: sizable(rem(12px), rem(16px), rem(16px));
+ }
+
+ .igx-excel-filter__sort + igx-excel-filter__move {
+ margin-block-start: sizable(rem(4px), rem(8px), rem(8px));
+ }
+
+ .ig-typography .igx-excel-filter__menu--compact {
+ .igx-excel-filter__menu-header {
+ > h4 {
+ @include type-style('h6')
+ }
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss
new file mode 100644
index 00000000000..8a7e8c265e6
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/shared/_material.scss
@@ -0,0 +1,6 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-excel-filter, material) {
+}
diff --git a/projects/igniteui-angular/grids/core/src/summaries/grid-summary.component.scss b/projects/igniteui-angular/grids/core/src/summaries/grid-summary.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/summaries/summary-cell.component.ts b/projects/igniteui-angular/grids/core/src/summaries/summary-cell.component.ts
index 546ff2ea00b..2618cf41221 100644
--- a/projects/igniteui-angular/grids/core/src/summaries/summary-cell.component.ts
+++ b/projects/igniteui-angular/grids/core/src/summaries/summary-cell.component.ts
@@ -1,15 +1,33 @@
-import { Component, Input, HostBinding, HostListener, ChangeDetectionStrategy, ElementRef, TemplateRef, booleanAttribute, inject } from '@angular/core';
import {
- IgxSummaryOperand
-} from './grid-summary';
+ Component,
+ Input,
+ HostBinding,
+ HostListener,
+ ChangeDetectionStrategy,
+ ElementRef,
+ TemplateRef,
+ booleanAttribute,
+ ViewEncapsulation,
+ inject
+} from '@angular/core';
+import { IgxSummaryOperand } from './grid-summary';
import { NgTemplateOutlet } from '@angular/common';
import { ISelectionNode } from '../common/types';
-import { GridTypeBase, ColumnType, GridColumnDataType, IgxSummaryResult, trackByIdentity, BaseFormatter } from 'igniteui-angular/core';
+import {
+ GridTypeBase,
+ ColumnType,
+ GridColumnDataType,
+ IgxSummaryResult,
+ trackByIdentity,
+ BaseFormatter
+} from 'igniteui-angular/core';
@Component({
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/grids/core/src/summaries/summary-row.component.ts b/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts
index 963f721eb2b..f6ee27599ec 100644
--- a/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts
+++ b/projects/igniteui-angular/grids/core/src/summaries/summary-row.component.ts
@@ -9,6 +9,7 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
DoCheck,
+ ViewEncapsulation,
inject
} from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
@@ -23,6 +24,8 @@ import { ColumnType, IgxSummaryResult, trackByIdentity } from 'igniteui-angular/
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/grids/core/src/summaries/themes/_base.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss
new file mode 100644
index 00000000000..15763328d3f
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/summaries/themes/_base.scss
@@ -0,0 +1,127 @@
+@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;
+
+ // TODO MAYBE WE SHOULD RENAME THIS VARIABLES SO THE CAN BE USED IN THE SUMMARY AND grid BODY
+ border-inline-end: var(--header-border-width) var(--header-border-style) var-get($_theme, 'border-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 mx(active, pinned) {
+ &::after {
+ width: calc(100% - rem(1px));
+ }
+ }
+
+ @include m(pinned-first) {
+ border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
+
+ &:dir(ltr) {
+ box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color');
+ }
+
+ &:dir(rtl) {
+ box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color');
+ }
+
+ @media print {
+ border-inline-start: map.get($cell-pin, 'style') #999;
+ }
+ }
+
+ @include m(pinned-last) {
+ border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color');
+
+ &::after {
+ inset-inline-start: rem(1px);
+ }
+
+ @media print {
+ border-inline-end: map.get($cell-pin, 'style') #999;
+ }
+
+ &:dir(ltr) {
+ box-shadow: inset rem(-1px) 0 0 0 var-get($_theme, 'pinned-border-color');
+ }
+
+ &:dir(rtl) {
+ box-shadow: inset rem(1px) 0 0 0 var-get($_theme, 'pinned-border-color');
+ }
+ }
+
+ @include m(fw) {
+ flex-grow: 0;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ }
+
+ @include m(active) {
+ &::after {
+ width: 100%;
+ height: 100%;
+ box-shadow: inset 0 0 0 rem(1px) var(--cell-active-border-color);
+ pointer-events: none;
+ }
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/summaries/themes/dark/_index.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/dark/_index.scss
new file mode 100644
index 00000000000..2dfafa24720
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/summaries/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..f1fa90b7050
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/summaries/themes/light/_index.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/light/_index.scss
new file mode 100644
index 00000000000..e242334cbe7
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/summaries/themes/light/_tokens.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/light/_tokens.scss
new file mode 100644
index 00000000000..ca2a2970f98
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/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/grids/core/src/summaries/themes/shared/_index.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/shared/_index.scss
new file mode 100644
index 00000000000..ca3dd3bc266
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/summaries/themes/shared/_index.scss
@@ -0,0 +1 @@
+@forward 'indigo';
diff --git a/projects/igniteui-angular/grids/core/src/summaries/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/core/src/summaries/themes/shared/_indigo.scss
new file mode 100644
index 00000000000..fb95206a05c
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/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);
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.scss b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts
index 57ea58f5add..f297375dcfe 100644
--- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts
+++ b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts
@@ -1,4 +1,14 @@
-import { Component, ContentChild, ElementRef, HostBinding, Input, OnDestroy, booleanAttribute, inject } from '@angular/core';
+import {
+ Component,
+ ContentChild,
+ ElementRef,
+ HostBinding,
+ Input,
+ OnDestroy,
+ ViewEncapsulation,
+ booleanAttribute,
+ inject
+} from '@angular/core';
import { Subscription } from 'rxjs';
import { pinLeft, unpinLeft } from '@igniteui/material-icons-extended';
import { IgxGridToolbarActionsComponent } from './common';
@@ -28,6 +38,8 @@ import { IgxIconService } from 'igniteui-angular/icon';
@Component({
selector: 'igx-grid-toolbar',
templateUrl: './grid-toolbar.component.html',
+ styleUrl: 'grid-toolbar.component.css',
+ encapsulation: ViewEncapsulation.None,
providers: [{ provide: IgxToolbarToken, useExisting: IgxGridToolbarComponent }],
imports: [IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, NgTemplateOutlet, IgxLinearProgressBarComponent]
})
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/_base.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/_base.scss
new file mode 100644
index 00000000000..515522c8f52
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/_base.scss
@@ -0,0 +1,153 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use 'light/tokens' as *;
+
+$theme: $base;
+
+@include layer(base) {
+ @include b(igx-grid-toolbar) {
+ @include sizable();
+
+ --component-size: var(--ig-size, var(--ig-size-large));
+ position: relative;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ grid-row: 1;
+ font-size: rem(16px);
+ border-bottom: rem(1px) solid var-get($theme, 'border-color');
+ background: var-get($theme, 'background-color');
+ height: auto;
+ min-height: var-get($theme, 'size');
+ padding-block: 0;
+ padding-inline-start: pad-inline(rem(12px), rem(16px), rem(24px));
+ padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px));
+
+ [igxButton] {
+ margin-inline-start: pad-inline(rem(8px), rem(12px), rem(16px));
+
+ &:first-of-type {
+ margin-inline-start: 0;
+ }
+
+ &:last-of-type {
+ margin-inline-end: 0;
+ }
+ }
+
+ &[dir='rtl'] {
+ text-align: end;
+
+ [igxButton] {
+ margin-inline-start: 0;
+ margin-inline-end: rem(8);
+
+ &:last-child {
+ margin-inline-end: 0;
+ }
+ }
+ }
+
+ @include e(title) {
+ @include ellipsis();
+
+ color: var-get($theme, 'title-text-color');
+ flex: 1 1 auto;
+ max-width: 40ch;
+ margin-inline-end: rem(16px);
+
+ &:empty {
+ display: none;
+ }
+
+ &:empty + .igx-grid-toolbar__custom-content:empty {
+ + igx-grid-toolbar-actions {
+ width: 100%;
+ margin-inline-start: 0;
+ justify-content: flex-end;
+ }
+ }
+ }
+
+ @include e(custom-content) {
+ display: flex;
+ flex-wrap: wrap;
+ flex-grow: 1;
+ justify-content: flex-end;
+ margin-inline-end: rem(16px);
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ @include e(actions) {
+ display: flex;
+ align-items: center;
+ flex-flow: row wrap;
+ margin-inline-start: auto;
+ gap: rem(16px);
+
+ > * {
+ display: flex;
+ }
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ @include e(progress-bar) {
+ position: absolute;
+ width: 100%;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ bottom: rem(-1px);
+ height: rem(2px);
+ overflow: hidden;
+ background: var-get($theme, 'background-color');
+
+ igx-linear-bar > * {
+ border-radius: 0;
+
+ &:first-child > div {
+ background: color($color: 'secondary');
+ }
+ }
+ }
+
+ @include e(dropdown){
+ position: relative;
+ }
+
+ @include e(dd-list){
+ list-style: none;
+ background: var-get($theme, 'dropdown-background');
+ margin: 0;
+ padding: 0;
+ box-shadow: var(--ig-elevation-8);
+ }
+
+ @include e(dd-list-items){
+ cursor: pointer;
+ position: relative;
+ padding: rem(8px) rem(16px);
+ color: var-get($theme, 'item-text-color');
+ white-space: nowrap;
+
+ &:hover {
+ background: var-get($theme, 'item-hover-background');
+ color: var-get($theme, 'item-hover-text-color');
+ }
+
+ &:focus {
+ background: var-get($theme, 'item-focus-background');
+ color: var-get($theme, 'item-focus-text-color');
+ }
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_index.scss
new file mode 100644
index 00000000000..b91e53b68f5
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_index.scss
@@ -0,0 +1,7 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props');
+@include themes(igx-grid-toolbar, $toolbar-tokens, dark);
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..9154c469099
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/dark/_tokens.scss
@@ -0,0 +1,11 @@
+@use 'sass:list';
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *;
+
+$props: ('background-color', 'title-text-color', 'border-color', 'size');
+
+$material: list.nth(split-map(digest-schema($dark-material-grid-toolbar), $props), 1);
+$bootstrap: list.nth(split-map(digest-schema($dark-bootstrap-grid-toolbar), $props), 1);
+$fluent: list.nth(split-map(digest-schema($dark-fluent-grid-toolbar), $props), 1);
+$indigo: list.nth(split-map(digest-schema($dark-indigo-grid-toolbar), $props), 1);
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_index.scss
new file mode 100644
index 00000000000..0290071f997
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_index.scss
@@ -0,0 +1,7 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-grid-toolbar, $tokens, light);
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_tokens.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_tokens.scss
new file mode 100644
index 00000000000..941da2dc3d4
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/light/_tokens.scss
@@ -0,0 +1,10 @@
+@use 'sass:list';
+@use 'styles/themes/standalone' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *;
+
+$base: digest-schema($light-grid-toolbar);
+$material: digest-schema($material-grid-toolbar);
+$bootstrap: digest-schema($bootstrap-grid-toolbar);
+$fluent: digest-schema($fluent-grid-toolbar);
+$indigo: digest-schema($indigo-grid-toolbar);
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/shared/_index.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/shared/_index.scss
new file mode 100644
index 00000000000..ca3dd3bc266
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/shared/_index.scss
@@ -0,0 +1 @@
+@forward 'indigo';
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/core/src/toolbar/themes/shared/_indigo.scss
new file mode 100644
index 00000000000..8894860b5d0
--- /dev/null
+++ b/projects/igniteui-angular/grids/core/src/toolbar/themes/shared/_indigo.scss
@@ -0,0 +1,12 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-grid-toolbar, indigo) {
+ padding-inline-end: pad-inline(rem(12px), rem(16px), rem(24px));
+
+ @include e(title) {
+ // should be fixed
+ @include type-style(h6);
+ }
+}
diff --git a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts
index ff396662bca..a0d2218a23d 100644
--- a/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts
+++ b/projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts
@@ -1301,7 +1301,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
const outlet = document.getElementsByClassName('igx-grid__outlet')[0];
const calendar = outlet.getElementsByClassName('igx-calendar')[0];
- const sundayLabel = calendar.querySelectorAll('.igx-days-view__label')[0].textContent;
+ const sundayLabel = calendar.querySelectorAll('.igx-day-label')[0].textContent;
expect(sundayLabel.trim()).toEqual('Mo');
}));
@@ -2076,7 +2076,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
fix.detectChanges();
GridFunctions.openFilterDD(fix.debugElement);
- const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
+ const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle'));
GridFunctions.selectFilteringCondition('Empty', dropdownList);
fix.detectChanges();
GridFunctions.openFilterDD(fix.debugElement);
@@ -2145,13 +2145,13 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
fix.detectChanges();
// Select the first year
- const firstYear: HTMLElement = calendar.querySelectorAll('.igx-calendar-view__item')[0] as HTMLElement;
+ const firstYear: HTMLElement = calendar.querySelectorAll('.igx-calendar-view-item')[0] as HTMLElement;
firstYear.dispatchEvent(new Event('mousedown'));
tick(100);
fix.detectChanges();
// Select the first month
- const firstMonth: HTMLElement = calendar.querySelectorAll('.igx-calendar-view__item')[0] as HTMLElement;
+ const firstMonth: HTMLElement = calendar.querySelectorAll('.igx-calendar-view-item')[0] as HTMLElement;
firstMonth.dispatchEvent(new Event('mousedown'));
tick(100);
fix.detectChanges();
@@ -5216,7 +5216,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
// Get Calendar component.
const calendar = document.querySelector('igx-calendar');
- const daysOfWeek = calendar.querySelector('.igx-days-view__row');
+ const daysOfWeek = calendar.querySelector('.igx-days-row');
const weekStart = daysOfWeek.firstElementChild as HTMLSpanElement;
expect(weekStart.innerText).toMatch('Fri');
@@ -5633,7 +5633,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
const cascadeButton = GridFunctions.getExcelFilterCascadeButton(fix);
// Verify that custom filter dropdown (the submenu) is not visible.
- let subMenu = fix.nativeElement.querySelector('.igx-drop-down__list.igx-toggle--hidden');
+ let subMenu = fix.nativeElement.querySelector('.igx-drop-down.igx-toggle--hidden');
expect(subMenu).not.toBeNull();
cascadeButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
@@ -5642,7 +5642,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
// Verify that custom filter dropdown (the submenu) is visible.
- subMenu = fix.nativeElement.querySelector('.igx-drop-down__list.igx-toggle--hidden');
+ subMenu = fix.nativeElement.querySelector('.igx-drop-down.igx-toggle--hidden');
expect(subMenu).toBeNull();
}));
@@ -6456,7 +6456,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
(lastExpression.querySelector('igx-select').querySelector('igx-input-group') as HTMLElement).click();
tick();
fix.detectChanges();
- const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle'));
+ const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle'));
const todayItem = dropdownList.children[0].children.find(item => item.nativeElement?.innerText === 'Today');
todayItem.nativeElement.click();
@@ -7582,7 +7582,7 @@ const verifyExcelCustomFilterSize = (fix: ComponentFixture
, expectedSize:
const verifyGridSubmenuSize = (gridNativeElement: HTMLElement, expectedSize: ɵSize) => {
const outlet = gridNativeElement.querySelector('.igx-grid__outlet');
- const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list'));
+ const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down'));
const visibleDropdown: any = dropdowns[0];
const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item');
diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.scss b/projects/igniteui-angular/grids/grid/src/grid.component.scss
new file mode 100644
index 00000000000..41d4e903297
--- /dev/null
+++ b/projects/igniteui-angular/grids/grid/src/grid.component.scss
@@ -0,0 +1,4 @@
+@use '../../themes/base';
+@use '../../themes/shared';
+@use '../../themes/light';
+@use '../../themes/dark';
diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.ts b/projects/igniteui-angular/grids/grid/src/grid.component.ts
index 602070787a0..7809748f687 100644
--- a/projects/igniteui-angular/grids/grid/src/grid.component.ts
+++ b/projects/igniteui-angular/grids/grid/src/grid.component.ts
@@ -1,7 +1,7 @@
import {
Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren,
QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding,
- OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute
+ OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, ViewEncapsulation,
} from '@angular/core';
import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
import {
@@ -123,6 +123,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs {
],
selector: 'igx-grid',
templateUrl: './grid.component.html',
+ styleUrl: './grid.component.css',
+ encapsulation: ViewEncapsulation.None,
imports: [
NgClass,
NgStyle,
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss
new file mode 100644
index 00000000000..41d4e903297
--- /dev/null
+++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.scss
@@ -0,0 +1,4 @@
+@use '../../themes/base';
+@use '../../themes/shared';
+@use '../../themes/light';
+@use '../../themes/dark';
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts
index 96951a552b1..4bd0d885adf 100644
--- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts
+++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts
@@ -1,4 +1,28 @@
-import { AfterContentInit, AfterViewInit, booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, DoCheck, ElementRef, HostBinding, Input, OnDestroy, OnInit, QueryList, reflectComponentType, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, inject } from '@angular/core';
+import {
+ AfterContentInit,
+ AfterViewInit,
+ booleanAttribute,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ContentChildren,
+ CUSTOM_ELEMENTS_SCHEMA,
+ DoCheck,
+ ElementRef,
+ HostBinding,
+ Input,
+ OnDestroy,
+ OnInit,
+ QueryList,
+ reflectComponentType,
+ SimpleChanges,
+ TemplateRef,
+ ViewChild,
+ ViewChildren,
+ ViewContainerRef,
+ inject,
+ ViewEncapsulation,
+} from '@angular/core';
import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service';
@@ -46,6 +70,8 @@ let NEXT_ID = 0;
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-child-grid-row',
templateUrl: './child-grid-row.component.html',
+ styleUrl: 'hierarchical-grid.component.css',
+ encapsulation: ViewEncapsulation.None,
imports: [NgClass]
})
export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
@@ -273,6 +299,8 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit {
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'igx-hierarchical-grid',
templateUrl: 'hierarchical-grid.component.html',
+ styleUrl: 'hierarchical-grid.component.css',
+ encapsulation: ViewEncapsulation.None,
providers: [
IgxGridCRUDService,
IgxGridValidationService,
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.scss b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts
index a8a6307ea64..aa8d3be9fc9 100644
--- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts
+++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-data-selector.component.ts
@@ -1,5 +1,16 @@
import { useAnimation } from "@angular/animations";
-import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, Output, Renderer2, booleanAttribute, inject } from "@angular/core";
+import {
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ HostBinding,
+ Input,
+ Output,
+ Renderer2,
+ ViewEncapsulation,
+ booleanAttribute,
+ inject
+} from "@angular/core";
import { first } from "rxjs/operators";
import { IgxFilterPivotItemsPipe } from "./pivot-grid.pipes";
import { fadeIn, fadeOut } from 'igniteui-angular/animations';
@@ -50,7 +61,9 @@ interface IDataSelectorPanel {
*/
@Component({
selector: "igx-pivot-data-selector",
+ styleUrl: "pivot-data-selector.component.css",
templateUrl: "./pivot-data-selector.component.html",
+ encapsulation: ViewEncapsulation.None,
imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe]
})
export class IgxPivotDataSelectorComponent {
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss
new file mode 100644
index 00000000000..41d4e903297
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.scss
@@ -0,0 +1,4 @@
+@use '../../themes/base';
+@use '../../themes/shared';
+@use '../../themes/light';
+@use '../../themes/dark';
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts
index 30fa7915608..1c40b45fb8e 100644
--- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts
+++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts
@@ -1,56 +1,148 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, ElementRef, HostBinding, Input, OnInit, Output, QueryList, TemplateRef, ViewChild, ViewChildren, ContentChild, createComponent, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, OnChanges, SimpleChanges, inject } from '@angular/core';
-import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
+import {
+ AfterContentInit,
+ AfterViewInit,
+ booleanAttribute,
+ ChangeDetectionStrategy,
+ Component,
+ ContentChild,
+ createComponent,
+ CUSTOM_ELEMENTS_SCHEMA,
+ ElementRef,
+ EventEmitter,
+ HostBinding,
+ inject,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+ QueryList,
+ SimpleChanges,
+ TemplateRef,
+ ViewChild,
+ ViewChildren,
+ ViewEncapsulation,
+} from '@angular/core';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { first, take, takeUntil } from 'rxjs/operators';
-import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridNavigationService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core';
-import { IgxGridSelectionService } from 'igniteui-angular/grids/core';
-import { GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, PivotGridType, RowType } from 'igniteui-angular/grids/core';
-import { IgxGridCRUDService } from 'igniteui-angular/grids/core';
-import { IgxGridSummaryService } from 'igniteui-angular/grids/core';
-import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
-import { IgxColumnGroupComponent } from 'igniteui-angular/grids/core';
-import { IgxColumnComponent } from 'igniteui-angular/grids/core';
-import { FilterMode, GridPagingMode, GridSummaryPosition } from 'igniteui-angular/grids/core';
-import { WatchChanges } from 'igniteui-angular/grids/core';
-import { cloneArray, ColumnType, DataUtil, DefaultDataCloneStrategy, GridColumnDataType, GridSummaryCalculationMode, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringOperation, IFilteringStrategy, ISortingExpression, OverlaySettings, resizeObservable, ɵSize, SortingDirection, IgxOverlayOutletDirective } from 'igniteui-angular/core';
import {
- IGridEditEventArgs,
+ DEFAULT_PIVOT_KEYS,
+ DimensionValuesFilteringStrategy,
+ DropPosition,
+ FilterMode,
+ GridBaseAPIService,
+ GridPagingMode,
+ GridSummaryPosition,
+ GridType,
ICellPosition,
- IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs,
+ IColumnMovingEndEventArgs,
+ IColumnMovingEventArgs,
+ IColumnMovingStartEventArgs,
IColumnVisibilityChangedEventArgs,
+ IDimensionsChange,
IGridEditDoneEventArgs,
+ IGridEditEventArgs,
IGridToolbarExportEventArgs,
+ IGX_GRID_BASE,
+ IGX_GRID_SERVICE_BASE,
+ IgxColumnComponent,
+ IgxColumnGroupComponent,
+ IgxColumnMovingDropDirective,
+ IgxColumnResizingService,
+ IgxColumnTemplateContext,
+ IgxExcelStyleColumnOperationsTemplateDirective,
+ IgxExcelStyleFilterOperationsTemplateDirective,
+ IgxExcelStyleSearchComponent,
+ IgxFilteringService,
+ IgxGridBodyDirective,
+ IgxGridCRUDService,
+ IgxGridDragSelectDirective,
+ IgxGridExcelStyleFilteringComponent,
+ IgxGridNavigationService,
+ IgxGridRowClassesPipe,
+ IgxGridRowStylesPipe,
+ IgxGridSelectionService,
+ IgxGridSummaryService,
+ IgxGridValidationService,
+ IgxPivotColumnResizingService,
+ IgxPivotDateDimension,
+ IgxPivotGridColumnResizerComponent,
+ IgxPivotGridValueTemplateContext,
IPinColumnCancellableEventArgs,
IPinColumnEventArgs,
IPinRowEventArgs,
+ IPivotConfiguration,
+ IPivotConfigurationChangedEventArgs,
+ IPivotDimension,
+ IPivotUISettings,
+ IPivotValue,
IRowDataCancelableEventArgs,
IRowDataEventArgs,
IRowDragEndEventArgs,
- IRowDragStartEventArgs
+ IRowDragStartEventArgs,
+ IValuesChange,
+ NoopPivotDimensionsStrategy,
+ PivotDimensionType,
+ PivotGridType,
+ PivotRowLayoutType,
+ PivotSummaryPosition,
+ PivotUtil,
+ RowType,
+ WatchChanges,
} from 'igniteui-angular/grids/core';
-import { DropPosition } from 'igniteui-angular/grids/core';
-import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from 'igniteui-angular/grids/core';
-import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective } from 'igniteui-angular/grids/core';
+import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
+import {
+ cloneArray,
+ ColumnType,
+ DataUtil,
+ DefaultDataCloneStrategy,
+ GridColumnDataType,
+ GridSummaryCalculationMode,
+ IDataCloneStrategy,
+ IFilteringExpressionsTree,
+ IFilteringOperation,
+ IFilteringStrategy,
+ IgxOverlayOutletDirective,
+ ISortingExpression,
+ onResourceChangeHandle,
+ OverlaySettings,
+ resizeObservable,
+ SortingDirection,
+ State,
+ Transaction,
+ TransactionService,
+ ɵSize,
+} from 'igniteui-angular/core';
import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
-import { IgxPivotColumnResizingService } from 'igniteui-angular/grids/core';
-import { State, Transaction, TransactionService, onResourceChangeHandle } from 'igniteui-angular/core';
import { IgxPivotFilteringService } from './pivot-filtering.service';
-import { GridBaseAPIService } from 'igniteui-angular/grids/core';
import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
-import { IgxPivotGridColumnResizerComponent } from 'igniteui-angular/grids/core';
import { PivotSortUtil } from './pivot-sort-util';
-import { IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotValueChipTemplateDirective } from './pivot-grid.directives';
-import { IgxPivotRowPipe, IgxPivotRowExpansionPipe, IgxPivotAutoTransform, IgxPivotColumnPipe, IgxPivotGridFilterPipe, IgxPivotGridSortingPipe, IgxPivotGridColumnSortingPipe, IgxPivotCellMergingPipe, IgxPivotGridHorizontalRowGrouping } from './pivot-grid.pipes';
-import { IgxGridRowClassesPipe, IgxGridRowStylesPipe } from 'igniteui-angular/grids/core';
-import { IgxExcelStyleSearchComponent } from 'igniteui-angular/grids/core';
+import {
+ IgxPivotRowDimensionHeaderTemplateDirective,
+ IgxPivotValueChipTemplateDirective,
+} from './pivot-grid.directives';
+import {
+ IgxPivotAutoTransform,
+ IgxPivotCellMergingPipe,
+ IgxPivotColumnPipe,
+ IgxPivotGridColumnSortingPipe,
+ IgxPivotGridFilterPipe,
+ IgxPivotGridHorizontalRowGrouping,
+ IgxPivotGridSortingPipe,
+ IgxPivotRowExpansionPipe,
+ IgxPivotRowPipe,
+} from './pivot-grid.pipes';
import { IgxPivotRowComponent } from './pivot-row.component';
-import { IgxColumnMovingDropDirective } from 'igniteui-angular/grids/core';
-import { IgxGridDragSelectDirective } from 'igniteui-angular/grids/core';
-import { IgxGridBodyDirective } from 'igniteui-angular/grids/core';
-import { IgxColumnResizingService } from 'igniteui-angular/grids/core';
import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component';
import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component';
-import { IForOfDataChangingEventArgs, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives';
+import {
+ IForOfDataChangingEventArgs,
+ IgxForOfScrollSyncService,
+ IgxForOfSyncService,
+ IgxGridForOfDirective,
+ IgxTemplateOutletDirective,
+ IgxToggleDirective,
+} from 'igniteui-angular/directives';
import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -98,6 +190,8 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104;
preserveWhitespaces: false,
selector: 'igx-pivot-grid',
templateUrl: 'pivot-grid.component.html',
+ styleUrl: 'pivot-grid.component.css',
+ encapsulation: ViewEncapsulation.None,
providers: [
IgxGridCRUDService,
IgxGridValidationService,
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts
index 93ba74b5413..841000bdc6d 100644
--- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts
+++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts
@@ -23,7 +23,7 @@ import { IgxGridCell } from 'igniteui-angular/grids/core';
import { IGridCellEventArgs } from 'igniteui-angular/grids/core';
import { getI18nManager } from 'igniteui-i18n-core';
-const CSS_CLASS_LIST = 'igx-drop-down__list';
+const CSS_CLASS_LIST = 'igx-drop-down';
const CSS_CLASS_ITEM = 'igx-drop-down__item';
const ACTIVE_CELL_CSS_CLASS = '.igx-grid-th--active';
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/_base.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/_base.scss
new file mode 100644
index 00000000000..73fcdc38427
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/_base.scss
@@ -0,0 +1,221 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use './light/tokens' as *;
+
+$_theme: $material;
+
+@include layer(base) {
+ %actions {
+ user-select: none;
+ cursor: pointer;
+ }
+
+ @include b(igx-pivot-data-selector) {
+ display: flex;
+ flex-direction: column;
+ max-width: rem(280px);
+ background: var-get($_theme, 'background');
+ z-index: 0;
+
+ igx-input-group {
+ input {
+ transform: none;
+ }
+
+ [igxPrefix] {
+ box-sizing: content-box;
+ }
+
+ .igx-input-group__bundle-main {
+ padding-top: 0 !important;
+ }
+ }
+
+ > igx-list {
+ igx-display-container {
+ padding: rem(4px);
+ }
+
+ igx-list-item {
+ display: flex;
+ min-height: rem(28px);
+ }
+ }
+
+ .igx-expansion-panel__body {
+ position: relative;
+ height: rem(128px);
+ font-size: rem(14px);
+ padding: rem(4px);
+ overflow-y: auto;
+
+ igx-list {
+ height: auto;
+ }
+ }
+
+ .igx-expansion-panel__header-icon--start {
+ margin-inline-end: rem(8px);
+ }
+
+ igx-expansion-panel-title.igx-expansion-panel__header-title {
+ display: flex;
+
+ > h6 {
+ font-size: rem(12px);
+ margin-bottom: 0;
+ }
+ }
+
+ .igx-expansion-panel__header-inner {
+ background: var-get($_theme, 'header-color');
+ padding: rem(4px);
+
+ .dragOver & {
+ background: color($color: 'gray', $variant: 300);
+ box-shadow: inset 0 0 0 rem(1px) color($color: 'gray', $variant: 400);
+ }
+ }
+
+ igx-icon {
+ --size: var(--ig-icon-size, #{rem(18px)});
+ }
+
+ @include e(header) {
+ display: flex;
+ align-items: center;
+ }
+
+ @include e(header-extra) {
+ display: flex;
+ align-items: center;
+
+ igx-icon {
+ padding: 0 rem(8px);
+ box-sizing: content-box !important;
+ }
+
+ .igx-chip__item {
+ height: sizable(rem(18px), rem(20px), rem(22px));
+ }
+
+ .igx-chip__content {
+ padding: 0 rem(2px);
+ }
+ }
+
+ @include e(filter) {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ igx-list {
+ display: flex;
+ flex-direction: column;
+ padding: rem(8px) rem(4px);
+ min-height: rem(186px);
+ max-height: rem(208px);
+ overflow-y: auto;
+ }
+
+ igx-list-item {
+ display: flex;
+ }
+
+ igx-checkbox + span {
+ margin-inline-start: rem(8px);
+ line-height: rem(28px);
+ }
+ }
+
+ @include e(item) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: rem(32px);
+ width: 100%;
+
+ .igx-drag--push & {
+ padding-top: rem(32px);
+ }
+ }
+
+ @include e(item-ghost) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: rem(14px);
+ background: color($color: 'surface');
+ min-height: rem(32px);
+ height: auto;
+ padding: 0 rem(2px) 0 rem(4px);
+ cursor: grabbing;
+ box-shadow: elevation(24);
+ border: rem(1px) solid color($color: 'gray', $variant: 100);
+ border-radius: border-radius(rem(2px));
+ z-index: 10;
+
+ igx-icon {
+ --size: var(--ig-icon-size, #{rem(18px)});
+ }
+ }
+
+ @include e(item-ghost, $m: no-drop) {
+ cursor: no-drop;
+ }
+
+ @include e(item-ghost-text) {
+ display: flex;
+ align-items: center;
+
+ igx-icon {
+ margin-inline-end: rem(8px);
+ }
+ }
+
+ @include e(item-start) {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex: 0 1 100%;
+ margin-inline-end: rem(8px);
+ overflow: hidden;
+ }
+
+ @include e(item-end) {
+ display: flex;
+
+ igx-icon + igx-icon {
+ margin-inline-start: rem(8px);
+ }
+ }
+
+ @include e(item-text) {
+ @include ellipsis();
+
+ max-width: calc(100% - rem(18px) + rem(8px));
+ user-select: none;
+ }
+
+ @include e(action-sort) {
+ @extend %actions;
+ }
+
+ @include e(action-filter) {
+ @extend %actions;
+ }
+
+ @include e(action-summary) {
+ @extend %actions;
+ }
+
+ @include e(action-move) {
+ user-select: none;
+ cursor: grab;
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/dark/_index.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/dark/_index.scss
new file mode 100644
index 00000000000..fa02f9e6a50
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/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-pivot-data-selector, $tokens, dark);
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..3138251cec1
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/pivot-data-selector' as *;
+
+$material: digest-schema($dark-material-pivot-data-selector);
+$bootstrap: digest-schema($dark-bootstrap-pivot-data-selector);
+$fluent: digest-schema($dark-fluent-pivot-data-selector);
+$indigo: digest-schema($dark-indigo-pivot-data-selector);
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/light/_index.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/light/_index.scss
new file mode 100644
index 00000000000..35d7d416534
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/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-pivot-data-selector, $tokens, light);
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/light/_tokens.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/light/_tokens.scss
new file mode 100644
index 00000000000..cf7069a5a0c
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/pivot-data-selector' as *;
+
+$base: digest-schema($light-pivot-data-selector);
+$material: digest-schema($material-pivot-data-selector);
+$bootstrap: digest-schema($bootstrap-pivot-data-selector);
+$fluent: digest-schema($fluent-pivot-data-selector);
+$indigo: digest-schema($indigo-pivot-data-selector);
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_bootstrap.scss
new file mode 100644
index 00000000000..bac40aa9f8d
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_bootstrap.scss
@@ -0,0 +1,14 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $bootstrap;
+
+@include themed-block(igx-pivot-data-selector, bootstrap) {
+ @include e(filter) {
+ igx-input-group {
+ padding: rem(4px);
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_index.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_index.scss
new file mode 100644
index 00000000000..e3fc8588fdf
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_index.scss
@@ -0,0 +1,2 @@
+@forward 'bootstrap';
+@forward 'material';
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_material.scss b/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_material.scss
new file mode 100644
index 00000000000..19d81bc0771
--- /dev/null
+++ b/projects/igniteui-angular/grids/pivot-grid/src/themes/shared/_material.scss
@@ -0,0 +1,16 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $material;
+
+@include themed-block(igx-pivot-data-selector, material) {
+ .igx-checkbox__composite-wrapper {
+ padding: 0;
+ }
+
+ igx-input-group [igxPrefix] {
+ padding-inline-end: rem(16px) !important;
+ }
+}
diff --git a/projects/igniteui-angular/grids/themes/_base.scss b/projects/igniteui-angular/grids/themes/_base.scss
new file mode 100644
index 00000000000..7271fae3a3c
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/_base.scss
@@ -0,0 +1,2892 @@
+/* stylelint-disable max-nesting-depth */
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'igniteui-theming/sass/elevations' as *;
+@use 'styles/themes/standalone' as *;
+@use './light/tokens' as *;
+
+$theme: $material;
+$cell-font-size: rem(13px);
+$cell-line-height: rem(16px);
+$cell-editing-outline-width: rem(1px);
+$grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
+$grid-body-column-border-odd: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'body-column-border-color-odd');
+$grid-body-column-border-even: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'body-column-border-color-even');
+$grid-active-state-border: var-get($theme, 'header-border-width') var-get($theme, 'active-state-border-style') var-get($theme, 'cell-active-border-color');
+$cell-padding-sm: rem(12px);
+$cell-padding-md: rem(16px);
+$cell-padding-lg: rem(24px);
+
+// The shadow size that simulates border glueth to the pinned border to make it thicker
+$pinned-shadow-size: #{rem(1px)};
+
+// Z-Indices
+$z-grid-base: 1;
+$z-grid-decoration: 2;
+$z-grid-interaction: 3;
+$z-grid-selection: 4;
+$z-grid-edit-indicator: 5;
+$z-grid-drag-ghost: 20;
+$z-grid-scroll-drag: 25;
+$z-grid-pinned-cell: 9999;
+$z-grid-pinned-row: 10000;
+$z-grid-scroll: 10001;
+$z-grid-overlay: 10002;
+$z-grid-loading: 10003;
+
+@include layer(base) {
+ // Base cell display - used for both data cells and header cells
+ %cell-display {
+ position: relative;
+ display: flex;
+ flex: 1 1 0%;
+ align-items: center;
+ outline-style: none;
+ color: inherit;
+ text-align: start;
+ min-height: var(--cell-height);
+ overflow: hidden;
+ padding-block: 0;
+
+ // (!) the background-clip: padding-box; makes sure the background never go under the border,
+ // this is very important especially if the borders have a slide alpha
+ background-clip: padding-box !important;
+
+ font-size: $cell-font-size;
+ line-height: $cell-line-height;
+
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ }
+
+ %cell-header {
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: flex-end;
+ min-width: 0;
+ min-height: var(--header-size);
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ padding-block: 0;
+ font-size: var(--_grid-head-font-size);
+ font-weight: 600;
+ border-inline-end: $grid-header-border;
+ overflow: hidden;
+ transition: color 250ms ease-in-out;
+ outline-style: none;
+ }
+
+ %cell-input-overrides {
+ // Have a more stable visual editing experience
+ > igx-input-group,
+ igx-combo,
+ igx-simple-combo,
+ igx-select,
+ igx-date-picker,
+ igx-time-picker {
+ position: relative;
+ height: auto;
+ width: 100% !important;
+ overflow: hidden;
+ z-index: 0;
+ }
+
+ igx-input-group {
+ --_bundle-row: 1;
+
+ background: var-get($theme, 'cell-editing-background');
+
+ input {
+ height: 100%;
+ color: var-get($theme, 'cell-editing-foreground');
+ }
+
+ input:focus {
+ color: var-get($theme, 'cell-editing-focus-foreground');
+ }
+ }
+
+ igx-select,
+ igx-combo,
+ igx-simple-combo,
+ igx-time-picker,
+ igx-date-picker {
+ igx-input-group {
+ height: 100%;
+ }
+ }
+
+ .igx-input-group__bundle {
+ background: var-get($theme, 'cell-editing-background') !important;
+ height: 100% !important;
+ min-height: 100% !important;
+ border: none !important;
+
+ .igx-input-group__filler,
+ .igx-input-group__notch {
+ border: none !important;
+ }
+
+ &::before {
+ content: none !important;
+ }
+
+ &::after {
+ display: none;
+ }
+ }
+
+ .igx-input-group--indigo .igx-input-group__bundle:hover,
+ .igx-input-group--indigo .igx-input-group__bundle:focus {
+ background: transparent;
+ }
+
+ .igx-input-group__bundle-main,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end {
+ height: auto;
+ border: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ }
+
+ .igx-input-group__bundle-main {
+ padding: 0;
+ }
+
+ .igx-input-group__line {
+ display: none;
+ }
+
+ igx-prefix,
+ igx-suffix {
+ background: inherit !important;
+ border-radius: 0 !important;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ border: none !important;
+ padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important;
+ }
+
+ .igx-input-group--indigo {
+ padding-inline: sizable(rem(6px), rem(8px), rem(12px)) !important;
+
+ igx-prefix {
+ padding-inline-start: 0 !important;
+ }
+
+ igx-suffix {
+ padding-inline-end: 0 !important;
+ }
+ }
+
+ .igx-input-group__input {
+ padding-inline: sizable(rem(4px), rem(6px), rem(8px)) !important;
+ }
+
+ igx-date-range-picker {
+ height: 100%;
+ }
+
+ igx-time-picker [igxLabel] {
+ display: none;
+ }
+
+ input {
+ margin: 0 auto;
+ max-width: 100%;
+ }
+
+ %form-group-input {
+ // ignore global typography
+ font-size: rem(13px) !important;
+ line-height: rem(16px) !important;
+ }
+
+ .igx-input-group__input,
+ .igx-input-group__file-input,
+ .igx-input-group__textarea {
+ box-shadow: none !important;
+ border: none !important;
+ }
+
+ .igx-input-group--disabled,
+ .igx-input-group--disabled igx-prefix,
+ .igx-input-group--disabled igx-suffix {
+ color: var-get($theme, 'cell-disabled-color');
+ }
+ }
+
+ @include b(igx-grid) {
+ @include sizable();
+
+ --component-size: var(--ig-size, var(--ig-size-large));
+
+ // TODO: This should be declared in the theme tokens
+ --grid-size: var(--component-size);
+
+ --_expander-icon-width: #{rem(24px)};
+ --_hierarchical-action-icon: #{rem(24px)};
+
+ --_hierarchical-indent-small: #{rem(12px)};
+ --_hierarchical-indent-medium: #{rem(16px)};
+ --_hierarchical-indent-large: #{rem(24px)};
+
+ --cell-height: #{sizable(rem(32px), rem(40px), rem(50px))};
+
+ // Derived size variables for header, group area, and tree indentation
+ --header-size: #{sizable(rem(32px), rem(40px), rem(50px))};
+ --grouparea-size: #{sizable(rem(41px), rem(49px), rem(57px))};
+ --ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))};
+
+ --_grid-head-font-size: #{rem(12px)};
+
+ // Core grid structure
+ position: relative;
+ display: grid;
+ grid-template-rows: auto auto auto 1fr auto auto;
+ grid-template-columns: 100%;
+ overflow: hidden;
+ box-shadow: 0 0 0 rem(1px) var-get($theme, 'grid-border-color'), var-get($theme, 'grid-elevation');
+ outline-style: none;
+ z-index: $z-grid-base;
+
+ // Grid caption
+ @include e(caption) {
+ display: flex;
+ align-items: center;
+ font-size: rem(20px);
+ line-height: rem(32px);
+ padding: rem(16px) rem(24px);
+ grid-row: 1;
+ }
+
+ // Table body container
+ @include e(tbody) {
+ position: relative;
+ display: flex;
+ grid-row: 4;
+ overflow: hidden;
+ }
+
+ // Table body content area
+ @include e(tbody-content) {
+ position: relative;
+ background: var-get($theme, 'content-background');
+ color: var-get($theme, 'content-text-color');
+ overflow: hidden;
+ z-index: $z-grid-base;
+ outline-style: none;
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ // Table body message (empty state)
+ @include e(tbody-message) {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ color: var-get($theme, 'content-text-color');
+ flex-direction: column;
+ padding: rem(24px);
+ }
+
+ // Loading indicator
+ @include e(loading) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ min-height: rem(100px);
+ }
+
+ // Table body scrollbar
+ @include e(tbody-scrollbar) {
+ background: var-get($theme, 'content-background');
+ border-inline-start: rem(1px) solid var-get($theme, 'row-border-color') ;
+ position: relative;
+ }
+
+ // Table body scrollbar main section
+ @include e(tbody-scrollbar-main) {
+ position: relative;
+ }
+
+ // Table body scrollbar start section
+ @include e(tbody-scrollbar-start) {
+ background: var-get($theme, 'header-background');
+ }
+
+ // Table body scrollbar end section
+ @include e(tbody-scrollbar-end) {
+ background: var-get($theme, 'header-background');
+ }
+
+ // Horizontal scroll container
+ @include e(scroll) {
+ grid-row: 6;
+ display: flex;
+ flex-flow: row nowrap;
+ width: 100%;
+ background: var-get($theme, 'header-background');
+ z-index: $z-grid-scroll;
+ }
+
+ // Scroll start section
+ @include e(scroll-start) {
+ background: var-get($theme, 'header-background');
+ border-inline-end: $grid-header-border;
+ }
+
+ @include e(scroll-end) {
+ background: var-get($theme, 'header-background');
+ border-inline-start: $grid-header-border;
+ }
+
+ // Scroll main section
+ @include e(scroll-main) {
+ igx-display-container {
+ height: 0;
+ }
+ }
+
+ // Table footer
+ @include e(tfoot) {
+ position: relative;
+ display: flex;
+ background: var-get($theme, 'header-background');
+ color: var-get($theme, 'header-text-color');
+ overflow: hidden;
+ outline-style: none;
+ grid-row: 5;
+ border-top: $grid-header-border;
+ z-index: $z-grid-scroll;
+
+ .igx-grid__tr {
+ position: relative;
+ background: inherit;
+ color: inherit;
+ z-index: $z-grid-decoration;
+
+ &:hover {
+ background: inherit;
+ color: inherit;
+ }
+ }
+
+ > [aria-activedescendant] {
+ outline-style: none;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ // Table footer thumb (scrollbar)
+ @include e(tfoot-thumb) {
+ position: absolute;
+ top: 0;
+ inset-inline-end: 0;
+ background: var-get($theme, 'header-background');
+ }
+
+ // Grid footer
+ @include e(footer) {
+ grid-row: 7;
+ }
+
+ // Base row element
+ @include e(tr) {
+ position: relative;
+ display: flex;
+ outline-style: none;
+ border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+
+ // (!) the background-clip: padding-box; makes sure the background never go under the border,
+ // this is very important especially if the borders have slide alpha
+ background-clip: padding-box !important;
+
+ .igx-display-container {
+ overflow: visible !important;
+ flex: 1 !important;
+ min-width: 0;
+ }
+
+ &:hover {
+ .igx-grid__td--column-selected {
+ color: var-get($theme, 'row-selected-hover-text-color');
+ background: var-get($theme, 'row-selected-hover-background');
+ }
+
+ .igx-grid__td:not(.igx-grid__td--pinned-last) {
+ border-inline-end-color: var-get($theme, 'body-column-hover-border-color');
+ }
+ }
+ }
+
+ @include e(tr, $not: (header, selected)) {
+ &:hover {
+ background: var-get($theme, 'row-hover-background');
+ color: var-get($theme, 'row-hover-text-color');
+ }
+ }
+
+ // Row striping - odd rows
+ @include e(tr, $m: odd) {
+ background: var-get($theme, 'row-odd-background');
+ color: var-get($theme, 'row-odd-text-color');
+
+ .igx-grid__tr-action {
+ border-inline-end-color: var-get($theme, 'header-border-color') !important;
+ border-block-end: 0 !important;
+ }
+
+ .igx-grid__td:not(.igx-grid__td--pinned-last) {
+ // The border is part of the body cells but the color of the border
+ // depends on the row background since we want it to be invisible unless a user change it
+ border-inline-end: $grid-body-column-border-odd;
+ }
+ }
+
+ // Row striping - even rows
+ @include e(tr, $m: even) {
+ background: var-get($theme, 'row-even-background');
+ color: var-get($theme, 'row-even-text-color');
+
+ .igx-grid__td:not(.igx-grid__td--pinned-last) {
+ // The border is part of the body cells but the color of the border
+ // depends on the row background since we want it to be invisible unless a user change it
+ border-inline-end: $grid-body-column-border-even;
+ }
+
+ .igx-grid__tr-action {
+ border-inline-end-color: var-get($theme, 'header-border-color') !important;
+ border-block-end: 0 !important;
+ }
+ }
+
+ // Selected row state
+ @include e(tr, $m: selected) {
+ color: var-get($theme, 'row-selected-text-color');
+ background: var-get($theme, 'row-selected-background');
+
+ // WARN: This doesn't follow the BEM structure, needs work
+ .igx-grid__td--selected,
+ .igx-grid__td--pinned.igx-grid__td--selected {
+ color: var-get($theme, 'cell-selected-within-text-color');
+ background: var-get($theme, 'cell-selected-within-background');
+ }
+
+ .igx-grid__td:not(.igx-grid__td--pinned-last) {
+ border-inline-end-color: var-get($theme, 'body-column-selected-border-color');
+ }
+
+
+ &:hover {
+ color: var-get($theme, 'row-selected-hover-text-color');
+ background: var-get($theme, 'row-selected-hover-background');
+
+ .igx-grid__td:not(.igx-grid__td--pinned-last) {
+ border-inline-end-color: var-get($theme, 'body-column-hover-selected-border-color');
+ }
+ }
+ }
+
+ // Deleted row state - shows strikethrough text
+ @include e(tr, $m: deleted) {
+ // WARN: This doesn't follow the BEM structure, needs work
+ .igx-grid__td-text {
+ font-style: italic;
+ color: color($color: 'error');
+ text-decoration: line-through;
+ }
+ }
+
+ // Highlighted row - shows left indicator bar
+ @include e(tr, $m: highlighted) {
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ inset-inline-start: 0;
+ width: rem(4px);
+ height: 100%;
+ background: var-get($theme, 'row-highlight');
+ z-index: $z-grid-interaction;
+ }
+
+ // When highlighted row is also edited, offset the edited indicator
+ &::before {
+ inset-inline-start: rem(4px);
+ }
+ }
+
+ // Filtered row (tree grid) - subdued text color
+ @include e(tr, $m: filtered) {
+ // WARN: This doesn't follow the BEM structure, needs work
+ .igx-grid__td-text {
+ color: var-get($theme, 'tree-filtered-text-color');
+ }
+ }
+
+ // Selected and filtered row combination (tree grid)
+ @include e(tr, $mods: (selected, filtered)) {
+ // WARN: This doesn't follow the BEM structure, needs work
+ .igx-grid__td-text {
+ color: var-get($theme, 'tree-selected-filtered-row-text-color');
+ }
+ }
+
+ // Expanded row (hierarchical/tree grid)
+ @include e(tr, $m: expanded) {
+ border-bottom: none;
+ }
+
+ // Pinned row
+ @include e(tr, $m: pinned) {
+ position: relative;
+ background: inherit;
+ z-index: $z-grid-pinned-row;
+
+ .igx-grid__hierarchical-expander--empty {
+ border-inline-end: $grid-header-border;
+ }
+ }
+
+ // Pinned row at top
+ @include e(tr, $m: pinned-top) {
+ border-bottom: rem(2px) solid var-get($theme, 'pinned-border-color') !important;
+
+ .igx-grid__tr:last-of-type {
+ border-bottom: none;
+ }
+ }
+
+ // Pinned row at bottom
+ @include e(tr, $m: pinned-bottom) {
+ border-top: rem(2px) solid var-get($theme, 'pinned-border-color') !important;
+ position: absolute;
+ bottom: 0;
+ }
+
+ // Merged row (no bottom border)
+ @include e(tr, $m: merged) {
+ border-block-end: 0;
+ }
+
+ // Merged row top
+ @include e(tr, $m: merged-top) {
+ position: absolute;
+ width: 100%;
+ }
+
+ // Disabled row
+ @include e(tr, $m: disabled) {
+ .igx-grid__td-text {
+ color: var-get($theme, 'cell-disabled-color');
+ }
+ }
+
+ // Disabled row
+ @include e(tr-header-row) {
+ igx-pivot-row-header-group {
+ padding-inline-start: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-sm);
+
+ .igx-grid-th {
+ border-block-end: 0;
+ }
+ }
+ }
+
+ // Cell (idle)
+ @include e(td) {
+ @extend %cell-display;
+ @extend %cell-input-overrides;
+
+ // Used for the active cell indicator
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ }
+ }
+ @include e(td, $m: centered) {
+ justify-content: center;
+ }
+
+ @include e(td, $m: image) {
+ justify-content: center;
+ }
+
+ @include e(td, $m: bool) {
+ display: flex;
+ flex-grow: 1;
+ justify-content: center;
+
+ .igx-icon {
+ --component-size: 1;
+ }
+
+ .igx-icon--error {
+ color: color($color: 'gray', $variant: 600);
+ }
+ }
+
+ @include e(td, $m: bool-true) {
+ .igx-icon--success {
+ color: color($color: 'gray', $variant: 700);
+ }
+ }
+
+ // Cell for fixed width columns (non-resizable)
+ @include e(td, $m: fw) {
+ flex-grow: 0;
+ outline-style: none;
+
+ > .igx-icon {
+ --component-size: 3;
+ }
+ }
+
+ // Cell (text wrapper)
+ @include e(td-text) {
+ @include ellipsis();
+ pointer-events: none;
+ }
+
+ // New cell (newly added)
+ @include e(td, $m: new) {
+ color: var-get($theme, 'cell-new-color');
+ }
+
+ // Edited cell (value has been modified)
+ @include e(td, $m: edited) {
+ .igx-grid__td-text {
+ font-style: italic;
+ color: var-get($theme, 'cell-edited-value-color');
+ padding: 0 rem(1px);
+ }
+ }
+
+ // Merged cell
+ @include e(td, $m: merged) {
+ z-index: $z-grid-base;
+ grid-row: 1 / -1;
+ }
+
+ // Merged cell when selected
+ @include e(td, $m: merged-selected) {
+ color: var-get($theme, 'row-selected-text-color');
+ background: var-get($theme, 'row-selected-background') !important;
+ }
+
+ // Merged cell when hovered
+ @include e(td, $m: merged-hovered) {
+ color: var-get($theme, 'row-hover-text-color');
+ background: var-get($theme, 'row-hover-background') !important;
+ }
+
+ // Merged cell when both selected and hovered
+ @include e(td, $mods: (merged-selected, merged-hovered)) {
+ color: var-get($theme, 'row-selected-hover-text-color');
+ background: var-get(
+ $theme,
+ 'row-selected-hover-background'
+ ) !important;
+ }
+
+ // Number cell (right-aligned)
+ @include e(td, $m: number) {
+ text-align: end;
+ justify-content: flex-end;
+ flex-grow: 1;
+ }
+
+ // Pinned cell
+ @include e(td, $m: pinned) {
+ position: relative;
+ background: inherit;
+ z-index: $z-grid-pinned-cell;
+ }
+
+ // First pinned column (left border)
+ @include e(td, $m: pinned-first) {
+ border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color');
+
+ &::after {
+ width: calc(100% - $pinned-shadow-size);
+ inset-inline-end: 0;
+ inset-inline-start: unset;
+ }
+ }
+
+ // Last pinned column (right border)
+ @include e(td, $m: pinned-last) {
+ border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color');
+ }
+
+ // Pinned cell when selected
+ @include e(td, $mods: (pinned, selected)) {
+ color: var-get($theme, 'cell-selected-text-color');
+ background: var-get($theme, 'cell-selected-background');
+ }
+
+ // Pinned cell when column is selected
+ @include e(td, $mods: (pinned, column-selected)) {
+ color: var-get($theme, 'row-selected-text-color');
+ background: var-get($theme, 'row-selected-background');
+
+ &:hover {
+ background: var-get($theme, 'row-selected-hover-background');
+ color: var-get($theme, 'row-selected-text-color');
+ }
+ }
+
+ // First cell in row-pinned layout
+ @include e(td, $m: row-pinned-first) {
+ overflow: hidden;
+ }
+
+ // Pinned chip spacing
+ @include e(td, $m: pinned-chip) {
+ margin-inline-end: pad-inline(rem(4px), rem(8px), rem(12px));
+ }
+
+ @include e(td, $m: active) {
+ &::after {
+ border: $grid-active-state-border;
+ }
+ }
+
+ // Selected cell
+ @include e(td, $m: selected) {
+ color: var-get($theme, 'cell-selected-text-color');
+ background: var-get($theme, 'cell-selected-background');
+
+ .igx-grid__tree-grouping-indicator {
+ &:hover {
+ color: var-get($theme, 'cell-selected-text-color');
+ }
+ }
+ }
+
+ // Column selected (entire column is selected)
+ @include e(td, $m: column-selected) {
+ color: var-get($theme, 'row-selected-text-color');
+ background: var-get($theme, 'row-selected-background');
+
+ &:hover {
+ color: var-get($theme, 'row-selected-hover-text-color');
+ background: var-get($theme, 'row-selected-hover-background');
+ }
+ }
+
+ // Cross-selected (cell + column selected)
+ @include e(td, $mods: (selected, column-selected)) {
+ color: var-get($theme, 'cell-selected-within-text-color');
+ background: var-get($theme, 'cell-selected-within-background');
+
+ &:hover {
+ color: var-get($theme, 'cell-selected-within-text-color');
+ background: var-get($theme, 'cell-selected-within-background');
+ }
+ }
+
+ @include e(td, $m: editing) {
+ background: var-get($theme, 'cell-editing-background') !important;
+ padding-inline: rem(4px);
+
+ &::after {
+ box-shadow: inset 0 0 0 #{$cell-editing-outline-width}
+ var-get($theme, 'edit-mode-color');
+ }
+
+ .igx-input-group {
+ --size: 100% !important;
+ --ig-input-group-border-color: transparent;
+ --ig-input-group-hover-border-color: transparent;
+ --ig-input-group-focused-border-color: transparent;
+ --ig-input-group-focused-secondary-color: transparent;
+ --ig-input-group-disabled-border-color: transparent;
+
+ width: 100%;
+ overflow: hidden;
+
+ .igx-input-group__bundle {
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+
+ .igx-input-group__input {
+ --input-font-size: #{$cell-font-size};
+ --input-line-height: #{$cell-line-height};
+
+ font-size: var(--input-font-size) !important;
+ line-height: var(--input-line-height) !important;
+
+ }
+ }
+
+ [aria-readonly='true'] {
+ color: var-get($theme, 'cell-disabled-color');
+
+ igx-icon {
+ color: var-get($theme, 'cell-disabled-color');
+ }
+ }
+ }
+
+ @include e(td, $mods: (editing, invalid)) {
+ .igx-input-group__bundle {
+ &:focus-within {
+ &::after {
+ border: none !important;
+ }
+ }
+ }
+
+ &::after {
+ box-shadow: inset 0 0 0 #{$cell-editing-outline-width}
+ color($color: 'error') !important;
+
+ top: calc($cell-editing-outline-width / 2);
+ height: calc(100% - $cell-editing-outline-width)
+ }
+ }
+
+ @include e(td, $m: invalid) {
+ padding-inline-end: rem(4px) !important;
+
+ > igx-icon {
+ --component-size: 1 !important;
+
+ color: color($color: 'error');
+ }
+ }
+
+ @include e(td, $mods: (editing, valid)) {
+ &::after {
+ box-shadow: inset 0 0 0 $cell-editing-outline-width color($color: 'success');
+ }
+ }
+
+ @include e(td, $m: valid) {
+ > igx-icon {
+ --component-size: 1 !important;
+ }
+ }
+
+ // Row editing state - active edit mode on a row
+ @include e(tr, $m: edit) {
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ inset: 0;
+ pointer-events: none;
+ user-select: none;
+
+ // This is do to the pinned border 9999 z-index
+ z-index: $z-grid-pinned-row;
+ box-shadow:
+ inset 0 rem(1px) 0 0 var-get($theme, 'edit-mode-color'),
+ inset 0 rem(-1px) 0 0 var-get($theme, 'edit-mode-color');
+ }
+ }
+
+ // MRL (Multi-row layout) specific edit row adjustments
+ @include e(tr, $mods: (mrl, edit)) {
+ &:first-of-type::after {
+ top: 0;
+ z-index: $z-grid-edit-indicator;
+ }
+ }
+
+
+ // Dragging row state
+ @include e(tr, $m: drag) {
+ opacity: 0.5;
+ }
+
+ // Ghost row during drag operation
+ @include e(tr, $m: ghost) {
+ background: var-get($theme, 'row-ghost-background');
+ color: var-get($theme, 'row-drag-color');
+ z-index: $z-grid-overlay;
+ }
+
+ // Group row
+ @include e(tr, $m: group) {
+ position: relative;
+ background: var-get($theme, 'header-background') !important;
+ }
+
+ // Inner row wrapper
+ @include e(tr, $m: inner) {
+ display: flex;
+ background: inherit;
+ }
+
+ // Header row
+ @include e(tr, $m: header) {
+ display: flex;
+ align-items: center;
+
+ igx-icon {
+ --component-size: 3;
+ }
+ }
+
+ // Row add animation
+ @include e(tr, $m: add-animate) {
+ animation: scale-in-ver-center 0.2s
+ cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ }
+
+ // Edited row indicator - shows row has been modified
+ @include e(tr, $m: edited) {
+ &::before {
+ content: '';
+ position: absolute;
+ width: rem(2px);
+ height: 100%;
+ z-index: $z-grid-pinned-row;
+ background: var-get($theme, 'edited-row-indicator');
+ }
+ }
+
+ // Row editing overlay outlet container
+ @include e(row-editing-outlet) {
+ z-index: $z-grid-pinned-row;
+ position: absolute;
+ }
+
+ // Row container
+ @include e(tr-container) {
+ overflow: auto;
+ width: 100%;
+ border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+ }
+
+ // Active row container
+ @include e(tr-container, $m: active) {
+ border: $grid-active-state-border;
+ }
+
+ // Action row (for row actions like edit, delete buttons)
+ @include e(tr-action) {
+ &:last-of-type {
+ border-inline-end: $grid-header-border;
+ min-height: var(--cell-height);
+ }
+ }
+
+ // Tree grid grouping indicator (expand/collapse icon)
+ @include e(tree-grouping-indicator) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ user-select: none;
+ outline-style: none;
+ margin-inline-end: rem(8px);
+ cursor: pointer;
+ color: var-get($theme, 'expand-icon-color');
+
+ &:hover {
+ color: var-get($theme, 'expand-icon-hover-color');
+ }
+
+ [dir='rtl'] & {
+ transform: scaleX(-1);
+ }
+
+ igx-icon {
+ --component-size: 3;
+ }
+ }
+
+ // Tree grid loading indicator
+ @include e(tree-loading-indicator) {
+ width: rem(24px);
+ height: rem(24px);
+ margin-inline-end: rem(8px);
+ }
+
+ // Row indentation for tree/grouping
+ @include e(row-indentation) {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ border-inline-end: $grid-header-border;
+ background: inherit;
+ z-index: $z-grid-base;
+
+ // (!) the background-clip: padding-box; makes sure the background never go under the border,
+ // this is very important especially of the borders have slide alpha
+ background-clip: padding-box !important;
+ }
+
+ // Hierarchical grid expander (expand/collapse child grids)
+ @include e(hierarchical-expander) {
+ user-select: none;
+ background: inherit;
+ padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: $z-grid-interaction;
+ color: var-get($theme, 'expand-icon-color');
+
+ &:focus {
+ outline: none;
+
+ igx-icon {
+ color: var-get($theme, 'expand-icon-hover-color');
+ }
+ }
+
+ &:hover {
+ igx-icon {
+ color: var-get($theme, 'expand-icon-hover-color');
+ }
+ }
+
+ igx-icon {
+ --component-size: 3;
+ color: var-get($theme, 'expand-icon-color');
+ }
+
+ [dir='rtl'] & {
+ transform: scaleX(-1);
+ }
+ }
+
+ // Empty hierarchical expander (no children)
+ @include e(hierarchical-expander, $m: empty) {
+ cursor: default;
+ pointer-events: none;
+ padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large));
+
+ }
+
+ // Hierarchical expander in header
+ @include e(hierarchical-expander, $m: header) {
+ background: inherit;
+ border-inline-end: $grid-header-border;
+ z-index: $z-grid-interaction;
+
+ igx-icon {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ // Hierarchical expander pushed to top
+ @include e(hierarchical-expander, $m: push) {
+ align-items: flex-start;
+
+ igx-icon {
+ min-height: var(--header-size);
+ max-height: var(--header-size);
+ }
+ }
+
+ // Hierarchical indent spacing
+ @include e(hierarchical-indent) {
+ $indent-sm: calc(2 * var(--_hierarchical-indent-small) + var(--_hierarchical-action-icon));
+ $indent-md: calc(2 * var(--_hierarchical-indent-medium) + var(--_hierarchical-action-icon));
+ $indent-lg: calc(2 * var(--_hierarchical-indent-large) + var(--_hierarchical-action-icon));
+
+ display: flex;
+ margin-inline-start: pad-inline($indent-sm, $indent-md, $indent-lg);
+ margin-inline-end: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large));
+ margin-block: pad-block(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large));
+ }
+
+ // Hierarchical indent when scrolling
+ @include e(hierarchical-indent, $m: scroll) {
+ $indent-scroll-sm: calc(var(--_hierarchical-indent-small) + 18px);
+ $indent-scroll-md: calc(var(--_hierarchical-indent-medium) + 18px);
+ $indent-scroll-lg: calc(var(--_hierarchical-indent-large) + 18px);
+
+
+ margin-inline-end: pad-inline($indent-scroll-sm, $indent-scroll-md, $indent-scroll-lg);
+ }
+
+ // Row indentation levels for tree/grouping (1-10)
+ @for $i from 1 through 10 {
+ @include e(row-indentation, $m: level-#{$i}) {
+ $level-sm: $i * rem(24px);
+ $level-md: $i * rem(32px);
+ $level-lg: $i * rem(36px);
+
+ padding-inline-start: pad-inline(
+ #{$level-sm},
+ #{$level-md},
+ #{$level-lg}
+ );
+ }
+ }
+
+ // Header indentation for tree/grouping
+ @include e(header-indentation) {
+ position: relative;
+ padding-inline-end: sizable($cell-padding-sm, $cell-padding-md, $cell-padding-lg);
+ border-inline-end: $grid-header-border;
+ background: var-get($theme, 'header-background');
+ z-index: $z-grid-selection;
+ height: 100%;
+
+ igx-icon {
+ --component-size: 3;
+ }
+ }
+
+ // Header indentation without border
+ @include e(header-indentation, $m: no-border) {
+ border-inline-end: rem(1px) solid transparent;
+ }
+
+ // Checkbox padding
+ @include e(cbx-padding) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ }
+
+ // Checkbox selection cell
+ @include e(cbx-selection) {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: inherit;
+ z-index: $z-grid-selection;
+
+ // (!) the background-clip: padding-box; makes sure the background never go under the border,
+ // this is very important especially of the borders have slide alpha
+ background-clip: border-box !important;
+ }
+
+ // Checkbox selection pushed to top (for header alignment)
+ @include e(cbx-selection, $m: push) {
+ align-items: flex-start;
+ padding-block-start: pad-block(
+ calc((rem(32px) - rem(20px)) / 2),
+ calc((rem(40px) - rem(20px)) / 2),
+ calc((rem(50px) - rem(20px)) / 2)
+ );
+ }
+
+ // Group row
+ @include e(group-row) {
+ background: var-get($theme, 'group-row-background');
+ display: flex;
+ outline-style: none;
+ border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
+ min-height: var(--header-size);
+
+ &::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ inset: 0;
+ pointer-events: none;
+ user-select: none;
+ }
+ }
+
+ // Active group row
+ @include e(group-row, $m: active) {
+ position: relative;
+ background: var-get($theme, 'group-row-selected-background');
+
+ &:hover {
+ background: var-get($theme, 'group-row-selected-background');
+ }
+
+ &::after {
+ border: $grid-active-state-border;
+ z-index: $z-grid-selection;
+ }
+ }
+
+ // Group content area
+ @include e(group-content) {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ flex: 1 1 auto;
+ padding-inline-start: sizable(rem(12px), rem(16px), rem(24px));
+ border-inline-end: $grid-body-column-border-odd;
+ min-height: var(--cell-height);
+
+ &:focus {
+ outline: transparent;
+ }
+ }
+
+ // Grouping indicator (expand/collapse for groups)
+ @include e(grouping-indicator) {
+ position: relative;
+ display: flex;
+ user-select: none;
+ justify-content: center;
+ align-items: center;
+ z-index: $z-grid-base;
+ cursor: pointer;
+ padding-inline-end: rem(12px);
+ margin-inline-start: sizable(rem(12px), rem(16px), rem(24px));
+ min-height: var(--header-size);
+
+ igx-icon {
+ --component-size: 3;
+ color: var-get($theme, 'expand-icon-color');
+ }
+
+ &:hover,
+ &:focus {
+ outline-style: none;
+
+ igx-icon {
+ color: var-get($theme, 'expand-icon-hover-color');
+ }
+ }
+
+ [dir='rtl'] & {
+ transform: scaleX(-1);
+ }
+ }
+
+ // Group expand button (on row indentation)
+ @include e(group-expand-btn) {
+ position: absolute;
+ cursor: pointer;
+ user-select: none;
+ inset-block-start: calc(50% - var(--_expander-icon-width) / 2);
+ inset-inline-start: var(--_indicator-inline-inset);
+
+ &:hover {
+ color: var-get($theme, 'expand-icon-hover-color');
+ }
+ }
+
+ // Group expand button pushed to top
+ @include e(group-expand-btn, $m: push) {
+ inset-block-start: sizable(
+ calc((rem(40px) - rem(12px)) / 2),
+ calc((rem(48px) - rem(12px)) / 2),
+ calc((rem(56px) - rem(12px)) / 2)
+ );
+ }
+
+ // Group row padding levels (1-10) - for nested groups
+ @for $i from 1 through 10 {
+ @include e(group-row, $m: padding-level-#{$i}) {
+ $indicator-padding-sm: $i * rem(12px);
+ $indicator-padding-md: $i * rem(16px);
+ $indicator-padding-lg: $i * rem(18px);
+
+ .igx-grid__grouping-indicator {
+ padding-inline-start: sizable(
+ #{$indicator-padding-sm},
+ #{$indicator-padding-md},
+ #{$indicator-padding-lg}
+ );
+ }
+ }
+ }
+
+ // Multi-row layout block (MRL)
+ @include e(mrl-block) {
+ display: grid !important;
+ background: inherit;
+ position: relative;
+ }
+
+ // Pivot grid super-compact mode
+ @include e(pivot, $m: super-compact) {
+ --ig-size: 1 !important;
+
+ .igx-grid-th,
+ .igx-grid-thead__title,
+ .igx-grid__td {
+ padding: 0 rem(4px) !important;
+ min-height: rem(24px) !important;
+ height: rem(24px);
+ }
+
+ .igx-grid-th,
+ .igx-grid-thead__title {
+ > * {
+ line-height: normal;
+ align-self: initial;
+ max-height: 100%;
+ }
+ }
+
+ .igx-grid__tr-pivot--row-area {
+ padding-bottom: rem(4px);
+ }
+ }
+
+ // Pivot row
+ @include e(tr-pivot) {
+ display: flex;
+ align-items: center;
+ background: inherit;
+ overflow: hidden;
+ z-index: $z-grid-interaction;
+ height: var(--header-size);
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ padding-block: 0;
+ border-inline-start: $grid-header-border;
+ border-bottom: $grid-header-border;
+
+ igx-chips-area {
+ flex-wrap: nowrap;
+ width: auto;
+
+ > * {
+ margin-inline-end: rem(4px);
+ }
+
+ &:last-child {
+ margin-inline-end: 0;
+ }
+ }
+ }
+
+ // Pivot filter toggle button
+ @include e(pivot-filter-toggle) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative;
+
+ > igx-badge {
+ position: absolute;
+ top: rem(-4px);
+ inset-inline-start: 60%;
+ width: rem(18px);
+ min-width: rem(18px);
+ height: rem(18px);
+ font-size: rem(10px);
+ pointer-events: none;
+ user-select: none;
+ }
+ }
+
+ // Pivot empty chip area placeholder
+ @include e(pivot-empty-chip-area) {
+ line-height: normal;
+ font-size: rem(14px);
+ margin-inline-end: 0 !important;
+ }
+
+ // Pivot row area
+ @include e(tr-pivot, $m: small-row-area) {
+ border-inline-start: 0;
+ }
+
+ // Pivot row area
+ @include e(tr-pivot, $m: row-area) {
+ height: auto !important;
+ align-items: flex-end;
+ padding-bottom: pad-block(rem(8px), rem(12px), rem(16px));
+ border-inline-start: 0;
+ border-bottom: 0;
+ }
+
+ // Pivot filter container
+ @include e(tr-pivot, $m: filter-container) {
+ display: flex;
+ flex-direction: column;
+ }
+
+ // Pivot chip drop indicator
+ @include e(tr-pivot, $m: chip_drop_indicator) {
+ width: rem(2px);
+ background: var-get($theme, 'resize-line-color');
+ visibility: hidden;
+ }
+
+ // Pivot drop row area
+ @include e(tr-pivot, $m: drop-row-area) {
+ flex-grow: 1;
+ }
+
+ // Pivot filter row
+ @include e(tr-pivot, $m: filter) {
+ height: var(--header-size);
+ border-inline-start: 0;
+ }
+
+ // Pivot group
+ @include e(tr-pivot-group) {
+ flex: 1;
+ }
+
+ // Pivot column dimension leaf
+ @include e(tr-pivot, $m: columnDimensionLeaf) {
+ box-shadow: none;
+
+ igx-grid-header {
+ border: none;
+ }
+ }
+
+ // Pivot column multi-row span
+ @include e(tr-pivot, $m: columnMultiRowSpan) {
+ igx-grid-header {
+ > * {
+ visibility: hidden;
+ }
+ }
+ }
+
+ // Pivot toggle icons
+ @include e(tr-pivot-toggle-icons) {
+ display: inline-flex !important;
+ }
+
+ // ============================================================================
+ // Drag & Drop Elements
+ // ============================================================================
+
+ // Drag indicator for reordering columns/rows
+ @include e(drag-indicator) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-inline: pad-inline(var(--_hierarchical-indent-small), var(--_hierarchical-indent-medium), var(--_hierarchical-indent-large));
+ min-height: var(--cell-height);
+ padding-block: 0;
+ flex: 0 0 auto;
+ background: inherit;
+ z-index: $z-grid-selection;
+ cursor: move;
+ border-inline-end: rem(1px) solid transparent;
+
+ igx-icon {
+ --component-size: 3;
+ }
+ }
+
+ // Drag indicator in header
+ @include e(drag-indicator, $m: header) {
+ border-inline-end: $grid-header-border;
+ }
+
+ // Drag indicator off/disabled state
+ @include e(drag-indicator, $m: off) {
+ color: var-get($theme, 'row-drag-color');
+ }
+
+ // Ghost image shown while dragging
+ @include e(drag-ghost-image) {
+ position: absolute !important;
+ align-items: center !important;
+ background: var-get($theme, 'ghost-header-background') !important;
+ color: var-get($theme, 'ghost-header-text-color') !important;
+ border: transparent !important;
+ min-width: rem(168px);
+ max-width: rem(320px);
+ height: var(--header-size);
+ min-height: var(--header-size);
+ padding-inline: pad-inline(rem(24px), rem(16px), rem(12px));
+ top: rem(-10000px);
+ inset-inline-start: rem(-10000px);
+ box-shadow: var(--drag-shadow);
+ overflow: hidden;
+ z-index: $z-grid-drag-ghost;
+
+ .igx-grid-th__title {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex: 1 0 0;
+ text-align: end;
+ color: var-get($theme, 'ghost-header-text-color') !important;
+ }
+
+ .igx-grid-thead__title {
+ border: none;
+ color: var-get($theme, 'ghost-header-text-color') !important;
+ background: transparent !important;
+ }
+
+ .igx-grid-th__icons,
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+
+ // Ghost image icon
+ @include e(drag-ghost-image-icon) {
+ color: var-get($theme, 'ghost-header-icon-color');
+ margin-inline-end: rem(12px);
+ }
+
+ // Ghost image icon group (multiple columns)
+ @include e(drag-ghost-image-icon-group) {
+ color: var-get($theme, 'ghost-header-icon-color');
+ padding: rem(24px);
+ padding-inline-end: 0;
+ margin-inline-end: rem(8px);
+ }
+
+ // Drag column header (being dragged)
+ @include e(drag-col-header) {
+ background: var-get($theme, 'header-background');
+
+ .igx-grid-thead__title > *,
+ .igx-grid-th > * {
+ opacity: 0.4;
+ }
+ }
+
+ // Scroll on drag indicators
+ @include e(scroll-on-drag-left) {
+ position: absolute;
+ width: rem(15px);
+ top: 0;
+ height: 100%;
+ z-index: $z-grid-scroll-drag;
+ inset-inline-start: 0;
+ }
+
+ @include e(scroll-on-drag-right) {
+ position: absolute;
+ width: rem(15px);
+ top: 0;
+ height: 100%;
+ z-index: $z-grid-scroll-drag;
+ inset-inline-end: 0;
+ }
+
+ @include e(scroll-on-drag-pinned) {
+ position: absolute;
+ width: rem(15px);
+ height: 100%;
+ top: 0;
+ z-index: $z-grid-scroll-drag;
+ }
+
+ // ============================================================================
+ // Filtering Elements
+ // ============================================================================
+
+ // Filtering row
+ @include e(filtering-row) {
+ // Container styles
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: space-between;
+
+ // Position styles
+ position: absolute;
+ inset-inline-start: 0;
+ bottom: 0;
+ z-index: $z-grid-interaction;
+ grid-row: 2;
+
+ // size & spacing styles
+ width: 100%;
+ height: var(--cell-height);
+ padding-inline: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg);
+
+ // Color styles
+ color: var-get($theme, 'filtering-row-text-color');
+ background: var-get($theme, 'filtering-row-background');
+ box-shadow: 0 rem(4px) rem(10px) rgba(0, 0, 0, 0.12);
+
+ // Compound components overrides
+ .igx-input-group {
+ --size: calc(var(--cell-height) - #{rem(8px)}) !important;
+
+ min-height: var(--size);
+
+ width: 100% !important;
+ max-width: rem(200px) !important;
+ min-width: rem(140px) !important;
+
+
+ igx-prefix,
+ igx-suffix {
+ height: 100% !important;
+ }
+
+ .igx-input-group__input {
+ font-size: sizable(rem(12px), rem(14px), rem(16px)) !important;
+ padding-inline-start: 0 !important;
+ padding-block: 0 !important;
+ height: 100% !important;
+ }
+ }
+
+ [igxIconButton] {
+ --ig-size: 1;
+
+ aspect-ratio: 1;
+ color: var-get($theme, 'filtering-row-text-color');
+ }
+ }
+
+ // Filtering row main section
+ @include e(filtering-row-main) {
+ display: flex;
+ flex: 1 1 auto;
+ align-items: center;
+ overflow: hidden;
+ max-width: calc(100% - rem(176px));
+ min-width: rem(56px);
+
+ igx-chips-area {
+ flex-wrap: nowrap;
+
+ // Can't uae gap on the parent because dropdown container is present in the dom
+ margin-inline: rem(8px);
+ gap: rem(4px);
+ }
+ }
+
+ // Filtering row editing buttons
+ @include e(filtering-row-editing-buttons) {
+ display: flex;
+ align-items: center;
+ padding: rem(8px);
+ gap: rem(4px);
+
+ button {
+ transition: none;
+
+ &:not([disabled]) igx-icon {
+ color: var-get($theme, 'sorted-header-icon-color');
+ }
+ }
+ }
+
+ // Filtering row editing buttons (small)
+ @include e(filtering-row-editing-buttons, $m: small) {
+ padding: rem(4px);
+
+ button {
+ transition: none;
+
+ &:not([disabled]) igx-icon {
+ color: var-get($theme, 'sorted-header-icon-color');
+ }
+ }
+ }
+
+ // Filtering row scroll start
+ @include e(filtering-row-scroll-start) {
+ position: relative;
+ margin-inline: rem(8px);
+ overflow: visible;
+
+ &::after {
+ display: block;
+ position: absolute;
+ width: rem(10px);
+ content: '';
+ inset-block: rem(-2px);
+ background: linear-gradient(
+ to right,
+ var-get($theme, 'filtering-row-background'),
+ transparent
+ );
+ inset-inline-end: rem(-10px);
+ }
+ }
+
+ // Filtering row scroll end
+ @include e(filtering-row-scroll-end) {
+ position: relative;
+ margin-inline: rem(8px);
+ overflow: visible;
+
+ &::before {
+ display: block;
+ position: absolute;
+ width: rem(10px);
+ content: '';
+ inset-block: rem(-2px);
+ background: linear-gradient(
+ to left,
+ var-get($theme, 'filtering-row-background'),
+ transparent
+ );
+ inset-inline-start: rem(-10px);
+ }
+ }
+
+ %filtering-cell {
+ display: flex;
+ align-items: center;
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ padding-block: 0;
+ overflow: hidden;
+ border-inline-end: $grid-header-border;
+ border-top: $grid-header-border;
+ height: var(--header-size);
+
+ // (!) the background-clip: padding-box; makes sure the background never go under the border,
+ // this is very important especially of the borders have slide alpha
+ background-clip: padding-box !important;
+
+
+ igx-chips-area {
+ width: 100%;
+ flex-wrap: nowrap;
+
+ .igx-filtering-chips__connector {
+ font-size: rem(12px);
+ text-transform: uppercase;
+ font-weight: 600;
+ margin: 0 rem(8px);
+ overflow: hidden;
+ }
+ }
+ }
+
+ // Filtering cell (advanced filtering)
+ @include e(filtering-cell) {
+ @extend %filtering-cell;
+ }
+
+ // Filtering cell selected state
+ @include e(filtering-cell, $m: selected) {
+ @extend %filtering-cell;
+
+ color: var-get($theme, 'header-selected-text-color');
+ background: var-get($theme, 'header-selected-background');
+
+ igx-chips-area {
+ background: inherit;
+ }
+ }
+
+ // Filtering cell indicator (badge/icon)
+ @include e(filtering-cell-indicator) {
+ display: flex;
+ align-items: center;
+ position: relative;
+
+ igx-icon,
+ .igx-badge {
+ cursor: pointer;
+ }
+
+ .igx-badge {
+ position: absolute;
+ top: rem(-4px);
+ inset-inline-start: 60%;
+ }
+ }
+
+ // Filtering cell indicator hidden state
+ @include e(filtering-cell-indicator, $m: hidden) {
+ .igx-badge,
+ igx-icon {
+ display: none;
+ }
+ }
+
+ // Filtering dropdown items
+ @include e(filtering-dropdown-items) {
+ display: flex;
+ align-items: center;
+ }
+
+ // Filtering dropdown text
+ @include e(filtering-dropdown-text) {
+ margin-inline-start: rem(16px);
+ }
+
+ // ============================================================================
+ // Summaries Elements
+ // ============================================================================
+
+ // Summaries row
+ @include e(summaries) {
+ display: flex;
+ overflow: hidden;
+ outline-style: none;
+ background-color: var-get($theme, 'summaries-patch-background');
+
+ igx-display-container {
+ overflow: visible !important;
+ flex: 1;
+ min-width: 0;
+ }
+ }
+
+ // Summaries body (in grid body)
+ @include e(summaries, $m: body) {
+ --summaries-patch-background: #{var-get($theme, 'group-row-background')};
+
+ display: flex;
+ overflow: hidden;
+ outline-style: none;
+ border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
+ background-color: var-get($theme, 'summaries-patch-background');
+
+ &:last-of-type {
+ border-bottom: none;
+ }
+
+ // Override summary component colors when in body context
+ .igx-grid-summary {
+ --background-color: inherit !important;
+ --result-color: hsla(
+ from color(from var(--background-color) var(--y-contrast)) h
+ 0 l / 1
+ ) !important;
+ }
+
+ .igx-display-container {
+ overflow: visible !important;
+ flex: 1;
+ min-width: 0;
+ }
+ }
+
+ // Summaries patch (fixed area)
+ @include e(summaries-patch) {
+ position: relative;
+ background: inherit;
+ border-inline-end: $grid-header-border;
+ z-index: $z-grid-base;
+ }
+
+ // ============================================================================
+ // Outlet Elements
+ // ============================================================================
+
+ // Generic outlet for overlays
+ @include e(outlet) {
+ --ig-size: var(--grid-size);
+ z-index: $z-grid-overlay;
+ position: fixed;
+ }
+
+ // Loading outlet
+ @include e(loading-outlet) {
+ z-index: $z-grid-loading;
+ }
+
+ // Row editing outlet
+ @include e(row-editing-outlet) {
+ z-index: $z-grid-pinned-row;
+ position: absolute;
+ }
+
+ // Add row snackbar
+ @include e(addrow-snackbar) {
+ position: absolute;
+ bottom: rem(16px);
+ inset-inline-start: 50%;
+ transform: translateX(-50%);
+ z-index: $z-grid-loading;
+ }
+
+ // ============================================================================
+ // Misc Elements
+ // ============================================================================
+
+ // Icon wrapper
+ @include e(icon) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ // Column name display
+ @include e(column-name) {
+ @include ellipsis();
+ }
+
+ // Count badge
+ @include e(count-badge) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: rem(20px);
+ height: rem(20px);
+ padding: rem(2px) rem(6px);
+ border-radius: rem(10px);
+ font-size: rem(12px);
+ background: var-get($theme, 'group-count-background');
+ color: var-get($theme, 'group-count-text-color');
+ }
+
+ // Text wrapper
+ @include e(text) {
+ @include ellipsis();
+ }
+
+ .igx-banner {
+ @include sizable();
+ --component-size: var(--ig-size, var(--ig-size-large));
+
+ display: flex;
+ justify-content: flex-end;
+ flex-wrap: wrap;
+ gap: rem(8px);
+ padding: rem(16px) rem(8px);
+ min-width: rem(320px);
+ color: contrast-color($color: 'surface', $variant: 500);
+ background: color($color: 'surface', $variant: 500);
+ border-radius: 0;
+
+ igc-icon,
+ igx-icon,
+ igc-button,
+ [igxButton] {
+ --component-size: var(--ig-size, var(--ig-size-large));
+ }
+ }
+
+ .igx-banner__message {
+ display: flex;
+ align-items: center;
+ min-width: rem(150px);
+ flex: 1 0 0%;
+ gap: rem(16px);
+ padding: 0 rem(8px);
+ }
+
+ .igx-banner__text {
+ @include type-style('body-2');
+
+ flex: 1 0 0%;
+ }
+
+ .igx-banner__border-top {
+ box-shadow: inset 0 rem(1px) 0 0 var-get($theme, 'header-border-color');
+ }
+
+ .igx-banner__border-bottom {
+ box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'header-border-color');
+ }
+
+ .igx-banner__actions {
+ flex-wrap: wrap;
+ align-self: flex-end;
+ gap: 0.5rem;
+ }
+
+ .igx-grid__tr {
+ &:hover {
+ .igx-grid__td--selected:has(+ .igx-grid__td--selected) {
+ border-inline-end-color: var-get($theme, 'cell-selected-background');
+ }
+ }
+ }
+
+ .igx-grid__tr--selected {
+ &:hover {
+ .igx-grid__td--selected:has(+ .igx-grid__td--selected) {
+ border-inline-end-color: var-get($theme, 'cell-selected-within-background');
+ }
+ }
+ }
+
+ .igx-grid__tr--selected .igx-grid__td--selected:has(+ .igx-grid__td--selected) {
+ border-inline-end-color: var-get($theme, 'cell-selected-within-background');
+ }
+
+
+ .igx-grid__td--selected:has(+ .igx-grid__td--selected) {
+ border-inline-end-color: var-get($theme, 'cell-selected-background');
+ }
+ }
+
+ @include b(igx-grid-grouparea) {
+ grid-row: 2;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ border-bottom: $grid-header-border;
+ background: var-get($theme, 'grouparea-background');
+ color: var-get($theme, 'grouparea-color');
+ min-height: var(--grouparea-size);
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ padding-block: 0;
+ z-index: $z-grid-decoration;
+ height: 100%;
+ overflow: hidden;
+
+
+ &:focus {
+ outline-style: none;
+ }
+
+ //%igx-chip {
+ // margin-block: pad-block(rem(4px), rem(8px), rem(8px));
+ //}
+
+ @include e(connector) {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 rem(4px);
+
+ igx-icon {
+ width: var(--ig-icon-size, #{rem(16px)}) !important;
+ height: var(--ig-icon-size, #{rem(16px)}) !important;
+ font-size: var(--ig-icon-size, #{rem(16px)}) !important;
+ }
+
+ [dir='rtl'] & {
+ transform: scaleX(-1);
+ }
+ }
+
+ .igx-chip-area {
+ flex-grow: 1;
+ }
+ }
+
+ @include b(igx-grid-th) {
+ position: relative;
+ display: flex;
+ flex: 1 1 0%;
+ color: inherit;
+ text-align: start;
+
+ // (!) the background-clip: padding-box; makes sure the background never go under the border,
+ // this is very important especially of the borders have slide alpha
+ background-clip: padding-box !important;
+ line-height: $cell-line-height;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: flex-end;
+ min-width: 0;
+ min-height: var(--header-size);
+ padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
+ padding-block: 0;
+ font-size: rem(12px);
+ font-weight: 600;
+ border-inline-end: $grid-header-border;
+ overflow: hidden;
+ transition: color 250ms ease-in-out;
+ outline-style: none;
+
+ @include e(expander) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-inline-end: rem(8px);
+ cursor: pointer;
+
+ igx-icon {
+ color: var-get($theme, 'expand-icon-color');
+ }
+
+ &:hover {
+ igx-icon {
+ color: var-get($theme, 'expand-icon-hover-color');
+ }
+ }
+ }
+
+ @include e(group-title) {
+ @include ellipsis();
+ }
+
+ @include e(title) {
+ @include ellipsis();
+
+ min-width: 3ch;
+ user-select: none;
+ cursor: initial;
+ flex-grow: 1;
+ line-height: var(--header-size);
+ transition: color 250ms ease-in-out;
+ }
+
+ @include e(icons) {
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-end;
+ user-select: none;
+
+ /* sort-icon + filter icon width */
+ min-width: rem(30px);
+ height: var(--header-size);
+ align-self: flex-end;
+
+ &:empty {
+ min-width: 0;
+ }
+
+ .igx-excel-filter__icon {
+ position: relative;
+ display: flex;
+
+ --ig-icon-size: #{rem(15px)};
+
+ &::after {
+ content: attr(data-sortIndex);
+ position: absolute;
+ top: rem(-5px);
+ inset-inline-end: rem(-1px);
+ font-size: rem(10px);
+ text-align: end;
+ font-family: sans-serif;
+ line-height: rem(10px);
+ }
+ }
+
+ .igx-excel-filter__icon--filtered {
+ display: inline-flex;
+ color: var-get($theme, 'sorted-header-icon-color');
+
+ &:hover,
+ &:focus {
+ color: var-get($theme, 'sortable-header-icon-hover-color');
+ }
+ }
+ }
+
+ @include e(resize-handle) {
+ position: absolute;
+ width: rem(4px);
+ top: 0;
+ inset-inline-end: rem(-2px);
+ height: 100%;
+ z-index: $z-grid-decoration;
+ }
+
+ @include e(resize-line) {
+ position: absolute;
+ cursor: col-resize;
+ width: rem(4px);
+ background: var-get($theme, 'resize-line-color');
+ z-index: $z-grid-decoration;
+
+ &::before,
+ &::after {
+ position: absolute;
+ content: '';
+ height: 100%;
+ width: rem(96px);
+ }
+
+ &::before {
+ inset-inline-end: 100%;
+ }
+
+ &::after {
+ inset-inline-start: 100%;
+ }
+ }
+
+ // Drop indicators for column reordering
+ @include e(drop-indicator-left) {
+ position: absolute;
+ width: rem(1px);
+ height: 100%;
+ top: 0;
+ z-index: $z-grid-base;
+ inset-inline-start: rem(-1px);
+ }
+
+ @include e(drop-indicator-right) {
+ position: absolute;
+ width: rem(1px);
+ height: 100%;
+ top: 0;
+ z-index: $z-grid-base;
+ inset-inline-end: rem(-1px);
+ }
+
+ // Active header (selected/focused header cell)
+ @include m(active) {
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ border: $grid-active-state-border;
+ pointer-events: none;
+ }
+ }
+
+ @include mx(active, pinned) {
+ &::after {
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ width: calc(100% - var-get($theme, 'pinned-border-width')) !important;
+ }
+ }
+
+ @include m(number) {
+ text-align: end;
+ // TODO: This was enabled in the old styles but it overrides the flex behavior of the title and icons. Check agains designs.
+ // justify-content: flex-end;
+ flex-grow: 1;
+
+ @include e(icons) {
+ justify-content: flex-start;
+ order: -1;
+
+ .sort-icon {
+ order: 1;
+ }
+ }
+ }
+
+ @include m(collapsible) {
+ justify-content: normal;
+ }
+
+ @include m(sortable) {
+ :where(.sort-icon) {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ position: relative;
+
+ opacity: 0.7;
+
+ &:is(:hover) {
+ opacity: 1;
+ }
+
+ &::after {
+ content: attr(data-sortIndex);
+ position: absolute;
+ top: rem(-5px);
+ inset-inline-end: rem(-1px);
+ font-size: rem(10px);
+ text-align: end;
+ font-family: sans-serif;
+ line-height: rem(10px);
+ }
+ }
+ }
+
+ // Sorted header (column is currently sorted)
+ @include m(sorted) {
+ :where(.sort-icon) {
+ opacity: 1;
+ color: var-get($theme, 'sorted-header-icon-color');
+
+ &:is(:hover, :focus) {
+ color: var-get($theme, 'sortable-header-icon-hover-color');
+ }
+ }
+ }
+
+ // Selected header (column selection)
+ @include m(selectable) {
+ color: var-get($theme, 'header-selected-text-color');
+ background: var-get($theme, 'header-selected-background');
+ }
+
+ // TODO: Verify the class is really named 'filtrable' and not 'filterable'
+ @include m(filtrable) {
+ :where(.igx-grid-th__title) {
+ opacity: .7;
+ }
+ }
+
+ @include m(pinned) {
+ position: relative;
+ background: inherit;
+
+ &::after {
+ width: calc(100% - $pinned-shadow-size) !important;
+ }
+ }
+
+ // Pinned header (first pinned column)
+ @include m(pinned-first) {
+ border-inline-start: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color');
+
+ &:dir(ltr) {
+ border-inline-start-color: var-get($theme, 'pinned-border-color');
+ }
+
+ &:dir(rtl) {
+ border-inline-end-color: var-get($theme, 'pinned-border-color');
+ }
+ }
+
+ // Pinned header (last pinned column)
+ @include m(pinned-last) {
+ border-inline-end: var-get($theme, 'pinned-border-width') solid var-get($theme, 'pinned-border-color');
+
+ &:dir(ltr) {
+ border-inline-end-color: var-get($theme, 'pinned-border-color');
+ border-inline-end-width: var-get($theme, 'pinned-border-width');
+ }
+
+ &:dir(rtl) {
+ border-inline-start-color: var-get($theme, 'pinned-border-color');
+ border-inline-start-width: var-get($theme, 'pinned-border-width');
+ }
+ }
+
+ @include m(selected) {
+ color: var-get($theme, 'header-selected-text-color');
+ background: var-get($theme, 'header-selected-background');
+
+ :where(.sort-icon::after) {
+ background: var-get($theme, 'header-selected-background');
+ }
+ }
+
+ @include m(fw) {
+ flex-grow: 0;
+ outline-style: none;
+ }
+
+ @include m(filtering) {
+ background: var-get($theme, 'filtering-header-background');
+ color: var-get($theme, 'filtering-header-text-color');
+ z-index: $z-grid-interaction;
+ }
+
+ @include mx(filtrable, sortable) {
+ :where(.sort-icon) {
+ cursor: pointer;
+ opacity: 0.7;
+
+ :is(:hover) {
+ opacity: 1;
+ }
+ }
+ }
+
+ @include mx(selectable, sorted) {
+ :where(.sort-icon) {
+ color: var-get($theme, 'header-selected-text-color');
+
+ :is(:hover, :focus) {
+ color: var-get($theme, 'header-selected-text-color');
+ }
+ }
+ }
+
+ @include mx(selected, sorted) {
+ :where(.sort-icon) {
+ color: var-get($theme, 'header-selected-text-color');
+
+ :is(:hover, :focus) {
+ color: var-get($theme, 'header-selected-text-color');
+ }
+ }
+ }
+
+ // Active state with compound selectors - use @at-root to prevent nesting
+ @at-root {
+ .igx-grid-th__drop-indicator--active {
+ &.igx-grid-th__drop-indicator-left,
+ &.igx-grid-th__drop-indicator-right {
+ border-inline-end: rem(1px) solid
+ var-get($theme, 'drop-indicator-color');
+ }
+
+ &::after,
+ &::before {
+ position: absolute;
+ content: '';
+ width: 0;
+ height: 0;
+ border-style: solid;
+ inset-inline-start: rem(-3px);
+ }
+
+ &::before {
+ bottom: 0;
+ border-width: 0 rem(4px) rem(4px);
+ border-color: transparent transparent
+ var-get($theme, 'drop-indicator-color');
+ }
+
+ &::after {
+ top: 0;
+ border-width: rem(4px) rem(4px) 0;
+ border-color: var-get($theme, 'drop-indicator-color')
+ transparent transparent;
+ }
+ }
+ }
+ }
+
+ // NOTE: Consider this done for now
+ // ============================================================================
+ // Grid header (thead) container and structure
+ @include b(igx-grid-thead) {
+ // Main thead container
+ grid-row: 3;
+ display: flex;
+ overflow: hidden;
+ background: var-get($theme, 'header-background');
+ color: var-get($theme, 'header-text-color');
+ //border-block-end: $grid-header-border;
+
+ // TODO: This is completely upside down - doesn't follow BEM at all
+ // Rows inside thead should not have hover effects
+ .igx-grid__tr {
+ position: relative;
+ background: inherit;
+ color: inherit;
+ z-index: $z-grid-decoration;
+
+ &:hover {
+ background: inherit;
+ color: inherit;
+ }
+ }
+
+ // Header wrapper element
+ @include e(wrapper) {
+ position: relative;
+ display: flex;
+ background: var-get($theme, 'header-background');
+ color: var-get($theme, 'header-text-color');
+ overflow: hidden;
+ outline-style: none;
+ z-index: $z-grid-decoration;
+ border-bottom: $grid-header-border;
+
+ // WARN: BEM not followed here
+ .igx-grid__tr {
+ border-bottom: none;
+
+ &:hover {
+ background: inherit;
+ color: inherit;
+ }
+ }
+
+ .igx-grid__cbx-selection--push {
+ align-items: flex-start;
+ padding-block-start: pad-block(
+ calc((rem(32px) - rem(20px)) / 2),
+ calc((rem(40px) - rem(20px)) / 2),
+ calc((rem(50px) - rem(20px)) / 2)
+ );
+ }
+
+ > [aria-activedescendant] {
+ outline-style: none;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+ }
+
+ // Pivot wrapper specific styling
+ @include e(wrapper, $m: pivot) {
+ border-block-end: none !important;
+ }
+
+ // Header title cell
+ @include e(title) {
+ @extend %cell-display;
+ @extend %cell-header;
+
+ flex-basis: auto !important;
+ align-items: center !important;
+ border-block-end: $grid-header-border;
+ border-inline-end: $grid-header-border;
+ height: var(--header-size);
+ }
+
+ // Header group (contains multiple columns)
+ @include e(group) {
+ display: flex;
+ flex-flow: row nowrap;
+ }
+
+ // Header subgroup (nested column headers)
+ @include e(subgroup) {
+ position: relative;
+
+ &.igx-grid-thead__item.igx-grid-th--active {
+ &::after {
+ height: 100%;
+ }
+ }
+ }
+
+ // Header item (column header wrapper)
+ @include e(item) {
+ display: flex;
+ flex-flow: column nowrap;
+ position: relative;
+
+ :where(.igx-grid-th, .igx-grid-thead__group) {
+ flex: 1 1 auto;
+ }
+
+ :where(.igx-grid-thead__title) {
+ flex: 0 0 auto;
+ }
+
+ //&:last-child {
+ // igx-pivot-row-dimension-header {
+ // border-inline-end: 0;
+ // }
+ //}
+ }
+
+ // Scrollbar thumb for header
+ @include e(thumb) {
+ background: var-get($theme, 'header-background');
+ border-block-end: $grid-header-border;
+ }
+
+ // Pivot grid modifier
+ @include m(pivot) {
+ display: flex;
+
+ .igx-grid-thead--virtualizationWrapper {
+ border-inline-start: $grid-header-border;
+ }
+
+ @include e(wrapper) {
+ border-block-end: $grid-header-border;
+ }
+ }
+
+ // Virtualization wrapper
+ @include m(virtualizationWrapper) {
+ height: 100%;
+ }
+
+ // Virtualization container
+ @include m(virtualizationContainer) {
+ height: 100%;
+ overflow: visible;
+ //border-inline-start: $grid-header-border;
+
+ .igx-grid__tr-pivot--columnDimensionLeaf {
+ &::after {
+ display: none;
+ }
+ }
+ }
+
+ .igx-grid__group-expand-btn {
+ color: var-get($theme, 'expand-all-icon-color');
+
+ &:hover,
+ &:focus {
+ color: var-get($theme, 'expand-all-icon-hover-color');
+ }
+ }
+ }
+
+ @include b(igx-drop-area) {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ min-width: rem(80px);
+ width: 100%;
+ height: sizable(rem(24px), rem(24px), rem(32px));
+ padding-block: 0;
+ padding-inline: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg);
+ flex: 1 0 0%;
+ background: var-get($theme, 'drop-area-background');
+ border-radius: var-get($theme, 'drop-area-border-radius');
+
+ &:hover {
+ background: var-get($theme, 'drop-area-on-drop-background');
+ }
+
+ @include e(icon) {
+ --ig-icon-size: rem(16px);
+
+ color: var-get($theme, 'drop-area-icon-color');
+ margin-inline-end: rem(8px);
+ }
+
+ @include e(text) {
+ @include ellipsis();
+ color: var-get($theme, 'drop-area-text-color');
+ font-size: rem(13px);
+ }
+ }
+
+ @include b(igx-group-label) {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ line-height: rem(16px);
+ gap: rem(4px);
+
+ @include e(text) {
+ color: var-get($theme, 'group-label-text');
+ font-size: calc(var(--_grid-head-font-size) + #{rem(1px)})
+ }
+
+ @include e(icon) {
+ --component-size: 1;
+
+ color: var-get($theme, 'group-label-icon');
+ user-select: none;
+
+ }
+
+ @include e(column-name) {
+ font-weight: 600;
+ font-size: var(--_grid-head-font-size);
+ color: var-get($theme, 'group-label-column-name-text');
+ }
+
+ @include e(count-badge) {
+ --ig-badge-background-color: #{var-get($theme, 'group-count-background')};
+ --ig-badge-text-color: #{var-get($theme, 'group-count-text-color')};
+
+ > span {
+ font-size: var(--_grid-head-font-size);
+ }
+ }
+ }
+
+ @include b(igx-advanced-filter) {
+ background: color($color: 'surface', $variant: 500);
+ box-shadow: elevation(24);
+
+ igx-query-builder {
+ box-shadow: none !important;
+ border: none !important;
+ border-radius: inherit !important;
+ }
+
+ igx-query-builder-header {
+ cursor: grab;
+ }
+
+ .igx-excel-filter__secondary-footer {
+ --ig-size: 2;
+
+ display: flex;
+ justify-content: space-between;
+ padding-inline: pad-inline(rem(24px));
+ padding-block-end: pad-block(rem(24px));
+
+ .igx-excel-filter__clear {
+ flex-grow: 1;
+ }
+
+ .igx-excel-filter__apply,
+ .igx-excel-filter__cancel {
+ flex-grow: 0;
+ }
+ }
+
+ .igx-excel-filter__cancel + .igx-excel-filter__apply {
+ margin-inline-start: rem(16px);
+ }
+ }
+
+ // ============================================================================
+ // NOTE: Context-Specific Nested Rules
+ // These rules handle nested contexts that don't fit cleanly into the BEM model
+ // ============================================================================
+ // Thead context - elements styled differently when inside thead
+
+ igx-pivot-row-dimension-header.igx-grid-th {
+ align-items: center;
+ }
+
+ igx-pivot-row-dimension-header-group {
+ &::after {
+ height: 100% !important;
+ }
+ }
+
+ igx-pivot-row-header-group {
+ &::after {
+ inset-inline-start: calc(var-get($theme, 'header-border-width') * -1) !important;
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ igx-pivot-row-dimension-header.igx-grid-th {
+ .igx-grid-th__icons {
+ align-self: center;
+ }
+ }
+
+ igx-pivot-row-dimension-header {
+ .igx-grid-th__icons {
+ padding-inline-end: pad-inline($cell-padding-sm, $cell-padding-md, $cell-padding-lg);
+ }
+ }
+
+ &:only-child,
+ &:last-child {
+ igx-pivot-row-dimension-header.igx-grid-th {
+ border-inline-end: 0 !important;
+ }
+ }
+ }
+
+ .igx-pivot-grid-row-filler__wrapper {
+ .igx-grid-thead__wrapper {
+ height: 100%;
+
+ .igx-grid-th {
+ height: 100%;
+ }
+ }
+ }
+
+ .igx-grid-thead {
+ .igx-grid__header-indentation {
+ igx-icon {
+ --component-size: 3;
+ }
+ }
+
+ .igx-grid__drag-indicator {
+ cursor: default;
+ }
+
+ // MRL (Multi-Row Layout) specific thead styles
+ .igx-grid__tr--mrl {
+ .igx-grid__hierarchical-expander--header,
+ .igx-grid__hierarchical-expander,
+ .igx-grid__hierarchical-expander--empty,
+ .igx-grid__row-indentation,
+ .igx-grid__cbx-selection {
+ border-bottom: $grid-header-border;
+ }
+ }
+
+ &:focus-visible {
+ outline-color: transparent;
+ }
+ }
+
+ // MRL block context - multi-row layout grid structure
+ .igx-grid__mrl-block {
+ .igx-grid-thead__item {
+ display: flex;
+ }
+
+ .igx-grid-thead__title,
+ .igx-grid__td {
+ border-inline-end: $grid-header-border !important;
+ border-block-end: $grid-header-border;
+ }
+
+ .igx-grid-th {
+ border-block-end: $grid-header-border;
+ }
+
+ .igx-grid-thead__subgroup:only-child .igx-grid-th,
+ .igx-grid-thead__subgroup:last-child .igx-grid-th,
+ .igx-grid__td:only-child,
+ .igx-grid__td:last-child {
+ border-block-end: 0;
+ }
+ }
+
+ // MRL row context - rows in multi-row layout
+ .igx-grid__tr--mrl {
+ .igx-grid__cbx-selection,
+ .igx-grid__hierarchical-expander,
+ .igx-grid__hierarchical-expander--empty,
+ .igx-grid__row-indentation,
+ .igx-grid__drag-indicator {
+ border-bottom: $grid-header-border;
+ }
+
+ background-clip: padding-box !important;
+ }
+
+ // Grid checkbox styles
+ .igx-grid {
+ .igx-checkbox {
+ min-width: rem(20px);
+
+ .igx-checkbox__composite-wrapper {
+ width: var(--cbx-size, #{rem(20px)});
+ height: var(--cbx-size, #{rem(20px)});
+ padding: 0 !important;
+ }
+
+ .igx-checkbox__label {
+ margin-inline-start: rem(12px);
+ }
+
+ .igx-checkbox__label--before {
+ margin-inline-end: rem(12px);
+ }
+
+ .igx-checkbox__label:empty,
+ .igx-checkbox__label--before:empty {
+ padding: 0;
+ margin: 0;
+ }
+ }
+ }
+
+ .igx-grid-thead__item.igx-grid-th--active {
+ &::after {
+ width: calc(100% - var-get($theme, 'header-border-width'));
+ }
+ }
+
+ @for $i from 1 through 10 {
+ $level-sm: calc(#{$i * $cell-padding-sm} + var(--_expander-icon-width));
+ $level-md: calc(#{$i * $cell-padding-md} + var(--_expander-icon-width));
+ $level-lg: calc(#{$i * $cell-padding-lg} + var(--_expander-icon-width));
+
+ .igx-grid__row-indentation--level-#{$i} {
+ --_indicator-inline-inset: #{sizable(
+ $cell-padding-sm,
+ $cell-padding-md,
+ $cell-padding-lg
+ )};
+ padding-inline-start: pad-inline($level-sm, $level-md, $level-lg);
+ }
+
+ $indicator-padding-sm: #{$i * $cell-padding-sm};
+ $indicator-padding-md: #{$i * $cell-padding-md};
+ $indicator-padding-lg: #{$i * $cell-padding-lg};
+
+ .igx-grid__group-row--padding-level-#{$i} {
+ %igx-grid__grouping-indicator {
+ padding-inline-start: pad-inline($indicator-padding-sm, $indicator-padding-md, $indicator-padding-lg);
+ }
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss
new file mode 100644
index 00000000000..ea9b1df3e92
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/dark/_bootstrap.scss
@@ -0,0 +1,16 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+
+@include themed-block(igx-grid, bootstrap, dark) {
+ --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
+ --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+
+ @include e(td, $m: bool) {
+ .igx-icon--error {
+ color: color($color: 'gray', $variant: 500);
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/themes/dark/_fluent.scss b/projects/igniteui-angular/grids/themes/dark/_fluent.scss
new file mode 100644
index 00000000000..d56eac99e3e
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/dark/_fluent.scss
@@ -0,0 +1,16 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+
+@include themed-block(igx-grid, fluent, dark) {
+ --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
+ --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+
+ @include e(td, $m: bool) {
+ .igx-icon--error {
+ color: color($color: 'gray', $variant: 500);
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/themes/dark/_index.scss b/projects/igniteui-angular/grids/themes/dark/_index.scss
new file mode 100644
index 00000000000..9ae7002a6c2
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/dark/_index.scss
@@ -0,0 +1,7 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+@use 'indigo';
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-grid, $tokens, dark);
diff --git a/projects/igniteui-angular/grids/themes/dark/_indigo.scss b/projects/igniteui-angular/grids/themes/dark/_indigo.scss
new file mode 100644
index 00000000000..3eb6beb603f
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/dark/_indigo.scss
@@ -0,0 +1,74 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'igniteui-theming/sass/elevations' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-grid-th, indigo, dark) {
+ @include m(sortable) {
+ @include e(icons) {
+ .sort-icon {
+ opacity: .85;
+ }
+ }
+ }
+
+ @include m(filtrable) {
+ :where(.igx-grid-th__title) {
+ opacity: .85;
+ }
+ }
+
+ @include m(fw) {
+ igx-icon {
+ --component-size: 3;
+ }
+ }
+}
+
+@include themed-block(igx-grid, indigo, dark) {
+ --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
+ --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+
+
+ @include e(td, $m: bool) {
+ .igx-icon--error {
+ color: color($color: 'gray', $variant: 500);
+ }
+ }
+
+ @include e(pivot-empty-chip-area) {
+ color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
+ }
+
+ @include e(tr-header-row) {
+ igx-pivot-row-dimension-header-group {
+ igx-icon {
+ opacity: 0.85;
+
+ &:hover {
+ opacity: 1;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+}
+
+@include themed-block(igx-grid-thead, indigo, dark) {
+ @include e(title) {
+ igx-icon {
+ opacity: 0.85;
+
+ &:hover {
+ opacity: 1;
+ cursor: pointer;
+ }
+ }
+ }
+}
+
+@include themed-block(igx-advanced-filter, indigo, dark) {
+ background: color($color: 'gray', $variant: 50);
+ box-shadow: elevation(23);
+}
diff --git a/projects/igniteui-angular/grids/themes/dark/_material.scss b/projects/igniteui-angular/grids/themes/dark/_material.scss
new file mode 100644
index 00000000000..7fbd2934ff1
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/dark/_material.scss
@@ -0,0 +1,16 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+
+@include themed-block(igx-grid, material, dark) {
+ --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
+ --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
+
+ @include e(td, $m: bool) {
+ .igx-icon--error {
+ color: color($color: 'gray', $variant: 500);
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/themes/dark/_tokens.scss b/projects/igniteui-angular/grids/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..d371999179e
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/dark/_tokens.scss
@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/grid' as *;
+
+$material: digest-schema($dark-material-grid);
+$bootstrap: digest-schema($dark-bootstrap-grid);
+$fluent: digest-schema($dark-fluent-grid);
+$indigo: digest-schema($dark-indigo-grid);
diff --git a/projects/igniteui-angular/grids/themes/light/_index.scss b/projects/igniteui-angular/grids/themes/light/_index.scss
new file mode 100644
index 00000000000..97805be5c83
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/light/_index.scss
@@ -0,0 +1,7 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+@use 'indigo';
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-grid, $tokens, light);
diff --git a/projects/igniteui-angular/grids/themes/light/_indigo.scss b/projects/igniteui-angular/grids/themes/light/_indigo.scss
new file mode 100644
index 00000000000..d42273e780e
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/light/_indigo.scss
@@ -0,0 +1,49 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-grid-th, indigo, light) {
+ @include m(sortable) {
+ @include e(icons) {
+ .sort-icon {
+ opacity: 0.75;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ }
+}
+
+@include themed-block(igx-grid, indigo, light) {
+ @include e(pivot-empty-chip-area) {
+ color: color($color: 'gray', $variant: 600);
+ }
+
+ @include e(tr-header-row) {
+ igx-pivot-row-dimension-header-group {
+ igx-icon {
+ opacity: 0.75;
+
+ &:hover {
+ opacity: 1;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+}
+
+@include themed-block(igx-grid-thead, indigo, light) {
+ @include e(title) {
+ igx-icon {
+ opacity: 0.75;
+
+ &:hover {
+ opacity: 1;
+ cursor: pointer;
+ }
+ }
+ }
+}
diff --git a/projects/igniteui-angular/grids/themes/light/_tokens.scss b/projects/igniteui-angular/grids/themes/light/_tokens.scss
new file mode 100644
index 00000000000..2fd4a5718e5
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/grid' as *;
+
+$base: digest-schema($light-grid);
+$material: digest-schema($material-grid);
+$bootstrap: digest-schema($bootstrap-grid);
+$fluent: digest-schema($fluent-grid);
+$indigo: digest-schema($indigo-grid);
diff --git a/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss
new file mode 100644
index 00000000000..34fee932199
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/shared/_bootstrap.scss
@@ -0,0 +1,141 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-grid, bootstrap) {
+ @include e(filtering-row) {
+ .igx-input-group {
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ igx-prefix,
+ igx-suffix {
+ align-items: center;
+ background: transparent !important;
+ border-radius: 0 !important;
+
+ /* stylelint-disable-next-line */
+ &:hover {
+ background: transparent !important;
+ }
+ }
+
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ .igx-input-group__input {
+ border: 0 !important;
+
+ /* stylelint-disable-next-line */
+ &:hover {
+ border: 0 !important;
+ box-shadow: none !important;
+ }
+ }
+
+ .igx-input-group__bundle::after,
+ .igx-input-group__bundle::before {
+ display: none !important;
+ }
+
+ .igx-input-group__bundle-main {
+ padding-inline-start: 0 !important;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: none !important;
+ box-shadow: none !important;
+ background: transparent !important;
+ }
+
+ border: rem(1px) solid color($color: 'gray', $variant: 300) !important;
+
+ &:hover{
+ border-color: color($color: 'primary', $variant: 500) !important;
+ }
+ }
+
+ .igx-input-group--focused {
+ border-color: color($color: 'primary', $variant: 500) !important;
+ border-width: rem(1px) !important;
+
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ .igx-input-group__input {
+ border: 0 !important;
+ box-shadow: none !important;
+ }
+
+ .igx-input-group__bundle-main,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end {
+ margin: 0 !important;
+ border: 0 !important;
+ outline: none !important;
+ box-shadow: none !important;
+ background: transparent !important;
+ }
+
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ igx-prefix,
+ igx-suffix {
+ background: transparent !important;
+ border-radius: 0 !important;
+ }
+ }
+
+ .igx-input-group__line {
+ display: none !important;
+ }
+
+ igx-prefix:focus {
+ color: color($color: 'secondary', $variant: 500) !important;
+ }
+
+ igx-suffix {
+ igx-icon {
+ outline-style: none !important;
+
+ &:focus {
+ color: color($color: 'secondary') !important;
+ }
+
+ + igx-icon {
+ margin-inline-start: rem(4px) !important;
+ }
+ }
+ }
+
+ igx-prefix,
+ igx-suffix {
+ padding: 0 sizable(rem(8px), rem(10px), rem(14px)) !important;
+ }
+ }
+}
+
+@include themed-block(igx-grid-th, bootstrap) {
+ @include e(title) {
+ font-weight: 700;
+ }
+
+ @include e(icons) {
+ .igx-excel-filter__icon--filtered,
+ .sort-icon {
+ igx-icon {
+ --size: var(--ig-icon-size, #{rem(15px)});
+ }
+ }
+ }
+}
+
+@include themed-block(igx-advanced-filter, bootstrap) {
+ border-radius: rem(4px);
+
+ .igx-excel-filter__secondary-footer {
+ padding: rem(16px);
+ border-top: rem(1px) solid color($color: 'gray', $variant: 300);
+ }
+}
diff --git a/projects/igniteui-angular/grids/themes/shared/_fluent.scss b/projects/igniteui-angular/grids/themes/shared/_fluent.scss
new file mode 100644
index 00000000000..4af329aef16
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/shared/_fluent.scss
@@ -0,0 +1,29 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $fluent;
+
+@include themed-block(igx-grid, fluent) {
+ box-shadow: 0 0 0 rem(1px) var-get($_theme, 'grid-border-color');
+}
+
+@include themed-block(igx-grid-th, fluent) {
+ @include e(title) {
+ font-weight: 800;
+ }
+
+ @include e(icons) {
+ .igx-excel-filter__icon--filtered,
+ .sort-icon {
+ igx-icon {
+ --size: var(--ig-icon-size, #{rem(15px)});
+ }
+ }
+ }
+}
+
+@include themed-block(igx-advanced-filter, bootstrap) {
+ border-radius: rem(2px);
+}
diff --git a/projects/igniteui-angular/grids/themes/shared/_index.scss b/projects/igniteui-angular/grids/themes/shared/_index.scss
new file mode 100644
index 00000000000..0ca60c75786
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/shared/_index.scss
@@ -0,0 +1,4 @@
+@forward 'material';
+@forward 'bootstrap';
+@forward 'fluent';
+@forward 'indigo';
diff --git a/projects/igniteui-angular/grids/themes/shared/_indigo.scss b/projects/igniteui-angular/grids/themes/shared/_indigo.scss
new file mode 100644
index 00000000000..ffe22c90338
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/shared/_indigo.scss
@@ -0,0 +1,200 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'igniteui-theming/sass/typography/mixins' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'igniteui-theming/sass/elevations' as *;
+@use 'styles/themes/standalone' as *;
+
+// TODO type style is throwing an error
+
+@include themed-block(igx-grid, indigo) {
+ --cell-height: #{sizable(rem(32px), rem(40px), rem(48px))};
+ --header-size: #{sizable(rem(32px), rem(40px), rem(48px))};
+ --grouparea-size: #{sizable(rem(40px), rem(48px), rem(55px))};
+ --_expander-icon-width: #{rem(16px)};
+ --_hierarchical-action-icon: #{rem(16px)};
+ --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
+ --ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
+ --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+
+ %cell-display {
+ padding-inline: pad-inline(rem(8px), rem(12px), rem(16px))
+ }
+
+
+ @include e(filtering-row-main) {
+ igx-chips-area {
+ // Can't uae gap on the parent because dropdown container is present in the dom
+ margin-inline: rem(12px);
+ gap: rem(4px);
+ }
+ }
+
+ @include e(filtering-row) {
+ igx-input-group {
+ --size: calc(sizable(rem(32px), rem(40px), rem(48px)) - #{rem(8px)});
+ }
+ }
+
+ @include e(filtering-cell) {
+ padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)) !important;
+ }
+
+
+ @include e(td) {
+ @extend %cell-display;
+
+ @include type-style('detail-1', false);
+ }
+
+ @include e(td, $m: bool) {
+ --component-size: 2;
+
+ .igx-icon--error {
+ color: color($color: 'gray', $variant: 500);
+ }
+ }
+
+ @include e(tr, $m: edited) {
+ &::before {
+ width: rem(4px);
+ }
+ }
+
+ @include e(tr, $m: header) {
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(tr-action) {
+ &:last-of-type {
+ min-height: sizable(rem(32px), rem(40px), rem(48px));
+ }
+ }
+
+ @include e(tree-grouping-indicator) {
+ margin-inline-end: rem(4px);
+
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(hierarchical-expander) {
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(header-indentation) {
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(group-content) {
+ padding-inline-start: 0;
+ }
+
+ @include e(grouping-indicator) {
+ padding-inline-end: rem(16px);
+
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+
+ @include e(tr-pivot) {
+ padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+ }
+}
+
+@include themed-block(igx-grid-th, indigo) {
+ @extend %cell-display;
+
+ @include type-style('detail-2', false);
+
+ @include e(expander) {
+ --component-size: 2;
+ }
+
+ @include e(icons) {
+ .igx-excel-filter__icon {
+ --ig-icon-size: #{rem(12px)};
+ }
+ }
+
+ @include m(filtrable) {
+ :where(.igx-grid-th__title) {
+ opacity: .75;
+ }
+ }
+
+ @include m(sortable) {
+ @include e(icons) {
+ .sort-icon {
+ opacity: .75;
+ }
+ }
+ }
+
+ @include mx(filtrable, sortable) {
+ :where(.sort-icon) {
+ opacity: 1;
+ }
+ }
+
+ @include e(title) {
+ //@include type-style('detail-2', false)
+ }
+
+ @include e(icons) {
+ .igx-excel-filter__icon--filtered,
+ .sort-icon {
+ igx-icon {
+ --component-size: 2;
+ }
+ }
+ }
+
+ @include e(group-title) {
+ //@include type-style('detail-2', false);
+ }
+}
+
+@include themed-block(igx-grid-thead, indigo) {
+ @include e(title) {
+ @extend %cell-display;
+ }
+}
+
+@include themed-block(igx-drop-area, indigo) {
+ padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+}
+
+@include themed-block(igx-group-label, indigo) {
+ @include e(text) {
+ //@include type-style('detail-1', false);
+ }
+
+ @include e(icon) {
+ @at-root igx-icon#{&} {
+ --component-size: 2;
+ }
+ }
+
+ @include e(column-name) {
+ //@include type-style('detail-2', false);
+ }
+
+ @include e(count-badge) {
+ --shadow: none;
+ }
+}
+
+@include themed-block(igx-advanced-filter, indigo) {
+ background: contrast-color($color: 'gray', $variant: 900);
+ box-shadow: elevation(24);
+ border-radius: rem(10px);
+}
diff --git a/projects/igniteui-angular/grids/themes/shared/_material.scss b/projects/igniteui-angular/grids/themes/shared/_material.scss
new file mode 100644
index 00000000000..91109257747
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/shared/_material.scss
@@ -0,0 +1,140 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography/functions' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+
+@include themed-block(igx-grid, material) {
+ --ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
+ --ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
+ --ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
+
+ @include e(filtering-row) {
+ .igx-input-group {
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ igx-prefix,
+ igx-suffix {
+ align-items: center;
+ background: transparent !important;
+ border-radius: 0 !important;
+
+ /* stylelint-disable-next-line */
+ &:hover {
+ background: transparent !important;
+ }
+ }
+
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ .igx-input-group__input {
+ border: 0 !important;
+
+ /* stylelint-disable-next-line */
+ &:hover {
+ border: 0 !important;
+ box-shadow: none !important;
+ }
+ }
+
+ .igx-input-group__bundle::after,
+ .igx-input-group__bundle::before {
+ display: none !important;
+ }
+
+ .igx-input-group__bundle-main {
+ padding-inline-start: 0 !important;
+ margin: 0 !important;
+ border: 0 !important;
+ outline: none !important;
+ box-shadow: none !important;
+ background: transparent !important;
+ }
+
+ border: rem(1px) solid color($color: 'gray', $variant: 300) !important;
+
+ &:hover{
+ border-color: color($color: 'primary', $variant: 500) !important;
+ }
+ }
+
+ .igx-input-group--focused {
+ border-color: color($color: 'primary', $variant: 500) !important;
+ border-width: rem(1px) !important;
+
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ .igx-input-group__input {
+ border: 0 !important;
+ box-shadow: none !important;
+ }
+
+ .igx-input-group__bundle-main,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end {
+ margin: 0 !important;
+ border: 0 !important;
+ outline: none !important;
+ box-shadow: none !important;
+ background: transparent !important;
+ }
+
+ .igx-input-group__bundle,
+ .igx-input-group__bundle-start,
+ .igx-input-group__bundle-end,
+ igx-prefix,
+ igx-suffix {
+ background: transparent !important;
+ border-radius: 0 !important;
+ }
+ }
+
+ .igx-input-group__line {
+ display: none !important;
+ }
+
+ igx-prefix:focus {
+ color: color($color: 'secondary', $variant: 500) !important;
+ }
+
+ igx-suffix {
+ igx-icon {
+ outline-style: none !important;
+
+ &:focus {
+ color: color($color: 'secondary') !important;
+ }
+
+ + igx-icon {
+ margin-inline-start: rem(4px) !important;
+ }
+ }
+ }
+
+ igx-prefix,
+ igx-suffix {
+ padding: 0 sizable(rem(8px), rem(12px), rem(16px)) !important;
+ }
+ }
+}
+
+@include themed-block(igx-grid-th, material) {
+ @include e(title) {
+ font-weight: 600;
+ }
+
+ @include e(icons) {
+ .igx-excel-filter__icon--filtered,
+ .sort-icon {
+ igx-icon {
+ --size: var(--ig-icon-size, #{rem(15px)});
+ }
+ }
+ }
+}
+
+@include themed-block(igx-advanced-filter, material) {
+ border-radius: rem(4px);
+}
diff --git a/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css
new file mode 100644
index 00000000000..f1b6f884e5b
--- /dev/null
+++ b/projects/igniteui-angular/grids/themes/test/igniteui-angular-dark.css
@@ -0,0 +1,3 @@
+.igx-display-container{display:inherit;flex-flow:inherit;position:relative;width:100%;overflow:hidden;flex-shrink:0}.igx-display-container--inactive{width:100%}.igx-drag{touch-action:none}.igx-drag--select-disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-drag__handle{-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-vhelper--vertical,.igx-vhelper--horizontal{display:block;overflow:auto;z-index:10001}.igx-vhelper--vertical{position:absolute;top:0;inset-inline-end:0;width:var(--vhelper-scrollbar-size)}.igx-vhelper--horizontal{width:100%}.igx-vhelper--vertical .igx-vhelper__placeholder-content{width:1px}.igx-vhelper--horizontal .igx-vhelper__placeholder-content{height:1px}[hidden]{display:none !important}[class^=igx-],[class^=igx-] *,[class^=igx-] *::before,[class^=igx-] *::after,[class^=ig-],[class^=ig-] *,[class^=ig-] *::before,[class^=ig-] *::after{box-sizing:border-box}@property --ig-spacing{syntax:" | ";initial-value:1;inherits:true}:root{--ig-spacing-inline-small: var(--ig-spacing-inline, var(--ig-spacing-small));--ig-spacing-inline-medium: var(--ig-spacing-inline, var(--ig-spacing-medium));--ig-spacing-inline-large: var(--ig-spacing-inline, var(--ig-spacing-large));--ig-spacing-block-small: var(--ig-spacing-block, var(--ig-spacing-small));--ig-spacing-block-medium: var(--ig-spacing-block, var(--ig-spacing-medium));--ig-spacing-block-large: var(--ig-spacing-block, var(--ig-spacing-large))}@property --_transition-delay{syntax:"