Skip to content

Commit b18c946

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into mkirova/fix-5102-master
2 parents 7341086 + b36197b commit b18c946

File tree

59 files changed

+3077
-797
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+3077
-797
lines changed

‎CHANGELOG.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 8.1.0
6+
7+
### New Features
8+
- `IgxBottomNav` now supports an `igx-tab` declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered.
9+
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
10+
- You are allowed to customize tab items with labels, icons and even templates.
11+
- `IgxTabs` now supports an `igx-tab-item` declaration mode. When in this mode, groups declarations are not accepted and tab items' content is not rendered.
12+
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
13+
- You are allowed to customize tab items with labels, icons and even templates.
14+
- `IgxGrid`
15+
- `IgxColumnGroup`
16+
- Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive.
17+
518
## 8.0.2
619
- `igx-list-theme` now have some new parameters for styling.
720
- $item-background-hover - Change The list item hover background

‎projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@
131131
overflow: hidden;
132132
padding: $item-padding;
133133
-webkit-tap-highlight-color: transparent;
134+
outline: 0;
134135
}
135136

136137
%igx-bottom-nav-menu-item--disabled {

‎projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts‎

Lines changed: 73 additions & 60 deletions
Large diffs are not rendered by default.

‎projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,13 @@ export class IgxTemplateOutletDirective implements OnChanges {
5353
this._embeddedViewsMap.clear();
5454
}
5555

56+
public cleanView(tmplID) {
57+
const embView = this._embeddedViewsMap.get(tmplID);
58+
if (embView) {
59+
embView.destroy();
60+
this._embeddedViewsMap.delete(tmplID);
61+
}
62+
}
5663

5764
private _recreateView() {
5865
// detach old and create new

‎projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@ import { By } from '@angular/platform-browser';
1616

1717
const CSS_CLASS_EXPANSION_PANEL = 'igx-expansion-panel';
1818
const CSS_CLASS_PANEL_HEADER = 'igx-expansion-panel__header';
19+
const CSS_CLASS_PANEL_TITLE_WRAPPER = 'igx-expansion-panel__title-wrapper';
1920
const CSS_CLASS_PANEL_BODY = 'igx-expansion-panel-body';
2021
const CSS_CLASS_HEADER_EXPANDED = 'igx-expansion-panel__header--expanded';
22+
const CSS_CLASS_HEADER_ICON_START = 'igx-expansion-panel__header-icon--start';
23+
const CSS_CLASS_HEADER_ICON_END = 'igx-expansion-panel__header-icon--end';
24+
const CSS_CLASS_HEADER_ICON_NONE = 'igx-expansion-panel__header-icon--none';
2125
const CSS_CLASS_PANEL_ICON = 'igx-icon';
2226
const CSS_CLASS_LIST = 'igx-list';
2327
const CSS_CLASS_GRID = 'igx-grid';
@@ -668,46 +672,44 @@ describe('igxExpansionPanel', () => {
668672
tick();
669673
expect(headerButton.getAttribute('aria-disabled')).toMatch('false');
670674
}));
671-
xit('Should display expand/collapse button according to its position', () => {
675+
it('Should display expand/collapse button according to its position', () => {
672676
const fixture: ComponentFixture<IgxExpansionPanelListComponent> = TestBed.createComponent(IgxExpansionPanelListComponent);
673677
fixture.detectChanges();
674678
const header = fixture.componentInstance.header;
675679
const panelHeader = fixture.nativeElement.querySelector('.' + CSS_CLASS_PANEL_HEADER) as HTMLElement;
676680
const headerButton = panelHeader.querySelector('div [role = \'button\']');
677681

678682
expect(header.iconPosition).toEqual('left');
679-
expect(headerButton.children[0].nodeName).toEqual('IGX-ICON');
680-
expect(headerButton.children[1].nodeName).toEqual('IGX-EXPANSION-PANEL-TITLE');
681-
expect(headerButton.children[0].getBoundingClientRect().left).
682-
toBeLessThan(headerButton.children[1].getBoundingClientRect().left);
683+
expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
684+
expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START);
685+
expect(headerButton.children[1].getBoundingClientRect().left).
686+
toBeLessThan(headerButton.children[0].getBoundingClientRect().left);
683687

684688
header.iconPosition = ICON_POSITION.NONE;
685689
fixture.detectChanges();
686690
expect(header.iconPosition).toEqual('none');
687-
expect(headerButton.children.length).toEqual(1);
688-
expect(headerButton.children[0].nodeName).toEqual('IGX-EXPANSION-PANEL-TITLE');
691+
expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE);
689692

690693
header.iconPosition = ICON_POSITION.RIGHT;
691694
fixture.detectChanges();
692695
expect(header.iconPosition).toEqual('right');
693-
expect(headerButton.children[0].nodeName).toEqual('IGX-EXPANSION-PANEL-TITLE');
694-
expect(headerButton.children[1].nodeName).toEqual('IGX-ICON');
696+
expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
697+
expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_END);
695698
expect(headerButton.children[0].getBoundingClientRect().left).
696699
toBeLessThan(headerButton.children[1].getBoundingClientRect().left);
697700

698701
header.iconPosition = ICON_POSITION.NONE;
699702
fixture.detectChanges();
700703
expect(header.iconPosition).toEqual('none');
701-
expect(headerButton.children.length).toEqual(1);
702-
expect(headerButton.children[0].nodeName).toEqual('IGX-EXPANSION-PANEL-TITLE');
704+
expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_NONE);
703705

704706
header.iconPosition = ICON_POSITION.LEFT;
705707
fixture.detectChanges();
706708
expect(header.iconPosition).toEqual('left');
707-
expect(headerButton.children[0].nodeName).toEqual('IGX-ICON');
708-
expect(headerButton.children[1].nodeName).toEqual('IGX-EXPANSION-PANEL-TITLE');
709-
expect(headerButton.children[0].getBoundingClientRect().left).
710-
toBeLessThan(headerButton.children[1].getBoundingClientRect().left);
709+
expect(headerButton.children[0].className).toEqual(CSS_CLASS_PANEL_TITLE_WRAPPER);
710+
expect(headerButton.children[1].className).toEqual(CSS_CLASS_HEADER_ICON_START);
711+
expect(headerButton.children[1].getBoundingClientRect().left).
712+
toBeLessThan(headerButton.children[0].getBoundingClientRect().left);
711713
});
712714

