Display separator between ngFor components (#2359)

We currently remove the separator element when a `box-content-row`
is the last child. However, when we create these rows from ng templates
each row gets a separate template element wrapping it.
This PR tells the cipher-row component whether it is the last child

(cherry picked from commit b9fb223dea)

src/popup/components/cipher-row.component.html

@@ -5,6 +5,7 @@
   appStopClick
   title="{{ title }} - {{ cipher.name }}"
   class="box-content-row box-content-row-flex virtual-scroll-item"
+  [ngClass]="{ 'override-last': !last }"
 >
   <div class="row-main">
     <app-vault-icon [cipher]="cipher"></app-vault-icon>

src/popup/components/cipher-row.component.ts

@@ -11,6 +11,7 @@ export class CipherRowComponent {
   @Output() launchEvent = new EventEmitter<CipherView>();
   @Output() onView = new EventEmitter<CipherView>();
   @Input() cipher: CipherView;
+  @Input() last: boolean;
   @Input() showView = false;
   @Input() title: string;
 

src/popup/scss/box.scss

@@ -211,6 +211,13 @@
     }
   }
 
+  &.override-last:last-child:before {
+    border-bottom: 1px solid #000000;
+    @include themify($themes) {
+      border-bottom-color: themed("boxBorderColor");
+    }
+  }
+
   &.last:last-child:before {
     border-bottom: 1px solid #000000;
     @include themify($themes) {

src/popup/vault/ciphers.component.html

@@ -97,8 +97,9 @@
         </h2>
         <div class="box-content">
           <app-cipher-row
-            *cdkVirtualFor="let c of ciphers"
+            *cdkVirtualFor="let c of ciphers; let last = last"
             [cipher]="c"
+            [last]="last"
             title="{{ 'viewItem' | i18n }}"
             (onSelected)="selectCipher($event)"
             (launchEvent)="launchCipher($event)"