Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular …

…into state-add-hiergrid

.github/workflows/stale.yml

@@ -0,0 +1,19 @@
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+  - cron: "0 0 * * *"
+
+jobs:
+  stale:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/stale@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'There has been no recent activity and this issue has been marked inactive.'
+        stale-pr-message: 'There has been no recent activity and this PR has been marked inactive.'
+        stale-issue-label: 'status: inactive'
+        stale-pr-label: 'status: inactive'

CHANGELOG.md

@@ -154,8 +154,16 @@ All notable changes for each version of this project will be documented in this
     - Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
 
 - `IgxDrag`
-    - New `igxDragIgnore` directive that allows children of the `igxDrag` element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
-    - New `dragDirection` input that can specify only one direction of dragging or both.
+    - Added `igxDragIgnore` directive that allows children of the `igxDrag` element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
+    - Added `dragDirection` input that can specify only one direction of dragging or both.
+
+- `IgxChip`
+    - Added support for tabIndex attribute applied to the main chip element.
+    - Added `tabIndex` input so it can support change detection as well.
+
+
+- `IgxHighlightDirective`
+    - New `metadata` property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
 
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.

LICENSE

@@ -5,6 +5,6 @@ This product is free to use for non-commercial applications, like non-profits an
 To acquire a license for commercial usage, 
 please register for a trial and acquire a license at https://Infragistics.com/Angular.  
 
-© Copyright 2018 INFRAGISTICS. All Rights Reserved. 
+© Copyright 2020 INFRAGISTICS. All Rights Reserved. 
 The Infragistics Ultimate license & copyright applies to this distribution. 
 For information on that license, please go to our website https://www.infragistics.com/legal/license.

azure-pipelines.yml

@@ -2,7 +2,7 @@ pool:
   vmImage: 'Ubuntu 16.04'
 
 steps:
-- script: npm install
+- script: npm ci
   displayName: 'Install dependencies'
   env:
     AZURE_PIPELINES: "true"

projects/igniteui-angular/src/lib/chips/chip.component.html

@@ -1,5 +1,5 @@
 <div #chipArea class="igx-chip__item"
-    [attr.tabindex]="chipTabindex"
+    [attr.tabIndex]="tabIndex"
     (keydown)="onChipKeyDown($event)"
     [igxDrag]="{chip: this}"
     [style.visibility]='hideBaseElement ? "hidden" : "visible"'
@@ -27,7 +27,7 @@
     <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
 
     <div class="igx-chip__remove" *ngIf="removable"
-        tabindex="0"
+        [attr.tabIndex]="tabIndex"
         (keydown)="onRemoveBtnKeyDown($event)"
         (pointerdown)="onRemoveMouseDown($event)"
         (mousedown)="onRemoveMouseDown($event)"

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -90,6 +90,25 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Input()
     public id = `igx-chip-${CHIP_ID++}`;
 
+    /**
+     * An @Input property that sets the value of `tabindex` attribute. If not provided it will use the element's tabindex if set.
+     * @example
+     * ```html
+     * <igx-chip [id]="'igx-chip-1'" [tabIndex]="1"></igx-chip>
+     * ```
+     */
+    @Input()
+    public set tabIndex(value: number) {
+        this._tabIndex = value;
+    }
+
+    public get tabIndex() {
+        if (this._tabIndex !== null) {
+            return this._tabIndex;
+        }
+        return !this.disabled ? 0 : null;
+    }
+
     /**
      * An @Input property that stores data related to the chip.
      * @example
@@ -353,6 +372,13 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Output()
     public onDragEnter = new EventEmitter<IChipEnterDragAreaEventArgs>();
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.tabIndex')
+    public hostTabIndex = null;
+
     /**
      * @hidden
      * @internal
@@ -433,16 +459,13 @@ export class IgxChipComponent extends DisplayDensityBase {
         return this.getComponentDensityClass('igx-chip__ghost');
     }
 
-    public get chipTabindex() {
-        return !this.disabled ? 0 : '';
-    }
-
     /**
      * @hidden
      * @internal
      */
     public hideBaseElement = false;
 
+    protected _tabIndex = null;
     protected _selected = false;
     protected _selectedItemClass = 'igx-chip__item--selected';
     protected _movedWhileRemoving = false;

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -27,6 +27,21 @@ import { ControlsFunction } from '../test-utils/controls-functions.spec';
                 <span #label [class]="'igx-chip__text'">{{chip.text}}</span>
                 <igx-icon igxPrefix fontSet="material">drag_indicator</igx-icon>
             </igx-chip>
