Merge branch '10.1.x' into header-title

kdinev · web-flow · commit 64082975d834 · 2020-08-18T14:35:36.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
@@ -112,6 +112,7 @@
         display: flex;
         flex-flow: column nowrap;
         overflow-y: auto;
+        outline-style: none;
     }
 
     %column-actions-item {
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html
@@ -11,15 +11,15 @@ <h4 [attr.id]='titleID' class="igx-column-actions__header-title" *ngIf="title">{
     </igx-input-group>
 </div>
 
-<div class="igx-column-actions__columns"
+<div class="igx-column-actions__columns" tabindex="0"
     [style.max-height]="columnsAreaMaxHeight">
     <igx-checkbox
         *ngFor="let column of columns
             | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger
             | filterActionColumns:filterCriteria:pipeTrigger
             | sortActionColumns:columnDisplayOrder:pipeTrigger;"
         class="igx-column-actions__columns-item"
-    
+
         (change)="toggleColumn($event, column)"
         [checked]="actionsDirective.columnChecked(column)"
         [style.margin-left.px]="column.level * indentation">
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html
@@ -31,7 +31,7 @@
                 <span>{{ grid.hiddenColumnsText }}</span>
             </div>
         </button>
-        <igx-drop-down #columnHidingDropdown>
+        <igx-drop-down #columnHidingDropdown (onClosing)="onClosingColumnHiding($event)">
             <igx-column-actions
                 igxColumnHiding
                 [columns]="grid.columns"
@@ -52,7 +52,7 @@
                 <span></span>
             </div>
         </button>
-        <igx-drop-down #columnPinningDropdown>
+        <igx-drop-down #columnPinningDropdown (onClosing)="onClosingColumnPinning($event)">
             <igx-column-actions
                 igxColumnPinning
                 [columns]="grid.columns"
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
@@ -30,7 +30,7 @@ import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignme
 import { ConnectedPositioningStrategy } from '../../services/overlay/position';
 import { GridType } from '../common/grid.interface';
 import { IgxGridIconService } from '../common/grid-icon.service';
-import { PINNING_ICONS_FONT_SET, PINNING_ICONS} from '../pinning/pinning-icons';
+import { PINNING_ICONS_FONT_SET, PINNING_ICONS } from '../pinning/pinning-icons';
 import { GridIconsFeature } from '../common/enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
 import { IgxColumnHidingDirective } from '../column-actions/column-hiding.directive';
@@ -238,7 +238,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         @Optional() public csvExporter: IgxCsvExporterService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
         private iconService: IgxGridIconService) {
-            super(_displayDensityOptions);
+        super(_displayDensityOptions);
     }
 
     private _positionSettings: PositionSettings = {
@@ -407,4 +407,28 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
     ngAfterViewInit() {
         this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);
     }
+
+    /**
+     * @hidden @internal
+     */
+    public onClosingColumnHiding(args) {
+        const activeElem = document.activeElement;
+
+        if (!args.event && activeElem !== this.grid.nativeElement &&
+            !this.columnHidingButton.nativeElement.contains(activeElem)) {
+            args.cancel = true;
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public onClosingColumnPinning(args) {
+        const activeElem = document.activeElement;
+
+        if (!args.event && activeElem !== this.grid.nativeElement &&
+            !this.columnPinningButton.nativeElement.contains(activeElem)) {
+            args.cancel = true;
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts
@@ -15,8 +15,8 @@ const THUMB_TO_CLASS = '.igx-slider__thumb-to';
 const THUMB_FROM_CLASS = '.igx-slider__thumb-from';
 const SLIDER_TICKS_ELEMENT = '.igx-slider__ticks';
 const SLIDER_TICKS_TOP_ELEMENT = '.igx-slider__ticks--top';
-const SLIDER_PRIMARY_GROUP_TICKS_CLASS = '.igx-slider__ticks-group--tall';
 const SLIDER_PRIMARY_GROUP_TICKS_CLASS_NAME = 'igx-slider__ticks-group--tall';
+const SLIDER_PRIMARY_GROUP_TICKS_CLASS = `.${SLIDER_PRIMARY_GROUP_TICKS_CLASS_NAME}`;
 const SLIDER_GROUP_TICKS_CLASS = '.igx-slider__ticks-group';
 const SLIDER_TICK_LABELS_CLASS = '.igx-slider__ticks-label';
 const SLIDER_TICK_LABELS_HIDDEN_CLASS = 'igx-slider__tick-label--hidden';
@@ -1427,6 +1427,24 @@ describe('IgxSlider', () => {
             expect(secondaryTicks.length).toEqual((expectedPrimary - 1) * expectedSecondary);
         });
 
+        it('check primary ticks length (16px)', () => {
+            const ticks = fixture.debugElement.query(By.css(SLIDER_TICKS_ELEMENT));
+            fixture.componentInstance.primaryTicks = 5;
+            fixture.detectChanges();
+
+            const primaryTick = ticks.nativeElement.querySelectorAll(SLIDER_PRIMARY_GROUP_TICKS_CLASS)[0];
+            expect(primaryTick.firstElementChild.getBoundingClientRect().height).toEqual(16);
+        });
+
+        it('check secondary ticks length (8px)', () => {
+            const ticks = fixture.debugElement.query(By.css(SLIDER_TICKS_ELEMENT));
+            fixture.componentInstance.secondaryTicks = 5;
+            fixture.detectChanges();
+
+            const primaryTick = ticks.nativeElement.querySelectorAll(SLIDER_GROUP_TICKS_CLASS)[0];
+            expect(primaryTick.firstElementChild.getBoundingClientRect().height).toEqual(8);
+        });
+
         it('hide/show top and bottom ticks', () => {
             let ticks = fixture.debugElement.nativeElement.querySelector(SLIDER_TICKS_ELEMENT);
             let ticksTop = fixture.debugElement.nativeElement.querySelector(SLIDER_TICKS_TOP_ELEMENT);
@@ -1485,6 +1503,7 @@ describe('IgxSlider', () => {
             verifySecondaryTicsLabelsAreHidden(ticks, false);
         });
 
+
         it('show/hide secondary tick labels', () => {
             const ticks = fixture.debugElement.query(By.css(SLIDER_TICKS_ELEMENT));
             const primaryTicks = 5;
@@ -1559,6 +1578,25 @@ describe('IgxSlider', () => {
             expect(labelsTopBottom).not.toBeNull();
             expect(labelsBottomTop).toBeNull();
         });
+
+        it('ticks change should reflect dynamically when slider labels are changed', () => {
+            const ticks = fixture.debugElement.query(By.css(SLIDER_TICKS_ELEMENT));
+            let labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+            slider.labels = labels;
+            fixture.detectChanges();
+
+            let primaryTicks = ticks.nativeElement.querySelectorAll(SLIDER_PRIMARY_GROUP_TICKS_CLASS);
+            expect(primaryTicks.length).toEqual(labels.length);
+
+            labels = labels.splice(0, labels.length - 2);
+            slider.labels = labels;
+            fixture.detectChanges();
+
+            primaryTicks = ticks.nativeElement.querySelectorAll(SLIDER_PRIMARY_GROUP_TICKS_CLASS);
+
+            expect(primaryTicks.length).toEqual(labels.length);
+
+        });
     });
 
     describe('EditorProvider', () => {
@@ -1677,7 +1715,8 @@ export class SliderRtlComponent {
     `
 })
 export class SliderTicksComponent {
-    @ViewChild(IgxSliderComponent)
+
+    @ViewChild(IgxSliderComponent, {static: true})
     public slider: IgxSliderComponent;
 
     public primaryTicks = 0;

Original file line number	Diff line number	Diff line change
`@@ -112,6 +112,7 @@`
`112`	`112`	`display: flex;`
`113`	`113`	`flex-flow: column nowrap;`
`114`	`114`	`overflow-y: auto;`
	`115`	`+ outline-style: none;`
`115`	`116`	`}`
`116`	`117`
`117`	`118`	`%column-actions-item {`