feat(menu): add context menu

Closes #3

src/app/modules/menu/context/context-menu.html

@@ -0,0 +1,80 @@
+<ion-menu type="overlay" menuId="context" side="end">
+  <ion-card-header>
+    <ion-toolbar>
+      <ion-buttons slot="right">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>{{'menu.context.title' | translate | titlecase}}</ion-title>
+    </ion-toolbar>
+  </ion-card-header>
+  <ion-content>
+    <!--        Sort Context -->
+    <ion-radio-group class="context-sort" *ngIf="sortOption">
+      <ion-list-header>
+        <ion-icon name="swap"></ion-icon>
+        <ion-title>{{'menu.context.sort.title' | translate | titlecase}}</ion-title>
+      </ion-list-header>
+      <ion-item class="sort-item"
+                *ngFor="let value of sortOption.values, index as i"
+                (click)="sortChanged(sortOption, value)">
+        <ion-label>{{'menu.context.sort.' + value.value | translate | titlecase}}
+          <span *ngIf="sortOption.value === value.value && value.reversible">
+                  <ion-icon *ngIf="sortOption.reversed" name="arrow-dropdown"></ion-icon>
+                  <ion-icon *ngIf="!sortOption.reversed" name="arrow-dropup"></ion-icon>
+                </span>
+        </ion-label>
+        <ion-radio mode="ios" slot="start" [value]="value.value" [checked]="i == 0">
+
+        </ion-radio>
+      </ion-item>
+    </ion-radio-group>
+    <!--        Filter Context -->
+    <div class="context-filter" *ngIf="filterOption">
+      <ion-list-header>
+        <ion-icon name="funnel"></ion-icon>
+        <ion-title>{{'menu.context.filter.title' | translate | titlecase}}</ion-title>
+        <ion-button class="resetFilterButton" fill="clear" color="dark" (click)="resetFilter(filterOption)">
+          <ion-icon name="trash"></ion-icon>
+        </ion-button>
+      </ion-list-header>
+
+      <ion-list class="filter-group"
+                *ngFor="let facet of !filterOption.compact ?
+                filterOption.options.slice(0, compactFilterOptionCount) : filterOption.options">
+        <ion-list-header class="h3">
+          {{(facet.onlyOnType ?
+          getTranslatedPropertyName(facet.field, facet.onlyOnType)
+          : (getTranslatedPropertyName(facet.field))) | titlecase}}
+          {{facet.onlyOnType? ' | ' + (getTranslatedType(facet.onlyOnType) | titlecase) : ''}}
+        </ion-list-header>
+        <div *ngIf="facet.buckets.length > 0">
+          <ion-item
+                    *ngFor="let bucket of !facet.compact ?
+                              facet.buckets.slice(0, compactFilterOptionCount) : facet.buckets">
+            <ion-label class="filter-item-label">
+              ({{bucket.count}}) {{facet.field === 'type' ? (getTranslatedType(bucket.key) | titlecase) : bucket.key | titlecase}}
+            </ion-label>
+            <ion-checkbox
+                          mode="ios"
+                          [(ngModel)]="bucket.checked"
+                          (ngModelChange)="filterChanged()"
+                          [value]="{field: facet.field, value: bucket.key, onlyOnType: facet.onlyOnType}">
+
+            </ion-checkbox>
+          </ion-item>
+          <ion-button fill="clear"
+                      *ngIf="!facet.compact && facet.buckets.length > compactFilterOptionCount"
+                      (click)="facet.compact = true">
+            {{'menu.context.filter.showAll' | translate}}
+          </ion-button>
+        </div>
+      </ion-list>
+      <ion-button fill="clear"
+                  *ngIf="!filterOption.compact && filterOption.options.length > compactFilterOptionCount"
+                  (click)="filterOption.compact = true">
+        {{'menu.context.filter.showAll' | translate}}
+      </ion-button>
+    </div>
+  </ion-content>
+</ion-menu>
+<ion-router-outlet main></ion-router-outlet>