Merge branch '20.1.x' into mdragnev/performance-readme

Author: kdinev

projects/igniteui-angular/src/lib/badge/README.md

@@ -1,7 +1,7 @@
 # igx-badge
 
 The **igx-badge** component is an absolutely positioned element that can be used in tandem with other components such as avatars, navigation menus, or anywhere else in an app where some active indication is required.
-With the igx-badge you can display active count or an icon in several different predefined styles.  
+With the igx-badge you can display active count or an icon in several different predefined styles and sizes.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html)
 
 # Usage
@@ -14,9 +14,12 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 |:----------|:-------------:|:------|
 | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
 | `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
+| `dot` | boolean | Set whether the badge is displayed as a minimal dot indicator without any content. Default is `false`. |
 | `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
 | `value` | string | Set the value to be displayed inside the badge. |
 | `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. |
+| `outlined` | boolean | Set whether the badge should have an outline. Default is `false`. |
+| `shape` | string | Set the shape of the badge to either `rounded` or `square`. Default is `rounded`. |
 
 # Examples
 
@@ -26,3 +29,18 @@ Using `igx-badge` with the `igx-avatar` component to show active status.
     <igx-badge type="info" value="8"></igx-badge>
 </igx-avatar>
 ```
+
+Using `igx-badge` as a dot indicator for notifications.
+```html
+<igx-badge dot type="success"></igx-badge>
+<igx-badge dot outlined type="error"></igx-badge>
+```
+
+Using different badge types.
+```html
+<igx-badge type="primary" value="1"></igx-badge>
+<igx-badge type="info" value="2"></igx-badge>
+<igx-badge type="success" value="3"></igx-badge>
+<igx-badge type="warning" value="4"></igx-badge>
+<igx-badge type="error" value="5"></igx-badge>
+```

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

@@ -11,7 +11,8 @@ describe('Badge', () => {
                 InitBadgeWithDefaultsComponent,
                 InitBadgeWithIconComponent,
                 IgxBadgeComponent,
-                InitBadgeWithIconARIAComponent
+                InitBadgeWithIconARIAComponent,
+                InitBadgeWithDotComponent
             ]
         }).compileComponents();
     }));
@@ -87,6 +88,26 @@ describe('Badge', () => {
         const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
         expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
     });
