feat: sheet expand and collapse behaviour and impl

projects/components/src/overlay/sheet/sheet-overlay.component.scss

@@ -1,8 +1,10 @@
 @import 'color-palette';
 @import 'font';
 
+$box-shadow: -3px 0px 24px rgba(0, 0, 0, 0.12), -1px 0px 8px rgba(0, 0, 0, 0.08);
+
 .sheet-overlay {
-  box-shadow: -3px 1px 24px rgba(0, 0, 0, 0.12), -1px -1px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: $box-shadow;
   border-radius: 16px 0 0 16px;
   height: 100%;
   overflow: hidden;
@@ -33,6 +35,15 @@
     width: 1280px;
   }
 
+  &.collapsed {
+    width: 0;
+    padding: 0;
+  }
+
+  &.animate {
+    transition: width 0.75s;
+  }
+
   .header {
     display: flex;
     justify-content: space-between;
@@ -62,3 +73,25 @@
     }
   }
 }
+
+.collapse-expand-trigger {
+  cursor: pointer;
+  box-shadow: $box-shadow;
+  background: white;
+  width: 200px;
+  height: 40px;
+  float: left;
+  position: relative;
+  top: -50%;
+  left: -20px;
+  border-radius: 8px 8px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%) rotate(270deg);
+  clip-path: inset(-20px -20px 0px -20px);
+
+  &.collapsed {
+    left: 180px;
+  }
+}

projects/components/src/overlay/sheet/sheet-overlay.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, HostListener, Inject, Injector, TemplateRef, Type } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common';
+import { isNil } from 'lodash-es';
 import { ButtonStyle } from '../../button/button';
 import { PopoverFixedPositionLocation, POPOVER_DATA } from '../../popover/popover';
 import { PopoverRef } from '../../popover/popover-ref';
@@ -12,7 +13,15 @@ import { SheetOverlayConfig, SheetSize } from './sheet';
   styleUrls: ['./sheet-overlay.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div *ngIf="this.visible" class="sheet-overlay" [ngClass]="'sheet-size-' + this.size">
+    <div
+      *ngIf="this.visible"
+      class="sheet-overlay"
+      [ngClass]="'sheet-size-' + this.size"
+      [ngClass]="{
+        collapsed: !this.isRegularSheet && this.isCollapsed,
+        animate: this.showAnimation
+      }"
+    >
       <div *ngIf="this.showHeader" class="header">
         <h3 class="header-title">{{ sheetTitle }}</h3>
         <ht-button
@@ -26,15 +35,27 @@ import { SheetOverlayConfig, SheetSize } from './sheet';
       </div>
       <div class="content-wrapper">
         <div class="content">
-          <ng-container *ngIf="this.isComponentSheet; else templateRenderer">
-            <ng-container *ngComponentOutlet="this.renderer; injector: this.rendererInjector"></ng-container>
-          </ng-container>
-          <ng-template #templateRenderer>
-            <ng-container *ngTemplateOutlet="this.renderer"></ng-container>
-          </ng-template>
+          <ng-container *ngIf="this.isRegularSheet || (!this.isRegularSheet && !this.isCollapsed)"
+            ><ng-container *ngIf="this.isComponentSheet; else templateRenderer">
+              <ng-container *ngComponentOutlet="this.renderer; injector: this.rendererInjector"></ng-container>
+            </ng-container>
+            <ng-template #templateRenderer>
+              <ng-container *ngTemplateOutlet="this.renderer"></ng-container> </ng-template
+          ></ng-container>
         </div>
       </div>
     </div>
+    <ng-container *ngIf="!this.isRegularSheet">
+      <div
+        [ngClass]="{
+          collapsed: this.isCollapsed
+        }"
+        (click)="this.toggleCollapse()"
+        class="collapse-expand-trigger"
+      >
+        <ng-container *ngTemplateOutlet="this.collapseExpandTrigger"></ng-container>
+      </div>
+    </ng-container>
   `
 })
 export class SheetOverlayComponent {
@@ -45,7 +66,11 @@ export class SheetOverlayComponent {
   public readonly renderer: TemplateRef<unknown> | Type<unknown>;
   public readonly rendererInjector: Injector;
   public visible: boolean = true;
+  public isCollapsed: boolean = true;
+  public isRegularSheet: boolean = true;
+  public collapseExpandTrigger?: TemplateRef<unknown>;
   public readonly closeOnEscape: boolean;
+  public readonly showAnimation: boolean;
 
   public constructor(
     private readonly popoverRef: PopoverRef,
@@ -61,6 +86,9 @@ export class SheetOverlayComponent {
     this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
     this.renderer = sheetConfig.content;
     this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position));
+    this.collapseExpandTrigger = sheetConfig.collapseExpandTrigger;
+    this.isRegularSheet = isNil(this.collapseExpandTrigger);
+    this.showAnimation = sheetConfig.showAnimation ?? false;
 
     if (this.size === SheetSize.ResponsiveExtraLarge) {
       this.popoverRef.width('60%');
@@ -89,6 +117,10 @@ export class SheetOverlayComponent {
     this.popoverRef.close();
   }
 
+  public toggleCollapse(): void {
+    this.isCollapsed = !this.isCollapsed;
+  }
+
   private getHeightForPopover(globalHeaderHeight: string, position?: PopoverFixedPositionLocation): string {
     return position === PopoverFixedPositionLocation.Right ? '100vh' : `calc(100vh - ${globalHeaderHeight})`;
   }

projects/components/src/overlay/sheet/sheet.ts

@@ -1,4 +1,4 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import { PopoverFixedPositionLocation } from '../../popover/popover';
 import { OverlayConfig } from './../overlay';
@@ -8,6 +8,8 @@ export interface SheetOverlayConfig<TData = unknown> extends OverlayConfig {
   data?: TData;
   position?: PopoverFixedPositionLocation.Right | PopoverFixedPositionLocation.RightUnderHeader;
   closeOnEscapeKey?: boolean;
+  collapseExpandTrigger?: TemplateRef<unknown>; // To toggle between collapse and expand
+  showAnimation?: boolean;
 }
 
 export const enum SheetSize {