Gray out trash at last keymap instead of not rendering

src/components/keymap/header/keymap-header.component.html

@@ -21,12 +21,12 @@
            [title]="starTitle"
            (click)="setDefault()"
         ></i>
-        <i class="glyphicon glyphicon-trash keymap__remove pull-right" title=""
-            *ngIf="deletable"
-           data-toggle="tooltip"
-           data-placement="left"
-           data-original-title="Remove keymap"
-           (click)="removeKeymap()"
+        <i class="glyphicon glyphicon-trash keymap__remove pull-right" [title]="trashTitle"
+            [class.disabled]="!deletable"
+            data-toggle="tooltip"
+            data-placement="left"
+            data-original-title="Remove keymap"
+            (click)="removeKeymap()"
         ></i>
         <i class="fa fa-files-o keymap__duplicate pull-right" title=""
            data-toggle="tooltip"

src/components/keymap/header/keymap-header.component.scss

@@ -16,10 +16,14 @@
         font-size: 0.75em;
         top: 8px;
 
-        &:hover {
+        &:not(.disabled):hover {
             cursor: pointer;
             color: $icon-hover-delete;
         }
+
+        &.disabled {
+            opacity: 0.25;
+        }
     }
 
     &__duplicate {

src/components/keymap/header/keymap-header.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, Renderer, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    OnChanges,
+    Renderer,
+    SimpleChanges,
+    ViewChild
+} from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -21,11 +30,17 @@ export class KeymapHeaderComponent implements OnChanges {
     @ViewChild('abbr') keymapAbbr: ElementRef;
 
     private starTitle: string;
+    private trashTitle: string;
 
     constructor(private store: Store<AppState>, private renderer: Renderer) { }
 
-    ngOnChanges() {
-        this.setTitle();
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['keymap']) {
+            this.setKeymapTitle();
+        }
+        if (changes['deletable']) {
+            this.setTrashTitle();
+        }
     }
 
     setDefault() {
@@ -35,7 +50,9 @@ export class KeymapHeaderComponent implements OnChanges {
     }
 
     removeKeymap() {
-        this.store.dispatch(KeymapActions.removeKeymap(this.keymap.abbreviation));
+        if (this.deletable) {
+            this.store.dispatch(KeymapActions.removeKeymap(this.keymap.abbreviation));
+        }
     }
 
     duplicateKeymap() {
@@ -61,9 +78,13 @@ export class KeymapHeaderComponent implements OnChanges {
         this.store.dispatch(KeymapActions.editKeymapAbbr(this.keymap.abbreviation, newAbbr));
     }
 
-    setTitle(): void {
+    setKeymapTitle(): void {
         this.starTitle = this.keymap.isDefault
-        ? 'This is the default keymap which gets activated when powering the keyboard.'
-        : 'Makes this keymap the default keymap which gets activated when powering the keyboard.';
+            ? 'This is the default keymap which gets activated when powering the keyboard.'
+            : 'Makes this keymap the default keymap which gets activated when powering the keyboard.';
+    }
+
+    setTrashTitle(): void {
+        this.trashTitle = this.deletable ? '' : 'The last keymap cannot be deleted.';
     }
 }