gist from clipboard

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button';

@Component({
  selector: 'swc-ui-action-grid',
  standalone: true,
  imports: [CommonModule, ButtonModule],
  template: `<div class="action-grid">
    <ng-container *ngFor="let action of actions; let i = index">
      <!-- Check if we need to start a new row -->
      <div *ngIf="i % maxActionsPerRow === 0" class="action-row"></div>
      <button
        pButton
        type="button"
        [icon]="action.icon"
        (click)="handleClick(action.key)"
        [label]="showLabels ? action.label : null"
        class="p-button-rounded p-button-outlined action-button"
      ></button>
    </ng-container>
  </div> `,
  styles: [
    `
      :host {
        display: block;
      }

      .action-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem; /* Spacing between buttons */
      }

      .action-row {
        flex-basis: 100%;
        width: 100%;
      }

      .action-button {
        flex: 1 0 calc(25% - 0.5rem); /* Adjust the 25% according to the gap */
        max-width: calc(25% - 0.5rem); /* Adjust the 25% according to the gap */
        margin-bottom: 0.5rem; /* Spacing for when it wraps */
      }
    `,
  ],
})
export class ActionGridComponent {
  @Input() actions: { key: string; icon: string; label: string }[] = [];
  @Input() maxActionsPerRow = 4; // Default value, can be overridden
  @Input() showLabels = false; // Default value, can be overridden to show labels
  @Output() actionClick = new EventEmitter<string>();

  handleClick(key: string): void {
    console.log('%c ActionGridComponent: handleClick', 'color: green', key);
    this.actionClick.emit(key);
  }
}