Merge branch 'master' into puppeteer

Author: kdinev

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 15.1.1
+- **Breaking Changes** - ` $label-floated-background` and `$label-floated-disabled-background` properties of `IgxInputGroupComponent` theme has been removed.
+- `IgxInputGroupComponent` The input group has been refactored so that the floating label for the input of `type="border"` does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
+- 
+- **Breaking Changes** - `$size` property of `scrollbar-theme` theme has been renamed to `$scrollbar-size`.
+
 ## 15.1.0
 
 ### New Features
@@ -24,14 +30,16 @@ All notable changes for each version of this project will be documented in this
     - **Behavioral Change** - When selected row is deleted from the grid component `rowSelectionChanging` event will no longer be emitted.
  - `IgxCarousel`
     - **Breaking Change** The `onSlideChanged`, `onSlideAdded`, `onSlideRemoved`, `onCarouselPaused` and `onCarouselPlaying` outputs have been renamed to `slideChanged`, `slideAdded`, `slideRemoved`, `carouselPaused` and `carouselPlaying` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
-- `IgxRadio`, `IgxRadioGroup`
+- `IgxRadio`, `IgxRadioGroup`, `IgxCheckbox`, `IgxSwitch`
     - Added component validation along with styles for invalid state
 - `igxMask` directive
     - Added the capability to escape mask pattern literals.
 - `IgxBadge`
     - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded. 
 - `IgxAvatar`
     - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`. 
+- `IgxOverlayService`
+    - `attach` method overload accepting `ComponentFactoryResolver` (trough `NgModuleRef`-like object) is now deprecated in line with API deprecated in Angular 13. New overload is added accepting `ViewComponentRef` that should be used instead.
 
 
 ## 15.0.1

projects/igniteui-angular/migrations/update-15_1_0/changes/theme-changes.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$size",
+      "replaceWith": "$scrollbar-size",
+      "owner": "scrollbar-theme",
+      "type":"property"
+    },
+    {
+      "name": "$label-floated-background",
+      "remove": true,
+      "owner": "input-group-theme",
+      "type":"property"
+    },
+    {
+      "name": "$label-floated-disabled-background",
+      "remove": true,
+      "owner": "input-group-theme",
+      "type":"property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-15_1_0/index.spec.ts

@@ -138,4 +138,34 @@ describe(`Update to ${version}`, () => {
         `
         );
     });
+
+    it('should rename the $size property to the $scrollbar-size', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-scrollbar: scrollbar-theme($size: 10px);`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-scrollbar: scrollbar-theme($scrollbar-size: 10px);`
+        );
+    });
+
+    it('should remove the $label-floated-background amd $label-floated-disabled-background properties from the input-group-theme', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-input: input-group-theme($label-floated-background: transparent, $label-floated-disabled-background: transparent);`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-input: input-group-theme();`
+        );
+    });
 });

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

@@ -1317,6 +1317,9 @@ describe('Multi-View Calendar - ', () => {
             overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
             HelperTestFunctions.verifyMonthsViewNumber(overlay, 2);
             HelperTestFunctions.verifyCalendarSubHeaders(overlay, [new Date('2019-09-16'), new Date('2019-10-16')]);
+
+            // clean up test
+            tick(350);
         }));
 
         it('Verify setting hideOutsideDays and monthsViewNumber from datepicker', fakeAsync(() => {
@@ -1349,8 +1352,10 @@ describe('Multi-View Calendar - ', () => {
             expect(HelperTestFunctions.getHiddenDays(overlay, 0).length).toBe(0);
             expect(HelperTestFunctions.getHiddenDays(overlay, 1).length).toBe(0);
             expect(HelperTestFunctions.getHiddenDays(overlay, 2).length).toBe(0);
-        }));
 
+            // clean up test
+            tick(350);
+        }));
     });
 });
 

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1,7 +1,10 @@
 import {
+    AfterContentChecked,
+    AfterViewChecked,
     AfterViewInit,
     ChangeDetectorRef,
     ContentChild,
+    ContentChildren,
     Directive,
     DoCheck,
     ElementRef,
@@ -16,6 +19,7 @@ import {
     OnInit,
     Optional,
     Output,
+    QueryList,
     TemplateRef,
     ViewChild
 } from '@angular/core';
@@ -30,7 +34,7 @@ import { SortingDirection } from '../data-operations/sorting-strategy';
 import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxIconService } from '../icon/public_api';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/inputGroupType';
-import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective } from '../input-group/public_api';
+import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
 import { AbsoluteScrollStrategy, AutoPositionStrategy, OverlaySettings } from '../services/public_api';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
 import { IgxComboAPIService } from './combo.api';
@@ -124,8 +128,8 @@ export interface IComboFilteringOptions {
 }
 
 @Directive()
