refacotr custom color entry component

src/app/feature-management/custom-color-entry/custom-color-entry.component.html

@@ -1,7 +1,7 @@
 <div class="entry">
   Color:
   <div class="color-preview" [ngStyle]="previewStyle"></div>
-  <span *ngIf="isDefaultColor">(Default)</span>
+  <span *ngIf="isDefaultColor">(default color)</span>
   <div class="controls">
 <!--    [(colorPicker)]="selectedColor"-->
     <i class="material-icons"

src/app/feature-management/custom-color-entry/custom-color-entry.component.scss

@@ -11,7 +11,7 @@
   }
 
   .color-preview {
-    margin-left: .5rem;
+    margin: 0 .5rem 0 .5rem;
     height: 2rem;
     width: 2rem;
     border: 2px solid;

src/app/feature-management/custom-color-entry/custom-color-entry.component.ts

@@ -14,14 +14,7 @@ import {Config} from "../../misc/Config";
 })
 export class CustomColorEntryComponent implements OnInit{
 
-  _colors: any;
+  @Input() colors: any;
-  @Input() set colors(value: any) {
-    this._colors = value;
-  }
-
-  get colors(): any {
-    return this._colors;
-  }
 
   private _selectedColor: any;
   set selectedColor(value: any) {
@@ -35,40 +28,28 @@ export class CustomColorEntryComponent implements OnInit{
   }
 
   // - default color properties
-  get defaultStrokeColor(): any {
-    return this.colors[CustomProperties.DEFAULT_COLOR_STROKE];
-  }
-
   get defaultStrokeColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.defaultStrokeColor);
+    const color = this.colors[CustomProperties.DEFAULT_COLOR_STROKE];
-  }
+    return Utils.colorArrayToRgba(color);
-
-  get defaultFillColor(): number[] {
-    return this.colors[CustomProperties.DEFAULT_COLOR_FILL];
   }
 
   get defaultFillColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.defaultFillColor);
+    const color = this.colors[CustomProperties.DEFAULT_COLOR_FILL];
+    return Utils.colorArrayToRgba(color);
   }
 
   // - not default color properties
-
-  get strokeColor(): any {
-    return this.colors[CustomProperties.COLOR_STROKE];
-  }
-
   get strokeColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.strokeColor);
+    const color = this.colors[CustomProperties.COLOR_STROKE];
-  }
+    return Utils.colorArrayToRgba(color);
-
-  get fillColor(): number[] {
-    return this.colors[CustomProperties.COLOR_FILL];
   }
 
   get fillColorAsRgba(): string {
-    return Utils.colorArrayToRgba(this.fillColor);
+    const color =  this.colors[CustomProperties.COLOR_FILL];
+    return Utils.colorArrayToRgba(color);
   }
 
+
   @Output('colorChanged') colorChangeEmitter: EventEmitter<any> = new EventEmitter();
 
   /**
@@ -95,7 +76,7 @@ export class CustomColorEntryComponent implements OnInit{
       'background-color': this.defaultFillColorAsRgba
     };
     this.isDefaultColor = true;
-    if (this.strokeColor) {
+    if (this.selectedColor) {
       styles = {
         'border-color': this.strokeColorAsRgba,
         'background-color': this.fillColorAsRgba
@@ -118,6 +99,7 @@ export class CustomColorEntryComponent implements OnInit{
   resetColor(){
     this.colors[CustomProperties.COLOR_STROKE] = null;
     this.colors[CustomProperties.COLOR_FILL] = null;
+    this._selectedColor = null;
     this.definePreviewStyle();
   }