common section card title subtitle leftside header

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.html

@@ -0,0 +1,15 @@
+<div class="title-header">
+  <h1 class="title ft-26-700">
+    {{ title | translate }}
+    <ng-container *ngIf="chipClass">
+      <app-common-status-indicator-chip [chipClass] = "chipClass" ></app-common-status-indicator-chip>
+    </ng-container>
+  </h1>
+  <h3 class="subtitle ft-16-400">
+    {{ subtitle | translate }}
+    <ng-container *ngIf="showViewLogs">
+      <a [href]="" class="view-logs-link" (click)="viewLogsClicked()"> View logs</a>
+    </ng-container>
+  </h3>
+</div>
+

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.scss

@@ -0,0 +1,15 @@
+::ng-deep .title-header {
+  height: 112px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .title {
+    margin-bottom: 0;
+  }
+
+  .subtitle {
+    margin-bottom: 0;
+    color: var(--grey-3);
+  }
+}

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-title-header/common-section-card-title-header.component.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CommonStatusIndicatorChipComponent } from '../common-status-indicator-chip/common-status-indicator-chip.component';
+import { STATUS_INDICATOR_CHIP_TYPE } from 'upgrade_types';
+
+/**
+ * The `app-common-section-card-search-header` component provides a common header with title and subtitle in section card.
+ * It contains a title, subtitle, status chip Text and variable to confirm if it should contain view Log text anchor tag.
+ * It will emit event when view Log text will be clicked which will notify parent component of getting clicked.
+ * Example usage:
+ *
+ * ```
+ * <app-common-section-card-title-header
+ *   [title]="title"
+ *   [subtitle]="subtitle"
+ *   [showViewLogs]="true"
+ *   [chipClass]="STATUS_INDICATOR_CHIP_TYPE.ENROLLMENT_COMPLETE"
+ *   (viewLogs)="viewLogsClicked($event)"
+ * ></app-common-section-card-title-header>
+ * ```
+ */
+
+@Component({
+  standalone: true,
+  selector: 'app-common-section-card-title-header',
+  templateUrl: './common-section-card-title-header.component.html',
+  styleUrls: ['./common-section-card-title-header.component.scss'],
+  imports: [CommonModule, TranslateModule, CommonStatusIndicatorChipComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommonSectionCardTitleHeaderComponent {
+  @Input() title!: string;
+  @Input() subtitle!: string;
+  @Input() chipClass?: STATUS_INDICATOR_CHIP_TYPE;
+  @Input() showViewLogs?: boolean;
+  @Output() viewLogs = new EventEmitter<{ clicked: boolean }>();
+
+  viewLogsClicked(): void {
+    this.viewLogs.emit({
+      clicked: true,
+    });
+  }
+}

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/index.ts

@@ -6,6 +6,7 @@ import { CommonSectionCardSearchHeaderComponent } from './common-section-card-se
 import { CommonSectionCardActionButtonsComponent } from './common-section-card-action-buttons/common-section-card-action-buttons.component';
 import { CommonSectionCardComponent } from './common-section-card/common-section-card.component';
 import { CommonStatusIndicatorChipComponent } from './common-status-indicator-chip/common-status-indicator-chip.component';
+import { CommonSectionCardTitleHeaderComponent } from './common-section-card-title-header/common-section-card-title-header.component';
 
 export {
   CommonPageComponent,
@@ -14,6 +15,7 @@ export {
   CommonSectionCardComponent,
   CommonSectionCardListComponent,
   CommonSectionCardSearchHeaderComponent,
+  CommonSectionCardTitleHeaderComponent,
   CommonSectionCardActionButtonsComponent,
   CommonStatusIndicatorChipComponent,
 };