Merge pull request #15120 from IgniteUI/19.0.x

Mass Merge 19.0.x to master

Author: ChronosSF

CHANGELOG.md

@@ -15,6 +15,27 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxColumn`
     - Introduced the `disabledSummaries` property, allowing users to specify which summaries should be disabled for a given column. This property accepts an array of strings corresponding to the summary keys, enabling selective control over both default summaries (e.g., 'Count', 'Min') and any custom summaries created by the user.
+- `Themes`
+    - **Deprecation** The utility mixins `light-theme`, `dark-theme`, `bootstrap-light-theme`, `bootstrap-dark-theme`, `fluent-light-theme`, `fluent-dark-theme`, `indigo-light-theme`, and `indigo-dark-theme` have been deprecated and will be removed in version 20 of Ignite UI for Angular. Switch to the more generic `theme` mixin instead.
+    Example:
+    ```scss
+    $my-light-palette: palette(
+        $primary: navy,
+        $secondary: rebeccapurple,
+        $surface: white,
+    );
+
+    // Before:
+    @include light-theme(
+        $palette: $my-light-palette
+    );
+
+    // After:
+    @include theme(
+        $palette: $my-light-palette,
+        $schema: $light-material-schema,
+    );
+    ```
 
 ## 18.2.0
 ### General

package-lock.json

@@ -85,11 +85,11 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "^19.0.0",
     "@angular-devkit/schematics": "^19.0.0",
-    "@angular-eslint/builder": "^19.0.0-alpha.1",
-    "@angular-eslint/eslint-plugin": "^19.0.0-alpha.1",
-    "@angular-eslint/eslint-plugin-template": "^19.0.0-alpha.1",
-    "@angular-eslint/schematics": "^19.0.0-alpha.1",
-    "@angular-eslint/template-parser": "^19.0.0-alpha.1",
+    "@angular-eslint/builder": "^19.0.0",
+    "@angular-eslint/eslint-plugin": "^19.0.0",
+    "@angular-eslint/eslint-plugin-template": "^19.0.0",
+    "@angular-eslint/schematics": "^19.0.0",
+    "@angular-eslint/template-parser": "^19.0.0",
     "@angular/cli": "^19.0.0",
     "@angular/compiler-cli": "^19.0.0",
     "@angular/language-service": "^19.0.0",

package.json

@@ -170,6 +170,28 @@ describe('Avatar', () => {
 
         expect(instance.src).toEqual("/assets/Test%20-%2017.jpg");
     });
+
+    it('should not throw error if src is null', () => {
+        const fixture = TestBed.createComponent(InitImageAvatarComponent);
+        fixture.detectChanges();
+        expect(() => {
+            const instance = fixture.componentInstance.avatar;
+            instance.src = null;
+            fixture.detectChanges();
+        }).not.toThrow();
+    });
+
+    it('avatar with [src] and fallback [initials] should not throw error if src is null', () => {
+        const fixture = TestBed.createComponent(AvatarWithAttribsComponent);
+        fixture.detectChanges();
+        const instance = fixture.componentInstance.avatar;
+        expect(instance.type).toEqual(IgxAvatarType.INITIALS);
+        expect(instance.initials).toEqual('ZK');
+        expect(() => {
+            instance.src = null;
+            fixture.detectChanges();
+        }).not.toThrow();
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/avatar/avatar.component.spec.ts

@@ -68,6 +68,7 @@ describe('Card', () => {
                 InitCardComponent,
                 InitOutlinedCardComponent,
                 CardWithHeaderComponent,
+                CardContentIconComponent,
                 VerticalCardComponent,
                 HorizontalCardComponent
             ]
@@ -182,6 +183,16 @@ describe('Card', () => {
         expect(actions).not.toHaveClass(classes.actions.vertical);
     });
 
+    it('Should use Material Icons font-family for igx-icon in card content', () => {
+        const fixture = TestBed.createComponent(CardContentIconComponent);
+        fixture.detectChanges();
+
+        const iconElement = fixture.debugElement.query(By.css('igx-icon')).nativeElement;
+        const computedStyle = window.getComputedStyle(iconElement);
+
+        expect(computedStyle.fontFamily).toBe('"Material Icons"');
+    });
+
     it('Should automatically align actions vertically when in horizontal layout', () => {
         const fixture = TestBed.createComponent(HorizontalCardComponent);
         fixture.detectChanges();
@@ -246,6 +257,16 @@ class InitOutlinedCardComponent {
 })
 class CardWithHeaderComponent { }
 
+@Component({
+    template: `<igx-card class="ig-typography">
+            <igx-card-content>
+                <igx-icon>face</igx-icon>
+            </igx-card-content>
+        <igx-card>`,
+    imports: [IgxCardComponent, IgxCardContentDirective, IgxIconComponent]
+})
+class CardContentIconComponent { }
+
 @Component({
     template: `<igx-card>
         <igx-card-media width="200px" height="50%">

