fix(theme-service): get theme from component stylesheet instead of the global theme (#14622)

Author: simeonoff

package-lock.json

@@ -80,7 +80,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^10.1.0",
+    "igniteui-theming": "^11.0.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^10.1.0",
+        "igniteui-theming": "^11.0.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -45,7 +45,7 @@ export abstract class IgxCarouselComponentBase {
 
     constructor(
         @Inject(IgxAngularAnimationService) private animationService: AnimationService,
-        private cdr: ChangeDetectorRef) {
+        protected cdr: ChangeDetectorRef) {
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/carousel/carousel-base.ts

@@ -1,6 +1,7 @@
 import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
 import {
     AfterContentInit,
+    AfterViewInit,
     ChangeDetectorRef,
     Component,
     ContentChild,
@@ -88,7 +89,7 @@ export class CarouselHammerConfig extends HammerGestureConfig {
     imports: [IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet]
 })
 
-export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
+export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterViewInit, AfterContentInit {
 
     /**
      * Sets the `id` of the carousel.
@@ -587,26 +588,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     ) {
         super(animationService, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
-        this.theme = this.theme ?? this.themeService.theme;
-
-        for (const icon of this._icons) {
-            switch(this.theme) {
-                case 'indigo':
-                    this.iconService.addIconRef(
-                        icon.name,
-                        icon.family,
-                        icon.ref.get('indigo'),
-                    );
-                    break;
-                case 'material':
-                default:
-                    this.iconService.addIconRef(
-                        icon.name,
-                        icon.family,
-                        icon.ref.get('material'),
-                    );
-            }
-        }
     }
 
 
@@ -738,6 +719,37 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         }
     }
 
+    /** @hidden */
+    public ngAfterViewInit() {
+        this.cdr.detach();
+
+        if (!this.theme) {
+            this.theme = this.themeService.getComponentTheme(this.element);
+        }
+
+        for (const icon of this._icons) {
+            switch(this.theme) {
+                case 'indigo':
+                    this.iconService.addIconRef(
+                        icon.name,
+                        icon.family,
+                        icon.ref.get('indigo'),
+                    );
+                    break;
+                case 'material':
+                default:
+                    this.iconService.addIconRef(
+                        icon.name,
+                        icon.family,
+                        icon.ref.get('material'),
+                    );
+            }
+        }
+
+        this.cdr.detectChanges();
+        this.cdr.reattach();
+    }
+
     /** @hidden */
     public ngAfterContentInit() {
         this.slides.changes

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -72,10 +72,10 @@
 
     $variant: map.get($theme, '_meta', 'variant');
     $icon-button-size: map.get((
-        material: rem(36px),
-        fluent: rem(32px),
-        bootstrap: rem(36px),
-        indigo-design: rem(36px),
+        'material': rem(36px),
+        'fluent': rem(32px),
+        'bootstrap': rem(36px),
+        'indigo': rem(36px),
     ), $variant);
     $button-size: sizable(rem(28px), rem(28px), $icon-button-size);
     $icon-size: sizable(rem(14px), rem(14px), rem(18px));
@@ -179,7 +179,7 @@
                 color: var-get($theme, 'icon-color');
             }
 
-            @if $variant == 'indigo-design' or $variant == 'fluent' {
+            @if $variant == 'indigo' or $variant == 'fluent' {
                 border-radius: var-get($theme, 'actions-border-radius');
             }
         }

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -69,10 +69,10 @@
     $variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $box-shadow: map.get((
-        material: null,
-        fluent: null,
-        bootstrap: 0 0 0 rem(3px) var-get($theme, 'background'),
-        indigo-design: null,
+        'material': null,
+        'fluent': null,
+        'bootstrap': 0 0 0 rem(3px) var-get($theme, 'background'),
+        'indigo': null,
     ), $variant);
 
     %igx-avatar-outline {
@@ -108,7 +108,7 @@
             color: var-get($theme, 'icon-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-icon {
                 --component-size: 1;
             }

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -122,7 +122,7 @@
             color: var-get($theme, 'icon-color');
         }
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             igx-icon {
                 $icon-size: rem(12px);
 

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -102,7 +102,7 @@
         box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color');
         border-radius: var-get($theme, 'border-radius');
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
             padding: rem(16px);
         }
@@ -134,7 +134,7 @@
         flex: 1 0 0%;
         gap: rem(16px);
 
-        @if $variant == 'indigo-design' {
+        @if $variant == 'indigo' {
             gap: rem(8px);
         } @else {
             padding: 0 rem(8px);

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -186,14 +186,14 @@
         igx-icon {
             --component-size: 3;
 
-            @if $variant == 'indigo-design' {
+            @if $variant == 'indigo' {
                 --size: rem(16px);
             }
         }
     }
 
     %igx-bottom-nav-menu-item--disabled {
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             opacity: .5;
         }
 
@@ -226,7 +226,7 @@
         justify-content: center;
         color: var-get($theme, 'icon-color');
 
-        @if $variant != 'indigo-design' {
+        @if $variant != 'indigo' {
             padding: 0 rem(8px);
             height: rem(24px);
             transform: translateZ(0);
@@ -250,7 +250,7 @@
         color: var-get($theme, 'label-selected-color');
     }
 
-    @if $variant != 'indigo-design' {
+    @if $variant != 'indigo' {
         %igx-tab-icon--selected {
             transform: translateY(-2px);
         }