diff --git a/projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts b/projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts index 3747c6002..0eac2ebf7 100644 --- a/projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts +++ b/projects/angular/components/ui-grid/src/header/ui-grid-header-button.directive.ts @@ -19,7 +19,7 @@ export class UiGridHeaderButtonDirective { * */ @Input() - public type?: 'action' | 'main'; + public type?: 'action' | 'main' | 'inline'; /** * Configure if the button is visible or not. diff --git a/projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts b/projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts index 68c539936..9d920e9dd 100644 --- a/projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts +++ b/projects/angular/components/ui-grid/src/header/ui-grid-header.directive.ts @@ -75,6 +75,12 @@ export class UiGridHeaderDirective implements AfterViewInit, OnDestroy { */ public actionButtons?: UiGridHeaderButtonDirective[]; + /** + * @internal + * @ignore + */ + public inlineButtons?: UiGridHeaderButtonDirective[]; + @ContentChildren(UiGridHeaderButtonDirective) private _buttons!: QueryList; @@ -85,6 +91,7 @@ export class UiGridHeaderDirective implements AfterViewInit, OnDestroy { ngAfterViewInit() { this.mainButton = this._buttons.find(b => b.type === 'main'); this.actionButtons = this._buttons.filter(b => b.type === 'action'); + this.inlineButtons = this._buttons.filter(b => b.type === 'inline'); } /** diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/projects/angular/components/ui-grid/src/ui-grid.component.html index b6a193df3..e560ece67 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.html +++ b/projects/angular/components/ui-grid/src/ui-grid.component.html @@ -4,12 +4,12 @@
+ !header?.actionButtons?.length"> + + + + + + + + + + diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts b/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts index 708d82739..fad13619f 100644 --- a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts +++ b/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts @@ -504,6 +504,11 @@ describe('Component: UiGrid', () => { + + + + + @@ -568,6 +573,14 @@ describe('Component: UiGrid', () => { expect(mainHeaderAction.nativeElement.innerText).toEqual('Main Action'); }); + it('should display an inline header button', () => { + const inlineHeaderAction = fixture.debugElement.query(By.css('.inline-action-button')); + + expect(inlineHeaderAction).toBeDefined(); + expect(inlineHeaderAction.nativeElement).toBeDefined(); + expect(inlineHeaderAction.nativeElement.innerText).toEqual('Inline Action'); + }); + it('should NOT display the selection action button if no row is selected', () => { const headerSelectionAction = fixture.debugElement.query(By.css('.selection-action-button')); @@ -589,6 +602,20 @@ describe('Component: UiGrid', () => { expect(headerSelectionAction.nativeElement).toBeDefined(); expect(headerSelectionAction.nativeElement.innerText).toEqual('Selection Action'); }); + + it('should NOT display the inline header button if at least one row is selected', () => { + const rowCheckboxInputList = fixture.debugElement + .queryAll(By.css('.ui-grid-row .ui-grid-cell.ui-grid-checkbox-cell input')); + + const checkboxInput = faker.helpers.randomize(rowCheckboxInputList); + + checkboxInput.nativeElement.dispatchEvent(EventGenerator.click); + + fixture.detectChanges(); + + const inlineHeaderAction = fixture.debugElement.query(By.css('.inline-action-button')); + expect(inlineHeaderAction).toBeFalsy(); + }); }); describe('Configuration: with search', () => {