+            <igx-chip #chipElem tabIndex="1" [id]="tabChipAttr">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem tabIndex="2" [disabled]="true" [id]="tabChipDisabled">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem [tabIndex]="3" [removable]="true" [id]="tabChipInput" >
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem tabIndex="4" [tabIndex]="1" [id]="tabChipBoth">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
+            <igx-chip #chipElem tabIndex="5" [tabIndex]="1" [disabled]="true" [id]="tabChipAll">
+                <span #label [class]="'igx-chip__text'">Tab Chip</span>
+            </igx-chip>
         </igx-chips-area>
     `
 })
@@ -114,7 +129,7 @@ describe('IgxChip', () => {
 
         it('should render chip area and chips inside it', () => {
             expect(chipArea.length).toEqual(1);
-            expect(chipArea[0].nativeElement.children.length).toEqual(4);
+            expect(chipArea[0].nativeElement.children.length).toEqual(9);
             expect(chipArea[0].nativeElement.children[0].tagName).toEqual('IGX-CHIP');
         });
 
@@ -169,7 +184,7 @@ describe('IgxChip', () => {
             // Assert default css class is applied
             const comfortableComponents = fix.debugElement.queryAll(By.css(CHIP_CLASS));
 
-            expect(comfortableComponents.length).toEqual(2);
+            expect(comfortableComponents.length).toEqual(7);
             expect(comfortableComponents[0].nativeElement).toBe(firstComponent.nativeElement);
             expect(comfortableComponents[1].nativeElement).toBe(secondComponent.nativeElement);
         });
@@ -212,6 +227,35 @@ describe('IgxChip', () => {
             expect(chipAreaElem.nativeElement.style.backgroundColor).toEqual(chipColor);
             expect(firstComponent.componentInstance.color).toEqual(chipColor);
         });
+
+        it('should apply correct tabIndex to the chip area only when tabIndex is set as property of the chip and chip is disabled', () => {
+            const firstTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[4];
+            expect(firstTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(firstTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('1');
+
+            // Chip is disabled, but attribute tabindex has bigger priority.
+            const secondTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[5];
+            expect(secondTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(secondTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('2');
+        });
+
+        it('should apply correct tab indexes when tabIndex and removeTabIndex are set as inputs', () => {
+            const thirdTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[6];
+            const deleteBtn = ControlsFunction.getChipRemoveButton(thirdTabChip.componentInstance.chipArea.nativeElement);
+            expect(thirdTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(thirdTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('3');
+            expect(deleteBtn.getAttribute('tabindex')).toEqual('3');
+
+            // tabIndex attribute has higher priority than tabIndex.
+            const fourthTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[7];
+            expect(fourthTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(fourthTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('1');
+
+            // tabIndex attribute has higher priority than tabIndex input and chip being disabled.
+            const fifthTabChip = fix.debugElement.queryAll(By.directive(IgxChipComponent))[8];
+            expect(fifthTabChip.nativeElement.getAttribute('tabindex')).toBeFalsy();
+            expect(fifthTabChip.componentInstance.chipArea.nativeElement.getAttribute('tabindex')).toEqual('1');
+        });
     });
 
     describe('Interactions Tests: ', () => {
@@ -241,30 +285,30 @@ describe('IgxChip', () => {
         });
 
         it('should delete chip when space button is pressed on delete button', () => {
-            HelperTestFunctions.verifyChipsCount(fix, 4);
+            HelperTestFunctions.verifyChipsCount(fix, 9);
             const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
             const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
             // Removes chip with id City, because country chip is unremovable
             UIInteractions.triggerKeyDownEvtUponElem(' ', deleteButtonElement, true);
             fix.detectChanges();
 
-            HelperTestFunctions.verifyChipsCount(fix, 3);
+            HelperTestFunctions.verifyChipsCount(fix, 8);
 
             const chipComponentsIds = fix.componentInstance.chipList.map(c => c.id);
             expect(chipComponentsIds.length).toEqual(3);
             expect(chipComponentsIds).not.toContain('City');
         });
 
         it('should delete chip when enter button is pressed on delete button', () => {
-            HelperTestFunctions.verifyChipsCount(fix, 4);
+            HelperTestFunctions.verifyChipsCount(fix, 9);
 
             const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
             const deleteButtonElement = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
             // Removes chip with id City, because country chip is unremovable
             UIInteractions.triggerKeyDownEvtUponElem('Enter', deleteButtonElement, true);
             fix.detectChanges();
 
-            HelperTestFunctions.verifyChipsCount(fix, 3);
+            HelperTestFunctions.verifyChipsCount(fix, 8);
 
             const chipComponentsIds = fix.componentInstance.chipList.map(c => c.id);
             expect(chipComponentsIds.length).toEqual(3);

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

@@ -1216,21 +1216,19 @@ describe('igxCombo', () => {
                 fixture.detectChanges();
                 let items = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
                 let lastItem = items[items.length - 1].componentInstance;
-                let lastItemIndex = lastItem.index;
                 expect(lastItem).toBeDefined();
                 lastItem.clicked(mockClick);
                 await wait(30);
                 fixture.detectChanges();
-                expect(dropdown.focusedItem.index).toEqual(lastItemIndex);
+                expect(dropdown.focusedItem).toEqual(lastItem);
                 dropdown.navigateItem(-1);
                 await wait(30);
                 fixture.detectChanges();
                 expect(virtualMockDOWN).toHaveBeenCalledTimes(0);
-                lastItemIndex = lastItem.index;
                 lastItem.clicked(mockClick);
                 await wait(30);
                 fixture.detectChanges();
-                expect(dropdown.focusedItem.index).toEqual(lastItemIndex);
+                expect(dropdown.focusedItem).toEqual(lastItem);
                 dropdown.navigateNext();
                 await wait(30);
                 fixture.detectChanges();

projects/igniteui-angular/src/lib/core/styles/components/card/_card-component.scss

@@ -67,10 +67,6 @@
 
 @include b(igx-card-content) {
     @extend %igx-card-content !optional;
-
-    @include e(text) {
-        @extend %igx-card-content-text !optional;
-    }
 }
 
 @include b(igx-card-actions) {

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -123,43 +123,14 @@
 
     $variant: map-get($theme, 'variant');
     $not-material-theme: $variant != 'material';
-    $bootstrap-theme: $variant == 'bootstrap';
-
-    // Bootstrap card spacing
-    // if you need to change the spacing for the bootstrap card, please, change only $bs-spacing-val.
-    // All the margin will automatically calculate accordingly in order to keep the right proportion.
-    $bs-spacing-val: rem(20px);
-    $bs-margin-media: $bs-spacing-val;
-    $bs-margin-heading: rem(12px);
-    $bs-margin-heading-difference: calc(#{$bs-spacing-val} - #{$bs-margin-heading});
-    $bs-margin-content: rem(16px);
-    $bs-margin-actions: $bs-spacing-val;
-
-    $card-heading-padding: map-get((
-        material: rem(16px),
-        fluent: rem(16px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
-
-    $card-heading-compact-padding: map-get((
-        material: rem(16px, 16px),
-        fluent: rem(16px, 16px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
-
-    $card-content-padding: map-get((
-        material: rem(14px),
-        fluent: rem(14px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
-
-    $card-actions-padding: map-get((
-        material: rem(8px),
-        fluent: rem(8px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
+
+    $card-heading-padding: rem(16px);
+    $card-heading-compact-padding: rem(16px, 16px);
+    $card-content-padding: rem(14px);
+    $card-actions-padding: rem(8px);
 
     $card-tgroup-margin: 0 em(16px);
+
     $card-transitions: box-shadow .3s cubic-bezier(.25, .8, .25, 1);
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
@@ -204,21 +175,9 @@
         width: 100%;
         padding: $card-heading-padding;
         color: --var($theme, 'header-text-color');
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-heading;
-
-            &:first-child {
-                padding-top: $bs-spacing-val;
-            }
-
-            &:last-child {
-                margin-bottom: calc(#{$bs-margin-heading-difference} + #{$bs-margin-heading});
-            }
-        }
 
         &:empty {
             display: block;
-            min-height: $bs-spacing-val;
             padding: 0;
         }
     }
@@ -277,31 +236,12 @@
         flex: 1 1 auto;
         padding: $card-content-padding;
         color: --var($theme, 'content-text-color');
-
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-content;
-
-            &:first-child {
-                padding-top: $bs-spacing-val;
-            }
-
-            &:last-child {
-                margin-bottom: calc(#{$bs-margin-heading-difference} + #{$bs-margin-heading});
-            }
-        }
     }
 
     %igx-card-media {
         display: block;
         overflow: hidden;
         line-height: 0;
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-media;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
 
         > * {
             width: 100%;
@@ -323,13 +263,6 @@
         flex: 0 1 auto;
         align-items: center;
         padding: $card-actions-padding;
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-actions;
-
-            &:first-child {
-                padding-top: $bs-spacing-val;
-            }
-        }
 
         [igxButton] ~ [igxButton] {
             margin-#{$left}: rem(8px);