feat(feature-discovery): add classes input to feature directive

Author: garygrossgarten

projects/core/src/lib/feature-discovery/feature-discovery.component.ts

@@ -7,7 +7,8 @@ import {
   ElementRef,
   Renderer2,
   Output,
-  EventEmitter
+  EventEmitter,
+  HostBinding
 } from '@angular/core';
 import {
   AnimationEvent,
@@ -66,6 +67,7 @@ export class FivFeatureDiscovery implements OnInit, AfterContentInit {
   contentOffset = 0;
   bounds: FeaturePosition;
   icon: string;
+  classes: string[];
   @ViewChild('circle', { static: true }) circle: ElementRef;
   @ViewChild('rect', { static: true }) rect: ElementRef;
   @ViewChild('pInner', { static: true, read: ElementRef })
@@ -81,6 +83,10 @@ export class FivFeatureDiscovery implements OnInit, AfterContentInit {
   @Output() fivOpen = new EventEmitter<any>();
   @Output() fivAnimation = new EventEmitter<AnimationEvent>();
 
+  @HostBinding('class') get _classes() {
+    return this.classes.join(' ');
+  }
+
   constructor(private renderer: Renderer2, private platform: Platform) {}
 
   ngOnInit() {}

projects/core/src/lib/feature-discovery/feature.directive.ts

@@ -27,6 +27,7 @@ export class FivFeature {
   @Input() contentOffset = 20;
   @Input() featurePadding = 20;
   @Input() clickEnabled = true;
+  @Input() classes: string[] = [];
   @Input() fivFeature: TemplateRef<any>;
   overlayRef: ComponentRef<FivFeatureDiscovery>;
 
@@ -73,6 +74,7 @@ export class FivFeature {
     featureOverlay.width = this.diameter;
     featureOverlay.featurePadding = this.featurePadding;
     featureOverlay.contentOffset = this.contentOffset;
+    featureOverlay.classes = this.classes;
     featureOverlay.setIcon(icon);
     featureOverlay.setBounds(bounds);
     featureOverlay.show();

src/app/pages/feature-discovery/feature-discovery.page.html

@@ -40,7 +40,7 @@
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button color="primary" (click)="log('FAB Clicked')">
       <!-- use the fiv-icon for cool icon effect -->
-      <fiv-icon #fab="fivFeature" [fivFeature]="fabContent" [featurePadding]="fp" [contentOffset]="co" name="add"
+      <fiv-icon [classes]="['cool','classes']" #fab="fivFeature" [fivFeature]="fabContent" [featurePadding]="fp" [contentOffset]="co" name="add"
         (fivFeatureClick)="log('feature click')" (fivWillOpen)="log('fiv will open')" (fivOpen)="log('fiv open')"
         (fivWillClose)="log('fiv will close')" (fivClose)="log('fiv close')">
       </fiv-icon>