disable column editing when clicking out

src/app/components/stream/stream-edition/stream-edition.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, HostListener, ElementRef, Output, EventEmitter } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { faChevronLeft, faChevronRight, faTimes } from "@fortawesome/free-solid-svg-icons";
 
@@ -18,21 +18,40 @@ export class StreamEditionComponent implements OnInit {
     hideReplies: boolean;
     hideBots: boolean;
 
+    private init: boolean;
+
     @Input() streamElement: StreamElement;
 
-    constructor(private readonly store: Store) { }
+    @Output('closed') public closedEvent = new EventEmitter();
+
+    @HostListener('document:click', ['$event'])
+    clickout(event) {
+        if (!this.init) return;
+
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.closedEvent.emit(null);
+        }
+    }
+
+    constructor(
+        private readonly store: Store,
+        private eRef: ElementRef) { }
 
     ngOnInit() {
         this.hideBoosts = this.streamElement.hideBoosts;
         this.hideReplies = this.streamElement.hideReplies;
         this.hideBots = this.streamElement.hideBots;
+
+        setTimeout(() => {
+            this.init = true;
+        }, 0);
     }
 
     settingsChanged(): boolean {
         this.streamElement.hideBoosts = this.hideBoosts;
         this.streamElement.hideReplies = this.hideReplies;
         this.streamElement.hideBots = this.hideBots;
-        
+
         this.store.dispatch([new UpdateStream(this.streamElement)]);
         return false;
     }

src/app/components/stream/stream.component.html

@@ -16,7 +16,9 @@
         </a>
     </div>
 
-    <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" [streamElement]="streamElement">
+    <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" 
+        [streamElement]="streamElement"
+        (closed)="streamEditionClosed()">
     </app-stream-edition>
 
     <app-stream-statuses class="stream-statuses"

src/app/components/stream/stream.component.ts

@@ -95,5 +95,10 @@ export class StreamComponent implements OnInit {
         this.editionPanelIsOpen = !this.editionPanelIsOpen;
         return false;
     }
+
+    streamEditionClosed(): boolean {
+        this.editionPanelIsOpen = false;
+        return false;
+    }
 }