Changes related to iteration support

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

@@ -26,7 +26,10 @@
     (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-content">
+        <ng-container *ngTemplateOutlet="iteratorTemplate">
+        </ng-container>
+    </div>
     <div class="sky-flyout-header-buttons">
       <ng-container *ngTemplateOutlet="permalinkTemplate">
       </ng-container>
@@ -83,3 +86,20 @@
     </button>
   </ng-template>
 </ng-template>
+
+<ng-template class="" #iteratorTemplate>
+  <ng-template [ngIf]="iteratorDetail">
+    <button
+      (click)="invokeIterator(true)"
+      class="sky-btn sky-btn-default sky-flyout-btn-iterator"
+      [disabled]="iteratorDetail.previousIteratorIsDisabled">
+      <span class="ng-scope fa fa-chevron-up"></span>
+    </button>
+    <button
+      (click)="invokeIterator(false)"
+      class="sky-btn sky-btn-default sky-flyout-btn-iterator"
+      [disabled]="iteratorDetail.nextIteratorIsDisabled">
+        <span class="ng-scope fa fa-chevron-down"></span>
+    </button>
+  </ng-template>
+</ng-template>

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

@@ -16,7 +16,8 @@ import {
 } from '@skyux-sdk/testing';
 
 import {
-  SkyFlyoutConfig
+  SkyFlyoutConfig,
+  SkyFlyoutIterator
 } from './types';
 
 import {
@@ -81,13 +82,13 @@ describe('Flyout component', () => {
 
   function makeEvent(eventType: string, evtObj: any) {
     let evt = document.createEvent('MouseEvents');
-      evt.initMouseEvent(eventType, false, false, window, 0, 0, 0, evtObj.clientX,
-        0, false, false, false, false, 0, undefined);
+    evt.initMouseEvent(eventType, false, false, window, 0, 0, 0, evtObj.clientX,
+      0, false, false, false, false, 0, undefined);
     document.dispatchEvent(evt);
   }
 
   function getFlyoutElement(): HTMLElement {
-   return document.querySelector('.sky-flyout') as HTMLElement;
+    return document.querySelector('.sky-flyout') as HTMLElement;
   }
 
   function getFlyoutHandleElement(): HTMLElement {
@@ -106,6 +107,10 @@ describe('Flyout component', () => {
     return document.querySelector('.sky-flyout-btn-permalink') as HTMLElement;
   }
 
+  function getIteratorButtonElement(): NodeListOf<HTMLButtonElement> {
+    return document.querySelectorAll('.sky-flyout-btn-iterator') as NodeListOf<HTMLButtonElement>;
+  }
+
   function getPrimaryActionButtonElement(): HTMLElement {
     return document.querySelector('.sky-flyout-btn-primary-action') as HTMLElement;
   }
@@ -314,61 +319,61 @@ describe('Flyout component', () => {
   );
 
   it('should resize when handle is dragged', fakeAsync(() => {
-      openFlyout({});
-      const flyoutElement = getFlyoutElement();
-      const handleElement = getFlyoutHandleElement();
+    openFlyout({});
+    const flyoutElement = getFlyoutElement();
+    const handleElement = getFlyoutHandleElement();
 
-      expect(flyoutElement.style.width).toBe('500px');
+    expect(flyoutElement.style.width).toBe('500px');
 
-      let evt = document.createEvent('MouseEvents');
-      evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
-        0, false, false, false, false, 0, undefined);
+    let evt = document.createEvent('MouseEvents');
+    evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
+      0, false, false, false, false, 0, undefined);
 
-      handleElement.dispatchEvent(evt);
-      makeEvent('mousemove', { clientX: 1100 });
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('400px');
-      makeEvent('mousemove', { clientX: 1000 });
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('500px');
-      makeEvent('mouseup', {});
+    handleElement.dispatchEvent(evt);
+    makeEvent('mousemove', { clientX: 1100 });
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('400px');
+    makeEvent('mousemove', { clientX: 1000 });
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('500px');
+    makeEvent('mouseup', {});
   }));
 
   it('should resize flyout when range input is changed', fakeAsync(() => {
-      openFlyout({});
-      const flyoutElement = getFlyoutElement();
-      expect(flyoutElement.style.width).toBe('500px');
-      let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');
+    openFlyout({});
+    const flyoutElement = getFlyoutElement();
+    expect(flyoutElement.style.width).toBe('500px');
+    let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');
 
-      resizeInput.value = '400';
-      SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('400px');
+    resizeInput.value = '400';
+    SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('400px');
 
-      resizeInput.value = '500';
-      SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('500px');
+    resizeInput.value = '500';
+    SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('500px');
   }));
 
   it('should have correct aria-labels on resizing range input', fakeAsync(() => {
-      openFlyout({maxWidth: 1000, minWidth: 200});
-      const flyoutElement = getFlyoutElement();
-      let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');
+    openFlyout({ maxWidth: 1000, minWidth: 200 });
+    const flyoutElement = getFlyoutElement();
+    let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');
 
-      expect(flyoutElement.style.width).toBe('500px');
-      expect(resizeInput.getAttribute('aria-controls')).toBe(flyoutElement.id);
+    expect(flyoutElement.style.width).toBe('500px');
+    expect(resizeInput.getAttribute('aria-controls')).toBe(flyoutElement.id);
 
-      expect(resizeInput.getAttribute('aria-valuenow')).toBe('500');
-      expect(resizeInput.getAttribute('aria-valuemax')).toBe('1000');
-      expect(resizeInput.getAttribute('aria-valuemin')).toBe('200');
+    expect(resizeInput.getAttribute('aria-valuenow')).toBe('500');
+    expect(resizeInput.getAttribute('aria-valuemax')).toBe('1000');
+    expect(resizeInput.getAttribute('aria-valuemin')).toBe('200');
 
-      expect(resizeInput.getAttribute('max')).toBe('1000');
-      expect(resizeInput.getAttribute('min')).toBe('200');
+    expect(resizeInput.getAttribute('max')).toBe('1000');
+    expect(resizeInput.getAttribute('min')).toBe('200');
   }));
 
   it('should set iframe styles correctly during dragging', fakeAsync(() => {
@@ -392,33 +397,33 @@ describe('Flyout component', () => {
   }));
 
   it('should respect minimum and maximum when resizing', fakeAsync(() => {
-      openFlyout({ maxWidth: 1000, minWidth: 200});
-      const flyoutElement = getFlyoutElement();
-      const handleElement = getFlyoutHandleElement();
+    openFlyout({ maxWidth: 1000, minWidth: 200 });
+    const flyoutElement = getFlyoutElement();
+    const handleElement = getFlyoutHandleElement();
 
-      expect(flyoutElement.style.width).toBe('500px');
-      let evt = document.createEvent('MouseEvents');
-      evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
-        0, false, false, false, false, 0, undefined);
-      handleElement.dispatchEvent(evt);
-      makeEvent('mousemove', { clientX: 500 });
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('1000px');
-      makeEvent('mousemove', { clientX: 200 });
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('1000px');
-      makeEvent('mousemove', { clientX: 1300 });
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('200px');
-      makeEvent('mousemove', { clientX: 1400 });
-      fixture.detectChanges();
-      tick();
-      expect(flyoutElement.style.width).toBe('200px');
-      makeEvent('mouseup', {});
-    })
+    expect(flyoutElement.style.width).toBe('500px');
+    let evt = document.createEvent('MouseEvents');
+    evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
+      0, false, false, false, false, 0, undefined);
+    handleElement.dispatchEvent(evt);
+    makeEvent('mousemove', { clientX: 500 });
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('1000px');
+    makeEvent('mousemove', { clientX: 200 });
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('1000px');
+    makeEvent('mousemove', { clientX: 1300 });
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('200px');
+    makeEvent('mousemove', { clientX: 1400 });
+    fixture.detectChanges();
+    tick();
+    expect(flyoutElement.style.width).toBe('200px');
+    makeEvent('mouseup', {});
+  })
   );
 
   it('should not resize when handle is not clicked',
@@ -652,4 +657,73 @@ describe('Flyout component', () => {
       })
     );
   });
+
+  describe('iterator', () => {
+    it('should not show the iterator button if no iterator config properties are defined',
+      fakeAsync(() => {
+        openFlyout();
+        const iteratorButtons = getIteratorButtonElement();
+        expect(iteratorButtons.length).toEqual(0);
+      })
+    );
+
+    it('should show disabled iterator buttons if iterator config properties are set to disabled',
+      fakeAsync(() => {
+        openFlyout({
+          iterator: <SkyFlyoutIterator>{
+            previousIteratorIsDisabled: true,
+            nextIteratorIsDisabled: true,
+            previousIteratorButtonClick: () => undefined,
+            nextIteratorButtonClick: () => undefined
+          }
+        });
+        const iteratorButtons = getIteratorButtonElement();
+        expect(iteratorButtons.length).toEqual(2);
+        expect(iteratorButtons[0].disabled).toBeTruthy();
+        expect(iteratorButtons[1].disabled).toBeTruthy();
+      })
+    );
+
+    it('should call previousIteratorButtonClick callback if previous button is clicked',
+      fakeAsync(() => {
+        let callbackClicked: boolean = false;
+        openFlyout({
+          iterator: <SkyFlyoutIterator>{
+            previousIteratorIsDisabled: false,
+            nextIteratorIsDisabled: false,
+            previousIteratorButtonClick: () => {
+              callbackClicked = true;
+            },
+            nextIteratorButtonClick: () => undefined
+          }
+        });
+        const iteratorButtons = getIteratorButtonElement();
+        iteratorButtons[0].click();
+        fixture.detectChanges();
+        tick();
+        expect(callbackClicked).toBeTruthy();
+      })
+    );
+
+    it('should call nextIteratorButtonClick callback if next button is clicked',
+      fakeAsync(() => {
+        let callbackClicked: boolean = false;
+        openFlyout({
+          iterator: <SkyFlyoutIterator>{
+            previousIteratorIsDisabled: false,
+            nextIteratorIsDisabled: false,
+            previousIteratorButtonClick: () => undefined,
+            nextIteratorButtonClick: () => {
+              callbackClicked = true;
+            }
+          }
+        });
+        const iteratorButtons = getIteratorButtonElement();
+        iteratorButtons[1].click();
+        fixture.detectChanges();
+        tick();
+        expect(callbackClicked).toBeTruthy();
+      })
+    );
+  });
 });

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