-export abstract class IgxComboBaseDirective extends DisplayDensityBase implements IgxComboBase, OnInit, DoCheck,
-    AfterViewInit, OnDestroy, ControlValueAccessor {
+export abstract class IgxComboBaseDirective extends DisplayDensityBase implements IgxComboBase, AfterViewChecked, OnInit, DoCheck,
+    AfterViewInit, AfterContentChecked, OnDestroy, ControlValueAccessor {
     /**
      * Defines whether the caseSensitive icon should be shown in the search input
      *
@@ -752,6 +756,12 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     @ViewChild('complex', { read: TemplateRef, static: true })
     protected complexTemplate: TemplateRef<any>;
 
+    @ContentChildren(IgxPrefixDirective, { descendants: true })
+    protected prefixes: QueryList<IgxPrefixDirective>;
+
+    @ContentChildren(IgxSuffixDirective, { descendants: true })
+    protected suffixes: QueryList<IgxSuffixDirective>;
+
     /** @hidden @internal */
     public get searchValue(): string {
         return this._searchValue;
@@ -950,24 +960,39 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         super(_displayDensityOptions);
     }
 
-    /** @hidden @internal */
-    public ngOnInit() {
-        this.ngControl = this._injector.get<NgControl>(NgControl, null);
-        const targetElement = this.elementRef.nativeElement;
+    public ngAfterViewChecked() {
+        const targetElement = this.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle') as HTMLElement;
+
         this._overlaySettings = {
             target: targetElement,
             scrollStrategy: new AbsoluteScrollStrategy(),
             positionStrategy: new AutoPositionStrategy(),
             modal: false,
             closeOnOutsideClick: true,
-            excludeFromOutsideClick: [targetElement as HTMLElement]
+            excludeFromOutsideClick: [targetElement]
         };
+    }
+
+    /** @hidden @internal */
+    public ngAfterContentChecked(): void {
+        if (this.inputGroup && this.prefixes?.length > 0) {
+            this.inputGroup.prefixes = this.prefixes;
+        }
+
+        if (this.inputGroup && this.suffixes?.length > 0) {
+            this.inputGroup.suffixes = this.suffixes;
+        }
+    }
+
+    /** @hidden @internal */
+    public ngOnInit() {
+        this.ngControl = this._injector.get<NgControl>(NgControl, null);
         this.selectionService.set(this.id, new Set());
         this._iconService.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
     }
 
     /** @hidden @internal */
-    public ngAfterViewInit() {
+    public ngAfterViewInit(): void {
         this.filteredData = [...this.data];
 
         if (this.ngControl) {
@@ -982,14 +1007,14 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     }
 
     /** @hidden @internal */
-    public ngDoCheck() {
+    public ngDoCheck(): void {
         if (this.data?.length && this.selection.length && !this._value) {
             this._value = this.createDisplayText(this.selection, []);
         }
     }
 
     /** @hidden @internal */
-    public ngOnDestroy() {
+    public ngOnDestroy(): void {
         this.destroy$.next();
         this.destroy$.complete();
         this.comboAPI.clear();
@@ -1005,6 +1030,10 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * ```
      */
     public toggle(): void {
+        if (this.collapsed && this._value.length !== 0) {
+            this.filterValue = '';
+            this.cdr.detectChanges();
+        }
         const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
         this.dropdown.toggle(overlaySettings);
         if (!this.collapsed){
@@ -1021,6 +1050,10 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * ```
      */
     public open(): void {
+        if (this.collapsed && this._value.length !== 0) {
+            this.filterValue = '';
+            this.cdr.detectChanges();
+        }
         const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
         this.dropdown.open(overlaySettings);
         this.setActiveDescendant();
@@ -1068,6 +1101,26 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         return this.selectionService.is_item_selected(this.id, item);
     }
 
+    /** @hidden @internal */
+    public get toggleIcon(): string {
+        if (this.inputGroup.theme === 'material') {
+            return this.dropdown.collapsed
+                ? 'expand_more'
+                : 'expand_less';
+        }
+
+        return this.dropdown.collapsed
+            ? 'arrow_drop_down'
+            : 'arrow_drop_up';
+    }
+
+    /** @hidden @internal */
+    public get clearIcon(): string {
+        return this.inputGroup.theme === 'material'
+            ? 'cancel'
+            : 'clear';
+    }
+
     /** @hidden @internal */
     public addItemToCollection() {
         if (!this.searchValue) {

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

@@ -23,33 +23,35 @@
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
         </ng-container>
         <igx-icon *ngIf="!clearIconTemplate">
-            clear
+            {{ clearIcon }}
         </igx-icon>
     </igx-suffix>
     <igx-suffix class="igx-combo__toggle-button">
         <ng-container *ngIf="toggleIconTemplate">
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
         </ng-container>
         <igx-icon *ngIf="!toggleIconTemplate">
-            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}
+            {{ toggleIcon }}
         </igx-icon>
     </igx-suffix>
 </igx-input-group>
 <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
     [labelledBy]="this.ariaLabelledBy || this.label?.id || this.placeholder || ''"
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
-    <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" theme="material" class="igx-combo__search">
-        <input class="igx-combo-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]="searchPlaceholder"
-            aria-autocomplete="list" role="searchbox" aria-label="search"/>
-        <igx-suffix *ngIf="showSearchCaseIcon">
-            <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"
-                (click)="toggleCaseSensitive()">
-            </igx-icon>
-        </igx-suffix>
-    </igx-input-group>
+    <div class="igx-combo__search">
+        <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" theme="material" >
+            <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]="searchPlaceholder"
+                   aria-autocomplete="list" role="searchbox" aria-label="search"/>
+            <igx-suffix *ngIf="showSearchCaseIcon" (click)="toggleCaseSensitive()">
+                <span [ngClass]="filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'">
+                    <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"></igx-icon>
+                </span>
+            </igx-suffix>
+        </igx-input-group>
+    </div>
     <ng-container *ngTemplateOutlet="headerTemplate">
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"