Added row iterator properties

e2e/flyout.e2e-spec.ts

@@ -47,4 +47,36 @@ describe('Flyout', () => {
     expect('body').toMatchBaselineScreenshot(done);
     element(by.css('.sky-flyout .sky-flyout-btn-close')).click();
   });
+
+  it('should match previous screenshot when row iterators are enabled', (done) => {
+    SkyHostBrowser.get('visual/flyout');
+    SkyHostBrowser.setWindowBreakpoint('lg');
+    element(by.css('#open-flyout-with-iterators')).click();
+    expect('body').toMatchBaselineScreenshot(done);
+    element(by.css('.sky-flyout .sky-flyout-btn-close')).click();
+  });
+
+  it('should match previous screenshot when row iterators are enabled (screen: xs)', (done) => {
+    SkyHostBrowser.get('visual/flyout');
+    SkyHostBrowser.setWindowBreakpoint('xs');
+    element(by.css('#open-flyout-with-iterators')).click();
+    expect('body').toMatchBaselineScreenshot(done);
+    element(by.css('.sky-flyout .sky-flyout-btn-close')).click();
+  });
+
+  it('should match previous screenshot when row iterators are disabled', (done) => {
+    SkyHostBrowser.get('visual/flyout');
+    SkyHostBrowser.setWindowBreakpoint('lg');
+    element(by.css('#open-flyout-with-iterators-disabled')).click();
+    expect('body').toMatchBaselineScreenshot(done);
+    element(by.css('.sky-flyout .sky-flyout-btn-close')).click();
+  });
+
+  it('should match previous screenshot when row iterator are disabled (screen: xs)', (done) => {
+    SkyHostBrowser.get('visual/flyout');
+    SkyHostBrowser.setWindowBreakpoint('xs');
+    element(by.css('#open-flyout-with-iterators-disabled')).click();
+    expect('body').toMatchBaselineScreenshot(done);
+    element(by.css('.sky-flyout .sky-flyout-btn-close')).click();
+  });
 });

package.json

@@ -34,8 +34,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.28.1",
-    "@blackbaud/skyux-builder": "1.28.0",
+    "@blackbaud/skyux": "2.34.0",
+    "@blackbaud/skyux-builder": "1.30.0",
     "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.5"
   }
 }

src/app/public/modules/flyout/flyout-instance.ts

