Merge branch '18.2.x' into mkirova/partial-fix-13993-18.2.x

Author: ChronosSF

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

@@ -159,6 +159,17 @@ describe('Avatar', () => {
         expect(hostEl.getAttribute('aria-roledescription')).toEqual('image avatar');
         expect(hostEl.getAttribute('aria-label')).toEqual('avatar');
     });
+
+    it('Normalizes the value of the `src` input', () => {
+        const fixture = TestBed.createComponent(InitImageAvatarComponent);
+        fixture.detectChanges();
+
+        const instance = fixture.componentInstance.avatar;
+        instance.src = "/assets/Test - 17.jpg";
+        fixture.detectChanges();
+
+        expect(instance.src).toEqual("/assets/Test%20-%2017.jpg");
+    });
 });
 
 @Component({

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

@@ -9,7 +9,7 @@ import {
     ViewChild
 } from '@angular/core';
 
-import { mkenum } from '../core/utils';
+import { mkenum, normalizeURI } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
 let NEXT_ID = 0;
@@ -202,7 +202,13 @@ export class IgxAvatarComponent implements OnInit {
      * @igxFriendlyName Image URL
      */
     @Input()
-    public src: string;
+    public set src(value: string) {
+        this._src = normalizeURI(value);
+    }
+
+    public get src() {
+        return this._src;
+    }
 
     /** @hidden @internal */
     @ViewChild('defaultTemplate', { read: TemplateRef, static: true })
@@ -225,6 +231,7 @@ export class IgxAvatarComponent implements OnInit {
      * @internal
      */
     private _size: string | IgxAvatarSize;
+    private _src: string;
 
     /**
      * Returns the size of the avatar.

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/checkbox/checkbox.component.ts

@@ -12,13 +12,15 @@ import {
     Renderer2,
     Optional,
     Self,
-    booleanAttribute
+    booleanAttribute,
+    inject,
+    DestroyRef
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
 import { IBaseEventArgs, mkenum } from '../core/utils';
 import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
-import { noop, Subject } from 'rxjs';
+import { noop, Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxTheme, ThemeService } from '../services/theme/theme.service';
 
@@ -287,6 +289,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 +464,57 @@ 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 _theme$ = new Subject<IgxTheme>();
+    private _subscription: Subscription;
+    private destroyRef = inject(DestroyRef);
 
     constructor(
         protected cdr: ChangeDetectorRef,
         protected renderer: Renderer2,
         protected themeService: ThemeService,
         @Optional() @Self() public ngControl: NgControl,
     ) {
-        this.theme = this.themeService?.globalTheme;
-
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
+
+        this.theme = this.themeService.globalTheme;
+
+        this._subscription = this._theme$.asObservable().subscribe(value => {
+            this.theme = value as IgxTheme;
+            this.cdr.detectChanges();
+        });
+
+        this.destroyRef.onDestroy(() => this._subscription.unsubscribe());
     }
 
     /**
@@ -461,6 +530,13 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
                 this.cdr.detectChanges();
             }
         }
+
+        const theme = this.themeService.getComponentTheme(this.elRef);
+
+        if (theme) {
+            this._theme$.next(theme);
+            this.cdr.markForCheck();
+        }
     }
 
     /** @hidden @internal */

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

@@ -10,7 +10,7 @@
         @include register-component(
             $name: string.slice($this, 2, -1),
             $deps: (
-                igx-button,
+                igx-icon-button,
                 igx-drop-down,
                 igx-icon,
             )

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

@@ -58,6 +58,7 @@
         icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

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

@@ -54,6 +54,7 @@
         icon-color: $icon-color,
         border-radius: $border-radius,
         size: $size,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),

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

@@ -73,6 +73,7 @@
         border-radius: $border-radius,
         background-color: $background-color,
         shadow: $shadow,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme'),
         )),

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

@@ -57,6 +57,7 @@
         banner-border-color: $banner-border-color,
         banner-illustration-color: $banner-illustration-color,
         border-radius: $border-radius,
+        theme: map.get($schema, '_meta', 'theme'),
         _meta: map.merge(if($meta, $meta, ()), (
             variant: map.get($schema, '_meta', 'theme')
         )),