Refactor how themes are provided. Fix a bug with tab switching. (#53)

IgniteUI · Feb 4, 2025 · c4fc9b7 · c4fc9b7
1 parent 431a56a
commit c4fc9b7
Show file tree

Hide file tree

Showing 55 changed files with 3,548 additions and 2,924 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "express": "^4.18.2",
     "fflate": "^0.8.1",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^19.0.1",
+    "igniteui-angular": "^19.0.7",
     "igniteui-angular-charts": "^18.2.0",
     "igniteui-webcomponents": "^5.1.2",
     "igniteui-angular-core": "^18.2.0",

diff --git a/projects/erp-hgrid/package-lock.json b/projects/erp-hgrid/package-lock.json
diff --git a/projects/erp-hgrid/package.json b/projects/erp-hgrid/package.json
@@ -26,7 +26,7 @@
     "@igniteui/material-icons-extended": "^3.1.0",
     "express": "^4.18.2",
     "hammerjs": "~2.0.8",
-    "igniteui-angular": "^19.0.1",
+    "igniteui-angular": "^19.0.7",
     "igniteui-angular-charts": "^18.1.1",
     "igniteui-angular-core": "^18.1.1",
     "igniteui-webcomponents": "^5.1.2",

diff --git a/projects/erp-hgrid/src/app/app.component.scss b/projects/erp-hgrid/src/app/app.component.scss
@@ -1,4 +1,14 @@
+@use "igniteui-angular/theming" as *;
+
+@include core();
+@include typography();
+@include theme($light-material-palette);
+
+html,
+body {
+  max-height: 1000px;
+}
+
 .outer-wrapper {
-  margin: 40px;
-  height: calc(98% - 40px);
+  height: 100%;
 }
diff --git a/projects/erp-hgrid/src/app/app.component.ts b/projects/erp-hgrid/src/app/app.component.ts
@@ -1,13 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ErpHGridSampleComponent } from './erp-hgrid-sample/erp-hgrid-sample.component';
 
 @Component({
-    selector: 'app-root',
-    standalone: true,
-    imports: [CommonModule, ErpHGridSampleComponent],
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss']
+  selector: 'app-erp',
+  standalone: true,
+  imports: [CommonModule, ErpHGridSampleComponent],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class AppComponent {
   title = 'Home - IgniteUI for Angular';

diff --git a/projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.ts b/projects/erp-hgrid/src/app/erp-hgrid-sample/erp-hgrid-sample.component.ts
@@ -34,7 +34,9 @@ import {
   IgxTooltipModule,
   PositionSettings,
   HorizontalAlignment,
-  VerticalAlignment
+  VerticalAlignment,
+  THEME_TOKEN,
+  ThemeToken
 } from 'igniteui-angular';
 import { IgxSparklineModule } from 'igniteui-angular-charts';
 import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
@@ -47,6 +49,14 @@ defineComponents(IgcRatingComponent);
 @Component({
     selector: 'app-erp-hgrid-sample',
     standalone: true,
+    providers: [
+      {
+        provide: THEME_TOKEN,
+        useFactory: () => {
+          return new ThemeToken('material');
+        },
+      },
+    ],
     imports: [
       IgxHierarchicalGridComponent,
       IgxColumnComponent,

diff --git a/projects/erp-hgrid/src/index.html b/projects/erp-hgrid/src/index.html
@@ -11,6 +11,6 @@
   <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
 </head>
 <body class="ig-typography ig-scrollbar">
-  <app-root></app-root>
+  <app-erp></app-erp>
 </body>
 </html>
diff --git a/projects/erp-hgrid/src/styles.scss b/projects/erp-hgrid/src/styles.scss
@@ -1,13 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
-// Standard CSS normalize, comment out if not required or using a different module
-@use "minireset.css/minireset";
-@use 'igniteui-angular/theming' as *;
-
-@include core();
-@include typography();
-@include theme($light-material-palette);
-
-html, body {
-  height: 100%;
-  max-height: 1000px;
+html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
 }
+
+body {
+    margin: 0;
+    padding: 8px;
+    height: 100%;
+}
diff --git a/projects/finance-grid/package-lock.json b/projects/finance-grid/package-lock.json
diff --git a/projects/finance-grid/package.json b/projects/finance-grid/package.json
@@ -23,7 +23,7 @@
     "@angular/router": "^19.0.0",
     "@angular/ssr": "^19.0.2",
     "express": "^4.21.2",
-    "igniteui-angular": "^19.0.1",
+    "igniteui-angular": "^19.0.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

diff --git a/projects/finance-grid/src/app/app.component.scss b/projects/finance-grid/src/app/app.component.scss
@@ -0,0 +1,17 @@
+@use "igniteui-angular/theming" as *;
+
+@include core();
+@include typography(
+  $font-family: $bootstrap-typeface,
+  $type-scale: $bootstrap-type-scale
+);
+@include theme(
+  $palette: $light-bootstrap-palette,
+  $schema: $light-bootstrap-schema
+);
+
+html {
+  height: 100%;
+  max-height: 1000px;
+}
+
diff --git a/projects/finance-grid/src/app/app.component.ts b/projects/finance-grid/src/app/app.component.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { FinanceGridComponent } from './finance-grid/finance-grid.component';
 
 @Component({
-  selector: 'app-root',
+  selector: 'app-finance',
   imports: [FinanceGridComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   title = 'app-finance';

diff --git a/projects/finance-grid/src/app/finance-grid/finance-grid.component.ts b/projects/finance-grid/src/app/finance-grid/finance-grid.component.ts
@@ -1,15 +1,64 @@
-import { afterNextRender, Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
-import { IgxAvatarComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxIconComponent, IgxLinearProgressBarComponent, IgxPaginatorComponent } from "igniteui-angular";
-import { CurrencyPipe, PercentPipe, AsyncPipe } from "@angular/common";
-import { FinancialService } from "../services/financial.service";
-import { BehaviorSubject } from "rxjs";
+import {
+  afterNextRender,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import {
+  IgxAvatarComponent,
+  IgxCellTemplateDirective,
+  IgxColumnComponent,
+  IgxGridComponent,
+  IgxGridToolbarActionsComponent,
+  IgxGridToolbarAdvancedFilteringComponent,
+  IgxGridToolbarComponent,
+  IgxGridToolbarExporterComponent,
+  IgxGridToolbarHidingComponent,
+  IgxGridToolbarPinningComponent,
+  IgxGridToolbarTitleComponent,
+  IgxIconComponent,
+  IgxLinearProgressBarComponent,
+  IgxPaginatorComponent,
+  THEME_TOKEN,
+  ThemeToken,
+} from 'igniteui-angular';
+import { CurrencyPipe, PercentPipe, AsyncPipe } from '@angular/common';
+import { FinancialService } from '../services/financial.service';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   standalone: true,
-  selector: "app-finance-grid",
-  imports: [CurrencyPipe, PercentPipe, AsyncPipe, IgxLinearProgressBarComponent, IgxAvatarComponent, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxPaginatorComponent],
-  templateUrl: "./finance-grid.component.html",
-  styleUrl: "./finance-grid.component.scss"
+  selector: 'app-finance-grid',
+  providers: [
+    {
+      provide: THEME_TOKEN,
+      useFactory: () => {
+        return new ThemeToken('bootstrap');
+      },
+    },
+  ],
+  imports: [
+    CurrencyPipe,
+    PercentPipe,
+    AsyncPipe,
+    IgxLinearProgressBarComponent,
+    IgxAvatarComponent,
+    IgxGridComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxIconComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarTitleComponent,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarAdvancedFilteringComponent,
+    IgxGridToolbarHidingComponent,
+    IgxGridToolbarPinningComponent,
+    IgxGridToolbarExporterComponent,
+    IgxPaginatorComponent,
+  ],
+  templateUrl: './finance-grid.component.html',
+  styleUrl: './finance-grid.component.scss'
 })
 export class FinanceGridComponent implements OnInit, OnDestroy {
   @ViewChild(IgxGridComponent, { static: true }) public grid!: IgxGridComponent;
@@ -50,7 +99,7 @@ export class FinanceGridComponent implements OnInit, OnDestroy {
   }
 
   protected getPathToImage(companyName: string) {
-    return `companies/${companyName.split(" ")[0]}.png`;
+    return `companies/${companyName.split(' ')[0]}.png`;
   }
 
   private profitConditionHandler(rowData: any, columnKey: string) {

diff --git a/projects/finance-grid/src/index.html b/projects/finance-grid/src/index.html
@@ -10,6 +10,6 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
   </head>
   <body class="ig-scrollbar">
-    <app-root></app-root>
+    <app-finance></app-finance>
   </body>
 </html>
diff --git a/projects/finance-grid/src/styles.scss b/projects/finance-grid/src/styles.scss
@@ -1,20 +1,10 @@
-@use "igniteui-angular/theming" as *;
-
-@include core();
-@include typography(
-  $font-family: $bootstrap-typeface,
-  $type-scale: $bootstrap-type-scale
-);
-@include theme(
-  $palette: $light-bootstrap-palette,
-  $schema: $light-bootstrap-schema
-);
-
 html {
-  height: 100%;
-  max-height: 1000px;
+    margin: 0;
+    padding: 0;
+    height: 100%;
 }
-
 body {
-  height: 98%;
-}
+    margin: 0;
+    padding: 8px;
+    height: 100%;
+}
diff --git a/projects/fleet-management-grid/package-lock.json b/projects/fleet-management-grid/package-lock.json
diff --git a/projects/fleet-management-grid/package.json b/projects/fleet-management-grid/package.json
@@ -20,7 +20,7 @@
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
     "@igniteui/material-icons-extended": "^3.1.0",
-    "igniteui-angular": "^19.0.1",
+    "igniteui-angular": "^19.0.7",
     "igniteui-angular-charts": "^18.2.0",
     "igniteui-angular-core": "^18.2.0",
     "igniteui-angular-maps": "^18.2.0",

diff --git a/projects/fleet-management-grid/src/app/app.component.scss b/projects/fleet-management-grid/src/app/app.component.scss
@@ -0,0 +1,19 @@
+@use "igniteui-angular/theming" as *;
+
+@include core();
+@include typography();
+@include theme(
+  $palette: $dark-material-palette,
+  $schema: $dark-material-schema
+);
+
+igx-card .igx-card-header__thumbnail {
+    align-self: center;
+    margin-inline-end: 0;
+  }
+
+  .overlay igx-card {
+    border: 0px;
+    border-radius: 4px;
+    box-shadow: var(--ig-elevation-24);
+  }
diff --git a/projects/fleet-management-grid/src/app/app.component.ts b/projects/fleet-management-grid/src/app/app.component.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { FleetManagementGridComponent } from "./fleet-management-grid/fleet-management-grid.component";
 
 @Component({
-  selector: 'app-root',
+  selector: 'app-fleet-management',
   imports: [ FleetManagementGridComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   title = 'master-detail-grid';

diff --git a/...ts/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts b/...ts/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
 import { check, delivery, gitIssue, wrench } from '@igniteui/material-icons-extended';
-import { AutoPositionStrategy, DefaultSortingStrategy, IgxAvatarComponent, IgxBadgeComponent, IgxButtonDirective, IgxButtonModule, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCarouselComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxDividerDirective, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxIconComponent, IgxIconService, IgxLabelDirective, IgxOverlayService, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent, RelativePosition, RelativePositionStrategy, SortingDirection } from 'igniteui-angular';
+import { DefaultSortingStrategy, IgxAvatarComponent, IgxBadgeComponent, IgxButtonDirective, IgxButtonModule, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCarouselComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxDividerDirective, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxIconComponent, IgxIconService, IgxLabelDirective, IgxOverlayService, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent, RelativePosition, RelativePositionStrategy, SortingDirection, THEME_TOKEN, ThemeToken } from 'igniteui-angular';
 import { IgxCategoryChartModule, IgxDataChartInteractivityModule, IgxLegendDynamicModule, IgxPieChartModule } from 'igniteui-angular-charts';
 import CAR_PHOTO_MANIFEST from '../../assets/car_photo_manifest.json';
 import CAR_IMAGES from '../../assets/car_images.json';
@@ -19,6 +19,14 @@ import { VehicleDetails } from '../models/vehicle-details.interface';
 
 @Component({
   selector: 'app-fleet-management-grid',
+  providers: [
+    {
+      provide: THEME_TOKEN,
+      useFactory: () => {
+        return new ThemeToken('material');
+      },
+    },
+  ],
   imports: [
     CommonModule,
     IgxPieChartModule,