projects/igniteui-angular/src/lib/card/card.spec.ts

@@ -1,4 +1,4 @@
-import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgIf, NgClass, NgFor, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import {
     AfterContentInit,
     ChangeDetectorRef,
@@ -583,7 +583,8 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         private iterableDiffers: IterableDiffers,
         @Inject(IgxAngularAnimationService) animationService: AnimationService,
         private platformUtil: PlatformUtil,
-        private dir: IgxDirectionality
+        private dir: IgxDirectionality,
+        @Inject(DOCUMENT) private document: any
     ) {
         super(animationService, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
@@ -1002,7 +1003,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     }
 
     private focusElement() {
-        const focusedElement = document.activeElement;
+        const focusedElement = this.document.activeElement;
 
         if (focusedElement.classList.contains('igx-carousel-indicators__indicator')) {
             this.indicatorsElements[this.current].nativeElement.focus();

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

@@ -14,15 +14,16 @@ import {
     Self,
     booleanAttribute,
     inject,
-    DestroyRef
+    DestroyRef,
+    Inject
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
-import { IBaseEventArgs, mkenum } from '../core/utils';
+import { IBaseEventArgs, getComponentTheme, mkenum } from '../core/utils';
 import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
-import { noop, Subject, Subscription } from 'rxjs';
+import { noop, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { IgxTheme, ThemeService } from '../services/theme/theme.service';
+import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token';
 
 export const LabelPosition = /*@__PURE__*/mkenum({
     BEFORE: 'before',
@@ -492,28 +493,40 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
      */
     private _required = false;
     private elRef = inject(ElementRef);
-    private _theme$ = new Subject<IgxTheme>();
-    private _subscription: Subscription;
     private destroyRef = inject(DestroyRef);
 
     constructor(
         protected cdr: ChangeDetectorRef,
         protected renderer: Renderer2,
-        protected themeService: ThemeService,
+        @Inject(THEME_TOKEN)
+        protected themeToken: ThemeToken,
         @Optional() @Self() public ngControl: NgControl,
     ) {
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
 
-        this.theme = this.themeService.globalTheme;
+        this.theme = this.themeToken.theme;
 
-        this._subscription = this._theme$.asObservable().subscribe(value => {
-            this.theme = value as IgxTheme;
-            this.cdr.detectChanges();
+        const { unsubscribe } = this.themeToken.onChange((theme) => {
+            if (this.theme !== theme) {
+                this.theme = theme;
+                this.cdr.detectChanges();
+            }
         });
 
-        this.destroyRef.onDestroy(() => this._subscription.unsubscribe());
+        this.destroyRef.onDestroy(() => unsubscribe);
+    }
+
+    private setComponentTheme() {
+        if(!this.themeToken.preferToken) {
+            const theme = getComponentTheme(this.elRef.nativeElement);
+
+            if (theme && theme !== this.theme) {
+                this.theme = theme;
+                this.cdr.markForCheck();
+            }
+        }
     }
 
     /**
@@ -530,12 +543,7 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
             }
         }
 
-        const theme = this.themeService.getComponentTheme(this.elRef);
-
-        if (theme) {
-            this._theme$.next(theme);
-            this.cdr.markForCheck();
-        }
+        this.setComponentTheme();
     }
 
     /** @hidden @internal */