Add functionality to Action Button component to hide for non-internal users

src/app/home.component.ts

@@ -6,12 +6,13 @@ import { StacheNavLink } from './public/src/modules/nav';
   templateUrl: './home.component.html'
 })
 export class HomeComponent {
-  public actionButtonRoutes = [
+  public actionButtonRoutes: StacheNavLink[] = [
     {
       name: 'Action Button 1',
       path: '/demos',
       icon: 'book',
-      summary: 'Short summary here.'
+      summary: 'Short summary here.',
+      isInternal: true
     },
     {
       name: 'Action Button 2',
@@ -23,7 +24,8 @@ export class HomeComponent {
       name: 'Action Button 3',
       path: 'http://google.com',
       icon: 'certificate',
-      summary: 'Short summary here.'
+      summary: 'Short summary here.',
+      isInternal: true
     },
     {
       name: 'Action Button 4',

src/app/public/src/modules/action-buttons/action-buttons.component.html

@@ -1,27 +1,65 @@
 <div class="stache-action-buttons" *ngIf="routes.length">
   <div *ngIf="showSearch" class="stache-action-buttons-search-container">
-    <sky-search expandMode="fit"
+    <sky-search
+      expandMode="fit"
       [searchText]="searchText"
       (searchApply)="searchApplied($event)"
-      (keyup)="onKeyUp($event)">
+      (keyup)="onKeyUp($event)"
+    >
     </sky-search>
   </div>
   <stache-row>
     <nav class="stache-action-buttons-nav-container">
-      <stache-column screenSmall="6" screenMedium="4" screenLarge="3" *ngFor="let route of filteredRoutes">
-        <a stacheRouterLink="{{route.path}}" fragment="{{route.fragment}}" class="stache-action-button-override sky-action-button sky-btn-default sky-rounded-corners">
-          <div>
-            <sky-action-button-icon *ngIf="route.icon" iconType="{{route.icon}}">
-            </sky-action-button-icon>
-            <sky-action-button-header>
-              {{route.name}}
-            </sky-action-button-header>
-          </div>
-          <sky-action-button-details>
-            {{route.summary}}
-          </sky-action-button-details>
-        </a>
-      </stache-column>
+      <div *ngFor="let route of filteredRoutes">
+        <div *ngIf="route.isInternal">
+          <stache-internal>
+            <stache-column>
+              <a
+                stacheRouterLink="{{ route.path }}"
+                fragment="{{ route.fragment }}"
+                class="stache-action-button-override sky-action-button sky-btn-default sky-rounded-corners"
+              >
+                <div>
+                  <sky-action-button-icon
+                    *ngIf="route.icon"
+                    iconType="{{ route.icon }}"
+                  >
+                  </sky-action-button-icon>
+                  <sky-action-button-header>
+                    {{ route.name }}
+                  </sky-action-button-header>
+                </div>
+                <sky-action-button-details>
+                  {{ route.summary }}
+                </sky-action-button-details>
+              </a>
+            </stache-column>
+          </stache-internal>
+        </div>
+        <div *ngIf="!route.isInternal">
+          <stache-column>
+            <a
+              stacheRouterLink="{{ route.path }}"
+              fragment="{{ route.fragment }}"
+              class="stache-action-button-override sky-action-button sky-btn-default sky-rounded-corners"
+            >
+              <div>
+                <sky-action-button-icon
+                  *ngIf="route.icon"
+                  iconType="{{ route.icon }}"
+                >
+                </sky-action-button-icon>
+                <sky-action-button-header>
+                  {{ route.name }}
+                </sky-action-button-header>
+              </div>
+              <sky-action-button-details>
+                {{ route.summary }}
+              </sky-action-button-details>
+            </a>
+          </stache-column>
+        </div>
+      </div>
     </nav>
   </stache-row>
 </div>

src/app/public/src/modules/action-buttons/action-buttons.module.ts

@@ -7,6 +7,7 @@ import { SkySearchModule } from '@blackbaud/skyux/dist/modules/search';
 import { StacheGridModule } from '../grid';
 import { StacheActionButtonsComponent } from './action-buttons.component';
 import { StacheLinkModule } from '../link';
+import { StacheInternalModule } from '../internal';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import { StacheLinkModule } from '../link';
     SkyActionButtonModule,
     SkySearchModule,
     StacheLinkModule,
-    StacheGridModule
+    StacheGridModule,
+    StacheInternalModule
   ],
   exports: [
     StacheActionButtonsComponent

src/app/public/src/modules/nav/nav-link.ts

@@ -10,4 +10,5 @@ export interface StacheNavLink {
   isActive?: boolean;
   isCurrent?: boolean;
   showInNav?: boolean;
+  isInternal?: boolean;
 }