Added an override for the ActionButtons component

Author: Sharma

src/app/_samples/mediaco/components/action-buttons/action-buttons.component.html

@@ -0,0 +1,15 @@
+<div class="button-bar" *ngIf="arMainButtons$ && arSecondaryButtons$">
+  <div class="left-group">
+    <button
+      *ngFor="let aButton of arSecondaryButtons$"
+      mat-stroked-button
+      class="secondary-button"
+      (click)="buttonClick(aButton.jsAction, 'secondary')"
+    >
+      {{ localizedVal(aButton.name, localeCategory) }}
+    </button>
+    <button *ngFor="let aButton of arMainButtons$" mat-stroked-button class="main-button" (click)="buttonClick(aButton.jsAction, 'secondary')">
+      {{ localizedVal(aButton.name, localeCategory) }}
+    </button>
+  </div>
+</div>

src/app/_samples/mediaco/components/action-buttons/action-buttons.component.scss

@@ -0,0 +1,29 @@
+.button-bar {
+  margin-top: 1.2rem;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
+
+.left-group,
+.right-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.right-group {
+  margin-left: auto;
+}
+
+.secondary-button {
+  background-color: var(--app-sys-secondary-button-background) !important;
+  border-color: var(--app-sys-secondary-button-border) !important;
+}
+
+.main-button {
+  background-color: var(--mat-sys-primary) !important;
+  color: var(--mat-sys-on-primary) !important;
+}

src/app/_samples/mediaco/components/action-buttons/action-buttons.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ActionButtonsComponent } from './action-buttons.component';
+
+describe('ActionButtonsComponent', () => {
+  let component: ActionButtonsComponent;
+  let fixture: ComponentFixture<ActionButtonsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ActionButtonsComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionButtonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_samples/mediaco/components/action-buttons/action-buttons.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-action-buttons',
+  templateUrl: './action-buttons.component.html',
+  styleUrls: ['./action-buttons.component.scss'],
+  imports: [CommonModule, MatButtonModule]
+})
+export class ActionButtonsComponent {
+  @Input() arMainButtons$: any[];
+  @Input() arSecondaryButtons$: any[];
+
+  @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
+
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'Assignment';
+
+  buttonClick(sAction, sButtonType) {
+    this.actionButtonClick.emit({ action: sAction, buttonType: sButtonType });
+  }
+}

src/app/_samples/mediaco/sdk-mediaco-component-map.ts

@@ -1,4 +1,5 @@
 // Statically load all "MediaCo" components.
+import { ActionButtonsComponent } from './components/action-buttons/action-buttons.component';
 import { AppShellComponent } from './components/app-shell/app-shell.component';
 import { BannerComponent } from './components/banner/banner.component';
 import { ListViewComponent } from './components/list-view/list-view.component';
@@ -13,6 +14,7 @@ import { WssNavBarComponent } from './components/wss-nav-bar/wss-nav-bar.compone
 // specific to MediaCo application.
 
 const sdkMediaCoComponentMap = {
+  ActionButtons: ActionButtonsComponent,
   AppShell: AppShellComponent,
   Banner: BannerComponent,
   ListView: ListViewComponent,