Replace current toolbar with list-builder's multiselect toolbar

e2e/list-view-checklist.e2e-spec.ts

@@ -9,9 +9,6 @@ import {
 } from '@skyux-sdk/e2e';
 
 describe('list-view-checklist component', () => {
-  function validateScreenshot(done: DoneFn) {
-    expect('#screenshot-list-view-checklist').toMatchBaselineScreenshot(done);
-  }
 
   beforeEach(() => {
     SkyHostBrowser.get('visual/list-view-checklist');
@@ -23,26 +20,34 @@ describe('list-view-checklist component', () => {
     });
 
     it('should display checklist view', (done) => {
-      validateScreenshot(done);
+      expect('#screenshot-list-view-checklist').toMatchBaselineScreenshot(done, {
+        screenshotName: 'list-view-checklist-lg'
+      });
     });
 
     it('should display checklist view with checked', (done) => {
       element(by.css('.sky-list-view-checklist sky-checkbox')).click();
 
-      validateScreenshot(done);
+      expect('#screenshot-list-view-checklist').toMatchBaselineScreenshot(done, {
+        screenshotName: 'list-view-checklist-lg-checked'
+      });
     });
 
     it('should display only checked items when "only show selected items" is checked', (done) => {
       element(by.css('.sky-list-view-checklist sky-checkbox')).click();
-      element(by.css('#sky-list-view-checklist-show-selected')).click();
+      element(by.css('.sky-list-multiselect-toolbar sky-checkbox')).click();
 
-      validateScreenshot(done);
+      expect('#screenshot-list-view-checklist').toMatchBaselineScreenshot(done, {
+        screenshotName: 'list-view-checklist-lg-show-only-selected'
+      });
     });
 
     it('should display checklist view single select', (done) => {
       element(by.css('.sky-btn.sky-btn-primary')).click();
 
-      validateScreenshot(done);
+      expect('#screenshot-list-view-checklist').toMatchBaselineScreenshot(done, {
+        screenshotName: 'list-view-checklist-lg-single-select'
+      });
     });
   });
 
@@ -52,7 +57,9 @@ describe('list-view-checklist component', () => {
     });
 
     it('should display checklist view', (done) => {
-      validateScreenshot(done);
+      expect('#screenshot-list-view-checklist').toMatchBaselineScreenshot(done, {
+        screenshotName: 'list-view-checklist-xs'
+      });
     });
   });
 });

package.json

@@ -28,14 +28,14 @@
     "@angular/forms": ">=4.3.6",
     "@skyux/forms": "^3.0.0",
     "@skyux/i18n": "^3.5.0",
-    "@skyux/list-builder": "^3.0.0",
+    "@skyux/list-builder": "^3.2.1",
     "@skyux/list-builder-common": "^3.0.0",
     "microedge-rxstate": ">=2.0.2"
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.43.0",
-    "@blackbaud/skyux-builder": "1.32.1",
+    "@blackbaud/skyux": "2.45.0",
+    "@blackbaud/skyux-builder": "1.33.0",
     "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.6"
   }
 }

src/app/app-extras.module.ts

@@ -12,17 +12,10 @@ import {
 } from './public';
 
 @NgModule({
-  imports: [
-    SkyListModule,
-    SkyListToolbarModule,
-    SkyListViewChecklistModule
-  ],
   exports: [
     SkyListModule,
-    SkyListToolbarModule,
-    SkyListViewChecklistModule
-  ],
-  providers: [],
-  entryComponents: []
+    SkyListViewChecklistModule,
+    SkyListToolbarModule
+  ]
 })
 export class AppExtrasModule { }

src/app/public/modules/list-view-checklist/fixtures/list-view-checklist-toolbar.component.fixture.ts

@@ -1,21 +1,50 @@
 import {
   Component,
-  Inject
+  Inject,
+  ViewChild
 } from '@angular/core';
 
