+ [chartData]="chartData" primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss
index f2d745467a..e12f48a243 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss
@@ -17,6 +17,10 @@
height: 100vh;
padding: 0 rem(8px) rem(8px) rem(8px);
--igc-pane-content-background: #{contrast-color($color: 'gray', $variant: 900)};
+
+ igx-grid {
+ --ig-size: var(--ig-size-small);
+ }
}
.chart-types-container {
diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
index 57774daa80..e2b9e26abd 100644
--- a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
+++ b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
@@ -3,7 +3,7 @@
Excel like data analysis showcase application with Ignite UI Angular components and extras
-
+
view_list
@@ -21,7 +21,7 @@
-
+
cell_wifi
@@ -35,7 +35,7 @@
-
@@ -67,7 +67,7 @@
-
@@ -99,7 +99,7 @@
-
@@ -131,7 +131,7 @@
-
diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
index cb28f1a0a1..dd4842ab34 100644
--- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
+++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
@@ -128,6 +128,8 @@
}
igx-grid {
+ --ig-size: var(--ig-size-small);
+
.grid-area {
margin-block-start: 1rem;
overflow-y: hidden;
@@ -181,3 +183,8 @@ igx-grid {
}
}
}
+
+igx-select {
+ --ig-size: var(--ig-size-small);
+}
+
diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts
index dab61bd11a..787e8420c7 100644
--- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts
+++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts
@@ -300,7 +300,6 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
});
grid.columnSelection = 'multiple';
grid.cellSelection = 'none';
- grid.displayDensity = 'compact';
// Use detectChanges because of ExpressionChangedAfterItHasBeenChecked Error when creating a dynamic pane
this.cdr.detectChanges();
diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
index 0c3c6538c2..daa9cafd2c 100644
--- a/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
+++ b/projects/app-lob/src/app/grid-finjs/grid-finjs.component.html
@@ -2,7 +2,6 @@
Boston Marathon 2023
-
+
diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
index 334a303546..9ab2910e53 100644
--- a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
+++ b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss
@@ -27,6 +27,14 @@ $progressBar-sample-theme: progress-linear-theme(
justify-content: center;
}
+igx-grid {
+ --ig-size: var(--ig-size-medium);
+}
+
+igx-avatar {
+ --ig-size: var(--ig-size-small);
+}
+
:host {
::ng-deep {
.igx-paginator > * {
diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html
index dfbdb9c9ff..98360f4b1f 100644
--- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html
+++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html
@@ -1,5 +1,5 @@
-
+
@@ -53,7 +53,7 @@ {{dataItem.name}}
diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss
index cbc1cbebaf..da52f2185a 100644
--- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss
+++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.scss
@@ -40,5 +40,6 @@ h6 {
}
.grid__wrapper {
+ --ig-size: var(--ig-size-medium);
margin: rem(4px) rem(16px);
}
diff --git a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html
index 08407ac8c4..ac2898a64b 100644
--- a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html
+++ b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html
@@ -32,7 +32,6 @@
width="100%"
[moving]="true"
[autoGenerate]="false"
- displayDensity="compact"
hiddenColumnsText="Hidden"
[isLoading]="isLoading"
[allowFiltering]="true"
diff --git a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
index d88fabdc26..00c7a92157 100644
--- a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
+++ b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.scss
@@ -253,6 +253,10 @@
padding: rem(15px);
display: flex;
flex-direction: column;
+
+ igx-tree-grid {
+ --ig-size: var(--ig-size-small);
+ }
}
igx-grid {
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
index 1887a0bdff..baaf314768 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
+++ b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.html
@@ -1,6 +1,3 @@
-
-
+
diff --git a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
index ed5b748287..6f90fc4264 100644
--- a/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
+++ b/src/app/data-entries/buttonGroup/button-group-sample-5/button-group-sample-5.component.ts
@@ -1,5 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { DisplayDensity } from 'igniteui-angular';
+import { Component, HostBinding, OnInit } from '@angular/core';
+
+type Button = {
+ label: string,
+ selected: boolean,
+ togglable: boolean
+}
@Component({
selector: 'app-button-group-sample-5',
@@ -7,22 +12,25 @@ import { DisplayDensity } from 'igniteui-angular';
templateUrl: './button-group-sample-5.component.html'
})
export class ButtonGroupSample5Component implements OnInit {
-
public rippleColor = 'grey';
-
- public displayDensity: DisplayDensity = 'comfortable';
- public displayDensities;
+ public size = 'large';
+ public sizes: Button[];
public ngOnInit() {
- this.displayDensities = [
- { label: 'compact', selected: this.displayDensity === 'compact', togglable: true },
- { label: 'cosy', selected: this.displayDensity === 'cosy', togglable: true },
- { label: 'comfortable', selected: this.displayDensity === 'comfortable', togglable: true }
+ this.sizes = [
+ { label: 'small', selected: this.size === 'small', togglable: true },
+ { label: 'medium', selected: this.size === 'medium', togglable: true },
+ { label: 'large', selected: this.size === 'large', togglable: true }
];
}
- public selectDensity(event) {
- this.displayDensity = this.displayDensities[event.index].label;
+ public selectSize(event: any) {
+ this.size = this.sizes[event.index].label;
}
+
+ @HostBinding('style.--ig-size')
+ protected get sizeStyle() {
+ return `var(--ig-size-${this.size})`;
+ }
}
diff --git a/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html b/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html
index be6c654757..79b8bddfc5 100644
--- a/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html
+++ b/src/app/data-entries/buttons/buttons-display-density/buttons-display-density.component.html
@@ -1,22 +1,24 @@
-
+