Merge branch 'master' into rkaraivanov/issue-7089

Author: kdinev

CHANGELOG.md

@@ -25,6 +25,8 @@ All notable changes for each version of this project will be documented in this
     - 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`. 
 

README.md

@@ -41,9 +41,9 @@ There are many ways in which you can [participate](https://github.com/IgniteUI/i
 
 ## Browser Support
 
-![chrome_48x48](https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png) | ![firefox_48x48](https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png) | ![edge_48x48](https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png) | ![opera_48x48](https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png) | ![safari_48x48](https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png) | ![ie_48x48](https://user-images.githubusercontent.com/2188411/168135931-ce5259bb-5b26-4003-8b89-dbee3d4f247c.png)
---- | --- | --- | --- | --- |:---:|
-Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11* |
+| ![chrome][] | ![firefox][] | ![edge][] | ![opera][] | ![safari][] | ![ie][] |
+|:-----------:|:------------:|:---------:|:----------:|:-----------:|:-------:|
+|  Latest ✔   |   Latest ✔   | Latest ✔  |  Latest ✔  |  Latest ✔   |   11*   |
 
 \* *IE 11 is only supported in Ignite UI for Angular < 13.0.0*
 
@@ -293,4 +293,14 @@ For information on that license, please go to our website [https://www.infragist
 
 
 
+<!-- browser logos -->
+[chrome]: https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png "Google Chrome"
+[firefox]: https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png "Mozilla Firefox"
+[edge]: https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png "Microsoft Edge"
+[opera]: https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png "Opera"
+[safari]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png "Safari"
+[ie]: https://user-images.githubusercontent.com/2188411/168135931-ce5259bb-5b26-4003-8b89-dbee3d4f247c.png "Internet Explorer"
+
+
+
 

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

@@ -8,7 +8,6 @@ import {
     EventEmitter,
     forwardRef,
     HostBinding,
-    HostListener,
     Inject,
     InjectionToken,
     Injector,
@@ -951,15 +950,6 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         super(_displayDensityOptions);
     }
 
-    /** @hidden @internal */
-    @HostListener('keydown.ArrowDown', ['$event'])
-    @HostListener('keydown.Alt.ArrowDown', ['$event'])
-    public onArrowDown(event: Event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.open();
-    }
-
     /** @hidden @internal */
     public ngOnInit() {
         this.ngControl = this._injector.get<NgControl>(NgControl, null);
@@ -1322,6 +1312,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     public abstract set filteredData(val: any[] | null);
 
     public abstract handleOpened();
+    public abstract onArrowDown(event: Event);
     public abstract focusSearchInput(opening?: boolean);
 
     public abstract select(newItem: any): void;

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
     AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgModule, OnInit, OnDestroy,
-    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter
+    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener
 } from '@angular/core';
 import {
     IgxComboItemDirective,
@@ -202,6 +202,15 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         this.comboAPI.register(this);
     }
 
+    /** @hidden @internal */
+    @HostListener('keydown.ArrowDown', ['$event'])
+    @HostListener('keydown.Alt.ArrowDown', ['$event'])
+    public onArrowDown(event: Event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
+    }
+
     /** @hidden @internal */
     public get displaySearchInput(): boolean {
         return this.filteringOptions.filterable || this.allowCustomValues;

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

@@ -108,7 +108,7 @@
         color: var-get($theme, 'text-color');
         line-height: 1;
         background: var-get($theme, 'background-color');
-        border-radius: var-get($theme, 'border-radius');
+        border-radius: 50%;
         box-shadow: var-get($theme, 'shadow');
         border-width: var-get($theme, 'border-width');
         border-color: var-get($theme, 'border-color');
@@ -128,7 +128,7 @@
     }
 
     %igx-badge--square {
-        border-radius: 0;
+        border-radius: var-get($theme, 'border-radius');
     }
 
     %igx-badge-value {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_badge.scss

@@ -15,7 +15,7 @@
 /// @prop {Number} border-width [0] - The border width of the badge component.
 /// @prop {Map} background-color [color: ('primary', 500)] - The background color used.
 /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
-/// @prop {Number} border-radius [11px] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
+/// @prop {Number} border-radius [0] - The border radius used for badge. Can be a fraction between 0 and 1, pixels, or percent.
 /// @requires {Map} $default-elevation-badge
 $light-badge: extend(
     $default-elevation-badge,
@@ -40,7 +40,7 @@ $light-badge: extend(
 
         border-width: 0,
 
-        border-radius: rem(11px)
+        border-radius: 0
     )
 );
 

projects/igniteui-angular/src/lib/grids/public_api.ts

@@ -38,3 +38,4 @@ export * from './summaries/summary.module';
 export * from './grouping/tree-grid-group-by-area.component';
 export * from './grouping/grid-group-by-area.component';
 export * from './grouping/group-by-area.directive';
+export { DropPosition } from './moving/moving.service';

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -1039,13 +1039,26 @@ describe('IgxSimpleCombo', () => {
             expect(combo.comboInput.value).toEqual('con');
             fixture.detectChanges();
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement);
-            expect(document.activeElement).toHaveClass('igx-combo__content');
-
             UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
             expect(input.nativeElement.value).toEqual('Wisconsin');
         });
 
+        it('should navigate to next filtered item on ArrowDown', () => {
+            combo.allowCustomValues = true;
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            UIInteractions.simulateTyping('con', input);
+            expect(combo.comboInput.value).toEqual('con');
+            fixture.detectChanges();
+
+            // filtered data -> Wisconsin, Connecticut
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement);
+            UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+            expect(input.nativeElement.value).toEqual('Connecticut');
+        });
+
         it('should clear selection when all text in input is removed by Backspace and Delete', () => {
             combo.select('Wisconsin');
             fixture.detectChanges();

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -140,7 +140,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.open();
         } else {
             if (this.virtDir.igxForOf.length > 0 && !this.selectedItem) {
-                this.dropdown.navigateFirst();
+                this.dropdown.navigateNext();
                 this.dropdownContainer.nativeElement.focus();
             } else if (this.allowCustomValues) {
                 this.addItem?.element.nativeElement.focus();