Merge branch '18.2.x' into ttonev/fix-14970-18.2

Author: tishko0

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -24,7 +24,6 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
 import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
-import { IgxButtonDirective } from '../directives/button/button.directive';
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
@@ -78,7 +77,6 @@ export class IgxActionStripMenuItemDirective {
         NgIf,
         NgFor,
         NgTemplateOutlet,
-        IgxButtonDirective,
         IgxIconButtonDirective,
         IgxRippleDirective,
         IgxToggleActionDirective,

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, TemplateRef, ViewChild, Output, EventEmitter, ElementRef, booleanAttribute } from '@angular/core';
 import { IgxIconComponent } from '../../icon/icon.component';
 import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
-import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { NgIf } from '@angular/common';
 import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive';
 
@@ -12,7 +11,7 @@ import { IgxIconButtonDirective } from '../../directives/button/icon-button.dire
     selector: 'igx-grid-action-button',
     templateUrl: 'grid-action-button.component.html',
     standalone: true,
-    imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
+    imports: [NgIf, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
 })
 export class IgxGridActionButtonComponent {
 

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

@@ -159,6 +159,39 @@ 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");
+    });
+
+    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

@@ -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.
@@ -335,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/calendar.component.ts

@@ -13,7 +13,7 @@ import {
 	booleanAttribute,
     HostListener,
 } from '@angular/core';
-import { NgIf, NgTemplateOutlet, NgStyle, NgFor, DatePipe } from '@angular/common';
+import { NgIf, NgTemplateOutlet, NgFor, DatePipe } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -72,7 +72,7 @@ let NEXT_ID = 0;
 	selector: 'igx-calendar',
 	templateUrl: 'calendar.component.html',
 	standalone: true,
-	imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, NgStyle, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar],
+	imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar],
 })
 export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy {
     /**

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/calendar/days-view/day-item.component.ts

@@ -111,7 +111,8 @@ export class IgxDayItemComponent {
     @HostBinding('class.igx-days-view__date--selected')
     public get isSelectedCSS(): boolean {
     const selectable =
-        !this.isInactive || (this.isWithinRange && this.selection === "range");
+        !this.isInactive || this.isWithinPreviewRange ||
+        (this.isWithinRange && this.selection === "range");
     return !this.isDisabled && selectable && this.selected;
     }
 

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -9,7 +9,7 @@ import {
     OnDestroy,
     OnInit,
 } from "@angular/core";
-import { NgIf, NgStyle, NgTemplateOutlet, DatePipe } from "@angular/common";
+import { NgIf, NgTemplateOutlet, DatePipe } from "@angular/common";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { IgxMonthsViewComponent } from "../months-view/months-view.component";
@@ -40,7 +40,6 @@ let NEXT_ID = 0;
     standalone: true,
     imports: [
         NgIf,
-        NgStyle,
         NgTemplateOutlet,
         DatePipe,
         IgxIconComponent,

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html

@@ -12,6 +12,7 @@
         [date]="date"
         [showActive]="showActive"
         (itemSelection)="selectDate($event)"
+        (mousedown)="onMouseDown()"
     >
         <span class="igx-calendar-view__item-inner" aria-hidden="true">
             {{ formattedMonth(month).formatted | titlecase }}