Added ability to have items on the right side of a toolbar

src/app/app-extras.module.ts

@@ -20,7 +20,8 @@ import {
  import {
    SkyAlertModule,
    SkyKeyInfoModule,
-   SkyLabelModule
+   SkyLabelModule,
+   SkyIconModule
  } from '@skyux/indicators';
 
 @NgModule({
@@ -31,6 +32,7 @@ import {
     SkyCardModule,
     SkyDefinitionListModule,
     SkyFluidGridModule,
+    SkyIconModule,
     SkyKeyInfoModule,
     SkyPageSummaryModule,
     SkyTextExpandModule,
@@ -44,6 +46,7 @@ import {
     SkyCardModule,
     SkyDefinitionListModule,
     SkyFluidGridModule,
+    SkyIconModule,
     SkyKeyInfoModule,
     SkyLabelModule,
     SkyPageSummaryModule,

src/app/public/modules/toolbar/toolbar-view-actions.component.html

@@ -0,0 +1,5 @@
+<div
+  class="sky-toolbar-view-actions"
+>
+  <ng-content></ng-content>
+</div>

src/app/public/modules/toolbar/toolbar-view-actions.component.scss

@@ -0,0 +1,19 @@
+@import "~@skyux/theme/scss/mixins";
+
+:host {
+  margin-left: auto;
+}
+
+.sky-toolbar-view-actions {
+
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $sky-screen-sm-max) {
+    margin-bottom: 5px;
+  }
+}
+
+.sky-toolbar-view-actions ::ng-deep > :not(:last-child) {
+  margin-right: 5px;
+}

src/app/public/modules/toolbar/toolbar-view-actions.component.ts

@@ -0,0 +1,10 @@
+import {
+    Component
+  } from '@angular/core';
+
+  @Component({
+    selector: 'sky-toolbar-view-actions',
+    templateUrl: './toolbar-view-actions.component.html',
+    styleUrls: ['./toolbar-view-actions.component.scss']
+  })
+  export class SkyToolbarViewActionsComponent { }

src/app/public/modules/toolbar/toolbar.module.ts

@@ -1,23 +1,42 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  NgModule
+} from '@angular/core';
 
-import { SkyToolbarComponent } from './toolbar.component';
-import { SkyToolbarItemComponent } from './toolbar-item.component';
-import { SkyToolbarSectionComponent } from './toolbar-section.component';
+import {
+  CommonModule
+} from '@angular/common';
+
+import {
+  SkyToolbarComponent
+} from './toolbar.component';
+
+import {
+  SkyToolbarItemComponent
+} from './toolbar-item.component';
+
+import {
+  SkyToolbarSectionComponent
+} from './toolbar-section.component';
+
+import {
+  SkyToolbarViewActionsComponent
+} from './toolbar-view-actions.component';
 
 @NgModule({
   declarations: [
     SkyToolbarComponent,
     SkyToolbarItemComponent,
-    SkyToolbarSectionComponent
+    SkyToolbarSectionComponent,
+    SkyToolbarViewActionsComponent
   ],
   imports: [
     CommonModule
   ],
   exports: [
     SkyToolbarComponent,
     SkyToolbarItemComponent,
-    SkyToolbarSectionComponent
+    SkyToolbarSectionComponent,
+    SkyToolbarViewActionsComponent
   ]
 })
 export class SkyToolbarModule { }

src/app/visual/toolbar/toolbar-visual.component.html

@@ -1,24 +1,67 @@
-<div id="screenshot-toolbar">
+<div
+  id="screenshot-toolbar"
+>
   <sky-toolbar>
     <sky-toolbar-item>
-      <button class="sky-btn sky-btn-default">Button 1</button>
+      <button
+        class="sky-btn sky-btn-default"
+      >
+        Button 1
+      </button>
     </sky-toolbar-item>
     <sky-toolbar-item>
-      <button class="sky-btn sky-btn-default">Button 2</button>
+      <button
+        class="sky-btn sky-btn-default"
+      >
+        Button 2
+      </button>
     </sky-toolbar-item>
+    <sky-toolbar-view-actions>
+      <button
+        class="sky-btn sky-btn-default"
+        title="Sort descending"
+        type="button"
+      >
+        <sky-icon
+          icon="angle-double-down"
+        >
+        </sky-icon>
+      </button>
+      <button
+        class="sky-btn sky-btn-default"
+        title="Sort ascending"
+        type="button"
+      >
+        <sky-icon
+          icon="angle-double-up"
+        >
+        </sky-icon>
+      </button>
+    </sky-toolbar-view-actions>
   </sky-toolbar>
 </div>
 
-<div id="screenshot-toolbar-sectioned" style="margin-top: 20px;">
+<div
+  id="screenshot-toolbar-sectioned"
+  style="margin-top: 20px;"
+>
   <sky-toolbar>
     <sky-toolbar-section>
       <sky-toolbar-item>
-        <button class="sky-btn sky-btn-default">Button 1</button>
+        <button
+          class="sky-btn sky-btn-default"
+        >
+          Button 1
+        </button>
       </sky-toolbar-item>
     </sky-toolbar-section>
     <sky-toolbar-section>
       <sky-toolbar-item>
-        <button class="sky-btn sky-btn-default">Button 2</button>
+        <button
+          class="sky-btn sky-btn-default"
+        >
+          Button 2
+        </button>
       </sky-toolbar-item>
     </sky-toolbar-section>
   </sky-toolbar>

src/app/visual/toolbar/toolbar-visual.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import {
+  Component
+} from '@angular/core';
 
 @Component({
   selector: 'toolbar-visual',