Merge branch 'master' into bpenkov/fix-7263

Author: Lipata

CHANGELOG.md

@@ -154,8 +154,13 @@ 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.
+
 
 ### 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/core/styles/components/icon/_icon-theme.scss

@@ -55,8 +55,6 @@
 @mixin igx-icon($theme) {
     @include igx-root-css-vars($theme);
 
-    // @debug $theme;
-
     $igx-icon-font-size: --var($theme, 'size');
 
     %igx-icon-display {

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

@@ -7,7 +7,7 @@
 ///
 /// Generates a light action-strip schema.
 /// @type {Map}
-/// @prop {Color} $color [currentColor] - The color used for the actions icons.
+/// @prop {Color} $color ["'currentColor'"] - The color used for the actions icons.
 /// @prop {Map} background [igx-color: ('grays', 100] - The color used for the action strip component content background.
 /// @prop {Map} actions-background [igx-color: ('grays', 200), hexrgba: #fff, rgba: .9] - The color used for actions background.
 /// @prop {Map} delete-action [igx-color: ('error')] - The color used for the delete icon in action strip component.
@@ -28,7 +28,7 @@ $_light-action-strip: extend(
             igx-color: ('grays', 100)
         ),
 
-        color: currentColor,
+        color: "'currentColor'",
 
         delete-action: (
             igx-color: ('error')

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

@@ -16,9 +16,9 @@
 /// @prop {Map} flat-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a flat button.
 /// @prop {Map} flat-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of a flat button.
 /// @prop {Map} flat-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of a flat button.
-/// @prop {Color} flat-icon-color [currentColor] - The color of a flat button icon.
-/// @prop {Color} flat-hover-icon-color [currentColor] - The hover color of a flat button icon.
-/// @prop {Color} flat-focus-icon-color [currentColor] - The focus color of a flat button icon.
+/// @prop {Color} flat-icon-color ["'currentColor'"] - The color of a flat button icon.
+/// @prop {Color} flat-hover-icon-color ["'currentColor'"] - The hover color of a flat button icon.
+/// @prop {Color} flat-focus-icon-color ["'currentColor'"] - The focus color of a flat button icon.
 ///
 /// @prop {Color} outlined-background [transparent] - The background color of an outlined button
 /// @prop {Map} outlined-text-color [igx-color: ('secondary', 500)] - The idle text color of an outlined button.
@@ -28,19 +28,19 @@
 /// @prop {Map} outlined-hover-text-color [igx-color: ('secondary', 500)] - The hover text color of an outlined button.
 /// @prop {Map} outlined-focus-background [igx-color: ('secondary', 400), rgba: .12] - The focus background color of an outlined button.
 /// @prop {Map} outlined-focus-text-color [igx-color: ('secondary', 500)] - The focus text color of an outlined button.
-/// @prop {Color} outlined-icon-color [currentColor] - The color of a outlined button icon.
-/// @prop {Color} outlined-hover-icon-color [currentColor] - The hover color of a outlined button icon.
-/// @prop {Color} outlined-focus-icon-color [currentColor] - The focus color of a outlined button icon.
+/// @prop {Color} outlined-icon-color ["'currentColor'"] - The color of a outlined button icon.
+/// @prop {Color} outlined-hover-icon-color ["'currentColor'"] - The hover color of a outlined button icon.
+/// @prop {Color} outlined-focus-icon-color ["'currentColor'"] - The focus color of a outlined button icon.
 ///
 /// @prop {Map} raised-background [igx-color: ('secondary', 500)] - The background color of an raised button.
 /// @prop {Map} raised-text-color [igx-contrast-color: ('secondary', 500)] - The idle text color of a raised button.
 /// @prop {Map} raised-hover-background [igx-color: ('secondary', 300)] - The hover background of a raised button.
 /// @prop {Map} raised-hover-text-color [igx-contrast-color: ('secondary', 300)] - The hover text color of a raised button.
 /// @prop {Map} raised-focus-background [igx-color: ('secondary', 300)] - The focus background color of a raised button.
 /// @prop {Map} raised-focus-text-color [igx-contrast-color: ('secondary', 300)] - The focus text color of a raised button.
-/// @prop {Color} raised-icon-color [currentColor] - The color of a raised button icon.
-/// @prop {Color} raised-hover-icon-color [currentColor] - The hover color of a raised button icon.
-/// @prop {Color} raised-focus-icon-color [currentColor] - The focus color of a raised button icon.
+/// @prop {Color} raised-icon-color ["'currentColor'"] - The color of a raised button icon.
+/// @prop {Color} raised-hover-icon-color ["'currentColor'"] - The hover color of a raised button icon.
+/// @prop {Color} raised-focus-icon-color ["'currentColor'"] - The focus color of a raised button icon.
 ///
 /// @prop {Map} fab-background [igx-color: ('secondary', 500)] - The background color of a floating action button.
 /// @prop {Map} fab-text-color [igx-contrast-color: ('secondary', 500)] - The text color of a floating action button.
@@ -86,17 +86,17 @@ $_light-button: extend(
             igx-color: ('secondary', 500)
         ),
 
-        flat-icon-color: currentColor,
-        flat-hover-icon-color: currentColor,
-        flat-focus-icon-color: currentColor,
+        flat-icon-color: "'currentColor'",
+        flat-hover-icon-color: "'currentColor'",
+        flat-focus-icon-color: "'currentColor'",
 
-        raised-icon-color: currentColor,
-        raised-hover-icon-color: currentColor,
-        raised-focus-icon-color: currentColor,
+        raised-icon-color: "'currentColor'",
+        raised-hover-icon-color: "'currentColor'",
+        raised-focus-icon-color: "'currentColor'",
 
-        outlined-icon-color: currentColor,
-        outlined-hover-icon-color: currentColor,
-        outlined-focus-icon-color: currentColor,
+        outlined-icon-color: "'currentColor'",
+        outlined-hover-icon-color: "'currentColor'",
+        outlined-focus-icon-color: "'currentColor'",
 
         flat-hover-background: (
             igx-color: ('secondary', 500),

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

@@ -30,7 +30,7 @@
 /// @prop {Map} focus-selected-background [igx-color: ('grays', 400)] - The selected chip focus background color.
 /// @prop {Color} focus-selected-border-color [transparent] - The selected chip focus border color.
 /// @prop {Number} ghost-elevation [8] - The elevation level for the chip's ghost (dragging mode). Between 0-24.
-/// @prop {color} remove-icon-color [currentColor] - The remove icon color for the chip.
+/// @prop {color} remove-icon-color ["'currentColor'"] - The remove icon color for the chip.
 /// @prop {Map} remove-icon-color-focus [igx-color: ('error')] - The remove icon color on focus for the chip.
 /// @prop {color} $focus-border-color [transparent] - The chip focus border color.
 ///
@@ -44,7 +44,7 @@ $_light-chip: extend(
     (
         variant:'material',
 
-        remove-icon-color: currentColor,
+        remove-icon-color: "'currentColor'",
 
         remove-icon-color-focus: (
             igx-color: ('error')