diff --git a/src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.html.template b/src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.html.template index 0196766a..52717e31 100644 --- a/src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.html.template +++ b/src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.html.template @@ -145,6 +145,10 @@ + + + + <% if (options.customCommandBarActions.length > 0) { %> <% for(let action of options.customCommandBarActions) { %> - <% if (options.componentType === 'table' && options.hasSearchBar) { %> - @@ -289,7 +293,9 @@ <% } %> <% } %> -
+ + +
autorenew Refresh @@ -298,6 +304,7 @@
CommandBarComponent implements AfterViewInit { @Input() isMultipleSelectionEnabled = true; + @Input() isToolbarActionsEnabled = true; @Input() selection = new SelectionModel(this.isMultipleSelectionEnabled, []); @Input() totalItems = 0; @Input() searchFocused = false; @@ -65,6 +66,8 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit { componentsContainer!: ElementRef; @ViewChildren('toolbarComp', { read: ElementRef }) components!: QueryList; + @ViewChild('projectedToolbarActions', {read: ElementRef, static: false}) + projectedToolbarActions!: ElementRef; hiddenComponents: any[] = []; initialCompWidths : any[]= []; @@ -126,13 +129,21 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit { <% } %> ngAfterViewInit(): void { - const compWidths: any[] = this.components - .toArray() - .map((comp) => - ( {width: comp.nativeElement.clientWidth, id: comp.nativeElement.getAttribute('data-resp') })); + const children = Array.from(this.projectedToolbarActions.nativeElement.children); + const projectedCompWidths: any[] = children.map(comp => ({ + width: comp.clientWidth, + id: comp.getAttribute('data-resp') + })); - if(this.initialCompWidths.length === 0){ - this.initialCompWidths = compWidths; + const compWidths: any[] = this.components + .toArray() + .map((comp) => ({width: comp.nativeElement.clientWidth, id: comp.nativeElement.getAttribute('data-resp')})); + + if (this.initialCompWidths.length === 0) { + const widths = [...compWidths]; + const buttonsStartIndex = widths.findIndex(w => w.id?.includes('button')); + widths.splice(buttonsStartIndex, 0, ...projectedCompWidths); + this.initialCompWidths = widths; }; this.updateToolbarComponentsVisibility(); @@ -150,8 +161,8 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit { for (let i = 0; i < this.initialCompWidths.length; i++) { const buttonWidth = this.initialCompWidths[i]; - // 70 is for the width of the collapsed menu width - if (usedWidth + buttonWidth.width + 70 >= containerWidth) { + // 76 is for the width of the collapsed menu width + if (usedWidth + buttonWidth.width + 76 >= containerWidth) { this.hiddenComponents.push(buttonWidth.id); } else { usedWidth += buttonWidth.width; diff --git a/src/ng-generate/components/shared/methods/generation/extended-table.html.template b/src/ng-generate/components/shared/methods/generation/extended-table.html.template index 534ff768..17fd8e05 100644 --- a/src/ng-generate/components/shared/methods/generation/extended-table.html.template +++ b/src/ng-generate/components/shared/methods/generation/extended-table.html.template @@ -80,7 +80,7 @@ <% } else { %> [configs]="configs" [highlightString]="highlightString" diff --git a/src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.html.template b/src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.html.template index e27c1a13..a0c55d53 100644 --- a/src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.html.template +++ b/src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.html.template @@ -1,17 +1,4 @@ - - - +
0) { %> (customCommandBarActionEvent)="handleCustomCommandBarActionEvent($event.action)" <% } %> - >-command-bar> + > + + + + + + + -command-bar> <% } %> diff --git a/src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template b/src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template index 0ae4db48..708e4185 100644 --- a/src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template +++ b/src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template @@ -62,6 +62,7 @@ import {SelectionModel} from '@angular/cdk/collections'; import { TranslocoService } from '@jsverse/transloco'; import {PaginatorSelectConfigInjector} from "<% if (options.enableVersionSupport) { %>../<% } %>../../services/paginator-select-config.provider"; import {JSSdkLocalStorageService} from "<% if (options.enableVersionSupport) { %>../<% } %>../../services/storage.service"; +import {<%= classify(name) %>CommandBarComponent} from "./<%= dasherize(name) %>-command-bar.component"; import {<%= classify(name) %>ColumnMenuComponent} from './<%= dasherize(name) %>-column-menu.component'; <% if (options.hasSearchBar) { %> @@ -198,6 +199,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af <% } %> @ViewChild('searchInput') searchInput!: ElementRef; + @ViewChild(<%= classify(name) %>CommandBarComponent) commandBar: <%= classify(name) %>CommandBarComponent; @HostBinding("attr.style") public get valueAsStyle(): any {