Action Group: Render changes to visibleActions (#3101)

libs/designsystem/action-group/src/action-group.component.ts

@@ -9,9 +9,11 @@ import {
   Inject,
   InjectionToken,
   Input,
+  OnChanges,
   Optional,
   QueryList,
   Renderer2,
+  SimpleChanges,
   ViewChild,
 } from '@angular/core';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
@@ -34,7 +36,7 @@ type CollapsedAction = { button: HTMLButtonElement; text: string };
   templateUrl: './action-group.component.html',
   styleUrls: ['./action-group.component.scss'],
 })
-export class ActionGroupComponent implements AfterContentInit {
+export class ActionGroupComponent implements AfterContentInit, OnChanges {
   @Input() visibleActions?: number;
 
   @Input()
@@ -51,6 +53,8 @@ export class ActionGroupComponent implements AfterContentInit {
    * dropdown ViewChild is only used for temporary more-menu
    */
   @ViewChild(DropdownComponent) private dropdown!: DropdownComponent;
+  @ViewChild(DropdownComponent, { read: ElementRef, static: true })
+  private dropdownElement!: ElementRef<HTMLElement>;
 
   @HostBinding('class.is-collapsed')
   _isCollapsed: boolean;
@@ -64,6 +68,7 @@ export class ActionGroupComponent implements AfterContentInit {
   private collapseThreshold = 2;
 
   constructor(
+    private elementRef: ElementRef<HTMLElement>,
     private renderer: Renderer2,
     @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig
   ) {}
@@ -82,6 +87,18 @@ export class ActionGroupComponent implements AfterContentInit {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.visibleActions && !changes.visibleActions.firstChange) {
+      const satifiesMaxVisibleActions =
+        this.config?.maxVisibleActions === undefined ||
+        this.config?.maxVisibleActions === null ||
+        changes.visibleActions.currentValue <= this.config?.maxVisibleActions;
+      if (satifiesMaxVisibleActions) {
+        this.initializeCollapsing();
+      }
+    }
+  }
+
   onActionSelect(action: CollapsedAction) {
     // Dropdown should not persist selected item, we want it to be re-selectable
     this.dropdown.selectedIndex = -1;
@@ -123,6 +140,17 @@ export class ActionGroupComponent implements AfterContentInit {
   }
 
   private moveButtons() {
+    const buttonsToShow = [...this.buttonElements]
+      .slice(0, this.visibleActions)
+      .filter((btn) => btn.nativeElement.parentElement === this.hiddenLayer.nativeElement);
+    buttonsToShow.forEach((button) => {
+      this.renderer.insertBefore(
+        this.elementRef.nativeElement,
+        button.nativeElement,
+        this.dropdownElement.nativeElement
+      );
+    });
+
     const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);
     buttonsToHide.forEach((button) => {
       this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);