Update TypeDocs

src/app/shared/sidebar/filter/sidebar-filter.component.html

@@ -12,11 +12,13 @@
        class="sidebar-filter-wrapper" [ngClass]="{'closed' : closed}">
     <div>
       <div class="filters py-2">
-        <ds-sidebar-filter-selected-option
-          *ngFor="let value of (selectedValues | async)"
-          [label]="value"
-          (click)="removeValue.emit(value)">
-        </ds-sidebar-filter-selected-option>
+        <ng-template *ngIf="!singleValue">
+          <ds-sidebar-filter-selected-option
+            *ngFor="let value of (selectedValues | async)"
+            [label]="value"
+            (click)="removeValue.emit(value)">
+          </ds-sidebar-filter-selected-option>
+        </ng-template>
       </div>
       <ng-content></ng-content>
     </div>

src/app/shared/sidebar/filter/sidebar-filter.component.ts

@@ -9,14 +9,18 @@ import { slide } from '../../animations/slide';
   templateUrl: './sidebar-filter.component.html',
   animations: [slide],
 })
+/**
+ * This components renders a sidebar filter including the label and the selected values.
+ * The filter input itself should still be provided in the content.
+ */
 export class SidebarFilterComponent implements OnInit {
 
   @Input() name:string;
   @Input() type:string;
   @Input() label:string;
   @Input() expanded = true;
+  @Input() singleValue = false;
   @Input() selectedValues:Observable<string[]>;
-  @Output() submitValue:EventEmitter<any> = new EventEmitter<any>();
   @Output() removeValue:EventEmitter<any> = new EventEmitter<any>();
 
   /**
@@ -30,7 +34,7 @@ export class SidebarFilterComponent implements OnInit {
   collapsed$:Observable<boolean>;
 
   constructor(
-    protected filterService:SidebarFilterService
+    protected filterService:SidebarFilterService,
   ) {
   }
 
@@ -62,6 +66,7 @@ export class SidebarFilterComponent implements OnInit {
   }
 
   ngOnInit():void {
+    this.closed = !this.expanded;
     this.initializeFilter();
     this.collapsed$ = this.isCollapsed();
   }

src/app/shared/sidebar/filter/sidebar-filter.service.ts

@@ -10,6 +10,9 @@ import { Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { hasValue } from '../../empty.util';
 
+/**
+ * Service that performs all actions that have to do with sidebar filters like collapsing or expanding them.
+ */
 @Injectable()
 export class SidebarFilterService {
 

src/app/shared/sidebar/page-with-sidebar.component.ts

 import { Component, Input, OnInit, TemplateRef } from '@angular/core';
 import { SidebarService } from './sidebar.service';
 import { HostWindowService } from '../host-window.service';
-import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { pushInOut } from '../animations/push';
 import { map } from 'rxjs/operators';
 
@@ -11,6 +11,12 @@ import { map } from 'rxjs/operators';
   templateUrl: './page-with-sidebar.component.html',
   animations: [pushInOut],
 })
+/**
+ * This component takes care of displaying the sidebar properly on all viewports. It does not
+ * provide default buttons to open or close the sidebar. Instead the parent component is expected
+ * to provide the content of the sidebar through an input. The main content of the page goes in
+ * the template outlet (inside the page-width-sidebar tags).
+ */
 export class PageWithSidebarComponent implements OnInit {
   @Input() id:string;
   @Input() sidebarContent:TemplateRef<any>;

src/app/shared/sidebar/sidebar-dropdown.component.ts

@@ -5,6 +5,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./sidebar-dropdown.component.scss'],
   templateUrl: './sidebar-dropdown.component.html',
 })
+/**
+ * This components renders a sidebar dropdown including the label.
+ * The options should still be provided in the content.
+ */
 export class SidebarDropdownComponent {
   @Input() id:string;
   @Input() label:string;

src/app/shared/sidebar/sidebar.service.ts

@@ -11,7 +11,7 @@ const sidebarStateSelector = (state: AppState) => state.sidebar;
 const sidebarCollapsedSelector = createSelector(sidebarStateSelector, (sidebar: SidebarState) => sidebar.sidebarCollapsed);
 
 /**
- * Service that performs all actions that have to do with the search sidebar
+ * Service that performs all actions that have to do with the sidebar
  */
 @Injectable()
 export class SidebarService {