+import {
+  SkyCheckboxChange
+} from '@skyux/forms';
+
+import {
+  SkyListViewChecklistComponent
+} from '../list-view-checklist.component';
+
 @Component({
   selector: 'sky-test-cmp',
   templateUrl: './list-view-checklist-toolbar.component.fixture.html'
 })
 export class ListViewChecklistToolbarTestComponent {
+
   public selectedItems: Map<string, boolean>;
+
   public selectMode: string = 'multiple';
-  public showOnlySelected: boolean = false;
+
+  public showOnlySelected = false;
+
+  @ViewChild(SkyListViewChecklistComponent)
+  public checklist: SkyListViewChecklistComponent;
 
   constructor(@Inject('items') public items: any) {
   }
 
-  public selectedItemsChange(selectedMap: Map<string, boolean>) {
+  public selectedItemsChange(selectedMap: Map<string, boolean>): void {
     this.selectedItems = selectedMap;
   }
+
+  public selectAll(): void {
+    this.checklist.selectAll();
+  }
+
+  public clearAll(): void {
+    this.checklist.clearSelections();
+  }
+
+  public changeVisibleItems(checked: boolean): void {
+    let checkbox = new SkyCheckboxChange();
+    checkbox.checked = checked;
+    this.checklist.changeVisibleItems(checkbox);
+  }
 }

src/app/public/modules/list-view-checklist/list-view-checklist.component.html

@@ -50,36 +50,3 @@
     </ng-template>
   </div>
 </div>
-
-
-<ng-template #selectAllTemplate>
-  <button
-    class="sky-btn sky-btn-link sky-list-view-checklist-select-all"
-    (click)="selectAll(); false"
-  >
-    {{ 'skyux_checklist_select_all' | skyLibResources }}
-  </button>
-</ng-template>
-
-<ng-template #clearSelectionsTemplate>
-  <button
-    class="sky-btn sky-btn-link sky-list-view-checklist-clear-all"
-    (click)="clearSelections(); false"
-  >
-    {{ 'skyux_checklist_clear_all' | skyLibResources }}
-  </button>
-</ng-template>
-
-<ng-template #showSelectedTemplate>
-  <sky-checkbox
-    id="sky-list-view-checklist-show-selected"
-    [checked]="showOnlySelected"
-    (change)="changeVisibleItems($event)"
-  >
-    <sky-checkbox-label>
-      <div>
-        {{ 'skyux_checklist_show_selected' | skyLibResources }}
-      </div>
-    </sky-checkbox-label>
-  </sky-checkbox>
-</ng-template>

src/app/public/modules/list-view-checklist/list-view-checklist.component.scss

@@ -12,7 +12,3 @@
     }
   }
 }
-
-#sky-list-view-checklist-show-selected {
-  margin-left: $sky-margin;
-}

src/app/public/modules/list-view-checklist/list-view-checklist.component.spec.ts

@@ -76,9 +76,32 @@ import {
 } from './fixtures/list-view-checklist-pagination.component.fixture';
 
 //#region helpers
+function getSelectAllButton() {
+  return document.querySelectorAll('.sky-list-multiselect-toolbar button')[0] as HTMLElement;
+}
+
+function getClearAllButton() {
+  return document.querySelectorAll('.sky-list-multiselect-toolbar button')[1] as HTMLElement;
+}
+
+function getOnlyShowSelectedCheckbox() {
+  return document.querySelector('.sky-list-multiselect-toolbar input') as HTMLElement;
+}
+
+function clickSelectAllButton(fixture: ComponentFixture<any>) {
+  getSelectAllButton().click();
+  tick();
+  fixture.detectChanges();
+}
+
+function clickClearAllButton(fixture: ComponentFixture<any>) {
+  getClearAllButton().click();
+  tick();
+  fixture.detectChanges();
+}
+
 function toggleOnlyShowSelected(fixture: ComponentFixture<any>) {
-  let checkboxes = document.querySelectorAll('#input-sky-list-view-checklist-show-selected');
-  (checkboxes.item(0) as HTMLElement).click();
+  getOnlyShowSelectedCheckbox().click();
   tick();
   fixture.detectChanges();
 }
@@ -526,11 +549,7 @@ describe('List View Checklist Component', () => {
       expect(checkboxes.length).toBeGreaterThan(visibleCheckboxesLength);
     }));
 