@@ -1,5 +1,6 @@
 import {
-  EventEmitter
+  EventEmitter,
+  OnDestroy
 } from '@angular/core';
 
 import {
@@ -11,11 +12,16 @@ import {
   SkyFlyoutMessageType
 } from './types';
 
-export class SkyFlyoutInstance<T> {
+export class SkyFlyoutInstance<T> implements OnDestroy {
   public closed = new EventEmitter<void>();
   public componentInstance: T;
   public isOpen = true;
 
+  public iterator = {
+    previousButtonClick: new EventEmitter<void>(),
+    nextButtonClick: new EventEmitter<void>()
+  };
+
   // Used to communicate with the host component.
   public get hostController(): Subject<SkyFlyoutMessage> {
     return this._hostController;
@@ -29,6 +35,11 @@ export class SkyFlyoutInstance<T> {
     });
   }
 
+  public ngOnDestroy() {
+    this.iterator.previousButtonClick.complete();
+    this.iterator.nextButtonClick.complete();
+  }
+
   public close() {
     this.hostController.next({
       type: SkyFlyoutMessageType.Close

src/app/public/modules/flyout/flyout.component.html

@@ -26,8 +26,35 @@
     (mousedown)="onMouseDown($event)" />
 
   <div class="sky-flyout-header sky-padding-squish-large" #flyoutHeader>
-    <div class="sky-flyout-header-content"></div>
-    <div class="sky-flyout-header-buttons">
+    <div class="sky-flyout-header-content">
+
+      <div *ngIf="config?.iterator"
+        id="row-iterators"
+      >
+        <button
+          class="sky-btn sky-btn-default"
+          [attr.aria-label]="'skyux_flyout_iterator_previous_button' | skyLibResources"
+          [disabled]="config.iterator.previousButtonDisabled"
+          (click)="onIteratorPreviousClick()"
+        >
+          <sky-icon
+            icon="chevron-up"
+          ></sky-icon>
+        </button>
+        <button
+          class="sky-btn sky-btn-default"
+          [attr.aria-label]="'skyux_flyout_iterator_next_button' | skyLibResources"
+          [disabled]="config.iterator.nextButtonDisabled"
+          (click)="onIteratorNextClick()"
+        >
+        <sky-icon
+          icon="chevron-down"
+        ></sky-icon>
+        </button>
+      </div>
+
+    </div>
+      <div class="sky-flyout-header-buttons">
       <ng-container *ngTemplateOutlet="permalinkTemplate">
       </ng-container>
       <ng-container *ngTemplateOutlet="primaryActionTemplate">

src/app/public/modules/flyout/flyout.component.spec.ts

@@ -652,4 +652,124 @@ describe('Flyout component', () => {
       })
     );
   });
+
+  describe('row iterator', () => {
+    function getIteratorButtons() {
+      return document.querySelectorAll('#row-iterators button') as NodeListOf<HTMLButtonElement>;
+    }
+
+    it('should not show iterator buttons if config.iterator is undefined', fakeAsync(() => {
+      openFlyout();
+      const iteratorButtons = getIteratorButtons();
+      expect(iteratorButtons.length).toEqual(0);
+    }));
+
+    it('should show iterator buttons if config.iterator is defined', fakeAsync(() => {
+      openFlyout({
+        iterator: {
+          previousButtonDisabled: false,
+          nextButtonDisabled: false
+        }
+      });
+      const iteratorButtons = getIteratorButtons();
+      expect(iteratorButtons.length).toEqual(2);
+      expect(iteratorButtons[0].disabled).toBeFalsy();
+      expect(iteratorButtons[1].disabled).toBeFalsy();
+    }));
+
+    it('should disable iterator buttons if config.iterator contains truthy isDisabled properties', fakeAsync(() => {
+      openFlyout({
+        iterator: {
+          previousButtonDisabled: true,
+          nextButtonDisabled: true
+        }
+      });
+      const iteratorButtons = getIteratorButtons();
+      expect(iteratorButtons.length).toEqual(2);
+      expect(iteratorButtons[0].disabled).toBeTruthy();
+      expect(iteratorButtons[1].disabled).toBeTruthy();
+    }));
+
+    it('should emit if previous button is clicked', fakeAsync(() => {
+      let previousCalled = false;
+      let nextCalled = false;
+
+      const flyoutInstance = openFlyout({
+        iterator: {
+          previousButtonDisabled: false,
+          nextButtonDisabled: false
+        }
+      });
+
+      flyoutInstance.iterator.previousButtonClick.subscribe(() => {
+        previousCalled = true;
+      });
+
+      flyoutInstance.iterator.nextButtonClick.subscribe(() => {
+        nextCalled = true;
+      });
+
+      const iteratorButtons = getIteratorButtons();
+      iteratorButtons[0].click();
+      fixture.detectChanges();
+      tick();
+      expect(previousCalled).toEqual(true);
+      expect(nextCalled).toEqual(false);
+    }));
+
+    it('should emit if next button is clicked', fakeAsync(() => {
+      let previousCalled = false;
+      let nextCalled = false;
+
+      const flyoutInstance = openFlyout({
+        iterator: {
+          previousButtonDisabled: false,
+          nextButtonDisabled: false
+        }
+      });
+
+      flyoutInstance.iterator.previousButtonClick.subscribe(() => {
+        previousCalled = true;
+      });
+
+      flyoutInstance.iterator.nextButtonClick.subscribe(() => {
+        nextCalled = true;
+      });
+
+      const iteratorButtons = getIteratorButtons();
+      iteratorButtons[1].click();
+      fixture.detectChanges();
+      tick();
+      expect(previousCalled).toEqual(false);
+      expect(nextCalled).toEqual(true);
+    }));
+
+    it('should not emit if iterator buttons are clicked when config properties are disabled', fakeAsync(() => {
+      let previousCalled = false;
+      let nextCalled = false;
+
+      const flyoutInstance = openFlyout({
+        iterator: {
+          previousButtonDisabled: true,
+          nextButtonDisabled: true
+        }
+      });
+
+      flyoutInstance.iterator.previousButtonClick.subscribe(() => {
+        previousCalled = true;
+      });
+
+      flyoutInstance.iterator.nextButtonClick.subscribe(() => {
+        nextCalled = true;
+      });
+
+      const iteratorButtons = getIteratorButtons();
+      iteratorButtons[0].click();
+      iteratorButtons[1].click();
+      fixture.detectChanges();
+      tick();
+      expect(previousCalled).toEqual(false);
+      expect(nextCalled).toEqual(false);
+    }));
+  });
 });

