feat: Passing custom toolbar actions dynamically

src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.html.template

@@ -145,6 +145,10 @@
 
     <span data-test="spacer" class="spacer"></span>
 
+    <span #projectedToolbarActions>
+        <ng-content select="[toolbarActions]"></ng-content>
+    </span>
+
     <% if (options.customCommandBarActions.length > 0) { %>
         <% for(let action of options.customCommandBarActions) { %>
             <button data-test="toolbar-custom-action-button" data-resp="custom-action-<%= action %>" *ngIf="!isInCollapsedMenu('custom-action-<%= action %>')" mat-icon-button #toolbarComp (click)="executeCustomCommandBarAction('<%= spinalCaseFunc(action) %>')" attr.aria-label="{{ '<%= options.versionedAccessPrefix %><%= spinalCaseFunc(action) %>.customCommandBarAction' | transloco }}">
@@ -161,18 +165,18 @@
         <% } %>
     <% } %>
 
-    <button data-test="refresh-data-button-<%= options.componentType %>" mat-icon-button data-resp="refresh-data-button" *ngIf="!isInCollapsedMenu('refresh-data-button')" #toolbarComp aria-label="Refresh table" (click)="triggerReloadFilter()"
+    <button data-test="refresh-data-button-<%= options.componentType %>" mat-icon-button data-resp="refresh-data-button" *ngIf="!isInCollapsedMenu('refresh-data-button')" #toolbarComp aria-label="Refresh table" [disabled]="!isToolbarActionsEnabled" (click)="triggerReloadFilter()"
         [matTooltip]="'tableActions.refreshData' | transloco">
       <mat-icon data-test="refresh-data-icon" class="material-icons">autorenew</mat-icon>
     </button>
 
-    <button data-test="export-data-button-<%= options.componentType %>" mat-icon-button data-resp="export-data-button" *ngIf="!isInCollapsedMenu('export-data-button')" #toolbarComp aria-label="Download data as CSV" (click)="triggerExportToCsv()"
+    <button data-test="export-data-button-<%= options.componentType %>" mat-icon-button data-resp="export-data-button" *ngIf="!isInCollapsedMenu('export-data-button')" #toolbarComp aria-label="Download data as CSV" [disabled]="!isToolbarActionsEnabled" (click)="triggerExportToCsv()"
         [matTooltip]="'tableActions.exportData' | transloco">
       <mat-icon data-test="export-data-icon" class="material-icons">file_download</mat-icon>
     </button>
 
     <% if (options.componentType === 'table' && options.hasSearchBar) { %>
-        <button data-test="open-configuration" data-resp="open-configuration-button" *ngIf="!isInCollapsedMenu('open-configuration-button')" #toolbarComp mat-icon-button aria-label="Open configuration" [matMenuTriggerFor]="configurationMenu" (menuOpened)="triggerInitOpenedConfigurationDialog()"
+        <button data-test="open-configuration" data-resp="open-configuration-button" *ngIf="!isInCollapsedMenu('open-configuration-button')" #toolbarComp mat-icon-button aria-label="Open configuration" [matMenuTriggerFor]="configurationMenu" [disabled]="!isToolbarActionsEnabled" (menuOpened)="triggerInitOpenedConfigurationDialog()"
             [matTooltip]="'tableActions.openConfig' | transloco">
             <mat-icon data-test="open-configuration-icon" class="material-icons">settings </mat-icon>
         </button>
@@ -289,7 +293,9 @@
         <% } %>
     <% } %>
 
-    <div mat-menu-item *ngIf="isInCollapsedMenu('refresh-data-button')" (click)="triggerReloadFilter()">
+    <ng-content select="[toolbarCollapsedActions]"></ng-content>
+
+    <div mat-menu-item *ngIf="isInCollapsedMenu('refresh-data-button')" [disabled]="!isToolbarActionsEnabled" (click)="triggerReloadFilter()">
         <mat-icon data-test="refresh-data-icon-collapsed" class="material-icons"
           >autorenew</mat-icon>
           <span>Refresh</span>
@@ -298,6 +304,7 @@
     <div
       mat-menu-item
       *ngIf="isInCollapsedMenu('export-data-button')"
+      [disabled]="!isToolbarActionsEnabled"
       (click)="triggerExportToCsv()"
       data-test="export-data-button-<% if (options.componentType === 'table') { %>table<% } else { %>card<% } %>-collapsed">
       <mat-icon data-test="export-data-icon-collapsed" class="material-icons"
@@ -309,6 +316,7 @@
        <div
         mat-menu-item
         *ngIf="isInCollapsedMenu('open-configuration-button')"
+        [disabled]="!isToolbarActionsEnabled"
          (click)="openSettingsFromCollapsed()"
         >
         <mat-icon data-test="open-configuration-icon-collapsed" class="material-icons"

src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.ts.template

@@ -27,6 +27,7 @@ import { MatDialog } from '@angular/material/dialog';
 })
 export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
     @Input() isMultipleSelectionEnabled = true;
+    @Input() isToolbarActionsEnabled = true;
     @Input() selection = new SelectionModel<any>(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<ElementRef>;
+    @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<HTMLElement>(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;

src/ng-generate/components/shared/methods/generation/extended-table.html.template

@@ -80,7 +80,7 @@
                         <% } else { %>
                             <esmf-table-cell
                                 [value]="<%= cellContent %>"
-                            [description]="'<%= propertyLocaleKeyPath %>.description' | transloco"
+                                [description]="'<%= propertyLocaleKeyPath %>.description' | transloco"
                                 <% if(options.hasSearchBar) { %>
                                     [configs]="configs"
                                     [highlightString]="highlightString"

src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.html.template

@@ -1,17 +1,4 @@
-<!--
- * Copyright (c) 2024 Robert Bosch Manufacturing Solutions GmbH
- *
- * See the AUTHORS file(s) distributed with this work for
- * additional information regarding authorship.
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- *
- * SPDX-License-Identifier: MPL-2.0
- -->
- <!-- <%= options.generationDisclaimerText %> -->
-
+<!--  <%= options.generationDisclaimerText %> -->
 <div class="cell-content"
    [highlight]="highlightString"
    [highlightSource]="value"

src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.html.template

@@ -22,7 +22,14 @@
         <% if (options.customCommandBarActions.length > 0) { %>
             (customCommandBarActionEvent)="handleCustomCommandBarActionEvent($event.action)"
         <% } %>
-    ></<%= dasherize(name) %>-command-bar>
+    >
+      <ng-container toolbarActions>
+        <ng-content select="[customToolbarActions]"></ng-content>
+      </ng-container>
+      <ng-container toolbarCollapsedActions>
+        <ng-content select="[customToolbarCollapsedActions]"></ng-content>
+      </ng-container>
+    </<%= dasherize(name) %>-command-bar>
   <% } %>
   <ng-container *ngIf="!!customTemplate && !dataSource.data.length">
     <ng-container *ngTemplateOutlet="loadCustomTemplate()"></ng-container>

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 {