713715
it('Should override the default icon when an icon template is passed', () => {

‎projects/igniteui-angular/src/lib/grids/column.component.ts‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -685,6 +685,7 @@ export class IgxColumnComponent implements AfterContentInit {
685685
}
686686
/**
687687
* Sets the header template.
688+
* Note that the column header height is fixed and any content bigger than it will be cut off.
688689
* ```html
689690
* <ng-template #headerTemplate>
690691
* <div style = "background-color:black" (click) = "changeColor(val)">
@@ -1050,8 +1051,8 @@ export class IgxColumnComponent implements AfterContentInit {
10501051
/**
10511052
*@hidden
10521053
*/
1053-
@ContentChild(IgxCellHeaderTemplateDirective, { read: IgxCellHeaderTemplateDirective, static: true })
1054-
protected headTemplate: IgxCellHeaderTemplateDirective;
1054+
@ContentChildren(IgxCellHeaderTemplateDirective, { read: IgxCellHeaderTemplateDirective, descendants: false })
1055+
protected headTemplate: QueryList<IgxCellHeaderTemplateDirective>;
10551056
/**
10561057
*@hidden
10571058
*/
@@ -1085,8 +1086,8 @@ export class IgxColumnComponent implements AfterContentInit {
10851086
if (this.cellTemplate) {
10861087
this._bodyTemplate = this.cellTemplate.template;
10871088
}
1088-
if (this.headTemplate) {
1089-
this._headerTemplate = this.headTemplate.template;
1089+
if (this.headTemplate && this.headTemplate.length) {
1090+
this._headerTemplate = this.headTemplate.toArray()[0].template;
10901091
}
10911092
if (this.editorTemplate) {
10921093
this._inlineEditorTemplate = this.editorTemplate.template;
@@ -1614,13 +1615,14 @@ export class IgxColumnComponent implements AfterContentInit {
16141615
* @internal
16151616
*/
16161617
protected cacheCalcWidth(): any {
1618+
const grid = this.gridAPI.grid;
16171619
const colWidth = this.width;
16181620
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
16191621
if (isPercentageWidth) {
1620-
this._calcWidth = parseInt(colWidth, 10) / 100 * (this.grid.calcWidth - this.grid.featureColumnsWidth);
1622+
this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth);
16211623
} else if (!colWidth) {
16221624
// no width
1623-
this._calcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
1625+
this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth();
16241626
} else {
16251627
this._calcWidth = this.width;
16261628
}
@@ -1710,21 +1712,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
17101712
* @hidden
17111713
*/
17121714
set bodyTemplate(template: TemplateRef<any>) { }
1713-
/**
1714-
* Returns a reference to the header template.
1715-
* ```typescript
1716-
* let headerTemplate = this.columnGroup.headerTemplate;
1717-
* ```
1718-
* @memberof IgxColumnGroupComponent
1719-
*/
1720-
get headerTemplate(): TemplateRef<any> {
1721-
return this._headerTemplate;
1722-
}
1723-
/**
1724-
* @hidden
1725-
* @memberof IgxColumnGroupComponent
1726-
*/
1727-
set headerTemplate(template: TemplateRef<any>) { }
1715+
17281716
/**
17291717
* Returns a reference to the inline editor template.
17301718
* ```typescript
@@ -1779,6 +1767,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
17791767
@ContentChildren with descendants still returns the `parent`
17801768
component in the query list.
17811769
*/
1770+
if (this.headTemplate && this.headTemplate.length) {
1771+
this._headerTemplate = this.headTemplate.toArray()[0].template;
1772+
}
17821773
this.children.reset(this.children.toArray().slice(1));
17831774
this.children.forEach(child => {
17841775
child.parent = this;

‎projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
364364
* Commits the value of the input.
365365
*/
366366
public commitInput() {
367-
this.chipsArea.chipsList.filter(chip => chip.selected = false);
367+
this.expressionsList.forEach(ex => ex.isSelected = false);
368+
this.chipsArea.chipsList.forEach(chip => chip.selected = false);
369+
368370
let indexToDeselect = -1;
369371
for (let index = 0; index < this.expressionsList.length; index++) {
370372
const expression = this.expressionsList[index].expression;
@@ -728,6 +730,17 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
728730
}
729731
}
730732

733+
/**
734+
* @hidden
735+
* Resets the chips area
736+
* @memberof IgxGridFilteringRowComponent
737+
*/
738+
public resetChipsArea() {
739+
this.chipAreaScrollOffset = 0;
740+
this.transform(this.chipAreaScrollOffset);
741+
this.showHideArrowButtons();
742+
}
743+
731744
private transform(offset: number) {
732745
requestAnimationFrame(() => {
733746
this.chipsArea.element.nativeElement.style.transform = `translate(${offset}px)`;

‎projects/igniteui-angular/src/lib/grids/grid-base.component.ts‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
246246
private _isLoading = false;
247247
private _locale = null;
248248
private _observer: MutationObserver;
249-
private _destroyed = false;
249+
protected _destroyed = false;
250250
private overlayIDs = [];
251251
/**
252252
* An accessor that sets the resource strings.
@@ -602,10 +602,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
602602
* @memberof IgxGridBaseComponent
603603
*/
604604
set rowEditable(val: boolean) {
605-
this._rowEditable = val;
606605
if (this.gridAPI.grid) {
607606
this.refreshGridState();
608607
}
608+
this._rowEditable = val;
609+
this.cdr.markForCheck();
609610
}
610611

611612
/**
@@ -2807,6 +2808,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
28072808
this.onDensityChanged.pipe(takeUntil(this.destroy$)).subscribe(() => {
28082809
requestAnimationFrame(() => {
28092810
this.summaryService.summaryHeight = 0;
2811+
this.endEdit(true);
28102812
this.reflow();
28112813
this.verticalScrollContainer.recalcUpdateSizes();
28122814
});
@@ -2824,6 +2826,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
28242826
return mutation.type === 'childList';
28252827
}).length > 0;
28262828
if (childListHasChanged && this.isAttachedToDom) {
2829+
this._autoSize = false;
28272830
this.reflow();
28282831
this._observer.disconnect();
28292832
this._observer = null;
@@ -4326,6 +4329,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
43264329
this.repositionRowEditingOverlay(this.rowInEditMode);
43274330
}
43284331

4332+
if (this.filteringService.isFilterRowVisible) {
4333+
this.filteringRow.resetChipsArea();
4334+
}
4335+
43294336
this.cdr.detectChanges();
43304337
this.resetCaches();
43314338
// in case scrollbar has appeared recalc to size correctly.
@@ -5452,9 +5459,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
54525459
// TODO: Merge the crudService with wht BaseAPI service
54535460
if (!row && !cell) { return; }
54545461

5455-
const columnIndex = cell ? cell.column.index : -1;
5456-
const ri = row ? row.index : -1;
5457-
54585462
commit ? this.gridAPI.submit_value() : this.gridAPI.escape_editMode();
54595463

54605464
if (!this.rowEditable || this.rowEditingOverlay && this.rowEditingOverlay.collapsed || !row) {
@@ -5463,24 +5467,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
54635467

54645468
this.endRowTransaction(commit, row);
54655469

5466-
if (event) {
5467-
if (cell) {
5468-
const currentCell = this.gridAPI.get_cell_by_index(ri, columnIndex);
5469-
if (currentCell) {
5470-
currentCell.nativeElement.focus();
5470+
const activeCell = this.selectionService.activeElement;
5471+
if (event && activeCell) {
5472+
const rowIndex = activeCell.row;
5473+
const visibleColIndex = activeCell.layout ? activeCell.layout.columnVisibleIndex : activeCell.column;
5474+
this.navigateTo(rowIndex, visibleColIndex, (c) => {
5475+
if (c.targetType === GridKeydownTargetType.dataCell && c.target) {
5476+
c.target.nativeElement.focus();
54715477
}
5472-
} else {
5473-
// when there's no cell in edit mode (focus is on the row edit buttons), use last active
5474-
const activeCell = this.gridAPI.grid.selectionService.activeElement;
5475-
if (activeCell) {
5476-
const currentCellElement = this.gridAPI.grid.navigation.getCellElementByVisibleIndex(
5477-
activeCell.row,
5478-
activeCell.layout ? activeCell.layout.columnVisibleIndex : activeCell.column);
5479-
if (currentCellElement) {
5480-
currentCellElement.focus();
5481-
}
5482-
}
5483-
}
5478+
});
54845479
}
54855480
}
54865481
/**

‎projects/igniteui-angular/src/lib/grids/grid-header-group.component.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,19 @@
2020
<span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right"></span>
2121
</ng-container>
2222

23+
<ng-template #defaultColumn>{{column.header}}</ng-template>
24+
2325
<ng-container *ngIf="!grid.hasColumnLayouts && column.columnGroup">
2426
<span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left"></span>
2527
<div class="igx-grid__thead-title"
2628
[ngClass]="{'igx-grid__th--pinned-last': hasLastPinnedChildColumn}"
2729
[igxColumnMovingDrag]="column"
2830
[dragGhostHost]="grid.outletDirective.nativeElement"
2931
[attr.droppable]="true"
30-
[igxColumnMovingDrop]="column">{{ column.header }}</div>
32+
[igxColumnMovingDrop]="column">
33+
<ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
34+
</ng-container>
35+
</div>
3136
<div class="igx-grid__thead-group">
3237
<ng-container *ngFor="let child of column.children">
3338
<igx-grid-header-group *ngIf="!child.hidden" class="igx-grid__thead-subgroup"

‎projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -605,7 +605,10 @@ export class IgxGridNavigationService {
605605
if (cb) {
606606
cb();
607607
} else {
608-
this.getCellElementByVisibleIndex(rowIndex, visibleColumnIndex, isSummary).focus({ preventScroll: true });
608+
const cellElement = this.getCellElementByVisibleIndex(rowIndex, visibleColumnIndex, isSummary);
609+
if (cellElement) {
610+
cellElement.focus({ preventScroll: true });
611+
}
609612
}
610613
});
611614
this.horizontalScroll(rowIndex).scrollTo(unpinnedIndex);

0 commit comments

Comments
 (0)