made clickedOutside binding a directive instead of class

Author: nodeful

ui/src/app/modules/eqmac-components/components/dropdown/dropdown.component.ts

@@ -3,18 +3,17 @@ import { SelectBoxComponent } from '../select-box/select-box.component'
 import { UtilitiesService } from '../../services/utilities.service'
 import { InputFieldComponent } from '../input-field/input-field.component'
 import { FadeInOutAnimation } from 'src/app/modules/animations'
-import { ClickedOutsideComponent } from '../clicked-outside.component'
 
 @Component({
   selector: 'eqm-dropdown',
   templateUrl: './dropdown.component.html',
   styleUrls: ['./dropdown.component.scss'],
   animations: [ FadeInOutAnimation ]
 })
-export class DropdownComponent extends ClickedOutsideComponent implements OnInit {
+export class DropdownComponent implements OnInit {
   constructor (public utils: UtilitiesService, public zone: NgZone) {
-    super()
   }
+  
   public _items: any[] = []
   hasSelection = false
   @Input() editable = false

ui/src/app/modules/eqmac-components/components/select-box/select-box.component.ts

@@ -1,12 +1,11 @@
 import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core'
-import { ClickedOutsideComponent } from '../clicked-outside.component'
 
 @Component({
   selector: 'eqm-select-box',
   templateUrl: './select-box.component.html',
   styleUrls: ['./select-box.component.scss']
 })
-export class SelectBoxComponent extends ClickedOutsideComponent implements OnInit {
+export class SelectBoxComponent implements OnInit {
 
   _items: any[] = []
   @Input()
@@ -41,7 +40,6 @@ export class SelectBoxComponent extends ClickedOutsideComponent implements OnIni
   itemHeight = 25
 
   constructor (public host: ElementRef) {
-    super()
   }
 
   ngOnInit () {

…/components/clicked-outside.component.ts …/directives/clicked-outside.directive.tsui/src/app/modules/eqmac-components/components/clicked-outside.component.ts renamed to ui/src/app/modules/eqmac-components/directives/clicked-outside.directive.ts ui/src/app/modules/eqmac-components/components/clicked-outside.component.ts renamed to ui/src/app/modules/eqmac-components/directives/clicked-outside.directive.ts

@@ -1,10 +1,7 @@
-import { Component, EventEmitter, HostListener, Output } from "@angular/core";
+import { Component, Directive, EventEmitter, HostListener, Output } from "@angular/core";
 
-
-// @Component({
-//   template: ``
-// })
-export class ClickedOutsideComponent {
+@Directive({ selector: `[clickedOutside]` })
+export class ClickedOutsideDirective {
   @Output() clickedOutside = new EventEmitter()
 
   private inside = false

ui/src/app/modules/eqmac-components/eqmac-components.module.ts

@@ -45,7 +45,7 @@ import { PromptComponent } from './components/prompt/prompt.component'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CarouselComponent, CarouselItemDirective, CarouselItemElement } from './components/carousel/carousel.component'
 import { QuestionComponent } from './components/question/question.component'
-import { ClickedOutsideComponent } from './components/clicked-outside.component'
+import { ClickedOutsideDirective } from './directives/clicked-outside.directive'
 
 @NgModule({
   imports: [
@@ -56,6 +56,7 @@ import { ClickedOutsideComponent } from './components/clicked-outside.component'
     BrowserAnimationsModule
   ],
   declarations: [
+    ClickedOutsideDirective,
     KnobComponent,
     MouseWheelDirective,
     ValueScreenComponent,
@@ -85,6 +86,7 @@ import { ClickedOutsideComponent } from './components/clicked-outside.component'
     QuestionComponent
   ],
   exports: [
+    ClickedOutsideDirective,
     KnobComponent,
     ValueScreenComponent,
     ButtonComponent,

ui/src/app/sections/settings/settings.component.ts

@@ -5,14 +5,13 @@ import { ApplicationService } from '../../services/app.service'
 import { MatDialog } from '@angular/material/dialog'
 import { ConfirmDialogComponent } from '../../components/confirm-dialog/confirm-dialog.component'
 import { UIService } from '../../services/ui.service'
-import { ClickedOutsideComponent } from '../../modules/eqmac-components/components/clicked-outside.component'
 
 @Component({
   selector: 'eqm-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss']
 })
-export class SettingsComponent extends ClickedOutsideComponent implements OnInit {
+export class SettingsComponent implements OnInit {
   launchOnStartupOption: CheckboxOption = {
     key: 'launchOnStartup',
     type: 'checkbox',
@@ -96,7 +95,6 @@ export class SettingsComponent extends ClickedOutsideComponent implements OnInit
     public dialog: MatDialog,
     public ui: UIService
   ) {
-    super()
     this.getDriverReinstallAvailable()
   }