Merge branch 'main' into add-create-option-label

Author: anandtiwary

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;

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'
+}