<div class="bannerWrapper w-100 position-fixed" [class.hiddenBelow]='!(drawerIsOpen$ | async)'>
  <div class="body container-fluid bg-white border h-100"
    *ngIf="{ products: products$ | async, cartItems: cartItems$ | async } as data">
    <div class="tab px-3 bg-white position-absolute d-flex justify-content-between border border-bottom-0 rounded-top"
      (click)="toggleDrawer()">
      <span class="d-md-inline"> {{'COMMON.SELECTIONS' | translate}} </span>
      <apt-super-chevron direction="{{!(drawerIsOpen$ | async) ? 'up' : 'down'}}"></apt-super-chevron>
    </div>
    <div class="drawer-selection d-flex justify-content-between py-1 pb-4">
      <div class="pt-2">
        <button class="btn btn-raised shadow-none p-0 pl-md-2 pl-lg-2 pl-sm-2 pl-0 py-1 text-nowrap"
          *ngIf="data.products && data.products.length > 0" tooltip="{{'COMMON.PRODUCTS'| translate}}"
          [ngClass]="activePill==='Product' ? 'btn-primary' : 'btn-outline-primary'" (click)="setActivePill('Product')">
          {{ 'COMMON.PRODUCTS' | translate | truncate:7 }} ({{ data.products.length }})
          <button class="btn btn-link text-white p-0 mx-2" (click)="removeAllProducts($event)">
            <i class="fas fa-times"></i>
          </button>
        </button>
        <span class="pl-lg-3 pl-md-3 pl-sm-3 pl-0">
          <button class="btn btn-raised shadow-none p-0 pl-md-2 pl-lg-2 pl-sm-2 pl-0 py-1 text-nowrap" id="cartitem"
            *ngIf="data.cartItems && data.cartItems.length > 0" tooltip="{{'COMMON.CARTITEMS'| translate}}"
            [ngClass]="activePill==='CartItem' ? 'btn-primary' : 'btn-outline-primary'"
            (click)="setActivePill('CartItem')">
            {{ 'COMMON.CARTITEMS' | translate | truncate:7 }} ({{data.cartItems.length}})
            <button class="btn btn-link text-white p-0 mx-2" (click)="removeAllCartItems($event)">
              <i class="fas fa-times"></i>
            </button>
          </button>
        </span>
      </div>
      <apt-batch-action (actionFired)="onAction($event)" (actionBatchSelected)="onBatchAction($event)"
        [activePill]="activePill"></apt-batch-action>
    </div>
    <div class="row h-100">
      <div class="col-12">
        <div class="justify-content-center flex-column" *ngIf="data.products && data.products?.length > 0"
          [ngClass]="activePill === 'Product' ? 'd-flex': 'd-none'">
          <apt-product-carousel [productList]="data.products" [readonly]="true" [showCategory]="false"
            [showCode]="false" [showQty]="batchAction"></apt-product-carousel>
        </div>
        <div class="justify-content-center flex-column" *ngIf="data.cartItems && data.cartItems?.length > 0"
          [ngClass]="activePill === 'CartItem' ? 'd-flex': 'd-none'">
          <apt-product-carousel [cartItemList]="data.cartItems" [readonly]="true" [showCategory]="false"
            [showCode]="false"></apt-product-carousel>
        </div>
      </div>
    </div>
  </div>
</div>

./product-drawer.component.scss

.bannerWrapper {
  height: 20rem;
  bottom: 0px;
  pointer-events: none;
  transition: bottom 0.4s ease-in-out;
  z-index: 1000;

  &.hiddenBelow {
    bottom: -20rem;
  }

  .batchActionWrapper {
    overflow-y: auto;
  }

  .body {
    pointer-events: fill;

    .tab {
      left: -1px;
      top: -40px;
      line-height: 40px;
      cursor: pointer;
    }
  }
}