.

terminus-settings/src/buttonProvider.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { ToolbarButtonProvider, IToolbarButton, AppService } from 'terminus-core'
 
-import { SettingsTabComponent } from './components/settingsTab'
+import { SettingsTabComponent } from './components/settingsTab.component'
 
 
 @Injectable()

terminus-settings/src/components/hotkeyDisplay.pug

@@ -1,7 +0,0 @@
-.stroke(*ngFor='let stroke of model')
-    .key-container(
-        *ngFor='let key of splitKeys(stroke); let isLast = last; trackBy: key',
-        [@animateKey]='animate ? "in" : ""'
-    )
-        .key {{key}}
-        .plus(*ngIf='!isLast') +

terminus-settings/src/components/hotkeyDisplay.scss

@@ -1,26 +0,0 @@
-:host {
-    display: inline-block;
-
-    .stroke {
-        display: inline-block;
-        margin: 0 5px;
-        background: #222;
-        border-radius: 2px;
-        box-shadow: 0 1px 0 rgba(0,0,0,.5);
-        text-shadow: 0 1px 0 rgba(0,0,0,.5);
-
-        .key-container {
-            display: inline-block;
-
-            .key {
-                display: inline-block;
-                padding: 4px 5px;
-            }
-
-            .plus {
-                display: inline-block;
-                padding: 4px 2px;
-            }
-        }
-    }
-}

terminus-settings/src/components/hotkeyDisplay.ts

@@ -1,41 +0,0 @@
-import { Component, Input, trigger, style, animate, transition } from '@angular/core'
-
-
-@Component({
-    selector: 'hotkey-display',
-    template: require('./hotkeyDisplay.pug'),
-    styles: [require('./hotkeyDisplay.scss')],
-    //changeDetection: ChangeDetectionStrategy.OnPush,
-    animations: [
-        trigger('animateKey', [
-            transition('void => in', [
-                style({
-                    transform: 'translateX(25px)',
-                    opacity: '0',
-                }),
-                animate('250ms ease-out', style({
-                    transform: 'translateX(0)',
-                    opacity: '1',
-                }))
-            ]),
-            transition('in => void', [
-                style({
-                    transform: 'translateX(0)',
-                    opacity: '1',
-                }),
-                animate('250ms ease-in', style({
-                    transform: 'translateX(25px)',
-                    opacity: '0',
-                }))
-            ])
-        ])
-    ]
-})
-export class HotkeyDisplayComponent {
-    splitKeys(keys: string): string[] {
-        return keys.split('+').map((x) => x.trim())
-    }
-
-    @Input() model: string[]
-    @Input() animate = false
-}

terminus-settings/src/components/hotkeyInput.scss

@@ -1,14 +0,0 @@
-:host {
-    display: inline-block;
-    padding: 5px;
-
-    transition: 0.125s all;
-
-    &:hover:not(.active) {
-        background: rgba(255, 255, 255, .033);
-    }
-
-    &:active:not(.active) {
-        background: rgba(0, 0, 0, .1);
-    }
-}

terminus-settings/src/components/hotkeyInput.ts

@@ -1,33 +0,0 @@
-import { Component, Input, Output, EventEmitter, HostListener, ChangeDetectionStrategy } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-
-import { HotkeyInputModalComponent } from './hotkeyInputModal'
-
-
-@Component({
-  selector: 'hotkey-input',
-  template: `
-    <hotkey-display [model]='model'></hotkey-display>
-  `,
-  styles: [require('./hotkeyInput.scss')],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HotkeyInputComponent {
-    constructor(
-        private ngbModal: NgbModal,
-    ) { }
-
-    @HostListener('click') public click() {
-        this.ngbModal.open(HotkeyInputModalComponent).result.then((value: string[]) => {
-            this.model = value
-            this.modelChange.emit(this.model)
-        })
-    }
-
-    splitKeys(keys: string): string[] {
-        return keys.split('+').map((x) => x.trim())
-    }
-
-    @Input() model: string[]
-    @Output() modelChange = new EventEmitter()
-}

terminus-settings/src/components/hotkeyInputModal.component.ts

@@ -8,8 +8,8 @@ const INPUT_TIMEOUT = 1000
 
 @Component({
   selector: 'hotkey-input-modal',
-  template: require('./hotkeyInputModal.pug'),
-  styles: [require('./hotkeyInputModal.scss')],
+  template: require('./hotkeyInputModal.component.pug'),
+  styles: [require('./hotkeyInputModal.component.scss')],
   animations: [
       trigger('animateKey', [
           transition(':enter', [

terminus-settings/src/components/multiHotkeyInput.component.ts

@@ -1,12 +1,12 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { HotkeyInputModalComponent } from './hotkeyInputModal'
+import { HotkeyInputModalComponent } from './hotkeyInputModal.component'
 
 
 @Component({
   selector: 'multi-hotkey-input',
-  template: require('./multiHotkeyInput.pug'),
-  styles: [require('./multiHotkeyInput.scss')],
+  template: require('./multiHotkeyInput.component.pug'),
+  styles: [require('./multiHotkeyInput.component.scss')],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MultiHotkeyInputComponent {

terminus-settings/src/components/settingsTab.component.ts

@@ -6,10 +6,10 @@ import { SettingsTabProvider } from '../api'
 
 @Component({
   selector: 'settings-tab',
-  template: require('./settingsTab.pug'),
+  template: require('./settingsTab.component.pug'),
   styles: [
-    require('./settingsTab.scss'),
-    require('./settingsTab.deep.css'),
+    require('./settingsTab.component.scss'),
+    require('./settingsTab.deep.component.css'),
   ],
 })
 export class SettingsTabComponent extends BaseTabComponent {

terminus-settings/src/index.ts

@@ -6,12 +6,10 @@ import { Ng2FilterPipeModule } from 'ng2-filter-pipe'
 
 import { ToolbarButtonProvider, TabRecoveryProvider } from 'terminus-core'
 
-import { HotkeyInputComponent } from './components/hotkeyInput'
-import { HotkeyDisplayComponent } from './components/hotkeyDisplay'
-import { HotkeyInputModalComponent } from './components/hotkeyInputModal'
-import { MultiHotkeyInputComponent } from './components/multiHotkeyInput'
-import { SettingsTabComponent } from './components/settingsTab'
-import { SettingsTabBodyComponent } from './components/settingsTabBody'
+import { HotkeyInputModalComponent } from './components/hotkeyInputModal.component'
+import { MultiHotkeyInputComponent } from './components/multiHotkeyInput.component'
+import { SettingsTabComponent } from './components/settingsTab.component'
+import { SettingsTabBodyComponent } from './components/settingsTabBody.component'
 
 import { ButtonProvider } from './buttonProvider'
 import { RecoveryProvider } from './recoveryProvider'
@@ -33,8 +31,6 @@ import { RecoveryProvider } from './recoveryProvider'
         SettingsTabComponent,
     ],
     declarations: [
-        HotkeyDisplayComponent,
-        HotkeyInputComponent,
         HotkeyInputModalComponent,
         MultiHotkeyInputComponent,
         SettingsTabComponent,

terminus-settings/src/recoveryProvider.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { TabRecoveryProvider, AppService } from 'terminus-core'
 
-import { SettingsTabComponent } from './components/settingsTab'
+import { SettingsTabComponent } from './components/settingsTab.component'
 
 
 @Injectable()