Merge branch '18.2.x' into aahmedov/fix-column-resize-line-positioning-for-scaled-grid-18.2.x

Author: kacheshmarova

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

@@ -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.ts

@@ -342,7 +342,7 @@ export class IgxAvatarComponent implements OnInit {
      * @internal
      */
     public getSrcUrl() {
-        return `url(${this.src})`;
+        return `url("${this.src}")`;
     }
 
     /** @hidden @internal */

projects/igniteui-angular/src/lib/calendar/common/calendar-view.directive.ts

@@ -21,6 +21,7 @@ import {
 import { CalendarDay, DayInterval } from "../common/model";
 import { getNextActiveDate, isDateInRanges } from "./helpers";
 import { DateRangeType } from "../../core/dates";
+import { isDate } from "../../core/utils";
 
 export enum Direction {
     NEXT = 1,
@@ -141,7 +142,7 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
      */
     @Input()
     public set date(value: Date) {
-        if (!(value instanceof Date)) return;
+        if (!isDate(value)) return;
 
         this._date = value;
     }

projects/igniteui-angular/src/lib/calendar/common/model.ts

@@ -1,3 +1,5 @@
+import { isDate } from "../../core/utils";
+
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 export type DayParameter = CalendarDay | Date;
 
@@ -19,7 +21,7 @@ export const daysInWeek = 7;
 const millisecondsInDay = 86400000;
 
 export function toCalendarDay(date: DayParameter) {
-    return date instanceof Date ? CalendarDay.from(date) : date;
+    return isDate(date) ? CalendarDay.from(date) : date;
 }
 
 function checkRollover(original: CalendarDay, modified: CalendarDay) {

projects/igniteui-angular/src/lib/card/card.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();
@@ -249,6 +260,17 @@ class InitOutlinedCardComponent {
 })
 class CardWithHeaderComponent { }
 
+@Component({
+    template: `<igx-card class="ig-typography">
+        <igx-card-content>
+            <igx-icon>face</igx-icon>
+        </igx-card-content>
+    <igx-card>`,
+    standalone: true,
+    imports: [IgxCardComponent, IgxCardContentDirective, IgxIconComponent]
+})
+class CardContentIconComponent { }
+
 @Component({
     template: `<igx-card>
         <igx-card-media width="200px" height="50%">

projects/igniteui-angular/src/lib/carousel/carousel.component.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,
@@ -584,7 +584,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);
@@ -1003,7 +1004,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/checkbox/checkbox.component.ts

@@ -12,15 +12,18 @@ import {
     Renderer2,
     Optional,
     Self,
-    booleanAttribute
+    booleanAttribute,
+    inject,
+    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 } 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',
@@ -287,6 +290,58 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
     @HostBinding('class.igx-checkbox')
     public cssClass = 'igx-checkbox';
 
+    /**
+     * Returns if the component is of type `material`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.material;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--material')
+    protected get material() {
+        return this.theme === 'material';
+    }
+
+    /**
+     * Returns if the component is of type `indigo`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.indigo;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--indigo')
+    protected get indigo() {
+        return this.theme === 'indigo';
+    }
+
+    /**
+     * Returns if the component is of type `bootstrap`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.bootstrap;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--bootstrap')
+    protected get bootstrap() {
+        return this.theme === 'bootstrap';
+    }
+
+    /**
+     * Returns if the component is of type `fluent`.
+     *
+     * @example
+     * ```typescript
+     * let checkbox = this.checkbox.fluent;
+     * ```
+     */
+    @HostBinding('class.igx-checkbox--fluent')
+    protected get fluent() {
+        return this.theme === 'fluent';
+    }
+
     /**
      * Sets/gets whether the checkbox component is on focus.
      * Default value is `false`.
@@ -410,42 +465,69 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
      * @internal
      */
     public inputId = `${this.id}-input`;
+
     /**
      * @hidden
      */
     protected _onChangeCallback: (_: any) => void = noop;
+
     /**
      * @hidden
      */
     private _onTouchedCallback: () => void = noop;
+
     /**
      * @hidden
      * @internal
      */
     protected _checked = false;
+
     /**
      * @hidden
      * @internal
      */
-    private _required = false;
+    protected theme: IgxTheme;
 
     /**
      * @hidden
      * @internal
      */
-    protected theme: IgxTheme = 'material';
+    private _required = false;
+    private elRef = inject(ElementRef);
+    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,
     ) {
-        this.theme = this.themeService?.globalTheme;
-
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
+
+        this.theme = this.themeToken.theme;
+
+        const { unsubscribe } = this.themeToken.onChange((theme) => {
+            if (this.theme !== theme) {
+                this.theme = theme;
+                this.cdr.detectChanges();
+            }
+        });
+
+        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();
+            }
+        }
     }
 
     /**
@@ -461,6 +543,8 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
                 this.cdr.detectChanges();
             }
         }
+
+        this.setComponentTheme();
     }
 
     /** @hidden @internal */

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -35,8 +35,8 @@
     [labelledBy]="ariaLabelledBy || label?.id || placeholder || ''"
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
-    <div class="igx-combo__search">
-        <igx-input-group *ngIf="displaySearchInput">
+    <div class="igx-combo__search" *ngIf="displaySearchInput">
+        <igx-input-group>
             <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
                    [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
                    (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"