+
+    it('Initializes badge with dot property', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.dot).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
+    });
+
+    it('Initializes success badge as dot', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.type).toBe(IgxBadgeType.SUCCESS);
+        expect(badge.dot).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--success'))).toBeTruthy();
+    });
 });
 
 @Component({
@@ -120,3 +141,11 @@ class InitBadgeWithIconComponent {
 class InitBadgeWithIconARIAComponent {
     @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
 }
+
+@Component({
+    template: `<igx-badge dot type="success"></igx-badge>`,
+    imports: [IgxBadgeComponent]
+})
+class InitBadgeWithDotComponent {
+    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
+}

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

@@ -153,7 +153,9 @@ export class IgxBadgeComponent {
     /** @hidden @internal */
     @HostBinding('class.igx-badge--square')
     public get _squareShape(): boolean {
-        return this.shape === 'square';
+        if (!this.dot) {
+            return this.shape === 'square';
+        }
     }
 
     /**
@@ -183,6 +185,20 @@ export class IgxBadgeComponent {
     @HostBinding('class.igx-badge--outlined')
     public outlined = false;
 
+    /**
+     * Sets/gets whether the badge is displayed as a dot.
+     * When true, the badge will be rendered as a minimal 8px indicator without any content.
+     * Default value is `false`.
+     *
+     * @example
+     * ```html
+     * <igx-badge dot type="success"></igx-badge>
+     * ```
+     */
+    @Input({transform: booleanAttribute})
+    @HostBinding('class.igx-badge--dot')
+    public dot = false;
+
     /**
      * Defines a human-readable, accessor, author-localized description for
      * the `type` and the `icon` or `value` of the element.

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

@@ -192,23 +192,25 @@ <h2 id="igx-aria-calendar-title-month" class="igx-calendar__header-date">
     (focus)="this.onWrapperFocus($event)"
     (blur)="this.onWrapperBlur($event)"
     >
-    <caption id="calendar-desc" tabindex="-1" class="igx-calendar__aria-off-screen">
-        @if (selection === 'multi') {
-            {{ monthsViewNumber && monthsViewNumber > 1 ?
-            resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :
-            resourceStrings.igx_calendar_singular_multi_selection}}
-        }
-        @if (selection === 'range') {
-            {{ monthsViewNumber && monthsViewNumber > 1 ?
-            resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :
-            resourceStrings.igx_calendar_singular_range_selection}}
-        }
-        @if (selection === 'single') {
-            {{ monthsViewNumber && monthsViewNumber > 1 ?
-            resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :
-            resourceStrings.igx_calendar_singular_single_selection}}
+    <div id="calendar-desc" tabindex="-1" class="igx-calendar__aria-off-screen">
+        @switch (selection) {
+            @case ('multi') {
+                {{ monthsViewNumber && monthsViewNumber > 1 ?
+                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :
+                resourceStrings.igx_calendar_singular_multi_selection}}
+            }
+            @case ('range') {
+                {{ monthsViewNumber && monthsViewNumber > 1 ?
+                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :
+                resourceStrings.igx_calendar_singular_range_selection}}
+            }
+            @default {
+                {{ monthsViewNumber && monthsViewNumber > 1 ?
+                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :
+                resourceStrings.igx_calendar_singular_single_selection}}
+            }
         }
-    </caption>
+    </div>
     <section
         class="igx-calendar__pickers"
         [class.igx-calendar__pickers--days]="isDefaultView"

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

@@ -439,7 +439,9 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
     @HostListener('mousedown', ['$event'])
     protected onMouseDown(event: MouseEvent) {
         event.stopPropagation();
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
 
     private _showActiveDay: boolean;
@@ -841,7 +843,9 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
 
 		if (this.platform.isActivationKey(event)) {
             this.viewDate = date;
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
 		}
 	}
 
@@ -850,6 +854,10 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
 	 * @internal
 	 */
     public onYearsViewClick(event: MouseEvent) {
+        if (!this.platform.isBrowser) {
+            return;
+        }
+
         const path = event.composed ? event.composedPath() : [event.target];
         const years = this.dacadeView.viewItems.toArray();
         const validTarget = years.some(year => path.includes(year.nativeElement));
@@ -997,7 +1005,9 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
             this.activeViewIdx = activeViewIdx;
             this.viewDate = date;
 
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
 		}
 	}
 

projects/igniteui-angular/src/lib/calendar/calendar.services.ts

@@ -1,17 +1,23 @@
-import { Injectable, ElementRef, NgZone } from "@angular/core";
+import { Injectable, ElementRef, NgZone, inject } from "@angular/core";
 import { EventManager } from "@angular/platform-browser";
+import { PlatformUtil } from "../core/utils";
 
 @Injectable()
 export class KeyboardNavigationService {
     private keyHandlers = new Map<string, (event: KeyboardEvent) => void>();
     private eventUnsubscribeFn: Function | null = null;
+    private platform = inject(PlatformUtil);
 
     constructor(
         private eventManager: EventManager,
         private ngZone: NgZone,
     ) {}
 
     public attachKeyboardHandlers(elementRef: ElementRef, context: any) {
+        if (!this.platform.isBrowser) {
+            return this;
+        }
+
         this.detachKeyboardHandlers(); // Clean up any existing listeners
 
         this.ngZone.runOutsideAngular(() => {

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -349,7 +349,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
             });
         }
 
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
 

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

@@ -152,7 +152,9 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
 
 		if (this.platform.isActivationKey(event)) {
             this.viewDate = date;
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
 		}
 	}
 
@@ -188,9 +190,13 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
     public override activeViewDecade() {
         super.activeViewDecade();
 
-        requestAnimationFrame(() => {
-            this.dacadeView.el.nativeElement.focus();
-        });
+        if (this.platform.isBrowser) {
+            requestAnimationFrame(() => {
+                if (this.dacadeView?.el?.nativeElement) {
+                    this.dacadeView.el.nativeElement.focus();
+                }
+            });
+        }
     }
 
     /**
@@ -221,7 +227,9 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
         );
 
         this.activeView = IgxCalendarView.Year;
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
 
     /**
@@ -279,7 +287,9 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
     @HostListener('mousedown', ['$event'])
     protected onMouseDown(event: MouseEvent) {
         event.stopPropagation();
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
 
     private _showActiveDay: boolean;

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

@@ -5,6 +5,7 @@ import {
     ElementRef,
     booleanAttribute,
     Inject,
+    inject,
 } from "@angular/core";
 import { IgxCalendarMonthDirective } from "../calendar.directives";
 import { TitleCasePipe } from "@angular/common";
@@ -16,6 +17,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { CalendarDay } from "../common/model";
 import type { DayInterval } from "../common/model";
 import { calendarRange } from "../common/helpers";
+import { PlatformUtil } from "../../core/utils";
 
 let NEXT_ID = 0;
 
@@ -37,6 +39,7 @@ let NEXT_ID = 0;
 })
 export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #standalone = true;
+    private platform = inject(PlatformUtil);
 
     /**
      * Sets/gets the `id` of the months view.
@@ -139,7 +142,7 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
      * @hidden
      */
     protected onMouseDown() {
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
     }

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts

@@ -4,6 +4,7 @@ import {
     HostBinding,
     ElementRef,
     Inject,
+    inject,
 } from "@angular/core";
 import { IgxCalendarYearDirective } from "../calendar.directives";
 import {
@@ -14,6 +15,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { CalendarDay } from "../common/model";
 import type { DayInterval } from "../common/model";
 import { calendarRange } from "../common/helpers";
+import { PlatformUtil } from "../../core/utils";
 
 @Component({
     providers: [
@@ -33,6 +35,7 @@ import { calendarRange } from "../common/helpers";
 })
 export class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #standalone = true;
+    private platform = inject(PlatformUtil);
 
     /**
      * The default css class applied to the component.
@@ -158,7 +161,7 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
      * @hidden
      */
     protected onMouseDown() {
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
     }