View actions upgrade

package.json

@@ -32,7 +32,7 @@
     "@skyux/animations": "^3.0.0",
     "@skyux/forms": "^3.0.0",
     "@skyux/indicators": "^3.0.0",
-    "@skyux/layout": "^3.0.0",
+    "@skyux/layout": "^3.1.0",
     "@skyux/list-builder-common": "^3.0.0",
     "@skyux/lists": "^3.0.0",
     "@skyux/lookup": "^3.0.0",
@@ -41,8 +41,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.43.0",
-    "@blackbaud/skyux-builder": "1.32.1",
-    "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.6"
+    "@blackbaud/skyux": "2.47.0",
+    "@blackbaud/skyux-builder": "1.33.1",
+    "@skyux-sdk/builder-plugin-skyux": "1.0.0"
   }
 }

src/app/public/modules/list-toolbar/list-multiselect-toolbar.component.html

@@ -14,14 +14,9 @@
       >
       </sky-list-toolbar-item-renderer>
     </sky-toolbar-item>
-    <sky-list-toolbar-view-actions>
-      <sky-toolbar-item>
-        <sky-list-toolbar-item-renderer
-          [template]="showSelectedTemplate"
-        >
-        </sky-list-toolbar-item-renderer>
-      </sky-toolbar-item>
-    </sky-list-toolbar-view-actions>
+    <sky-toolbar-view-actions>
+      <ng-container *ngTemplateOutlet="showSelectedTemplate"></ng-container>
+    </sky-toolbar-view-actions>
   </sky-toolbar-section>
 </sky-toolbar>
 

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

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

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

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

src/app/public/modules/list-toolbar/list-toolbar.component.html

@@ -28,8 +28,12 @@
 
       <ng-content></ng-content>
 
-      <ng-content select="sky-list-toolbar-view-actions">
-      </ng-content>
+      <sky-toolbar-view-actions *ngIf="hasViewActions">
+        <ng-content
+          select="sky-list-toolbar-view-actions"
+        >
+        </ng-content>
+      </sky-toolbar-view-actions>
     </sky-toolbar-section>
 
     <sky-toolbar-section *ngIf="showFilterSummary && (hasAppliedFilters | async)">
@@ -76,6 +80,13 @@
           </sky-list-toolbar-item-renderer>
         </sky-toolbar-item>
         <ng-content></ng-content>
+
+        <sky-toolbar-view-actions *ngIf="hasViewActions">
+          <ng-content
+            select="sky-list-toolbar-view-actions"
+          >
+          </ng-content>
+        </sky-toolbar-view-actions>
       </sky-toolbar-section>
     </sky-toolbar>
   </div>

src/app/public/modules/list-toolbar/list-toolbar.component.ts

@@ -15,11 +15,15 @@ import {
 import {
   Observable
 } from 'rxjs/Observable';
+
 import {
   Subject
 } from 'rxjs/Subject';
+
 import 'rxjs/add/operator/distinctUntilChanged';
+
 import 'rxjs/add/operator/take';
+
 import 'rxjs/add/operator/takeUntil';
 
 import {
@@ -31,9 +35,9 @@ import {
 } from '@skyux/list-builder-common';
 
 import {
-  SkyListFilterSummaryComponent,
-  SkyListFilterInlineComponent
-} from '../list-filters';
+  SkySearchComponent
+} from '@skyux/lookup';
+
 import {
   ListToolbarModel,
   ListToolbarItemModel,
@@ -44,16 +48,23 @@ import {
   ListFilterModel,
   ListPagingSetPageNumberAction
 } from '../list/state';
+
+import {
+  SkyListFilterSummaryComponent,
+  SkyListFilterInlineComponent
+} from '../list-filters';
+
 import {
   SkyListToolbarItemComponent
 } from './list-toolbar-item.component';
+
 import {
   SkyListToolbarSortComponent
 } from './list-toolbar-sort.component';
 
 import {
-  SkySearchComponent
-} from '@skyux/lookup';
+  SkyListToolbarViewActionsComponent
+} from './list-toolbar-view-actions.component';
 
 import {
   ListToolbarConfigSetSearchEnabledAction,
@@ -122,6 +133,7 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
   public hasInlineFilters: boolean;
   public inlineFilterBarExpanded: boolean = false;
   public hasAdditionalToolbarSection = false;
+  public hasViewActions = false;
 
   public filterButtonId: string = `sky-list-toolbar-filter-button-${++nextId}`;
   public listFilterInlineId: string = `sky-list-toolbar-filter-inline-${++nextId}`;
@@ -138,6 +150,9 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
   @ContentChildren(SkyListFilterInlineComponent)
   private inlineFilter: QueryList<SkyListFilterInlineComponent>;
 
+  @ContentChildren(SkyListToolbarViewActionsComponent)
+  private viewActions: QueryList<SkyListToolbarViewActionsComponent>;
+
   @ViewChild('search')
   private searchTemplate: TemplateRef<any>;
 
@@ -332,6 +347,9 @@ export class SkyListToolbarComponent implements OnInit, AfterContentInit, OnDest
         ]
       );
     }
+
+    // Check for view actions
+    this.hasViewActions = (this.viewActions.length > 0);
   }
 
   public ngOnDestroy() {

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

@@ -23,6 +23,22 @@ <h2>Basic toolbar</h2>
         [descending]="false">
       </sky-list-toolbar-sort>
       <sky-list-toolbar-view-actions>
+        <button
+          class="sky-btn"
+        >
+          <sky-icon
+            icon="angle-up"
+          >
+          </sky-icon>
+        </button>
+        <button
+          class="sky-btn"
+        >
+          <sky-icon
+            icon="angle-down"
+          >
+          </sky-icon>
+        </button>
         <div
           class="sky-switch-icon-group"
         >