-    it('should handle items properly if \'showOnlySelected\' property is set & user click clear all & select all link', fakeAsync(() => {
-      tick();
-      fixture.detectChanges();
-      let checkboxes = document.querySelectorAll('.sky-list-view-checklist sky-checkbox input');
-      (checkboxes.item(0) as HTMLElement).click();
+    it('should handle items properly if \'showOnlySelected\' property is set & user clicks clear all & select all', fakeAsync(() => {
       tick();
       fixture.detectChanges();
 
@@ -539,22 +558,12 @@ describe('List View Checklist Component', () => {
       // check number of checkboxes visible when showOnlySection is selected.
       let checkboxesLength = document.querySelectorAll('.sky-list-view-checklist sky-checkbox input').length;
 
-      let selectAllEl = <HTMLButtonElement>nativeElement
-        .querySelector('.sky-list-view-checklist-select-all');
-
-      selectAllEl.click();
-      tick();
-      fixture.detectChanges();
+      clickSelectAllButton(fixture);
 
       let updatedLength = document.querySelectorAll('.sky-list-view-checklist sky-checkbox input').length;
       expect(checkboxesLength).toEqual(updatedLength);
 
-      let clearAllEl = <HTMLButtonElement>nativeElement
-        .querySelector('.sky-list-view-checklist-clear-all');
-
-      clearAllEl.click();
-      tick();
-      fixture.detectChanges();
+      clickClearAllButton(fixture);
 
       updatedLength = document.querySelectorAll('.sky-list-view-checklist sky-checkbox input').length;
       expect(updatedLength).toEqual(0);
@@ -594,19 +603,22 @@ describe('List View Checklist Component', () => {
       });
     }));
 
-    it('should select all and clear all properly', fakeAsync(() => {
+    it('should select all and clear all properly when not all items are displayed', fakeAsync(() => {
+      tick();
+      fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      let selectAllEl = <HTMLButtonElement>nativeElement
-        .querySelector('.sky-list-view-checklist-select-all');
 
-      let clearAllEl = <HTMLButtonElement>nativeElement
-        .querySelector('.sky-list-view-checklist-clear-all');
+      tick();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
 
-      selectAllEl.click();
       tick();
       fixture.detectChanges();
 
+      clickSelectAllButton(fixture);
+
       expect(component.selectedItems.get('1')).toBe(true);
       expect(component.selectedItems.get('2')).toBe(true);
       expect(component.selectedItems.get('3')).toBe(true);
@@ -625,9 +637,7 @@ describe('List View Checklist Component', () => {
       tick();
       fixture.detectChanges();
 
-      clearAllEl.click();
-      tick();
-      fixture.detectChanges();
+      clickClearAllButton(fixture);
 
       expect(component.selectedItems.get('1')).toBe(true);
       expect(component.selectedItems.get('2')).toBe(true);
@@ -637,9 +647,7 @@ describe('List View Checklist Component', () => {
       expect(component.selectedItems.get('6')).toBe(false);
       expect(component.selectedItems.get('7')).toBe(false);
 
-      selectAllEl.click();
-      tick();
-      fixture.detectChanges();
+      clickSelectAllButton(fixture);
 
       expect(component.selectedItems.get('1')).toBe(true);
       expect(component.selectedItems.get('2')).toBe(true);
@@ -662,6 +670,32 @@ describe('List View Checklist Component', () => {
       fixture.detectChanges();
     }));
 
+    it('should handle items properly if changeVisibleItems() is set to true & selectAll() / clearAll() methods are hit (DEPRECATED)', fakeAsync(() => {
+      tick();
+      fixture.detectChanges();
+
+      component.changeVisibleItems(true);
+      tick();
+      fixture.detectChanges();
+
+      // check number of checkboxes visible when showOnlySection is selected.
+      let checkboxesLength = document.querySelectorAll('.sky-list-view-checklist sky-checkbox input').length;
+
+      component.selectAll();
+      tick();
+      fixture.detectChanges();
+
+      let updatedLength = document.querySelectorAll('.sky-list-view-checklist sky-checkbox input').length;
+      expect(checkboxesLength).toEqual(updatedLength);
+
+      component.clearAll();
+      tick();
+      fixture.detectChanges();
+
+      updatedLength = document.querySelectorAll('.sky-list-view-checklist sky-checkbox input').length;
+      expect(updatedLength).toEqual(0);
+    }));
+
   });
 
   describe('Models and State', () => {
@@ -778,36 +812,20 @@ describe('List View Checklist Component', () => {
 
         tick();
         fixture.detectChanges();
-        let selectAllEl = nativeElement
-          .querySelector('.sky-list-view-checklist-select-all');
-
-        let clearAllEl = nativeElement
-          .querySelector('.sky-list-view-checklist-clear-all');
 
-        let showOnlySelected = nativeElement
-          .querySelector('.sky-toolbar-item sky-checkbox');
-
-        expect(selectAllEl).not.toBeNull();
-        expect(clearAllEl).not.toBeNull();
-        expect(showOnlySelected).not.toBeNull();
+        expect(getSelectAllButton()).not.toBeUndefined();
+        expect(getClearAllButton()).not.toBeUndefined();
+        expect(getOnlyShowSelectedCheckbox()).not.toBeUndefined();
 
         component.selectMode = 'single';
         tick();
         fixture.detectChanges();
         tick();
         fixture.detectChanges();
-        selectAllEl = nativeElement
-          .querySelector('.sky-list-view-checklist-select-all');
-
-        clearAllEl = nativeElement
-          .querySelector('.sky-list-view-checklist-clear-all');
-
-        showOnlySelected = nativeElement
-          .querySelector('.sky-toolbar-item sky-checkbox');
 
-        expect(selectAllEl).toBeNull();
-        expect(clearAllEl).toBeNull();
-        expect(showOnlySelected).toBeNull();
+        expect(getSelectAllButton()).toBeUndefined();
+        expect(getClearAllButton()).toBeUndefined();
+        expect(getOnlyShowSelectedCheckbox()).toBeNull();
 
         let toolbarSectionsEl = nativeElement.querySelectorAll('sky-toolbar-section');
         expect((toolbarSectionsEl.item(1) as any).attributes['hidden']).not.toBeUndefined();