From 5e4cd2711cbcd2c977abb0e615f3588f645a758f Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Fri, 7 Jan 2022 00:47:11 +0530
Subject: [PATCH] feat: add alignment customization for page header content

---
 .../header/page/page-header.component.scss    | 10 +++++
 .../src/header/page/page-header.component.ts  | 40 ++++++++++++-------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/projects/components/src/header/page/page-header.component.scss b/projects/components/src/header/page/page-header.component.scss
index cf580cd32..03e4ffb89 100644
--- a/projects/components/src/header/page/page-header.component.scss
+++ b/projects/components/src/header/page/page-header.component.scss
@@ -6,6 +6,16 @@
   display: flex;
   flex-direction: column;
 
+  .column-alignment {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .row-alignment {
+    display: flex;
+    justify-content: space-between;
+  }
+
   &.bottom-border {
     padding-bottom: 16px;
     border-bottom: 1px solid $color-border;
diff --git a/projects/components/src/header/page/page-header.component.ts b/projects/components/src/header/page/page-header.component.ts
index 4d63c9354..2a3aa1405 100644
--- a/projects/components/src/header/page/page-header.component.ts
+++ b/projects/components/src/header/page/page-header.component.ts
@@ -23,23 +23,25 @@ import { NavigableTab } from '../../tabs/navigable/navigable-tab';
       class="page-header"
       [class.bottom-border]="!this.tabs?.length"
     >
-      <div class="breadcrumb-container">
-        <ht-breadcrumbs [breadcrumbs]="breadcrumbs"></ht-breadcrumbs>
-        <div class="title" *ngIf="this.titlecrumb$ | async as titlecrumb">
-          <ht-icon
-            class="icon"
-            *ngIf="titlecrumb.icon && breadcrumbs.length <= 1"
-            [icon]="titlecrumb.icon"
-            [label]="titlecrumb.label"
-            size="${IconSize.Large}"
-          ></ht-icon>
-
-          <ht-label [label]="titlecrumb.label"></ht-label>
-          <ht-beta-tag *ngIf="this.isBeta" class="beta"></ht-beta-tag>
+      <div [ngClass]="this.contentAlignment">
+        <div class="breadcrumb-container">
+          <ht-breadcrumbs [breadcrumbs]="breadcrumbs"></ht-breadcrumbs>
+          <div class="title" *ngIf="this.titlecrumb$ | async as titlecrumb">
+            <ht-icon
+              class="icon"
+              *ngIf="titlecrumb.icon && breadcrumbs.length <= 1"
+              [icon]="titlecrumb.icon"
+              [label]="titlecrumb.label"
+              size="${IconSize.Large}"
+            ></ht-icon>
+
+            <ht-label [label]="titlecrumb.label"></ht-label>
+            <ht-beta-tag *ngIf="this.isBeta" class="beta"></ht-beta-tag>
+          </div>
         </div>
-      </div>
 
-      <ng-content></ng-content>
+        <ng-content></ng-content>
+      </div>
 
       <ht-navigable-tab-group *ngIf="this.tabs?.length" class="tabs" (tabChange)="this.onTabChange($event)">
         <ht-navigable-tab
@@ -64,6 +66,9 @@ export class PageHeaderComponent implements OnInit {
   @Input()
   public isBeta: boolean = false;
 
+  @Input()
+  public contentAlignment: PageHeaderContentAlignment = PageHeaderContentAlignment.Column;
+
   public breadcrumbs$: Observable<Breadcrumb[] | undefined> = this.breadcrumbsService.breadcrumbs$.pipe(
     map(breadcrumbs => (breadcrumbs.length > 0 ? breadcrumbs : undefined))
   );
@@ -116,3 +121,8 @@ export class PageHeaderComponent implements OnInit {
 interface PageHeaderPreferences {
   selectedTabPath?: string;
 }
+
+export const enum PageHeaderContentAlignment {
+  Column = 'column-alignment',
+  Row = 'row-alignment'
+}