@@ -46,7 +46,8 @@ import {
   SkyFlyoutConfig,
   SkyFlyoutMessage,
   SkyFlyoutMessageType,
-  SkyFlyoutPermalink
+  SkyFlyoutPermalink,
+  SkyFlyoutIterator
 } from './types';
 
 const FLYOUT_OPEN_STATE = 'flyoutOpen';
@@ -111,6 +112,10 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {
     return {};
   }
 
+  public get iteratorDetail(): SkyFlyoutIterator {
+    return this.config.iterator;
+  }
+
   public get primaryActionLabel(): string {
     if (this.config.primaryAction && this.config.primaryAction.label) {
       return this.config.primaryAction.label;
@@ -200,6 +205,20 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {
     return false;
   }
 
+  public invokeIterator(showPrevious: boolean) {
+    let iteratorDetail = this.iteratorDetail;
+
+    if (iteratorDetail) {
+      if (showPrevious && iteratorDetail.previousIteratorButtonClick) {
+        iteratorDetail.previousIteratorButtonClick();
+      } else if (!showPrevious && iteratorDetail.nextIteratorButtonClick) {
+        iteratorDetail.nextIteratorButtonClick();
+      }
+    }
+
+    return false;
+  }
+
   public getAnimationState(): string {
     return (this.isOpening) ? FLYOUT_OPEN_STATE : FLYOUT_CLOSED_STATE;
   }
@@ -268,16 +287,16 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {
     /* tslint:disable-next-line:switch-default */
     switch (message.type) {
       case SkyFlyoutMessageType.Open:
-      if (!this.isOpen) {
-        this.isOpen = false;
-        this.isOpening = true;
-      }
-      break;
+        if (!this.isOpen) {
+          this.isOpen = false;
+          this.isOpening = true;
+        }
+        break;
 
       case SkyFlyoutMessageType.Close:
-      this.isOpen = true;
-      this.isOpening = false;
-      break;
+        this.isOpen = true;
+        this.isOpening = false;
+        break;
     }
 
     this.changeDetector.markForCheck();

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,6 @@
+export interface SkyFlyoutIterator {
+    previousIteratorIsDisabled: boolean;
+    nextIteratorIsDisabled: boolean;
+    previousIteratorButtonClick: () => void;
+    nextIteratorButtonClick: () => void;
+}