update branding color to be observable

projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.html

@@ -2,7 +2,10 @@
   class="go-accordion-panel"
   [ngClass]="containerClasses"
 >
-  <span #goAccordionPanelSelected class="go-accordion-panel--selected"></span>
+  <span
+    class="go-accordion-panel--selected"
+    [ngStyle]="{'background': brandColor}"
+  ></span>
   <header
     [attr.aria-expanded]="_expanded"
     class="go-accordion-panel__header"

projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss

@@ -8,20 +8,6 @@
   color: $theme-light-color;
   overflow: hidden;
   position: relative;
-
-  &::before {
-    @include transition(opacity);
-
-    background: $base-primary-gradient;
-    background-color: $base-primary;
-    content: '';
-    height: 100%;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    width: 4px;
-    z-index: 1;
-  }
 }
 
 .go-accordion-panel--first {
@@ -36,8 +22,14 @@
 }
 
 .go-accordion-panel--active {
-  &::before {
-    opacity: 1;
+  .go-accordion-panel--selected {
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    transition: all 0.25s ease-in;
+    width: 4px;
+    z-index: 1;
   }
 }
 

projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.ts

@@ -2,10 +2,9 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnChanges,
   OnInit,
   Output,
-  ViewEncapsulation,
-  OnChanges
 } from '@angular/core';
 
 import { accordionAnimation } from '../../animations/accordion.animation';
@@ -19,10 +18,11 @@ import { GoBrandingService } from '../../go-branding.service';
     accordionAnimation
   ]
 })
-export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnChanges {
+export class GoAccordionPanelComponent implements OnInit, OnChanges {
   _expanded: boolean = false; // Note: Use _expanded in the template
   containerClasses: object = {};
   headerClasses: object = {};
+  brandColor: string;
 
   @Input() borderless: boolean;
   @Input() heading: string;
@@ -45,15 +45,17 @@ export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnCh
 
   @Output() toggle: EventEmitter<void> = new EventEmitter<void>();
 
-  @ViewChild('goAccordionPanelSelected') selectedBinding: ElementRef;
-
   constructor(
     private brandingService: GoBrandingService
   ) { }
 
   ngOnInit(): void {
     // NOTE: `title` is deprecated and will be removed in later version
     this.heading = this.heading || this.title;
+
+    this.brandingService.brandColor.subscribe((value: string) => {
+      this.brandColor = value;
+    });
   }
 
   ngOnChanges(): void {
@@ -75,9 +77,4 @@ export class GoAccordionPanelComponent implements AfterContentInit, OnInit, OnCh
       'go-accordion-panel__header--slim': this.slim === true
     };
   }
-
-  ngAfterContentInit(): void {
-    this.selectedBinding.nativeElement.style.background = this.brandingService.brandColor;
-  }
-
 }

projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html

@@ -4,7 +4,10 @@
      [routerLinkActive]="['go-nav-item__link--active']"
      [routerLink]="[navItem.route]"
      [routerLinkActiveOptions]="{exact:true}">
-    <span #goNavItemSelected class="go-nav-item--selected"></span>
+    <span
+      class="go-nav-item--selected"
+      [ngStyle]="{'background': brandColor}"
+    ></span>
     <go-icon [icon]="navItem.routeIcon"
              iconClass="go-nav-group__icon"
              *ngIf="navItem.routeIcon">

projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { NavItem } from '../nav-item.model';
 import { GoSideNavService } from '../go-side-nav/go-side-nav.service';
 import { GoBrandingService } from '../../../go-branding.service';
@@ -8,17 +8,19 @@ import { GoBrandingService } from '../../../go-branding.service';
   templateUrl: './go-nav-item.component.html',
   styleUrls: ['./go-nav-item.component.scss']
 })
-export class GoNavItemComponent implements AfterContentInit {
-  @Input() navItem: NavItem;
+export class GoNavItemComponent implements OnInit {
+  brandColor: string;
 
-  @ViewChild('goNavItemSelected') selectedBinding: ElementRef;
+  @Input() navItem: NavItem;
 
   constructor (
     public navService: GoSideNavService,
     private brandingService: GoBrandingService
   ) { }
 
-  ngAfterContentInit(): void {
-    this.selectedBinding.nativeElement.style.background = this.brandingService.brandColor;
+  ngOnInit(): void {
+    this.brandingService.brandColor.subscribe((value: string) => {
+      this.brandColor = value;
+    });
   }
 }

projects/go-lib/src/lib/go-branding.service.ts

@@ -1,14 +1,11 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
 export class GoBrandingService {
-  brandColor: string;
-
-  constructor() {
-    this.brandColor = '#65B360';
-  }
+  brandColor: BehaviorSubject<string> = new BehaviorSubject<string>('#65B360');
 
   public setBrandColor(color: string): void {
-    this.brandColor = color;
+    this.brandColor.next(color);
   }
 }

projects/go-tester/src/app/app.component.ts

@@ -38,7 +38,7 @@ export class AppComponent implements OnInit {
     private goModalService: GoModalService
   ) { }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.goBrandingService.setBrandColor('#8A4EDE');
   }
 
@@ -62,7 +62,7 @@ export class AppComponent implements OnInit {
     );
   }
 
-  openToast() {
+  openToast(): void {
     this.goToasterService.toastInfo({ message: 'From the action sheet'});
   }
 }