Merge branch 'master' into dpetev/paging-internal-api-refactor

Author: hanastasov

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,7 +30,7 @@ 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.

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/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'"