src/app/public/modules/flyout/flyout.component.ts

@@ -251,6 +251,18 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {
     this.adapter.toggleIframePointerEvents(true);
   }
 
+  public onIteratorPreviousClick() {
+    if (this.config.iterator && !this.config.iterator.previousButtonDisabled) {
+      this.flyoutInstance.iterator.previousButtonClick.emit();
+    }
+  }
+
+  public onIteratorNextClick() {
+    if (this.config.iterator && !this.config.iterator.nextButtonDisabled) {
+      this.flyoutInstance.iterator.nextButtonClick.emit();
+    }
+  }
+
   private createFlyoutInstance<T>(component: T): SkyFlyoutInstance<T> {
     const instance = new SkyFlyoutInstance<T>();
 

src/app/public/modules/flyout/types/flyout-config.ts

@@ -6,6 +6,10 @@ import {
   SkyFlyoutPermalink
 } from './flyout-permalink';
 
+import {
+  SkyFlyoutIterator
+} from './flyout-iterator';
+
 export interface SkyFlyoutConfig {
   ariaDescribedBy?: string;
   ariaLabelledBy?: string;
@@ -16,4 +20,5 @@ export interface SkyFlyoutConfig {
   permalink?: SkyFlyoutPermalink;
   primaryAction?: SkyFlyoutAction;
   providers?: any[];
+  iterator?: SkyFlyoutIterator;
 }

src/app/public/modules/flyout/types/flyout-iterator.ts

@@ -0,0 +1,4 @@
+export interface SkyFlyoutIterator {
+  previousButtonDisabled: boolean;
+  nextButtonDisabled: boolean;
+}

src/app/public/modules/flyout/types/index.ts

@@ -3,3 +3,4 @@ export * from './flyout-message';
 export * from './flyout-message-type';
 export * from './flyout-action';
 export * from './flyout-permalink';
+export * from './flyout-iterator';

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

@@ -3,11 +3,32 @@
     class="sky-flyout-demo-item"
   >
     <button
-      type="button"
       class="sky-btn sky-btn-primary"
+      type="button"
       (click)="openFlyout(user)"
     >
       {{ user.name }}
     </button>
   </div>
+
+  <div
+    class="sky-flyout-demo-item"
+  >
+    <button
+      class="sky-btn sky-btn-primary"
+      id="open-flyout-with-iterators"
+      type="button"
+      (click)="openFlyoutWithIterators(users[0], false, false)"
+    >
+      Open flyout with row iterators enabled
+    </button>
+    <button
+      class="sky-btn sky-btn-primary"
+      id="open-flyout-with-iterators-disabled"
+      type="button"
+      (click)="openFlyoutWithIterators(users[0], true, true)"
+    >
+      Open flyout with row iterators disabled
+    </button>
+  </div>
 </div>