Merge branch 'master' into mkirova/row-pinning-sort

Author: ChronosSF

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes for each version of this project will be documented in this
 
 ## 9.1.0
 
+### Themes
+- **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
+
 ### New Features
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -14,6 +17,8 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
+- `IgxCombo`:
+    - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
 
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
@@ -103,10 +108,6 @@ All notable changes for each version of this project will be documented in this
     - `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.
     - `expandRow(rowID)`/`collapseRow(rowID)`/`toggleRow(rowID)` API methods are added for the `igxHierarchicalGrid`. They allow expanding/collapsing a row by its id.
     - `onRowToggle` event is added for the `igxHierarchicalGrid`. It is emitted when the expanded state of a row is changed.
-    - `IgxOverlayService`:
-        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
-    - `IgxToggleDirective`:
-        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
     - `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
     ```html
     <igx-grid #grid1 [data]="remote | async" primaryKey="ProductID"
@@ -166,6 +167,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxDropDown`:
     - `clearSelection` method is added, which can be used to deselect the selected dropdown item
 
+- `IgxToggleDirective`:
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+
+- `IgxOverlayService`:
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+
 - `IgxCircularProgressBar`:
     - added `IgxProgressBarGradientDirective` to allow providing custom circular progress SVG gradients. Providing a custom gradient via a template is as easy as writing:
     ```html
@@ -2487,4 +2494,3 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     - `IgxDraggableDirective` moved inside `../directives/dragdrop/` folder
     - `IgxRippleDirective` moved inside `../directives/ripple/` folder
     - Folder `"./navigation/nav-service"` renamed to `"./navigation/nav.service"`
-

ROADMAP.md

@@ -8,7 +8,7 @@
 2. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
 3. RTL Support across Ignite UI for Angular components [#5958](https://github.com/IgniteUI/igniteui-angular/issues/5958)
 4. Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
-5. Column Selection for IgxGrid [#6638](https://github.com/IgniteUI/igniteui-angular/issues/6638)
+5. Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
 6. Splitter IgxGrid [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
 7. Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
 8. Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
@@ -23,16 +23,19 @@
 
 ## Milestone 10 (Released February 10th, 2020)
 
-1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
-2. **[DONE]** Theming service for Ignite UI for Angular [#5999](https://github.com/IgniteUI/igniteui-angular/issues/5999)
-3. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-4. **[DONE]** igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
-5. RTL Support across Ignite UI for Angular components [#5958](https://github.com/IgniteUI/igniteui-angular/issues/5958)
-6. **[DONE]** Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
-7. **[DONE]** Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
-8. **[DONE]** Angular 9 support [#5998](https://github.com/IgniteUI/igniteui-angular/issues/5998)
-9. **[DONE]** Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
-10. **[DONE]** Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343) 
+1. **[DONE]** Theming service for Ignite UI for Angular [#5999](https://github.com/IgniteUI/igniteui-angular/issues/5999)
+2. **[DONE]** igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
+3. **[DONE]** Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
+4. **[DONE]** Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
+5. **[DONE]** Angular 9 support [#5998](https://github.com/IgniteUI/igniteui-angular/issues/5998)
+6. **[DONE]** Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
+7. **[DONE]** Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343)
+8. **[DONE]** Igx combo select all item [#6342](https://github.com/IgniteUI/igniteui-angular/issues/6342)
+9. **[DONE]** Container instance for igxGrid overlay components [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
+10. **[DONE]** [igx-select] Footer element [#5911](https://github.com/IgniteUI/igniteui-angular/issues/5911)
+11. **[DONE]** Provide the state persistence directive of the igx-grid by default [#5460](https://github.com/IgniteUI/igniteui-angular/issues/5460)
+12. **[DONE]** Directive for custom row drag ghost in the grids [#6081](https://github.com/IgniteUI/igniteui-angular/issues/6081) 
+13. **[DONE]** Provide a way to turn off the built-in filtering and sorting for remote scenarios [#4356](https://github.com/IgniteUI/igniteui-angular/issues/4356)
 
 ## Milestone 9 (Released September 26th, 2019) 
 

projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

@@ -11,10 +11,10 @@
         [igxLabel]="button.label"
         [igxRipple]="button.ripple"
     >
-        <div class="igx-button-group__item-content {{ itemContentCssClass }}">
+        <span class="igx-button-group__item-content {{ itemContentCssClass }}">
             <igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
-            <span *ngIf="button.label">{{button.label}}</span>
-        </div>
+            <span class="igx-button-group__button-text" *ngIf="button.label">{{button.label}}</span>
+        </span>
     </button>
     <ng-content></ng-content>
 </div>

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

@@ -620,7 +620,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * Deselects date(s) (based on the selection type).
      */
     public deselectDate(value?: Date | Date[]) {
-        if (this.selectedDates === null || this.selectedDates.length === 0) {
+        if (!this.selectedDates || this.selectedDates.length === 0) {
             return;
         }
 

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

@@ -314,6 +314,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 |  `type`                  | Combo style. - "line", "box", "border", "search"                                        | string                      |
 |  `valid`                 | gets if control is valid, when used in a form     | boolean                     |
 |  `overlaySettings`       | gets/sets the custom overlay settings that control how the drop-down list displays | OverlaySettings         |
+|  `autoFocusSearch`     | controls whether the search input should be focused when the combo is opened | boolean |
 
 ### Getters
 | Name                     | Description                                       | Type                        |

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

@@ -149,6 +149,24 @@ describe('igxCombo', () => {
             expect(combo.dropdown.toggle).toHaveBeenCalledTimes(1);
             expect(combo.collapsed).toBe(false);
         });
+        it(`should not focus search input when property autoFocusSearch=false`, () => {
+            combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
+            const dropdownContainer = { nativeElement: { focus: () => {}}};
+            combo['dropdownContainer'] = dropdownContainer;
+            spyOn(combo, 'focusSearchInput');
+
+            combo.autoFocusSearch = false;
+            combo.handleOpened();
+            expect(combo.focusSearchInput).toHaveBeenCalledTimes(0);
+
+            combo.autoFocusSearch = true;
+            combo.handleOpened();
+            expect(combo.focusSearchInput).toHaveBeenCalledTimes(1);
+
+            combo.autoFocusSearch = false;
+            combo.handleOpened();
+            expect(combo.focusSearchInput).toHaveBeenCalledTimes(1);
+        });
         it('should call dropdown toggle with correct overlaySettings', () => {
             combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
             const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['toggle']);
@@ -788,6 +806,19 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             expect(combo.searchInput).toBeFalsy();
         });
+        it('should focus search input', fakeAsync(() => {
+            combo.toggle();
+            tick();
+            fixture.detectChanges();
+            expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
+        }));
+        it('should not focus search input, when autoFocusSearch=false', fakeAsync(() => {
+            combo.autoFocusSearch = false;
+            combo.toggle();
+            tick();
+            fixture.detectChanges();
+            expect(document.activeElement).not.toEqual(combo.searchInput.nativeElement);
+        }));
         it('should properly initialize templates', () => {
             expect(combo).toBeDefined();
             expect(combo.footerTemplate).toBeDefined();
@@ -983,7 +1014,7 @@ describe('igxCombo', () => {
 
             productIndex = 485;
             combo.virtualScrollContainer.scrollTo(productIndex);
-            await wait();
+            await wait(30);
             fixture.detectChanges();
             verifyComboData();
             expect(combo.virtualizationState.startIndex + combo.virtualizationState.chunkSize - 1)

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

@@ -813,6 +813,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     @Input()
     public type = 'box';
 
+    /**
+     * An @Input property that controls whether the combo's search box
+     * should be focused after the `onOpened` event is called
+     * When `false`, the combo's list item container will be focused instead
+     */
+    @Input()
+    public autoFocusSearch = true;
+
     /**
      * Gets if control is valid, when used in a form
      *
@@ -1480,7 +1488,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public handleOpened() {
         this.triggerCheck();
-        this.focusSearchInput(true);
+
+        // Disabling focus of the search input should happen only when drop down opens.
+        // During keyboard navigation input should receive focus, even the autoFocusSearch is disabled.
+        // That is why in such cases focusing of the dropdownContainer happens outside focusSearchInput method.
+        if (this.autoFocusSearch) {
+            this.focusSearchInput(true);
+        } else {
+            this.dropdownContainer.nativeElement.focus();
+        }
         this.onOpened.emit();
     }
 

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -350,7 +350,7 @@
 ///   // otherwise, it will return the value for key 'icon-color' in the '$avatar-theme';
 /// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name.
 @function --var($map, $key, $fallback: null) {
-    $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, true);
+    $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, false);
 
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss

@@ -1,4 +1,4 @@
-%display-container {
+%display-container {
     display: inherit;
     position: relative;
     width: 100%;

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,7 +12,6 @@
 
     %vhelper--vertical {
         position: absolute;
-        width: 18px;
         top: 0;
         #{$right}: 0;
     }