Replace current toolbar with list-builder's multiselect toolbar

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.0",
     "@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.44.1",
+    "@blackbaud/skyux-builder": "1.33.0",
     "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.6"
   }
 }

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.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();
 }
@@ -529,32 +552,18 @@ describe('List View Checklist Component', () => {
     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();
-      tick();
-      fixture.detectChanges();
 
       toggleOnlyShowSelected(fixture);
 
       // 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(() => {
+    fit('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);
@@ -778,36 +786,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();